import _ from "lodash";
-import { City } from "../repository/city";
+import { CityWithLocation } from "../repository/city";
import { UnitTrainingQueue } from "../repository/training-queue";
import { Unit } from "../repository/unit";
`;
}
-export function renderUnitTraining(city: City, units: Unit[], trainingQueues: UnitTrainingQueue[]): string {
+export function renderUnitTraining(city: CityWithLocation, units: Unit[], trainingQueues: UnitTrainingQueue[]): string {
const unit = _.keyBy(units, 'slug');
let html = `
<div hx-trigger="reload-unit-training, every 600s" hx-get="/poll/unit-training">
<th>Unit</th>
<th>Avail.</td>
<th></th>
+ <th width="200">Cost</th>
</tr>
<tr>
<th>Soldiers</th>
<td>${city.population}</td>
<td>
<form hx-post="/units">
- <input type="number" name="amount" size="6" max="${city.population}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.soldiers.slug}-cost">
+ <input type="number" name="amount" size="6" max="${city.population}" hx-trigger="keyup" hx-post="/cost/training" hx-target="#${unit.soldiers.slug}-cost">
<input type="hidden" name="type" value="${unit.soldiers.slug}">
<button type="submit" ${city.population ? '' : 'disabled'}>Train</button>
</form>
- <span id="${unit.soldiers.slug}-cost"></span>
</td>
+ <td id="${unit.soldiers.slug}-cost"></span>
</tr>
<tr>
<th>Attackers</th>
<input type="hidden" name="type" value="${unit.attackers.slug}">
<button type="submit" ${city.soldiers ? '' : 'disabled'}>Train</button>
</form>
- <span id="${unit.attackers.slug}-cost"></span>
</td>
+ <td id="${unit.attackers.slug}-cost"></span>
</tr>
<tr>
<th>Defenders</th>
<input type="hidden" name="type" value="${unit.defenders.slug}">
<button type="submit" ${city.soldiers ? '' : 'disabled'}>Train</button>
</form>
- <span id="${unit.defenders.slug}-cost"></span>
</td>
+ <td id="${unit.defenders.slug}-cost"></td>
</tr>
<tr>
<th>Special Attackers</th>
</form>
<span id="${unit.sp_attackers.slug}-cost"></span>
</td>
+ <td id="${unit.sp_attackers.slug}-cost"></td>
</tr>
<tr>
<th>Special Defenders</th>
<input type="hidden" name="type" value="${unit.sp_defenders.slug}">
<button type="submit" ${city.defenders ? '': 'disabled'}>Train</button>
</form>
- <span id="${unit.sp_defenders.slug}-cost"></span>
</td>
+ <td id="${unit.sp_defenders.slug}-cost"></td>
</tr>
</table>
`;
`;
return html + queues;
-}
\ No newline at end of file
+}