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);
-    { 
+
-      name: "Internet", 
+  const overviewItems = shallowRef<overviewItemsType[]>([]);
-      link: "/basic/internet", 
+
-      icon: internetIcon, 
+  const internetMode = shallowRef<string | null>(null);
-      statusColor: statusColors.goodStatus, 
+  const wifiMode5Ghz = shallowRef<string | null>(null);
-      statusMessage: "Online: LAN4",
+  const wifiMode2Ghz = shallowRef<number | null>(null);
-    },
+  const devices = shallowRef<string | null>(null);
-    {
+  const fileShare = shallowRef<string | null>(null);
-      name: "Wifi",
+  const qos = shallowRef<string | null>(null);
-      link: "/basic/wireless",
+  const guestNetwork = shallowRef<string | null>(null);
-      icon: wifiIcon,
+
-      statusColor: statusColors.warningStatus,
+  const fetchOverviewItems = async () => {
-      statusMessage: "5Ghz: On | 2.4Ghz: Off",
+    try {
-    }, 
+      const response = await axios.get('http://localhost:8080/overviewItems');
-    {
+
-      name: "Devices",
+      internetMode.value = response.data.internetMode;
-      link: "/basic/devices",
+      wifiMode5Ghz.value = response.data.wifiMode5Ghz;
-      icon: devicesIcon,
+      wifiMode2Ghz.value = response.data.wifiMode2Ghz;
-      statusColor: null,
+      devices.value = response.data.devices;
-      statusMessage: "Online: 0",
+      fileShare.value = response.data.fileShare;
-    }, 
+      qos.value = response.data.qos;
-    {
+      guestNetwork.value = response.data.guestNetwork
-      name: "File Sharing",
+
-      link: "/basic/fileshare",
+      overviewItems.value = [
-      icon: fileSharingIcon,
+      {
-      statusColor: statusColors.badStatus,
+        name: "Internet", 
-      statusMessage: "Offline",
+        link: "/basic/internet",
-    },
+        icon: internetIcon,
-    {
+        statusColor: statusColors.goodStatus,
-      name: "QoS",
+        statusMessage: `Online: ${internetMode.value}`,
-      link: "/basic/qos",
+      },
-      icon: qosIcon,
+      {
-      statusColor: statusColors.goodStatus,
+        name: "Wifi",
-      statusMessage: "Online",
+        link: "/basic/wireless",
-    },
+        icon: wifiIcon,
-    {
+        statusColor: statusColors.warningStatus,
-      name: "Guest Network",
+        statusMessage: `5Ghz: ${wifiMode5Ghz.value} | 2.4Ghz: ${wifiMode2Ghz.value}`,
-      link: "/basic/guestnetwork",
+      },
-      icon: guestNetworkIcon,
+      {
-      statusColor: statusColors.badStatus,
+        name: "Devices",
-      statusMessage: "Offline",
+        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;