Wifi UI update

components/wifi-manager/webapp/src/js/test.js

@@ -0,0 +1,135 @@
+let sd = {};
+let rf=false;
+function getStatus() {
+        const config = {};
+        window.$(`#valuesTable input:text,  #valuesTable input:checked`).each(function(_index, entry) {
+            switch (entry.attributes.dtype.value) {
+                case 'string':
+                    config[entry.name] = entry.value;
+                    break;
+                    case 'number':
+                    config[entry.name] = Number(entry.value);
+                break;
+                case 'boolean':
+                    config[entry.name] = entry.value=='true';
+                break;
+                default:
+                    break;
+            }
+            
+        });     
+        return config;       
+    }   
+
+    // function getOptions(entry)  {
+    //     let output='';
+    //     for (const property in entry) { 
+    //         output+=`<option value="${entry[property]}">${property}</option>`;
+    //     }
+    //     return output;
+    // }
+    function getRadioButton(entry){
+        let output='';
+        for (const property in sd[entry]) { 
+            output+=`
+            <div class="custom-control custom-radio">
+            <input type="radio" class="custom-control-input" id="${entry}_${sd[entry][property]}" name="${entry}" value="${sd[entry][property]}" dtype='${typeof(sd[entry][property])}'>
+            <label class="custom-control-label" for="${entry}_${sd[entry][property]}">${property}</label>
+            </div>
+            `;
+        }
+        return output;
+
+    }
+
+    window.refreshStatus = function() {
+        if(Object.keys(sd).length>0){
+            if(rf) return;
+            rf=true;
+            window.$.getJSON('/status.json', function(data) {
+                for (const property in data) {
+                    const val = data[property];
+                    let input = $(`#val_${property}, #valuesTable input[name="${property}"]`) ;
+                    if(input.length>0){
+                        if(input.is(':radio') ){
+                            $(`#${property}_${val ?? 0}`).prop('checked',true);
+                        }
+                        else {
+                            if(input.val() !==val && !input.is(":focus")){
+                                input.val(val);
+                            }
+                        }
+
+                    }
+                    else {
+                        
+                        if(sd[property]){
+                            window.$('#valuesTable').append(
+                                `<tr><td>${property}</td>
+                                <td >
+                                ${getRadioButton(property)}
+                                </td></tr>`);
+                            $(`#${property}_${val ?? 0}`).prop('checked',true);
+                        }
+                        else {
+                            window.$('#valuesTable').append(`<tr><td>${property}</td><td><input type='text' class='value form-control nvs' id="val_${property}" name='${property}' dtype='${typeof(val)}' ></input></td></tr>`);
+                            window.$(`#val_${property}`).val(val);
+                        }
+
+
+                    }
+
+                }
+            })
+            .fail(function() {
+
+            })
+            .done(function(){
+                rf=false;
+            });
+
+        }
+        else {
+            window.$.getJSON('/statusdefinition.json', function(data) {
+                sd=data;
+            })
+            .fail(function() {
+
+            })
+            .done(function(){
+            });                                
+        }
+
+    }
+    function pushStatus(){
+        const data = {
+                timestamp: Date.now(),
+                status:  getStatus()
+            };
+            window.$.ajax({
+                url: '/status.json',
+                dataType: 'text',
+                method: 'POST',
+                cache: false,
+                contentType: 'application/json; charset=utf-8',
+                data: JSON.stringify(data),
+            });
+            console.log('sent config JSON with data:', JSON.stringify(data));
+    }
+
+    window.$(document).ready(function() {
+        window.$('#save_status').on('click', function() {
+            pushStatus();
+        });            
+        window.$( "#valuesTable" ).change(function() {
+            pushStatus();
+        });            
+        
+        setInterval(window.refreshStatus, 1000);
+        $('svg >> symbol').each(function() { 
+            $('#allIcons').append( `<svg style="fill:white; width:1.5rem; height: 1.5rem;">
+            <use xlink:href="#${this.id}"></use>
+          </svg>`);
+         });
+         
+    }) ;