front-end code refactoring

Since the front-end received much more code (features) than first expected, the files became much too large. For this reason, the JS and CSS code has now been split by component and thus into several small files. However, since there are now many small files, a JS and CSS bundle tool had to come :D.

src/main/webapp/components/preview/diagram/preview-diagram.js

@@ -0,0 +1,77 @@
+/*********************
+* Preview Diagram JS *
+**********************/
+
+async function initializeDiagram() {
+  if (document.appConfig.diagramPreviewType !== "png") {
+    // NOTE: "png" is preloaded from the server
+    return setDiagram(
+      document.appConfig.diagramPreviewType,
+      document.appData.encodedDiagram,
+      document.appData.index
+    );
+  }
+}
+
+async function setDiagram(type, encodedDiagram, index) {
+  const container = document.getElementById("diagram");
+  const png = document.getElementById("diagram-png");
+  const txt = document.getElementById("diagram-txt");
+  const pdf = document.getElementById("diagram-pdf");
+  // NOTE: the map and svg elements will be overwitten, hence can not be cached
+
+  async function requestDiagram(type, encodedDiagram, index) {
+    return makeRequest("GET", buildUrl(type, encodedDiagram, index));
+  }
+  function setDiagramMap(mapString) {
+    const mapEl = document.getElementById("plantuml_map");
+    const mapBtn = document.getElementById("map-diagram-link");
+    if (mapString) {
+      const div = document.createElement("div");
+      div.innerHTML = mapString;
+      mapEl.parentNode.replaceChild(div.firstChild, mapEl);
+      setVisibility(mapBtn, true);
+    } else {
+      removeChildren(mapEl);
+      setVisibility(mapBtn, false);
+    }
+  }
+  function setSvgDiagram(svgString) {
+    const svgEl = document.getElementById("diagram-svg");
+    const div = document.createElement("div");
+    div.innerHTML = svgString;
+    const newSvg = div.querySelector("svg");
+    newSvg.id = "diagram-svg";
+    newSvg.classList = svgEl.classList;
+    newSvg.style.cssText = svgEl.style.cssText;
+    svgEl.parentNode.replaceChild(newSvg, svgEl);
+  }
+  function setDiagramVisibility(type) {
+    const map = document.getElementById("plantuml_map");
+    const svg = document.getElementById("diagram-svg");
+    container.setAttribute("data-diagram-type", type);
+    setVisibility(png, type === "png");
+    setVisibility(map, type === "png");
+    setVisibility(svg, type === "svg");
+    setVisibility(txt, type === "txt");
+    setVisibility(pdf, type === "pdf");
+  }
+  // update diagram
+  if (type === "png") {
+    png.src = buildUrl("png", encodedDiagram, index);
+    const map = await requestDiagram("map", encodedDiagram, index);
+    setDiagramMap(map);
+  } else if (type === "svg") {
+    const svg = await requestDiagram("svg", encodedDiagram, index);
+    setSvgDiagram(svg);
+  } else if (type === "txt") {
+    txt.innerHTML = await requestDiagram("txt", encodedDiagram, index);
+  } else if (type === "pdf") {
+    pdf.data = buildUrl("pdf", encodedDiagram, index);
+  } else {
+    const message = "unknown diagram type: " + type;
+    (console.error || console.log)(message);
+    return Promise.reject(message);
+  }
+  setDiagramVisibility(type);
+}