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/consumption.html

@@ -71,132 +71,9 @@
   {% endif %}
 </section>
 
-<script>
-  const scenarios = {{ scenarios | tojson | safe }};
-  const consumptionByScenario = {{ consumption_by_scenario | tojson | safe }};
-
-  const filterSelect = document.getElementById("consumption-scenario-filter");
-  const tableWrapper = document.getElementById("consumption-table-wrapper");
-  const tableBody = document.getElementById("consumption-table-body");
-  const emptyState = document.getElementById("consumption-empty");
-  const form = document.getElementById("consumption-form");
-  const feedbackEl = document.getElementById("consumption-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 formatAmount(value) {
-    return Number(value).toLocaleString(undefined, {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    });
-  }
-
-  function renderConsumptionRows(scenarioId) {
-    const key = String(scenarioId);
-    const records = consumptionByScenario[key] || [];
-
-    tableBody.innerHTML = "";
-
-    if (!records.length) {
-      emptyState.textContent = "No consumption records 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>${formatAmount(record.amount)}</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 its consumption records.";
-        emptyState.classList.remove("hidden");
-        tableWrapper.classList.add("hidden");
-        tableBody.innerHTML = "";
-        return;
-      }
-      renderConsumptionRows(value);
-    });
-  }
-
-  async function submitConsumption(event) {
-    event.preventDefault();
-    hideFeedback();
-
-    const formData = new FormData(form);
-    const scenarioId = formData.get("scenario_id");
-    const payload = {
-      scenario_id: scenarioId ? Number(scenarioId) : null,
-      amount: Number(formData.get("amount")),
-      description: formData.get("description") || null,
-    };
-
-    try {
-      const response = await fetch("/api/consumption/", {
-        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 consumption record.");
-      }
-
-      const result = await response.json();
-      const mapKey = String(result.scenario_id);
-
-      if (!Array.isArray(consumptionByScenario[mapKey])) {
-        consumptionByScenario[mapKey] = [];
-      }
-      consumptionByScenario[mapKey].push(result);
-
-      form.reset();
-      showFeedback("Consumption record saved.", "success");
-
-      if (filterSelect && filterSelect.value === String(result.scenario_id)) {
-        renderConsumptionRows(filterSelect.value);
-      }
-    } catch (error) {
-      showFeedback(error.message || "An unexpected error occurred.", "error");
-    }
-  }
-
-  if (form) {
-    form.addEventListener("submit", submitConsumption);
-  }
-
-  if (filterSelect && filterSelect.value) {
-    renderConsumptionRows(filterSelect.value);
-  }
+{% endblock %} {% block scripts %} {{ super() }}
+<script id="consumption-data" type="application/json">
+  {{ {"scenarios": scenarios, "consumption": consumption_by_scenario} | tojson }}
 </script>
+<script src="/static/js/consumption.js"></script>
 {% endblock %}