src/html/hardware.js

   1 /* eslint-disable no-unused-vars */
   2 /* eslint-disable comma-dangle */
   3 /* eslint-disable require-jsdoc */
   4
   5 document.addEventListener('DOMContentLoaded', onReady, false);
   6
   7 function _(el) {
   8   return document.getElementById(el);
   9 }
  10
  11 function onReady() {
  12   // Add some tooltips to the pin type icons [CSS class name, Label]
  13   [['icon-input', 'Digital Input'], ['icon-output', 'Digital Output'], ['icon-analog', 'Analog Input'], ['icon-pwm', 'PWM Output']].forEach((t) =>
  14   {
  15     let imgs = document.getElementsByClassName(t[0]);
  16     [...imgs].forEach(i => i.title = t[1]);
  17   });
  18
  19   if (window.File && window.FileList && window.FileReader) {
  20     initFiledrag();
  21   }
  22
  23   loadData();
  24 }
  25
  26 function loadData() {
  27   xmlhttp = new XMLHttpRequest();
  28   xmlhttp.onreadystatechange = function() {
  29     if (this.readyState === 4 && this.status === 200) {
  30       const data = JSON.parse(this.responseText);
  31       updateHardwareSettings(data);
  32     }
  33   };
  34   xmlhttp.open('GET', '/hardware.json', true);
  35   xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  36   xmlhttp.send();
  37 }
  38
  39 function submitHardwareSettings() {
  40   const xhr = new XMLHttpRequest();
  41   xhr.open('POST', '/hardware.json');
  42   xhr.setRequestHeader('Content-Type', 'application/json');
  43   const formData = new FormData(_('upload_hardware'));
  44   xhr.send(JSON.stringify(Object.fromEntries(formData), function(k, v) {
  45     if (v === '') return undefined;
  46     if (_(k) && _(k).type === 'checkbox') {
  47       return v === 'on';
  48     }
  49     if (_(k) && _(k).classList.contains('array')) {
  50       const arr = v.split(',').map((element) => {
  51         return Number(element);
  52       });
  53       return arr.length === 0 ? undefined : arr;
  54     }
  55     return isNaN(v) ? v : +v;
  56   }));
  57   xhr.onreadystatechange = function() {
  58     if (this.readyState === 4 && this.status === 200) {
  59       cuteAlert({
  60         type: 'question',
  61         title: 'Upload Succeeded',
  62         message: 'Reboot to take effect',
  63         confirmText: 'Reboot',
  64         cancelText: 'Close'
  65       }).then((e) => {
  66         if (e === 'confirm') {
  67           const xhr = new XMLHttpRequest();
  68           xhr.open('POST', '/reboot');
  69           xhr.setRequestHeader('Content-Type', 'application/json');
  70           xhr.onreadystatechange = function() {};
  71           xhr.send();
  72         }
  73       });
  74     }
  75   };
  76   return false;
  77 }
  78
  79 function updateHardwareSettings(data) {
  80   for (const [key, value] of Object.entries(data)) {
  81     if (_(key)) {
  82       if (_(key).type === 'checkbox') {
  83         _(key).checked = value;
  84       } else {
  85         if (Array.isArray(value)) _(key).value = value.toString();
  86         else _(key).value = value;
  87       }
  88     }
  89   }
  90   if (data.customised) _('custom_config').style.display = 'block';
  91 }
  92
  93 function fileDragHover(e) {
  94   e.stopPropagation();
  95   e.preventDefault();
  96   if (e.target === _('filedrag')) e.target.className = (e.type === 'dragover' ? 'hover' : '');
  97 }
  98
  99 function fileSelectHandler(e) {
 100   fileDragHover(e);
 101   const files = e.target.files || e.dataTransfer.files;
 102   for (const f of files) {
 103     parseFile(f);
 104   }
 105 }
 106
 107 function parseFile(file) {
 108   const reader = new FileReader();
 109   reader.onload = function(e) {
 110     const data = JSON.parse(e.target.result);
 111     updateHardwareSettings(data);
 112   };
 113   reader.readAsText(file);
 114 }
 115
 116 function initFiledrag() {
 117   const fileselect = _('fileselect');
 118   const filedrag = _('filedrag');
 119
 120   fileselect.addEventListener('change', fileSelectHandler, false);
 121
 122   const xhr = new XMLHttpRequest();
 123   if (xhr.upload) {
 124     filedrag.addEventListener('dragover', fileDragHover, false);
 125     filedrag.addEventListener('dragleave', fileDragHover, false);
 126     filedrag.addEventListener('drop', fileSelectHandler, false);
 127     filedrag.style.display = 'block';
 128   }
 129 }
 130
 131 @@include("libs.js")