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[] = [
+  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: LAN4",
+        statusMessage: `Online: ${internetMode.value}`,
       },
       {
         name: "Wifi",
         link: "/basic/wireless",
         icon: wifiIcon,
         statusColor: statusColors.warningStatus,
-      statusMessage: "5Ghz: On | 2.4Ghz: Off",
+        statusMessage: `5Ghz: ${wifiMode5Ghz.value} | 2.4Ghz: ${wifiMode2Ghz.value}`,
       },
       {
         name: "Devices",
         link: "/basic/devices",
         icon: devicesIcon,
         statusColor: null,
-      statusMessage: "Online: 0",
+        statusMessage: `Online: ${devices.value}`,
       },
       {
         name: "File Sharing",
         link: "/basic/fileshare",
         icon: fileSharingIcon,
         statusColor: statusColors.badStatus,
-      statusMessage: "Offline",
+        statusMessage: `${fileShare.value}`,
       },
       {
         name: "QoS",
         link: "/basic/qos",
         icon: qosIcon,
         statusColor: statusColors.goodStatus,
-      statusMessage: "Online",
+        statusMessage: `${qos.value}`,
       },
       {
         name: "Guest Network",
         link: "/basic/guestnetwork",
         icon: guestNetworkIcon,
         statusColor: statusColors.badStatus,
-      statusMessage: "Offline",
+        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;