Merge branch 'queue-sizes'

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

diff --git a/src/render/unit-training.ts b/src/render/unit-training.ts
index 5742d9453bf4704df05134fe07f70100e2f8a909..9e64c9c454337b1823c4b4794bd961a8399fd200 100644 (file)
--- a/src/render/unit-training.ts
+++ b/src/render/unit-training.ts
@@ -4,6 +4,16 @@ import { UnitTrainingQueueWithName } from "../repository/training-queue";
 import { Unit } from "../repository/unit";
 import { DateTime } from "luxon";
 
+const emptyQueue: UnitTrainingQueueWithName = {
+  display: '',
+  id: '',
+  owner: '',
+  amount: 0,
+  created: 0,
+  due: 0,
+  unit_type: 'empty'
+}
+
 function progressBar(current: number, max: number): string {
     const percent = Math.ceil((current/max) * 100);
     return `
@@ -16,6 +26,9 @@ function progressBar(current: number, max: number): string {
 
 export function renderUnitTraining(city: CityWithLocation, units: Unit[], trainingQueues: UnitTrainingQueueWithName[]): string {
     const unit = _.keyBy(units, 'slug');
+    const sortedTrainingQueue = trainingQueues.sort((a, b) => {
+        return a.due - b.due;
+    });
     let html = `
     <div hx-trigger="reload-unit-training, every 600s" hx-get="/poll/unit-training">
     <h2 data-augmented-ui="tl-clip bl-clip none">Unit Training</h2>
@@ -90,34 +103,45 @@ export function renderUnitTraining(city: CityWithLocation, units: Unit[], traini
     </table>
     `;
 
+    const finalTrainingQueue = sortedTrainingQueue;
+    if(finalTrainingQueue.length < city.max_training_queue) {
+      while(finalTrainingQueue.length < city.max_construction_queue) {
+        finalTrainingQueue.push(emptyQueue);
+      }
+    }
+
     const queues = `
     <hr>
     <h2 data-augmented-ui="tl-clip bl-clip none">Training Queues</h2>
     <table>
     <tr>
-    <th>Unit Type</th>
-    <th>Amount Expected</th>
-    <th>Progress</th>
+    <th align="left">Unit Type</th>
+    <th align="left">Amount Expected</th>
+    <th colspan="2">Progress</th>
     </tr>
-    ${trainingQueues.sort((a, b) => {
-        return a.due - b.due;
-    }).map(queue => {
-      const created = DateTime.fromMillis(queue.created);
-      const due = DateTime.fromMillis(queue.due);
-      const now = Date.now() - queue.created;
-      const duration = queue.due - queue.created;
+    ${sortedTrainingQueue.map(queue => {
+      if(queue.unit_type === 'empty') {
+        return `<tr>
+        <td colspan="4">You have sufficient queue capacity to train more units.</td>
+        </tr>`;
+      }
+      else {
+        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.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>
-      `;
+        return `
+        <tr>
+        <td>${queue.display}</td>
+        <td>${queue.amount}</td>
+        <td>${progressBar(now, duration)}</td>
+        <td width="50">
+        <a href="#" hx-post="/training/${queue.id}/cancel" hx-trigger="click" class="danger-text close" title="Cancel Unit Training">&times;</a>
+        </td>
+        </tr>
+        `;
+      }
     }).join("\n")}
     </table>
     </div>