Add list of Xournal++ files on server.

src/main/webapp/myPlugins/dtdesign.js

@@ -211,7 +211,7 @@ Draw.loadPlugin(function(ui) {
     const diagram = xmlnode.children[0]
     const diagramName = diagram.getAttribute("name");
     const xml = serializer.serializeToString(diagram);
-    return fetch(BACKEND + "/diagrams/"+diagramName, {
+    return fetch(BACKEND + "/files/drawio/"+diagramName, {
       method: "PUT",
       headers,
       body: xml,
@@ -223,7 +223,7 @@ Draw.loadPlugin(function(ui) {
           saveStatusDiv.innerHTML = "✓ Generated OML (" + parsedAs.join(", ") + ")";
           saveStatusDiv.style.color = "green";
         });
-        refreshModels();
+        refreshDrawioModels();
         rebuildOML();
       }
       else {
@@ -315,11 +315,6 @@ Draw.loadPlugin(function(ui) {
     saveDiv.style.padding = '12px 14px 8px 14px';
     wndDiv.appendChild(saveDiv);
 
-  const lsDiv = document.createElement('div');
-    lsDiv.classList.add('geFormatSection')
-    lsDiv.style.padding = '12px 14px 8px 14px';
-    wndDiv.appendChild(lsDiv);
-
   const saveButton = mxUtils.button("Save Current Page", function() {
     savePages(true);
   });
@@ -327,13 +322,6 @@ Draw.loadPlugin(function(ui) {
     saveButton.style.marginBottom = "2px";
     saveDiv.appendChild(saveButton);
 
-  // const saveAllButton = mxUtils.button("Save all pages", function() {
-  //   savePages(false);
-  // });
-  //   saveAllButton.style.width = "100%";
-  //   saveAllButton.style.marginBottom = "2px";
-  //   saveDiv.appendChild(saveAllButton);
-
   const saveStatusDiv = document.createElement('div');
     saveDiv.appendChild(saveStatusDiv);
 
@@ -341,17 +329,63 @@ Draw.loadPlugin(function(ui) {
     omlStatusDiv.innerText = "Ready";
     saveDiv.appendChild(omlStatusDiv);
 
-  const modelsLabel = document.createElement('div');
-    modelsLabel.innerText = "Models";
-    modelsLabel.style.fontWeight = 'bold';
-    lsDiv.appendChild(modelsLabel);
+  function createModelList(modelType, buttonLabel, onButtonClick) {
+    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);
+
+    // Refreshes the list of models shown in the ModelVerse window
+    return function refreshList() {
+      fetch(BACKEND + "/files/" + modelType, {
+        method: "GET",
+      })
+      .then(res => res.json())
+      .then(models => {
+        if (models.length > 0) {
+          modelsDiv.replaceChildren(...models.map(modelName => {
+            const div = document.createElement('div');
+              div.style.padding = '3px 0px';
+            const loadButton = mxUtils.button(buttonLabel, () => onButtonClick(modelName));
+              loadButton.style.marginLeft = "12px";
+            div.appendChild(document.createTextNode(modelName));
+            div.appendChild(loadButton);
+            return div;
+          }));
+        }
+        else {
+          const div = document.createElement('div');
+              div.style.padding = '3px 0px';
+          div.appendChild(document.createTextNode("No "+modelType+" models."));
+          modelsDiv.replaceChildren([div]);
+        }
+      });
+    }
+  }
+
+  const refreshDrawioModels = createModelList("drawio", "Open", modelName => loadPage(modelName));
+  const refreshXoppModels = createModelList("xopp", "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 modelsDiv = document.createElement('div');
-    lsDiv.appendChild(modelsDiv);
 
   // Load a model and add it as a new page to the editor
   function loadPage(pageName) {
-    return fetch(BACKEND + "/diagrams/" + pageName)
+    return fetch(BACKEND + "/files/drawio/" + pageName)
     .then(res => res.text())
     .then(xmltext => {
       // console.log(xmltext);
@@ -367,26 +401,9 @@ Draw.loadPlugin(function(ui) {
     });
   }
 
-  // Refreshes the list of models shown in the ModelVerse window
-  function refreshModels() {
-    fetch(BACKEND + "/diagrams", {
-      method: "GET",
-    })
-    .then(res => res.json())
-    .then(json => {
-      modelsDiv.replaceChildren(...json.map(modelName => {
-        const div = document.createElement('div');
-          div.style.padding = '3px 0px';
-        const loadButton = mxUtils.button("Open in New Page", () => loadPage(modelName));
-          loadButton.style.marginLeft = "12px";
-        div.appendChild(document.createTextNode(modelName));
-        div.appendChild(loadButton);
-        return div;
-      }));
-    });
-  }
 
-  refreshModels();
+  refreshDrawioModels();
+  refreshXoppModels();
 
   const wnd = new mxWindow("ModelVerse", wndDiv,
     getSetting("dialogPosX"), getSetting("dialogPosY"),