📏 Formats app code

app/src/components/settings/Calibration.svelte

@@ -2,43 +2,43 @@
 	import { onMount } from 'svelte';
 	import { jointNames } from '../../lib/store';
 
-    type Servo = {
-        id: number;
-        name: string;
-        minPWM: number;
-        maxPWM: number;
-        pwmFor180: number;
-    };
+	type Servo = {
+		id: number;
+		name: string;
+		minPWM: number;
+		maxPWM: number;
+		pwmFor180: number;
+	};
 
 	let servos: any[] = [];
 
-    onMount(() => {
-        jointNames.subscribe(data => {
-            servos = data.map((name:string, i:number) => {
-                return {
-                    id: i,
-                    name,
-                    minPWM: 0,
-                    maxPWM: 0,
-                    pwmFor180: 0
-                };
-            });
-        })
-    })
-
+	onMount(() => {
+		jointNames.subscribe((data) => {
+			servos = data.map((name: string, i: number) => {
+				return {
+					id: i,
+					name,
+					minPWM: 0,
+					maxPWM: 0,
+					pwmFor180: 0
+				};
+			});
+		});
+	});
 
 	let selectedServo: number | null = null;
 
-    function updateServoValue(index: number, field: keyof Servo, value: number): void {
-        servos[index] = { ...servos[index], [field]: value };
-    }
+	function updateServoValue(index: number, field: keyof Servo, value: number): void {
+		servos[index] = { ...servos[index], [field]: value };
+	}
 
-    const formatServo = (servo:Servo) => {
-        const string = servo.name
-        const name = string.charAt(0).toUpperCase() + string.split('_').join(' ').slice(1);
-        return `${servo.id} ${name}`
-    }
+	const formatServo = (servo: Servo) => {
+		const string = servo.name;
+		const name = string.charAt(0).toUpperCase() + string.split('_').join(' ').slice(1);
+		return `${servo.id} ${name}`;
+	};
 </script>
+
 <div>
 	<div class="servo-selector">
 		<label for="servo-select">Select Servo:</label>
@@ -49,23 +49,36 @@
 		</select>
 	</div>
 
-{#if selectedServo !== null}
-  <div class="mt-5">
-    <h2>Servo {formatServo(servos[selectedServo])} Calibration</h2>
-    <label for="minPWM">Min PWM:</label>
-    <input type="number" id="minPWM" class="bg-zinc-800"
-           value={servos[selectedServo].minPWM}
-           on:blur={(event) => updateServoValue(selectedServo, 'minPWM', Number(event.target.value))} />
+	{#if selectedServo !== null}
+		<div class="mt-5">
+			<h2>Servo {formatServo(servos[selectedServo])} Calibration</h2>
+			<label for="minPWM">Min PWM:</label>
+			<input
+				type="number"
+				id="minPWM"
+				class="bg-zinc-800"
+				value={servos[selectedServo].minPWM}
+				on:blur={(event) => updateServoValue(selectedServo, 'minPWM', Number(event.target.value))}
+			/>
 
-    <label for="maxPWM">Max PWM:</label>
-    <input type="number" id="maxPWM" class="bg-zinc-800"
-           value={servos[selectedServo].maxPWM}
-           on:blur={(event) => updateServoValue(selectedServo, 'maxPWM', Number(event.target.value))} />
+			<label for="maxPWM">Max PWM:</label>
+			<input
+				type="number"
+				id="maxPWM"
+				class="bg-zinc-800"
+				value={servos[selectedServo].maxPWM}
+				on:blur={(event) => updateServoValue(selectedServo, 'maxPWM', Number(event.target.value))}
+			/>
 
-    <label for="pwmFor180">PWM for 180°:</label>
-    <input type="number" id="pwmFor180" class="bg-zinc-800"
-           value={servos[selectedServo].pwmFor180}
-           on:blur={(event) => updateServoValue(selectedServo, 'pwmFor180', Number(event.target.value))} />
-  </div>
-{/if}
+			<label for="pwmFor180">PWM for 180°:</label>
+			<input
+				type="number"
+				id="pwmFor180"
+				class="bg-zinc-800"
+				value={servos[selectedServo].pwmFor180}
+				on:blur={(event) =>
+					updateServoValue(selectedServo, 'pwmFor180', Number(event.target.value))}
+			/>
+		</div>
+	{/if}
 </div>

app/src/components/settings/Configuration.svelte

@@ -1,26 +1,25 @@
 <script lang="ts">
-    import socketService from "$lib/services/socket-service";
-    import { onMount } from 'svelte'
-    
-    let isConnected = socketService.isConnected
-    let settings = socketService.settings
+	import socketService from '$lib/services/socket-service';
+	import { onMount } from 'svelte';
 
-    onMount(() => {
-        if ($isConnected) {
-            const message = JSON.stringify({type: 'system/settings'})
-            socketService.send(message)
-        }
-    })
+	let isConnected = socketService.isConnected;
+	let settings = socketService.settings;
 
+	onMount(() => {
+		if ($isConnected) {
+			const message = JSON.stringify({ type: 'system/settings' });
+			socketService.send(message);
+		}
+	});
 </script>
 
 <div class="w-full h-full">
-    <div>
-        {#each Object.entries($settings) as entry}
-           <div class="flex gap-8">
-                <div class="w-32">{entry[0]}:</div>
-                <div>{entry[1]}</div>
-            </div>
-        {/each}
-    </div>
-</div>
+	<div>
+		{#each Object.entries($settings) as entry}
+			<div class="flex gap-8">
+				<div class="w-32">{entry[0]}:</div>
+				<div>{entry[1]}</div>
+			</div>
+		{/each}
+	</div>
+</div>

app/src/components/settings/Info.svelte

@@ -1,31 +1,31 @@
 <script lang="ts">
-    import { onMount } from 'svelte'
-	import { humanFileSize } from "$lib/utilities";
+	import { onMount } from 'svelte';
+	import { humanFileSize } from '$lib/utilities';
 	import socketService from '$lib/services/socket-service';
 
-    let isConnected = socketService.isConnected
-    let settings = socketService.settings
-    let systemInfo = socketService.systemInfo
-    
-    onMount(() => {
-        if ($isConnected) {
-            const message = JSON.stringify({type: 'system/info'})
-            socketService.send(message)
-        }
-    })
+	let isConnected = socketService.isConnected;
+	let settings = socketService.settings;
+	let systemInfo = socketService.systemInfo;
 
+	onMount(() => {
+		if ($isConnected) {
+			const message = JSON.stringify({ type: 'system/info' });
+			socketService.send(message);
+		}
+	});
 </script>
+
 <div class="w-full h-full">
-    <div class="w-1/3">
-        {#each Object.entries($systemInfo ?? {}) as entry}
-           <div class="flex gap-8">
-            <div class="w-32">{entry[0]}:</div>
-            {#if entry[0].includes("Size") || entry[0].includes("Free") || entry[0].includes("Min")}
-                <div>{humanFileSize(entry[1])}</div>
-            {:else}
-                <div>{entry[1]}</div>
-            {/if}
-        </div>
-        {/each}
-    </div>
-</div>
+	<div class="w-1/3">
+		{#each Object.entries($systemInfo ?? {}) as entry}
+			<div class="flex gap-8">
+				<div class="w-32">{entry[0]}:</div>
+				{#if entry[0].includes('Size') || entry[0].includes('Free') || entry[0].includes('Min')}
+					<div>{humanFileSize(entry[1])}</div>
+				{:else}
+					<div>{entry[1]}</div>
+				{/if}
+			</div>
+		{/each}
+	</div>
+</div>

app/src/components/settings/Log.svelte

@@ -1,21 +1,20 @@
 <script lang="ts">
-	import socketService from "$lib/services/socket-service";
-    import { onMount } from 'svelte'
+	import socketService from '$lib/services/socket-service';
+	import { onMount } from 'svelte';
 
-    let isConnected = socketService.isConnected
-    let log = socketService.log
-    
-    onMount(() => {
-        if ($isConnected) {
-            const message = JSON.stringify({type: 'system/logs'})
-            socketService.send(message)
-        }
-    })
+	let isConnected = socketService.isConnected;
+	let log = socketService.log;
 
+	onMount(() => {
+		if ($isConnected) {
+			const message = JSON.stringify({ type: 'system/logs' });
+			socketService.send(message);
+		}
+	});
 </script>
 
 <div class="w-full h-full">
-    {#each $log as entry}
-        <div>{entry}</div>
-    {/each}
-</div>
+	{#each $log as entry}
+		<div>{entry}</div>
+	{/each}
+</div>