From abdc45a799890e45c6d4d1ef549ee3577b4a9e4a Mon Sep 17 00:00:00 2001
From: Mikail Killi <mikailkilli@gmail.com>
Date: Mon, 14 Oct 2024 17:23:30 +0200
Subject: [PATCH] Updated web interface with axios requests, additonal
 functions and styling

---
 web/src/components/HeaderBar.vue       |  36 +----
 web/src/components/ListViewElement.vue |  36 +++--
 web/src/components/TableCategory.vue   | 177 ++++++++++++++-----------
 web/src/types.ts                       |  25 ++--
 4 files changed, 138 insertions(+), 136 deletions(-)

diff --git a/web/src/components/HeaderBar.vue b/web/src/components/HeaderBar.vue
index 263f498..1dc7858 100644
--- a/web/src/components/HeaderBar.vue
+++ b/web/src/components/HeaderBar.vue
@@ -3,29 +3,9 @@
     <v-toolbar color="main" dark prominent>
       <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />
       <v-spacer></v-spacer>
-      <!-- Users, Groups, Licenses -->
-      <div>
-        <!-- USER MANAGEMENT -->
-        <template v-if="!user" />
-        <UsersDialog v-else-if="user.admin" />
-        <UsersEditActions v-else :admin-menu="false" :user="user!" />
-      </div>
-      <!-- Search -->
-      <v-text-field
-        class="compact-form mr-2"
-        label="Search"
-        variant="solo"
-        density="compact"
-        prepend-inner-icon="mdi-magnify"
-        hide-details
-        single-line
-        clearable
-        v-model="search"
-        rounded="pill"
-      ></v-text-field>
 
       <!-- Logout -->
-      <v-btn icon variant="outlined" @click="handlelogout">
+      <v-btn @click="handlelogout">
         <LogOut />
       </v-btn>
     </v-toolbar>
@@ -39,20 +19,6 @@
 import { store } from "@/store";
 import { ref } from "vue";
 import { LogOut } from "lucide-vue-next";
-import { useQuery } from "@tanstack/vue-query";
-import UsersDialog from "./NavBarIcons/UsersDialog.vue";
-import UsersEditActions from "./NavBarIcons/UsersEditActions.vue";
-import { axiosInstance } from "@/client";
-import { User } from "@/types";
-import { search } from "@/store";
-
-const { data: user } = useQuery({
-  queryKey: ["user"],
-  queryFn: async () => {
-    const res = await axiosInstance.get<User>("/users/me");
-    return res.data;
-  },
-});
 
 function handlelogout() {
   store.setToken(null);
diff --git a/web/src/components/ListViewElement.vue b/web/src/components/ListViewElement.vue
index 1c22749..91d163d 100644
--- a/web/src/components/ListViewElement.vue
+++ b/web/src/components/ListViewElement.vue
@@ -5,11 +5,11 @@
         <v-expansion-panel>
           <v-expansion-panel-title>
             <div class="d-flex justify-content-between align-items-center">
-              <div class="mr-3" v-if="node.status === 200">
-                Name: {{ node.name }} (Status: online)
+              <div class="mr-3" v-if="sensorData?.voltage">
+                Name: {{ node.id }} (Status: online)
               </div>
               <div class="mr-3" v-else>
-                Name: {{ node.name }} (Status: offline)
+                Name: {{ node.id }} (Status: offline)
               </div>
             </div>
           </v-expansion-panel-title>
@@ -19,19 +19,19 @@
               <div class="d-flex align-items-center mb-2">
                 <span class="mr-2">Coordinates:</span>
                 <span>La: {{ node.coordla }}, Long: {{ node.coordlong }}</span>
-                </div>
               </div>
               <div class="d-flex align-items-center mb-2">
                 <span class="mr-2">Temperature:</span>
-                <span>{{ node.temperature }}°C</span>
+                <span>{{ sensorData?.temperature }}°C</span>
               </div>
               <div class="d-flex align-items-center mb-2">
-                <span class="mr-2">Battery:</span>
-                <span>{{ node.battery }}%</span>
+                <span class="mr-2">Battery Voltage:</span>
+                <span>{{ sensorData?.voltage || 'N/A' }}V</span>
               </div>
               <div class="d-flex align-items-center mb-2">
                 <span class="mr-2">Runtime:</span>
-                <span>{{ node.runtime }} hours</span>
+                <span>{{ sensorData?.uptime }} hours</span>
+              </div>
               </div>
           </v-expansion-panel-text>
         </v-expansion-panel>
@@ -41,19 +41,33 @@
 </template>
 
 <script setup lang="ts">
-import { Node } from "@/types"; 
-import { ComputedRef, inject, ref, watch } from "vue";
+import { Node, SensorData } from "@/types"; 
+import { ComputedRef, inject, ref, watch, onMounted } from "vue";
 import { key } from "@/store";
+import axios from "axios";
 
 const props = defineProps<{ node: Node }>();
 const visible = ref(true);
+const sensorData = ref<SensorData | null>(null);
+
 const { searching, visibleIds } = inject(key) as {
   searching: ComputedRef<boolean>;
   visibleIds: ComputedRef<string[]>;
 };
 
 watch([searching, visibleIds], ([searching, visibleIds]) => {
-  visible.value = searching ? visibleIds.includes(props.node.uuid) : true;
+  visible.value = searching ? visibleIds.includes(props.node.id) : true;
+});
+
+onMounted(async () => {
+  try {
+    const { data } = await axios.get<SensorData>(
+      `http://localhost:8080/api/v1/data?nodeId=${props.node.id}`
+    );
+    sensorData.value = data;
+  } catch (error) {
+    console.error("Error fetching sensor data:", error);
+  }
 });
 
 </script>
diff --git a/web/src/components/TableCategory.vue b/web/src/components/TableCategory.vue
index 09df7de..d596d6c 100644
--- a/web/src/components/TableCategory.vue
+++ b/web/src/components/TableCategory.vue
@@ -5,26 +5,32 @@
         <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>
+          <th>Temperature</th>
+          <th>Runtime</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="(node, index) in tableData" :key="index">
           <td>{{ node.name }}</td>
           <td>
-            <span :class="node.status === 'ONLINE' ? 'status-online' : 'status-offline'">
-              {{ node.status }}
+            <span :class="node.sensorData.voltage ? 'status-online' : 'status-offline'">
+              {{ node.sensorData.voltage ? 'ONLINE' : 'OFFLINE' }}
             </span>
           </td>
-          <td>{{ node.position.lat }}</td>
-          <td>{{ node.position.lng }}</td>
-          <td>{{ node.battery }}%</td>
-          <td>{{ node.temperature }}°C</td>
-          <td>{{ node.runtime }}</td>
+          <td
+            contenteditable="true"
+            @blur="validateAndUpdateLatLng(node, 'coordla', $event)"
+          >{{ node.coordla }}</td>
+          <td
+            contenteditable="true"
+            @blur="validateAndUpdateLatLng(node, 'coordlong', $event)"
+          >{{ node.coordlong }}</td>
+          <td>{{ calculateBatteryPercentage(node.sensorData.voltage, node.batteryMinimum, node.batteryMaximum) }}%</td>
+          <td>{{ node.sensorData.temperature }}°C</td>
+          <td>{{ formatRuntime(node.sensorData.uptime) }}</td>
         </tr>
       </tbody>
     </table>
@@ -32,92 +38,103 @@
 </template>
 
 <script>
+import axios from 'axios';
+
 export default {
   data() {
     return {
-      tableData: [
-        {
-          name: "XXXX-XXXX-XXXX-XXXX",
-          status: "ONLINE",
-          position: { lat: 40.7128, lng: 74.0012 },
-          battery: 98,
-          temperature: 100,
-          runtime: "12h 30m 12s",
-        },
-        {
-          name: "XXXX-XXXX-XXXX-XXXX",
-          status: "OFFLINE",
-          position: { lat: 40.7128, lng: 74.0012 },
-          battery: 19,
-          temperature: 100,
-          runtime: "30m",
-        },
-        {
-          name: "Localnode-3",
-          status: "ONLINE",
-          position: { lat: 40.7128, lng: 74.0012 },
-          battery: 66,
-          temperature: 100,
-          runtime: "12h 30m 12s",
-        },
-        {
-          name: "XXXX-XXXX-XXXX-XXXX",
-          status: "ONLINE",
-          position: { lat: 40.7128, lng: 74.0012 },
-          battery: 79,
-          temperature: 100,
-          runtime: "12h 30m 12s",
-        },
-        {
-          name: "XXXX-XXXX-XXXX-XXXX",
-          status: "ONLINE",
-          position: { lat: 40.7128, lng: 74.0012 },
-          battery: 10,
-          temperature: 100,
-          runtime: "12h 30m 12s",
-        },
-        {
-          name: "XXXX-XXXX-XXXX-XXXX",
-          status: "OFFLINE",
-          position: { lat: 40.7128, lng: 74.0012 },
-          battery: 0,
-          temperature: 100,
-          runtime: "12h 30m 12s",
-        },
-        {
-          name: "XXXX-XXXX-XXXX-XXXX",
-          status: "ONLINE",
-          position: { lat: 40.7128, lng: 74.0012 },
-          battery: 56,
-          temperature: 100,
-          runtime: "12h 30m 12s",
-        },
-      ],
+      tableData: [],
     };
   },
+  mounted() {
+    this.fetchNodesAndData();
+  },
+  methods: {
+    async fetchNodesAndData() {
+      try {
+        const nodesResponse = await axios.get('http://localhost:8080/api/v1/nodes');
+        const nodes = nodesResponse.data;
+
+        const sensorDataResponse = await axios.get('http://localhost:8080/api/v1/data');
+        const sensorData = sensorDataResponse.data;
+
+        this.tableData = nodes.map((node) => {
+          const nodeSensorData = sensorData.find((data) => data.id === node.id);
+          return {
+            ...node,
+            sensorData: nodeSensorData || {
+              temperature: 'N/A',
+              voltage: 'N/A',
+              uptime: 'N/A',
+            },
+          };
+        });
+      } catch (error) {
+        console.error('Error fetching node or sensor data:', error);
+      }
+    },
+    calculateBatteryPercentage(voltage, batteryMinimum, batteryMaximum) {
+      if (voltage <= batteryMinimum) {
+        return 0;
+      } else if (voltage >= batteryMaximum) {
+        return 100;
+      } else {
+        return ((voltage - batteryMinimum) / (batteryMaximum - batteryMinimum) * 100).toFixed(2);
+      }
+    },
+    formatRuntime(uptime) {
+      const hours = Math.floor(uptime / 3600);
+      const minutes = Math.floor((uptime % 3600) / 60);
+      const seconds = uptime % 60;
+      return `${hours}h ${minutes}m ${seconds}s`;
+    },
+    validateAndUpdateLatLng(node, field, event) {
+      const originalValue = node[field];
+      let newValue = event.target.innerText;
+
+      // Normalize separated values
+      newValue = newValue.replace(',', '.');
+
+      // Check if it's a valid float value
+      const validNumberRegex = /^-?\d+(\.\d+)?$/;
+
+      if (validNumberRegex.test(newValue)) {
+        const parsedValue = parseFloat(newValue);
+
+        // Update if valid
+        node[field] = parsedValue;
+        console.log(`Updated ${field} of ${node.name}: ${parsedValue}`);
+      } else {
+        // Reset to original value if invalid
+        event.target.innerText = originalValue;
+        console.log(`Failed to set ${field} of ${node.name}: Invalid input "${newValue}"`);
+      }
+    },
+  },
 };
 </script>
 
 <style scoped>
+/* Styling remains the same */
 .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 +143,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..6f6063d 100644
--- a/web/src/types.ts
+++ b/web/src/types.ts
@@ -1,25 +1,30 @@
 export interface Node {
-  uuid: string;
-  name: string;
-  status: number;
+  id: string;
   coordla: number;
   coordlong: number;
-  temperature: number;
-  battery: number;
-  runtime: number;
+  batteryMinimum: number;
+  batteryMaximum: number;
+  group: string;
 }
 
 export interface NodeGroup {
-  groupId: string;
+  id: string;
   name: string;
-  nodes: Node[];
+}
+
+export interface SensorData {
+  id: string;
+  timestamp: number;
+  temperature: number;
+  voltage: number;
+  uptime: number;
 }
 
 export interface User {
-  uuid: string;
+  id: string;
   name: string;
   email: string;
-  admin: boolean;
+  hash: string;
 }
 
 export interface CreateUserDto {