From 10fbf50d011ab2a8da66b0d4b6c70fa5c79c597c Mon Sep 17 00:00:00 2001
From: Devyn Keeney <me@devyntk.me>
Date: Tue, 5 Aug 2025 20:03:49 -0500
Subject: [PATCH 1/2] Create types for composable field monitor widgets

---
 .../field-monitor/MonitorItem.svelte           |  3 +++
 .../field-monitor/battery/BatteryWidget.svelte |  8 ++++++++
 ui/src/lib/field-monitor/battery/settings.ts   |  1 +
 ui/src/lib/field-monitor/rio/RioWidget.svelte  |  8 ++++++++
 ui/src/lib/field-monitor/rio/settings.ts       |  1 +
 ui/src/lib/field-monitor/widget.ts             | 18 ++++++++++++++++++
 ui/src/routes/fieldMonitorTest/+page.svelte    | 17 +++++++++++++++++
 7 files changed, 56 insertions(+)
 create mode 100644 ui/src/lib/components/field-monitor/MonitorItem.svelte
 create mode 100644 ui/src/lib/field-monitor/battery/BatteryWidget.svelte
 create mode 100644 ui/src/lib/field-monitor/battery/settings.ts
 create mode 100644 ui/src/lib/field-monitor/rio/RioWidget.svelte
 create mode 100644 ui/src/lib/field-monitor/rio/settings.ts
 create mode 100644 ui/src/lib/field-monitor/widget.ts
 create mode 100644 ui/src/routes/fieldMonitorTest/+page.svelte

diff --git a/ui/src/lib/components/field-monitor/MonitorItem.svelte b/ui/src/lib/components/field-monitor/MonitorItem.svelte
new file mode 100644
index 0000000..f03c796
--- /dev/null
+++ b/ui/src/lib/components/field-monitor/MonitorItem.svelte
@@ -0,0 +1,3 @@
+<script lang="ts">
+</script>
+
diff --git a/ui/src/lib/field-monitor/battery/BatteryWidget.svelte b/ui/src/lib/field-monitor/battery/BatteryWidget.svelte
new file mode 100644
index 0000000..48f98c0
--- /dev/null
+++ b/ui/src/lib/field-monitor/battery/BatteryWidget.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { FieldMonitorData } from "../../../fms/fms-signalr";
+	import type { BatteryWidgetSettings } from "./settings";
+
+    let props: {settings: BatteryWidgetSettings, data: FieldMonitorData} = $props();
+</script>
+
+<div>Battery: {JSON.stringify(props)}</div>
diff --git a/ui/src/lib/field-monitor/battery/settings.ts b/ui/src/lib/field-monitor/battery/settings.ts
new file mode 100644
index 0000000..069270b
--- /dev/null
+++ b/ui/src/lib/field-monitor/battery/settings.ts
@@ -0,0 +1 @@
+export type BatteryWidgetSettings = {showGraph: boolean};
diff --git a/ui/src/lib/field-monitor/rio/RioWidget.svelte b/ui/src/lib/field-monitor/rio/RioWidget.svelte
new file mode 100644
index 0000000..8599352
--- /dev/null
+++ b/ui/src/lib/field-monitor/rio/RioWidget.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { FieldMonitorData } from "../../../fms/fms-signalr";
+	import type { RioWidgetSettings } from "./settings";
+
+    let props: {settings: RioWidgetSettings, data: FieldMonitorData} = $props();
+</script>
+
+<div>Rio: {JSON.stringify(props)}</div>
diff --git a/ui/src/lib/field-monitor/rio/settings.ts b/ui/src/lib/field-monitor/rio/settings.ts
new file mode 100644
index 0000000..d120b35
--- /dev/null
+++ b/ui/src/lib/field-monitor/rio/settings.ts
@@ -0,0 +1 @@
+export type RioWidgetSettings = {};
diff --git a/ui/src/lib/field-monitor/widget.ts b/ui/src/lib/field-monitor/widget.ts
new file mode 100644
index 0000000..096426b
--- /dev/null
+++ b/ui/src/lib/field-monitor/widget.ts
@@ -0,0 +1,18 @@
+import type { BatteryWidgetSettings } from './battery/settings';
+import type { RioWidgetSettings } from './rio/settings';
+
+export enum WidgetID {
+    Battery = "Battery",
+    Rio = "Rio",
+}
+
+type WidgetDescription =
+	| { id: WidgetID.Battery; settings: BatteryWidgetSettings }
+	| { id: WidgetID.Rio; settings: RioWidgetSettings };
+
+type WidgetConfig = WidgetDescription[];
+
+export const widget_config: WidgetConfig = [
+    { id: WidgetID.Battery, settings: { showGraph: false } },
+    { id: WidgetID.Rio, settings: {} },
+];
diff --git a/ui/src/routes/fieldMonitorTest/+page.svelte b/ui/src/routes/fieldMonitorTest/+page.svelte
new file mode 100644
index 0000000..e5fe9ef
--- /dev/null
+++ b/ui/src/routes/fieldMonitorTest/+page.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import BatteryWidget from "$lib/field-monitor/battery/BatteryWidget.svelte";
+	import RioWidget from "$lib/field-monitor/rio/RioWidget.svelte";
+    import {widget_config} from "$lib/field-monitor/widget"
+    import {WidgetID} from "$lib/field-monitor/widget"
+	import { Blue1Default } from "../defaults";
+
+</script>
+
+
+{#each widget_config as widget, index (index)}
+    {#if widget.id == WidgetID.Battery}
+        <BatteryWidget settings={widget.settings} data={Blue1Default} />
+    {:else if widget.id == WidgetID.Rio}
+        <RioWidget settings={widget.settings} data={Blue1Default} />
+    {/if}
+{/each}

From fb842599c055864064af4f319007058b67cd3d33 Mon Sep 17 00:00:00 2001
From: Devyn Keeney <me@devyntk.me>
Date: Tue, 5 Aug 2025 22:05:55 -0500
Subject: [PATCH 2/2] Add CSS grid and styling for modular field monitor

---
 ui/src/app.css                                |  6 ++++
 .../field-monitor/MonitorItem.svelte          |  3 --
 ui/src/{routes => lib}/defaults.ts            |  0
 .../lib/field-monitor/BaseMonitorItem.svelte  | 16 ++++++++++
 ui/src/lib/field-monitor/MonitorHeader.svelte |  9 ++++++
 ui/src/lib/field-monitor/MonitorRow.svelte    | 30 +++++++++++++++++++
 ui/src/lib/field-monitor/RowBlock.svelte      | 19 ++++++++++++
 .../battery/BatteryWidget.svelte              |  9 +++---
 ui/src/lib/field-monitor/battery/settings.ts  |  2 +-
 ui/src/lib/field-monitor/rio/RioWidget.svelte |  9 +++---
 ui/src/lib/field-monitor/widget.ts            | 20 ++++++++-----
 ui/src/routes/+layout.svelte                  |  6 ++--
 ui/src/routes/fieldMonitor/+page.svelte       |  2 +-
 ui/src/routes/fieldMonitorTest/+page.svelte   | 27 +++++++++--------
 14 files changed, 121 insertions(+), 37 deletions(-)
 delete mode 100644 ui/src/lib/components/field-monitor/MonitorItem.svelte
 rename ui/src/{routes => lib}/defaults.ts (100%)
 create mode 100644 ui/src/lib/field-monitor/BaseMonitorItem.svelte
 create mode 100644 ui/src/lib/field-monitor/MonitorHeader.svelte
 create mode 100644 ui/src/lib/field-monitor/MonitorRow.svelte
 create mode 100644 ui/src/lib/field-monitor/RowBlock.svelte

diff --git a/ui/src/app.css b/ui/src/app.css
index ef3b177..3ebeb30 100644
--- a/ui/src/app.css
+++ b/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);
 }
diff --git a/ui/src/lib/components/field-monitor/MonitorItem.svelte b/ui/src/lib/components/field-monitor/MonitorItem.svelte
deleted file mode 100644
index f03c796..0000000
--- a/ui/src/lib/components/field-monitor/MonitorItem.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<script lang="ts">
-</script>
-
diff --git a/ui/src/routes/defaults.ts b/ui/src/lib/defaults.ts
similarity index 100%
rename from ui/src/routes/defaults.ts
rename to ui/src/lib/defaults.ts
diff --git a/ui/src/lib/field-monitor/BaseMonitorItem.svelte b/ui/src/lib/field-monitor/BaseMonitorItem.svelte
new file mode 100644
index 0000000..740fba5
--- /dev/null
+++ b/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>
diff --git a/ui/src/lib/field-monitor/MonitorHeader.svelte b/ui/src/lib/field-monitor/MonitorHeader.svelte
new file mode 100644
index 0000000..6711b0c
--- /dev/null
+++ b/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>
diff --git a/ui/src/lib/field-monitor/MonitorRow.svelte b/ui/src/lib/field-monitor/MonitorRow.svelte
new file mode 100644
index 0000000..987aaab
--- /dev/null
+++ b/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}
diff --git a/ui/src/lib/field-monitor/RowBlock.svelte b/ui/src/lib/field-monitor/RowBlock.svelte
new file mode 100644
index 0000000..e7ac4d9
--- /dev/null
+++ b/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>
diff --git a/ui/src/lib/field-monitor/battery/BatteryWidget.svelte b/ui/src/lib/field-monitor/battery/BatteryWidget.svelte
index 48f98c0..ffac32c 100644
--- a/ui/src/lib/field-monitor/battery/BatteryWidget.svelte
+++ b/ui/src/lib/field-monitor/battery/BatteryWidget.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-	import type { FieldMonitorData } from "../../../fms/fms-signalr";
-	import type { BatteryWidgetSettings } from "./settings";
+	import type { FieldMonitorData } from '../../../fms/fms-signalr';
+	import BaseMonitorItem from '../BaseMonitorItem.svelte';
+	import type { BatteryWidgetSettings } from './settings';
 
-    let props: {settings: BatteryWidgetSettings, data: FieldMonitorData} = $props();
+	let { data, settings }: { settings: BatteryWidgetSettings; data: FieldMonitorData } = $props();
 </script>
 
-<div>Battery: {JSON.stringify(props)}</div>
+<BaseMonitorItem>{data.battery}</BaseMonitorItem>
diff --git a/ui/src/lib/field-monitor/battery/settings.ts b/ui/src/lib/field-monitor/battery/settings.ts
index 069270b..1e8229a 100644
--- a/ui/src/lib/field-monitor/battery/settings.ts
+++ b/ui/src/lib/field-monitor/battery/settings.ts
@@ -1 +1 @@
-export type BatteryWidgetSettings = {showGraph: boolean};
+export type BatteryWidgetSettings = { showGraph: boolean };
diff --git a/ui/src/lib/field-monitor/rio/RioWidget.svelte b/ui/src/lib/field-monitor/rio/RioWidget.svelte
index 8599352..b0c5aea 100644
--- a/ui/src/lib/field-monitor/rio/RioWidget.svelte
+++ b/ui/src/lib/field-monitor/rio/RioWidget.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-	import type { FieldMonitorData } from "../../../fms/fms-signalr";
-	import type { RioWidgetSettings } from "./settings";
+	import type { FieldMonitorData } from '../../../fms/fms-signalr';
+	import BaseMonitorItem from '../BaseMonitorItem.svelte';
+	import type { RioWidgetSettings } from './settings';
 
-    let props: {settings: RioWidgetSettings, data: FieldMonitorData} = $props();
+	let { settings, data }: { settings: RioWidgetSettings; data: FieldMonitorData } = $props();
 </script>
 
-<div>Rio: {JSON.stringify(props)}</div>
+<BaseMonitorItem>{data.rioLink}</BaseMonitorItem>
diff --git a/ui/src/lib/field-monitor/widget.ts b/ui/src/lib/field-monitor/widget.ts
index 096426b..a4ebbec 100644
--- a/ui/src/lib/field-monitor/widget.ts
+++ b/ui/src/lib/field-monitor/widget.ts
@@ -2,17 +2,21 @@ import type { BatteryWidgetSettings } from './battery/settings';
 import type { RioWidgetSettings } from './rio/settings';
 
 export enum WidgetID {
-    Battery = "Battery",
-    Rio = "Rio",
+	Battery = 'Battery',
+	Rio = 'Rio'
 }
 
-type WidgetDescription =
+export type WidgetDescription =
 	| { id: WidgetID.Battery; settings: BatteryWidgetSettings }
 	| { id: WidgetID.Rio; settings: RioWidgetSettings };
 
-type WidgetConfig = WidgetDescription[];
+export interface FieldMonitorConfig {
+	widgets: WidgetDescription[];
+}
 
-export const widget_config: WidgetConfig = [
-    { id: WidgetID.Battery, settings: { showGraph: false } },
-    { id: WidgetID.Rio, settings: {} },
-];
+export const field_monitor_config: FieldMonitorConfig = {
+	widgets: [
+		{ id: WidgetID.Battery, settings: { showGraph: false } },
+		{ id: WidgetID.Rio, settings: {} }
+	]
+};
diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index ec9cbe2..6223d9e 100644
--- a/ui/src/routes/+layout.svelte
+++ b/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>
diff --git a/ui/src/routes/fieldMonitor/+page.svelte b/ui/src/routes/fieldMonitor/+page.svelte
index 5abecae..f991d7e 100644
--- a/ui/src/routes/fieldMonitor/+page.svelte
+++ b/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;
diff --git a/ui/src/routes/fieldMonitorTest/+page.svelte b/ui/src/routes/fieldMonitorTest/+page.svelte
index e5fe9ef..c19aae2 100644
--- a/ui/src/routes/fieldMonitorTest/+page.svelte
+++ b/ui/src/routes/fieldMonitorTest/+page.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
-	import BatteryWidget from "$lib/field-monitor/battery/BatteryWidget.svelte";
-	import RioWidget from "$lib/field-monitor/rio/RioWidget.svelte";
-    import {widget_config} from "$lib/field-monitor/widget"
-    import {WidgetID} from "$lib/field-monitor/widget"
-	import { Blue1Default } from "../defaults";
-
+	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 widget_config as widget, index (index)}
-    {#if widget.id == WidgetID.Battery}
-        <BatteryWidget settings={widget.settings} data={Blue1Default} />
-    {:else if widget.id == WidgetID.Rio}
-        <RioWidget settings={widget.settings} data={Blue1Default} />
-    {/if}
-{/each}
+	{#each { length: 6 }}
+		<MonitorRow settings={field_monitor_config} data={Blue1Default} />
+	{/each}
+</div>