Re-organize layout to match 6036

Team3256 · Mar 24, 2024 · db76d77 · db76d77
1 parent 33ba34b
commit db76d77
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 29 deletions.
diff --git a/src/lib/components/FMSControlData.svelte b/src/lib/components/FMSControlData.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import * as Card from '$lib/components/ui/card';
 	import { type NetworkTables, NetworkTablesTypeInfos } from 'ntcore-ts-client';
-	const { nt }: { nt: NetworkTables } = $props();
+	const { nt, onChange }: { nt: NetworkTables; onChange: (state: string) => void } = $props();
 	const topic = $derived(
 		nt.createTopic<number>('/FMSInfo/FMSControlData', NetworkTablesTypeInfos.kInteger)
 	);
@@ -26,15 +26,18 @@
 		37: 'Test'
 	};
 	// TODO: Export the type of the robot state
-	export const robotState = $derived(value === null ? '' : robotStateMap?.[value] ?? 'Unknown');
+	const robotState = $derived(value === null ? 'Unknown' : robotStateMap?.[value] ?? 'Unknown');
+	$effect(() => {
+		onChange(robotState);
+	});
 	const color = $derived(value === null ? '' : colorMap?.[value] ?? 'bg-red-500');
 </script>
 
-<Card.Root class={`w-fit ${color}`}>
+<Card.Root class={`w-full ${color}`}>
 	<Card.Header>
 		<Card.Title>Robot State</Card.Title>
 	</Card.Header>
-	<Card.Content class="text-xl">
+	<Card.Content class="text-center text-5xl">
 		{#if value !== null}
 			{#if value === 0}
 				<p>Disconnected</p>
@@ -50,7 +53,7 @@
 				<p>Unknown</p>
 			{/if}
 		{:else}
-			<div class="text-gray-400">No value</div>
+			<div class="text-gray-400">NetworkTables DC</div>
 		{/if}
 	</Card.Content>
 </Card.Root>

diff --git a/src/lib/components/MatchTimer.svelte b/src/lib/components/MatchTimer.svelte
@@ -25,21 +25,35 @@
 	$effect(() => {
 		if (active) {
 			startTimer();
+			seconds = 0;
+			minutes = 0;
 			return stopTimer;
 		}
 	});
 </script>
 
-<Card.Root class="w-fit">
+<Card.Root class="w-full">
 	<Card.Header>
 		<Card.Title>Match Clock (estimated)</Card.Title>
 	</Card.Header>
 	<Card.Content>
-		<p>{minutes < 10 ? `0${minutes}` : minutes}:{seconds < 10 ? `0${seconds}` : seconds}</p>
+		{#if active}
+			<p class="dynamic-text-size text-center">
+				{minutes < 10 ? `0${minutes}` : minutes}:{seconds < 10 ? `0${seconds}` : seconds}
+			</p>
+		{:else}
+			<p class="dynamic-text-size text-center">Not Active</p>
+		{/if}
 		<!-- {#if value !== null}
 			<code class="text-mono">{value}</code>
 		{:else}
 			<div class="text-gray-400">No value</div>
 		{/if} -->
 	</Card.Content>
 </Card.Root>
+
+<style>
+	.dynamic-text-size {
+		font-size: 10vh;
+	}
+</style>
diff --git a/src/lib/components/NTBooleanViewer.svelte b/src/lib/components/NTBooleanViewer.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
 	import * as Card from '$lib/components/ui/card';
-	const { value, name }: { value: null | boolean; name: string } = $props();
+	const { value, name, ...props }: { value: null | boolean; name: string } = $props();
 </script>
 
-<Card.Root class={`w-fit ${value !== null ? (value ? 'bg-green-500' : 'bg-red-500') : ''}`}>
+<Card.Root
+	class={`w-fit ${value !== null ? (value ? 'bg-green-500' : 'bg-red-500') : ''}`}
+	{...props}
+>
 	<Card.Header>
 		<Card.Title>{name}</Card.Title>
 	</Card.Header>

diff --git a/src/lib/components/NTElement.svelte b/src/lib/components/NTElement.svelte
@@ -7,12 +7,14 @@
 		nt,
 		path,
 		type,
-		name
+		name,
+		...props
 	}: {
 		nt: NetworkTables;
 		path: string;
 		type: 'double' | 'integer' | 'string' | 'boolean';
 		name?: string;
+		[key: string]: unknown;
 	} = $props();
 	type ValueType = typeof name extends 'double'
 		? number
@@ -44,11 +46,11 @@
 </script>
 
 {#if type === 'integer' || type === 'double'}
-	<NtNumberViewer {value} name={name ?? topic.name} />
+	<NtNumberViewer {value} name={name ?? topic.name} {...props} />
 {:else if type === 'string'}
-	<NtStringViewer {value} name={name ?? topic.name} />
+	<NtStringViewer {value} name={name ?? topic.name} {...props} />
 {:else if type === 'boolean'}
-	<NtBooleanViewer {value} name={name ?? topic.name} />
+	<NtBooleanViewer {value} name={name ?? topic.name} {...props} />
 {:else}
 	<div class="text-red-500">Invalid type</div>
 {/if}
diff --git a/src/lib/components/NTNumberViewer.svelte b/src/lib/components/NTNumberViewer.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import * as Card from '$lib/components/ui/card';
-	const { name, value }: { name: string; value: null | number } = $props();
+	const { name, value, ...props }: { name: string; value: null | number } = $props();
 </script>
 
-<Card.Root class="w-fit">
+<Card.Root class="w-fit" {...props}>
 	<Card.Header>
 		<Card.Title>{name}</Card.Title>
 	</Card.Header>

diff --git a/src/lib/components/NTStringViewer.svelte b/src/lib/components/NTStringViewer.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import * as Card from '$lib/components/ui/card';
-	const { value, name }: { value: null | string; name: string } = $props();
+	const { value, name, ...props }: { value: null | string; name: string } = $props();
 </script>
 
-<Card.Root class="w-fit">
+<Card.Root class="w-fit" {...props}>
 	<Card.Header>
 		<Card.Title>{name}</Card.Title>
 	</Card.Header>

diff --git a/src/lib/components/Subsystems.svelte b/src/lib/components/Subsystems.svelte
@@ -0,0 +1,22 @@
+<script>
+	import * as Card from '$lib/components/ui/card';
+</script>
+
+<div class="flex flex-col">
+	<Card.Root>
+		<Card.Header>
+			<Card.Title>Subsystems</Card.Title>
+		</Card.Header>
+		<Card.Content>
+			<!-- {#if value !== null}
+            {#if value}
+                <code class="text-mono text-bold text-lg">TRUE</code>
+            {:else}
+                <code class="text-mono text-bold text-lg">FALSE</code>
+            {/if}
+        {:else}
+            <div class="text-gray-400">No value</div>
+        {/if} -->
+		</Card.Content>
+	</Card.Root>
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -3,26 +3,23 @@
 	import MatchTimer from '$lib/components/MatchTimer.svelte';
 	import Button from '$lib/components/ui/button/button.svelte';
 	import Input from '$lib/components/ui/input/input.svelte';
+	import * as Card from '$lib/components/ui/card';
+
 	import Label from '$lib/components/ui/label/label.svelte';
 	import Switch from '$lib/components/ui/switch/switch.svelte';
 	import { NetworkTables } from 'ntcore-ts-client';
 	import { onMount } from 'svelte';
 	import AutoChooser from '$lib/components/AutoChooser.svelte';
 	import NtElement from '$lib/components/NTElement.svelte';
+	import Subsystems from '$lib/components/Subsystems.svelte';
 	const TEAM_NUM = 3256;
 	let devMode = $state(true);
 	const nt = $derived(
 		devMode
 			? NetworkTables.getInstanceByURI('localhost')
 			: NetworkTables.getInstanceByTeam(TEAM_NUM)
 	);
-	let robotState = $state('Unknown');
 	let active = $state(false);
-	$effect(() => {
-		if (robotState !== 'Disconnected' || robotState !== 'Unknown' || robotState !== 'Disabled') {
-			active = true;
-		}
-	});
 </script>
 
 <main class="dark:bg-black dark:text-white">
@@ -33,16 +30,48 @@
 			<Label for="airplane-mode">Dev Mode</Label>
 		</div>
 	</div>
-	<div class="mx-auto my-3 flex justify-center space-x-2">
-		<NtElement name="Match Number" path="/FMSInfo/MatchNumber" {nt} type="integer" />
-		<NtElement name="Team Number" path="/AdvantageKit/SystemStats/TeamNumber" type="integer" {nt} />
-		<FMSControlData {nt} bind:robotState />
-		<AutoChooser {nt} />
+	<div class="my-3 flex h-[30vh] w-full justify-center space-x-2 px-3">
+		<FMSControlData
+			{nt}
+			onChange={(robotState) => {
+				if (
+					robotState === 'Disconnected' ||
+					robotState === 'Unknown' ||
+					robotState === 'Disabled'
+				) {
+					active = false;
+					return;
+				}
+				if (!active) {
+					active = true;
+				}
+			}}
+		/>
 		<MatchTimer {active} />
 	</div>
 
 	<!-- <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p> -->
-	<div class="m-3 flex">
+	<div class="flex w-full justify-stretch space-x-2 px-3">
+		<Subsystems />
+		<div class="flex">
+			<AutoChooser {nt} />
+			<div>
+				<NtElement
+					name="Team Number"
+					path="/AdvantageKit/SystemStats/TeamNumber"
+					type="integer"
+					{nt}
+					class="w-full"
+				/>
+				<NtElement
+					name="Match Number"
+					path="/FMSInfo/MatchNumber"
+					{nt}
+					type="integer"
+					class="w-full"
+				/>
+			</div>
+		</div>
 		<NtElement type="double" path="/SmartDashboard/Mod 0 Angle" {nt} />
 	</div>
 </main>