change terminal reload to fetch API, use promises, DOMContentLoaded etc.

data/index.html

@@ -20,7 +20,7 @@
   <div class="param_block">
     Active Brightness: <output id="out_act_pwm" class="val_range">50</output> %
     <div class="slider">
-      <input type="range" class="regler" id="range_act_pwm" min="0" max="100" value="50">
+      <input type="range" class="regler" id="range_act_pwm" data-output="out_act_pwm" min="0" max="100" value="50">
     </div>
   </div>
 
@@ -28,7 +28,7 @@
     Idle Brightness Maximum: <output id="out_idl_pwm" class="val_range">50</output> %
     <label id="note">[100% == Active Brightness]</label>
     <div class="slider">
-      <input type="range" class="regler" id="range_idl_pwm" min="0" max="100" value="50">
+      <input type="range" class="regler" id="range_idl_pwm" data-output="out_idl_pwm" min="0" max="100" value="50">
     </div>
     <label id="note">idle brightness gets controlled via LDR measurments</label>
   </div>
@@ -37,21 +37,21 @@
     Time per stair [ms]: <output id="out_tim_sta" class="val_range">300</output> ms
 
     <div class="slider">
-      <input type="range" class="regler" id="range_tim_sta" min="0" max="5000" value="300">
+      <input type="range" class="regler" id="range_tim_sta" data-output="out_tim_sta" min="0" max="5000" value="300">
     </div>
   </div>
 
   <div class="param_block">
     Time LDR [ms]: <output id="out_tim_ldr" class="val_range">500</output> ms
     <div class="slider">
-      <input type="range" class="regler" id="range_tim_ldr" min="0" max="5000" value="500">
+      <input type="range" class="regler" id="range_tim_ldr" data-output="out_tim_ldr" min="0" max="5000" value="500">
     </div>
   </div>
 
   <div class="param_block">
     LDR Schwelle [%]: <output id="out_ldr_shw" class="val_range">50</output> %
     <div class="slider">
-      <input type="range" class="regler" id="range_ldr_shw" min="0" max="100" value="50">
+      <input type="range" class="regler" id="range_ldr_shw" data-output="out_ldr_shw" min="0" max="100" value="50">
     </div>
   </div>
 

data/input.js

@@ -4,10 +4,10 @@ let xhrUpd = new XMLHttpRequest();
 xhrUpd.onreadystatechange = function () {
   if (xhrUpd.readyState == 4) {
     if (xhrUpd.status == 200) {
-      console.log(xhrUpd.responseText);
+      console.log("xhrUpd: ", xhrUpd.responseText);
     }
     else {
-      console.log("status:", xhrUpd.status);
+      console.log("xhrUpd: status=", xhrUpd.status);
     }
   }
 }
@@ -30,64 +30,59 @@ function reloadRangeValues() {
 
 };
 
-// connect actions to range inputs
-function rangeToOutput(range, output) {
-  document.getElementById(range).oninput = function () {
-    document.getElementById(output).innerHTML = this.value;
-    // add to pending range changes
-    rangeValues[this.id] = this.value;
-  }
-}
-
-rangeToOutput("range_act_pwm", "out_act_pwm");
-rangeToOutput("range_idl_pwm", "out_idl_pwm");
-rangeToOutput("range_tim_sta", "out_tim_sta");
-rangeToOutput("range_tim_ldr", "out_tim_ldr");
-rangeToOutput("range_ldr_shw", "out_ldr_shw");
-
-let xhr = new XMLHttpRequest();
-
-xhr.onreadystatechange = function () {
-  if (xhr.readyState == 4) {
-    if (xhr.status == 200) {
-      console.log(xhr.responseText);
-      terminal = document.getElementById("term");
-      autoscroll = document.getElementById("scroll");
-      terminal.innerHTML += xhr.responseText;
-      if (autoscroll.checked)
-        terminal.scrollTop = terminal.scrollHeight;
-    }
-    else {
-      console.log("status:", xhr.status);
-    }
-  }
-}
 function reloadTerminal() {
-  xhr.open("POST", "/terminal", true);
+  const terminal = document.querySelector("#term");
-  xhr.send();
+  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) => {
+  // use data- attributes for action
-  button.onclick = () => {
+  document.querySelectorAll('.control').forEach((button) => {
-    fetch(`/action`, {
+    button.onclick = () => {
-      method: 'POST',
+      fetch(`/action`, {
-      headers: {
+        method: 'POST',
-        'Content-Type': 'application/x-www-form-urlencoded',
+        headers: {
-      },
+          'Content-Type': 'application/x-www-form-urlencoded',
-      body: `control=${button.dataset.action}`
+        },
-    })
+        body: `control=${button.dataset.action}`
-      .then(response => console.log(response))
+      })
-      .catch(error => console.log('Error:', error));
+        .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 = '';
+  };
+
 });
 
 
-document.querySelector('#clear_term').onclick = () => {
-  document.querySelector("#term").innerHTML = '';
-};