initial webapp

cmd/any2anexoj-web/static/app.js

@@ -0,0 +1,108 @@
+(function () {
+  "use strict";
+
+  var UPLOAD_URL = "/api/upload";
+
+  function $(id) {
+    return document.getElementById(id);
+  }
+
+  function setStatus(message) {
+    var status = $("status");
+    status.textContent = message || "";
+  }
+
+  function setError(message) {
+    var error = $("error");
+    error.textContent = message || "";
+  }
+
+  function clearResult() {
+    var result = $("result");
+    var rowsInfo = $("rows-info");
+    var tableOutput = $("table-output");
+    rowsInfo.textContent = "";
+    tableOutput.textContent = "";
+    result.hidden = true;
+  }
+
+  function showResult(rows, table) {
+    var result = $("result");
+    var rowsInfo = $("rows-info");
+    var tableOutput = $("table-output");
+    rowsInfo.textContent = "Rows: " + rows;
+    tableOutput.textContent = table || "";
+    result.hidden = false;
+  }
+
+  function uploadFile(file) {
+    var formData = new FormData();
+    formData.append("csv", file);
+
+    return fetch(UPLOAD_URL, {
+      method: "POST",
+      body: formData
+    }).then(function (response) {
+      return response.json().then(function (data) {
+        return { ok: response.ok, status: response.status, data: data };
+      });
+    });
+  }
+
+  function handleSubmit(event) {
+    event.preventDefault();
+
+    setError("");
+    clearResult();
+
+    var fileInput = $("csv");
+    if (!fileInput.files || fileInput.files.length === 0) {
+      setError("Please choose a CSV file before uploading.");
+      return;
+    }
+
+    var file = fileInput.files[0];
+    var button = $("upload-button");
+    button.disabled = true;
+    setStatus("Uploading " + file.name + "...");
+
+    uploadFile(file).then(function (result) {
+      button.disabled = false;
+
+      if (!result.ok) {
+        setStatus("");
+        var serverMsg = result.data && result.data.error ? result.data.error : "";
+        var msg = "Upload failed (HTTP " + result.status + ").";
+        if (serverMsg) {
+          msg += " " + serverMsg;
+        }
+        setError(msg);
+        return;
+      }
+
+      if (result.data && typeof result.data.error === "string" && result.data.error.length > 0) {
+        setStatus("");
+        setError(result.data.error);
+        return;
+      }
+
+      var table = result.data && typeof result.data.table === "string" ? result.data.table : "";
+      var rows = result.data && typeof result.data.rows === "number" ? result.data.rows : 0;
+
+      setStatus("Upload complete.");
+      showResult(rows, table);
+    }).catch(function (err) {
+      button.disabled = false;
+      setStatus("");
+      var msg = err && err.message ? err.message : String(err);
+      setError("Network error while uploading: " + msg);
+    });
+  }
+
+  document.addEventListener("DOMContentLoaded", function () {
+    var form = $("upload-form");
+    if (form) {
+      form.addEventListener("submit", handleSubmit);
+    }
+  });
+})();