feat: Add main CSS styles for the application

feat: Refactor Dashboard template to extend base layout and improve structure feat: Enhance Parameter Input template with improved layout and feedback mechanisms feat: Update Scenario Form template to utilize base layout and improve user experience feat: Create base layout template for consistent styling across pages feat: Add Consumption, Costs, Equipment, Maintenance, Production, Reporting, and Simulations templates with placeholders for future functionality feat: Implement base header and footer partials for consistent navigation and footer across the application
2025-10-20 22:58:59 +02:00
parent c6233e1a56
commit 5ecd2b8d19
19 changed files with 1051 additions and 368 deletions
--- a/templates/ScenarioForm.html
+++ b/templates/ScenarioForm.html
@@ -1,36 +1,114 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Scenario Management</title>
-  </head>
-  <body>
-    <h1>Create a New Scenario</h1>
-    <form id="scenario-form">
-      <label>Name: <input type="text" name="name" id="name" required /></label
-      ><br />
-      <label
-        >Description:
-        <input type="text" name="description" id="description" /></label
-      ><br />
-      <button type="submit">Create Scenario</button>
-    </form>
-    <div id="result"></div>
-    <script>
-      document
-        .getElementById("scenario-form")
-        .addEventListener("submit", async (e) => {
-          e.preventDefault();
-          const name = document.getElementById("name").value;
-          const description = document.getElementById("description").value;
-          const resp = await fetch("/api/scenarios/", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ name, description }),
-          });
-          const data = await resp.json();
-          document.getElementById("result").innerText = JSON.stringify(data);
-        });
-    </script>
-  </body>
-</html>
+{% extends "base.html" %} {% block title %}Scenario Management · CalMiner{%
+endblock %} {% block content %}
+<section class="panel">
+  <h2>Create a New Scenario</h2>
+  <form id="scenario-form" class="form-grid">
+    <label>
+      <span>Name</span>
+      <input type="text" name="name" id="name" required />
+    </label>
+    <label>
+      <span>Description</span>
+      <input type="text" name="description" id="description" />
+    </label>
+    <button type="submit" class="btn primary">Create Scenario</button>
+  </form>
+  <div class="table-container">
+    {% if scenarios %}
+    <table id="scenario-table">
+      <thead>
+        <tr>
+          <th scope="col">Name</th>
+          <th scope="col">Description</th>
+        </tr>
+      </thead>
+      <tbody id="scenario-table-body">
+        {% for scenario in scenarios %}
+        <tr data-scenario-id="{{ scenario.id }}">
+          <td>{{ scenario.name }}</td>
+          <td>{{ scenario.description or "—" }}</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+    {% else %}
+    <p id="empty-state" class="empty-state">
+      No scenarios yet. Create one to get started.
+    </p>
+    <table id="scenario-table" class="hidden" aria-hidden="true">
+      <thead>
+        <tr>
+          <th scope="col">Name</th>
+          <th scope="col">Description</th>
+        </tr>
+      </thead>
+      <tbody id="scenario-table-body"></tbody>
+    </table>
+    {% endif %}
+  </div>
+</section>
+{% endblock %} {% block scripts %} {{ super() }}
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const form = document.getElementById("scenario-form");
+    const nameInput = /** @type {HTMLInputElement} */ (
+      document.getElementById("name")
+    );
+    const descriptionInput = /** @type {HTMLInputElement} */ (
+      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();
+
+      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();
+    });
+  });
+</script>
+{% endblock %}