Added Checkboxes; Wireless Component; Seperators, Minor fixes

src/components/ActionFooter.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+  import { watch, shallowRef } from 'vue';
+ 
+  const {excludedPages} = defineProps<{
+    excludedPages?: string[]
+  }>();
+
+  const route = useRoute();
+  let showActionFooter = shallowRef(true);
+
+  const checkExluded = (path: string) => {
+    if(excludedPages){
+      for(let i = 0; i < excludedPages.length; i++) {
+        if(excludedPages[i] === path) {
+          showActionFooter.value = false;
+          break;
+        } else {
+          showActionFooter.value = true;
+        }
+      }
+    }
+  }
+
+  checkExluded(route.path);
+
+  watch(() => route.path, (newPath) => {
+    checkExluded(newPath);
+  });
+</script>
+
+<template>
+  <footer id="footer" v-if="showActionFooter">
+    <h2>Save Changes?</h2>
+    <div>
+      <button class="apply">Apply</button>
+      <button>Cancel</button>
+    </div>
+  </footer>
+</template>

src/pages/BasicDashboard.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
   import Navbar from '@/components/Navbar.vue';
+  import ActionFooter from '@/components/ActionFooter.vue'
 
   interface NavbarItem {
     name: string;
@@ -31,6 +32,7 @@
     </div>
     <div id="basicComponents">
       <RouterView/>
+      <ActionFooter :excludedPages="['/basic']"/>
     </div>
   </div>
 </template>

src/pages/basicDashboard/InternetSetup.vue

@@ -3,61 +3,65 @@
     <h2 class="title">Internet Setup</h2>
     <section id="internetSetupLogin">
       <h3>Does your internet connection require a login?</h3>
-      <!-- There will be no input (keyboard) for the time being because that requires backend to handle. -->
+      <!-- Backend required to finish -->
       <form>
-        <label>
+        <label class="selectOption">
           <input type="radio" name="internetLoginOption" value="1">
           Yes
         </label>
-        <label>
+        <label class="selectOption">
           <input type="radio" name="internetLoginOption" value="2">
           No
         </label>
       </form>
     </section>
+    <div class="seperator"></div>
     <section id="internetSetupIP">
       <h3>Internet IP Address</h3>
       <form>
-        <label>
+        <label class="selectOption">
           <input type="radio" name="internetIPOption" value="1">
           Dynamic IP from ISP
         </label>
-        <label>
+        <label class="selectOption">
           <input type="radio" name="internetIPOption" value="2">
           Static IP from ISP
         </label>
       </form>
     </section>
+    <div class="seperator"></div>
     <section>
       <h3>DNS (Domain Name Server) Address</h3>
       <form>
-        <label>
+        <label class="selectOption">
           <input type="radio" name="internetDNSOption" value="1">
           Automatic DNS from ISP
         </label>
-        <label>
+        <label class="selectOption">
           <input type="radio" name="internetDNSOption" value="2">
           Select DNS Servers
         </label>
       </form>
     </section>
+    <div class="seperator"></div>
     <section>
       <h3>Router MAC Address</h3>
       <form>
-        <label>
+        <label class="selectOption">
           <input type="radio" name="internetMACOption" value="1">
           Default Address
         </label>
-        <label>
+        <label class="selectOption">
           <input type="radio" name="internetMACOption" value="2">
           Computer MAC Address
         </label>
-        <label>
+        <label class="selectOption">
           <input type="radio" name="internetMACOption" value="2">
           Specific MAC Adress
         </label>
       </form>
     </section>
+    <div class="seperator"></div>
   </div>
 </template>
 

src/pages/basicDashboard/Wireless.vue

@@ -1,6 +1,169 @@
 <template>
-  <div>
+  <div id="wirelessSettingsComponent">
     <h2 class="title">Wireless Settings</h2>
+    <!-- Backend required to finish -->
+    <section>
+      <h3>General Setup</h3>
+      <form>
+        <label class="selectOption">
+          <input type="checkbox"/>
+          Enable AX (OFDMA Feature)
+        </label>
+        <label class="selectOption">
+          <input type="checkbox"/>
+          Enable OFDMA (2.4Ghz)
+        </label>
+        <label class="selectOption">
+          <input type="checkbox"/>
+          Enable OFDMA (5Ghz)
+        </label>
+        <label class="selectOption">
+          <input type="checkbox"/>
+          Enable automatic 2.4Ghz & 5Ghz switching
+        </label>
+      </form>
+    </section>
+    <div class="seperator"></div>
+    <section>
+      <h3>Wireless 2.4GHz</h3>
+      <form>
+        <label class="selectOption">
+          <input type="checkbox">
+          Enable SSID Broadcast
+        </label>
+        <label class="selectOption">
+          <input type="checkbox">
+          Enable 20/40 MHz Coexistence
+        </label>
+        <label class="inputName">
+          <input type="text" name="wirelessName" value="SomeRandomNetwork"/>
+          Name (SSID)
+        </label>
+        <label class="dropdownBox">
+          <select>
+            <option valie="Auto">Auto</option>
+            <option value="01">01</option>
+            <option value="02">02</option>
+            <option value="03">03</option>
+            <option value="04">04</option>
+            <option value="05">05</option>
+            <option value="06">06</option>
+            <option value="07">07</option>
+            <option value="08">08</option>
+            <option value="09">09</option>
+            <option value="10">10</option>
+            <option value="11">11</option>
+          </select>
+          Channel
+        </label>
+        <label class="dropdownBox">
+          <select>
+            <option value="54">54 Mbps</option>
+            <option value="289">289 Mbps</option>
+            <option value="600">600 Mbps</option>
+          </select>
+          Mode
+        </label>
+        <label class="subSelect">
+          <label class="selectOption">
+            <input type="radio" name="securityOption" value="1">
+            None
+          </label>
+          <label class="selectOption">
+            <input type="radio" name="securityOption" value="2">
+            WPA2-personal [AES]
+          </label>
+          <label class="selectOption">
+            <input type="radio" name="securityOption" value="3">
+            WPA-Personal [TKIP] + WPA2-Personal [AES]
+          </label>
+          <label class="selectOption">
+            <input type="radio" name="securityOption" value="4">
+            WPA3-Personal [SAE]
+          </label>
+          <label class="selectOption">
+            <input type="radio" name="securityOption" value="5">
+            WPA2-personal [AES] + WPA3-Personal
+          </label>
+          Security Options
+        </label>
+        <label class="inputName">
+          <input type="password" name="wirelessName" value="SomeRandomPassword"/>
+          Password (Network)
+        </label>
+      </form>
+    </section>
+    <div class="seperator"></div>
+    <section>
+      <h3>Wireless 5GHz</h3>
+      <form>
+        <label class="selectOption">
+          <input type="checkbox">
+          Enable SSID Broadcast
+        </label>
+        <label class="selectOption">
+          <input type="checkbox">
+          Enable 20/40 MHz Coexistence
+        </label>
+        <label class="inputName">
+          <input type="text" name="wirelessName" value="SomeRandomNetwork"/>
+          Name (SSID)
+        </label>
+        <label class="dropdownBox">
+          <select>
+            <option valie="Auto">Auto</option>
+            <option value="01">01</option>
+            <option value="02">02</option>
+            <option value="03">03</option>
+            <option value="04">04</option>
+            <option value="05">05</option>
+            <option value="06">06</option>
+            <option value="07">07</option>
+            <option value="08">08</option>
+            <option value="09">09</option>
+            <option value="10">10</option>
+            <option value="11">11</option>
+          </select>
+          Channel
+        </label>
+        <label class="dropdownBox">
+          <select>
+            <option value="54">54 Mbps</option>
+            <option value="289">289 Mbps</option>
+            <option value="600">600 Mbps</option>
+          </select>
+          Mode
+        </label>
+        <label class="subSelect">
+          <label class="selectOption">
+            <input type="radio" name="securityOption" value="1">
+            None
+          </label>
+          <label class="selectOption">
+            <input type="radio" name="securityOption" value="2">
+            WPA2-personal [AES]
+          </label>
+          <label class="selectOption">
+            <input type="radio" name="securityOption" value="3">
+            WPA-Personal [TKIP] + WPA2-Personal [AES]
+          </label>
+          <label class="selectOption">
+            <input type="radio" name="securityOption" value="4">
+            WPA3-Personal [SAE]
+          </label>
+          <label class="selectOption">
+            <input type="radio" name="securityOption" value="5">
+            WPA2-personal [AES] + WPA3-Personal
+          </label>
+          Security Options
+        </label>
+        <label class="inputName">
+          <input type="password" name="wirelessName" value="SomeRandomPassword"/>
+          Password (Network)
+        </label>
+      </form>
+    </section>
+    <div class="seperator"></div>
   </div>
 </template>
 

src/routes/router.ts

@@ -15,7 +15,7 @@ import BasicGuestNetwork from "../pages/basicDashboard/GuestNetwork.vue"
 const routes = [
   {
     path: '/',
-    component: BasicDashboard,
+    redirect: '/basic'
   },
   {
     path: '/advance',

src/styles/basicDashboard.css

@@ -109,45 +109,28 @@
   }
 }
 
-#internetSetupComponent {
+#internetSetupComponent, #wirelessSettingsComponent {
   display: flex;
   flex-direction: column;
   gap: 20px;
+  align-items: center;
+  max-width: 70%;
+  margin: auto;
 
   section {
     margin-bottom: 10px;
     display: flex;
     flex-direction: column;
     gap: 10px;
-    max-width: 400px;
-  }
-  input[type="radio"] {
-    appearance: none;
-    -webkit-appearance: none;
-
-    width: 1.15em;
-    height:1.15em;
-    border: 0.15em solid #fff;
-    border-radius: 10%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 10px;
-  }
-  input[type="radio"]::before {
-    content: "";
     width: 100%;
-    height: 100%;
-    border-radius: 10%;
-    transform: scale(0);
-    transition: 0.3s transform;
-    background-color: var(--dark-highlight-color);
   }
-  input[type="radio"]:checked::before {
+  form {
-    transform: scale(1);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
   }
-  label {
+
-    margin-top: 5px;
+  .selectOption {
     display: flex;
     align-items: center;
     background-color: var(--dark-bg-alt-2-color);
@@ -156,5 +139,46 @@
     border-radius: 5px;
     padding: 10px;
     font-size: 1.2rem;
+    user-select: none;
+    cursor: pointer;
+  }
+  .inputName {
+    display: flex;
+    flex-direction: column-reverse;
+    input {
+      margin-top: 5px;
+      display: flex;
+      align-items: center;
+      background-color: var(--dark-bg-alt-2-color);
+      min-height: 50px;
+      width: 100%;
+      border-radius: 5px;
+      padding: 10px;
+      font-size: 1.2rem;
+      border: none;
+      color: #fff;
+    }
+  }
+  .dropdownBox {
+    display: flex;
+    flex-direction: column-reverse;
+    select {
+      margin-top: 5px;
+      display: flex;
+      align-items: center;
+      background-color: var(--dark-bg-alt-2-color);
+      min-height: 50px;
+      width: 100%;
+      border-radius: 5px;
+      padding: 10px;
+      font-size: 1.2rem;
+      border: none;
+      color: #fff;
+    }
+  }
+  .subSelect {
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 5px;
   }
 }

src/styles/main.css

@@ -83,6 +83,40 @@ a {
   }
 }
 
+#footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--dark-bg-alt-2-color);
+  width: 70%;
+  margin: 20px auto;
+  padding: 15px;
+  border-radius: 5px;
+
+  div {
+    display: flex;
+    gap: 10px;
+    float: right;
+  }
+  button {
+    color: inherit;
+    background-color: var(--dark-bg-alt-2-color);
+    border: none;
+    height: 40px;
+    width: 70px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1rem;
+    text-underline-offset: 2px;
+  }
+  button:hover {
+    text-decoration: underline;
+  }
+  .apply {
+    background-color: var(--dark-highlight-color);
+  }
+}
+
 .popup {
   position: relative;
   height: min-content;
@@ -120,4 +154,41 @@ a {
 
 .bad-indicator {
   background-color: var(--bad-indicator) !important;
+}
+
+.seperator {
+  background-color: #4c4c4c;
+  height: 2px;
+  width: 100%;
+}
+
+input[type="radio"], input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 15px;
+  height:15px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+}
+
+input[type="radio"]::before, input[type="checkbox"]::before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  transform: scale(0);
+  transition: 0.3s transform;
+  background-color: var(--dark-highlight-color);
+}
+
+input[type="radio"]:checked::before, input[type="checkbox"]:checked::before {
+  transform: scale(1);
+}
+
+input[type="checkbox"], input[type="checkbox"]::before {
+  border-radius: 10%;
 }