Added device list, optimized css

src/assets/deviceSvgs/Ethernet.svg

@@ -0,0 +1,11 @@
+<svg version="1.1" viewBox="0 0 31.361 26.618" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(-.31949 -2.6911)">
+  <g transform="translate(.079744 -.59905)">
+   <rect x="1.8442" y="4.8947" width="28.152" height="23.409" ry="2.1218" fill="none" stroke="#fff" stroke-width="3.209"/>
+   <g transform="matrix(1.7216 0 0 1.7216 -11.548 -13.013)" fill="#fff">
+    <rect x="8.1284" y="21.433" width="6.4541" height="3.0425" rx="0" ry="0"/>
+    <rect x="17.328" y="21.433" width="6.4541" height="3.1395" rx="0" ry="0"/>
+   </g>
+  </g>
+ </g>
+</svg>

src/assets/deviceSvgs/Other.svg

@@ -0,0 +1,12 @@
+<svg version="1.1" viewBox="0 -14 105.42 120" xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(-7.2896 -15.784)">
+    <g transform="matrix(1.4408 0 0 1.4116 -26.451 -12.591)">
+    <rect x="26.334" y="23.019" width="67.332" height="42.58" ry="4.3365" fill="none" stroke="#fff" stroke-width="5.834"/>
+    <g fill="#fff" stroke-width="0">
+      <rect x="57.113" y="65.717" width="5.7745" height="14.83" ry="0"/>
+      <rect x="58.961" y="67.719" width="1.5653" height="3.0535"/>
+      <rect x="41.291" y="78.287" width="37.419" height="5.8942" ry="2.5257"/>
+    </g>
+    </g>
+  </g>
+</svg>

src/assets/deviceSvgs/Wifi.svg

@@ -0,0 +1,10 @@
+<svg version="1.1" viewBox="0 -20 116 120" xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(-2.0001 -17.685)">
+    <circle cx="60" cy="84.574" r="11.505" fill="#f9f9f9" stroke-width="1.099"/>
+    <g fill="none" stroke="#fff" stroke-width="8.7977">
+      <path transform="scale(1,-1)" d="m84.282-73.026a28.038 28.038 0 0 1-24.282 14.019 28.038 28.038 0 0 1-24.282-14.019" style="paint-order:normal"/>
+      <path transform="scale(1,-1)" d="m100.02-63.652a46.214 46.214 0 0 1-40.023 23.107 46.214 46.214 0 0 1-40.023-23.107" style="paint-order:normal"/>
+      <path transform="scale(1,-1)" d="m114.19-53.37a62.574 62.574 0 0 1-54.19 31.287 62.574 62.574 0 0 1-54.19-31.287" style="paint-order:normal"/>
+    </g>
+  </g>
+</svg>

src/components/dashboard/DeviceList.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+  const { sections, pageTitle, pageID } = defineProps<{
+    pageTitle: string,
+    pageID: string,
+    sections?: Sections[],
+  }>();
+
+  interface Sections {
+    title: string,
+    id: string,
+    icon?: string,
+    devices?: {
+      connection: string,
+      name?: string,
+      ip: string,
+      mac: string,
+    }[],
+  }
+</script>
+
+<template>
+  <div :id="pageID">
+    <h2 class="title">{{ pageTitle }}</h2>
+    <section v-for="section in sections">
+      <header> 
+        <component :is="section.icon"/>
+        <h3>{{ section.title }}</h3>
+      </header>
+      <form v-if="section.devices" v-for="device in section.devices">
+        <div id="device">
+          <p>{{ device.name }}</p>
+          <p>{{ device.ip }}</p>
+          <p>{{ device.mac }}</p>
+        </div>
+      </form>
+      <p v-else>No devices connected!</p>
+    </section>
+  </div>
+</template>
+
+<style src="@/styles/basicDashboard.css" scoped></style>

src/components/dashboard/Template.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  const {pageTitle} = defineProps<{
+  const { pageTitle, pageID, sections } = defineProps<{
     pageTitle: string,
     pageID: string,
     sections: Sections[],
@@ -21,8 +21,8 @@
         option: string,
         label?: string,
         selectedRadio?: number,
-      }[]
-    }[]
+      }[],
+    }[],
   }
 </script>
 

src/data/DeviceList.ts

@@ -0,0 +1,58 @@
+import ethernet from '@/assets/deviceSvgs/Ethernet.svg';
+import wifi from '@/assets/deviceSvgs/Wifi.svg'
+import other from '@/assets/deviceSvgs/Other.svg'
+
+const deviceList = [
+  {
+    title: "Ethernet",
+    id: "wiredDevices",
+    icon: ethernet,
+    devices: [
+      {
+        connection: "Wired",
+        name: "My PC",
+        ip: "10.0.0.2",
+        mac: "e6:f3:21:09:25:27"
+      },
+    ],
+  },
+  {
+    title: "Wireless (5 Ghz)",
+    id: "wireless5Devices",
+    icon: wifi,
+    devices: [
+      {
+        connection: "Wireless5",
+        name: "My Phone",
+        ip: "10.0.0.3",
+        mac: "d9:fb:cd:50:90:9c"
+      },
+      {
+        connection: "Wireless5",
+        name: "My Printer",
+        ip: "10.0.0.4",
+        mac: "d1:29:1a:1c:95:b1"
+      }
+    ],
+  },
+  {
+    title: "Wireless (2.4 Ghz)",
+    id: "wireless5Devices",
+    icon: wifi,
+    devices: [
+      {
+        connection: "Wireless2",
+        name: "My Smart TV",
+        ip: "10.0.0.5",
+        mac: "15:92:9b:a8:db:2b"
+      },
+    ],
+  },
+  {
+    title: "Unknown",
+    id: "unkownDevices",
+    icon: other,
+  }
+];
+
+export default deviceList;

src/pages/basicDashboard/DeviceList.vue

@@ -1,7 +1,28 @@
+<script lang="ts" setup>
+  import { shallowRef } from 'vue'
+  import DeviceList from '@/components/dashboard/DeviceList.vue';
+  import deviceListData from '@/data/DeviceList.ts';
+  const pageTitle="Device List"
+  const pageID="deviceList"
+
+  interface Sections {
+    title: string,
+    id: string,
+    devices?: {
+      connection: string,
+      name?: string,
+      ip: string,
+      mac: string,
+    }[]
+  }
+
+  const sections = shallowRef<Sections[]>([]);
+
+  sections.value = deviceListData;
+</script>
+
 <template>
-  <div>
-    <h2 class="title">Device List</h2>
-  </div>
+  <DeviceList :pageTitle="pageTitle" :pageID="pageID" :sections="sections"/>
 </template>
 
 <style src="@/styles/basicDashboard.css" scoped></style>

src/pages/basicDashboard/InternetSetup.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
   import { shallowRef } from 'vue'
-  import BasicDashboard from '@/components/basicDashboard/BasicComponents.vue';
-  import internetSetup from '@/data/basicDashboard/InternetSetup.ts';
+  import BasicDashboard from '@/components/dashboard/Template.vue';
+  import internetSetup from '@/data/InternetSetup.ts';
   const pageTitle="Internet Setup"
   const pageID="internetSetupComponent"
 

src/pages/basicDashboard/Wireless.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
   import { shallowRef } from 'vue'
-  import BasicDashboard from '@/components/basicDashboard/BasicComponents.vue';
-  import wirelessSettings from '@/data/basicDashboard/Wireless.ts';
+  import BasicDashboard from '@/components/dashboard/Template.vue';
+  import wirelessSettings from '@/data/Wireless.ts';
   const pageTitle="Wireless Settings"
   const pageID="wirelessSettingsComponent"
 

src/styles/basicDashboard.css

@@ -185,3 +185,38 @@
     gap: 5px;
   }
 }
+
+#deviceList {
+  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;
+    width: 100%;
+    padding: 20px;
+    border-radius: 5px;
+    background-color: var(--dark-bg-alt-2-color);
+    h3 {
+      font-size: 2rem;
+    }
+    svg {
+      width: 30px;
+    }
+    header {
+      display: flex;
+      gap: 10px;
+    }
+  }
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+}