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/modals/settings/settings.js

@@ -0,0 +1,54 @@
+/**************
+* Settings JS *
+***************/
+
+function initSettings() {
+  const themeElement = document.getElementById("theme");
+  const diagramPreviewTypeElement = document.getElementById("diagramPreviewType");
+  const editorWatcherTimeoutElement = document.getElementById("editorWatcherTimeout");
+
+  function openSettings() {
+    setVisibility(document.getElementById("settings"), true, true);
+    // fill settings form
+    themeElement.value = document.appConfig.theme;
+    diagramPreviewTypeElement.value = document.appConfig.diagramPreviewType;
+    editorWatcherTimeoutElement.value = document.appConfig.editorWatcherTimeout;
+    setEditorValue(document.settingsEditor, JSON.stringify(document.appConfig.editorCreateOptions, null, "  "));
+  }
+  function saveSettings() {
+    const appConfig = Object.assign({}, document.appConfig);
+    appConfig.theme = themeElement.value;
+    appConfig.editorWatcherTimeout = editorWatcherTimeoutElement.value;
+    appConfig.diagramPreviewType = diagramPreviewTypeElement.value;
+    appConfig.editorCreateOptions = JSON.parse(document.settingsEditor.getValue());
+    updateConfig(appConfig);
+    closeModal("settings");
+  }
+  function onThemeChanged(event) {
+    const theme = event.target.value;
+    const editorCreateOptionsString = document.settingsEditor.getValue();
+    const replaceTheme = (theme === "dark") ? "vs" : "vs-dark";
+    const substituteTheme = (theme === "dark") ? "vs-dark" : "vs";
+    const regex = new RegExp('("theme"\\s*:\\s*)"' + replaceTheme + '"', "gm");
+    setEditorValue(document.settingsEditor, editorCreateOptionsString.replace(regex, '$1"' + substituteTheme + '"'));
+  }
+
+  // create app config monaco editor
+  document.settingsEditor = monaco.editor.create(document.getElementById("settings-monaco-editor"), {
+		language: "json", ...document.appConfig.editorCreateOptions
+	});
+  // add listeners
+  themeElement.addEventListener("change", onThemeChanged);
+  document.getElementById("settings-ok-btn").addEventListener("click", saveSettings);
+  // support Ctrl+, to open the settings
+  window.addEventListener("keydown", function(e) {
+    if (e.key === "," && (isMac ? e.metaKey : e.ctrlKey)) {
+      e.preventDefault();
+      if (!isModalOpen("settings")) {
+        openSettings();
+      }
+    }
+  }, false);
+  // register model listeners
+  registerModalListener("settings", openSettings);
+}