dasdas

data/logic.js

@@ -7,7 +7,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
         fetch(apiUrl)
             .then(response => response.json())
             .then(data => {
-                document.getElementById('voltage').textContent = roundToTwo(data.voltage)+ ' V' || 'N/A';
+                document.getElementById('voltage').textContent = roundToTwo(data.bus_voltage)+ ' V' || 'N/A';
                 document.getElementById('current').textContent = roundToTwo(data.current)+ ' mA' || 'N/A';
             })
             .catch(error => {
@@ -19,6 +19,49 @@ window.addEventListener('DOMContentLoaded', (event) => {
     setInterval(fetchData, 5000); // fetch every 5 seconds
 });
 
+window.addEventListener('DOMContentLoaded', (event) => {
+    // URL of your API
+    const apiUrl = '/telemetry';
+
+    function fetchData() {
+        // Fetching data from the API
+        fetch(apiUrl)
+            .then(response => response.json())
+            .then(data => {
+                document.getElementById('uptime').textContent = roundToTwo(data.uptime_seconds)+ ' s' || 'N/A';
+                document.getElementById('heap').textContent = roundToTwo(data.heap_percent)+ ' %' || 'N/A';
+            })
+            .catch(error => {
+                console.error("There was an error fetching data from the API", error);
+            });
+    }
+
+    fetchData();  // fetch immediately on page load
+    setInterval(fetchData, 5000); // fetch every 5 seconds
+});
+
+window.addEventListener('DOMContentLoaded', (event) => {
+    // URL of your API
+    const apiUrl = '/water_data';
+
+    function fetchData() {
+        // Fetching data from the API
+        fetch(apiUrl)
+            .then(response => response.json())
+            .then(data => {
+                document.getElementById('level').textContent = roundToTwo(data.water_height)+ ' cm' || 'N/A';
+                document.getElementById('liters').textContent = roundToTwo(data.liters)+ ' l' || 'N/A';
+                document.getElementById('percentage').textContent = roundToTwo(data.percentage)+ ' %' || 'N/A';
+            })
+            .catch(error => {
+                console.error("There was an error fetching data from the API", error);
+            });
+    }
+
+    fetchData();  // fetch immediately on page load
+    setInterval(fetchData, 5000); // fetch every 5 seconds
+});
+
 window.addEventListener('DOMContentLoaded', (event) => {
     const apiUrl = '/network_info';
 

data/settings.html

@@ -20,39 +20,39 @@
       </div>
     </nav>
 
-
-    <fieldset id="form-settings">
-      <legend>Settings</legend>
-      <p>
-        <label for="input__text">Sensor max height (e.g. 4m)</label>
-        <input id="input__text" type="number" placeholder="Text Input">
-      </p>
-      <p>
-        <label for="input__password">Water max height</label>
-        <input id="input__password" type="number">
-      </p>
-      <p>
-        <label for="input__webaddress">Water min height</label>
-        <input id="input__webaddress" type="number">
-      </p>
-      <p>
-        <label for="input__emailaddress">Email Address</label>
-        <input id="input__emailaddress" type="number">
-      </p>
-
-      <p>
-        <button class="button primary" style="width: 100%;">Submit</button>
-      </p>
-    </fieldset>
+    <form action="/update_sensor_settings" method="post">
+      <fieldset id="form-settings">
+        <legend>Settings</legend>
+        <p>
+          <label for="range">Sensor Range in cm</label>
+          <input id="range" name="range" type="number" placeholder="200">
+        </p>
+        <p>
+          <label for="level_max">Water max height in cm</label>
+          <input id="level_max" name="level_max" type="number">
+        </p>
+        <p>
+          <label for="level_min">Water min height in cm</label>
+          <input id="level_min" name="level_min" type="number">
+        </p>
+        <p>
+          <label for="liters">Volume in liters</label>
+          <input id="liters" name="liters" type="number">
+        </p>
+        <p>
+          <button class="button primary" style="width: 100%;">Submit</button>
+        </p>
+      </fieldset>
+    </form>
 
     <form action="/update_wifi_credentials" method="post">
       <fieldset id="form-settings">
         <legend>WiFi Settings</legend>
-        <p>
+        <!-- <p>
           <input type="checkbox" id="enable" name="enable" value="true">
           <label for="enable"> Enable WiFi</label><br>
-        </p>
-        
+        </p> -->
+
         <p>
           <label for="ssid">SSID</label>
           <input id="ssid" name="ssid" type="text">

data/status.html

@@ -42,6 +42,29 @@
             </tbody>
           </table>
         </div>
+        <!--Sensor card-->
+        <div class="card">
+          <header>
+            <h4>Water information</h4>
+          </header>
+          <table class="tg">
+            <thead></thead>
+            <tbody>
+              <tr>
+                <td>Waterlevel: </td>
+                <td id="level">WAITING</td>
+              </tr>
+              <tr>
+                <td>Water volumen: </td>
+                <td id="liters">WAITING</td>
+              </tr>
+              <tr>
+                <td>Percentage: </td>
+                <td id="percentage">WAITING</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
 
 
@@ -69,15 +92,11 @@
             <tbody>
               <tr>
                 <td>Uptime: </td>
-                <td>132d</td>
+                <td id="uptime">XXX</td>
               </tr>
               <tr>
-                <td>FW version: </td>
-                <td>0.2</td>
-              </tr>
-              <tr>
-                <td>Time/Date: </td>
-                <td>1.1.202022</td>
+                <td>Heap usage: </td>
+                <td id="heap">XXX</td>
               </tr>
             </tbody>
           </table>