From 864b93ef82d49ad9b8ca375a963a15d9ef0b3dee Mon Sep 17 00:00:00 2001
From: Patrick Hatsune <hatsunepatrick@gmail.com>
Date: Sun, 29 Sep 2024 01:32:59 -0700
Subject: [PATCH] Made Basic Components into component, Wireless Settings more
 reactive

---
 .../basicDashboard/BasicComponents.vue        |  80 ++++++
 src/data/basicDashboard/InternetSetup.ts      | 134 ++++++++++
 src/data/basicDashboard/Wireless.ts           | 236 ++++++++++++++++++
 src/pages/basicDashboard/InternetSetup.vue    | 170 +------------
 src/pages/basicDashboard/Wireless.vue         | 198 +++------------
 5 files changed, 494 insertions(+), 324 deletions(-)
 create mode 100644 src/components/basicDashboard/BasicComponents.vue
 create mode 100644 src/data/basicDashboard/InternetSetup.ts
 create mode 100644 src/data/basicDashboard/Wireless.ts

diff --git a/src/components/basicDashboard/BasicComponents.vue b/src/components/basicDashboard/BasicComponents.vue
new file mode 100644
index 0000000..4a42a58
--- /dev/null
+++ b/src/components/basicDashboard/BasicComponents.vue
@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+  const {pageTitle} = defineProps<{
+    pageTitle: string,
+    pageID: string,
+    sections: Sections[],
+  }>();
+
+  interface Sections {
+    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,
+        selectedRadio?: number,
+      }[]
+    }[]
+  }
+</script>
+
+<template>
+  <div :id="pageID">
+    <h2 class="title">{{ pageTitle }}</h2>
+    <section 
+      v-for="section in sections" 
+      :id="section.id" 
+      :key="section.id"
+    >
+      <h3>{{ section.title }}</h3>
+      <form v-if="section.forms">
+        <label 
+          :class="form.class" 
+          v-for="(form, index) in section.forms"
+        >
+          <input
+            v-if="!(form.dropdown)"
+            :type="form.option"
+            :name="form.name"
+            :checked="section.selectedRadio === index" 
+            :key="form.name"
+          >
+          <template v-else/>
+          <select 
+            v-if="form.dropdown"
+          >
+            <option v-for="option in form.dropdown">{{ option }}</option>
+          </select>
+          <template v-else/>
+          <label
+            :class="subform.class"
+            v-if="form.subOptions" 
+            v-for="(subform, index) in form.subOptions"
+            :key="subform.name"
+          >
+            <input 
+              :type="subform.option"
+              :name="subform.name"
+              :checked="subform.selectedRadio === index"  
+            />
+            {{ subform.label }}
+          </label>
+          <template v-else/>
+          {{ form.label }}
+        </label>
+      </form>
+      <template v-else></template>
+      <div class="seperator"></div>
+    </section>
+  </div>
+</template>
+
+<style src="@/styles/basicDashboard.css" scoped></style>
\ No newline at end of file
diff --git a/src/data/basicDashboard/InternetSetup.ts b/src/data/basicDashboard/InternetSetup.ts
new file mode 100644
index 0000000..7c3814a
--- /dev/null
+++ b/src/data/basicDashboard/InternetSetup.ts
@@ -0,0 +1,134 @@
+const internetSetup = [
+  {
+    title: "Does your internet require a login?",
+    id: "internetSetupLogin",
+    selectedRadio: 0,
+    forms: [
+      {
+        name: "internetLoginOption",
+        class: "selectOption",
+        option: "radio",
+        label: "Yes",
+      },
+      {
+        name: "internetLoginOption",
+        class: "selectOption",
+        option: "radio",
+        label: "No",
+      },
+      {
+        name: "internetLoginInput",
+        class: "inputOption",
+        option: "text",
+        label: "Username/Email",
+      },
+      {
+        name: "internetLoginInput",
+        class: "inputOption",
+        option: "password",
+        label: "Password",
+      }
+    ]
+  },
+  {
+    title: "Internet IP Address",
+    id: "internetSetupIP",
+    selectedRadio: 0,
+    forms: [
+      {
+        name: "internetIPOption",
+        class: "selectOption",
+        option: "radio",
+        label: "Dynamic IP from ISP",
+      },
+      {
+        name: "internetIPOption",
+        class: "selectOption",
+        option: "radio",
+        label: "Static IP from ISP",
+      },
+      {
+        name: "internetIPInput",
+        class: "inputOption",
+        option: "text",
+        label: "IP Address"
+      },
+      {
+        name: "internetIPInput",
+        class: "inputOption",
+        option: "text",
+        label: "IP Subnet Mask"
+      },
+      {
+        name: "internetIPInput",
+        class: "inputOption",
+        option: "text",
+        label: "Gateway IP Address"
+      },
+    ]
+  },
+  {
+    title: "DNS (Domain Name Server) Address",
+    id: "internetSetupDNS",
+    selectedRadio: 0,
+    forms: [
+      {
+        name: "internetDNSOption",
+        class: "selectOption",
+        option: "radio",
+        label: "Automatic DNS from ISP",
+      },
+      {
+        name: "internetDNSOption",
+        class: "selectOption",
+        option: "radio",
+        label: "Select DNS Servers",
+      },
+      {
+        name: "internetDNSInput",
+        class: "inputOption",
+        option: "text",
+        label: "Primary DNS"
+      },
+      {
+        name: "internetDNSInput",
+        class: "inputOption",
+        option: "text",
+        label: "Secondary DNS"
+      },
+    ]
+  }, 
+  {
+    title: "Router MAC Address",
+    id: "internetSetupMAC",
+    selectedRadio: 0,
+    forms: [
+      {
+        name: "internetMACOption",
+        class: "selectOption",
+        option: "radio",
+        label: "Default Address",
+      },
+      {
+        name: "internetMACOption",
+        class: "selectOption",
+        option: "radio",
+        label: "Computer MAC Address",
+      },
+      {
+        name: "internetMACOption",
+        class: "selectOption",
+        option: "radio",
+        label: "Specific MAC Address",
+      },
+      {
+        name: "internetMACInput",
+        class: "inputOption",
+        option: "text",
+        label: "MAC Address",
+      },
+    ],
+  },
+];
+
+export default internetSetup;
\ No newline at end of file
diff --git a/src/data/basicDashboard/Wireless.ts b/src/data/basicDashboard/Wireless.ts
new file mode 100644
index 0000000..4d7944b
--- /dev/null
+++ b/src/data/basicDashboard/Wireless.ts
@@ -0,0 +1,236 @@
+const Wireless = [
+  {
+    title: "General Setup",
+    id: "wirelessGeneral",
+    selectedRadio: 0,
+    forms: [
+      {
+        name: "internetLoginOption",
+        class: "selectOption",
+        option: "checkbox",
+        label: "Enable AX (OFDMA Feature)",
+      },
+      {
+        name: "internetLoginOption",
+        class: "selectOption",
+        option: "checkbox",
+        label: "Enable OFDMA (2.4Ghz)",
+      },
+      {
+        name: "internetLoginOption",
+        class: "selectOption",
+        option: "checkbox",
+        label: "Enable OFDMA (5Ghz)",
+      },
+      {
+        name: "internetLoginOption",
+        class: "selectOption",
+        option: "checkbox",
+        label: "Enable automatic 2.4Ghz & 5Ghz switching",
+      },
+    ],
+  },
+  {
+    title: "Wireless 2.4GHz",
+    id: "wireless2",
+    selectedRadio: 0,
+    forms: [
+      {
+        name: "wireless2General",
+        class: "selectOption",
+        option: "checkbox",
+        label: "Enable SSID Broadcast",
+      },
+      {
+        name: "wireless2General",
+        class: "selectOption",
+        option: "checkbox",
+        label: "Enable 20/40 MHz Coexistence",
+      },
+      {
+        name: "wireless2SSID",
+        class: "inputOption",
+        option: "input",
+        label: "Name (SSID)",
+      },
+      {
+        name: "wireless2Channels",
+        class: "dropdownBox",
+        option: "checkbox",
+        label: "Channel",
+        dropdown: [
+          "Auto",
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+        ]
+      },
+      {
+        name: "wireless2Mode",
+        class: "dropdownBox",
+        option: "checkbox",
+        label: "Mode",
+        dropdown: [
+          "54 Mbps",
+          "389 Mbps",
+          "600 Mbps",
+        ]
+      },
+      {
+        name: "wireless2Security",
+        class: "subSelect",
+        option: "hidden",
+        label: "Security Options",
+        subOptions: [
+          {
+            name: "wireless2Security",
+            class: "selectOption",
+            option: "radio",
+            label: "WPA2-personal [AES] + WPA3-Personal"
+          },
+          {
+            name: "wireless2Security",
+            class: "selectOption",
+            option: "radio",
+            label: "WPA3-Personal [SAE]"
+          },
+          {
+            name: "wireless2Security",
+            class: "selectOption",
+            option: "radio",
+            label: "WPA-Personal [TKIP] + WPA2-Personal [AES]"
+          },
+          {
+            name: "wireless2Security",
+            class: "selectOption",
+            option: "radio",
+            label: "WPA2-personal [AES]"
+          },
+          {
+            name: "wireless2Security",
+            class: "selectOption",
+            option: "radio",
+            label: "None"
+          },
+        ]
+      },
+      {
+        name: "wireless2Password",
+        class: "inputOption",
+        option: "input",
+        label: "Password (Network Key)",
+      }
+    ],
+  },
+  {
+    title: "Wireless 5GHz",
+    id: "wireless5",
+    selectedRadio: 0,
+    forms: [
+      {
+        name: "wireless5General",
+        class: "selectOption",
+        option: "checkbox",
+        label: "Enable SSID Broadcast",
+      },
+      {
+        name: "wireless5General",
+        class: "selectOption",
+        option: "checkbox",
+        label: "Enable 20/40 MHz Coexistence",
+      },
+      {
+        name: "wireless5SSID",
+        class: "inputOption",
+        option: "input",
+        label: "Name (SSID)",
+      },
+      {
+        name: "wireless5Channels",
+        class: "dropdownBox",
+        option: "checkbox",
+        label: "Channel",
+        dropdown: [
+          "Auto",
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+        ]
+      },
+      {
+        name: "wireless5Mode",
+        class: "dropdownBox",
+        option: "checkbox",
+        label: "Mode",
+        dropdown: [
+          "450 Mbps",
+          "900 Mbps",
+          "1800 Mbps",
+          "3600 Mbps",
+        ]
+      },
+      {
+        name: "wireless5Security",
+        class: "subSelect",
+        option: "hidden",
+        label: "Security Options",
+        subOptions: [
+          {
+            name: "wireless5Security",
+            class: "selectOption",
+            option: "radio",
+            label: "WPA2-personal [AES] + WPA3-Personal"
+          },
+          {
+            name: "wireless5Security",
+            class: "selectOption",
+            option: "radio",
+            label: "WPA3-Personal [SAE]"
+          },
+          {
+            name: "wireless5Security",
+            class: "selectOption",
+            option: "radio",
+            label: "WPA-Personal [TKIP] + WPA2-Personal [AES]"
+          },
+          {
+            name: "wireless5Security",
+            class: "selectOption",
+            option: "radio",
+            label: "WPA2-personal [AES]"
+          },
+          {
+            name: "wireless5Security",
+            class: "selectOption",
+            option: "radio",
+            label: "None"
+          },
+        ]
+      },
+      {
+        name: "wireless5Password",
+        class: "inputOption",
+        option: "input",
+        label: "Password (Network Key)",
+      }
+    ],
+  },
+];
+
+export default Wireless;
\ No newline at end of file
diff --git a/src/pages/basicDashboard/InternetSetup.vue b/src/pages/basicDashboard/InternetSetup.vue
index 7c06fb0..9e9ca3d 100644
--- a/src/pages/basicDashboard/InternetSetup.vue
+++ b/src/pages/basicDashboard/InternetSetup.vue
@@ -1,6 +1,9 @@
 <script lang="ts" setup>
   import { shallowRef } from 'vue'
+  import BasicDashboard from '@/components/basicDashboard/BasicComponents.vue';
+  import internetSetup from '@/data/basicDashboard/InternetSetup.ts';
   const pageTitle="Internet Setup"
+  const pageID="internetSetupComponent"
 
   interface Sections {
     title?: string,
@@ -11,172 +14,23 @@
       class: string,
       option: string,
       label?: string,
+      dropdown?: string[],
+      subOptions?: {
+        name?: string,
+        class: string,
+        option: string,
+        label?: string,
+      }[]
     }[]
   }
 
   const sections = shallowRef<Sections[]>([]);
 
-  sections.value = [
-    {
-      title: "Does your internet require a login?",
-      id: "internetSetupLogin",
-      selectedRadio: 0,
-      forms: [
-        {
-          name: "internetLoginOption",
-          class: "selectOption",
-          option: "radio",
-          label: "Yes",
-        },
-        {
-          name: "internetLoginOption",
-          class: "selectOption",
-          option: "radio",
-          label: "No",
-        },
-        {
-          name: "internetLoginInput",
-          class: "inputOption",
-          option: "text",
-          label: "Username/Email",
-        },
-        {
-          name: "internetLoginInput",
-          class: "inputOption",
-          option: "password",
-          label: "Password",
-        }
-      ]
-    },
-    {
-      title: "Internet IP Address",
-      id: "internetSetupIP",
-      selectedRadio: 0,
-      forms: [
-        {
-          name: "internetIPOption",
-          class: "selectOption",
-          option: "radio",
-          label: "Dynamic IP from ISP",
-        },
-        {
-          name: "internetIPOption",
-          class: "selectOption",
-          option: "radio",
-          label: "Static IP from ISP",
-        },
-        {
-          name: "internetIPInput",
-          class: "inputOption",
-          option: "text",
-          label: "IP Address"
-        },
-        {
-          name: "internetIPInput",
-          class: "inputOption",
-          option: "text",
-          label: "IP Subnet Mask"
-        },
-        {
-          name: "internetIPInput",
-          class: "inputOption",
-          option: "text",
-          label: "Gateway IP Address"
-        },
-      ]
-    },
-    {
-      title: "DNS (Domain Name Server) Address",
-      id: "internetSetupDNS",
-      selectedRadio: 0,
-      forms: [
-        {
-          name: "internetDNSOption",
-          class: "selectOption",
-          option: "radio",
-          label: "Automatic DNS from ISP",
-        },
-        {
-          name: "internetDNSOption",
-          class: "selectOption",
-          option: "radio",
-          label: "Select DNS Servers",
-        },
-        {
-          name: "internetDNSInput",
-          class: "inputOption",
-          option: "text",
-          label: "Primary DNS"
-        },
-        {
-          name: "internetDNSInput",
-          class: "inputOption",
-          option: "text",
-          label: "Secondary DNS"
-        },
-      ]
-    }, {
-      title: "Router MAC Address",
-      id: "internetSetupMAC",
-      selectedRadio: 0,
-      forms: [
-        {
-          name: "internetMACOption",
-          class: "selectOption",
-          option: "radio",
-          label: "Default Address",
-        },
-        {
-          name: "internetMACOption",
-          class: "selectOption",
-          option: "radio",
-          label: "Computer MAC Address",
-        },
-        {
-          name: "internetMACOption",
-          class: "selectOption",
-          option: "radio",
-          label: "Specific MAC Address",
-        },
-        {
-          name: "internetMACInput",
-          class: "inputOption",
-          option: "text",
-          label: "MAC Address",
-        },
-      ]
-    }
-  ]
+  sections.value = internetSetup;
 </script>
 
 <template>
-  <div id="internetSetupComponent">
-    <h2 class="title">{{ pageTitle }}</h2>
-    <section 
-      v-for="section in sections" 
-      :id="section.id" 
-      :key="section.id"
-    >
-      <h3>{{ section.title }}</h3>
-      <form v-if="section.forms">
-        <label 
-          :class="form.class" 
-          v-for="(form, index) in section.forms"
-        >
-          <input
-            :type="form.option"
-            :name="form.name" 
-            :value="form.option === 'radio' ? index : ''" 
-            :checked="section.selectedRadio === index" 
-            :key="form.label"
-          >
-          {{ form.label }}
-        </label>
-      </form>
-      <template v-else></template>
-      <div class="seperator"></div>
-    </section>
-  </div>
+  <BasicDashboard :pageTitle="pageTitle" :pageID="pageID" :sections="sections"/>
 </template>
 
 <style src="@/styles/basicDashboard.css" scoped></style>
\ No newline at end of file
diff --git a/src/pages/basicDashboard/Wireless.vue b/src/pages/basicDashboard/Wireless.vue
index 69ae430..4ffb40a 100644
--- a/src/pages/basicDashboard/Wireless.vue
+++ b/src/pages/basicDashboard/Wireless.vue
@@ -1,170 +1,36 @@
+<script lang="ts" setup>
+  import { shallowRef } from 'vue'
+  import BasicDashboard from '@/components/basicDashboard/BasicComponents.vue';
+  import wirelessSettings from '@/data/basicDashboard/Wireless.ts';
+  const pageTitle="Wireless Settings"
+  const pageID="wirelessSettingsComponent"
+
+  interface Sections {
+    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>
+
 <template>
-  <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="inputOption">
-          <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="inputOption">
-          <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="inputOption">
-          <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="inputOption">
-          <input type="password" name="wirelessName" value="SomeRandomPassword"/>
-          Password (Network)
-        </label>
-      </form>
-    </section>
-    <div class="seperator"></div>
-  </div>
+  <BasicDashboard :pageTitle="pageTitle" :pageID="pageID" :sections="sections"/>
 </template>
 
 <style src="@/styles/basicDashboard.css" scoped></style>
\ No newline at end of file