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,170 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Reporting · CalMiner{% endblock %}
|
||||
{% block content %}
|
||||
<section class="panel">
|
||||
<h2>Reporting</h2>
|
||||
<p>Placeholder for aggregated KPI views connected to `/api/reporting/` endpoints.</p>
|
||||
</section>
|
||||
{% extends "base.html" %} {% block title %}Reporting · CalMiner{% endblock %} {%
|
||||
block content %}
|
||||
<section class="panel">
|
||||
<h2>Scenario KPI Summary</h2>
|
||||
<div class="button-row">
|
||||
<button id="report-refresh" class="btn" type="button">
|
||||
Refresh Metrics
|
||||
</button>
|
||||
</div>
|
||||
<p id="report-feedback" class="feedback hidden" role="status"></p>
|
||||
|
||||
<div id="reporting-empty" class="empty-state hidden">
|
||||
No reporting data available. Run a simulation to generate metrics.
|
||||
</div>
|
||||
|
||||
<div id="reporting-table-wrapper" class="table-container hidden">
|
||||
<table aria-label="Scenario reporting summary">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Scenario</th>
|
||||
<th scope="col">Iterations</th>
|
||||
<th scope="col">Mean Result</th>
|
||||
<th scope="col">Variance</th>
|
||||
<th scope="col">Std. Dev</th>
|
||||
<th scope="col">Percentile 5</th>
|
||||
<th scope="col">Percentile 95</th>
|
||||
<th scope="col">Value at Risk (95%)</th>
|
||||
<th scope="col">Expected Shortfall (95%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="reporting-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const reportingSummaries = {{ report_summaries | tojson | safe }};
|
||||
const REPORT_FIELDS = [
|
||||
{ key: "iterations", label: "Iterations", decimals: 0 },
|
||||
{ key: "mean", label: "Mean Result", decimals: 2 },
|
||||
{ key: "variance", label: "Variance", decimals: 2 },
|
||||
{ key: "std_dev", label: "Std. Dev", decimals: 2 },
|
||||
{ key: "percentile_5", label: "Percentile 5", decimals: 2 },
|
||||
{ key: "percentile_95", label: "Percentile 95", decimals: 2 },
|
||||
{ key: "value_at_risk_95", label: "Value at Risk (95%)", decimals: 2 },
|
||||
{ key: "expected_shortfall_95", label: "Expected Shortfall (95%)", decimals: 2 },
|
||||
];
|
||||
|
||||
const tableWrapper = document.getElementById("reporting-table-wrapper");
|
||||
const tableBody = document.getElementById("reporting-table-body");
|
||||
const emptyState = document.getElementById("reporting-empty");
|
||||
const refreshButton = document.getElementById("report-refresh");
|
||||
const feedbackEl = document.getElementById("report-feedback");
|
||||
|
||||
function formatNumber(value, decimals = 2) {
|
||||
if (value === null || value === undefined || Number.isNaN(Number(value))) {
|
||||
return "—";
|
||||
}
|
||||
return Number(value).toLocaleString(undefined, {
|
||||
minimumFractionDigits: decimals,
|
||||
maximumFractionDigits: decimals,
|
||||
});
|
||||
}
|
||||
|
||||
function showFeedback(message, type = "success") {
|
||||
if (!feedbackEl) {
|
||||
return;
|
||||
}
|
||||
feedbackEl.textContent = message;
|
||||
feedbackEl.classList.remove("hidden", "success", "error");
|
||||
feedbackEl.classList.add(type);
|
||||
}
|
||||
|
||||
function hideFeedback() {
|
||||
if (!feedbackEl) {
|
||||
return;
|
||||
}
|
||||
feedbackEl.classList.add("hidden");
|
||||
feedbackEl.textContent = "";
|
||||
}
|
||||
|
||||
function renderReportingTable(summaryData) {
|
||||
if (!tableBody || !tableWrapper || !emptyState) {
|
||||
return;
|
||||
}
|
||||
|
||||
tableBody.innerHTML = "";
|
||||
|
||||
if (!summaryData.length) {
|
||||
emptyState.classList.remove("hidden");
|
||||
tableWrapper.classList.add("hidden");
|
||||
return;
|
||||
}
|
||||
|
||||
emptyState.classList.add("hidden");
|
||||
tableWrapper.classList.remove("hidden");
|
||||
|
||||
summaryData.forEach((entry) => {
|
||||
const row = document.createElement("tr");
|
||||
const scenarioCell = document.createElement("td");
|
||||
scenarioCell.textContent = entry.scenario_name;
|
||||
row.appendChild(scenarioCell);
|
||||
|
||||
REPORT_FIELDS.forEach((field) => {
|
||||
const cell = document.createElement("td");
|
||||
const source = field.key === "iterations" ? entry : entry.summary || {};
|
||||
cell.textContent = formatNumber(source[field.key], field.decimals);
|
||||
row.appendChild(cell);
|
||||
});
|
||||
|
||||
tableBody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
async function refreshMetrics() {
|
||||
hideFeedback();
|
||||
showFeedback("Refreshing metrics…", "success");
|
||||
|
||||
try {
|
||||
const response = await fetch("/ui/reporting", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"X-Requested-With": "XMLHttpRequest",
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Unable to refresh reporting data.");
|
||||
}
|
||||
|
||||
const text = await response.text();
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(text, "text/html");
|
||||
const newTable = doc.querySelector("#reporting-table-wrapper");
|
||||
const newFeedback = doc.querySelector("#report-feedback");
|
||||
|
||||
if (!newTable) {
|
||||
throw new Error("Unexpected response while refreshing.");
|
||||
}
|
||||
|
||||
const newEmptyState = doc.querySelector("#reporting-empty");
|
||||
|
||||
if (emptyState && newEmptyState) {
|
||||
emptyState.className = newEmptyState.className;
|
||||
emptyState.textContent = newEmptyState.textContent;
|
||||
}
|
||||
|
||||
if (tableWrapper) {
|
||||
tableWrapper.className = newTable.className;
|
||||
tableWrapper.innerHTML = newTable.innerHTML;
|
||||
}
|
||||
|
||||
if (newFeedback && feedbackEl) {
|
||||
feedbackEl.className = newFeedback.className;
|
||||
feedbackEl.textContent = newFeedback.textContent;
|
||||
}
|
||||
|
||||
showFeedback("Metrics refreshed.", "success");
|
||||
} catch (error) {
|
||||
showFeedback(error.message || "An unexpected error occurred.", "error");
|
||||
}
|
||||
}
|
||||
|
||||
renderReportingTable(reportingSummaries);
|
||||
|
||||
if (refreshButton) {
|
||||
refreshButton.addEventListener("click", refreshMetrics);
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user