Effort on LSP settings UI

user_config/usr/share/newton/context_path/index.html

@@ -63,21 +63,19 @@
                     <h3>LSPs:</h3>
                 </div>
 
-                <div class="modal-body margin-bottom-neg-200">
+                <div class="modal-body">
                     <div class="row">
                         <div class="col max-height-600 noselect">
-                            <ul id="lsp-selection" class="list-group scroller">
+                            <div id="lsp-settings" class="list-group scroller">
-                            </ul>
+                            </div>
-                            <button onclick="loadPythonLSPFromBlobURLs()">Load LSP Client</button>
+
                             <input id="lsp-search" class="form-control mr-sm-2" type="search" placeholder="Search..." aria-label="Search" />
                         </div>
-                        <div class="col max-height-800">
-                            <pre id="preview-editor"></pre>
-                        </div>
                     </div>
                 </div>
 
                 <div class="modal-footer">
+                            <button onclick="loadPythonLSPFromBlobURLs()">Load LSP Client</button>
                 </div>
             </div>
         </div>
@@ -86,6 +84,41 @@
 
 
 
+    <!-- Template Tags... -->
+    <template id="input-list-template">
+        <style>
+            ul, li {
+                list-style: none;
+            }
+
+            ul {
+                padding: 5px;
+            }
+
+            .selected {
+                background-color: rgba(255, 255, 255, 0.64);
+            }
+        </style>
+        <section>
+            <hr/>
+            <h2 id="title"></h2>
+            <ul id="input-list">
+            </ul>
+        </section>
+    </template>
+    <template id="input-list-item-template">
+        <style>
+            li {
+            }
+        </style>
+        <li id="input-list-item">
+            <label id="title"></label>
+            <input id="input-entry" />
+        </li>
+    </template>
+
+
+
     <script nomodule>
         console.info(`Your browser doesn't support native JavaScript modules.`);
     </script>
@@ -111,6 +144,7 @@
 
     <!-- For Application... -->
     <script src="resources/js/newton/globals.js"></script>
+    <script src="resources/js/newton/components.js"></script>
     <script src="resources/js/newton/lsp-manager.js"></script>
     <script src="resources/js/newton/utils.js"></script>
     <script src="resources/js/newton/post-ajax.js"></script>

user_config/usr/share/newton/context_path/resources/js/newton/ajax.js

@@ -120,7 +120,9 @@ const importScriptFromBackendResponse = async (scriptName, dataStr) => {
     scriptStr = atob(dataStr);
     SCRIPT_BLOB_URLs[scriptName] = await importScriptFromScriptStr(scriptStr);
 
-    if (scriptName === "lsp_servers_config.json") {
+    // TODO: Look to move this out of here as soon as can determin how.
+    if (scriptName === "lsp-servers-config.json") {
         lspServersConfig = JSON.parse(scriptStr);
+        loadSettingsFileToUI();
     }
 }

user_config/usr/share/newton/context_path/resources/js/newton/components.js

@@ -0,0 +1,87 @@
+class InputListContainer extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    loadShaddowRoot(tag = "input-list-template") {
+        let template = document.getElementById(tag);
+        let templateContent = template.content;
+
+        const shadowRoot = this.attachShadow({ mode: "open" });
+        shadowRoot.appendChild( templateContent.cloneNode(true) );
+    }
+    
+    setTitle(title = "[NO TITLE]") {
+        this.shadowRoot.getElementById("title").innerText = title;
+    }
+    
+    append(elm = null) {
+        if (!elm) return;
+        this.shadowRoot.getElementById("input-list").appendChild(elm);
+    }
+
+    remove(elm = null) {
+        if (!elm) return;
+        this.shadowRoot.getElementById("input-list").remove(elm);
+    }
+
+    serialize() {
+        let tags = this.shadowRoot.children;
+        for (var i = 0; i < tags.length; i++) {
+            data = tags[i].serialize();
+        }
+    }
+}
+
+class InputListItemContainer extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    loadShaddowRoot(tag = "input-list-item-template") {
+        let template = document.getElementById(tag);
+        let templateContent = template.content;
+
+        const shadowRoot = this.attachShadow({ mode: "open" });
+        shadowRoot.appendChild( templateContent.cloneNode(true) );
+    }
+
+    setTitle(textStr = "") {
+        if (Object.getPrototypeOf(textStr) !== String.prototype) return;
+
+        this.shadowRoot.getElementById("title").innerText = textStr;
+    }
+
+    getText() {
+        return this.shadowRoot.getElementById("input-entry").value;
+    }
+
+    setText(textStr = "") {
+        if (Object.getPrototypeOf(textStr) !== String.prototype) return;
+
+        this.shadowRoot.getElementById("input-entry").value = textStr;
+    }
+
+    clear() {
+        this.shadowRoot.getElementById("input-entry").value = "";
+    }
+
+    serialize() {
+        return this.shadowRoot.getElementById("input-entry").value;
+    }
+}
+
+
+class InputList extends InputListContainer {
+    constructor() {
+        super();
+        this.loadShaddowRoot();
+    }
+}
+
+class InputListItem extends InputListItemContainer {
+    constructor() {
+        super();
+        this.loadShaddowRoot();
+    }
+}

user_config/usr/share/newton/context_path/resources/js/newton/events.js

@@ -1,6 +1,9 @@
 window.onload = (eve) => {
     console.log("Window Loaded...");
 
+    console.log("Defining custom elements...");
+    defineCustomElements();
+
     console.log("Loading LSP client files...");
     loadLSPClientJSFiles();
 
@@ -12,6 +15,11 @@ window.onload = (eve) => {
 }
 
 
+const defineCustomElements = () => {
+    customElements.define("input-list", InputList, { extends: 'ul' });
+    customElements.define("input-list-item", InputListItem, { extends: 'li' });
+}
+
 const loadLSPClientJSFiles = () => {
     sendMessage(topic = "load_javascript", ftype = "", fhash = "", fpath = LSP_SERVER_CONFG, content = "");
     sendMessage(topic = "load_javascript", ftype = "", fhash = "", fpath = `${BASE_LINK}/ace-linters.js`, content = "");

user_config/usr/share/newton/context_path/resources/js/newton/globals.js

@@ -18,12 +18,13 @@ const EDITOR_OPTS   = {
     }
 
 const BASE_LINK        = `${window.location.href}resources/js/libs/ace_editor/lsp`;
-const LSP_SERVER_CONFG = `${window.location.href}../lsp_servers_config.json`;
+const LSP_SERVER_CONFG = `${window.location.href}../lsp-servers-config.json`;
 const BASE_LSP_LINK    = "http://0.0.0.0:4880";
 
 const SCRIPT_BLOB_URLs = {};
-let lspProvider      = null;
+let lspProvider        = null;
-let lspServersConfig = null;
+let lspServersConfig   = null;
+let lspSettingsUI      = document.getElementById('lsp-settings');
 
 
 let editor           = null;

user_config/usr/share/newton/context_path/resources/js/newton/lsp-manager.js

@@ -86,3 +86,73 @@ const loadPythonLSPFromNetwork = () => {
     });
 
 }
+
+
+const loadSettingsFileToUI = async () => {
+    let languages = Object.keys(lspServersConfig);
+
+    for (let i = 0; i < languages.length; i++) {
+        let lang = languages[i];
+        let elm  = document.createElement("input-list");
+
+        elm.setTitle(lang);
+        lspSettingsUI.appendChild( elm );
+
+        generateElement(lang, elm, lspServersConfig[lang]);
+    }
+
+}
+
+
+const saveSettingsFileFromUI = () => {
+
+}
+
+
+const generateElement = (parent, elm, config) => {
+    const proto = Object.getPrototypeOf(config)
+
+    switch (proto) {
+        case String.prototype:
+            let inputElm = document.createElement("input-list-item");
+            inputElm.setTitle(parent);
+            inputElm.setText(config);
+            elm.append(inputElm);
+
+            break;
+        case Array.prototype:
+            let inputListElm = document.createElement("input-list");
+            for (var i = 0; i < config.length; i++) {
+                let inputElm = document.createElement("input-list-item");
+                inputElm.setText( config[i] );
+                inputListElm.append(inputElm);
+            }
+            elm.append(inputListElm);
+
+            break;
+        case Boolean.prototype:
+
+            break;
+        case Map.prototype:
+
+            break;
+        default:
+            if ( isDict(config) ) {
+                let keys = Object.keys(config);
+
+                for (let i = 0; i < keys.length; i++) {
+                    let key = keys[i];
+                    generateElement(key, elm, config[key] );
+                }
+
+                break;
+            }
+
+            console.log("No generatable HTML type...")
+    }
+
+}
+
+const isDict = (dict) => {
+    return typeof dict === "object" && !Array.isArray(dict);
+};

user_config/usr/share/newton/lsp-servers-config.json

@@ -1,7 +1,8 @@
 {
     "sh": {
         "info": "",
-        "command": [],
+        "command": "",
+        "socket": "ws://127.0.0.1:3030/shell",
         "initialization_options": {}
     },
     "python": {
@@ -46,17 +47,20 @@
     },
     "c": {
         "info": "https://clangd.llvm.org/",
-        "command": ["/usr/bin/clangd"],
+        "command": "/usr/bin/clangd",
+        "socket": "ws://127.0.0.1:3030/c",
         "initialization_options": {}
     },
     "cpp": {
         "info": "https://clangd.llvm.org/",
-        "command": ["/usr/bin/clangd"],
+        "command": "/usr/bin/clangd",
+        "socket": "ws://127.0.0.1:3030/cpp",
         "initialization_options": {}
     },
     "java": {
         "info": "https://download.eclipse.org/jdtls/",
-        "command": ["java-language-server"],
+        "command": "java-language-server",
+        "socket": "ws://127.0.0.1:3030/java",
         "initialization_options": {}
     }
 }