From 9aee938e30b6ab7ec8befb45488f99809c3ac606 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Sat, 24 Jan 2026 21:00:30 +0000
Subject: [PATCH] Add status searching page

---
 public-report/mock.go                         |   8 +-
 .../template/mock/district-root.html          |   2 +-
 public-report/template/mock/status.html       | 204 ++++++++++++++++++
 3 files changed, 212 insertions(+), 2 deletions(-)
 create mode 100644 public-report/template/mock/status.html

diff --git a/public-report/mock.go b/public-report/mock.go
index 83d2805f..d7b10ce0 100644
--- a/public-report/mock.go
+++ b/public-report/mock.go
@@ -13,6 +13,7 @@ var (
 	mockNuisanceT               = buildTemplate("mock/nuisance", "base")
 	mockNuisanceSubmitCompleteT = buildTemplate("mock/nuisance-submit-complete", "base")
 	mockRootT                   = buildTemplate("mock/root", "base")
+	mockStatusT                 = buildTemplate("mock/status", "base")
 )
 
 type ContentDistrict struct {
@@ -22,6 +23,8 @@ type ContentDistrict struct {
 type ContentURL struct {
 	Nuisance               string
 	NuisanceSubmitComplete string
+	Status                 string
+	Tegola                 string
 }
 type ContentMock struct {
 	District    ContentDistrict
@@ -32,15 +35,18 @@ type ContentMock struct {
 
 func addMockRoutes(r chi.Router) {
 	r.Get("/", renderMock(mockRootT))
+	r.Get("/district/{slug}", renderMock(mockDistrictRootT))
 	r.Get("/nuisance", renderMock(mockNuisanceT))
 	r.Get("/nuisance-submit-complete", renderMock(mockNuisanceSubmitCompleteT))
-	r.Get("/district/{slug}", renderMock(mockDistrictRootT))
+	r.Get("/status", renderMock(mockStatusT))
 }
 
 func makeContentURL() ContentURL {
 	return ContentURL{
 		Nuisance:               makeURLMock("nuisance"),
 		NuisanceSubmitComplete: makeURLMock("nuisance-submit-complete"),
+		Status:                 makeURLMock("status"),
+		Tegola:                 config.MakeURLTegola("/"),
 	}
 }
 
diff --git a/public-report/template/mock/district-root.html b/public-report/template/mock/district-root.html
index 42ca10a0..8cb54251 100644
--- a/public-report/template/mock/district-root.html
+++ b/public-report/template/mock/district-root.html
@@ -81,7 +81,7 @@
 							</div>
 							<h4 class="card-title">Follow-up or Check Status</h4>
 							<p class="card-text">Check on a previous request or view current mosquito activity in your area.</p>
-							<a href="/status" class="btn btn-primary mt-3">Get Status</a>
+							<a href="{{.URL.Status}}" class="btn btn-primary mt-3">Get Status</a>
 						</div>
 					</div>
 				</div>
diff --git a/public-report/template/mock/status.html b/public-report/template/mock/status.html
new file mode 100644
index 00000000..2b8dd8f2
--- /dev/null
+++ b/public-report/template/mock/status.html
@@ -0,0 +1,204 @@
+{{template "base.html" .}}
+
+{{define "title"}}Status{{end}}
+{{define "extraheader"}}
+<script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
+<script src="/static/js/geocode.js"></script>
+<script src="/static/js/location.js"></script>
+<script src="/static/js/map-multipoint.js"></script>
+<script src="/static/js/report-table.js"></script>
+<style>
+.map-container {
+	background-color: #e9ecef;
+	border-radius: 10px;
+	box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+	height: 500px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-top: 20px;
+}
+#map {
+	height: 500px;
+	width:100%;
+	margin-bottom: 10px;
+}
+#map img {
+	max-width: none;
+	min-width: 0px;
+	height: auto;
+}
+.search-box {
+	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+	border-radius: 8px;
+}
+@media (max-width: 768px) {
+	.map-container {
+		height: 300px;
+	}
+}
+</style>
+<script>
+const MAPBOX_ACCESS_TOKEN = '{{.MapboxToken}}';
+var markers = [];
+// Because features come from tiled vector data, feature geometries may be split
+// or duplicated across tile boundaries. As a result, features may appear
+// multiple times in query results.
+function getUniqueFeatures(features, comparatorProperty) {
+	const uniqueIds = new Set();
+	const uniqueFeatures = [];
+	for (const feature of features) {
+		const id = feature.properties[comparatorProperty];
+		if (!uniqueIds.has(id)) {
+		uniqueIds.add(id);
+		uniqueFeatures.push(feature);
+		}
+	}
+	return uniqueFeatures;
+}
+
+function renderReports(features) {
+	console.log("render reports", features);
+	
+	const report_table = document.querySelector('report-table');
+	let reports = [];
+	for (const feature of features) {
+		reports.push({
+			address: feature.properties.address,
+			created: feature.properties.created,
+			id: feature.properties.public_id,
+			status: feature.properties.status,
+			type: feature.properties.table_name
+		});
+	}
+	report_table.reports = reports;
+}
+function onLoad() {
+	const map = document.querySelector("map-multipoint");
+	map.addEventListener("load", (event) => {
+		map.addSource('tegola-mosquito', {
+			'type': 'vector',
+			'tiles': [
+				'{{.URL.Tegola}}maps/mosquito/{z}/{x}/{y}'
+			]
+		});
+		map.addLayer({
+			'id': 'mosquito',
+			'source': 'tegola-mosquito',
+			'source-layer': 'report_location',
+			'type': 'circle',
+			'paint': {
+				'circle-color': '#4264fb',
+				'circle-radius': 7,
+				'circle-stroke-width': 2,
+				'circle-stroke-color': '#ffffff'
+			}
+		});
+		map.on('render', () => {
+			const features = map.queryRenderedFeatures({target: {layerId: 'mosquito'}});
+
+			if (features) {
+				const uniqueFeatures = getUniqueFeatures(features, 'public_id');
+				// Populate features for the listing overlay.
+				renderReports(uniqueFeatures);
+			}
+		});
+		getGeolocation({
+			enableHighAccuracy: true,
+			timeout: 10000,
+			maximumAge: 0
+		}).then(position => {
+			map.jumpTo({
+				center: {
+					lng: position.coords.longitude,
+					lat: position.coords.latitude,
+				},
+				zoom: 14,
+			});
+		}).catch(error => {
+			console.log("location error", error);
+		})
+	});
+}
+
+document.addEventListener('DOMContentLoaded', onLoad);
+</script>
+{{end}}
+{{define "content"}}
+<div class="container my-4">
+	<!-- Search Box -->
+	<div class="card search-box mb-4">
+		<div class="card-body">
+			<form class="row g-3 align-items-center">
+				<div class="col-md-9">
+					<label for="addressSearch" class="visually-hidden">Search by address</label>
+					<div class="input-group">
+						<span class="input-group-text"><i class="fas fa-search"></i></span>
+						<input type="text" class="form-control form-control-lg" id="addressSearch" 
+							placeholder="Enter a report ID, address, neighborhood, or zip code">
+					</div>
+				</div>
+				<div class="col-md-3">
+					<button type="submit" class="btn btn-primary btn-lg w-100">Search</button>
+				</div>
+				<div class="col-12">
+					<div class="form-check form-check-inline">
+						<input class="form-check-input" type="checkbox" id="mosquitoNuisance" checked>
+						<label class="form-check-label" for="mosquitoNuisance">Mosquito Nuisance</label>
+					</div>
+					<div class="form-check form-check-inline">
+						<input class="form-check-input" type="checkbox" id="stagnantWater" checked>
+						<label class="form-check-label" for="gWaterreenPool">Stagnant Water</label>
+					</div>
+				</div>
+			</form>
+		</div>
+	</div>
+	
+	<!-- Map Section -->
+	<div class="card mb-4">
+		<div class="card-header bg-info text-white">
+			<h5 class="mb-0"><i class="fas fa-map-marked-alt me-2"></i>Reports Map</h5>
+		</div>
+		<div class="card-body p-0">
+			<map-multipoint 
+					api-key="{{ .MapboxToken }}"
+					latitude="36.3"
+					longitude="-119.2"
+					tegola="{{.URL.Tegola}}"
+					zoom="9"
+					/></map-multipoint>
+		</div>
+	</div>
+	
+	<!-- Results Section -->
+	<div class="card">
+		<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
+			<h5 class="mb-0"><i class="fas fa-list me-2"></i>Reports Near You</h5>
+			<span class="badge bg-light text-dark">15 Reports Found</span>
+		</div>
+		<div class="card-body p-0">
+			<div class="table-responsive">
+				<report-table />
+			</div>
+		</div>
+		<!--
+		<div class="card-footer">
+			<nav aria-label="Page navigation">
+				<ul class="pagination justify-content-center mb-0">
+					<li class="page-item disabled">
+						<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
+					</li>
+					<li class="page-item active"><a class="page-link" href="#">1</a></li>
+					<li class="page-item"><a class="page-link" href="#">2</a></li>
+					<li class="page-item"><a class="page-link" href="#">3</a></li>
+					<li class="page-item">
+						<a class="page-link" href="#">Next</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+		-->
+	</div>
+</div>
+{{end}}