prepare sending data to server

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { redirectAPI } from '$lib/client/httpRequests';
 	import { onMount } from 'svelte';
 
 	// Data structure to keep track of clock
@@ -37,6 +38,7 @@
 	}
 
 	//.System variables
+	let clockEnabled: boolean = false;
 	const clock: Clock = {
 		body: 48,
 		hands: {
@@ -87,6 +89,14 @@
 				y: calcPos('hour', 'sin')
 			}
 		};
+		// If enabled, update clock display
+		if (clockEnabled) await displayMatrixClock();
+	}
+
+	// Handle displaying clock on matrix
+	async function displayMatrixClock() {
+		// Display clock body as circle
+		await redirectAPI();
 	}
 
 	onMount(() => {
@@ -94,6 +104,18 @@
 	});
 </script>
 
+<!-- Title -->
+<h1 class="text-4xl font-bold m-5 text-center">Matrix Clock Display</h1>
+<!-- Update toggle form -->
+<form class="m-1 grid grid-cols-2" on:submit|preventDefault={() => (clockEnabled = !clockEnabled)}>
+	<label class="border-2 border-black border-r-0 pl-1" for="toggle">Toggle clock usage:</label>
+	<input
+		class="border-2 border-black cursor-pointer hover:bg-gray-200"
+		id="toggle"
+		type="submit"
+		value="Submit"
+	/>
+</form>
 <!-- Virtual clock display using SVG -->
 <div class="bg-black">
 	<svg class="text-white" viewBox="0 0 100 100">