shared post redirect method

Webserver/src/lib/client/httpRequests.ts

@@ -0,0 +1,23 @@
+import type { APIResponse } from '$lib/interfaces';
+
+export async function redirectAPI({ form, fdata }: { form?: HTMLFormElement; fdata?: FormData }) {
+	if (!fdata && form) fdata = new FormData(form);
+	else if (!fdata) throw new Error('No formdata provided!');
+
+	// Get endpoint, prefer form, then formdata or empty
+	const endpoint = (form?.dataset.endpoint ?? fdata.get('endpoint')) ?? '';
+	// Append endpoint to formdata
+	if (!fdata?.has('endpoint'))
+		fdata.append('endpoint', 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 '${endpoint}'!`);
+}

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

@@ -8,6 +8,7 @@
 	import { rgbToHex, type Color, getContrastColor } from '$lib/client/color';
 	import { detectGamepad, gamepadButtonPress } from '$lib/client/gamepad';
 	import { initializeMatrix, type Matrix } from '$lib/client/matrix';
+	import { redirectAPI } from '$lib/client/httpRequests';
 	import { toRadians } from '$lib/client/miscellaneous';
 	import type { APIResponse } from '$lib/interfaces';
 	import { onMount } from 'svelte';
@@ -56,17 +57,8 @@
 			// 	break;
 		}
 
-		// Append endpoint to formdata for redirection
+		// Redirect data over local endpoint
-		fdata.append('endpoint', form.dataset.endpoint ?? '');
+		await redirectAPI({ form, fdata });
-		// 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) {}
@@ -253,7 +245,7 @@
 <!-- Title -->
 <h1 class="text-4xl font-bold m-5 text-center">Matrix Control Panel</h1>
 <!-- Forms -->
-<div class="grid grid-rows-7 p-1">
+<div class="grid grid-rows-7 p-1 pt-0">
 	<!-- 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>

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

@@ -5,6 +5,7 @@
 		PUBLIC_LED_CHAIN,
 		PUBLIC_LED_PARALLEL
 	} from '$env/static/public';
+	import { redirectAPI } from '$lib/client/httpRequests';
 	import type { Matrix } from '$lib/client/matrix';
 	import type { APIResponse } from '$lib/interfaces';
 	import { onMount } from 'svelte';
@@ -66,15 +67,7 @@
 	async function post(fdata: FormData, endpoint: string) {
 		// Append endpoint to formdata for redirection
 		fdata.append('endpoint', endpoint);
-		// Send request to be redirected to given endpoint
+		redirectAPI({ fdata });
-		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 '${endpoint}'!`);
 	}
 
 	// Load and read file, encode as base64 data url
@@ -192,6 +185,7 @@
 	});
 </script>
 
+<h1 class="text-4xl font-bold m-5 text-center">Matrix Image Upload</h1>
 <form class="grid grid-rows-5 m-1" on:submit|preventDefault={handleSubmit}>
 	<div class="grid grid-cols-2">
 		<label class="border-2 border-black border-r-0 border-b-0 pl-1" for="x">Set X coordinate:</label