Add village task list and task removing

src/DashboardView/Dashboard.vue

@@ -55,7 +55,8 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import 'style';
 #dashboard {
   position: absolute;
   display: flex;
@@ -68,11 +69,9 @@ export default {
   box-sizing: border-box;
 }
 #dashboard-primary {
-  /*height: 100vh;*/
-  /*overflow-y: scroll;*/
   background-color: white;
-  width: 500px;
+  width: $panel-size;
-  padding: 5px;
+  padding: $panel-padding;
 }
 #dashboard-secondary {
   background-color: transparent;

src/DashboardView/Store.ts

@@ -20,6 +20,7 @@ export enum Actions {
     OpenVillageEditor = 'open_village_editor',
     SaveVillageSettings = 'save_village_settings',
     ToggleVillageReceiveMode = 'toggle_village_receive_mode',
+    RemoveVillageTask = 'remove_village_task',
 }
 
 export function createStore(villageFactory: VillageFactory) {
@@ -103,6 +104,10 @@ export function createStore(villageFactory: VillageFactory) {
                 const controller = villageFactory.createController(villageId);
                 controller.toggleReceiveResourcesMode();
             },
+            [Actions.RemoveVillageTask]({}, { villageId, taskId }) {
+                const controller = villageFactory.createController(villageId);
+                controller.removeTask(taskId);
+            },
         },
     });
 

src/DashboardView/VillageStateList.vue

@@ -21,7 +21,10 @@
               :title="villageHint(villageState)"
             >
               {{ villageState.village.name }}
-              [<a href="#" v-on:click.prevent="openEditor(villageState.id)">ред</a>]:
+              [
+              <a href="#" v-on:click.prevent="openEditor(villageState.id)">ред</a>,
+              <a href="#" v-on:click.prevent="toggleTaskList(villageState.id)">здч</a>
+              ]:
             </td>
             <td class="right">
               <filling
@@ -96,6 +99,12 @@
           </tr>
 
           <status-line class="second-line" :village-state="villageState" />
+
+          <tr class="task-list-line" v-if="isTaskListVisible(villageState.id)">
+            <td class="right" colspan="7">
+              <village-task-list :village-id="villageState.id" :tasks="villageState.tasks" />
+            </td>
+          </tr>
         </template>
       </tbody>
     </table>
@@ -111,6 +120,7 @@ import { Actions } from './Store';
 import { translateProductionQueue } from '../Core/ProductionQueue';
 import VillageStateResourceLine from './VillageStateResourceLine';
 import VillageStateStatusLine from './VillageStateStatusLine';
+import VillageTaskList from './VillageTaskList';
 
 function secondsToTime(value) {
   if (value === 0) {
@@ -124,6 +134,7 @@ function secondsToTime(value) {
 
 export default {
   components: {
+    VillageTaskList,
     'resource': ResourceBalance,
     'filling': VillageResource,
     'resource-line': VillageStateResourceLine,
@@ -132,7 +143,7 @@ export default {
   data() {
     return {
       shared: this.$root.$data,
-      extendedView: {},
+      taskListView: {},
     };
   },
   methods: {
@@ -177,13 +188,21 @@ export default {
     queueTitle(queue) {
       return translateProductionQueue(queue);
     },
+    toggleTaskList(villageId) {
+      this.taskListView[villageId] = !this.taskListView[villageId];
+    },
+    isTaskListVisible(villageId) {
+      return !!this.taskListView[villageId];
+    },
   },
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import 'style';
 .village-table {
   width: 100%;
+  max-width: 100%;
   border-collapse: collapse;
 }
 
@@ -199,6 +218,12 @@ export default {
   padding: 0 4px 4px;
 }
 
+.task-list-line td {
+  padding: 0;
+  max-width: $panel-work-area;
+  overflow: hidden;
+}
+
 .filling-line td {
   padding: 0;
   border: 1px solid #ddd;

src/DashboardView/VillageTaskList.vue

@@ -0,0 +1,66 @@
+<template>
+  <table class="task-list">
+    <tr v-for="task in tasks">
+      <td class="col-name" v-text="task.name" :title="task.name + ', ' + task.id"></td>
+      <td class="col-actions">
+        <a href="#" class="action" @click.prevent="upTask(task.id)" title="Поднять задачу">up</a>
+        <a href="#" class="action" @click.prevent="downTask(task.id)" title="Опустить задачу">dn</a>
+        <a href="#" class="action" @click.prevent="removeTask(task.id)" title="Удалить задачу">x</a>
+      </td>
+      <td class="col-args">
+        <span
+          class="args-text"
+          v-text="JSON.stringify(task.args)"
+          :title="JSON.stringify(task.args)"
+        >
+        </span>
+      </td>
+    </tr>
+  </table>
+</template>
+
+<script>
+import { Actions } from './Store';
+
+export default {
+  props: ['villageId', 'tasks'],
+  computed: {},
+  methods: {
+    upTask(taskId) {},
+    downTask(taskId) {},
+    removeTask(taskId) {
+      this.$store.dispatch(Actions.RemoveVillageTask, { villageId: this.villageId, taskId });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import 'style';
+.task-list {
+  @extend %table;
+}
+.col-name {
+  width: 20%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.col-actions {
+  white-space: nowrap;
+  max-width: 20%;
+}
+.col-args {
+  width: 60%;
+}
+.args-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.action {
+  display: inline-block;
+}
+.action + .action {
+  margin-left: 0.3em;
+}
+</style>

src/DashboardView/style.scss

@@ -1,3 +1,7 @@
+$panel-size: 500px;
+$panel-padding: 5px;
+$panel-work-area: $panel-size - 2 * $panel-padding;
+
 $component-padding-x: 4px;
 $component-padding-y: 2px;
 
@@ -11,6 +15,7 @@ $waring-color: #d49e00;
 
 %table {
   width: 100%;
+  max-width: 100%;
   border-collapse: collapse;
   margin: 6px auto 0;
 

src/VillageState.ts

@@ -76,6 +76,7 @@ interface VillageOwnState {
     storageOptimumFullness: Resources;
     isOverflowing: boolean;
     queues: VillageProductionQueueStateDict;
+    tasks: Array<Task>;
     firstReadyTask: Task | undefined;
     /**
      * Required resources for nearest task
@@ -257,6 +258,7 @@ function createVillageOwnState(
         storageOptimumFullness,
         isOverflowing,
         queues,
+        tasks: taskCollection.getTasks(),
         firstReadyTask,
         frontierRequired: makeResourceBalance(frontierResources, resources, performance),
         totalRequired: makeResourceBalance(totalRequiredResources, resources, performance),