From 5d2a811cf1d579102ec5196f4606731106315f6f Mon Sep 17 00:00:00 2001
From: derpicknicker1 <10minutemail@web.de>
Date: Fri, 20 Oct 2017 22:49:16 +0200
Subject: [PATCH 1/2] Buttons for im-/export on config page

Added import and export buttons to the config page to download and
upload settings.
Also made the requests for networks and pefs consecutive because they
often caused issues (reset of chip, memory issues) when they ran in
parallel.
---
 config_html.h | 78 +++++++++++++++++++++++++++++++++------------------
 1 file changed, 50 insertions(+), 28 deletions(-)

diff --git a/config_html.h b/config_html.h
index 41a522c..75e3c5d 100644
--- a/config_html.h
+++ b/config_html.h
@@ -23,7 +23,7 @@ const char config_html[] PROGMEM = R"=====(
    <h1>** ESP32 Radio **</h1>
    <p>You can edit the configuration here. <i>Note that this will be effective on the next restart of the radio.</i></p>
    <h3>Available WiFi networks
-   <select class="select" onChange="handletone(this)" id="ssid"></select>
+   <select class="select" id="ssid"></select>
    </h3>
    <textarea rows="20" cols="100" id="prefs">Loading preferences</textarea> 
    <br>
@@ -32,10 +32,37 @@ const char config_html[] PROGMEM = R"=====(
    <button class="button buttonr" onclick="httpGet('reset')">Restart</button>
    &nbsp;&nbsp;
    <button class="button" onclick="ldef('getdefs')">Default</button>
-    <br><input type="text" size="80" id="resultstr" placeholder="Waiting for input....">
-    <br>
+   &nbsp;&nbsp;
+   <button class="button buttonb" onclick="wFile()">Export</button>
+   &nbsp;&nbsp;
+   <button class="button buttonb" onclick="f.click()">Import</button>
+   <input type="file" id="f" style="display:none;" accept="text/*"/>
+   <br><input type="text" size="80" id="resultstr" placeholder="Waiting for input....">
 
     <script>
+
+      f.addEventListener('change', rFile, false);
+
+      function rFile(e) {
+        if (!e.target.files[0]) return;
+        var r = new FileReader();
+        r.onload = function(e) {
+          prefs.value = e.target.result;
+          
+        };
+        r.readAsText(e.target.files[0]);
+      }
+
+      function wFile() {
+        var e = document.createElement('a');
+        e.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(prefs.value));
+        e.setAttribute('download', 'esp32radio_settings.txt');
+        e.style.display = 'none';
+        document.body.appendChild(e);
+        e.click();
+        document.body.removeChild(e);
+      }
+
       function httpGet ( theReq )
       {
         var theUrl = "/?" + theReq + "&version=" + Math.random() ;
@@ -50,7 +77,6 @@ const char config_html[] PROGMEM = R"=====(
         xhr.send() ;
       }
 
-      // Load preferences or default preferences
       function ldef ( source )
       {
         var xhr = new XMLHttpRequest() ;
@@ -65,7 +91,6 @@ const char config_html[] PROGMEM = R"=====(
         xhr.send() ;
       }
 
-      // Save the preferences
       function fsav()
       {
         var str = prefs.value ;
@@ -78,7 +103,6 @@ const char config_html[] PROGMEM = R"=====(
             resultstr.value = xhr.responseText ;
           }
         }
-        // Remove empty lines
         while ( str.indexOf ( "\r\n\r\n" ) >= 0 )
         {
           str = str.replace ( /\r\n\r\n/g, "\r\n" )      
@@ -92,32 +116,30 @@ const char config_html[] PROGMEM = R"=====(
         xhr.send ( str + "\n" ) ;
       }
 
-      // Fill configuration initially
-      // First the available WiFi networks
-      var i, select, opt, networks, params ;
-
-      select = document.getElementById("selnet") ;
-      var theUrl = "/?getnetworks" + "&version=" + Math.random() ;
-      var xhr = new XMLHttpRequest() ;
-      xhr.onreadystatechange = function() {
-        if ( xhr.readyState == XMLHttpRequest.DONE )
-        {
-          networks = xhr.responseText.split ( "|" ) ;
-          
-          for ( i = 0 ; i < ( networks.length - 1 ) ; i++ )
+      function lnet(){
+        var i, opt, networks ;
+        var xhr = new XMLHttpRequest() ;
+        xhr.onreadystatechange = function() {
+          if ( xhr.readyState == XMLHttpRequest.DONE )
           {
-            opt = document.createElement( "OPTION" ) ;
-            opt.value = i ;
-            opt.text = networks[i] ;
-            ssid.add( opt ) ;
+            networks = xhr.responseText.split ( "|" ) ;
+            
+            for ( i = 0 ; i < ( networks.length - 1 ) ; i++ )
+            {
+              opt = document.createElement( "OPTION" ) ;
+              opt.value = i ;
+              opt.text = networks[i] ;
+              ssid.add( opt ) ;
+            }
+            ldef ( "getprefs" ) ;
           }
         }
+        xhr.open ( "GET", "/?getnetworks" + "&version=" + Math.random(), false ) ;
+        xhr.send() ;
       }
-      xhr.open ( "GET", theUrl, false ) ;
-      xhr.send() ;
-      // Now get the configuration parameters from preferences
-      ldef ( "getprefs" ) ;
+      
+      lnet();
     </script>
   </body>
 </html>
-)=====" ;
+)=====" ;

From 51378fb9e170f6447a1481130b09bd236bd180b6 Mon Sep 17 00:00:00 2001
From: derpicknicker1 <10minutemail@web.de>
Date: Fri, 20 Oct 2017 22:51:11 +0200
Subject: [PATCH 2/2] Added style for blue buttons to css

---
 radio_css.h | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/radio_css.h b/radio_css.h
index 745830b..98dc9ba 100644
--- a/radio_css.h
+++ b/radio_css.h
@@ -61,6 +61,8 @@ li a:hover, a.active {
 
 .buttonr {background-color: #D62C1A;}
 
+.buttonb {background-color: #1E90FF;}
+
 .select {
    width: 160px;
    height: 32px;
@@ -122,4 +124,4 @@ textarea {
   font-family: Courier, "Lucida Console", monospace;
   background-color: white;
   resize: none;
-})=====" ;
+})=====" ;