Is fixed

Config settings

backend/psn_server.py

@@ -257,6 +257,8 @@ async def handle_add_tracker(request):
             return web.Response(text="Tracker already exists", status=400)
 
         trackers[tracker_id] = TrackerData(tracker_id, *START_POSITION_INTERNAL)
+        await update_all_clients(request.app)
+
         return web.Response(text="OK", status=200)
     except Exception as e:
         return web.Response(text=f"Error: {e}", status=400)
@@ -273,6 +275,8 @@ async def handler_delete_tracker(request):
             return web.Response(text="Tracker does not exist", status=400)
 
         del trackers[tracker_id]
+        await update_all_clients(request.app)
+
         return web.Response(text="OK", status=200)
     except Exception as e:
         return web.Response(text=f"Error: {e}", status=400)

frontend/src/components/Drag.svelte

@@ -76,7 +76,7 @@
   onpointermove={onPointerMove}
   style={`transform: translate(${vis_x}px, ${vis_y}px)`}
   class={`absolute flex h-24 w-24 touch-none select-none items-center justify-center rounded-full
-  ${selected === id ? "border-green-400 bg-green-400" : "border-red-400 bg-red-400"}`}
+  ${selected === id ? "border-green-400 bg-green-400 z-50" : "border-red-400 bg-red-400"}`}
 >
   Tracker {id}
 </div>

frontend/src/components/Settings.svelte

@@ -3,32 +3,34 @@
   import { Button } from "$lib/components/ui/button/index.js";
   import TrackerSetting from "./TrackerSetting.svelte";
 
-  const addTracker = async () => {
+  const addTracker = async (arg: number) => {
     const response = await fetch("/tracker", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        id: 4,
+        id: Number(arg),
       }),
     });
 
     console.log(response);
   };
 
-  const deleteTracker = async () => {
+  const deleteTracker = async (arg: number) => {
     const response = await fetch("/tracker", {
       method: "DELETE",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        id: 4,
+        id: Number(arg),
       }),
     });
     console.log(response);
   };
+
+  let id = $state(0);
 </script>
 
 <Drawer.Root>
@@ -41,8 +43,12 @@
       <Drawer.Description>This action cannot be undone.</Drawer.Description>
     </Drawer.Header>
     <div class="flex items-center justify-evenly">
-      <TrackerSetting action={addTracker} text="Add Tracker" />
+      <TrackerSetting bind:value={id} action={addTracker} text="Add Tracker" />
-      <TrackerSetting action={deleteTracker} text="Delete Tracker" />
+      <TrackerSetting
+        bind:value={id}
+        action={deleteTracker}
+        text="Delete Tracker"
+      />
     </div>
   </Drawer.Content>
 </Drawer.Root>

frontend/src/components/Slider.svelte

@@ -20,8 +20,10 @@
 
   let arena_state: "full_arena" | "scene_only" = $state("scene_only");
 
-  let tracker = trackers.find((ball) => {
+  let tracker = $state<TrackerData | undefined>(undefined);
-    ball.id === selected;
+
+  $effect(() => {
+    tracker = trackers.find((ball) => ball.id === selected);
   });
 
   const onchange = () => {
@@ -61,15 +63,18 @@
 
 <div class="slider-container ml-auto">
   <Modal action={buttonAction} />
-  <input
+  {#if tracker}
-    type="range"
+    <input
-    id="z"
+      type="range"
-    min="0"
+      id="z"
-    max="4"
+      min="0"
-    step="0.01"
+      max="4"
-    oninput={onchange}
+      step="0.01"
-  />
+      oninput={onchange}
-  <output for="z">{z_viz} m</output>
+      bind:value={tracker.z}
+    />
+    <output for="z">{z_viz} m</output>
+  {/if}
 </div>
 
 <style>

frontend/src/components/TrackerSetting.svelte

@@ -4,14 +4,15 @@
 
   type Props = {
     text: string;
-    action: () => void;
+    action: (arg: number) => void;
+    value: number;
   };
 
-  let { action, text }: Props = $props();
+  let { action, text, value = $bindable() }: Props = $props();
 </script>
 
 <div>
   <h2>{text}</h2>
-  <Input placeholder={"1"} type="tel" />
+  <Input placeholder={"1"} bind:value required />
-  <Button onclick={action}>Submit</Button>
+  <Button onclick={() => action(value)}>Submit</Button>
 </div>

frontend/src/components/ui/input/input.svelte

@@ -1,42 +1,43 @@
 <script lang="ts">
-	import type { HTMLInputAttributes } from "svelte/elements";
+  import type { HTMLInputAttributes } from "svelte/elements";
-	import type { InputEvents } from "./index.js";
+  import type { InputEvents } from "./index.js";
-	import { cn } from "$lib/utils.js";
+  import { cn } from "$lib/utils.js";
 
-	type $$Props = HTMLInputAttributes;
+  type $$Props = HTMLInputAttributes;
-	type $$Events = InputEvents;
+  type $$Events = InputEvents;
 
-	let className: $$Props["class"] = undefined;
+  let className: $$Props["class"] = undefined;
-	export let value: $$Props["value"] = undefined;
+  export let value: $$Props["value"] = undefined;
-	export { className as class };
+  export { className as class };
 
-	// Workaround for https://github.com/sveltejs/svelte/issues/9305
+  // Workaround for https://github.com/sveltejs/svelte/issues/9305
-	// Fixed in Svelte 5, but not backported to 4.x.
+  // Fixed in Svelte 5, but not backported to 4.x.
-	export let readonly: $$Props["readonly"] = undefined;
+  export let readonly: $$Props["readonly"] = undefined;
 </script>
 
 <input
-	class={cn(
+  class={cn(
-		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+    "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-		className
+    className,
-	)}
+  )}
-	bind:value
+  bind:value
-	{readonly}
+  {readonly}
-	on:blur
+  type="tel"
-	on:change
+  on:blur
-	on:click
+  on:change
-	on:focus
+  on:click
-	on:focusin
+  on:focus
-	on:focusout
+  on:focusin
-	on:keydown
+  on:focusout
-	on:keypress
+  on:keydown
-	on:keyup
+  on:keypress
-	on:mouseover
+  on:keyup
-	on:mouseenter
+  on:mouseover
-	on:mouseleave
+  on:mouseenter
-	on:mousemove
+  on:mouseleave
-	on:paste
+  on:mousemove
-	on:input
+  on:paste
-	on:wheel|passive
+  on:input
-	{...$$restProps}
+  on:wheel|passive
+  {...$$restProps}
 />