Fixes

Frontend/src/lib/components/AddAp.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	function close() {
+		dispatch('close');
+	}
+</script>
+
+<div class="background-backdrop">
+	<div class="p-10">
+		<div on:click={() => close()} class="cursor-pointer text-white">Back</div>
+		<div class="mx-auto flex flex-col w-max mt-20">
+			<div class="text-white text-xl">Add access point</div>
+			<div class="flex flex-row items-center mt-8">
+				<div class="text-white pr-12">Name:</div>
+				<input type="text" class="border border-white rounded-lg h-6 p-2 mt-2" />
+			</div>
+			<div class="flex flex-row items-center mt-8">
+				<div class="text-white pr-14">Type:</div>
+				<input type="text" class="border border-white rounded-lg h-6 p-2 mt-2" />
+			</div>
+			<div class="flex flex-row items-center mt-8">
+				<div class="text-white pr-20">IP:</div>
+				<input type="text" class="border border-white rounded-lg h-6 p-2 mt-2" />
+			</div>
+			<div class="flex flex-row items-center mt-8">
+				<div class="text-white pr-8">Location:</div>
+				<input type="text" class="border border-white rounded-lg h-6 p-2 mt-2" />
+			</div>
+			<button class="px-6 py-2 text-white bg-[#1D3920] mt-12 rounded-xl">Save access point</button>
+		</div>
+	</div>
+</div>
+
+<style>
+	.background-backdrop {
+		@apply w-screen h-screen z-50 bg-[#05171E] absolute top-0;
+	}
+</style>

Frontend/src/routes/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	let numberOfAccessPoints = 0;
-	let numberOfAccessPointsUp = 0;
+	let numberOfAccessPoints = 1;
+	let numberOfAccessPointsUp = 10;
 </script>
 
 <div class="height">

Frontend/src/routes/settings/+page.svelte

@@ -1,5 +1,26 @@
+<script lang="ts">
+	import AddAp from '$lib/components/AddAp.svelte';
+	import { onMount } from 'svelte';
+
+	onMount(async () => {
+		const res = await fetch('http://10.10.1.4:8080/api/v1/aps');
+		table = await res.json();
+		console.log(table);
+	});
+
+	var table = [];
+
+	let showAddApp = false;
+</script>
+
+{#if showAddApp}
+	<AddAp on:close={() => (showAddApp = false)} />
+{/if}
+
 <div class="height">
-	<div class="bg-[#05171E] rounded-lg w-3/4 h-full mx-auto mt-20 py-4 px-20">
+	<div
+		class="bg-[#05171E] rounded-lg w-3/4 h-full overflow-y-auto mx-auto mt-20 py-4 px-20 relative"
+	>
 		<div class="text-white text-center text-3xl">Settings</div>
 		<table class="text-white border mx-auto mt-10">
 			<tr>
@@ -9,9 +30,27 @@
 				<th class="title">Location</th>
 				<th class="title">IP address</th>
 			</tr>
+			{#if table.length != 0}
+				{#each table as item, index}
+					<tr class="item">
+						<td class="py-2 text-center border-r">{index}</td>
+						<td class="py-2 text-center border-r">{item.Name}</td>
+						<td class="py-2 text-center border-r">{item.Type}</td>
+						<td class="py-2 text-center border-r">{item.Location}</td>
+						<td class="py-2 text-center">{item.IP}</td>
+					</tr>
+				{/each}
+			{:else}
+				<tr class="item">
+					<td colspan="5" class="text-center py-2">No access points</td>
+				</tr>
+			{/if}
 		</table>
-		<div class="flex justify-center mt-10">
-			<button class="text-white py-2 px-10 bg-[#1D3920] rounded-xl"> Add access point </button>
+		<div class="flex justify-center my-10">
+			<button
+				on:click={() => (showAddApp = !showAddApp)}
+				class="text-white py-2 px-10 bg-[#1D3920] rounded-xl">Add access point</button
+			>
 		</div>
 	</div>
 </div>
@@ -23,4 +62,7 @@
 	.title {
 		@apply py-2 px-10 bg-[#5B5B5B] border;
 	}
+	.item {
+		@apply py-10 bg-[#363636] max-h-10 overflow-y-scroll;
+	}
 </style>

Wifi Analyzer/src/main.cpp

@@ -10,6 +10,7 @@ void setup() {
   Serial.begin(115200);
   WiFi.mode(WIFI_STA);
   WiFi.disconnect();
+  pinMode(13, OUTPUT);
   delay(100);
   Serial.println("Setup complete. Starting Wi-Fi channel analysis.");
 }