<!DOCTYPE html>
<html>
<head>
  <title>DANE-web</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <meta charset="UTF-8">
</head>
<body>

<div id="app">
<v-app> 
  <v-app-bar flat app>
      <v-toolbar-title>DANE</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-btn icon
     v-on:click="$refs.apiform.dialog = true">
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>

      <template v-slot:extension>
        <v-tabs
          v-model="tab"
          fixed-tabs
        >
          <v-tabs-slider></v-tabs-slider>
          <v-tab
            href="#overview"
            class="primary--text"
          >
            Overview
          </v-tab>
        <v-tab v-show="false"
            href="#document"
            class="primary--text"
          >
            Document
          </v-tab>
            <v-tab v-show="false"
            href="#worker"
            class="primary--text"
          >
          Worker
          </v-tab>
          <v-tab
            href="#workers"
            class="primary--text"
          >
          Workers
          </v-tab>
        </v-tabs>
      </template>
    </v-app-bar>

    <v-main>
      <v-container>
    <v-tabs-items v-model="tab">
      <v-tab-item value="overview">
        <v-toolbar dense flat>
          <v-toolbar-title class="overline">Document overview</v-toolbar-title>

          <v-spacer></v-spacer>

          <dane-newdoc v-on:refresh="$refs.docsearch.clickRow($event); $refs.docsearch.search();"></dane-newdoc>
        </v-toolbar>
        <v-divider></v-divider>
        <dane-doc-search ref="docsearch"></dane-doc-search>
      </v-tab-item>

      <v-tab-item value="document">
        <dane-document :doc_id="doc" v-on:deleteddoc="goOverview(); $refs.docsearch.search();"></dane-document>
      </v-tab-item>

      <v-tab-item value="workers"> 
          <dane-workers></dane-workers>
      </v-tab-item>

      <v-tab-item value="worker"> 
        <dane-worker-details :taskkey="worker"></dane-worker-details>
      </v-tab-item>
    </v-tabs-items>

      </v-container>
    </v-main>
    <confirm ref="confirm"></confirm>
    <api-form ref="apiform"></api-form>
</v-app> 
</div>

<template id="dane-document">
  <div>
  <v-card
    class="mx-auto my-2"
    outlined
    :loading="loading"
  > 
  <div v-if="doc.hasOwnProperty('target')">
    <v-card-title class="headline">{{ doc._id }}
        <v-spacer></v-spacer>
      <v-chip color="primary">{{ doc.target.type }}</v-chip>
    </v-card-title>

    <v-card-subtitle>
      {{ doc.target.id }} - <a :href="doc.target.url" target="_blank">{{ doc.target.url }}</a>
    </v-card-subtitle>

    <v-card-text align="right">
      by {{ doc.creator.id }} &nbsp; <v-chip color="secondary" small outlined>{{ doc.creator.type }}</v-chip>
    </v-card-text>

    <v-divider></v-divider>

    <v-card-actions>
      <div class="text-overline" display="inline-block" v-if="doc.created_at !== null">Created at: {{ doc.created_at }}</div>&nbsp;
      <div class="text-overline" display="inline-block" v-if="doc.updated_at !== null && doc.updated_at != doc.created_at">Last updated at: {{ doc.updated_at }}</div>
      <v-spacer></v-spacer>
      <dane-newtask v-model="doc._id" v-on:newtask="loadTasks()"></dane-newtask>
      <v-btn text small @click.stop="dialog = true">view JSON</v-btn>
      <v-btn text small @click="deleteDoc">Delete</v-btn>
    </v-card-actions>

    <v-dialog
      v-model="dialog"
      max-width="500"
    >
      <v-card>
        <v-card-title class="headline">Document JSON</v-card-title>

        <v-card-text>
          <pre>{{ JSON.stringify(doc, null, 2) }}</pre>
        </v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>

          <v-btn
            text
            @click="dialog = false"
          >
            Close
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
   </div>
   <div v-else-if="errored">
          <v-alert type="error">Unable to load document.</v-alert>
  </div>
  <div v-else class="text-center">
        Loading document..
  </div>
  </v-card>
    <v-subheader v-if="tasks.length > 0">Tasks assigned to this document:</v-subheader>
    <v-subheader v-else-if="!errored">No tasks assigned to this document.</v-subheader>
    <dane-tasklist v-model="tasks" v-on:newval="newVal($event)"></dane-tasklist>
    </div>
 </template>

 <template id="dane-doc-search">
   <v-sheet flat>
    <dane-doc-searchbar @input="results = arguments[0]" ref="searchbar"></dane-doc-searchbar>
 
    <v-data-table v-if="results.length > 0"
    :headers="headers"
    :items="results"
    :items-per-page="10"
    :sort-by="['creator.id']"
    @click:row="clickRow"
  ></v-data-table>
     </v-sheet>
 </template>

 <template id="dane-doc-searchbar">
   <v-form v-on:submit.prevent>
    <v-container>
      <v-row>
        <v-col cols="5">
      <v-text-field
        flat
        hide-details
        label="target id"
        v-model="target"
        prepend-inner-icon="search"
        ></v-text-field>
        </v-col>

        <v-col cols="5">
      <v-text-field
        flat
        hide-details
        label="creator id"
        v-model="creator"
        prepend-inner-icon="search"
        ></v-text-field>
        </v-col>

        <v-col cols="2">
        <v-btn @click.stop="search" text type="submit">
          Search</v-btn>
        </v-col>
        </v-row>
        <v-container>
   </v-form>
 </template>

 <template id="dane-tasklist">
   <div>
   <v-card v-for="task in value"
    class="mx-auto my-2"
    outlined
    :key="task._id"
  > 
  <v-card-title class="headline">{{ task._id }}&nbsp;<v-chip v-if="task.priority > 1">{{ task.priority }}</v-chip></v-card-title>
     <v-card-subtitle><v-btn small text @click="goTask(task.key)">{{ task.key }}</v-btn></v-card-subtitle>

  <v-card-text class="text--primary">
    <v-chip :color="colour(task.state)"><strong>{{ task.state }}</strong></v-chip> {{ task.msg }}
    <div v-if="task.args['*'] !== null">
      <br/><b>Task arguments:</b>
      <ul>
    <li v-for="v,p in task.args">
      {{ p }}: {{ v }}
    </li>
      </ul>
    </div>
  </v-card-text>
    <v-divider></v-divider>
      <v-card-actions>
      <div class="text-overline" display="inline-block" v-if="task.created_at !== null">Created at: {{ task.created_at }}</div>&nbsp;
      <div class="text-overline" display="inline-block" v-if="task.updated_at !== null && task.updated_at !== task.created_at">Last updated at: {{ task.updated_at }}</div>
        <v-spacer></v-spacer>

        <v-btn v-if="in_doc.trim() == 'false'"
          small text
          @click="goDoc(task._id)"
        >
        Go to document 
        </v-btn>
        <v-btn
          small text
          @click="retryTask(task._id)"
        >
        Retry 
        </v-btn>
          <v-btn
          small text
          @click="forceRetryTask(task._id)"
        >
        Force retry 
        </v-btn>
        <v-btn
          small text
          @click="resetTask(task._id)"
        >
        Reset 
        </v-btn>
            <v-btn
          small text
          @click="deleteTask(task._id)"
        >
        Delete 
        </v-btn>
      </v-card-actions>
   </v-card>
   </div>
 </template>

 <template id="dane-workers">
   <v-sheet flat>
 
    <v-data-table v-if="results.length > 0"
    :headers="headers"
    :items="results"
    :items-per-page="15"
    @click:row="clickRow"
  ></v-data-table>
     </v-sheet>
 </template>

 <template id="dane-worker-details">
   <div>
     <template v-if="taskcount > 0">
    <v-alert type="error">
      {{ taskcount }} errored tasks found for worker {{ taskkey }}!
    </v-alert>
    <v-form>
      <v-container>
        <v-row>
          <v-col cols="4">
      Reset all tasks with state 
          </v-col>
          <v-col cols="4">
          <v-select
             v-model="state"
             :items="resetstates"
          label="State"
          required
        ></v-select>
          </v-col>
          <v-col cols="4">
            <v-btn @click="massreset">Go</v-btn>
          </v-col>
        </v-row>
        <v-row v-if="resetres.length > 0">
          <v-col>
            <v-card class="grey lighten-5">
              <v-card-text>
          {{ resetres }}
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
    <dane-tasklist v-model="tasks" v-on:newval="newVal($event)" in_doc="false"></dane-tasklist>
     </template>
      <v-alert type="success" v-else>
        No error state tasks found for worker {{ taskkey }}.
    </v-alert>
   </div>
 </template>

<template id="dane-newdoc">
    <v-dialog v-model="dialog" max-width="600px">
      <template v-slot:activator="{ on }">
      <v-btn text v-on="on" color="primary" icon>
        <v-icon>mdi-file-document-box-plus</v-icon>
      </v-btn>
      </template>
      <v-card>
        <v-card-title>
          <span class="headline">New document</span>
        </v-card-title>
        <v-card-text>
          <div class="red--text subtitle-1" v-if="state.length > 0">{{ state }}</div>
          <v-container>
            <v-row>
              <v-col cols="6">
                <v-text-field label="Target id" required v-model="target_id"></v-text-field>
              </v-col>
              <v-col cols="6">
                <v-select
                :items="types"
                label="Target type"
                v-model="target_type"
                ></v-select>
              </v-col>
              <v-col cols="12">
                <v-text-field label="Target url" required v-model="target_url"></v-text-field>
              </v-col>
            </v-row>

            <v-row>
              <v-col cols="6">
                <v-text-field label="Creator id" required v-model="creator_id"></v-text-field>
              </v-col>
              <v-col cols="6">
                <v-select
                :items="agents"
                  label="Creator type"
                v-model="creator_type"
                ></v-select>
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="dialog = false">Close</v-btn>
          <v-btn color="blue darken-1" text @click="newjob()">Submit</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
</template>

<template id="dane-newtask">
    <v-dialog v-model="dialog" max-width="600px">
      <template v-slot:activator="{ on }">
      <v-btn text v-on="on" color="primary" icon>
        <v-icon>mdi-note-plus</v-icon>
      </v-btn>
      </template>
      <v-card>
        <v-card-title>
          <span class="headline">Assign new task to {{ value }}</span>
        </v-card-title>
        <v-card-text>
          <div class="red--text subtitle-1" v-if="state.length > 0">{{ state }}</div>
            <v-text-field label="Task key" required v-model="task_key"></v-text-field>

        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="dialog = false">Close</v-btn>
          <v-btn color="blue darken-1" text @click="assign()">Submit</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
</template>

<template id="api-form">
    <v-dialog v-model="dialog" max-width="600px">
      <v-card>
        <v-card-title>
          <span class="headline">Specify API url.</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <v-col cols="12">
                <v-text-field label="API url*" required v-model="new_api"></v-text-field>
              </v-col>
            </v-row>
          </v-container>
          <small>*indicates required field</small>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="update">Connect</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
</template>

<template id="confirm">
  <v-dialog v-model="dialog" :max-width="options.width" :style="{ zIndex: options.zIndex }" @keydown.esc="cancel">
    <v-card>
      <v-toolbar dark :color="options.color" dense flat>
        <v-toolbar-title class="white--text">{{ title }}</v-toolbar-title>
      </v-toolbar>
      <v-card-text v-show="!!message" class="pa-4">{{ message }}</v-card-text>
      <v-card-actions class="pt-0">
        <v-spacer></v-spacer>
        <v-btn color="primary darken-1" text @click.native="agree">Yes</v-btn>
        <v-btn color="grey" text @click.native="cancel">Cancel</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<style>
.hide-active-header > .v-expansion-panel-header--active {
 color: transparent;
}
</style>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script src="js/index.js"></script>
</body>
</html>
