🏮 Adds servo config table

app/src/routes/peripherals/servo/+page.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-	import Servos from './servos.svelte';
+    import Servos from './servos.svelte';
+    import ServoTable from './ServoTable.svelte';
 </script>
 
 <div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
-	<Servos />
+    <Servos />
+    <ServoTable />
 </div>

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

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { api } from '$lib/api';
+    import { onMount } from 'svelte';
+    export let data = {
+        servos: []
+    };
+
+    const updateValue = (event, index, key) => {
+        data.servos[index][key] = event.target.innerText;
+    };
+
+    const syncConfig = async () => {
+        await api.post('/api/servo/config', data);
+    };
+
+    onMount(async () => {
+        const result = await api.get('/api/servo/config');
+        if (result.isOk()) {
+            data = result.inner;
+        }
+    });
+</script>
+
+<div class="overflow-x-auto">
+    <table class="table table-xs">
+        <thead>
+            <tr>
+                <th>Center PWM</th>
+                <th>Center Angle</th>
+                <th>Direction</th>
+                <th>Conversion</th>
+            </tr>
+        </thead>
+        <tbody>
+            {#each data.servos as servo, index}
+                <tr>
+                    <td
+                        contenteditable="true"
+                        on:blur={syncConfig}
+                        on:input={event => updateValue(event, index, 'center_pwm')}
+                    >
+                        {servo.center_pwm}
+                    </td>
+                    <td
+                        contenteditable="true"
+                        on:blur={syncConfig}
+                        on:input={event => updateValue(event, index, 'center_angle')}
+                    >
+                        {servo.center_angle}
+                    </td>
+                    <td
+                        contenteditable="true"
+                        on:blur={syncConfig}
+                        on:input={event => updateValue(event, index, 'direction')}
+                    >
+                        {servo.direction}
+                    </td>
+                    <td
+                        contenteditable="true"
+                        on:blur={syncConfig}
+                        on:input={event => updateValue(event, index, 'conversion')}
+                    >
+                        {servo.conversion}
+                    </td>
+                </tr>
+            {/each}
+        </tbody>
+    </table>
+</div>

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

@@ -1,30 +0,0 @@
-<script lang="ts">
-    import type { Servo } from "$lib/types/models";
-	import { createEventDispatcher } from "svelte";
-    export let servo: Servo;
-
-    const dispatch = createEventDispatcher();
-
-    const sweep = () => {
-        dispatch('sweep', {channel: servo.channel});
-    };
-</script>
-
-<div>
-    <h2 class="text-lg">{ servo.name }</h2>
-    <div class="flex gap-2 items-center">
-        Is inverted <input type="checkbox" bind:checked={servo.inverted} class="toggle"/>
-    </div>
-    <div>
-        Middle position <input type="number" bind:value={servo.center_angle} class="input input-bordered input-sm max-w-xs"/>
-    </div>
-
-    <div class="relative mb-6">
-        <label for="labels-range-input" class="sr-only">Labels range</label>
-        <input id="labels-range-input" type="range" bind:value={servo.angle} min="0" max="180" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
-        <span class="text-sm text-gray-500 dark:text-gray-400 absolute start-0 -bottom-6">0</span>
-        <span class="text-sm text-gray-500 dark:text-gray-400 absolute start-1/2 -translate-x-1/2 rtl:translate-x-1/2 -bottom-6">90</span>
-        <span class="text-sm text-gray-500 dark:text-gray-400 absolute end-0 -bottom-6">180</span>
-    </div>
-    <button class="btn btn-neutral btn-sm" on:click={sweep}>Sweep range</button>
-</div>

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>