feat(frontend): allow changing steps at frontend configuration
This commit is contained in:
parent
0ce7faaa07
commit
47993d66bc
2 changed files with 20 additions and 1 deletions
|
|
@ -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}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue