Add CSV file repository

src/main/webapp/myPlugins/dtdesign.js

@@ -1,5 +1,5 @@
 const BACKEND = "http://localhost:5000";
-const EXPECTED_BACKEND_VERSION = 1; // expected backend version
+const EXPECTED_BACKEND_VERSION = 2; // expected backend version
 const SPARQL_SERVER   = "http://localhost:3030"
 const SPARQL_ENDPOINT = "/SystemDesignOntology2Layers/sparql"
 
@@ -126,7 +126,7 @@ fetch(BACKEND+"/version")
 .catch(() => 0) // parsing failed - probably backend doesn't even have a version
 .then(version => {
 
-  if (version != EXPECTED_BACKEND_VERSION) {
+  if (version !== EXPECTED_BACKEND_VERSION) {
     alert("Incorrect DTDesign Python backend version.\nExpected: " + EXPECTED_BACKEND_VERSION + ", got: " + version + ".\nRefusing to load plugin. Please upgrade :)");
     return;
   }
@@ -236,28 +236,6 @@ fetch(BACKEND+"/version")
     };
   }
 
-  function savePages(onlyCurrentPage) {
-    const responseHandler = uploadResponseHandler(saveStatusDiv, refreshDrawioModels);
-
-    const headers = new Headers({
-      "Content-Type": "application/xml",
-    });
-    const serializer = new XMLSerializer();
-    const xmlnode = ui.getXmlFileData(
-      null, // ignore selection
-      onlyCurrentPage,
-      true); // uncompressed
-    const diagram = xmlnode.children[0]
-    const diagramName = diagram.getAttribute("name");
-    const xml = serializer.serializeToString(diagram);
-    return fetch(BACKEND + "/files/drawio/"+diagramName, {
-      method: "PUT",
-      headers,
-      body: xml,
-    })
-    .then(responseHandler);
-  }
-
   let highlight;
 
   // Given a cell IRI, open the diagram that contains the cell
@@ -350,48 +328,99 @@ fetch(BACKEND+"/version")
   });
     omlDiv.appendChild(omlForceButton);
 
-  const savePageDiv = document.createElement('div');
-    // savePageDiv.classList.add('geFormatSection')
-    // savePageDiv.style.padding = '12px 14px 8px 14px';
-    // wndDiv.appendChild(savePageDiv);
-
-  const saveButton = mxUtils.button("Save Current Page", function() {
-    savePages(true);
-  });
-    saveButton.style.width = "100%";
-    saveButton.style.marginTop = "4px";
-    saveButton.style.marginBottom = "2px";
-    savePageDiv.appendChild(saveButton);
-
-  const saveStatusDiv = document.createElement('div');
-    savePageDiv.appendChild(saveStatusDiv);
-
-
-  function createModelList(modelType, uploadDiv, downloadButtonLabel, onDownloadClick) {
-    const lsDiv = document.createElement('div');
-      lsDiv.classList.add('geFormatSection')
-      lsDiv.style.padding = '12px 14px 8px 14px';
-      wndDiv.appendChild(lsDiv);
-
-    const modelsLabel = document.createElement('div');
-      modelsLabel.innerText = "Models - " + modelType;
-      modelsLabel.style.fontWeight = 'bold';
-      lsDiv.appendChild(modelsLabel);
-
-    const modelsDiv = document.createElement('div');
-      lsDiv.appendChild(modelsDiv);
-
-    lsDiv.appendChild(uploadDiv);
+  function createSavePageDiv(refreshModelsCallback) {
+    const savePageDiv = document.createElement('div');
+    const saveButton = mxUtils.button("Save Current Page", function() {
+      const responseHandler = uploadResponseHandler(saveStatusDiv, refreshModelsCallback);
+      const headers = new Headers({
+        "Content-Type": "application/xml",
+      });
+      const serializer = new XMLSerializer();
+      const xmlnode = ui.getXmlFileData(
+        null,  // ignore selection
+        true,  // only current page
+        true); // uncompressed
+      const diagram = xmlnode.children[0]
+      const diagramName = diagram.getAttribute("name");
+      const xml = serializer.serializeToString(diagram);
+      return fetch(BACKEND + "/files/drawio/"+diagramName, {
+        method: "PUT",
+        headers,
+        body: xml,
+      })
+      .then(responseHandler);
+    });
+      saveButton.style.width = "100%";
+      saveButton.style.marginTop = "4px";
+      saveButton.style.marginBottom = "2px";
+      savePageDiv.appendChild(saveButton);
+    const saveStatusDiv = document.createElement('div');
+      savePageDiv.appendChild(saveStatusDiv);
+    return savePageDiv;
+  }
+  function createUploadDiv(modelType, mimeType) {
+    return function(refreshModelsCallback) {
+      const uploadDiv = document.createElement('div');
+      const uploadLabel = document.createElement('label');
+        uploadLabel.innerText = "Upload "+modelType+":";
+        uploadLabel.for = "uploadButton";
+        uploadDiv.appendChild(uploadLabel);
+      const uploadButton = document.createElement('input');
+        uploadButton.type = "file";
+        uploadButton.id = "uploadButton";
+        uploadButton.style.width = "100%";
+        uploadButton.style.marginTop = "4px";
+        uploadButton.style.marginBottom = "2px";
+        uploadButton.accept = mimeType;
+        // uploadButton.multiple = true;
+        uploadButton.onchange = e => {
+          const responseHandler = uploadResponseHandler(statusDiv, refreshModelsCallback);
+          Array.from(e.target.files).map(file => {
+            fetch(BACKEND+"/files/"+modelType+"/"+file.name, {
+              method: "PUT",
+              body: file,
+            })
+            .then(responseHandler);
+          });
+        };
+        uploadDiv.appendChild(uploadButton);
+      const statusDiv = document.createElement('div');
+        uploadDiv.appendChild(statusDiv);
+      return uploadDiv;
+    };
+  }
+  function createDownloadHandler(modelType) {
+    return modelName => {
+      const a = document.createElement('a');
+      document.body.appendChild(a);
+      a.setAttribute('href', BACKEND + "/files/" + modelType + "/" + modelName);
+      a.setAttribute('download', modelName);
+      a.setAttribute('target', "_blank"); // for browsers that don't support the 'download' attribute, tell them to open the link in a new tab
+      a.click();
+      document.body.removeChild(a);
+    };
+  }
+  function createModelList(modelType, createUploadDiv, downloadButtonLabel, onDownloadClick) {
+    const containerDiv = document.createElement('div');
+      containerDiv.classList.add('geFormatSection')
+      containerDiv.style.padding = '12px 14px 8px 14px';
+      wndDiv.appendChild(containerDiv);
+    const labelDiv = document.createElement('div');
+      labelDiv.innerText = "Models — " + modelType;
+      labelDiv.style.fontWeight = 'bold';
+      containerDiv.appendChild(labelDiv);
+    const modelListDiv = document.createElement('div');
+      containerDiv.appendChild(modelListDiv);
 
     // Refreshes the list of models shown in the ModelVerse window
-    return function refreshList() {
+    function refreshList() {
       fetch(BACKEND + "/files/" + modelType, {
         method: "GET",
       })
       .then(res => res.json())
       .then(models => {
         if (models.length > 0) {
-          modelsDiv.replaceChildren(...models.map(modelName => {
+          modelListDiv.replaceChildren(...models.map(modelName => {
             const div = document.createElement('div');
               div.style.padding = '3px 0px';
             const loadButton = mxUtils.button(downloadButtonLabel, () => onDownloadClick(modelName));
@@ -405,56 +434,22 @@ fetch(BACKEND+"/version")
           const div = document.createElement('div');
               div.style.padding = '3px 0px';
           div.appendChild(document.createTextNode("No "+modelType+" models."));
-          modelsDiv.replaceChildren([div]);
+          modelListDiv.replaceChildren(div);
         }
       });
     }
-  }
-
-  const uploadXoppDiv = document.createElement('div');
-    // savePageDiv.classList.add('')
-    // savePageDiv.style.padding = '12px 14px 8px 14px';
-  const uploadXoppLabel = document.createElement('label');
-    uploadXoppLabel.innerText = "Upload xopp:";
-    uploadXoppLabel.for = "uploadXoppButton";
-    uploadXoppDiv.appendChild(uploadXoppLabel);
-
-  const uploadXoppButton = document.createElement('input');
-    uploadXoppButton.type = "file";
-    uploadXoppButton.id = "uploadXoppButton";
-    uploadXoppButton.style.width = "100%";
-    uploadXoppButton.style.marginTop = "4px";
-    uploadXoppButton.style.marginBottom = "2px";
-    uploadXoppButton.accept = "application/x-xopp,.xopp";
-    // uploadXoppButton.multiple = true;
-    uploadXoppButton.onchange = e => {
-      const responseHandler = uploadResponseHandler(xoppStatusDiv, refreshXoppModels);
-      Array.from(e.target.files).map(file => {
-        fetch(BACKEND + "/files/xopp/" + file.name, {
-          method: "PUT",
-          body: file,
-        })
-        .then(responseHandler);
-      })
-    };
-    uploadXoppDiv.appendChild(uploadXoppButton);
-
-  const xoppStatusDiv = document.createElement('div');
-    uploadXoppDiv.appendChild(xoppStatusDiv);
+    refreshList();
 
+    containerDiv.appendChild(createUploadDiv(refreshList));
 
+  }
 
-  const refreshDrawioModels = createModelList("drawio", savePageDiv, "Open", modelName => loadPage(modelName));
-  const refreshXoppModels = createModelList("xopp", uploadXoppDiv, "Download", modelName => {
-    const a = document.createElement('a');
-    document.body.appendChild(a);
-    a.setAttribute('href', BACKEND + "/files/xopp/" + modelName);
-    a.setAttribute('download', modelName);
-    a.setAttribute('target', "_blank"); // for browsers that don't support the 'download' attribute, tell them to open the link in a new tab
-    a.click();
-    document.body.removeChild(a);
-  });
+  const createUploadXoppDiv = createUploadDiv("xopp", "application/x-xopp,.xopp");
+  const createUploadCsvDiv = createUploadDiv("csv", "text/csv,.csv");
 
+  const refreshDrawioModels = createModelList("drawio", createSavePageDiv, "Open", modelName => loadPage(modelName));
+  const refreshXoppModels = createModelList("xopp", createUploadXoppDiv, "Download", createDownloadHandler("xopp"));
+  const refreshCsvModels = createModelList("csv", createUploadCsvDiv, "Download", createDownloadHandler("csv"));
 
   // Load a model and add it as a new page to the editor
   function loadPage(pageName) {
@@ -475,8 +470,9 @@ fetch(BACKEND+"/version")
   }
 
 
-  refreshDrawioModels();
-  refreshXoppModels();
+  // refreshDrawioModels();
+  // refreshXoppModels();
+  // refreshCsvModels();
 
   const wnd = new mxWindow("ModelVerse", wndDiv,
     getSetting("dialogPosX"), getSetting("dialogPosY"),