From adcff5c5c80f1a80006a8acf08b43e3337da4d91 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Wed, 15 Apr 2026 17:27:22 +0000
Subject: [PATCH] Split upload requirements table into its own component

---
 ts/components/TableUploadRequirements.vue   | 72 +++++++++++++++++++++
 ts/view/configuration/UploadPoolFlyover.vue | 72 +--------------------
 2 files changed, 74 insertions(+), 70 deletions(-)
 create mode 100644 ts/components/TableUploadRequirements.vue

diff --git a/ts/components/TableUploadRequirements.vue b/ts/components/TableUploadRequirements.vue
new file mode 100644
index 00000000..d768b498
--- /dev/null
+++ b/ts/components/TableUploadRequirements.vue
@@ -0,0 +1,72 @@
+<template>
+	<div class="card-header bg-light">
+		<h5 class="mb-0">CSV Upload Requirements</h5>
+	</div>
+	<div class="card-body">
+		<p>
+			Your CSV file must contain the following columns in any order. Please
+			ensure your data matches the required format.
+		</p>
+
+		<table class="table table-bordered schema-table">
+			<thead class="table-light">
+				<tr>
+					<th>Field</th>
+					<th>Description</th>
+					<th>Format</th>
+					<th>Example</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td class="required-field">City</td>
+					<td>The city portion of the address</td>
+					<td>Text</td>
+					<td>Visalia</td>
+				</tr>
+				<tr>
+					<td class="required-field">Comment</td>
+					<td>The condition of the pool</td>
+					<td>Text</td>
+					<td>"blue", "dry", "false pool", "green", or "murky"</td>
+				</tr>
+				<tr>
+					<td class="required-field">HouseNo</td>
+					<td>The house number portion of the address</td>
+					<td>Text</td>
+					<td>123</td>
+				</tr>
+				<tr>
+					<td class="required-field">State</td>
+					<td>The state portion of the address</td>
+					<td>Text</td>
+					<td>California</td>
+				</tr>
+				<tr>
+					<td class="required-field">Street</td>
+					<td>The street portion of the address</td>
+					<td>Text</td>
+					<td>Main St</td>
+				</tr>
+				<tr>
+					<td class="required-field">TargetLat</td>
+					<td>The latitude of the target location</td>
+					<td>Decimal Number</td>
+					<td>36.56245379</td>
+				</tr>
+				<tr>
+					<td class="required-field">TargetLon</td>
+					<td>The longitude of the target location</td>
+					<td>Decimal Number</td>
+					<td>-119.3948222</td>
+				</tr>
+				<tr>
+					<td class="required-field">ZIP</td>
+					<td>The postal code (ZIP) portion of the address</td>
+					<td>Text</td>
+					<td>93681</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</template>
diff --git a/ts/view/configuration/UploadPoolFlyover.vue b/ts/view/configuration/UploadPoolFlyover.vue
index 8d4db59f..a6bbc20c 100644
--- a/ts/view/configuration/UploadPoolFlyover.vue
+++ b/ts/view/configuration/UploadPoolFlyover.vue
@@ -4,76 +4,7 @@
 		<h2 class="mb-4">Upload Pool Data</h2>
 
 		<div class="card mb-4">
-			<div class="card-header bg-light">
-				<h5 class="mb-0">CSV Upload Requirements</h5>
-			</div>
-			<div class="card-body">
-				<p>
-					Your CSV file must contain the following columns in any order. Please
-					ensure your data matches the required format.
-				</p>
-
-				<table class="table table-bordered schema-table">
-					<thead class="table-light">
-						<tr>
-							<th>Field</th>
-							<th>Description</th>
-							<th>Format</th>
-							<th>Example</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td class="required-field">City</td>
-							<td>The city portion of the address</td>
-							<td>Text</td>
-							<td>Visalia</td>
-						</tr>
-						<tr>
-							<td class="required-field">Comment</td>
-							<td>The condition of the pool</td>
-							<td>Text</td>
-							<td>"blue", "dry", "false pool", "green", or "murky"</td>
-						</tr>
-						<tr>
-							<td class="required-field">HouseNo</td>
-							<td>The house number portion of the address</td>
-							<td>Text</td>
-							<td>123</td>
-						</tr>
-						<tr>
-							<td class="required-field">State</td>
-							<td>The state portion of the address</td>
-							<td>Text</td>
-							<td>California</td>
-						</tr>
-						<tr>
-							<td class="required-field">Street</td>
-							<td>The street portion of the address</td>
-							<td>Text</td>
-							<td>Main St</td>
-						</tr>
-						<tr>
-							<td class="required-field">TargetLat</td>
-							<td>The latitude of the target location</td>
-							<td>Decimal Number</td>
-							<td>36.56245379</td>
-						</tr>
-						<tr>
-							<td class="required-field">TargetLon</td>
-							<td>The longitude of the target location</td>
-							<td>Decimal Number</td>
-							<td>-119.3948222</td>
-						</tr>
-						<tr>
-							<td class="required-field">ZIP</td>
-							<td>The postal code (ZIP) portion of the address</td>
-							<td>Text</td>
-							<td>93681</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
+			<TableUploadRequirements />
 		</div>
 
 		<div class="card">
@@ -100,6 +31,7 @@
 </template>
 <script setup lang="ts">
 import CSVUpload from "@/components/CSVUpload.vue";
+import TableUploadRequirements from "@/components/TableUploadRequirements.vue";
 import { router } from "@/router";
 
 function onError(err: Error) {