Added QoS, Added file RouterConfig.vue, optimized stuff

src/components/dashboard/DeviceList.vue

@@ -32,7 +32,10 @@
         <p>MAC Address</p>
       </div>
       <div class="seperator"></div>
-      <form v-if="section.devices" v-for="device in section.devices">
+      <form 
+        v-if="section.devices" 
+        v-for="device in section.devices"
+      >
         <div id="device">
           <p>{{ device.name }}</p>
           <p>{{ device.ip }}</p>

src/components/dashboard/Template.vue

@@ -15,6 +15,7 @@
       option: string,
       label?: string,
       dropdown?: string[],
+      buttons?: string[],
       subOptions?: {
         name?: string,
         class: string,
@@ -48,12 +49,15 @@
             :key="form.name"
           >
           <template v-else/>
-          <select 
+          <select v-if="form.dropdown">
-            v-if="form.dropdown"
-          >
             <option v-for="option in form.dropdown">{{ option }}</option>
           </select>
           <template v-else/>
+          <button 
+            v-if="form.buttons" 
+            v-for="button in form.buttons"
+          >{{ button }}</button>
+          <template v-else/>
           <label
             :class="subform.class"
             v-if="form.subOptions" 

src/data/QoS.ts

@@ -0,0 +1,25 @@
+const qos = [{
+  id: "qosGeneral",
+  forms: [
+    {
+      name: "qosEnable",
+      class: "selectOption",
+      option: "checkbox",
+      label: "Enable QoS",
+    },
+    {
+      name: "optimizeDatabase",
+      class: "selectOption",
+      option: "checkbox",
+      label: "Automically update performance optizimiation database"
+    },
+    {
+      name: "optimizeDatabase",
+      class: "buttonOption",
+      option: "hidden",
+      buttons: ["Update Now"]
+    }
+  ]
+}]
+
+export default qos;

src/pages/BasicDashboard.vue

@@ -14,7 +14,8 @@
     { name: "Device List", link: "/basic/devices" },
     { name: "QoS", link: "/basic/qos" },
     { name: "File Sharing", link: "/basic/fileshare" },
-    { name: "Guest Network", link: "/basic/guestnetwork" }
+    { name: "Guest Network", link: "/basic/guestnetwork" },
+    { name: "Router Configuration", link: "/basic/routerconfig" },
   ];
 
 </script>

src/pages/basicDashboard/DeviceList.vue

@@ -5,18 +5,7 @@
   const pageTitle="Device List"
   const pageID="deviceList"
 
-  interface Sections {
+  const sections = shallowRef([] as typeof deviceListData);
-    title: string,
-    id: string,
-    devices?: {
-      connection: string,
-      name?: string,
-      ip: string,
-      mac: string,
-    }[]
-  }
-
-  const sections = shallowRef<Sections[]>([]);
 
   sections.value = deviceListData;
 </script>

src/pages/basicDashboard/InternetSetup.vue

@@ -5,26 +5,7 @@
   const pageTitle="Internet Setup"
   const pageID="internetSetupComponent"
 
-  interface Sections {
+  const sections = shallowRef([] as typeof internetSetup);
-    title?: string,
-    id: string,
-    selectedRadio?: number,
-    forms?: {
-      name?: string,
-      class: string,
-      option: string,
-      label?: string,
-      dropdown?: string[],
-      subOptions?: {
-        name?: string,
-        class: string,
-        option: string,
-        label?: string,
-      }[]
-    }[]
-  }
-
-  const sections = shallowRef<Sections[]>([]);
 
   sections.value = internetSetup;
 </script>

src/pages/basicDashboard/Overview.vue

@@ -35,7 +35,7 @@
 
   const fetchOverviewItems = async () => {
     try {
-      const response = await axios.get('http://localhost:8080/overviewItems');
+      const response = await axios.get('http://192.168.122.1:8080/overviewItems');
 
       overviewItems.value = [
       {

src/pages/basicDashboard/QoS.vue

@@ -1,7 +1,17 @@
+<script lang="ts" setup>
+  import { shallowRef } from 'vue'
+  import BasicDashboard from '@/components/dashboard/Template.vue';
+  import qos from '@/data/QoS.ts';
+  const pageTitle="QoS Settings"
+  const pageID="qosComponent"
+
+  const sections = shallowRef([] as typeof qos);
+
+  sections.value = qos;
+</script>
+
 <template>
-  <div>
+  <BasicDashboard :pageTitle="pageTitle" :pageID="pageID" :sections="sections"/>
-    <h2 class="title">QoS</h2>
-  </div>
 </template>
 
 <style src="@/styles/basicDashboard.css" scoped></style>

src/pages/basicDashboard/RouterConfig.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <h2 class="title">Router Configuration</h2>
+  </div>
+</template>
+
+<style src="@/styles/basicDashboard.css" scoped></style>

src/pages/basicDashboard/Wireless.vue

@@ -5,26 +5,8 @@
   const pageTitle="Wireless Settings"
   const pageID="wirelessSettingsComponent"
 
-  interface Sections {
+  const sections = shallowRef([] as typeof wirelessSettings);
-    title?: string,
-    id: string,
-    selectedRadio?: number,
-    forms?: {
-      name?: string,
-      class: string,
-      option: string,
-      label?: string,
-      dropdown?: string[],
-      subOptions?: {
-        name?: string,
-        class: string,
-        option: string,
-        label?: string,
-      }[]
-    }[]
-  }
 
-  const sections = shallowRef<Sections[]>([]);
 
   sections.value = wirelessSettings;
 </script>

src/routes/router.ts

@@ -1,16 +1,17 @@
 import { createRouter, createWebHistory } from "vue-router";
-import AdvanceDashboard from '../pages/AdvancedDashboard.vue';
+import AdvanceDashboard from '@/pages/AdvancedDashboard.vue';
-import BasicDashboard from "../pages/BasicDashboard.vue";
+import BasicDashboard from "@/pages/BasicDashboard.vue";
-import LoginPage from "../pages/LoginPage.vue";
+import LoginPage from "@/pages/LoginPage.vue";
-import RegisterPage from "../pages/RegisterPage.vue";
+import RegisterPage from "@/pages/RegisterPage.vue";
 
-import BasicOverview from "../pages/basicDashboard/Overview.vue"
+import BasicOverview from "@/pages/basicDashboard/Overview.vue"
-import BasicInternetSetup from "../pages/basicDashboard/InternetSetup.vue"
+import BasicInternetSetup from "@/pages/basicDashboard/InternetSetup.vue"
-import BasicWireless from "../pages/basicDashboard/Wireless.vue"
+import BasicWireless from "@/pages/basicDashboard/Wireless.vue"
-import BasicDevicesList from "../pages/basicDashboard/DeviceList.vue"
+import BasicDevicesList from "@/pages/basicDashboard/DeviceList.vue"
-import BasicQoS from "../pages/basicDashboard/QoS.vue"
+import BasicQoS from "@/pages/basicDashboard/QoS.vue"
-import BasicFileShare from "../pages/basicDashboard/FileShare.vue"
+import BasicFileShare from "@/pages/basicDashboard/FileShare.vue"
-import BasicGuestNetwork from "../pages/basicDashboard/GuestNetwork.vue"
+import BasicGuestNetwork from "@/pages/basicDashboard/GuestNetwork.vue"
+import RouterConfig from "@/pages/basicDashboard/RouterConfig.vue";
 
 const routes = [
   {
@@ -48,10 +49,15 @@ const routes = [
       {
         path: 'fileshare',
         component: BasicFileShare,
-      }, {
+      }, 
+      {
         path: 'guestnetwork',
         component: BasicGuestNetwork,
-      }
+      },
+      {
+        path: 'routerconfig',
+        component: RouterConfig,
+      },
     ]
   },
   {

src/styles/basicDashboard.css

@@ -109,7 +109,7 @@
   }
 }
 
-#internetSetupComponent, #wirelessSettingsComponent {
+#internetSetupComponent, #wirelessSettingsComponent, #qosComponent {
   display: flex;
   flex-direction: column;
   gap: 20px;
@@ -129,6 +129,23 @@
     flex-direction: column;
     gap: 10px;
   }
+  label {
+    background-color: transparent;
+  }
+  button {
+    color: inherit;
+    background-color: var(--dark-bg-alt-2-color);
+    border: none;
+    height: 50px;
+    min-width: 110px;
+    border-radius: 5px;
+    transition: 0.3s background-color;
+    cursor: pointer;
+    font-size: 1rem;
+  }
+  button:hover {
+    background-color: var(--dark-highlight-color);
+  }
 
   .seperator {
     margin-top: 20px;
@@ -179,6 +196,9 @@
       color: #fff;
     }
   }
+  .buttonOption {
+    width: fit-content
+  }
   .subSelect {
     display: flex;
     flex-direction: column-reverse;