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 blackBoxBase = "http://localhost:3000";
let dispatchBody = JSON.stringify(defaultDispatch, null, 2); let dispatchBody = JSON.stringify(defaultDispatch, null, 2);
let plannedPath = samplePathResponse; let plannedPath = samplePathResponse;
let stepSeconds = STEP_SECONDS;
let status = "System Ready. Waiting for dispatch payload."; let status = "System Ready. Waiting for dispatch payload.";
let snapshotStatus = ""; let snapshotStatus = "";
@ -102,7 +103,7 @@
$: timeline = buildTimeline(plannedPath); $: timeline = buildTimeline(plannedPath);
$: totalSteps = Math.max(timeline.totalSteps, plannedPath?.totalMoves || 1, 1); $: totalSteps = Math.max(timeline.totalSteps, plannedPath?.totalMoves || 1, 1);
$: tick = Math.min(tick, totalSteps - 1); $: tick = Math.min(tick, totalSteps - 1);
$: playbackSeconds = tick * STEP_SECONDS; $: playbackSeconds = tick * stepSeconds;
$: wallClock = computeWallClock(startTime, playbackSeconds); $: wallClock = computeWallClock(startTime, playbackSeconds);
$: fetchSnapshotForTime(wallClock, true); $: fetchSnapshotForTime(wallClock, true);
$: positionsNow = snapshotToPositions(snapshot); $: positionsNow = snapshotToPositions(snapshot);
@ -464,6 +465,7 @@
bind:apiBase bind:apiBase
bind:blackBoxBase bind:blackBoxBase
bind:startTime bind:startTime
bind:stepSeconds
bind:dispatchBody bind:dispatchBody
{status} {status}
{loading} {loading}

View file

@ -11,6 +11,7 @@
export let blackBoxBase = ""; export let blackBoxBase = "";
export let startTime = ""; export let startTime = "";
export let dispatchBody = ""; export let dispatchBody = "";
export let stepSeconds = 1;
let configOpen = false; let configOpen = false;
@ -130,6 +131,21 @@
{#if configOpen} {#if configOpen}
<div class="mt-3 space-y-3"> <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> <div>
<label <label
for="api" 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" 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>
</div> </div>
{/if} {/if}
</div> </div>