fixes, meaningful error messages and new features

2026-04-23 16:58:31 +02:00 · 2024-03-27 06:30:47 +00:00
parent 539ef911de
commit 90f4aac946
50 changed files with 2079 additions and 885 deletions
--- a/templates/config_editor/index.html
+++ b/templates/config_editor/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="/codemirror/lib/codemirror.css" rel="stylesheet" />
+    <link href="/codemirror/theme/dracula.css" rel="stylesheet" />
+    <link href="style.css" rel="stylesheet" />
+    <title>Config Editor</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="file-navigation">
+        <h3 class="navigation-header">Config Files</h3>
+        <ul id="file-list">
+          {{- range $_, $cfgFile := .}}
+          <li id="file-{{$cfgFile}}">
+            <a class="unselectable">{{$cfgFile}}</a>
+          </li>
+          {{- end}}
+        </ul>
+      </div>
+      <div id="config-editor"></div>
+    </div>
+
+    <script src="/codemirror/lib/codemirror.js"></script>
+    <script src="/codemirror/mode/yaml/yaml.js"></script>
+    <script src="/codemirror/keymap/sublime.js"></script>
+    <script src="/codemirror/addon/comment/comment.js"></script>
+    <script src="index.js" onload="onLoad()"></script>
+  </body>
+</html>
--- a/templates/config_editor/index.js
+++ b/templates/config_editor/index.js
@@ -0,0 +1,75 @@
+let currentFile = "config.yml";
+let editorElement = document.getElementById("config-editor");
+let fileListElement = document.getElementById("file-list");
+let editor = CodeMirror(editorElement, {
+  lineNumbers: true,
+  mode: "yaml",
+  theme: "dracula",
+  autofocus: true,
+  lineWiseCopyCut: true,
+  keyMap: "sublime",
+  tabSize: 2
+});
+
+function loadFile(fileName) {
+  if (fileName === undefined) {
+    return;
+  }
+  let req = new XMLHttpRequest();
+  req.open("GET", `/config/${fileName}`, true);
+  req.onreadystatechange = function () {
+    if (req.readyState == 4) {
+      if (req.status == 200) {
+        let old_nav_item = document.getElementById(`file-${currentFile}`);
+        old_nav_item.classList.remove("active");
+        editor.setValue(req.responseText);
+        currentFile = fileName;
+        let new_nav_item = document.getElementById(`file-${currentFile}`);
+        new_nav_item.classList.add("active");
+        document.title = `${currentFile} - Config Editor`;
+        console.log(`loaded ${currentFile}`);
+      } else {
+        let msg = `Failed to load ${fileName}: ` + req.responseText;
+        alert(msg);
+        console.log(msg);
+      }
+    }
+  };
+  req.send();
+}
+
+function saveFile(filename, content) {
+  let req = new XMLHttpRequest();
+  req.open("PUT", `/config/${filename}`, true);
+  req.setRequestHeader("Content-Type", "text/plain");
+  req.send(content);
+  req.onreadystatechange = function () {
+    if (req.readyState == 4) {
+      if (req.status == 200) {
+        alert("Saved " + filename);
+      } else {
+        alert("Error: " + req.responseText);
+      }
+    }
+  };
+}
+
+editor.setSize("100wh", "100vh");
+editor.setOption("extraKeys", {
+  Tab: function (cm) {
+    const spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
+    cm.replaceSelection(spaces);
+  },
+  "Ctrl-S": function (cm) {
+    saveFile(currentFile, cm.getValue());
+  },
+});
+fileListElement.addEventListener("click", function (e) {
+    if (e.target === null) {
+        return;
+    }
+    loadFile(e.target.text);
+});
+function onLoad() {
+  loadFile(currentFile);
+}
--- a/templates/config_editor/style.css
+++ b/templates/config_editor/style.css
@@ -0,0 +1,60 @@
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font: 14px !important;
+  font-family: monospace !important;
+}
+.container {
+  display: flex;
+}
+.navigation-header {
+  color: #f8f8f2 !important;
+  padding-left: 2em;
+  display: block;
+}
+.file-navigation {
+  width: 250px;
+  height: auto;
+  overflow-y: auto;
+  background: #282a36 !important;
+}
+.file-navigation ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.file-navigation li {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.file-navigation a {
+  color: #f8f8f2 !important;
+  text-decoration: none;
+  padding-left: 4em;
+  padding-right: 4em;
+  display: block;
+}
+.active {
+  font-weight: bold;
+  background: rgba(255, 255, 255, 0.1);
+}
+.unselectable {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.CodeMirror * {
+  font-size: 14px !important;
+}
+.CodeMirror pre {
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+#config-editor {
+  flex-grow: 1;
+}