Allow saving/loading nvs from the nvs editor - release

components/wifi-manager/code.js

@@ -100,8 +100,95 @@ function RepeatRefreshAPInterval(){
     if(RefreshAPIIntervalActive)
         startRefreshAPInterval();
 }
+function getConfigJson(slimMode){
+	var config = {};
+    $("input.nvs").each(function() {
+        var key = $(this)[0].id;
+        var val = $(this).val();
+        if(!slimMode){
+            var nvs_type = parseInt($(this)[0].attributes.nvs_type.nodeValue,10);
+            if (key != '') {
+                config[key] = {};
+                if(nvs_type == nvs_type_t.NVS_TYPE_U8    
+    				|| nvs_type ==  nvs_type_t.NVS_TYPE_I8    
+    				|| nvs_type ==  nvs_type_t.NVS_TYPE_U16   
+    				|| nvs_type ==  nvs_type_t.NVS_TYPE_I16   
+    				|| nvs_type ==  nvs_type_t.NVS_TYPE_U32   
+    				|| nvs_type ==  nvs_type_t.NVS_TYPE_I32   
+    				|| nvs_type ==  nvs_type_t.NVS_TYPE_U64   
+    				|| nvs_type ==  nvs_type_t.NVS_TYPE_I64) {
+    					config[key].value = parseInt(val);	
+    			}   
+    			else { 
+    				config[key].value = val; 
+    			} 
+                config[key].type = nvs_type;
+            }
+        }
+        else {
+        	config[key] = val;
+        }
+    });
+    var key = $("#nvs-new-key").val();
+    var val = $("#nvs-new-value").val();
+    if (key != '') {
+    	if(!slimMode){
+	        config[key] = {};
+	        config[key].value = val;
+	        config[key].type = 33;
+    	}
+    	else {
+    		config[key] = val;
+    	}
+    }
+    return config;
+	}
 
-$(document).ready(function(){
+
+	function onFileLoad(elementId, event) {
+		var data={};
+    	try{
+    		data = JSON.parse(elementId.srcElement.result);
+    	}
+    	catch (e){
+    		alert('Parsing failed!\r\n '+ e);
+    	}
+    	$("input.nvs").each(function() {
+            var key = $(this)[0].id;
+            var val = $(this).val();
+    		if(data[key]){
+    			if(data[key] != val){
+    				console.log("Changed "& key & " " & val & "==>" & data[key]);
+    				$(this).val(data[key]);
+    			}
+    		}
+    		else {
+    			console.log("Value " & key & " missing from file");
+    		}
+    	});
+
+	}
+	
+	function onChooseFile(event, onLoadFileHandler) {
+	    if (typeof window.FileReader !== 'function')
+	        throw ("The file API isn't supported on this browser.");
+	    let input = event.target;
+	    if (!input)
+	        throw ("The browser does not properly implement the event object");
+	    if (!input.files)
+	        throw ("This browser does not support the `files` property of the file input.");
+	    if (!input.files[0])
+	        return undefined;
+	    let file = input.files[0];
+	    let fr = new FileReader();
+	    fr.onload = onLoadFileHandler;
+	    fr.readAsText(file);
+	    input.value="";
+	}
+	$(document).ready(function(){
+		$("#load-nvs").click(function () {
+		    $("#nvsfilename").trigger('click');
+		});
     $("#wifi-status").on("click", ".ape", function() {
         $( "#wifi" ).slideUp( "fast", function() {});
         $( "#connect-details" ).slideDown( "fast", function() {});
@@ -334,42 +421,27 @@ $(document).ready(function(){
         console.log('sent config JSON with data:', JSON.stringify(data));
     });
 
+
+	$("#save-as-nvs").on("click", function() {
+		var data = { 'timestamp': Date.now() };
+	        var config = getConfigJson(true);
+	         const a = document.createElement("a");
+	         a.href = URL.createObjectURL(
+	        		new Blob([JSON.stringify(config, null, 2)], {
+	        		type: "text/plain"
+	        }));
+	        a.setAttribute("download", "nvs_config" + Date.now() +"json");
+	        document.body.appendChild(a);
+	        a.click();
+	        document.body.removeChild(a);
+	        console.log('sent config JSON with headers:', JSON.stringify(headers));
+	        console.log('sent config JSON with data:', JSON.stringify(data));
+	    });
+    
     $("#save-nvs").on("click", function() {
         var headers = {};
         var data = { 'timestamp': Date.now() };
-        var config = {};
+        var config = getConfigJson(false);
-        $("input.nvs").each(function() {
-            var key = $(this)[0].id;
-            var val = $(this).val();
-            var nvs_type = parseInt($(this)[0].attributes.nvs_type.nodeValue,10);
-            if (key != '') {
-                config[key] = {};
-                if(nvs_type == nvs_type_t.NVS_TYPE_U8    
-					|| nvs_type ==  nvs_type_t.NVS_TYPE_I8    
-					|| nvs_type ==  nvs_type_t.NVS_TYPE_U16   
-					|| nvs_type ==  nvs_type_t.NVS_TYPE_I16   
-					|| nvs_type ==  nvs_type_t.NVS_TYPE_U32   
-					|| nvs_type ==  nvs_type_t.NVS_TYPE_I32   
-					|| nvs_type ==  nvs_type_t.NVS_TYPE_U64   
-					|| nvs_type ==  nvs_type_t.NVS_TYPE_I64) {
-						config[key].value = parseInt(val);	
-				}   
-				else { 
-					config[key].value = val; 
-				} 
-                
-                
-                config[key].type = nvs_type;
-            }
-        });
-        var key = $("#nvs-new-key").val();
-        var val = $("#nvs-new-value").val();
-        if (key != '') {
-//            headers["X-Custom-"	+key] = val;
-            config[key] = {};
-            config[key].value = val;
-            config[key].type = 33;
-        }
         data['config'] = config;
         $.ajax({
             url: '/config.json',
@@ -421,7 +493,6 @@ $(document).ready(function(){
             fwurl : {
             value : url,
             type : 33
-
             }
         };
 

components/wifi-manager/http_server_handlers.c

@@ -721,6 +721,7 @@ esp_err_t config_post_handler(httpd_req_t *req){
 
 	if(err==ESP_OK){
 		httpd_resp_sendstr(req, "{ \"result\" : \"OK\" }");
+		messaging_post_message(MESSAGING_INFO,MESSAGING_CLASS_SYSTEM,"Save Success");
 	}
     cJSON_Delete(root);
 	if(bOTA) {

components/wifi-manager/index.html

@@ -332,13 +332,16 @@
                         <tbody id="nvsTable">
                         </tbody>
                     </table>
-                    <div class="buttons">
+<div class="buttons">
 						<div id="boot-div">
                         	<form id="reboot-form" action="/reboot.json" method="post" target="dummyframe">
                             	<button id="reboot-button" type="submit" class="btn btn-primary">Reboot</button>
                         	</form>
                     	</div>                    
-                        <input id="save-nvs" type="button" class="btn btn-success" value="Save" />
+                        <input id="save-nvs" type="button" class="btn btn-success" value="Commit">
+                        <input id="save-as-nvs" type="button" class="btn btn-success" value="Download config">
+                        <input id="load-nvs" type="button" class="btn btn-success" value="Load File">
+                        <input aria-describedby="fileHelp" onchange="onChooseFile(event, onFileLoad.bind(this))" id="nvsfilename" type="file" style="display:none">
                     </div>
                 </div> <!-- nvs -->