mqtrigger/main/static/index.js

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
      params += params ? '&' : '';

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


  });

  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;
    }
    console.log("Getting values from " + srcUrl);

    let http = new XMLHttpRequest();
    http.open('GET', srcUrl, 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) {
        console.log("Values received: " + http.responseText);
        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];
            }
          }
        }
      }
    }
    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);
  }
}