bugfix: correct unit name / time remaining on training queues

[browser-rts.git] / src / render / unit-training.ts

diff --git a/src/render/unit-training.ts b/src/render/unit-training.ts
index 686b57b16c86bed51b6ba7fc0b74eff256828836..a177dec3cbec67caf3a1a7d64a99d425ab085f56 100644 (file)
--- a/src/render/unit-training.ts
+++ b/src/render/unit-training.ts
@@ -1,9 +1,10 @@
 import _ from "lodash";
 import { CityWithLocation } from "../repository/city";
-import { UnitTrainingQueue } from "../repository/training-queue";
+import { UnitTrainingQueueWithName } from "../repository/training-queue";
 import { Unit } from "../repository/unit";
+import { DateTime } from "luxon";
 
-function progressBar(current, max): string {
+function progressBar(current: number, max: number): string {
     const percent = Math.ceil((current/max) * 100);
     return `
     <div class="progress-bar unit-training" style="background: background: var(--green-bg);
@@ -13,7 +14,7 @@ function progressBar(current, max): string {
     `;
 }
 
-export function renderUnitTraining(city: CityWithLocation, units: Unit[], trainingQueues: UnitTrainingQueue[]): string {
+export function renderUnitTraining(city: CityWithLocation, units: Unit[], trainingQueues: UnitTrainingQueueWithName[]): string {
     const unit = _.keyBy(units, 'slug');
     let html = `
     <div hx-trigger="reload-unit-training, every 600s" hx-get="/poll/unit-training">
@@ -101,16 +102,22 @@ export function renderUnitTraining(city: CityWithLocation, units: Unit[], traini
     ${trainingQueues.sort((a, b) => {
         return a.due - b.due;
     }).map(queue => {
-        const now = Date.now() - queue.created;
-        const duration = queue.due - queue.created;
+      const created = DateTime.fromMillis(queue.created);
+      const due = DateTime.fromMillis(queue.due);
+      const now = Date.now() - queue.created;
+      const duration = queue.due - queue.created;
 
-        return `
-        <tr>
-        <td>${queue.unit_type}</td>
-        <td>${queue.amount}</td>
-        <td>${progressBar(now, duration)}</td>
-        </tr>
-        `;
+      return `
+      <tr>
+      <td>${queue.display}</td>
+      <td>${queue.amount}</td>
+      <td>
+      <span title="${Math.ceil(due.diff(created).as('minutes')).toLocaleString()} minutes remaining">
+      ${progressBar(now, duration)}<br>
+      </span>
+      </td>
+      </tr>
+      `;
     }).join("\n")}
     </table>
     </div>