From 10970042456dc2a7b6d314e43479daae7dbeb8e5 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Wed, 15 Apr 2026 18:25:12 +0000
Subject: [PATCH] Add custom pool upload page

---
 api/routes.go                               |   2 +-
 ts/components/TableUploadRequirements.vue   |   7 +-
 ts/router.ts                                |   7 ++
 ts/view/configuration/UploadPoolCustom.vue  | 128 ++++++++++++++++++++
 ts/view/configuration/UploadPoolFlyover.vue |   2 +-
 5 files changed, 143 insertions(+), 3 deletions(-)
 create mode 100644 ts/view/configuration/UploadPoolCustom.vue

diff --git a/api/routes.go b/api/routes.go
index 575ba71c..d275dcec 100644
--- a/api/routes.go
+++ b/api/routes.go
@@ -61,8 +61,8 @@ func AddRoutes(r *mux.Router) {
 	r.Handle("/trap-data", auth.NewEnsureAuth(apiTrapData)).Methods("GET")
 	r.Handle("/tile/{z}/{y}/{x}", auth.NewEnsureAuth(getTile)).Methods("GET")
 	upload := resource.Upload(r)
-	r.Handle("/upload/pool/flyover", authenticatedHandlerPostMultipart(upload.PoolFlyoverCreate, file.CollectionCSV)).Methods("POST")
 	r.Handle("/upload/pool/custom", authenticatedHandlerPostMultipart(upload.PoolCustomCreate, file.CollectionCSV)).Methods("POST")
+	r.Handle("/upload/pool/flyover", authenticatedHandlerPostMultipart(upload.PoolFlyoverCreate, file.CollectionCSV)).Methods("POST")
 	r.Handle("/upload", authenticatedHandlerJSON(upload.List)).Methods("GET")
 	r.Handle("/upload/{id}", authenticatedHandlerJSON(upload.ByIDGet)).Methods("GET")
 	r.Handle("/upload/{id}/commit", authenticatedHandlerJSONPost(upload.Commit)).Methods("POST")
diff --git a/ts/components/TableUploadRequirements.vue b/ts/components/TableUploadRequirements.vue
index 06728b60..38a24bb4 100644
--- a/ts/components/TableUploadRequirements.vue
+++ b/ts/components/TableUploadRequirements.vue
@@ -23,7 +23,12 @@
 						{{ req.field }}
 					</td>
 					<td>{{ req.description }}</td>
-					<td>{{ req.format }}</td>
+					<td v-if="req.format == 'e164'">
+						<a href="https://www.twilio.com/docs/glossary/what-e164"
+							>E164 format</a
+						>, or enough digits to be a valid phone number
+					</td>
+					<td v-else>{{ req.format }}</td>
 					<td>{{ req.example }}</td>
 				</tr>
 			</tbody>
diff --git a/ts/router.ts b/ts/router.ts
index 94c9d8cd..88912eb3 100644
--- a/ts/router.ts
+++ b/ts/router.ts
@@ -12,6 +12,7 @@ import ConfigurationRoot from "./view/configuration/Root.vue";
 import ConfigurationUpload from "./view/configuration/Upload.vue";
 import ConfigurationUploadDetail from "./view/configuration/UploadDetail.vue";
 import ConfigurationUploadPool from "./view/configuration/UploadPool.vue";
+import ConfigurationUploadPoolCustom from "./view/configuration/UploadPoolCustom.vue";
 import ConfigurationUploadPoolFlyover from "./view/configuration/UploadPoolFlyover.vue";
 import ConfigurationUser from "./view/configuration/User.vue";
 import ConfigurationUserAdd from "./view/configuration/UserAdd.vue";
@@ -95,6 +96,12 @@ const routes: RouteRecordRaw[] = [
 		component: ConfigurationUploadPool,
 		meta: { requiresAuth: true, showSidebar: true },
 	},
+	{
+		path: "/_/configuration/upload/pool/custom",
+		name: "Custom Pool Upload",
+		component: ConfigurationUploadPoolCustom,
+		meta: { requiresAuth: true, showSidebar: true },
+	},
 	{
 		path: "/_/configuration/upload/pool/flyover",
 		name: "Flyover Upload",
diff --git a/ts/view/configuration/UploadPoolCustom.vue b/ts/view/configuration/UploadPoolCustom.vue
new file mode 100644
index 00000000..4b5f9d15
--- /dev/null
+++ b/ts/view/configuration/UploadPoolCustom.vue
@@ -0,0 +1,128 @@
+<template>
+	<!-- Main Content -->
+	<div class="container mt-4 upload-container">
+		<h2 class="mb-4">Upload Pool Custom Data</h2>
+
+		<div class="card mb-4">
+			<TableUploadRequirements :requirements="requirements" />
+		</div>
+
+		<div class="card">
+			<div class="card-header bg-light">
+				<h5 class="mb-0">Upload Data</h5>
+			</div>
+			<div class="card-body">
+				<CSVUpload
+					upload-url="/api/upload/pool/custom"
+					@doError="onError"
+					@doFileSelected="onFileSelected"
+					@doSuccess="onUploadSuccess"
+				/>
+			</div>
+		</div>
+
+		<div class="text-muted text-center mt-4">
+			<small
+				>Need assistance? Contact
+				<a href="mailto:support@example.com">support@example.com</a></small
+			>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import CSVUpload from "@/components/CSVUpload.vue";
+import TableUploadRequirements, {
+	UploadRequirement,
+} from "@/components/TableUploadRequirements.vue";
+import { router } from "@/router";
+
+const requirements = ref<UploadRequirement[]>([
+	{
+		field: "Street Address",
+		description: "Street number and name of the address of the pool",
+		format: "Text",
+		example: "123 Main St.",
+		is_required: true,
+	},
+	{
+		field: "City",
+		description: "The city portion of the pool's address",
+		format: "Text",
+		example: "Visalia",
+		is_required: true,
+	},
+	{
+		field: "Notes",
+		description:
+			" Any notes from the district to include with the pool record ",
+		format: "Text",
+		example: '"Collects rain water when empty"',
+		is_required: false,
+	},
+	{
+		field: "Postal Code",
+		description: "Postal (Zip) Code of the pool's address",
+		format: "numbers and optional hypen",
+		example: "81234 or 91234-5678",
+		is_required: true,
+	},
+	{
+		field: "Pool Condition",
+		description: "The condition of the pool when it was last inspected",
+		format: "Text",
+		example: '"blue", "dry", "false pool", "green", or "murky"',
+		is_required: false,
+	},
+	{
+		field: "Property Owner Name",
+		description: "Name of the person or entity that owns the property",
+		format: "Text",
+		example: "No",
+		is_required: false,
+	},
+	{
+		field: "Property Owner Phone",
+		description: "Phone number of the person or entity that owns the property",
+		format: "e164",
+		example:
+			'"+14155552671" or "1-(901)-555-1234" or "9015551234" or "1901-555-12-34"',
+		is_required: false,
+	},
+	{
+		field: "Resident Owned",
+		description:
+			" Whether or not the current resident of the property is also the owner ",
+		format: "Yes, No, or empty",
+		example: '"Yes" or "No" or ""',
+		is_required: false,
+	},
+	{
+		field: "Resident Phone",
+		description: "Phone number of the resident",
+		format: "e164",
+		example:
+			'"+14155552671" or "1-(901)-555-1234" or "9015551234" or "1901-555-12-34"',
+		is_required: false,
+	},
+	{
+		field: "Tags",
+		description:
+			" Any additional columns in the file will be treated as tags and attached to the record ",
+		format: "Text",
+		example: '"Hostile" or "Unresponsive" or "Dog"',
+		is_required: false,
+	},
+]);
+
+function onError(err: Error) {
+	console.error("CSV upload error", err);
+}
+function onFileSelected(file: File) {
+	console.log("file selected", file);
+}
+function onUploadSuccess(data: any) {
+	console.log("upload success", data);
+	router.push("/_" + data.uri);
+}
+</script>
diff --git a/ts/view/configuration/UploadPoolFlyover.vue b/ts/view/configuration/UploadPoolFlyover.vue
index 13434839..478b18e4 100644
--- a/ts/view/configuration/UploadPoolFlyover.vue
+++ b/ts/view/configuration/UploadPoolFlyover.vue
@@ -1,7 +1,7 @@
 <template>
 	<!-- Main Content -->
 	<div class="container mt-4 upload-container">
-		<h2 class="mb-4">Upload Pool Data</h2>
+		<h2 class="mb-4">Upload Pool Flyover Data</h2>
 
 		<div class="card mb-4">
 			<TableUploadRequirements :requirements="requirements" />