2020-04-13

Die Webseite zum Esp32 Individual Button Tab.

button.html

<!DOCTYPE HTML> <!-- For more information visit: https://fipsok.de -->
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style32.css">
	<title>Individual Button</title>
	<style>
	  button:active {
        transition: all .5s ease;
        transform: translate(2%, 15%);
        box-shadow: none;
      }
	  button {
        transition: all .5s ease;
      }
	</style>
    <script>
	  var btnName = JSON.parse(localStorage.getItem('button'));
	  window.addEventListener('DOMContentLoaded', () => {
		if (!btnName) {
          fetch('/press', {
          }).then(resp => {
            return resp.json();
          }).then(arr => {
	        localStorage.setItem('button', JSON.stringify(arr));
		    btnName = arr;
			dom();
	      });
        }
		else {
		  dom();
		}
		send();
	  });
	  function dom() {
	  	var buf = '';
	    btnName.forEach(el => {
		  length = Math.max(length, el.length);
		  buf += '<button class="button">' + el + '<span></span></button>';
        });
	    document.querySelector('body').insertAdjacentHTML('beforeend', buf);
		document.querySelectorAll('button').forEach((el, i) => {
          el.addEventListener('click', () => {
            let formData = new FormData();
            formData.append(i, 0);
            send(formData);
          });
        });
	  }
      function send(arg) {
        fetch('/press', {
          method: 'post',
          body: arg
        }).then(resp => {
          return resp.json();
        }).then(str => {
		  if (str.length != btnName.length) localStorage.clear();
          document.querySelectorAll('button').forEach((el, i) => {
		    el.style.minWidth = 0.8 * length + 'em';
		    el.style.backgroundColor = str[i] != 0 ? '#3f0' : '#6c5';
		    el.lastElementChild.innerHTML = str[i] != 0 ? ' AN' : ' AUS';
		  });
        });
      } 
    </script>
  </head>
  <body>
    <h1>SmartHome</h1>
  </body>
</html>

Zurück