From 5b6763be4c0ecba69aec28ff179c004be1333f4e Mon Sep 17 00:00:00 2001
From: Keyemail <hatsunepatrick@gmail.com>
Date: Tue, 17 Sep 2024 02:28:54 -0700
Subject: [PATCH] Made internet setup reactive

---
 src/pages/basicDashboard/InternetSetup.vue | 163 +++++++++++++--------
 src/styles/basicDashboard.css              |   3 +
 2 files changed, 108 insertions(+), 58 deletions(-)

diff --git a/src/pages/basicDashboard/InternetSetup.vue b/src/pages/basicDashboard/InternetSetup.vue
index 6df9a9f..e916a63 100644
--- a/src/pages/basicDashboard/InternetSetup.vue
+++ b/src/pages/basicDashboard/InternetSetup.vue
@@ -1,67 +1,114 @@
+<script lang="ts" setup>
+  import { shallowRef } from 'vue'
+  const pageTitle="Internet Setup"
+
+  interface sectionsType {
+    title: string,
+    ID: string,
+    forms: {
+      name: string,
+      class: string,
+      option: string,
+      label: string
+    }[]
+  }
+
+  const sections = shallowRef<sectionsType[]>([]);
+
+  sections.value = [
+    {
+      title: "Does your internet require a login?",
+      ID: "internetSetupLogin",
+      forms: [
+        {
+          name: "internetLoginOption",
+          class: "selectOption",
+          option: "radio",
+          label: "Yes"
+        },
+        {
+          name: "internetLoginOption",
+          class: "selectOption",
+          option: "radio",
+          label: "No"
+        }
+      ]
+    },
+    {
+      title: "Internet IP Address",
+      ID: "internetSetupIP",
+      forms: [
+        {
+          name: "internetIPOption",
+          class: "selectOption",
+          option: "radio",
+          label: "Dynamic IP from ISP"
+        },
+        {
+          name: "internetIPOption",
+          class: "selectOption",
+          option: "radio",
+          label: "Static IP from ISP"
+        }
+      ]
+    },
+    {
+      title: "DNS (Domain Name Server) Address",
+      ID: "internetSetupDNS",
+      forms: [
+        {
+          name: "internetDNSOption",
+          class: "selectOption",
+          option: "radio",
+          label: "Automatic DNS from ISP"
+        },
+        {
+          name: "internetDNSOption",
+          class: "selectOption",
+          option: "radio",
+          label: "Select DNS Servers"
+        }
+      ]
+    }, {
+      title: "Router MAC Address",
+      ID: "internetSetupMAC",
+      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 Adress"
+        }
+      ]
+    }
+  ]
+</script>
+
 <template>
   <div id="internetSetupComponent">
-    <h2 class="title">Internet Setup</h2>
-    <section id="internetSetupLogin">
-      <h3>Does your internet connection require a login?</h3>
-      <!-- Backend required to finish -->
+    <h2 class="title">{{ pageTitle }}</h2>
+    <section v-for="section in sections" :id="section.ID" :key="section.ID">
+      <h3>{{ section.title }}</h3>
       <form>
-        <label class="selectOption">
-          <input type="radio" name="internetLoginOption" value="1">
-          Yes
-        </label>
-        <label class="selectOption">
-          <input type="radio" name="internetLoginOption" value="2">
-          No
+        <label :class="form.class" v-for="(form, index) in section.forms">
+          <input :type="form.option" :name="form.name" :value="index + 1" :key="form.label">
+          {{ form.label }}
         </label>
       </form>
+      <div class="seperator"></div>
     </section>
-    <div class="seperator"></div>
-    <section id="internetSetupIP">
-      <h3>Internet IP Address</h3>
-      <form>
-        <label class="selectOption">
-          <input type="radio" name="internetIPOption" value="1">
-          Dynamic IP from ISP
-        </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 class="selectOption">
-          <input type="radio" name="internetDNSOption" value="1">
-          Automatic DNS from ISP
-        </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 class="selectOption">
-          <input type="radio" name="internetMACOption" value="1">
-          Default Address
-        </label>
-        <label class="selectOption">
-          <input type="radio" name="internetMACOption" value="2">
-          Computer MAC Address
-        </label>
-        <label class="selectOption">
-          <input type="radio" name="internetMACOption" value="2">
-          Specific MAC Adress
-        </label>
-      </form>
-    </section>
-    <div class="seperator"></div>
   </div>
 </template>
 
diff --git a/src/styles/basicDashboard.css b/src/styles/basicDashboard.css
index f742fa6..a7aede0 100644
--- a/src/styles/basicDashboard.css
+++ b/src/styles/basicDashboard.css
@@ -130,6 +130,9 @@
     gap: 10px;
   }
 
+  .seperator {
+    margin-top: 20px;
+  }
   .selectOption {
     display: flex;
     align-items: center;