From c57bb60fcbda35cd2cf4a234036bfc4c7f92c796 Mon Sep 17 00:00:00 2001
From: waltem01 <simon.waltemathe@ptb.de>
Date: Thu, 30 Nov 2023 09:51:30 +0100
Subject: [PATCH] commentary

---
 Webserver/src/routes/admin/+page.svelte      | 129 ++++++++++++++++---
 Webserver/src/routes/api/redirect/+server.ts |   9 ++
 2 files changed, 121 insertions(+), 17 deletions(-)

diff --git a/Webserver/src/routes/admin/+page.svelte b/Webserver/src/routes/admin/+page.svelte
index cfb22e8..3352d1c 100644
--- a/Webserver/src/routes/admin/+page.svelte
+++ b/Webserver/src/routes/admin/+page.svelte
@@ -1,34 +1,47 @@
 <script lang="ts">
-	import { detectGamepad, gamepadButtonPress } from '$lib/client/gamepad';
 	import { rgbToHex, type Color, getContrastColor } from '$lib/client/color';
+	import { detectGamepad, gamepadButtonPress } from '$lib/client/gamepad';
 	import { initializeMatrix } from '$lib/client/matrix';
 	import { toRadians } from '$lib/client/miscellaneous';
 	import type { APIResponse } from '$lib/interfaces';
 	import { onMount } from 'svelte';
 
-	async function get(event: SubmitEvent) {
+	// Basic GET Method for forms
+	async function get(event: SubmitEvent | string) {
 		clearMatrix();
-		const form = event.target as HTMLFormElement;
+		// Get endpoint from form dataset or string input
+		const endpoint =
+			event instanceof SubmitEvent ? (event.target as HTMLFormElement).dataset.endpoint : event;
 
-		const response = await fetch(`/api/redirect?endpoint=${form.dataset.endpoint}`);
+		// Send request to be redirected to given endpoint
+		const response = await fetch(`/api/redirect?endpoint=${endpoint}`);
+		// Await respose from webserver
 		const mdata = (await response.json()) as APIResponse;
-		if (!mdata.success) alert(`Error while processing '${form.dataset.endpoint}'!`);
+		// Basic error handling
+		if (!mdata.success) alert(`Error while processing '${endpoint}'!`);
 	}
 
+	// Basic POST Method for forms
 	async function post(event: SubmitEvent) {
+		// Get formdata from form element
 		const form = event.target as HTMLFormElement;
 		const fdata = new FormData(form);
 
+		// Display action on simulated matrix
 		switch (form.dataset.endpoint) {
+			// Save color data from form
 			case 'color':
 				colorSelect(fdata);
 				break;
+			// Draw pixel onto matrix
 			case 'pixel':
 				setPixel(fdata);
 				break;
+			// Draw rectangle onto matrix
 			case 'rectangle':
 				drawRectangle(fdata);
 				break;
+			// Draw circle onto matrix
 			case 'circle':
 				drawCircle(fdata);
 				break;
@@ -37,103 +50,144 @@
 			// 	break;
 		}
 
+		// Append endpoint to formdata for redirection
 		fdata.append('endpoint', form.dataset.endpoint ?? '');
+		// Send request to be redirected to given endpoint
 		const response = await fetch('/api/redirect', {
 			method: 'POST',
 			body: fdata
 		});
+		// Await respose from webserver
 		const mdata = (await response.json()) as APIResponse;
+		// Basic error handling
 		if (!mdata.success) alert(`Error while processing '${form.dataset.endpoint}'!`);
 	}
 
 	// function displayText(formData: FormData) {}
 
+	// Draw circle onto matrix
 	function drawCircle(formData: FormData) {
+		// Get relevant data from formdata
 		const x = parseInt((formData.get('x') as string) ?? '191');
 		const y = parseInt((formData.get('y') as string) ?? '191');
 		const r = parseInt((formData.get('r') as string) ?? '95');
 
+		// Convert stored color data to hex
 		const hex = rgbToHex(pixelColor);
+		// Loop through angles
 		for (let a = 0; a < 360; a++) {
+			// Calculate coordinates of pixel
 			const nx = Math.round(Math.cos(toRadians(a)) * r + x);
 			const ny = Math.round(Math.sin(toRadians(a)) * r + y);
 
+			// If within bounds, draw pixel with color
 			if (nx >= 0 && nx < 192 && ny >= 0 && ny < 192) matrix[ny][nx].color = hex;
 		}
 	}
 
+	// Draw rectangle onto matrix
 	function drawRectangle(formData: FormData) {
+		// Get relevant data from formdata
 		const x = parseInt((formData.get('x') as string) ?? '191');
 		const y = parseInt((formData.get('y') as string) ?? '191');
 		const w = parseInt((formData.get('w') as string) ?? '191');
 		const h = parseInt((formData.get('h') as string) ?? '191');
 
+		// Convert stored color data to hex
 		const hex = rgbToHex(pixelColor);
+		// Loop through every position in rectangle to set color
 		for (let j = y; j < y + h; j++) for (let i = x; i < x + w; i++) matrix[j][i].color = hex;
 	}
 
+	// Draw pixel onto matrix
 	function setPixel(formData: FormData) {
+		// Get relevant data from formdata
 		const x = parseInt((formData.get('x') as string) ?? '191');
 		const y = parseInt((formData.get('y') as string) ?? '191');
 
+		// Set singular coodinate to given color
 		matrix[y][x].color = rgbToHex(pixelColor);
 	}
 
+	// Clear simulated matrix
 	function clearMatrix() {
 		matrix.forEach((y) => y.forEach((x) => (x.color = '000000')));
 	}
 
 	function colorSelect(formData: FormData) {
+		// Get relevant data from formdata
 		pixelColor.r = parseInt((formData.get('r') as string) ?? '255');
 		pixelColor.g = parseInt((formData.get('g') as string) ?? '255');
 		pixelColor.b = parseInt((formData.get('b') as string) ?? '255');
 	}
 
+	// Mouse event handler for setting pixels clicked on matrix
 	async function setMousePixel(event: MouseEvent) {
+		// Exist if mouse not pressed
 		if (!mousePressed) return;
 
+		// Get table cell element
 		const parent = event.target as HTMLTableCellElement;
+		// Extract x and y values from datasets
 		let x = parseInt(parent.dataset.x ?? '0');
 		let y = parseInt(parent.parentElement?.dataset.y ?? '0');
 
+		// Convert stored color data to hex
 		const next = rgbToHex(pixelColor);
+		// Ignore if color stays the same to reduce API calls
 		if (matrix[y][x].color === next) return;
+		// Set pixel to color
 		matrix[y][x].color = next;
 
+		// Create new formdata
 		const fdata = new FormData();
 		const isScaled = scaling > 1;
+		// Scale data accordingly
 		if (isScaled) {
 			x *= scaling;
 			y *= scaling;
 
+			// width and height of rectangle are the scale factor
 			fdata.append('w', scaling.toString());
 			fdata.append('h', scaling.toString());
 		}
 
+		// append x and y coordinates
 		fdata.append('x', x.toString());
 		fdata.append('y', y.toString());
+		// append endpoint depending on scale factor
 		fdata.append('endpoint', isScaled ? 'rectangle' : 'pixel');
 
+		// Send request to be redirected to given endpoint
 		const response = await fetch('/api/redirect', {
 			method: 'POST',
 			body: fdata
 		});
+		// Await respose from webserver
 		const mdata = (await response.json()) as APIResponse;
+		// Basic error handling
 		if (!mdata.success) alert("Error while processing 'pixel'!");
 	}
 
+	// Correction function to map scale factor to valid values
 	function correctSlider(event: Event) {
+		// Get input element
 		const slider = event.target as HTMLInputElement;
 
+		// Read value, round down to next best divisor
 		let current = parseInt(slider.value);
 		while (192 % current !== 0) current--;
 
+		// Set scaling to new value
 		scaling = current;
+		// Scale elements by padding inside accordingly
 		padding = 0.1875 * scaling;
 
+		// Reinitialize matrix
 		matrix = initializeMatrix(scaling);
 	}
 
+	// System variables
 	let scaling = 3,
 		padding = 0.5625;
 	let mousePressed = false;
@@ -143,26 +197,40 @@
 	const gameCoords = { x: 0, y: 0 };
 	const pixelColor = { r: 255, g: 255, b: 255 } as Color;
 
+	// On client loaded
 	onMount(() => {
+		// API call to clear matrix
+		get('clear');
+
+		// Regularly try detecting gamepad
 		setInterval(() => {
+			// Pass if is already selected
 			if (gamepad) return;
 			gamepad = detectGamepad();
 		}, 1000);
 
+		// Regularly try detecting button presses
 		setInterval(() => gamepadButtonPress(gamepad, gameCoords), 100);
 
+		// Listen for gamepad conntect events
 		window.addEventListener('gamepadconnected', (e) => {
+			// Set new gamepad
 			if (e.gamepad.index === 0) gamepad = e.gamepad;
 		});
 
+		// Listen for gamepad disconnect events
 		window.addEventListener('gamepaddisconnected', (e) => {
+			// Remove only if it's the same gameapd
 			if (e.gamepad.id === gamepad?.id) gamepad = null;
 		});
 	});
 </script>
 
+<!-- Title -->
 <h1 class="text-4xl font-bold m-5 text-center">Matrix Control Panel</h1>
+<!-- Forms -->
 <div class="grid grid-rows-7 p-1">
+	<!-- Update -->
 	<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
@@ -174,6 +242,7 @@
 		/>
 	</form>
 
+	<!-- Clear -->
 	<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
@@ -185,6 +254,7 @@
 		/>
 	</form>
 
+	<!-- Set color -->
 	<form
 		class="grid grid-cols-8"
 		method="POST"
@@ -192,6 +262,7 @@
 		on:submit|preventDefault={post}
 	>
 		<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="color">Set Color:</label>
+		<!-- RED color value -->
 		<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"
@@ -204,6 +275,7 @@
 			value="255"
 			required
 		/>
+		<!-- GREEN color value -->
 		<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"
@@ -216,6 +288,7 @@
 			value="255"
 			required
 		/>
+		<!-- BLUE color value -->
 		<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"
@@ -237,14 +310,16 @@
 		/>
 	</form>
 
+	<!-- Set pixel -->
 	<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>
+		<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="pixel">Set Pixel:</label>
+		<!-- X coordinate -->
+		<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"
@@ -256,6 +331,7 @@
 			value="0"
 			required
 		/>
+		<!-- Y coordinate -->
 		<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"
@@ -277,6 +353,7 @@
 		/>
 	</form>
 
+	<!-- Draw rectangle -->
 	<form
 		class="grid grid-cols-10"
 		method="POST"
@@ -285,7 +362,9 @@
 	>
 		<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>
+		>
+		<!-- X coordinate -->
+		<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"
@@ -297,6 +376,7 @@
 			value="177"
 			required
 		/>
+		<!-- Y coordinate -->
 		<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"
@@ -308,7 +388,9 @@
 			step="1"
 			value="0"
 			required
-		/><label class="border-2 border-black border-b-0 border-r-0 pl-1" for="w">W:</label>
+		/>
+		<!-- Width -->
+		<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"
@@ -320,6 +402,7 @@
 			value="15"
 			required
 		/>
+		<!-- Height -->
 		<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"
@@ -341,14 +424,16 @@
 		/>
 	</form>
 
+	<!-- Draw circle -->
 	<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>
+		<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="circle">Circle:</label>
+		<!-- X coordinate -->
+		<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"
@@ -360,6 +445,7 @@
 			value="20"
 			required
 		/>
+		<!-- Y coordinate -->
 		<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"
@@ -371,7 +457,9 @@
 			step="1"
 			value="171"
 			required
-		/><label class="border-2 border-black border-b-0 border-r-0 pl-1" for="radius">R:</label>
+		/>
+		<!-- Radius -->
+		<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"
@@ -393,10 +481,9 @@
 	</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 border-b-0 pl-1" for="text">Text:</label><label
-			class="border-2 border-black border-r-0 border-b-0 pl-1"
-			for="tx">X:</label
-		>
+		<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="text">Text:</label>
+		<!-- X coordinate -->
+		<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="tx">X:</label>
 		<input
 			class="border-2 border-black border-r-0 border-b-0 cursor-text pl-1 bg-gray-100"
 			id="tx"
@@ -408,6 +495,7 @@
 			value="8"
 			required
 		/>
+		<!-- Y coordinate -->
 		<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="ty">Y:</label>
 		<input
 			class="border-2 border-black border-r-0 border-b-0 cursor-text pl-1 bg-gray-100"
@@ -419,7 +507,9 @@
 			step="1"
 			value="9"
 			required
-		/><label class="border-2 border-black border-r-0 border-b-0 pl-1" for="tin">Input:</label>
+		/>
+		<!-- Text input -->
+		<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="tin">Input:</label>
 		<input
 			class="border-2 border-black border-r-0 border-b-0 cursor-text pl-1 pr-1 bg-gray-100"
 			id="tin"
@@ -439,6 +529,7 @@
 
 	<form class="grid grid-cols-3" on:submit|preventDefault>
 		<label class="border-2 border-black border-r-0 pl-1" for="text">Scaling:</label>
+		<!-- Slider -->
 		<div class="flex pl-1 pr-1 border-2 border-black border-r-0 bg-gray-100">
 			<input
 				class="w-full cursor-pointer"
@@ -453,6 +544,7 @@
 				required
 			/>
 		</div>
+		<!-- Number -->
 		<input
 			class="border-2 border-black cursor-text pl-1 bg-gray-100"
 			type="number"
@@ -465,7 +557,9 @@
 		/>
 	</form>
 </div>
+<!-- Matricies -->
 <div class="flex justify-center">
+	<!-- Color display -->
 	<table id="main" class="mt-5 border-2 border-black">
 		{#each matrix as row}
 			<tr>
@@ -475,6 +569,7 @@
 			</tr>
 		{/each}
 	</table>
+	<!-- Overlay => Events + Effects -->
 	<div class="absolute z-10">
 		<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 		<table
diff --git a/Webserver/src/routes/api/redirect/+server.ts b/Webserver/src/routes/api/redirect/+server.ts
index b437426..b163d7e 100644
--- a/Webserver/src/routes/api/redirect/+server.ts
+++ b/Webserver/src/routes/api/redirect/+server.ts
@@ -1,22 +1,31 @@
 import type { APIResponse } from "$lib/interfaces";
 import { json, type RequestHandler } from "@sveltejs/kit";
 
+// GET Endpoint for redirection API
 export const GET: RequestHandler = async ({ url }) => {
+	// Get endpoint on main API from searchparams
 	const params = url.searchParams;
 	const endpoint = params.get('endpoint');
+	// Return if param not found
 	if (endpoint === null) return json({ success: false } as APIResponse);
 
+	// Call API and respond with new data
 	const api_call = await fetch(`http://localhost:8080/${endpoint}`);
 	const data = await api_call.json() as APIResponse;
 	return json(data);
 };
 
+// POST Endpoint for redirection API
 export const POST: RequestHandler = async ({ request }) => {
+	// Get data from form
 	const formData = await request.formData();
 	const endpoint = formData.get('endpoint');
+	// Return if endpoint not found
 	if (endpoint === null) return json({ success: false } as APIResponse);
 
+	// Remove endpoint to save on datatransfer
 	formData.delete('endpoint');
+	// Call API and respond with new data
 	const api_call = await fetch(`http://localhost:8080/${endpoint}`, {
 		method: 'POST',
 		mode: 'cors',