Add component to view resource line

src/DashboardView/VillageStateList.vue

@@ -8,15 +8,16 @@
           <th class="right">Глина</th>
           <th class="right">Железо</th>
           <th class="right">Зерно</th>
-          <th class="right">Время</th>
+          <th class="right" title="Время до окончания добычи необходимых ресурсов">Рес.</th>
+          <th class="right" title="Время до окончания выполнения текущей задачи">Очередь</th>
         </tr>
       </thead>
       <tbody>
         <template v-for="villageState in shared.villageStates">
           <tr class="normal-line top-line">
-            <td :class="{ active: villageState.village.active }" :title="villageHint(villageState)">
+            <td class="right" :class="{ active: villageState.village.active }" :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>]:
             </td>
             <td class="right">
               <filling
@@ -47,6 +48,7 @@
               ></filling>
             </td>
             <td class="right" v-text="storageTime(villageState)"></td>
+            <td></td>
           </tr>
 
           <tr class="performance-line">
@@ -64,6 +66,7 @@
               <resource :value="villageState.performance.crop"></resource>
             </td>
             <td></td>
+            <td></td>
           </tr>
 
           <tr class="required-line">
@@ -100,112 +103,57 @@
                 :sign="false"
               ></resource>
             </td>
-            <td class="right" v-text="renderTimeInSeconds(villageState.buildRemainingSeconds)"></td>
-          </tr>
-
-          <tr class="required-line">
-            <td class="right">Баланс задачи:</td>
-            <td class="right">
-              <resource :value="villageState.required.balance.lumber"></resource>
-            </td>
-            <td class="right">
-              <resource :value="villageState.required.balance.clay"></resource>
-            </td>
-            <td class="right">
-              <resource :value="villageState.required.balance.iron"></resource>
-            </td>
-            <td class="right">
-              <resource :value="villageState.required.balance.crop"></resource>
-            </td>
-            <td class="right" v-text="renderGatheringTime(villageState.required.time)"></td>
-          </tr>
-
-          <tr v-for="queueState of villageState.queues" v-if="queueState.active" class="required-line">
-            <td class="right">{{ queueTitle(queueState.queue) }}:</td>
-            <td class="right">
-              <resource :value="queueState.firstTask.balance.lumber"></resource>
-            </td>
-            <td class="right">
-              <resource :value="queueState.firstTask.balance.clay"></resource>
-            </td>
-            <td class="right">
-              <resource :value="queueState.firstTask.balance.iron"></resource>
-            </td>
-            <td class="right">
-              <resource :value="queueState.firstTask.balance.crop"></resource>
-            </td>
-            <td class="right" v-text="renderGatheringTime(queueState.firstTask.time)"></td>
-          </tr>
-
-          <tr class="required-line">
-            <td class="right">Баланс фронтира:</td>
-            <td class="right">
-              <resource :value="villageState.frontierRequired.balance.lumber"></resource>
-            </td>
-            <td class="right">
-              <resource :value="villageState.frontierRequired.balance.clay"></resource>
-            </td>
-            <td class="right">
-              <resource :value="villageState.frontierRequired.balance.iron"></resource>
-            </td>
-            <td class="right">
-              <resource :value="villageState.frontierRequired.balance.crop"></resource>
-            </td>
-            <td class="right" v-text="renderGatheringTime(villageState.frontierRequired.time)"></td>
-          </tr>
-
-          <tr class="required-line">
-            <td class="right">Баланс очереди:</td>
-            <td class="right">
-              <resource :value="villageState.totalRequired.balance.lumber"></resource>
-            </td>
-            <td class="right">
-              <resource :value="villageState.totalRequired.balance.clay"></resource>
-            </td>
-            <td class="right">
-              <resource :value="villageState.totalRequired.balance.iron"></resource>
-            </td>
-            <td class="right">
-              <resource :value="villageState.totalRequired.balance.crop"></resource>
-            </td>
-            <td class="right" v-text="renderGatheringTime(villageState.totalRequired.time)"></td>
-          </tr>
-
-          <tr class="commitments-line" v-if="!villageState.commitments.empty()">
-            <td class="right">Обязательства:</td>
-            <td class="right">
-              <resource :value="villageState.commitments.lumber" :hide-zero="true"></resource>
-            </td>
-            <td class="right">
-              <resource :value="villageState.commitments.clay" :hide-zero="true"></resource>
-            </td>
-            <td class="right">
-              <resource :value="villageState.commitments.iron" :hide-zero="true"></resource>
-            </td>
-            <td class="right">
-              <resource :value="villageState.commitments.crop" :hide-zero="true"></resource>
-            </td>
-            <td></td>
-          </tr>
-          <tr class="incoming-line" v-if="!villageState.incomingResources.empty()">
-            <td class="right">Торговцы:</td>
-            <td class="right">
-              <resource :value="villageState.incomingResources.lumber" :hide-zero="true"></resource>
-            </td>
-            <td class="right">
-              <resource :value="villageState.incomingResources.clay" :hide-zero="true"></resource>
-            </td>
-            <td class="right">
-              <resource :value="villageState.incomingResources.iron" :hide-zero="true"></resource>
-            </td>
-            <td class="right">
-              <resource :value="villageState.incomingResources.crop" :hide-zero="true"></resource>
-            </td>
+            <td></td>
             <td></td>
           </tr>
+
+          <resource-line
+            :title="'Баланс задачи:'"
+            :resources="villageState.required.balance"
+            :time1="renderGatheringTime(villageState.required.time)"
+          />
+
+          <resource-line
+            v-for="queueState of villageState.queues"
+            v-bind:key="villageState.id + queueState.queue"
+            v-if="queueState.isActive"
+            :title="queueTitle(queueState.queue) + ' (' + queueState.taskCount + '):'"
+            :hint="'Задач в очереди: ' + queueState.taskCount"
+            :resources="queueState.firstTask.balance"
+            :time1="renderGatheringTime(queueState.firstTask.time)"
+            :time2="renderTimeInSeconds(queueState.currentTaskFinishSeconds)"
+          />
+
+          <resource-line
+            :title="'Баланс фронтира:'"
+            :hint="'Баланс первых задач во всех производственных очередях'"
+            :resources="villageState.frontierRequired.balance"
+            :time1="renderGatheringTime(villageState.frontierRequired.time)"
+          />
+
+          <resource-line
+            :title="'Баланс очереди:'"
+            :hint="'Баланс всех задач деревни в очереди'"
+            :resources="villageState.totalRequired.balance"
+            :time1="renderGatheringTime(villageState.totalRequired.time)"
+          />
+
+          <resource-line
+            :title="'Обязательства:'"
+            :resources="villageState.commitments"
+            :hide-zero="true"
+            v-if="!villageState.commitments.empty()"
+          />
+
+          <resource-line
+            :title="'Торговцы:'"
+            :resources="villageState.incomingResources"
+            :hide-zero="true"
+            v-if="!villageState.incomingResources.empty()"
+          />
+
           <tr class="normal-line">
-            <td></td>
-            <td class="right" colspan="5">
+            <td class="right" colspan="7">
               <a
                 v-for="s in shared.villageStates"
                 v-if="s.id !== villageState.id"
@@ -230,8 +178,7 @@
           </tr>
 
           <tr class="normal-line">
-            <td></td>
-            <td class="right" colspan="5" v-text="villageStatus(villageState)"></td>
+            <td class="right" colspan="7" v-text="villageStatus(villageState)"></td>
           </tr>
         </template>
       </tbody>
@@ -246,6 +193,7 @@ import { COLLECTION_POINT_ID, HORSE_STABLE_ID, MARKET_ID, QUARTERS_ID } from '..
 import { path } from '../Helpers/Path';
 import { Actions } from './Store';
 import { translateProductionQueue } from '../Core/ProductionQueue';
+import VillageStateResourceLine from './VillageStateResourceLine';
 
 function secondsToTime(value) {
   if (value === 0) {
@@ -259,8 +207,9 @@ function secondsToTime(value) {
 
 export default {
   components: {
-    resource: ResourceBalance,
-    filling: VillageResource,
+    'resource': ResourceBalance,
+    'filling': VillageResource,
+    'resource-line': VillageStateResourceLine,
   },
   data() {
     return {

src/DashboardView/VillageStateResourceLine.vue

@@ -0,0 +1,95 @@
+<template>
+  <tr class="resource-line">
+    <td class="title" v-text="title" :title="hint"></td>
+    <td class="lumber">
+      <resource :value="resources.lumber" :hide-zero="hideZero" />
+    </td>
+    <td class="clay">
+      <resource :value="resources.clay" :hide-zero="hideZero" />
+    </td>
+    <td class="iron">
+      <resource :value="resources.iron" :hide-zero="hideZero" />
+    </td>
+    <td class="crop">
+      <resource :value="resources.crop" :hide-zero="hideZero" />
+    </td>
+    <td class="time1" v-text="time1"></td>
+    <td class="time2" v-text="time2"></td>
+  </tr>
+</template>
+
+<script>
+import ResourceBalance from './ResourceBalance';
+
+export default {
+  components: {
+    resource: ResourceBalance,
+  },
+  props: {
+    title: {
+      type: String,
+    },
+    hint: {
+      type: String,
+      default: '',
+    },
+    resources: {
+      type: Object,
+    },
+    time1: {
+      type: String,
+      default: '',
+    },
+    time2: {
+      type: String,
+      default: '',
+    },
+    hideZero: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+%right {
+  text-align: right;
+}
+%small-cell {
+  padding: 0 4px 4px;
+  font-size: 90%;
+}
+.resource-line:hover {
+  background-color: #b0e787;
+}
+.title {
+  @extend %right;
+  @extend %small-cell;
+  white-space: nowrap;
+}
+.lumber {
+  @extend %right;
+  @extend %small-cell;
+}
+.clay {
+  @extend %right;
+  @extend %small-cell;
+}
+.iron {
+  @extend %right;
+  @extend %small-cell;
+}
+.crop {
+  @extend %right;
+  @extend %small-cell;
+}
+.time1 {
+  @extend %right;
+  @extend %small-cell;
+}
+.time2 {
+  @extend %right;
+  @extend %small-cell;
+}
+</style>

src/VillageState.ts

@@ -7,6 +7,7 @@ import { VillageRepositoryInterface } from './VillageRepository';
 import { VillageNotFound } from './Errors';
 import { ProductionQueue, ProductionQueueTypes } from './Core/ProductionQueue';
 import { Task } from './Queue/TaskProvider';
+import { timestamp } from './utils';
 
 interface VillageStorageState {
     resources: Resources;
@@ -37,10 +38,12 @@ interface ResourceLineState {
 
 interface VillageProductionQueueState {
     queue: ProductionQueue;
-    active: boolean;
-    ts: number;
+    isActive: boolean;
+    currentTaskFinishTimestamp: number;
+    currentTaskFinishSeconds: number;
     firstTask: ResourceLineState;
     allTasks: ResourceLineState;
+    taskCount: number;
 }
 
 interface VillageOwnState {
@@ -140,13 +143,16 @@ function createProductionQueueState(
 
     const firstTaskResources = tasks.slice(0, 1).reduce(taskResourceReducer, Resources.zero());
     const allTaskResources = tasks.reduce(taskResourceReducer, Resources.zero());
+    const taskEndingTimestamp = storage.getQueueTaskEnding(queue);
 
     return {
         queue,
-        active: tasks.length !== 0,
-        ts: storage.getQueueTaskEnding(queue),
+        isActive: tasks.length !== 0 || taskEndingTimestamp !== 0,
+        currentTaskFinishTimestamp: taskEndingTimestamp,
+        currentTaskFinishSeconds: taskEndingTimestamp ? taskEndingTimestamp - timestamp() : 0,
         firstTask: calcResourceBalance(firstTaskResources, resources, performance),
         allTasks: calcResourceBalance(allTaskResources, resources, performance),
+        taskCount: tasks.length,
     };
 }