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));
};

function updateParameters() {
  fetch('/parameters', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: ''
  })
  .then(response => response.json())
  .then(json_str => {
    const active_pwm = Math.round(json_str.active_pwm / 4095 * 100);
    document.querySelector('#range_act_pwm').value = active_pwm;
    document.querySelector('#out_act_pwm').value = active_pwm;
    
    const idle_pwm_max = Math.round(json_str.idle_pwm_max / json_str.active_pwm * 100);
    document.querySelector('#range_idl_pwm').value = idle_pwm_max;
    document.querySelector('#out_idl_pwm').value = idle_pwm_max;

    document.querySelector('#range_tim_sta').value = json_str.time_per_stair;
    document.querySelector('#out_tim_sta').value = json_str.time_per_stair;

    document.querySelector('#range_tim_ldr').value = json_str.time_ldr;
    document.querySelector('#out_tim_ldr').value = json_str.time_ldr;

    document.querySelector('#range_ldr_shw').value = json_str.ldr_schwelle;
    document.querySelector('#out_ldr_shw').value = json_str.ldr_schwelle;

  })
  .catch(error => console.log('Error:', error));
};

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

  updateParameters();

  // 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 = '';
  };

});