From 644dd6394e0ada54ce7781ff6270dd2082167724 Mon Sep 17 00:00:00 2001
From: Mikail Killi <mikailkilli@gmail.com>
Date: Sun, 13 Oct 2024 22:39:54 +0200
Subject: [PATCH] added calculation for battery level with mock data and
 adjusted the types

---
 web/src/components/ListViewElement.vue |  4 +-
 web/src/components/TableCategory.vue   | 70 ++++++++++++++++++--------
 web/src/types.ts                       |  8 ++-
 3 files changed, 57 insertions(+), 25 deletions(-)

diff --git a/web/src/components/ListViewElement.vue b/web/src/components/ListViewElement.vue
index 1c22749..6a54757 100644
--- a/web/src/components/ListViewElement.vue
+++ b/web/src/components/ListViewElement.vue
@@ -27,11 +27,11 @@
               </div>
               <div class="d-flex align-items-center mb-2">
                 <span class="mr-2">Battery:</span>
-                <span>{{ node.battery }}%</span>
+                <span>{{ node.batteryCurrent }}%</span>
               </div>
               <div class="d-flex align-items-center mb-2">
                 <span class="mr-2">Runtime:</span>
-                <span>{{ node.runtime }} hours</span>
+                <span>{{ node.uptime }} hours</span>
               </div>
           </v-expansion-panel-text>
         </v-expansion-panel>
diff --git a/web/src/components/TableCategory.vue b/web/src/components/TableCategory.vue
index 09df7de..4361b65 100644
--- a/web/src/components/TableCategory.vue
+++ b/web/src/components/TableCategory.vue
@@ -5,8 +5,8 @@
         <tr>
           <th>Node/Name</th>
           <th>Status</th>
-          <th>Latitude</th> <!-- Separate column for Latitude -->
-          <th>Longitude</th> <!-- Separate column for Longitude -->
+          <th>Latitude</th>
+          <th>Longitude</th>
           <th>Battery</th>
           <th>Gemessene - Temperatur</th>
           <th>Laufzeit</th>
@@ -22,7 +22,7 @@
           </td>
           <td>{{ node.position.lat }}</td>
           <td>{{ node.position.lng }}</td>
-          <td>{{ node.battery }}%</td>
+          <td>{{ calculateBatteryPercentage(node.batteryVoltage, node.minVoltage, node.maxVoltage) }}%</td>
           <td>{{ node.temperature }}°C</td>
           <td>{{ node.runtime }}</td>
         </tr>
@@ -32,6 +32,9 @@
 </template>
 
 <script>
+
+//folgende Mockdaten rausnehmen und mit axios requests abfragen
+
 export default {
   data() {
     return {
@@ -40,7 +43,9 @@ export default {
           name: "XXXX-XXXX-XXXX-XXXX",
           status: "ONLINE",
           position: { lat: 40.7128, lng: 74.0012 },
-          battery: 98,
+          batteryVoltage: 3.9, 
+          minVoltage: 3.0,    
+          maxVoltage: 4.2,     
           temperature: 100,
           runtime: "12h 30m 12s",
         },
@@ -48,7 +53,9 @@ export default {
           name: "XXXX-XXXX-XXXX-XXXX",
           status: "OFFLINE",
           position: { lat: 40.7128, lng: 74.0012 },
-          battery: 19,
+          batteryVoltage: 3.2,
+          minVoltage: 3.0,
+          maxVoltage: 4.2,
           temperature: 100,
           runtime: "30m",
         },
@@ -56,7 +63,9 @@ export default {
           name: "Localnode-3",
           status: "ONLINE",
           position: { lat: 40.7128, lng: 74.0012 },
-          battery: 66,
+          batteryVoltage: 3.7,
+          minVoltage: 3.0,
+          maxVoltage: 4.2,
           temperature: 100,
           runtime: "12h 30m 12s",
         },
@@ -64,7 +73,9 @@ export default {
           name: "XXXX-XXXX-XXXX-XXXX",
           status: "ONLINE",
           position: { lat: 40.7128, lng: 74.0012 },
-          battery: 79,
+          batteryVoltage: 3.8,
+          minVoltage: 3.0,
+          maxVoltage: 4.2,
           temperature: 100,
           runtime: "12h 30m 12s",
         },
@@ -72,7 +83,9 @@ export default {
           name: "XXXX-XXXX-XXXX-XXXX",
           status: "ONLINE",
           position: { lat: 40.7128, lng: 74.0012 },
-          battery: 10,
+          batteryVoltage: 3.1,
+          minVoltage: 3.0,
+          maxVoltage: 4.2,
           temperature: 100,
           runtime: "12h 30m 12s",
         },
@@ -80,7 +93,9 @@ export default {
           name: "XXXX-XXXX-XXXX-XXXX",
           status: "OFFLINE",
           position: { lat: 40.7128, lng: 74.0012 },
-          battery: 0,
+          batteryVoltage: 3.0,
+          minVoltage: 3.0,
+          maxVoltage: 4.2,
           temperature: 100,
           runtime: "12h 30m 12s",
         },
@@ -88,36 +103,49 @@ export default {
           name: "XXXX-XXXX-XXXX-XXXX",
           status: "ONLINE",
           position: { lat: 40.7128, lng: 74.0012 },
-          battery: 56,
+          batteryVoltage: 3.6,
+          minVoltage: 3.0,
+          maxVoltage: 4.2,
           temperature: 100,
           runtime: "12h 30m 12s",
         },
       ],
     };
   },
+  methods: {
+    calculateBatteryPercentage(currentVoltage, minVoltage, maxVoltage) {
+      if (currentVoltage <= minVoltage) {
+        return 0;
+      } else if (currentVoltage >= maxVoltage) {
+        return 100;
+      } else {
+        return ((currentVoltage - minVoltage) / (maxVoltage - minVoltage) * 100).toFixed(2);
+      }
+    }
+  }
 };
 </script>
 
 <style scoped>
 .table-container {
   background-color: white;
-  padding: 0.5rem 1rem; /* Reduce top padding to 0.5rem */
-  margin: 0 auto; /* Remove margin at the top, keep it centered horizontally */
-  width: 100%; /* Full width of parent */
-  overflow-x: auto; /* Allow horizontal scroll if necessary */
+  padding: 0.5rem 1rem;
+  margin: 0 auto;
+  width: 100%;
+  overflow-x: auto;
 }
 
 .responsive-table {
-  width: 100%; /* Full width */
-  border-collapse: collapse; /* Ensure tight borders */
-  margin: 0; /* Remove margin at the top of the table */
-  table-layout: auto; /* Auto layout for slimmer columns */
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0;
+  table-layout: auto;
 }
 
 .responsive-table th,
 .responsive-table td {
-  padding: 0.5rem; /* Maintain slim padding */
-  text-align: center; /* Center text */
+  padding: 0.5rem;
+  text-align: center;
   border-bottom: 1px solid #ddd;
 }
 
@@ -126,7 +154,7 @@ export default {
 }
 
 .responsive-table tr:nth-child(even) {
-  background-color: #f9f9f9; /* Striped rows */
+  background-color: #f9f9f9;
 }
 
 .status-online {
diff --git a/web/src/types.ts b/web/src/types.ts
index 5d8c61e..ab104e5 100644
--- a/web/src/types.ts
+++ b/web/src/types.ts
@@ -5,8 +5,12 @@ export interface Node {
   coordla: number;
   coordlong: number;
   temperature: number;
-  battery: number;
-  runtime: number;
+  batteryMinimum: number;
+  batteryCurrent: number;
+  batteryMaximum: number;
+  voltage: number;
+  uptime: number;
+  group: string;
 }
 
 export interface NodeGroup {