mqtrigger/main/static/index.js

var valuesCache = {};

function ip2int(ip) {
  return ip.split('.').reduce(function(ipInt, octet) { return (ipInt<<8) + parseInt(octet, 10)}, 0) >>> 0;
}

function sendClickHandler(event) {
  console.log("Sending form...");
  //console.debug(event);
  let form = event.srcElement.form;
  console.debug(form);

  let params = '';
  Array.from(form.elements).forEach(element => {
    console.log(element);
    console.log(element.name);
    console.log(element.value);

    if (element.value) { //TODO: checkbox/radio

      if (!element.hasAttribute('data-ignore')) {
        params += params ? '&' : '';
        if (element.hasAttribute('data-ip32')) {
          console.log("IPv4 32");
          params += element.name + '=' + ip2int(element.value);
        }
        else {
          params += element.name + '=' + element.value;
        }
      }
      else {
        console.log("Ignoring " + element.name);
      }
      
    }


  });

  console.log("params: " + params);

  postParams(form.getAttribute('action'), params);
  console.log("Form sent");
}

function initFormSendButtons(form) {
  const btns = form.querySelectorAll('.send');
  for (i = 0; i < btns.length; ++i) {
    btns[i].addEventListener('click', sendClickHandler);
  }
}

function loadContent(url) {
  let http = new XMLHttpRequest();
  http.open('GET', url, true);

  let element = document.getElementById('content');
  element.innerHTML = "LOADING..."; //TODO: add spinner

  //Send the proper header information along with the request
  //http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

  http.onreadystatechange = function () {//Call a function when the state changes.
    if (http.readyState == 4 && http.status == 200) {
      console.log("Content received");
      element.innerHTML = http.responseText;
      loadValues(element);
      initFormSendButtons(element);
    }
  }
  http.send();
}

function loadValues(element) {
  
  const forms = element.querySelectorAll('form');
  for (i = 0; i < forms.length; ++i) {
    const srcUrl = forms[i].getAttribute('data-values-src');
    if (!srcUrl) {
      continue;
    }

    if (valuesCache[srcUrl]) {
      console.log("Source values already cached: " + valuesCache[srcUrl]);
      //TODO: dry
      let obj = JSON.parse(valuesCache[srcUrl]);
      if (obj) {
        for (var key of Object.keys(obj)) {
          console.log(key + " -> " + obj[key])
          let input = element.querySelector("[name='" + key + "'");
          if (input) { //TODO: checkbox/radio
            input.value = obj[key];
            if (input.hasAttribute('data-onset')) {
              eval(input.getAttribute("data-onset"));
            }
          }
        }
      }
      continue;
    }

    console.log("Getting values from " + srcUrl);

    let http = new XMLHttpRequest();
    http.open('GET', srcUrl, false);

    //Send the proper header information along with the request
    //http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

    http.onreadystatechange = function () {//Call a function when the state changes.
      if (http.readyState == 4 && http.status == 200) {
        console.log("Values received: " + http.responseText);
        valuesCache[srcUrl] = http.responseText;

        //TODO: dry
        let obj = JSON.parse(http.responseText);
        if (obj) {
          for (var key of Object.keys(obj)) {
            console.log(key + " -> " + obj[key])
            let input = element.querySelector("[name='" + key + "'");
            if (input) { //TODO: checkbox/radio
              input.value = obj[key];
              if (input.hasAttribute('data-onset')) {
                eval(input.getAttribute("data-onset"));
              }
            }
          }
        }
      }
    }
    http.send();

  }
}

function postParams(url, params) {
  var http = new XMLHttpRequest();
  http.open('POST', url, true);
  //Send the proper header information along with the request
  http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

  http.onreadystatechange = function () {//Call a function when the state changes.
    if (http.readyState == 4 && http.status == 200) {
      alert(http.responseText);
    }
  }
  http.send(params);
}

function navClickHandler(event) {
  console.log('Button Clicked');
  console.log('Destination: ' + this.getAttribute('data-dst'));
  loadContent(this.getAttribute('data-dst'));
}

function initNavButtons() {
  const btns = document.querySelectorAll('.nav-btn');
  for (i = 0; i < btns.length; ++i) {
    btns[i].addEventListener('click', navClickHandler);
  }
}

function getRschDays() {
  let daysBin = 0;
  for (let i = 0; i < 7; ++i) {
    let day = document.getElementById("rsd_" + i.toString());
    if (day && day.checked === true) {
      daysBin |= (1 << i);
    }
  }
  return daysBin;
}

function rschUpdate() {
  let rschElem = document.getElementById("rsch");
  rschElem.value = getRschDays() 
    + " "
    + document.getElementById("rsch_time").value.replace(":", " ") 
    + " "
    + document.getElementById("rsch_rup").value;
}

function rschSet() {
  let data = document.getElementById("rsch").value.split(" ");
  document.getElementById("rsch_time").value = data[1] + ":" + data[2];
  document.getElementById("rsch_rup").value = data[3];
  for (let i = 0; i < 7; ++i) {
    if (data[0] & (1 << i)) {
      document.getElementById("rsd_" + i.toString()).checked = true;
    }
  }
  
}