Added backend!

src/pages/basicDashboard/Overview.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+  import { shallowRef, onMounted } from 'vue';
+  import axios from 'axios';
+
   import internetIcon from '@/assets/overviewSvgs/Internet.svg'
   import wifiIcon from '@/assets/overviewSvgs/Wifi.svg'
   import devicesIcon from '@/assets/overviewSvgs/Devices.svg'
@@ -26,56 +29,88 @@
     statusMessage: string;
   }
 
-  const overviewItems: overviewItemsType[] = [
-    { 
-      name: "Internet", 
-      link: "/basic/internet", 
-      icon: internetIcon, 
-      statusColor: statusColors.goodStatus, 
-      statusMessage: "Online: LAN4",
-    },
-    {
-      name: "Wifi",
-      link: "/basic/wireless",
-      icon: wifiIcon,
-      statusColor: statusColors.warningStatus,
-      statusMessage: "5Ghz: On | 2.4Ghz: Off",
-    }, 
-    {
-      name: "Devices",
-      link: "/basic/devices",
-      icon: devicesIcon,
-      statusColor: null,
-      statusMessage: "Online: 0",
-    }, 
-    {
-      name: "File Sharing",
-      link: "/basic/fileshare",
-      icon: fileSharingIcon,
-      statusColor: statusColors.badStatus,
-      statusMessage: "Offline",
-    },
-    {
-      name: "QoS",
-      link: "/basic/qos",
-      icon: qosIcon,
-      statusColor: statusColors.goodStatus,
-      statusMessage: "Online",
-    },
-    {
-      name: "Guest Network",
-      link: "/basic/guestnetwork",
-      icon: guestNetworkIcon,
-      statusColor: statusColors.badStatus,
-      statusMessage: "Offline",
+  const backendOnline = shallowRef<boolean>(true);
+
+  const overviewItems = shallowRef<overviewItemsType[]>([]);
+
+  const internetMode = shallowRef<string | null>(null);
+  const wifiMode5Ghz = shallowRef<string | null>(null);
+  const wifiMode2Ghz = shallowRef<number | null>(null);
+  const devices = shallowRef<string | null>(null);
+  const fileShare = shallowRef<string | null>(null);
+  const qos = shallowRef<string | null>(null);
+  const guestNetwork = shallowRef<string | null>(null);
+
+  const fetchOverviewItems = async () => {
+    try {
+      const response = await axios.get('http://localhost:8080/overviewItems');
+
+      internetMode.value = response.data.internetMode;
+      wifiMode5Ghz.value = response.data.wifiMode5Ghz;
+      wifiMode2Ghz.value = response.data.wifiMode2Ghz;
+      devices.value = response.data.devices;
+      fileShare.value = response.data.fileShare;
+      qos.value = response.data.qos;
+      guestNetwork.value = response.data.guestNetwork
+
+      overviewItems.value = [
+      {
+        name: "Internet", 
+        link: "/basic/internet",
+        icon: internetIcon,
+        statusColor: statusColors.goodStatus,
+        statusMessage: `Online: ${internetMode.value}`,
+      },
+      {
+        name: "Wifi",
+        link: "/basic/wireless",
+        icon: wifiIcon,
+        statusColor: statusColors.warningStatus,
+        statusMessage: `5Ghz: ${wifiMode5Ghz.value} | 2.4Ghz: ${wifiMode2Ghz.value}`,
+      },
+      {
+        name: "Devices",
+        link: "/basic/devices",
+        icon: devicesIcon,
+        statusColor: null,
+        statusMessage: `Online: ${devices.value}`,
+      },
+      {
+        name: "File Sharing",
+        link: "/basic/fileshare",
+        icon: fileSharingIcon,
+        statusColor: statusColors.badStatus,
+        statusMessage: `${fileShare.value}`,
+      },
+      {
+        name: "QoS",
+        link: "/basic/qos",
+        icon: qosIcon,
+        statusColor: statusColors.goodStatus,
+        statusMessage: `${qos.value}`,
+      },
+      {
+        name: "Guest Network",
+        link: "/basic/guestnetwork",
+        icon: guestNetworkIcon,
+        statusColor: statusColors.badStatus,
+        statusMessage: `${guestNetwork}`,
+      }
+    ];
+    } catch (error) {
+      return backendOnline.value = false;
     }
-  ]
+  };
+
+  onMounted(() => {
+    fetchOverviewItems();
+  })
 </script>
 
 <template>
   <div id="overviewComponent">
     <h2 class="title">Overview</h2>
-    <ul>
+    <ul v-if="backendOnline">
       <RouterLink :to="overviewItem.link" v-for="overviewItem in overviewItems">
         <li>
           <component :is="overviewItem.icon"/>
@@ -84,6 +119,7 @@
         </li>
       </RouterLink>
     </ul>
+    <p class="error" v-else>Backend offline or not available, please try again later.</p>
   </div>
 </template>
 

src/styles/basicDashboard.css

@@ -1,3 +1,10 @@
+.error {
+  margin-top: 30px;
+  width: 100%;
+  text-align: center;
+  font-size: 2rem;
+}
+
 #basicDashboard {
   display: flex;
   margin-top: 20px;