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/scenario-form.js

@@ -0,0 +1,69 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const form = document.getElementById("scenario-form");
+  if (!form) {
+    return;
+  }
+
+  const nameInput = /** @type {HTMLInputElement | null} */ (
+    document.getElementById("name")
+  );
+  const descriptionInput = /** @type {HTMLInputElement | null} */ (
+    document.getElementById("description")
+  );
+  const table = document.getElementById("scenario-table");
+  const tableBody = document.getElementById("scenario-table-body");
+  const emptyState = document.getElementById("empty-state");
+
+  form.addEventListener("submit", async (event) => {
+    event.preventDefault();
+
+    if (!nameInput || !descriptionInput) {
+      return;
+    }
+
+    const payload = {
+      name: nameInput.value.trim(),
+      description: descriptionInput.value.trim() || null,
+    };
+
+    if (!payload.name) {
+      return;
+    }
+
+    const response = await fetch("/api/scenarios/", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error("Scenario creation failed", errorText);
+      return;
+    }
+
+    const data = await response.json();
+    const row = document.createElement("tr");
+    row.dataset.scenarioId = String(data.id);
+    row.innerHTML = `
+      <td>${data.name}</td>
+      <td>${data.description ?? "—"}</td>
+    `;
+
+    if (emptyState) {
+      emptyState.remove();
+    }
+
+    if (table) {
+      table.classList.remove("hidden");
+      table.removeAttribute("aria-hidden");
+    }
+
+    if (tableBody) {
+      tableBody.appendChild(row);
+    }
+
+    form.reset();
+    nameInput.focus();
+  });
+});