From 47993d66bc81983e5c3feffdcbb5e9169b9bf7a6 Mon Sep 17 00:00:00 2001
From: js0ny <contact@js0ny.net>
Date: Sat, 6 Dec 2025 05:14:51 +0000
Subject: [PATCH] feat(frontend): allow changing steps at frontend
 configuration

---
 drone-frontend/src/App.svelte                |  4 +++-
 drone-frontend/src/components/Sidebar.svelte | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/drone-frontend/src/App.svelte b/drone-frontend/src/App.svelte
index 2d458ce..cb62793 100644
--- a/drone-frontend/src/App.svelte
+++ b/drone-frontend/src/App.svelte
@@ -54,6 +54,7 @@
     let blackBoxBase = "http://localhost:3000";
     let dispatchBody = JSON.stringify(defaultDispatch, null, 2);
     let plannedPath = samplePathResponse;
+    let stepSeconds = STEP_SECONDS;
 
     let status = "System Ready. Waiting for dispatch payload.";
     let snapshotStatus = "";
@@ -102,7 +103,7 @@
     $: timeline = buildTimeline(plannedPath);
     $: totalSteps = Math.max(timeline.totalSteps, plannedPath?.totalMoves || 1, 1);
     $: tick = Math.min(tick, totalSteps - 1);
-    $: playbackSeconds = tick * STEP_SECONDS;
+    $: playbackSeconds = tick * stepSeconds;
     $: wallClock = computeWallClock(startTime, playbackSeconds);
     $: fetchSnapshotForTime(wallClock, true);
     $: positionsNow = snapshotToPositions(snapshot);
@@ -464,6 +465,7 @@
             bind:apiBase
             bind:blackBoxBase
             bind:startTime
+            bind:stepSeconds
             bind:dispatchBody
             {status}
             {loading}
diff --git a/drone-frontend/src/components/Sidebar.svelte b/drone-frontend/src/components/Sidebar.svelte
index 2787f21..15260fe 100644
--- a/drone-frontend/src/components/Sidebar.svelte
+++ b/drone-frontend/src/components/Sidebar.svelte
@@ -11,6 +11,7 @@
     export let blackBoxBase = "";
     export let startTime = "";
     export let dispatchBody = "";
+    export let stepSeconds = 1;
 
     let configOpen = false;
 
@@ -130,6 +131,21 @@
 
             {#if configOpen}
                 <div class="mt-3 space-y-3">
+                    <div>
+                        <label
+                            for="stepSeconds"
+                            class="block text-xs text-slate-600 dark:text-slate-400 mb-1"
+                            >Seconds per Step</label
+                        >
+                        <input
+                            id="stepSeconds"
+                            type="number"
+                            min="1"
+                            step="1"
+                            bind:value={stepSeconds}
+                            class="w-full bg-white/50 dark:bg-black/30 border border-slate-300 dark:border-slate-700 text-slate-800 dark:text-slate-100 p-2 rounded-lg font-mono text-xs transition-all focus:outline-none focus:border-sky-500 focus:bg-white dark:focus:bg-black/50 focus:ring-2 focus:ring-sky-500/20"
+                        />
+                    </div>
                     <div>
                         <label
                             for="api"
@@ -173,6 +189,7 @@
                             class="w-full bg-white/50 dark:bg-black/30 border border-slate-300 dark:border-slate-700 text-slate-800 dark:text-slate-100 p-2 rounded-lg font-mono text-xs transition-all focus:outline-none focus:border-sky-500 focus:bg-white dark:focus:bg-black/50 focus:ring-2 focus:ring-sky-500/20"
                         />
                     </div>
+
                 </div>
             {/if}
         </div>