Made internet setup reactive

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>
+    <h2 class="title">{{ pageTitle }}</h2>
-    <section id="internetSetupLogin">
+    <section v-for="section in sections" :id="section.ID" :key="section.ID">
-      <h3>Does your internet connection require a login?</h3>
+      <h3>{{ section.title }}</h3>
-      <!-- Backend required to finish -->
       <form>
-        <label class="selectOption">
+        <label :class="form.class" v-for="(form, index) in section.forms">
-          <input type="radio" name="internetLoginOption" value="1">
+          <input :type="form.option" :name="form.name" :value="index + 1" :key="form.label">
-          Yes
+          {{ form.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 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>
 

src/pages/basicDashboard/Overview.vue

@@ -111,7 +111,6 @@
 <template>
   <div id="overviewComponent">
     <h2 class="title">Overview</h2>
-    <ul v-if="backendOnline">
     <ul v-if="backendOnline">
       <RouterLink :to="overviewItem.link" v-for="overviewItem in overviewItems">
         <li>
@@ -122,7 +121,6 @@
       </RouterLink>
     </ul>
     <p class="error" v-else>Backend offline or not available, please try again later.</p>
-    <p class="error" v-else>Backend offline or not available, please try again later.</p>
   </div>
 </template>
 

src/styles/basicDashboard.css

@@ -130,6 +130,9 @@
     gap: 10px;
   }
 
+  .seperator {
+    margin-top: 20px;
+  }
   .selectOption {
     display: flex;
     align-items: center;