calminer/templates/ScenarioForm.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 %}