Added labels, made options optional, default selected option

src/pages/basicDashboard/InternetSetup.vue

@@ -2,95 +2,148 @@
   import { shallowRef } from 'vue'
   const pageTitle="Internet Setup"
 
-  interface sectionsType {
+  interface Sections {
-    title: string,
+    title?: string,
-    ID: string,
+    id: string,
-    forms: {
+    selectedRadio?: number,
-      name: string,
+    forms?: {
+      name?: string,
       class: string,
       option: string,
-      label: string
+      label?: string,
     }[]
   }
 
-  const sections = shallowRef<sectionsType[]>([]);
+  const sections = shallowRef<Sections[]>([]);
 
   sections.value = [
     {
       title: "Does your internet require a login?",
-      ID: "internetSetupLogin",
+      id: "internetSetupLogin",
+      selectedRadio: 0,
       forms: [
         {
           name: "internetLoginOption",
           class: "selectOption",
           option: "radio",
-          label: "Yes"
+          label: "Yes",
         },
         {
           name: "internetLoginOption",
           class: "selectOption",
           option: "radio",
-          label: "No"
+          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",
+      id: "internetSetupIP",
+      selectedRadio: 0,
       forms: [
         {
           name: "internetIPOption",
           class: "selectOption",
           option: "radio",
-          label: "Dynamic IP from ISP"
+          label: "Dynamic IP from ISP",
         },
         {
           name: "internetIPOption",
           class: "selectOption",
           option: "radio",
-          label: "Static IP from ISP"
+          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",
+      id: "internetSetupDNS",
+      selectedRadio: 0,
       forms: [
         {
           name: "internetDNSOption",
           class: "selectOption",
           option: "radio",
-          label: "Automatic DNS from ISP"
+          label: "Automatic DNS from ISP",
         },
         {
           name: "internetDNSOption",
           class: "selectOption",
           option: "radio",
-          label: "Select DNS Servers"
+          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",
+      id: "internetSetupMAC",
+      selectedRadio: 0,
       forms: [
         {
           name: "internetMACOption",
           class: "selectOption",
           option: "radio",
-          label: "Default Address"
+          label: "Default Address",
         },
         {
           name: "internetMACOption",
           class: "selectOption",
           option: "radio",
-          label: "Computer MAC Address"
+          label: "Computer MAC Address",
         },
         {
           name: "internetMACOption",
           class: "selectOption",
           option: "radio",
-          label: "Specific MAC Adress"
+          label: "Specific MAC Address",
-        }
+        },
+        {
+          name: "internetMACInput",
+          class: "inputOption",
+          option: "text",
+          label: "MAC Address",
+        },
       ]
     }
   ]
@@ -99,14 +152,28 @@
 <template>
   <div id="internetSetupComponent">
     <h2 class="title">{{ pageTitle }}</h2>
-    <section v-for="section in sections" :id="section.ID" :key="section.ID">
+    <section 
+      v-for="section in sections" 
+      :id="section.id" 
+      :key="section.id"
+    >
       <h3>{{ section.title }}</h3>
-      <form>
+      <form v-if="section.forms">
-        <label :class="form.class" v-for="(form, index) in section.forms">
+        <label 
-          <input :type="form.option" :name="form.name" :value="index + 1" :key="form.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>

src/pages/basicDashboard/Wireless.vue

@@ -35,7 +35,7 @@
           <input type="checkbox">
           Enable 20/40 MHz Coexistence
         </label>
-        <label class="inputName">
+        <label class="inputOption">
           <input type="text" name="wirelessName" value="SomeRandomNetwork"/>
           Name (SSID)
         </label>
@@ -87,7 +87,7 @@
           </label>
           Security Options
         </label>
-        <label class="inputName">
+        <label class="inputOption">
           <input type="password" name="wirelessName" value="SomeRandomPassword"/>
           Password (Network)
         </label>
@@ -105,7 +105,7 @@
           <input type="checkbox">
           Enable 20/40 MHz Coexistence
         </label>
-        <label class="inputName">
+        <label class="inputOption">
           <input type="text" name="wirelessName" value="SomeRandomNetwork"/>
           Name (SSID)
         </label>
@@ -157,7 +157,7 @@
           </label>
           Security Options
         </label>
-        <label class="inputName">
+        <label class="inputOption">
           <input type="password" name="wirelessName" value="SomeRandomPassword"/>
           Password (Network)
         </label>

src/styles/basicDashboard.css

@@ -145,7 +145,7 @@
     user-select: none;
     cursor: pointer;
   }
-  .inputName {
+  .inputOption {
     display: flex;
     flex-direction: column-reverse;
     input {