Added backend!

package-lock.json

@@ -8,6 +8,7 @@
       "name": "router-ui-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.7.7",
         "axios": "^1.7.7",
         "path": "^0.12.7",
         "vue": "^3.4.37",
@@ -854,6 +855,21 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -886,6 +902,17 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -994,6 +1021,14 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -1104,9 +1139,9 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.9",
+      "version": "1.15.8",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.8.tgz",
-      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "integrity": "sha512-xgrmBhBToVKay1q2Tao5LI26B83UhrB/vM1avwVSDzt8rx3rO6AizBAaF46EgksTVr+rFTQaqZZ9MVBfUe4nig==",
       "funding": [
         {
           "type": "individual",
@@ -1196,6 +1231,25 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -1306,6 +1360,11 @@
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/rollup": {
       "version": "4.21.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.0.tgz",

src/pages/basicDashboard/Overview.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { shallowRef, onMounted, onUnmounted } from 'vue';
+  import { shallowRef, onMounted } from 'vue';
   import axios from 'axios';
 
   import internetIcon from '@/assets/overviewSvgs/Internet.svg'
@@ -31,54 +31,71 @@
   }
 
   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[response.data.internetStatus],
+        statusColor: statusColors.goodStatus,
-        statusMessage: `${response.data.internetMode} ${response.data.internetPort}`,
+        statusMessage: `Online: ${internetMode.value}`,
       },
       {
         name: "Wifi",
         link: "/basic/wireless",
         icon: wifiIcon,
-        statusColor: statusColors[response.data.wifiModeStatus],
+        statusColor: statusColors.warningStatus,
-        statusMessage: `5Ghz: ${response.data.wifiMode5Ghz} | 2.4Ghz: ${response.data.wifiMode2Ghz}`,
+        statusMessage: `5Ghz: ${wifiMode5Ghz.value} | 2.4Ghz: ${wifiMode2Ghz.value}`,
       },
       {
         name: "Devices",
         link: "/basic/devices",
         icon: devicesIcon,
         statusColor: null,
-        statusMessage: `Online: ${response.data.devices}`,
+        statusMessage: `Online: ${devices.value}`,
-      },
-      {
-        name: "QoS",
-        link: "/basic/qos",
-        icon: qosIcon,
-        statusColor: statusColors[response.data.qosStatus],
-        statusMessage: `${response.data.qosMode}`,
       },
       {
         name: "File Sharing",
         link: "/basic/fileshare",
         icon: fileSharingIcon,
-        statusColor: statusColors[response.data.fileShareStatus],
+        statusColor: statusColors.badStatus,
-        statusMessage: `${response.data.fileShareMode}`,
+        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[response.data.guestNetworkStatus],
+        statusColor: statusColors.badStatus,
-        statusMessage: `${response.data.guestNetworkMode}`,
+        statusMessage: `${guestNetwork}`,
       }
     ];
     } catch (error) {
@@ -86,24 +103,15 @@
     }
   };
 
-  let pollInterval: number;
-
   onMounted(() => {
     fetchOverviewItems();
-
-    pollInterval = window.setInterval(() => {
-      fetchOverviewItems();
-    }, 30000);
-  });
-
-  onUnmounted(() => {
-    clearInterval(pollInterval);
   })
 </script>
 
 <template>
   <div id="overviewComponent">
     <h2 class="title">Overview</h2>
+    <ul v-if="backendOnline">
     <ul v-if="backendOnline">
       <RouterLink :to="overviewItem.link" v-for="overviewItem in overviewItems">
         <li>
@@ -114,6 +122,7 @@
       </RouterLink>
     </ul>
     <p class="error" v-else>Backend offline or not available, please try again later.</p>
+    <p class="error" v-else>Backend offline or not available, please try again later.</p>
   </div>
 </template>
 

src/styles/basicDashboard.css

@@ -1,7 +1,7 @@
 .error {
-  margin-top: 30px;
-  width: 100%;
   text-align: center;
+  width: 100%;
+  margin-top: 30px;
   font-size: 2rem;
 }