feat: Enhance equipment, maintenance, production, and simulation management interfaces
- Updated equipment.html to include scenario filtering, equipment addition form, and dynamic equipment listing. - Enhanced maintenance.html with scenario filtering, maintenance entry form, and dynamic equipment selection. - Improved production.html to allow scenario filtering and production output entry. - Revamped reporting.html to display scenario KPI summaries with refresh functionality. - Expanded simulations.html to support scenario selection, simulation run history, and detailed results display. - Refactored base_header.html for improved navigation structure and active link highlighting.
This commit is contained in:
@@ -1,8 +1,348 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Costs · CalMiner{% endblock %}
|
||||
{% block content %}
|
||||
<section class="panel">
|
||||
<h2>Costs</h2>
|
||||
<p>This view will surface CAPEX and OPEX entries tied to scenarios. API wiring pending.</p>
|
||||
</section>
|
||||
{% extends "base.html" %} {% block title %}Costs · CalMiner{% endblock %} {%
|
||||
block content %}
|
||||
<section class="panel">
|
||||
<h2>Cost Overview</h2>
|
||||
{% if scenarios %}
|
||||
<div class="form-grid">
|
||||
<label for="costs-scenario-filter">
|
||||
Scenario filter
|
||||
<select id="costs-scenario-filter">
|
||||
<option value="">Select a scenario</option>
|
||||
{% for scenario in scenarios %}
|
||||
<option value="{{ scenario.id }}">{{ scenario.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="empty-state">Create a scenario to review cost information.</p>
|
||||
{% endif %}
|
||||
|
||||
<div id="costs-empty" class="empty-state">
|
||||
Choose a scenario to review CAPEX and OPEX details.
|
||||
</div>
|
||||
|
||||
<div id="costs-data" class="hidden">
|
||||
<div class="table-container">
|
||||
<h3>Capital Expenditures (CAPEX)</h3>
|
||||
<table aria-label="Scenario CAPEX records">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Amount</th>
|
||||
<th scope="col">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="capex-table-body"></tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th scope="row">Total</th>
|
||||
<th id="capex-total">—</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<p id="capex-empty" class="empty-state hidden">
|
||||
No CAPEX records for this scenario yet.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<h3>Operational Expenditures (OPEX)</h3>
|
||||
<table aria-label="Scenario OPEX records">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Amount</th>
|
||||
<th scope="col">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="opex-table-body"></tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th scope="row">Total</th>
|
||||
<th id="opex-total">—</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<p id="opex-empty" class="empty-state hidden">
|
||||
No OPEX records for this scenario yet.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Add CAPEX Entry</h2>
|
||||
{% if scenarios %}
|
||||
<form id="capex-form" class="form-grid">
|
||||
<label for="capex-form-scenario">
|
||||
Scenario
|
||||
<select id="capex-form-scenario" name="scenario_id" required>
|
||||
<option value="" disabled selected>Select a scenario</option>
|
||||
{% for scenario in scenarios %}
|
||||
<option value="{{ scenario.id }}">{{ scenario.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
<label for="capex-form-amount">
|
||||
Amount
|
||||
<input
|
||||
id="capex-form-amount"
|
||||
type="number"
|
||||
name="amount"
|
||||
min="0"
|
||||
step="0.01"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label for="capex-form-description">
|
||||
Description (optional)
|
||||
<textarea
|
||||
id="capex-form-description"
|
||||
name="description"
|
||||
rows="3"
|
||||
></textarea>
|
||||
</label>
|
||||
<button type="submit" class="btn primary">Add CAPEX</button>
|
||||
</form>
|
||||
<p id="capex-feedback" class="feedback hidden" role="status"></p>
|
||||
{% else %}
|
||||
<p class="empty-state">Create a scenario before adding CAPEX entries.</p>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Add OPEX Entry</h2>
|
||||
{% if scenarios %}
|
||||
<form id="opex-form" class="form-grid">
|
||||
<label for="opex-form-scenario">
|
||||
Scenario
|
||||
<select id="opex-form-scenario" name="scenario_id" required>
|
||||
<option value="" disabled selected>Select a scenario</option>
|
||||
{% for scenario in scenarios %}
|
||||
<option value="{{ scenario.id }}">{{ scenario.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
<label for="opex-form-amount">
|
||||
Amount
|
||||
<input
|
||||
id="opex-form-amount"
|
||||
type="number"
|
||||
name="amount"
|
||||
min="0"
|
||||
step="0.01"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label for="opex-form-description">
|
||||
Description (optional)
|
||||
<textarea
|
||||
id="opex-form-description"
|
||||
name="description"
|
||||
rows="3"
|
||||
></textarea>
|
||||
</label>
|
||||
<button type="submit" class="btn primary">Add OPEX</button>
|
||||
</form>
|
||||
<p id="opex-feedback" class="feedback hidden" role="status"></p>
|
||||
{% else %}
|
||||
<p class="empty-state">Create a scenario before adding OPEX entries.</p>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const scenarios = {{ scenarios | tojson | safe }};
|
||||
const capexByScenario = {{ capex_by_scenario | tojson | safe }};
|
||||
const opexByScenario = {{ opex_by_scenario | tojson | safe }};
|
||||
|
||||
const filterSelect = document.getElementById("costs-scenario-filter");
|
||||
const costsEmptyState = document.getElementById("costs-empty");
|
||||
const costsDataWrapper = document.getElementById("costs-data");
|
||||
const capexTableBody = document.getElementById("capex-table-body");
|
||||
const opexTableBody = document.getElementById("opex-table-body");
|
||||
const capexEmpty = document.getElementById("capex-empty");
|
||||
const opexEmpty = document.getElementById("opex-empty");
|
||||
const capexTotal = document.getElementById("capex-total");
|
||||
const opexTotal = document.getElementById("opex-total");
|
||||
const capexForm = document.getElementById("capex-form");
|
||||
const opexForm = document.getElementById("opex-form");
|
||||
const capexFeedback = document.getElementById("capex-feedback");
|
||||
const opexFeedback = document.getElementById("opex-feedback");
|
||||
const capexFormScenario = document.getElementById("capex-form-scenario");
|
||||
const opexFormScenario = document.getElementById("opex-form-scenario");
|
||||
|
||||
function showFeedback(element, message, type = "success") {
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
element.textContent = message;
|
||||
element.classList.remove("hidden", "success", "error");
|
||||
element.classList.add(type);
|
||||
}
|
||||
|
||||
function hideFeedback(element) {
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
element.classList.add("hidden");
|
||||
element.textContent = "";
|
||||
}
|
||||
|
||||
function formatAmount(value) {
|
||||
return Number(value).toLocaleString(undefined, {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
});
|
||||
}
|
||||
|
||||
function sumAmount(records) {
|
||||
return records.reduce((total, record) => total + Number(record.amount || 0), 0);
|
||||
}
|
||||
|
||||
function renderCostTables(scenarioId) {
|
||||
const capexRecords = capexByScenario[String(scenarioId)] || [];
|
||||
const opexRecords = opexByScenario[String(scenarioId)] || [];
|
||||
|
||||
capexTableBody.innerHTML = "";
|
||||
opexTableBody.innerHTML = "";
|
||||
|
||||
if (!capexRecords.length) {
|
||||
capexEmpty.classList.remove("hidden");
|
||||
} else {
|
||||
capexEmpty.classList.add("hidden");
|
||||
capexRecords.forEach((record) => {
|
||||
const row = document.createElement("tr");
|
||||
row.innerHTML = `
|
||||
<td>${formatAmount(record.amount)}</td>
|
||||
<td>${record.description || "—"}</td>
|
||||
`;
|
||||
capexTableBody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
if (!opexRecords.length) {
|
||||
opexEmpty.classList.remove("hidden");
|
||||
} else {
|
||||
opexEmpty.classList.add("hidden");
|
||||
opexRecords.forEach((record) => {
|
||||
const row = document.createElement("tr");
|
||||
row.innerHTML = `
|
||||
<td>${formatAmount(record.amount)}</td>
|
||||
<td>${record.description || "—"}</td>
|
||||
`;
|
||||
opexTableBody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
capexTotal.textContent = formatAmount(sumAmount(capexRecords));
|
||||
opexTotal.textContent = formatAmount(sumAmount(opexRecords));
|
||||
}
|
||||
|
||||
function toggleCostView(show) {
|
||||
if (show) {
|
||||
costsEmptyState.classList.add("hidden");
|
||||
costsDataWrapper.classList.remove("hidden");
|
||||
} else {
|
||||
costsEmptyState.classList.remove("hidden");
|
||||
costsDataWrapper.classList.add("hidden");
|
||||
capexTableBody.innerHTML = "";
|
||||
opexTableBody.innerHTML = "";
|
||||
capexTotal.textContent = "—";
|
||||
opexTotal.textContent = "—";
|
||||
capexEmpty.classList.add("hidden");
|
||||
opexEmpty.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
function syncFormSelections(value) {
|
||||
if (capexFormScenario) {
|
||||
capexFormScenario.value = value || "";
|
||||
}
|
||||
if (opexFormScenario) {
|
||||
opexFormScenario.value = value || "";
|
||||
}
|
||||
}
|
||||
|
||||
if (filterSelect) {
|
||||
filterSelect.addEventListener("change", (event) => {
|
||||
const value = event.target.value;
|
||||
if (!value) {
|
||||
toggleCostView(false);
|
||||
syncFormSelections("");
|
||||
return;
|
||||
}
|
||||
toggleCostView(true);
|
||||
renderCostTables(value);
|
||||
syncFormSelections(value);
|
||||
});
|
||||
}
|
||||
|
||||
async function submitCostEntry(event, targetUrl, storageMap, feedbackEl) {
|
||||
event.preventDefault();
|
||||
hideFeedback(feedbackEl);
|
||||
|
||||
const formData = new FormData(event.target);
|
||||
const scenarioId = formData.get("scenario_id");
|
||||
const payload = {
|
||||
scenario_id: scenarioId ? Number(scenarioId) : null,
|
||||
amount: Number(formData.get("amount")),
|
||||
description: formData.get("description") || null,
|
||||
};
|
||||
|
||||
if (!payload.scenario_id) {
|
||||
showFeedback(feedbackEl, "Select a scenario before submitting.", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(targetUrl, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorDetail = await response.json().catch(() => ({}));
|
||||
throw new Error(errorDetail.detail || "Unable to save cost entry.");
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
const mapKey = String(result.scenario_id);
|
||||
|
||||
if (!Array.isArray(storageMap[mapKey])) {
|
||||
storageMap[mapKey] = [];
|
||||
}
|
||||
|
||||
storageMap[mapKey].push(result);
|
||||
|
||||
event.target.reset();
|
||||
showFeedback(feedbackEl, "Entry saved successfully.", "success");
|
||||
|
||||
if (filterSelect && filterSelect.value === mapKey) {
|
||||
renderCostTables(mapKey);
|
||||
}
|
||||
} catch (error) {
|
||||
showFeedback(feedbackEl, error.message || "An unexpected error occurred.", "error");
|
||||
}
|
||||
}
|
||||
|
||||
if (capexForm) {
|
||||
capexForm.addEventListener("submit", (event) =>
|
||||
submitCostEntry(event, "/api/costs/capex", capexByScenario, capexFeedback)
|
||||
);
|
||||
}
|
||||
|
||||
if (opexForm) {
|
||||
opexForm.addEventListener("submit", (event) =>
|
||||
submitCostEntry(event, "/api/costs/opex", opexByScenario, opexFeedback)
|
||||
);
|
||||
}
|
||||
|
||||
if (filterSelect && filterSelect.value) {
|
||||
toggleCostView(true);
|
||||
renderCostTables(filterSelect.value);
|
||||
syncFormSelections(filterSelect.value);
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user