2018-10-19

Die Webseite zur Esp8266 Zeitschaltuhr.

zeitschaltuhr.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.0">
    <title>Zeitschaltuhr</title>
    <link rel="stylesheet" href="style.css">
    <style>
      div {display: flex;}
      span {padding: 0.5em;  }
      #status {
      margin-top: 7%;
      margin-left: 1.4em;
      font-size: 1.9em;
      border: 0;
      }
      time {
      color: #e1e1e1;
      text-shadow: 2px 2px 2px black;
      font-size: 2em;
      font-weight: bold;
      margin-bottom: 0.5em;
      }
      input {background-color: #87cefa;
      width: 3.8em;
      font-size: 3em;
      font-weight: bold;}
      @media only screen and (max-width: 600px) {
      input {
      font-size: 2.2em;
      width: 3.5em;
      border: 0;}
      }
    </style>
    <script>
      function list() {
        var buf = '';
        for (let i = 0; i < 0x0A; i++) {
          buf += `${i%2 == 0 ? '<div><span>Ein</span>' : '<span>Aus</span>'}
          <input type="time" name="sz${i}" value="">${i%2 == 0 ? '' : '</div>'}`; 
        }
        document.querySelector('form').insertAdjacentHTML('beforeend', buf);   
      }
      function send(arg) {
        fetch('/schaltuhr', {
          method: 'post',
          body: arg
        }).then(response => {
          if (response.status == 204) {
      	    el.classList.add('note'), el.innerHTML = "Schaltzeiten gespeichert";
            setTimeout( () => {
              el.classList.remove('note'), el.innerHTML = "";
            }, 5000);
          }
          return response.json();
        }).then(array => {
          array.forEach(function(x, i) {
            document.querySelector(`[name=sz${i}]`).value = x;
          });
        });
      }
      document.addEventListener('DOMContentLoaded', function () {
        list();
        send();
        document.querySelector('button').addEventListener('click', function () {
          send(new FormData(document.querySelector('form')));
        });
        document.querySelector('#status').addEventListener('click', renew.bind(this, '?tog='));
        el = document.querySelector('p');
      });
      function renew(arg) {
        fetch(`status${arg}`).then(function (response) {
          return response.json();
        }).then(function (array) {
          var result = array[0].split(/\s/);
          document.querySelector('time').innerHTML = result[1];
          var elem =document.querySelector('#status')
          elem.value = array[1];
          elem.style.color = array[1] == 'ON' ? '#00ff00' : 'red';
        });
      }
      document.addEventListener('DOMContentLoaded', renew(''), setInterval(renew, 1000,''));
    </script>
  </head>
  <body>
    <h1>Zeitschaltuhr</h1>
    <time></time>
    <form></form>
    <div>
      <button id="$">Absenden</button>
      <input type="button" id="status">	
    </div>
    <p></p>
  </body>
</html>

Zurück