🏮 Adds servo config table

app/src/routes/peripherals/servo/servos.svelte

@@ -1,58 +1,69 @@
 <script lang="ts">
-	import SettingsCard from '$lib/components/SettingsCard.svelte';
-	import type { ServoConfiguration, Servo } from '$lib/types/models';
-	import ServoController from './servo.svelte';
-	import Spinner from '$lib/components/Spinner.svelte';
+    import SettingsCard from '$lib/components/SettingsCard.svelte';
+    import type { ServoConfiguration, Servo } from '$lib/types/models';
+    import Spinner from '$lib/components/Spinner.svelte';
 
-	import { socket } from '$lib/stores';
-	import { onDestroy, onMount } from 'svelte';
-	import { throttler as Throttler } from '$lib/utilities';
-	import { MotorOutline } from '$lib/components/icons';
+    import { socket } from '$lib/stores';
+    import { onDestroy, onMount } from 'svelte';
+    import { throttler as Throttler } from '$lib/utilities';
+    import { MotorOutline } from '$lib/components/icons';
 
-	let isLoading = false;
+    let isLoading = false;
 
-    let active = false
+    let active = false;
 
-    let servoId = 0
+    let servoId = 0;
 
-    const throttler = new Throttler()
+    const throttler = new Throttler();
 
-    const sweep = (event:any) => {
+    const sweep = (event: any) => {
         let channel = event.detail.channel;
-        socket.sendEvent('servoConfiguration', {servos:[{channel, sweep: true}]});
+        socket.sendEvent('servoConfiguration', { servos: [{ channel, sweep: true }] });
     };
 
-    const activateServo = (event:any) => {
-        socket.sendEvent('servoState', {'active':1});
+    const activateServo = (event: any) => {
+        socket.sendEvent('servoState', { active: 1 });
     };
 
-    const deactivateServo = (event:any) => {
-        socket.sendEvent('servoState', {'active':0});
+    const deactivateServo = (event: any) => {
+        socket.sendEvent('servoState', { active: 0 });
     };
 
     let pwm = 306;
 
     const updatePWM = () => {
         throttler.throttle(() => {
-            socket.sendEvent('servoPWM', {servo_id:servoId, pwm});
-        }, 10)
-    }
+            socket.sendEvent('servoPWM', { servo_id: servoId, pwm });
+        }, 10);
+    };
 </script>
 
 <SettingsCard collapsible={false}>
-	<MotorOutline slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
-	<span slot="title">Servo</span>
-    <input type="range" min="200" max="400" bind:value={pwm} on:input={updatePWM} class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
+    <MotorOutline slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+    <span slot="title">Servo</span>
+    <input
+        type="range"
+        min="200"
+        max="400"
+        bind:value={pwm}
+        on:input={updatePWM}
+        class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+    />
 
-	{#if isLoading}
-		<Spinner />
-	{:else}
-		<div class="flex flex-col">
-			<h2 class="text-lg">General servo configuration</h2>
+    {#if isLoading}
+        <Spinner />
+    {:else}
+        <div class="flex flex-col">
+            <h2 class="text-lg">General servo configuration</h2>
             <span class="flex items-center gap-2">
                 <label for="servoId">Servo active{servoId}</label>
-                <input type="checkbox" class="toggle" bind:checked={active} on:change={active ? deactivateServo : activateServo}>
+                <input
+                    type="checkbox"
+                    class="toggle"
+                    bind:checked={active}
+                    on:change={active ? deactivateServo : activateServo}
+                />
             </span>
         </div>
-	{/if}
+    {/if}
 </SettingsCard>