ESP8266_Treppenlicht/data/input.js

let rangeValues = {};
let xhrUpd = new XMLHttpRequest();

xhrUpd.onreadystatechange = function () {
  if (xhrUpd.readyState == 4) {
    if (xhrUpd.status == 200) {
      console.log("xhrUpd: ", xhrUpd.responseText);
    }
    else {
      console.log("xhrUpd: status=", xhrUpd.status);
    }
  }
}

function reloadRangeValues() {
  let url = "/update";
  // if there are scheduled updates, send them
  if (Object.keys(rangeValues).length > 0) {
    let params = [];
    for (let p in rangeValues)
      params.push(encodeURIComponent(p) + "=" + encodeURIComponent(rangeValues[p]));
    params = params.join("&");

    xhrUpd.open("POST", url, true);
    xhrUpd.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhrUpd.send(params);

    rangeValues = {};
  }

};

function reloadTerminal() {
  const terminal = document.querySelector("#term");
  const autoscroll = document.querySelector("#scroll");

  fetch(`/terminal`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: ''
  })
    .then(response => response.text())
    .then(data => {
      if(data.length > 0) {
        terminal.innerHTML += data;
        if (autoscroll.checked)
          terminal.scrollTop = terminal.scrollHeight;
      }
    })
    .catch(error => console.log('Error:', error));
};

document.addEventListener('DOMContentLoaded', () => {
  setInterval(reloadTerminal, 1000);
  setInterval(reloadRangeValues, 1000);


  // use data- attributes for action
  document.querySelectorAll('.control').forEach((button) => {
    button.onclick = () => {
      fetch(`/action`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `control=${button.dataset.action}`
      })
        .then(response => console.log(response))
        .catch(error => console.log('Error:', error));
    }
  });

  document.querySelectorAll('.regler').forEach((regler) => {
    regler.oninput = () => {
      document.querySelector(`#${regler.dataset.output}`).innerHTML = regler.value;
      rangeValues[regler.id] = regler.value;
    }
  });
  
  document.querySelector('#clear_term').onclick = () => {
    document.querySelector("#term").innerHTML = '';
  };

});