Fixed npm packages, optimized overview script

package-lock.json

@@ -8,6 +8,7 @@
       "name": "router-ui-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.7.7",
         "path": "^0.12.7",
         "vue": "^3.4.37",
         "vue-router": "^4.4.3"
@@ -16,7 +17,7 @@
         "@types/node": "^22.5.1",
         "@vitejs/plugin-vue": "^5.1.3",
         "typescript": "^5.5.3",
-        "vite": "^5.4.1",
+        "vite": "^5.4.3",
         "vite-svg-loader": "^5.1.0",
         "vue-tsc": "^2.0.29"
       }
@@ -838,6 +839,21 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.38.tgz",
       "integrity": "sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw=="
     },
+    "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",
@@ -859,6 +875,17 @@
         "balanced-match": "^1.0.0"
       }
     },
+    "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",
@@ -959,6 +986,14 @@
       "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
       "dev": true
     },
+    "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",
@@ -1068,6 +1103,38 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1110,6 +1177,25 @@
       "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
       "dev": true
     },
+    "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",
@@ -1181,9 +1267,9 @@
       "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
     },
     "node_modules/postcss": {
-      "version": "8.4.41",
+      "version": "8.4.45",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz",
-      "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
+      "integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==",
       "funding": [
         {
           "type": "opencollective",
@@ -1215,6 +1301,11 @@
         "node": ">= 0.6.0"
       }
     },
+    "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",
@@ -1331,14 +1422,14 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.1",
+      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.3.tgz",
-      "integrity": "sha512-1oE6yuNXssjrZdblI9AfBbHCC41nnyoVoEZxQnID6yvQZAFBzxxkqoFLtHUMkYunL8hwOLEjgTuxpkRxvba3kA==",
+      "integrity": "sha512-IH+nl64eq9lJjFqU+/yrRnrHPVTlgy42/+IzbOdaFDVlyLgI/wDlf+FCobXLX1cT0X5+7LMyH1mIy2xJdLfo8Q==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.21.3",
-        "postcss": "^8.4.41",
+        "postcss": "^8.4.43",
-        "rollup": "^4.13.0"
+        "rollup": "^4.20.0"
       },
       "bin": {
         "vite": "bin/vite.js"

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.7",
     "path": "^0.12.7",
     "vue": "^3.4.37",
     "vue-router": "^4.4.3"

src/pages/basicDashboard/Overview.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { shallowRef, onMounted } from 'vue';
+  import { shallowRef, onMounted, onUnmounted } from 'vue';
   import axios from 'axios';
 
   import internetIcon from '@/assets/overviewSvgs/Internet.svg'
@@ -30,71 +30,54 @@
   }
 
   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}`,
+        statusMessage: `Online: ${response.data.internetMode}`,
       },
       {
         name: "Wifi",
         link: "/basic/wireless",
         icon: wifiIcon,
         statusColor: statusColors.warningStatus,
-        statusMessage: `5Ghz: ${wifiMode5Ghz.value} | 2.4Ghz: ${wifiMode2Ghz.value}`,
+        statusMessage: `5Ghz: ${response.data.wifiMode5Ghz} | 2.4Ghz: ${response.data.wifiMode2Ghz}`,
       },
       {
         name: "Devices",
         link: "/basic/devices",
         icon: devicesIcon,
         statusColor: null,
-        statusMessage: `Online: ${devices.value}`,
+        statusMessage: `Online: ${response.data.devices}`,
       },
       {
         name: "File Sharing",
         link: "/basic/fileshare",
         icon: fileSharingIcon,
         statusColor: statusColors.badStatus,
-        statusMessage: `${fileShare.value}`,
+        statusMessage: `${response.data.fileShare}`,
       },
       {
         name: "QoS",
         link: "/basic/qos",
         icon: qosIcon,
         statusColor: statusColors.goodStatus,
-        statusMessage: `${qos.value}`,
+        statusMessage: `${response.data.qos}`,
       },
       {
         name: "Guest Network",
         link: "/basic/guestnetwork",
         icon: guestNetworkIcon,
         statusColor: statusColors.badStatus,
-        statusMessage: `${guestNetwork}`,
+        statusMessage: `${response.data.guestNetwork}`,
       }
     ];
     } catch (error) {
@@ -102,8 +85,18 @@
     }
   };
 
+  let pollInterval: number;
+
   onMounted(() => {
     fetchOverviewItems();
+
+    pollInterval = window.setInterval(() => {
+      fetchOverviewItems();
+    }, 30000);
+  });
+
+  onUnmounted(() => {
+    clearInterval(pollInterval);
   })
 </script>