From ca811a9abe2732a6a40b30778232093d508e1350 Mon Sep 17 00:00:00 2001
From: Ollo <Ollo@host>
Date: Sun, 28 Nov 2021 13:59:49 +0100
Subject: [PATCH] JSON is shown on website

---
 data/index.htm | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)
diff --git a/data/index.htm b/data/index.htm
index fa2a926..d10aade 100644
--- a/data/index.htm
+++ b/data/index.htm
@@ -6,8 +6,24 @@
     <script type="text/javascript">
       function onBodyLoad(){
         const xhttp = new XMLHttpRequest();
+        xhttp.responseType = 'json';
         xhttp.onload = function() {
-          document.getElementById("debug").innerHTML = this.responseText;
+          var jsonResponse = this.response;
+          document.getElementById("temp").innerHTML = jsonResponse.temp
+          document.getElementById("altitude").innerHTML = jsonResponse.altitude;
+          document.getElementById("pressure").innerHTML = jsonResponse.pressure;
+          document.getElementById("particle").innerHTML = jsonResponse.particle;
+          if (jsonResponse.gas) {
+            document.getElementById("gas").innerHTML = jsonResponse.gas;
+          } else {
+            document.getElementById("rowGas").hidden = true;
+          }
+          if (jsonResponse.humidity) {
+            document.getElementById("humidity").innerHTML = jsonResponse.humidity;
+          } else {
+            document.getElementById("rowHumidity").hidden = true;
+          }
+          console.log(this.responseText);
           }
         xhttp.open("GET", "/sensors", true);
         xhttp.send();
@@ -17,11 +33,14 @@
   <body id="body" onload="onBodyLoad()">
     <h1>Room Sensor</h1>
     <table>
-      <th>
+      <thead>
+       <tr>
         <td>Sensor</td>
         <td>Value</td>
         <td></td>
-      </th>
+       </tr>
+      </thead>
+      <tbody>
       <tr>
         <td>Temperatur</td>
         <td id="temp">temp</td>
@@ -52,7 +71,7 @@
         <td id="particle">particle</td>
         <td>micro gram per quibik</td>
       </tr>
+    </tbody>
     </table>
-    <p id="debug">Nothing</p>
   </body>
 </html>
