Add quick actions and mass resources to level upgrade

src/Dashboard/Components/DashboardApp.vue

@@ -3,6 +3,8 @@
     <div id="dashboard-inner">
       <hdr></hdr>
       <task-list></task-list>
+      <hr class="separator" />
+      <quick-actions></quick-actions>
     </div>
   </main>
 </template>
@@ -10,10 +12,12 @@
 <script>
 import Header from './Header';
 import TaskList from './TaskList';
+import QuickActions from './QuickActions';
 export default {
   components: {
     hdr: Header,
     'task-list': TaskList,
+    'quick-actions': QuickActions,
   },
   data() {
     return {};
@@ -38,5 +42,9 @@ export default {
 #dashboard-inner {
   background-color: white;
   margin: 4px;
+  padding-bottom: 10px;
+}
+.separator {
+  margin: 10px auto;
 }
 </style>

src/Dashboard/Components/QuickActions.vue

@@ -0,0 +1,34 @@
+<template>
+  <ul class="actions">
+    <li v-for="action in actions">
+      <a href="#" v-on:click.prevent="onAction(action.cb)">{{ action.label }}</a>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      shared: this.$root.$data,
+    };
+  },
+  computed: {
+    actions() {
+      return this.shared.quickActions;
+    },
+  },
+  methods: {
+    onAction(cb) {
+      cb();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.actions {
+  margin: 10px auto;
+  padding-inline-start: 20px;
+}
+</style>

src/Dashboard/Components/TaskList.vue

@@ -3,9 +3,12 @@
     <p class="summary">Task count: {{ shared.taskList.length }}</p>
     <div class="container">
       <table class="task-table">
-        <tr class="task-item" v-for="task in shared.taskList">
+        <tr v-for="task in shared.taskList" class="task-item" :class="{ 'this-village': isThisVillageTask(task) }">
           <td :title="formatDate(task.ts)">{{ formatDate(task.ts) }}</td>
           <td :title="task.id">{{ task.id }}</td>
+          <td>
+            <a href="#" title="Remove task" class="remove-action" v-on:click.prevent="onRemove(task.id)">&times;</a>
+          </td>
           <td :title="task.name">{{ task.name }}</td>
           <td :title="JSON.stringify(task.args)">{{ JSON.stringify(task.args) }}</td>
         </tr>
@@ -23,11 +26,21 @@ export default {
       shared: this.$root.$data,
     };
   },
+  computed: {},
   methods: {
     formatDate(ts) {
       const d = new Date(ts * 1000);
       return dateFormat(d, 'HH:MM:ss');
     },
+    isThisVillageTask(task) {
+      const taskVillageId = (task.args || {}).villageId;
+      const currentVillageId = (this.shared.village || {}).id;
+      return taskVillageId !== undefined && taskVillageId === currentVillageId;
+    },
+    onRemove(taskId) {
+      console.log('ON REMOVE TASK', taskId);
+      this.shared.removeTask(taskId);
+    },
   },
 };
 </script>
@@ -54,4 +67,11 @@ export default {
   padding: 2px 4px;
   max-width: 25%;
 }
+.this-village {
+  color: blue;
+}
+.remove-action {
+  font-weight: bold;
+  color: red;
+}
 </style>

src/Dashboard/Dashboard.ts

@@ -1,14 +1,18 @@
 import * as URLParse from 'url-parse';
-import { markPage, uniqId, waitForLoad } from '../utils';
+import { uniqId, waitForLoad } from '../utils';
 import { Scheduler } from '../Scheduler';
-import { TaskQueueRenderer } from '../TaskQueueRenderer';
 import { BuildPage } from '../Page/BuildPage';
 import { UpgradeBuildingTask } from '../Task/UpgradeBuildingTask';
-import { grabResources } from '../Page/ResourcesBlock';
-import { grabActiveVillage, grabActiveVillageId, grabVillageList } from '../Page/VillageBlock';
-import { onResourceSlotCtrlClick, showBuildingSlotIds, showResourceSlotIds } from '../Page/SlotBlock';
+import { grabActiveVillage, grabActiveVillageId } from '../Page/VillageBlock';
+import {
+    grabResourceDeposits,
+    onResourceSlotCtrlClick,
+    showBuildingSlotIds,
+    showResourceSlotIds,
+} from '../Page/SlotBlock';
 import Vue from 'vue';
 import DashboardApp from './Components/DashboardApp.vue';
+import { ResourcesToLevel } from '../Task/ResourcesToLevel';
 
 export class Dashboard {
     private readonly version: string;
@@ -25,45 +29,54 @@ export class Dashboard {
         const p = new URLParse(window.location.href, true);
         this.log('PARSED LOCATION', p);
 
-        const res = grabResources();
-        this.log('RES', res);
-
-        const villages = grabVillageList();
-        this.log('VILL', villages);
-
         const villageId = grabActiveVillageId();
 
+        const scheduler = this.scheduler;
+        const quickActions: any[] = [];
+
         const state = {
             name: 'Dashboard',
             village: grabActiveVillage(),
             version: this.version,
             taskList: this.scheduler.getTaskItems(),
+            quickActions: quickActions,
+
+            refreshTasks() {
+                this.taskList = scheduler.getTaskItems();
+            },
+
+            removeTask(taskId: string) {
+                scheduler.removeTask(taskId);
+                this.taskList = scheduler.getTaskItems();
+            },
         };
 
-        const appId = `app-${uniqId()}`;
-        jQuery('body').prepend(`<div id="${appId}"></div>`);
-        new Vue({
-            el: `#${appId}`,
-            data: state,
-            render: h => h(DashboardApp),
-        });
+        setInterval(() => state.refreshTasks(), 1000);
 
-        // markPage('Dashboard', this.version);
-        // this.renderTaskQueue();
-        // setInterval(() => this.renderTaskQueue(), 5000);
+        const deposits = grabResourceDeposits();
+        if (deposits.length) {
+            const sorted = deposits.sort((x, y) => x.level - y.level);
+            const minLevel = sorted[0].level;
+            for (let i = minLevel + 1; i < minLevel + 4; ++i) {
+                quickActions.push({
+                    label: `Ресурсы до уровня ${i}`,
+                    cb: () => {
+                        scheduler.scheduleTask(ResourcesToLevel.name, { villageId, level: i });
+                        state.refreshTasks();
+                    },
+                });
+            }
+        }
 
         const tasks = this.scheduler.getTaskItems();
         const buildingsInQueue = tasks
             .filter(t => t.name === UpgradeBuildingTask.name && t.args.villageId === villageId)
-            .map(t => t.args.buildId);
+            .map(t => t.args.buildId || 0);
 
         if (p.pathname === '/dorf1.php') {
             showResourceSlotIds(buildingsInQueue);
-            onResourceSlotCtrlClick(buildId => {
-                this.scheduler.scheduleTask(UpgradeBuildingTask.name, { villageId, buildId });
-                const n = new Notification(`Building ${buildId} scheduled`);
-                setTimeout(() => n && n.close(), 4000);
-            });
+            onResourceSlotCtrlClick(buildId => this.onResourceSlotCtrlClick(villageId, buildId, state));
+            console.log(grabResourceDeposits());
         }
 
         if (p.pathname === '/dorf2.php') {
@@ -73,11 +86,25 @@ export class Dashboard {
         if (p.pathname === '/build.php') {
             new BuildPage(this.scheduler, Number(p.query.id)).run();
         }
+
+        this.createControlPanel(state);
     }
 
-    private renderTaskQueue() {
-        this.log('RENDER TASK QUEUE');
-        new TaskQueueRenderer().render(this.scheduler.getTaskItems());
+    private createControlPanel(state) {
+        const appId = `app-${uniqId()}`;
+        jQuery('body').prepend(`<div id="${appId}"></div>`);
+        new Vue({
+            el: `#${appId}`,
+            data: state,
+            render: h => h(DashboardApp),
+        });
+    }
+
+    private onResourceSlotCtrlClick(villageId: number, buildId: number, state) {
+        this.scheduler.scheduleTask(UpgradeBuildingTask.name, { villageId, buildId });
+        state.refreshTasks();
+        const n = new Notification(`Building ${buildId} scheduled`);
+        setTimeout(() => n && n.close(), 4000);
     }
 
     private log(...args) {