feat(frontend): allow changing steps at frontend configuration

This commit is contained in:
js0ny 2025-12-06 05:14:51 +00:00
parent 0ce7faaa07
commit 47993d66bc
2 changed files with 20 additions and 1 deletions

View file

@ -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}

View file

@ -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>