blob: 3f92e3b2c01df8eaf8bf31b1158e1d0d836fde83 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<script lang="ts">
import type { InvokeMessage, SurfaceSpec } from "@dispatch/ui-contract";
import { groupRenderFields, planSurface } from "../logic/plan";
import Button from "./Button.svelte";
import MessageQueueList from "./MessageQueueList.svelte";
import Number from "./Number.svelte";
import Progress from "./Progress.svelte";
import Selector from "./Selector.svelte";
import StatTable from "./StatTable.svelte";
import SurfaceTable from "./SurfaceTable.svelte";
import TodoList from "./TodoList.svelte";
import Toggle from "./Toggle.svelte";
let {
spec,
onInvoke,
}: { spec: SurfaceSpec; onInvoke: (msg: InvokeMessage) => void } = $props();
const plan = $derived(planSurface(spec));
// Consecutive stats render together as one aligned table; everything else is
// a standalone widget. Grouping keys on field KIND only — never the surface id.
const groups = $derived(groupRenderFields(plan.fields));
</script>
<article>
<h2>{spec.title}</h2>
{#each groups as group, i (i)}
{#if group.type === "stats"}
<StatTable stats={group.stats} />
{:else if group.field.kind === "toggle"}
<Toggle field={group.field} surfaceId={spec.id} {onInvoke} />
{:else if group.field.kind === "progress"}
<Progress field={group.field} />
{:else if group.field.kind === "selector"}
<Selector field={group.field} surfaceId={spec.id} {onInvoke} />
{:else if group.field.kind === "number"}
<Number field={group.field} surfaceId={spec.id} {onInvoke} />
{:else if group.field.kind === "button"}
<Button field={group.field} surfaceId={spec.id} {onInvoke} />
{:else if group.field.kind === "custom"}
<!-- Dispatch on rendererId (a renderer KIND, never a surface id);
unknown ids gracefully render nothing. -->
{#if group.field.rendererId === "table"}
<SurfaceTable payload={group.field.payload} />
{:else if group.field.rendererId === "message-queue"}
<MessageQueueList payload={group.field.payload} />
{:else if group.field.rendererId === "todo"}
<TodoList payload={group.field.payload} />
{/if}
{/if}
{/each}
</article>
|
