From 5b75ac1d1ced497c97b5dfff15e2e3f33adef677 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Wed, 11 Mar 2026 23:39:25 +0000
Subject: [PATCH] Add initial sketch of site review page

---
 html/template/sync/review/site.html | 252 ++++++++++++++++++++++++++++
 sync/review.go                      |   3 +
 sync/routes.go                      |   1 +
 3 files changed, 256 insertions(+)
 create mode 100644 html/template/sync/review/site.html

diff --git a/html/template/sync/review/site.html b/html/template/sync/review/site.html
new file mode 100644
index 00000000..80abb260
--- /dev/null
+++ b/html/template/sync/review/site.html
@@ -0,0 +1,252 @@
+{{ template "sync/layout/base.html" . }}
+
+{{ define "title" }}Status{{ end }}
+{{ define "extraheader" }}
+	<script
+		type="text/javascript"
+		src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
+	></script>
+	<script src="/static/js/address-suggestion.js"></script>
+	<script src="/static/js/location.js"></script>
+	<script src="/static/js/map-multipoint.js"></script>
+	<!-- ordering matters since report table depends on time-relative -->
+	<script src="/static/js/time-relative.js"></script>
+	<script src="/static/js/table-site.js"></script>
+<script>
+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(nuisances, waters, comparatorProperty) {
+	const uniqueIds = new Set();
+	const uniqueFeatures = [];
+	for (const feature of nuisances) {
+		const id = feature.properties[comparatorProperty];
+		if (!uniqueIds.has(id)) {
+			uniqueIds.add(id);
+			let f = structuredClone(feature);
+			f.type = "nuisance";
+			uniqueFeatures.push(f);
+		}
+	}
+	for (const feature of waters) {
+		const id = feature.properties[comparatorProperty];
+		if (!uniqueIds.has(id)) {
+			uniqueIds.add(id);
+			let f = structuredClone(feature);
+			f.type = "water";
+			uniqueFeatures.push(f);
+		}
+	}
+	return uniqueFeatures;
+}
+
+function handleLookupFormSubmit(e) {
+	const report_id = e.target.elements["address-or-report"].value.replace(/-/g, "");
+	window.location = "/status/" + report_id;
+	return false;
+}
+
+function maybeEnableLookupButton(e) {
+	const lookupButton = document.getElementById("lookup");
+	const lookupButtonTooltip = tooltipByElementId["lookup-tooltip"];
+	const reportId = e.target.value.replace(/-/g, "");
+	if (reportId.length == 12) {
+		lookupButton.disabled = false;
+		lookupButton.classList.remove("disabled");
+		lookupButtonTooltip.disable()
+	} else {
+		lookupButton.disabled = true;
+		lookupButton.classList.add("disabled");
+		lookupButtonTooltip.enable()
+	}
+}
+
+function onLoad() {
+	const map = document.querySelector("map-multipoint");
+	const checkboxNuisance = document.getElementById("checkboxNuisance");
+	const checkboxWater = document.getElementById("checkboxWater");
+	map.addEventListener("load", (event) => {
+		map.addSource('tegola', {
+			'type': 'vector',
+			'tiles': [
+				'{{.URL.Tegola}}maps/rmo/{z}/{x}/{y}'
+			]
+		});
+		map.addLayer({
+			'id': 'nuisance',
+			'source': 'tegola',
+			'source-layer': 'nuisance_location',
+			'type': 'circle',
+			'paint': {
+				'circle-color': "#DC4535",
+				'circle-radius': 7,
+				'circle-stroke-width': 2,
+				'circle-stroke-color': "#9C1C28"
+			}
+		});
+		map.addLayer({
+			'id': 'rmo_water',
+			'source': 'tegola',
+			'source-layer': 'water_location',
+			'type': 'circle',
+			'paint': {
+				'circle-color': "#0D6EfD",
+				'circle-radius': 7,
+				'circle-stroke-width': 2,
+				'circle-stroke-color': "#024AB6"
+			}
+		});
+		map.on("idle", () => {
+			function _addCheckboxClick(checkbox, layer_id) {
+				checkbox.onclick = function(e) {
+					if (checkbox.checked) {
+						map.SetLayoutProperty(layer_id, "visibility", "visible");
+					} else {
+						map.SetLayoutProperty(layer_id, "visibility", "none");
+					}
+				}
+			}
+			_addCheckboxClick(checkboxNuisance, "nuisance");
+			_addCheckboxClick(checkboxWater, "rmo_water");
+			checkboxNuisance.onclick()
+			checkboxWater.onclick()
+		});
+		function _updateReports() {
+			const nuisances = map.queryRenderedFeatures({target: {layerId: 'nuisance'}});
+			const waters = map.queryRenderedFeatures({target: {layerId: 'water'}});
+			const nidus_nuisances = nuisances.filter((feature) => feature.source == "tegola");
+			const nidus_waters = waters.filter((feature) => feature.source == "tegola");
+			const uniqueFeatures = getUniqueFeatures(nidus_nuisances, nidus_waters, 'public_id');
+			// Populate features for the listing overlay.
+			renderReports(uniqueFeatures);
+		}
+		map.once("idle", _updateReports);
+		map.on('moveend', _updateReports);
+		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);
+		})
+	});
+	const report_table = document.querySelector('report-table');
+	report_table.addEventListener("row-clicked", (e) => {
+		window.location = "/status/" + e.detail.reportId;
+	})
+	document.querySelector("address-or-report-input").addEventListener("suggestion-selected", (e) => {
+		maybeEnableLookupButton(e)
+		if (e.detail.type == "address") {
+			map.flyTo({
+				center: {
+					lng: e.detail.content.geometry.coordinates[0],
+					lat: e.detail.content.geometry.coordinates[1],
+				},
+				zoom: 15,
+			});
+		}
+	});
+	document.querySelector("address-or-report-input").addEventListener("input", maybeEnableLookupButton);
+	document.getElementById("lookup-form").addEventListener("submit", handleLookupFormSubmit);
+}
+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.type,
+		});
+	}
+	report_table.reports = reports;
+
+	const report_count = document.getElementById("report-count");
+	report_count.innerHTML = reports.length + " Sites Found";
+}
+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" action="#" id="lookup-form">
+					<div class="col-md-9">
+						<address-input
+							name="address-or-report"
+							placeholder="Enter an address, neighborhood, or zip code"
+						></address-input>
+					</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="bi bi-pin-map-fill me-2"></i>Sites Map</h5>
+			</div>
+			<div class="card-body p-0">
+				<div class="map-container">
+					<map-multipoint
+						id="map"
+						xmax="-118.0"
+						ymax="37.0"
+						xmin="-119.0"
+						ymin="36.0"
+						tegola="{{ .URL.Tegola }}"
+						zoom="9"
+					></map-multipoint>
+				</div>
+			</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="bi bi-geo-fill me-2"></i>Sites List</h5>
+				<span class="badge bg-light text-dark" id="report-count"
+					>- Sites 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 }}
diff --git a/sync/review.go b/sync/review.go
index bd391888..b713f419 100644
--- a/sync/review.go
+++ b/sync/review.go
@@ -40,3 +40,6 @@ func getReviewPool(ctx context.Context, r *http.Request, org *models.Organizatio
 func getReviewRoot(ctx context.Context, r *http.Request, org *models.Organization, user *models.User) (*html.Response[contentReviewRoot], *nhttp.ErrorWithStatus) {
 	return html.NewResponse("sync/review/root.html", contentReviewRoot{}), nil
 }
+func getReviewSite(ctx context.Context, r *http.Request, org *models.Organization, user *models.User) (*html.Response[contentReviewRoot], *nhttp.ErrorWithStatus) {
+	return html.NewResponse("sync/review/site.html", contentReviewRoot{}), nil
+}
diff --git a/sync/routes.go b/sync/routes.go
index 2f024acf..4b9445c3 100644
--- a/sync/routes.go
+++ b/sync/routes.go
@@ -78,6 +78,7 @@ func Router() chi.Router {
 	r.Method("GET", "/radar", authenticatedHandler(getRadar))
 	r.Method("GET", "/review", authenticatedHandler(getReviewRoot))
 	r.Method("GET", "/review/pool", authenticatedHandler(getReviewPool))
+	r.Method("GET", "/review/site", authenticatedHandler(getReviewSite))
 	r.Method("GET", "/service-request", authenticatedHandler(getServiceRequestList))
 	r.Method("GET", "/service-request/{id}", authenticatedHandler(getServiceRequestDetail))
 	r.Method("GET", "/signout", auth.NewEnsureAuth(getSignout))