2018-11-17

Die Webseite zur Esp32 Tageszeitschaltuhr.

zeitschaltuhr32.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="style32.css">
    <style>
      div {display: flex;}
      span {padding: 0.5em;  }
      input {background-color: #a9a9a9;
      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";
          }
          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('html').addEventListener('click', function () {
          el.classList.remove('note'), el.innerHTML = "";
        });
        el = document.querySelector('p');
      });
    </script>
  </head>
  <body>
    <h1>Zeitschaltuhr</h1>
    <form>
    </form>
    <button class="button">Absenden</button>
    <p></p>
  </body>
</html>

Zurück