refactor: general code clean up

Webserver/src/routes/image/+page.svelte

@@ -9,12 +9,14 @@
 	import type { APIResponse } from '$lib/interfaces';
 	import { onMount } from 'svelte';
 
-	interface UploadData {
+	// Data structure to keep track of upload statistics
+	interface UploadStat {
 		start: number;
 		elapsed: string;
 		interval: NodeJS.Timeout;
 	}
 
+	// Data structure to represent user data
 	interface SubmitData {
 		x: number;
 		y: number;
@@ -23,16 +25,20 @@
 		update: boolean;
 	}
 
+	// System variables
 	let imageURL: string | null;
-	let uploadData: UploadData, matrix: Matrix;
+	let uploadData: UploadStat, matrix: Matrix;
 	let uploadStarted = false,
 		submitData: SubmitData;
 
+	// Update matrix over endpoint
 	async function updateMatrix(data: SubmitData) {
 		if (data.update) await fetch('/api/redirect?endpoint=update');
 		clearInterval(uploadData.interval);
 	}
 
+	// Placing image over endpoint (by specifying position)
+	// Image is always max resolution! See resizing in `fileAsDataURL`.
 	async function placeImage(data: SubmitData) {
 		const fdata = new FormData();
 		fdata.append('x', data.x.toString());
@@ -40,12 +46,14 @@
 		await post(fdata, 'image');
 	}
 
+	// Send image data to endpoint
 	async function sendImage(url: string) {
 		const fdata = new FormData();
 		fdata.append('url', url);
 		await post(fdata, 'upload');
 	}
 
+	// Handle sending HTTP POST request with specified data
 	async function post(fdata: FormData, endpoint: string) {
 		// Append endpoint to formdata for redirection
 		fdata.append('endpoint', endpoint);
@@ -60,6 +68,7 @@
 		if (!mdata.success) alert(`Error while processing '${endpoint}'!`);
 	}
 
+	// Load and read file, encode as base64 data url
 	async function fileAsDataURL(data: SubmitData): Promise<string> {
 		return new Promise((resolve, reject) => {
 			const img = new Image();
@@ -75,8 +84,7 @@
 				context?.drawImage(img, 0, 0, canvas.width, canvas.height);
 
 				// Convert the canvas image to a Data URL
-				const dataURL = canvas.toDataURL();
+				resolve(canvas.toDataURL());
-				resolve(dataURL);
 			};
 			img.onerror = reject;
 
@@ -85,6 +93,7 @@
 		});
 	}
 
+	// Getting an image from input
 	function getImage(event: Event) {
 		uploadStarted = false;
 		// Revoke previous image url, if any
@@ -102,6 +111,7 @@
 		imageURL = URL.createObjectURL(file);
 	}
 
+	// Handling form submit event
 	function handleSubmit(event: SubmitEvent) {
 		// Get image data from submit
 		const form = event.target as HTMLFormElement;
@@ -131,6 +141,7 @@
 		uploadStarted = true;
 	}
 
+	// On client loaded
 	onMount(() => {
 		matrix = {
 			width: +PUBLIC_LED_WIDTH * +PUBLIC_LED_CHAIN,
@@ -208,7 +219,6 @@
 			name="image"
 			id="image"
 			accept="image/*"
-			required
 			on:change={getImage}
 		/>
 	</div>