Zuletzt geändert: 2019-02-24

Das Webinterface zum Esp8266 Admin Tab.

admin.html

<!-- For more information visit: https://fipsok.de -->
<!DOCTYPE HTML>
<html lang="de">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="style.css">
      <title>ESP8266 Admin</title>
      <SCRIPT>
        window.addEventListener('load', () => {
		  renew(),once();
		  let output = document.querySelector('#note');
		  let button = document.querySelectorAll('button');
		  let data = document.querySelectorAll('data'); 
          button[0].addEventListener('click', () => {
            window.location = '/spiffs.html';
          });
          button[1].addEventListener('click', () => {
            window.location = '/';
          });
          button[2].addEventListener('click', check.bind(this, document.querySelector('input')));
		  button[3].addEventListener('click', re.bind(this, 'reconnect'));
		  button[4].addEventListener('click', () => {
            if (confirm('Bist du sicher!')) re('restart');
          });
          function once(arg1,arg2) {
            fetch('/admin/once', {
              method: 'POST',
              body: arg1
            }).then( (resp) => {
              return resp.json();
            }).then( (obj) => {
              output.innerHTML = '';
              output.classList.remove('note');
              document.querySelector('form').reset();
              if (arg1 == undefined) myIv = window.setInterval(renew, 1000);
              if (arg2 == 'reconnect') re(arg2);
              data[3].innerHTML = obj['File'];
              data[4].innerHTML = obj['Build'];
              data[5].innerHTML = obj['SketchSize'];
              data[6].innerHTML = obj['SketchSpace'];
              data[7].innerHTML = obj['LocalIP'];
              data[8].innerHTML = obj['Hostname'];
              data[9].innerHTML = obj['SSID'];
              data[10].innerHTML = obj['GatewayIP'];
              data[11].innerHTML = obj['Channel'];
              data[12].innerHTML = obj['MacAddress'];
              data[13].innerHTML = obj['SubnetMask'];
              data[14].innerHTML = obj['BSSID'];
              data[15].innerHTML = obj['ClientIP'];
              data[16].innerHTML = obj['DnsIP'];
              data[17].innerHTML = obj['ResetReason'];
              data[18].innerHTML = obj['CpuFreqMHz'];
			  data[19].innerHTML = obj['FreeHeap'];
              data[20].innerHTML = obj['ChipSize'];
              data[21].innerHTML = obj['ChipSpeed'];
              data[22].innerHTML = obj['ChipMode'];
              data[23].innerHTML = obj['CoreVersion'].replace(/_/g,'.');
              data[24].innerHTML = obj['SdkVersion'];
            }).catch(function(err) {
              re();
            });   
          }
          function renew() {
            fetch('admin/renew').then( (resp) => {
              return resp.json();
            }).then( (array) => {
			  array.forEach((x, i) => {
                data[i].innerHTML = x
              });
            }); 
          }
          function check(inObj) {
            !inObj.checkValidity() ? (output.innerHTML = inObj.validationMessage, output.classList.add('note')) : (once(inObj.value, 'reconnect'));
          }
          function re(arg) {
            window.clearInterval(myIv);
            fetch(arg);
            output.classList.add('note');
            if (arg == 'restart') {
              output.innerHTML = 'Der Server wird neu gestartet. Die Daten werden in 15 Sekunden neu geladen.';
              setTimeout(once, 15000);
            } 
            else if (arg == 'reconnect'){
              output.innerHTML = 'Die WiFi Verbindung wird neu gestartet. Daten werden in 10 Sekunden neu geladen.';
              setTimeout(once, 10000);
            }
            else {
              output.innerHTML = 'Es ist ein Verbindungfehler aufgetreten. Es wird versucht neu zu verbinden.';
              setTimeout(once, 3000);
            }
          }
        });
      </SCRIPT>
    </head>
    <body>
      <h1>ESP8266 Admin Page</h1>
      <main>
         <section id="links">
            <span>Runtime ESP:</span>
            <span>WiFi RSSI:</span>
            <span>ADC/VCC:</span>
            <span>Sketch Name:</span>
            <span>Sketch Build:</span>
            <span>SketchSize:</span>
            <span>FreeSketchSpace:</span>
            <span>IP address:</span>
            <span>Hostname:</span>
            <span>Connected to:</span>
            <span>Gateway IP:</span>
            <span>Channel:</span>
            <span>MacAddress:</span>
            <span>SubnetMask:</span>
            <span>BSSID:</span>	  
            <span>Client IP:</span>
            <span>DnsIP:</span>
            <span>Reset Ground:</span>
            <span>CPU Freq:</span>
            <span>FreeHeap:</span>	   
            <span>FlashSize:</span>
            <span>FlashSpeed:</span>
            <span>FlashMode:</span>
            <span>Arduino Core Version:</span>
            <span>SDK Version:</span>
         </section>
         <section>
            <data>0</data>
            <div>
               <data></data>
               dBm
            </div>
            <data>0</data>
            <data>?</data>
            <data>0</data>
            <data>0</data>
            <data>0</data>
            <data>0</data>
            <data>?</data>
            <data>?</data>
            <data>0</data>
            <data>0</data>
            <data>0</data>
            <data>0</data>
            <data>0</data>
            <data>0</data>
            <data>0</data>
            <data>?</data>
            <div>
               <data></data>
               MHz
            </div>
            <data>0</data>
            <data>0</data>
            <div>
               <data></data>
               MHz
            </div>
            <data>0</data>
            <data>0</data>
            <data>0</data>
         </section>
      </main>
      <div>
         <button>Spiffs</button>
         <button>Startseite</button>
      </div>
      <div id="note"></div>
      <div>
         <form><input placeholder=" neuer Hostname" pattern="([A-Za-z0-9-]{1,32})" title="Es dürfen nur Buchstaben 
		 (a-z, A-Z), Ziffern (0-9) und Bindestriche (-) enthalten sein. Maximal 32 Zeichen" required>
            <button type="button">Name Senden</button>
         </form>
      </div>
      <div>
         <button>WiFi Reconnect</button>
         <button>ESP Restart</button>
      </div>
   </body>
</html>

Zurück