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.

templates/equipment.html

@@ -66,125 +66,9 @@ block content %}
   {% endif %}
 </section>
 
-<script>
-  const scenarios = {{ scenarios | tojson | safe }};
-  const equipmentByScenario = {{ equipment_by_scenario | tojson | safe }};
-
-  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");
-
-  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 renderEquipmentRows(scenarioId) {
-    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) {
-        emptyState.textContent = "Choose a scenario to review the equipment list.";
-        emptyState.classList.remove("hidden");
-        tableWrapper.classList.add("hidden");
-        tableBody.innerHTML = "";
-        return;
-      }
-      renderEquipmentRows(value);
-    });
-  }
-
-  async function submitEquipment(event) {
-    event.preventDefault();
-    hideFeedback();
-
-    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);
-  }
+{% endblock %} {% block scripts %} {{ super() }}
+<script id="equipment-data" type="application/json">
+  {{ {"scenarios": scenarios, "equipment": equipment_by_scenario} | tojson }}
 </script>
+<script src="/static/js/equipment.js"></script>
 {% endblock %}