data/config.html

<!DOCTYPE html>
<html>
 <head>
  <title>Configuration ESP32-radio</title>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="Shortcut Icon" type="image/ico" href="favicon.ico">
 </head>
 <body>
  <ul>
   <li><a class="pull-left" href="/index.html">Control</a></li>
   <li><a class="pull-left" href="/search.html">Search</a></li>
   <li><a class="pull-left active" href="/config.html">Config</a></li>
   <li><a class="pull-left" href="/mp3play.html">MP3-player</a></li>
   <li><a class="pull-left" href="/about.html">About</a></li>
  </ul>
  <br><br><br>
  <center>
   <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>
   <textarea rows="20" cols="100" id="prefs">Loading preferences</textarea> 
   <br>
   <button class="button" onclick="fsav()">Save</button>
   &nbsp;&nbsp;
   <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>
  </center>
    <script>
      function httpGet ( theReq )
      {
        var theUrl = "/" + theReq + "?version=" + Math.random() ;
        var xhr = new XMLHttpRequest() ;
        xhr.onreadystatechange = function() {
          if ( xhr.readyState == XMLHttpRequest.DONE )
          {
            resultstr.value = xhr.responseText ;
          }
        }
        xhr.open ( "GET", theUrl ) ;
        xhr.send() ;
      }

      // Load preferences or default preferences
      function ldef ( source )
      {
        var xhr = new XMLHttpRequest() ;
        xhr.onreadystatechange = function()
        {
          if ( xhr.readyState == XMLHttpRequest.DONE )
          {
            prefs.value = xhr.responseText ;
          }
        }
        xhr.open ( "GET", "/" + source  + "?version=" + Math.random(), false ) ;
        xhr.send() ;
      }

      // Save the preferences
      function fsav()
      {
        var str = prefs.value ;
        var theUrl = "/saveprefs?version=" + Math.random()  + "&";
        var xhr = new XMLHttpRequest() ;
        xhr.onreadystatechange = function()
        {
          if ( xhr.readyState == XMLHttpRequest.DONE )
          {
            resultstr.value = xhr.responseText ;
          }
        }
        // Remove CRs
        while ( str.indexOf ( "\r" ) >= 0 )
        {
          str = str.replace ( /\r/g, "\n" ) ;     
        }
        //Remove double NLs
        while ( str.indexOf ( "\n\n" ) >= 0 )
        {
          str = str.replace ( /\n\n/g, "\n" ) ;
        }
        // Replace "#" with "($)"", as Asyncwebserver does not like "#"
        while ( str.indexOf ( "#" ) >= 0 )
        {
          str = str.replace ( "#", "($)" ) ;
        }
        // Replace newline with delimeter
        while ( str.indexOf ( "\n" ) >= 0 )
        {
          str = str.replace ( "\n", "&" ) ;
        }
        theUrl += str.slice(0,-1) ;				// Chop last ampersand
        xhr.open ( "POST", theUrl, true ) ;
        xhr.setRequestHeader ( "Content-type", "application/x-www-form-urlencoded" ) ;
        xhr.send() ;
      }
      // Fill configuration initially
      // Get the configuration parameters from preferences
      ldef ( "getprefs" ) ;
    </script>
  </body>
</html>