Fixed LSP Setting window loading JSON to HTML

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

@@ -74,6 +74,7 @@
                 </div>
 
                 <div class="modal-footer">
+                    <button onclick="loadSettingsFileToUI()">Load LSP Settings</button>
                     <button onclick="loadPythonLSPFromBlobURLs()">Load LSP Client</button>
                 </div>
             </div>
@@ -94,14 +95,14 @@
             </div>
         </section>
     </template>
-    <template id="input-list-template">
+    <template id="input-dict-template">
         <style>
             ul, li {
                 list-style: none;
             }
 
             ul {
-                padding: 5px;
+                padding-left: 2em;
             }
 
             .selected {
@@ -109,7 +110,27 @@
             }
         </style>
         <section>
-            <h1 id="title"></h1>
+            <h3 id="title"></h3>
+            <ul id="input-dict">
+            </ul>
+        </section>
+    </template>
+    <template id="input-list-template">
+        <style>
+            ul, li {
+                list-style: none;
+            }
+
+            ul {
+                padding-left: 2em;
+            }
+
+            .selected {
+                background-color: rgba(255, 255, 255, 0.64);
+            }
+        </style>
+        <section>
+            <h3 id="title"></h3>
             <ul id="input-list">
             </ul>
         </section>
@@ -125,6 +146,12 @@
             <input id="input-entry" />
         </li>
     </template>
+    <template id="input-checkbox-template">
+        <style>
+        </style>
+            <label id="title" for="input-checkbox"></label>
+            <input id="input-checkbox" type="checkbox"/>
+    </template>
 
 
 

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

@@ -33,6 +33,41 @@ class LspConfigContainer extends HTMLElement {
     }
 }
 
+class InputDictContainer extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    loadShaddowRoot(tag = "input-dict-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-dict").appendChild(elm);
+    }
+
+    remove(elm = null) {
+        if (!elm) return;
+        this.shadowRoot.getElementById("input-dict").remove(elm);
+    }
+
+    serialize() {
+        let tags = this.shadowRoot.children;
+        for (var i = 0; i < tags.length; i++) {
+            data = tags[i].serialize();
+        }
+    }
+}
+
 class InputListContainer extends HTMLElement {
     constructor() {
         super();
@@ -68,7 +103,6 @@ class InputListContainer extends HTMLElement {
     }
 }
 
-
 class InputListItemContainer extends HTMLElement {
     constructor() {
         super();
@@ -84,7 +118,6 @@ class InputListItemContainer extends HTMLElement {
 
     setTitle(textStr = "") {
         if (Object.getPrototypeOf(textStr) !== String.prototype) return;
-
         this.shadowRoot.getElementById("title").innerText = textStr;
     }
 
@@ -94,7 +127,6 @@ class InputListItemContainer extends HTMLElement {
 
     setText(textStr = "") {
         if (Object.getPrototypeOf(textStr) !== String.prototype) return;
-
         this.shadowRoot.getElementById("input-entry").value = textStr;
     }
 
@@ -107,6 +139,44 @@ class InputListItemContainer extends HTMLElement {
     }
 }
 
+class InputCheckboxContainer extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    loadShaddowRoot(tag = "input-checkbox-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;
+    }
+
+    toggle() {
+        let elm = this.shadowRoot.getElementById("input-checkbox");
+        elm.checked = !elm.checked;
+    }
+
+    on() {
+        let elm = this.shadowRoot.getElementById("input-checkbox").checked = true;
+    }
+
+    off() {
+        let elm = this.shadowRoot.getElementById("input-checkbox").checked = false;
+    }
+
+    serialize() {
+        return this.shadowRoot.getElementById("input-checkbox").value;
+    }
+}
+
+
+
 
 class LspConfig extends LspConfigContainer {
     constructor() {
@@ -115,6 +185,13 @@ class LspConfig extends LspConfigContainer {
     }
 }
 
+class InputDict extends InputDictContainer {
+    constructor() {
+        super();
+        this.loadShaddowRoot();
+    }
+}
+
 class InputList extends InputListContainer {
     constructor() {
         super();
@@ -127,4 +204,11 @@ class InputListItem extends InputListItemContainer {
         super();
         this.loadShaddowRoot();
     }
+}
+
+class InputCheckbox extends InputCheckboxContainer {
+    constructor() {
+        super();
+        this.loadShaddowRoot();
+    }
 }

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

@@ -17,8 +17,10 @@ window.onload = (eve) => {
 
 const defineCustomElements = () => {
     customElements.define("lsp-config", LspConfig, { extends: 'div' });
+    customElements.define("input-dict", InputDict, { extends: 'ul' });
     customElements.define("input-list", InputList, { extends: 'ul' });
     customElements.define("input-list-item", InputListItem, { extends: 'li' });
+    customElements.define("input-checkbox", InputCheckbox, { extends: 'input' });
 }
 
 const loadLSPClientJSFiles = () => {

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

@@ -28,7 +28,7 @@ const loadPythonLSPFromBlobURLs = () => {
                             modes: "python|python3",
                             type: "socket", // "socket|worker"
                             socket: new WebSocket( "${ lspServersConfig['python']['socket'] }" ),
-                            initializationOptions: ${ JSON.stringify( lspServersConfig['python']['initialization_options'] ) }
+                            initializationOptions: ${ JSON.stringify( lspServersConfig['python']['initialization-options'] ) }
                         }
                     );
                 }()
@@ -67,7 +67,7 @@ const loadPythonLSPFromNetwork = () => {
                         modes: "python|python3",
                         type: "socket", // "socket|worker"
                         socket: new WebSocket( "${ lspServersConfig['python']['socket'] }" ),
-                        initializationOptions: ${ JSON.stringify( lspServersConfig['python']['initialization_options'] ) }
+                        initializationOptions: ${ JSON.stringify( lspServersConfig['python']['initialization-options'] ) }
                     });
                 }()
             `;
@@ -89,125 +89,104 @@ const loadPythonLSPFromNetwork = () => {
 
 
 const loadSettingsFileToUI = async () => {
-    generateElement(lspServersConfig);
+    let config    = lspServersConfig;
+    let languages = Object.keys(config);
 
-    // let config = lspServersConfig;
+    clearChildNodes(lspSettingsUI);
-    // let keys = Object.keys(lspServersConfig);
+    for (let i = 0; i < languages.length; i++) {
+        let elm  = document.createElement("lsp-config");
+        let lang = languages[i];
 
-    // for (let i = 0; i < languages.length; i++) {
+        elm.setTitle(lang);
-    //     let elm  = document.createElement("lsp-config");
+        lspSettingsUI.appendChild( elm );
-    //     let lang = languages[i];
 
-    //     elm.setTitle(lang);
+        generateElement(config[lang], "", elm);
-    //     lspSettingsUI.appendChild( elm );
+    }
-
-    //     generateElement(lang, elm, lspServersConfig[lang]);
-    // }
 
 }
 
 
 const saveSettingsFileFromUI = () => {
-
+    console.log("Stub...");
 }
 
 
 const generateElement = (config = {}, parent = "", elm = null) => {
-    const proto = Object.getPrototypeOf(config)
+    const proto = Object.getPrototypeOf(config);
-    console.log(config, parent, elm);
 
     switch (proto) {
         case String.prototype:
-            handleString(config, elm);
+            handleString(config, parent, elm);
-
-            // lspSettingsUI.appendChild( target );
 
             break;
         case Array.prototype:
-            handleList(config, elm);
+            handleList(config, parent, elm);
-
-            // lspSettingsUI.appendChild( target );
 
             break;
         case Boolean.prototype:
+            handleBoolean(config, parent, elm);
 
             break;
         case Map.prototype:
+            console.log("Map generatable HTML type stub...");
 
             break;
         default:
             if ( isDict(config) ) {
-                if (parent === "" && elm === null) {
+                handleDictionary(config, parent, elm);
-                    handleRoot(config);
-                    // let elm  = document.createElement("lsp-config");
-                    // let lang = languages[i];
-
-                    break;
-                }
-
-                handleDictionary(config, elm);
-
-                // target = handleDictionary(config, elm);
-                // lspSettingsUI.appendChild( target );
-                // let elm  = document.createElement("lsp-config");
-                // let lang = languages[i];
 
                 break;
             }
 
-            console.log("No generatable HTML type...")
+            console.log("No generatable HTML type...");
     }
 
 }
 
 
-
+const handleDictionary = (config, parent, elm) => {
-
+    let listElm = document.createElement("input-dict");
-const handleRoot = (config) => {
+    let keys    = Object.keys(config);
-    let keys = Object.keys(config);
+    listElm.setTitle( parent );
-
-    for (let i = 0; i < keys.length; i++) {
-        let elm = document.createElement("lsp-config");
-        let key = keys[i];
-
-        elm.setTitle(key);
-        lspSettingsUI.appendChild( elm );
-
-        generateElement(config[key], key, elm);
-    }
-
-}
-
-
-const handleDictionary = (config, elm) => {
-    let keys = Object.keys(config);
 
     for (let i = 0; i < keys.length; i++) {
         let key = keys[i];
 
-        generateElement(config[key], key, elm);
+        generateElement(config[key], key, listElm);
     }
+
+    elm.append(listElm);
+    return elm;
 }
 
-const handleList = (config, elm) => {
+const handleList = (config, parent, elm) => {
     let listElm = document.createElement("input-list");
+    listElm.setTitle( parent );
 
     for (var i = 0; i < config.length; i++) {
         let inputElm = document.createElement("input-list-item");
+
         inputElm.setText( config[i] );
         listElm.append(inputElm);
     }
 
     elm.append(listElm);
-
     return elm;
 }
 
-const handleString = (config, elm) => {
+const handleString = (config, parent, elm) => {
-    console.log(config, elm);
     let inputElm = document.createElement("input-list-item");
 
     inputElm.setTitle(parent);
     inputElm.setText(config);
+    elm.append(inputElm);
+}
+
+const handleBoolean = (config, parent, elm) => {
+    let inputElm = document.createElement("input-checkbox");
+
+    inputElm.setTitle(parent);
+    (config === true) ? inputElm.on() : inputElm.off();
+
     elm.append(inputElm);
 }

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

@@ -4,14 +4,14 @@
         "alt-command": "",
         "command": "",
         "socket": "ws://127.0.0.1:3030/?name=shell",
-        "initialization_options": {}
+        "initialization-options": {}
     },
     "python": {
         "info": "https://github.com/python-lsp/python-lsp-server",
         "alt-command": "pylsp --ws --port 3030",
         "command": "lsp-ws-proxy --listen 3030 -- pylsp",
         "socket": "ws://127.0.0.1:3030/?name=pylsp",
-        "initialization_options": {
+        "initialization-options": {
             "pylsp.plugins.rope_autoimport.enabled": true,
             "pylsp.plugins.rope_completion.enabled": true,
             "pylsp.plugins.rope_completion.eager": true,
@@ -26,7 +26,7 @@
         "alt-command": "jedi-language-server",
         "command": "lsp-ws-proxy --listen 3030 -- jedi-language-server",
         "socket": "ws://127.0.0.1:3030/?name=jedi-language-server",
-        "initialization_options": {
+        "initialization-options": {
             "jediSettings": {
                 "autoImportModules": [],
                 "caseInsensitiveCompletion": true,
@@ -53,20 +53,20 @@
         "alt-command": "clangd",
         "command": "lsp-ws-proxy --listen 3030 -- clangd",
         "socket": "ws://127.0.0.1:3030/?name=clangd",
-        "initialization_options": {}
+        "initialization-options": {}
     },
     "cpp": {
         "info": "https://clangd.llvm.org/",
         "alt-command": "clangd",
         "command": "lsp-ws-proxy --listen 3030 -- clangd",
         "socket": "ws://127.0.0.1:3030/?name=clangd",
-        "initialization_options": {}
+        "initialization-options": {}
     },
     "java": {
         "info": "https://download.eclipse.org/jdtls/",
         "alt-command": "java-language-server",
         "command": "lsp-ws-proxy --listen 3030 -- java-language-server",
         "socket": "ws://127.0.0.1:3030/?name=java-language-server",
-        "initialization_options": {}
+        "initialization-options": {}
     }
 }