calminer/templates/ParameterInput.html

{% extends "base.html" %} {% block title %}Process Parameters · CalMiner{%
endblock %} {% block content %}
<section class="panel">
  <h2>Scenario Parameters</h2>
  {% if scenarios %}
  <form id="parameter-form" class="form-grid">
    <label>
      <span>Scenario</span>
      <select name="scenario_id" id="scenario_id">
        {% for scenario in scenarios %}
        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
        {% endfor %}
      </select>
    </label>
    <label>
      <span>Name</span>
      <input type="text" name="name" id="name" required />
    </label>
    <label>
      <span>Value</span>
      <input type="number" name="value" id="value" step="any" required />
    </label>
    <button type="submit" class="btn primary">Add Parameter</button>
  </form>
  <p id="parameter-feedback" class="feedback" role="status"></p>
  <div class="table-container">
    <table id="parameter-table">
      <thead>
        <tr>
          <th scope="col">Parameter</th>
          <th scope="col">Value</th>
          <th scope="col">Distribution</th>
          <th scope="col">Details</th>
        </tr>
      </thead>
      <tbody id="parameter-table-body"></tbody>
    </table>
  </div>
  {% else %}
  <p class="empty-state">
    No scenarios available. Create a scenario before adding parameters.
  </p>
  {% endif %}
</section>
{% endblock %} {% block scripts %} {{ super() }}
<script id="parameters-data" type="application/json">
  {{ parameters_by_scenario | tojson | safe }}
</script>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    const dataElement = document.getElementById("parameters-data");
    const parsedData = dataElement
      ? JSON.parse(dataElement.textContent || "{}")
      : {};
    const parametersByScenario =
      parsedData && typeof parsedData === "object" ? parsedData : {};
    const form = document.getElementById("parameter-form");
    const scenarioSelect = /** @type {HTMLSelectElement | null} */ (
      document.getElementById("scenario_id")
    );
    const nameInput = /** @type {HTMLInputElement | null} */ (
      document.getElementById("name")
    );
    const valueInput = /** @type {HTMLInputElement | null} */ (
      document.getElementById("value")
    );
    const feedback = document.getElementById("parameter-feedback");
    const tableBody = document.getElementById("parameter-table-body");

    const setFeedback = (message, variant) => {
      if (!feedback) {
        return;
      }
      feedback.textContent = message;
      feedback.classList.remove("success", "error");
      if (variant) {
        feedback.classList.add(variant);
      }
    };

    const renderTable = (scenarioId) => {
      if (!tableBody) {
        return;
      }
      tableBody.innerHTML = "";
      const rows = parametersByScenario[String(scenarioId)] || [];
      if (!rows.length) {
        const emptyRow = document.createElement("tr");
        emptyRow.id = "parameter-empty-state";
        emptyRow.innerHTML =
          '<td colspan="4">No parameters recorded for this scenario yet.</td>';
        tableBody.appendChild(emptyRow);
        return;
      }
      rows.forEach((row) => {
        const tr = document.createElement("tr");
        tr.innerHTML = `
          <td>${row.name}</td>
          <td>${row.value}</td>
          <td>${row.distribution_type ?? "—"}</td>
          <td>${
            row.distribution_parameters
              ? JSON.stringify(row.distribution_parameters)
              : "—"
          }</td>
        `;
        tableBody.appendChild(tr);
      });
    };

    if (scenarioSelect) {
      renderTable(scenarioSelect.value);
      scenarioSelect.addEventListener("change", () =>
        renderTable(scenarioSelect.value)
      );
    }

    if (!form || !scenarioSelect || !nameInput || !valueInput) {
      return;
    }

    form.addEventListener("submit", async (event) => {
      event.preventDefault();

      const scenarioId = scenarioSelect.value;
      const payload = {
        scenario_id: Number(scenarioId),
        name: nameInput.value.trim(),
        value: Number(valueInput.value),
      };

      if (!payload.name) {
        setFeedback("Parameter name is required.", "error");
        return;
      }

      if (!Number.isFinite(payload.value)) {
        setFeedback("Enter a numeric value.", "error");
        return;
      }

      const response = await fetch("/api/parameters/", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });

      if (!response.ok) {
        const errorText = await response.text();
        setFeedback(`Error saving parameter: ${errorText}`, "error");
        return;
      }

      const data = await response.json();
      const scenarioKey = String(scenarioId);
      parametersByScenario[scenarioKey] =
        parametersByScenario[scenarioKey] || [];
      parametersByScenario[scenarioKey].push(data);

      form.reset();
      scenarioSelect.value = scenarioKey;
      renderTable(scenarioKey);
      nameInput.focus();
      setFeedback("Parameter saved.", "success");
    });
  });
</script>
{% endblock %}