Move web interface to configure application into src/interface/web directory

- Improve code layout by ensuring all web interface specific code
  under the src/interface/web directory
- Rename config API to more specifi /config instead of /ui
- Rename config data GET, POST api to /config/data instead of /config

src/interface/web/assets/config-style.css

@@ -0,0 +1,29 @@
+:root {
+    --primary-color: #ffffff;
+    --bold-color: #2073ee;
+    --complementary-color: #124408;
+    --accent-color-0: #57f0b5;
+}
+
+input[type=text] {
+    width: 40%;
+}
+
+div.config-element {
+    color: var(--bold-color);
+    margin: 8px;
+}
+
+div.config-title {
+    font-weight: bold;
+}
+
+span.config-element-value {
+    color: var(--complementary-color);
+    font-weight: normal;
+    cursor: pointer;
+}
+
+button {
+    cursor: pointer;
+}

src/interface/web/assets/config.js

@@ -0,0 +1,125 @@
+// Retrieve elements from the DOM.
+var showConfig = document.getElementById("show-config");
+var configForm = document.getElementById("config-form");
+var regenerateButton = document.getElementById("config-regenerate");
+
+// Global variables.
+var rawConfig = {};
+var emptyValueDefault = "🖊️";
+
+/**
+ * Fetch the existing config file.
+ */
+fetch("/config/data")
+    .then(response => response.json())
+    .then(data => {
+        rawConfig = data;
+        configForm.style.display = "block";
+        processChildren(configForm, data);
+
+        var submitButton = document.createElement("button");
+        submitButton.type = "submit";
+        submitButton.innerHTML = "update";
+        configForm.appendChild(submitButton);
+
+        // The config form's submit handler.
+        configForm.addEventListener("submit", (event) => {
+            event.preventDefault();
+            console.log(rawConfig);
+            fetch("/config/data", {
+                method: "POST",
+                credentials: "same-origin",
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(rawConfig)
+            })
+            .then(response => response.json())
+            .then(data => console.log(data));
+        });
+});
+
+/**
+ * The click handler for the Regenerate button.
+ */
+regenerateButton.addEventListener("click", (event) => {
+    event.preventDefault();
+    regenerateButton.style.cursor = "progress";
+    regenerateButton.disabled = true;
+    fetch("/regenerate")
+        .then(response => response.json())
+        .then(data => {
+            regenerateButton.style.cursor = "pointer";
+            regenerateButton.disabled = false;
+            console.log(data);
+        });
+})
+
+/**
+ * Adds config elements to the DOM representing the sub-components 
+ * of one of the fields in the raw config file.
+ * @param {the parent element} element 
+ * @param {the data to be rendered for this element and its children} data 
+ */
+function processChildren(element, data) {
+    for (let key in data) {
+        var child = document.createElement("div");
+        child.id = key;
+        child.className = "config-element";
+        child.appendChild(document.createTextNode(key + ": "));
+        if (data[key] === Object(data[key]) && !Array.isArray(data[key])) {
+            child.className+=" config-title";
+            processChildren(child, data[key]);
+        } else {
+            child.appendChild(createValueNode(data, key));
+        }
+        element.appendChild(child);
+    }
+}
+
+/**
+ * Takes an element, and replaces it with an editable 
+ * element with the same data in place.
+ * @param {the original element to be replaced} original 
+ * @param {the source data to be rendered for the new element} data 
+ * @param {the key for this input in the source data} key 
+ */
+function makeElementEditable(original, data, key) {
+    original.addEventListener("click", () => {
+        var inputNewText = document.createElement("input");
+        inputNewText.type = "text";
+        inputNewText.className = "config-element-edit";
+        inputNewText.value = (original.textContent == emptyValueDefault) ? "" : original.textContent;
+        fixInputOnFocusOut(inputNewText, data, key);
+        original.parentNode.replaceChild(inputNewText, original);
+        inputNewText.focus();
+    });
+}
+
+/**
+ * Creates a node corresponding to the value of a config element.
+ * @param {the source data} data 
+ * @param {the key corresponding to this node's data} key 
+ * @returns A new element which corresponds to the value in some field.
+ */
+function createValueNode(data, key) {
+    var valueElement = document.createElement("span");
+    valueElement.className = "config-element-value";
+    valueElement.textContent = !data[key] ? emptyValueDefault : data[key];
+    makeElementEditable(valueElement, data, key);
+    return valueElement;
+}
+
+/**
+ * Replaces an existing input element with an element with the same data, which is not an input. 
+ * If the input data for this element was changed, update the corresponding data in the raw config.
+ * @param {the original element to be replaced} original 
+ * @param {the source data} data 
+ * @param {the key corresponding to this node's data} key 
+ */
+function fixInputOnFocusOut(original, data, key) {
+    original.addEventListener("blur", () => {
+        data[key] = (original.value != emptyValueDefault) ? original.value : "";
+        original.parentNode.replaceChild(createValueNode(data, key), original);
+    })
+}

src/interface/web/config.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+    <head>
+        <title>Set directories for your config file.</title>
+        <link rel="stylesheet" href="static/assets/config-style.css">
+    </head>
+    <body>
+        <form id="config-form">
+        </form>
+        <button id="config-regenerate">regenerate</button>
+    </body>
+    <script src="static/assets/config.js"></script>
+</html>

src/interface/web/index.html

@@ -85,7 +85,7 @@
         function populate_type_dropdown() {
             // Populate type dropdown field with enabled search types only
             var possible_search_types = ["org", "markdown", "ledger", "music", "image"];
-            fetch("/config")
+            fetch("/config/data")
                 .then(response => response.json())
                 .then(data => {
                     document.getElementById("type").innerHTML =