From 9082e1adf6e1f40a8fee8c1a99f099b7d93cb560 Mon Sep 17 00:00:00 2001
From: waltem01 <simon.waltemathe@ptb.de>
Date: Fri, 24 Nov 2023 07:11:31 +0100
Subject: [PATCH] created testpanel for matrix

---
 Webserver/src/routes/+page.svelte | 291 +++++++++++++++++++++++++++++-
 1 file changed, 289 insertions(+), 2 deletions(-)

diff --git a/Webserver/src/routes/+page.svelte b/Webserver/src/routes/+page.svelte
index 5982b0a..489b8d9 100644
--- a/Webserver/src/routes/+page.svelte
+++ b/Webserver/src/routes/+page.svelte
@@ -1,2 +1,289 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script lang="ts">
+	interface MatrixResponse {
+		success: boolean;
+	}
+
+	async function get(event: SubmitEvent) {
+		const form = event.target as HTMLFormElement;
+
+		const response = await fetch(`http://localhost:8080/${form.dataset.endpoint}`, {
+			mode: 'cors'
+		});
+		const data = (await response.json()) as MatrixResponse;
+		alert(data.success ? 'Success!' : 'Error!');
+	}
+
+	async function post(event: SubmitEvent) {
+		const form = event.target as HTMLFormElement;
+		const fdata = new FormData(form);
+
+		const response = await fetch(`http://localhost:8080/${form.dataset.endpoint}`, {
+			method: form.method,
+			mode: 'cors',
+			body: fdata
+		});
+		const mdata = (await response.json()) as MatrixResponse;
+		alert(mdata.success ? 'Success!' : 'Error!');
+	}
+</script>
+
+<h1 class="text-4xl font-bold mb-5">RGB LED Matrix</h1>
+<div class="grid grid-rows-7 p-1">
+	<form class="grid grid-cols-2" method="GET" data-endpoint="update" on:submit|preventDefault={get}>
+		<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="update">Update:</label>
+		<input
+			class="border-2 border-black border-b-0 cursor-pointer hover:bg-gray-200"
+			id="update"
+			name="update"
+			type="submit"
+			value="Submit"
+		/>
+	</form>
+
+	<form class="grid grid-cols-2" method="GET" data-endpoint="clear" on:submit|preventDefault={get}>
+		<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="clear">Clear:</label>
+		<input
+			class="border-2 border-black border-b-0 cursor-pointer hover:bg-gray-200"
+			id="clear"
+			name="clear"
+			type="submit"
+			value="Submit"
+		/>
+	</form>
+
+	<form
+		class="grid grid-cols-8"
+		method="POST"
+		data-endpoint="color"
+		on:submit|preventDefault={post}
+	>
+		<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="color">Set Color:</label>
+		<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="red">Red:</label>
+		<input
+			class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
+			id="red"
+			name="r"
+			type="number"
+			min="0"
+			max="255"
+			step="1"
+			value="255"
+		/>
+		<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="green">Green:</label>
+		<input
+			class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
+			id="green"
+			name="g"
+			type="number"
+			min="0"
+			max="255"
+			step="1"
+			value="255"
+		/>
+		<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="blue">Blue:</label>
+		<input
+			class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
+			id="blue"
+			name="b"
+			type="number"
+			min="0"
+			max="255"
+			step="1"
+			value="255"
+		/>
+		<input
+			class="border-2 border-black border-b-0 hover:bg-gray-200"
+			id="color"
+			name="color"
+			type="submit"
+			value="Submit"
+		/>
+	</form>
+
+	<form
+		class="grid grid-cols-6"
+		method="POST"
+		data-endpoint="pixel"
+		on:submit|preventDefault={post}
+	>
+		<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="pixel">Set Pixel:</label
+		><label class="border-2 border-black border-b-0 border-r-0 pl-1" for="px">X:</label>
+		<input
+			class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
+			id="px"
+			name="x"
+			type="number"
+			min="0"
+			max="191"
+			step="1"
+			value="0"
+		/>
+		<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="py">Y:</label>
+		<input
+			class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
+			id="py"
+			name="y"
+			type="number"
+			min="0"
+			max="191"
+			step="1"
+			value="0"
+		/>
+		<input
+			class="border-2 border-black border-b-0 cursor-pointer hover:bg-gray-200"
+			id="pixel"
+			name="pixel"
+			type="submit"
+			value="Submit"
+		/>
+	</form>
+
+	<form
+		class="grid grid-cols-10"
+		method="POST"
+		data-endpoint="rectangle"
+		on:submit|preventDefault={post}
+	>
+		<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="rectangle"
+			>Rectangle:</label
+		><label class="border-2 border-black border-b-0 border-r-0 pl-1" for="rx">X:</label>
+		<input
+			class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
+			id="rx"
+			name="x"
+			type="number"
+			min="0"
+			max="191"
+			step="1"
+			value="0"
+		/>
+		<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="ry">Y:</label>
+		<input
+			class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
+			id="ry"
+			name="y"
+			type="number"
+			min="0"
+			max="191"
+			step="1"
+			value="0"
+		/><label class="border-2 border-black border-b-0 border-r-0 pl-1" for="w">W:</label>
+		<input
+			class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
+			id="w"
+			name="w"
+			type="number"
+			min="0"
+			max="191"
+			step="1"
+			value="0"
+		/>
+		<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="h">H:</label>
+		<input
+			class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
+			id="h"
+			name="h"
+			type="number"
+			min="0"
+			max="191"
+			step="1"
+			value="0"
+		/>
+		<input
+			class="border-2 border-black border-b-0 cursor-pointer hover:bg-gray-200"
+			id="rectangle"
+			name="rectangle"
+			type="submit"
+			value="Submit"
+		/>
+	</form>
+
+	<form
+		class="grid grid-cols-8"
+		method="POST"
+		data-endpoint="circle"
+		on:submit|preventDefault={post}
+	>
+		<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="circle">Circle:</label
+		><label class="border-2 border-black border-b-0 border-r-0 pl-1" for="cx">X:</label>
+		<input
+			class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
+			id="cx"
+			name="x"
+			type="number"
+			min="0"
+			max="191"
+			step="1"
+			value="0"
+		/>
+		<label class="border-2 border-black border-b-0 border-r-0 pl-1" for="cy">Y:</label>
+		<input
+			class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
+			id="cy"
+			name="y"
+			type="number"
+			min="0"
+			max="191"
+			step="1"
+			value="0"
+		/><label class="border-2 border-black border-b-0 border-r-0 pl-1" for="radius">R:</label>
+		<input
+			class="border-2 border-black border-b-0 border-r-0 cursor-text pl-1 bg-gray-100"
+			id="radius"
+			name="r"
+			type="number"
+			min="0"
+			max="95"
+			step="1"
+			value="0"
+		/>
+		<input
+			class="border-2 border-black border-b-0 cursor-pointer hover:bg-gray-200"
+			id="circle"
+			name="circle"
+			type="submit"
+			value="Submit"
+		/>
+	</form>
+
+	<form class="grid grid-cols-8" method="POST" data-endpoint="text" on:submit|preventDefault={post}>
+		<label class="border-2 border-black border-r-0 pl-1" for="text">Text:</label><label
+			class="border-2 border-black border-r-0 pl-1"
+			for="tx">X:</label
+		>
+		<input
+			class="border-2 border-black border-r-0 cursor-text pl-1 bg-gray-100"
+			id="tx"
+			name="x"
+			type="number"
+			min="0"
+			max="191"
+			step="1"
+			value="0"
+		/>
+		<label class="border-2 border-black border-r-0 pl-1" for="ty">Y:</label>
+		<input
+			class="border-2 border-black border-r-0 cursor-text pl-1 bg-gray-100"
+			id="ty"
+			name="y"
+			type="number"
+			min="0"
+			max="191"
+			step="1"
+			value="0"
+		/><label class="border-2 border-black border-r-0 pl-1" for="tin">Input:</label>
+		<input
+			class="border-2 border-black border-r-0 cursor-text pl-1 pr-1 bg-gray-100"
+			id="tin"
+			name="text"
+			type="text"
+		/>
+		<input
+			class="border-2 border-black cursor-pointer hover:bg-gray-200"
+			id="text"
+			name="text"
+			type="submit"
+			value="Submit"
+		/>
+	</form>
+</div>