Refactor templates to externalize JavaScript: Moved inline scripts to separate JS files and added JSON data attributes for better maintainability and performance. Updated consumption, costs, equipment, maintenance, production, reporting, and simulations templates accordingly.

static/js/equipment.js

@@ -0,0 +1,145 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const dataElement = document.getElementById("equipment-data");
+  let equipmentByScenario = {};
+
+  if (dataElement) {
+    try {
+      const parsed = JSON.parse(dataElement.textContent || "{}");
+      if (parsed && typeof parsed === "object") {
+        if (parsed.equipment && typeof parsed.equipment === "object") {
+          equipmentByScenario = parsed.equipment;
+        }
+      }
+    } catch (error) {
+      console.error("Unable to parse equipment data", error);
+    }
+  }
+
+  const filterSelect = document.getElementById("equipment-scenario-filter");
+  const tableWrapper = document.getElementById("equipment-table-wrapper");
+  const tableBody = document.getElementById("equipment-table-body");
+  const emptyState = document.getElementById("equipment-empty");
+  const form = document.getElementById("equipment-form");
+  const feedbackEl = document.getElementById("equipment-feedback");
+
+  const showFeedback = (message, type = "success") => {
+    if (!feedbackEl) {
+      return;
+    }
+    feedbackEl.textContent = message;
+    feedbackEl.classList.remove("hidden", "success", "error");
+    feedbackEl.classList.add(type);
+  };
+
+  const hideFeedback = () => {
+    if (!feedbackEl) {
+      return;
+    }
+    feedbackEl.classList.add("hidden");
+    feedbackEl.textContent = "";
+  };
+
+  const renderEquipmentRows = (scenarioId) => {
+    if (!tableBody || !tableWrapper || !emptyState) {
+      return;
+    }
+
+    const key = String(scenarioId);
+    const records = equipmentByScenario[key] || [];
+
+    tableBody.innerHTML = "";
+
+    if (!records.length) {
+      emptyState.textContent = "No equipment recorded for this scenario yet.";
+      emptyState.classList.remove("hidden");
+      tableWrapper.classList.add("hidden");
+      return;
+    }
+
+    emptyState.classList.add("hidden");
+    tableWrapper.classList.remove("hidden");
+
+    records.forEach((record) => {
+      const row = document.createElement("tr");
+      row.innerHTML = `
+        <td>${record.name || "—"}</td>
+        <td>${record.description || "—"}</td>
+      `;
+      tableBody.appendChild(row);
+    });
+  };
+
+  if (filterSelect) {
+    filterSelect.addEventListener("change", (event) => {
+      const value = event.target.value;
+      if (!value) {
+        if (emptyState && tableWrapper && tableBody) {
+          emptyState.textContent =
+            "Choose a scenario to review the equipment list.";
+          emptyState.classList.remove("hidden");
+          tableWrapper.classList.add("hidden");
+          tableBody.innerHTML = "";
+        }
+        return;
+      }
+      renderEquipmentRows(value);
+    });
+  }
+
+  const submitEquipment = async (event) => {
+    event.preventDefault();
+    hideFeedback();
+
+    if (!form) {
+      return;
+    }
+
+    const formData = new FormData(form);
+    const scenarioId = formData.get("scenario_id");
+    const payload = {
+      scenario_id: scenarioId ? Number(scenarioId) : null,
+      name: formData.get("name"),
+      description: formData.get("description") || null,
+    };
+
+    try {
+      const response = await fetch("/api/equipment/", {
+        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 add equipment record."
+        );
+      }
+
+      const result = await response.json();
+      const mapKey = String(result.scenario_id);
+
+      if (!Array.isArray(equipmentByScenario[mapKey])) {
+        equipmentByScenario[mapKey] = [];
+      }
+      equipmentByScenario[mapKey].push(result);
+
+      form.reset();
+      showFeedback("Equipment saved.", "success");
+
+      if (filterSelect && filterSelect.value === String(result.scenario_id)) {
+        renderEquipmentRows(filterSelect.value);
+      }
+    } catch (error) {
+      showFeedback(error.message || "An unexpected error occurred.", "error");
+    }
+  };
+
+  if (form) {
+    form.addEventListener("submit", submitEquipment);
+  }
+
+  if (filterSelect && filterSelect.value) {
+    renderEquipmentRows(filterSelect.value);
+  }
+});