feat: implement export functionality for projects and scenarios with CSV and Excel support

2025-11-10 18:32:24 +01:00
parent 4b33a5dba3
commit 43b1e53837
15 changed files with 906 additions and 133 deletions
--- a/static/js/imports.js
+++ b/static/js/imports.js
@@ -0,0 +1,100 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const dropzones = document.querySelectorAll("[data-import-dropzone]");
+  const uploadButtons = document.querySelectorAll(
+    "[data-import-upload-trigger]"
+  );
+  const resetButtons = document.querySelectorAll("[data-import-reset]");
+  const feedbackEl = document.querySelector("#import-upload-feedback");
+
+  function showFeedback(message, type = "info") {
+    if (!feedbackEl) return;
+    feedbackEl.textContent = message;
+    feedbackEl.classList.remove("hidden", "success", "error", "info");
+    feedbackEl.classList.add(type);
+  }
+
+  function hideFeedback() {
+    if (!feedbackEl) return;
+    feedbackEl.textContent = "";
+    feedbackEl.classList.add("hidden");
+  }
+
+  dropzones.forEach((zone) => {
+    const input = zone.querySelector("input[type='file']");
+    const uploadButton = zone
+      .closest("[data-import-upload]")
+      .querySelector("[data-import-upload-trigger]");
+    const resetButton = zone
+      .closest("[data-import-upload]")
+      .querySelector("[data-import-reset]");
+
+    function enableUpload() {
+      if (uploadButton) {
+        uploadButton.disabled = false;
+      }
+      if (resetButton) {
+        resetButton.hidden = false;
+      }
+    }
+
+    function disableUpload() {
+      if (uploadButton) {
+        uploadButton.disabled = true;
+      }
+      if (resetButton) {
+        resetButton.hidden = true;
+      }
+    }
+
+    zone.addEventListener("dragover", (event) => {
+      event.preventDefault();
+      zone.classList.add("dragover");
+    });
+
+    zone.addEventListener("dragleave", () => {
+      zone.classList.remove("dragover");
+    });
+
+    zone.addEventListener("drop", (event) => {
+      event.preventDefault();
+      zone.classList.remove("dragover");
+      if (!event.dataTransfer?.files?.length) {
+        return;
+      }
+      input.files = event.dataTransfer.files;
+      enableUpload();
+      hideFeedback();
+    });
+
+    input.addEventListener("change", () => {
+      if (input.files?.length) {
+        enableUpload();
+        hideFeedback();
+      } else {
+        disableUpload();
+      }
+    });
+
+    resetButton?.addEventListener("click", () => {
+      input.value = "";
+      disableUpload();
+      hideFeedback();
+    });
+
+    uploadButton?.addEventListener("click", () => {
+      if (!input.files?.length) {
+        showFeedback(
+          "Please select a CSV or XLSX file before uploading.",
+          "error"
+        );
+        return;
+      }
+
+      showFeedback("Uploading…", "info");
+      uploadButton.disabled = true;
+      uploadButton.classList.add("loading");
+
+      // Actual upload logic handled separately (e.g., fetch).
+    });
+  });
+});