From b00b595411cdbe94f8da9fb8776016e8b5f00674 Mon Sep 17 00:00:00 2001
From: Keyemail <hatsunepatrick@gmail.com>
Date: Fri, 23 Aug 2024 19:49:25 -0700
Subject: [PATCH] Finished Basic Dashboard components into router

---
 src/pages/BasicDashboard.vue               | 53 ++++++++++++----------
 src/pages/basicDashboard/DeviceList.vue    |  5 ++
 src/pages/basicDashboard/FileShare.vue     |  5 ++
 src/pages/basicDashboard/GuestNetwork.vue  |  5 ++
 src/pages/basicDashboard/InternetSetup.vue |  5 ++
 src/pages/basicDashboard/Overview.vue      |  5 ++
 src/pages/basicDashboard/QoS.vue           |  5 ++
 src/pages/basicDashboard/Wireless.vue      |  5 ++
 src/routes/router.ts                       | 47 +++++++++++++++++--
 src/styles/basicDashboard.css              | 18 ++++++--
 10 files changed, 120 insertions(+), 33 deletions(-)

diff --git a/src/pages/BasicDashboard.vue b/src/pages/BasicDashboard.vue
index e56980b..b56945a 100644
--- a/src/pages/BasicDashboard.vue
+++ b/src/pages/BasicDashboard.vue
@@ -10,31 +10,34 @@
 
 <template>
   <Navbar/>
-  <div id="leftNavbar">
-    <h2>Basic Dashboard</h2>
-    <ul>
-      <RouterLink to="basic">
-        <li>Overview</li>
-      </RouterLink>
-      <RouterLink to="basic/internet">
-        <li>Internet Setup</li>
-      </RouterLink>
-      <RouterLink to="basic/wireless">
-        <li>Wireless Settings</li>
-      </RouterLink>
-      <RouterLink to="basic/devices">
-        <li>Device List</li>
-      </RouterLink>
-      <RouterLink to="basic/QoS">
-        <li>QoS</li>
-      </RouterLink>
-      <RouterLink to="basic/fileshare">
-        <li>File Sharing</li>
-      </RouterLink>
-      <RouterLink to="basic/guestnetwork">
-        <li>Guest Network</li>
-      </RouterLink>
-    </ul>
+  <div id="basicDashboard">
+    <div id="leftNavbar">
+      <h2>Basic Dashboard</h2>
+      <ul>
+        <RouterLink to="/basic">
+          <li>Overview</li>
+        </RouterLink>
+        <RouterLink to="/basic/internet">
+          <li>Internet Setup</li>
+        </RouterLink>
+        <RouterLink to="/basic/wireless">
+          <li>Wireless Settings</li>
+        </RouterLink>
+        <RouterLink to="/basic/devices">
+          <li>Device List</li>
+        </RouterLink>
+        <RouterLink to="/basic/QoS">
+          <li>QoS</li>
+        </RouterLink>
+        <RouterLink to="/basic/fileshare">
+          <li>File Sharing</li>
+        </RouterLink>
+        <RouterLink to="/basic/guestnetwork">
+          <li>Guest Network</li>
+        </RouterLink>
+      </ul>
+    </div>
+    <RouterView id="basicDashboardComponents"/>
   </div>
 </template>
 
diff --git a/src/pages/basicDashboard/DeviceList.vue b/src/pages/basicDashboard/DeviceList.vue
index e69de29..d610f1a 100644
--- a/src/pages/basicDashboard/DeviceList.vue
+++ b/src/pages/basicDashboard/DeviceList.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Device List</h1>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/pages/basicDashboard/FileShare.vue b/src/pages/basicDashboard/FileShare.vue
index e69de29..6c118cd 100644
--- a/src/pages/basicDashboard/FileShare.vue
+++ b/src/pages/basicDashboard/FileShare.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>File Share</h1>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/pages/basicDashboard/GuestNetwork.vue b/src/pages/basicDashboard/GuestNetwork.vue
index e69de29..ddd40a5 100644
--- a/src/pages/basicDashboard/GuestNetwork.vue
+++ b/src/pages/basicDashboard/GuestNetwork.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Guest Network</h1>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/pages/basicDashboard/InternetSetup.vue b/src/pages/basicDashboard/InternetSetup.vue
index e69de29..f3e0c78 100644
--- a/src/pages/basicDashboard/InternetSetup.vue
+++ b/src/pages/basicDashboard/InternetSetup.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Internet Setup</h1>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/pages/basicDashboard/Overview.vue b/src/pages/basicDashboard/Overview.vue
index e69de29..9e01ed1 100644
--- a/src/pages/basicDashboard/Overview.vue
+++ b/src/pages/basicDashboard/Overview.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Overview</h1>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/pages/basicDashboard/QoS.vue b/src/pages/basicDashboard/QoS.vue
index e69de29..d43c4ea 100644
--- a/src/pages/basicDashboard/QoS.vue
+++ b/src/pages/basicDashboard/QoS.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>QoS</h1>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/pages/basicDashboard/Wireless.vue b/src/pages/basicDashboard/Wireless.vue
index e69de29..993ebcf 100644
--- a/src/pages/basicDashboard/Wireless.vue
+++ b/src/pages/basicDashboard/Wireless.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Wireless Settings</h1>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/routes/router.ts b/src/routes/router.ts
index 66b96ad..a6b2a35 100644
--- a/src/routes/router.ts
+++ b/src/routes/router.ts
@@ -4,26 +4,63 @@ import BasicDashboard from "../pages/BasicDashboard.vue";
 import LoginPage from "../pages/LoginPage.vue";
 import RegisterPage from "../pages/RegisterPage.vue";
 
+import BasicOverview from "../pages/basicDashboard/Overview.vue"
+import BasicInternetSetup from "../pages/basicDashboard/InternetSetup.vue"
+import BasicWireless from "../pages/basicDashboard/Wireless.vue"
+import BasicDevicesList from "../pages/basicDashboard/DeviceList.vue"
+import BasicQoS from "../pages/basicDashboard/QoS.vue"
+import BasicFileShare from "../pages/basicDashboard/FileShare.vue"
+import BasicGuestNetwork from "../pages/basicDashboard/GuestNetwork.vue"
+
 const routes = [
   {
     path: '/',
-    component: BasicDashboard
+    component: BasicDashboard,
   },
   {
     path: '/advance',
-    component: AdvanceDashboard
+    component: AdvanceDashboard,
   },
   {
     path: '/basic',
-    component: BasicDashboard
+    component: BasicDashboard,
+    children: [
+      {
+        path: '',
+        component: BasicOverview,
+      },
+      {
+        path: 'internet',
+        component: BasicInternetSetup,
+      },
+      {
+        path: 'wireless',
+        component: BasicWireless,
+      },
+      {
+        path: 'devices',
+        component: BasicDevicesList,
+      },
+      {
+        path: 'QoS',
+        component: BasicQoS,
+      },
+      {
+        path: 'fileshare',
+        component: BasicFileShare,
+      }, {
+        path: 'guestnetwork',
+        component: BasicGuestNetwork,
+      }
+    ]
   },
   {
     path: '/login',
-    component: LoginPage
+    component: LoginPage,
   },
   {
     path: '/register',
-    component: RegisterPage
+    component: RegisterPage,
   },
 ];
 
diff --git a/src/styles/basicDashboard.css b/src/styles/basicDashboard.css
index f3397f8..7e78367 100644
--- a/src/styles/basicDashboard.css
+++ b/src/styles/basicDashboard.css
@@ -1,12 +1,17 @@
+#basicDashboard {
+  display: flex;
+  margin-top: 20px;
+  gap: 15px;
+  flex-grow: 1;
+}
+
 #leftNavbar {
   display: flex;
   flex-direction: column;
   gap: 15px;
-  margin-top: 20px;
   background-color: var(--dark-bg-alt-color);
   width: 250px;
-  height: 100%;
-  flex-grow: 1;
+  min-height: 100%;
   padding: var(--alt-padding);
   border-radius: var(--border-radius);
 
@@ -32,4 +37,11 @@
   li:hover {
     background-color: var(--dark-highlight-color);
   }
+}
+
+#basicDashboardComponents {
+  flex-grow: 1;
+  padding: var(--alt-padding);
+  border-radius: var(--border-radius);
+  background-color: var(--dark-bg-alt-color);
 }
\ No newline at end of file