Add composable field monitor

ui/src/app.css

@@ -47,6 +47,12 @@ html.dark {
 	}
 }
 
+.grid-rows-fieldmonitor {
+	grid-template-rows: max-content 1fr 1fr 1fr 1fr 1fr 1fr;
+}
+
+@source inline("col-span-{2..10}");
+
 .fieldmonitor-square-height {
 	height: calc((100vh - 8rem) / 6);
 }

ui/src/lib/field-monitor/BaseMonitorItem.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+
+	interface BaseMonitorItemProps {
+		extra_outer_classes?: string;
+		children: Snippet;
+	}
+
+	let { extra_outer_classes, children }: BaseMonitorItemProps = $props();
+</script>
+
+<div class="flex items-center justify-center h-fill {extra_outer_classes}">
+	<p class="min-m-1 flex items-center justify-center text-center text-[min(8vh,40pt)]">
+		{@render children()}
+	</p>
+</div>

ui/src/lib/field-monitor/MonitorHeader.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	let matchNumber = 1;
+</script>
+
+<div class="flex text-lg md:text-2xl font-semibold">
+	<div class="bg-neutral-300 dark:bg-neutral-700 px-2">M: {matchNumber}</div>
+	<div class="flex-1 bg-green-600 px-2 text-center">Match Status</div>
+	<div class="bg-neutral-300 dark:bg-neutral-700 px-2">On Time</div>
+</div>

ui/src/lib/field-monitor/MonitorRow.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { FieldMonitorData } from '../../fms/fms-signalr';
+	import BatteryWidget from '$lib/field-monitor/battery/BatteryWidget.svelte';
+	import RioWidget from '$lib/field-monitor/rio/RioWidget.svelte';
+	import { WidgetID, type FieldMonitorConfig } from '$lib/field-monitor/widget';
+	import BaseMonitorItem from './BaseMonitorItem.svelte';
+	import RowBlock from './RowBlock.svelte';
+	import { AllianceType } from '../../fms/fms-api';
+	import { styles } from '$lib/styles';
+
+	let { settings, data }: { settings: FieldMonitorConfig; data: FieldMonitorData } = $props();
+	let num_widgets = settings.widgets.length;
+</script>
+
+<BaseMonitorItem
+	extra_outer_classes={data.alliance == AllianceType.Blue
+		? styles.alliance.blue.primary
+		: styles.alliance.red.primary}>{data.teamNumber}</BaseMonitorItem
+>
+{#if data.isBypassed}
+	<RowBlock {num_widgets}>Bypassed</RowBlock>
+{:else}
+	{#each settings.widgets as widget, index (index)}
+		{#if widget.id == WidgetID.Battery}
+			<BatteryWidget settings={widget.settings} {data} />
+		{:else if widget.id == WidgetID.Rio}
+			<RioWidget settings={widget.settings} {data} />
+		{/if}
+	{/each}
+{/if}

ui/src/lib/field-monitor/RowBlock.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+
+	interface BaseMonitorItemProps {
+		extra_outer_classes?: string;
+		num_widgets: number;
+		children: Snippet;
+	}
+
+	let { extra_outer_classes, num_widgets, children }: BaseMonitorItemProps = $props();
+</script>
+
+<div
+	class="{`col-span-${num_widgets}`} flex items-center justify-center h-fill {extra_outer_classes}"
+>
+	<p class="min-m-1 flex items-center justify-center text-center text-[min(8vh,40pt)]">
+		{@render children()}
+	</p>
+</div>

ui/src/lib/field-monitor/battery/BatteryWidget.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { FieldMonitorData } from '../../../fms/fms-signalr';
+	import BaseMonitorItem from '../BaseMonitorItem.svelte';
+	import type { BatteryWidgetSettings } from './settings';
+
+	let { data, settings }: { settings: BatteryWidgetSettings; data: FieldMonitorData } = $props();
+</script>
+
+<BaseMonitorItem>{data.battery}</BaseMonitorItem>

ui/src/lib/field-monitor/battery/settings.ts

@@ -0,0 +1 @@
+export type BatteryWidgetSettings = { showGraph: boolean };

ui/src/lib/field-monitor/rio/RioWidget.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { FieldMonitorData } from '../../../fms/fms-signalr';
+	import BaseMonitorItem from '../BaseMonitorItem.svelte';
+	import type { RioWidgetSettings } from './settings';
+
+	let { settings, data }: { settings: RioWidgetSettings; data: FieldMonitorData } = $props();
+</script>
+
+<BaseMonitorItem>{data.rioLink}</BaseMonitorItem>

ui/src/lib/field-monitor/rio/settings.ts

@@ -0,0 +1 @@
+export type RioWidgetSettings = {};

ui/src/lib/field-monitor/widget.ts

@@ -0,0 +1,22 @@
+import type { BatteryWidgetSettings } from './battery/settings';
+import type { RioWidgetSettings } from './rio/settings';
+
+export enum WidgetID {
+	Battery = 'Battery',
+	Rio = 'Rio'
+}
+
+export type WidgetDescription =
+	| { id: WidgetID.Battery; settings: BatteryWidgetSettings }
+	| { id: WidgetID.Rio; settings: RioWidgetSettings };
+
+export interface FieldMonitorConfig {
+	widgets: WidgetDescription[];
+}
+
+export const field_monitor_config: FieldMonitorConfig = {
+	widgets: [
+		{ id: WidgetID.Battery, settings: { showGraph: false } },
+		{ id: WidgetID.Rio, settings: {} }
+	]
+};

ui/src/routes/+layout.svelte

@@ -57,7 +57,7 @@
 
 <SettingsModal bind:settingsOpen bind:installPrompt />
 
-<div>
+<div class="h-full">
 	<!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
 	<div class="relative z-10 lg:hidden" role="dialog" aria-modal="true">
 		<!-- Off-canvas menu backdrop, show/hide based on off-canvas menu state. -->
@@ -233,8 +233,8 @@
 		</button>
 	</div>
 
-	<main class="py-2 lg:py-10 lg:pl-72">
-		<div class="px-2 sm:px-6 lg:px-8">
+	<main class="py-2 lg:py-10 lg:pl-72 h-full">
+		<div class="px-2 sm:px-6 lg:px-8 h-full">
 			{@render children()}
 		</div>
 	</main>

ui/src/routes/fieldMonitor/+page.svelte

@@ -9,7 +9,7 @@
 		Red1Default,
 		Red2Default,
 		Red3Default
-	} from '../defaults';
+	} from '$lib/defaults';
 	import { settingsStore } from '$lib/settings-store';
 
 	let blue1: FieldMonitorData = Blue1Default;

ui/src/routes/fieldMonitorTest/+page.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Blue1Default } from '$lib/defaults';
+	import MonitorHeader from '$lib/field-monitor/MonitorHeader.svelte';
+	import MonitorRow from '$lib/field-monitor/MonitorRow.svelte';
+	import { field_monitor_config } from '$lib/field-monitor/widget';
+</script>
+
+<MonitorHeader />
+<div class="grid h-full w-full content-stretch grid-rows-fieldmonitor">
+	<div class="row-1">Team Number</div>
+	{#each field_monitor_config.widgets as widget, index (index)}
+		<div class="row-1">{widget.id}</div>
+	{/each}
+
+	{#each { length: 6 }}
+		<MonitorRow settings={field_monitor_config} data={Blue1Default} />
+	{/each}
+</div>