From 820f8237d13607474f25438dd310b1c39d720479 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Wed, 4 Feb 2026 17:12:46 +0000
Subject: [PATCH] Show pools and nuisances in separate layers on status search

---
 html/static/js/report-table.js |  6 +--
 rmo/template/status.html       | 67 ++++++++++++++++++++++------------
 scss/rmo/status.scss           | 36 ++++++++++++++++++
 3 files changed, 83 insertions(+), 26 deletions(-)

diff --git a/html/static/js/report-table.js b/html/static/js/report-table.js
index 78c8af22..a66e5f12 100644
--- a/html/static/js/report-table.js
+++ b/html/static/js/report-table.js
@@ -70,11 +70,11 @@ class ReportTable extends HTMLElement {
 	 */
 	getTypeClass(type) {
 		switch(type) {
-			case 'Nuisance':
+			case 'nuisance':
 				return 'bg-danger';
-			case 'Quick':
+			case 'quick':
 				return 'bg-primary';
-			case 'Green Pool':
+			case 'pool':
 				return 'bg-success';
 			default:
 				return 'bg-secondary';
diff --git a/rmo/template/status.html b/rmo/template/status.html
index 7772604a..72aac1a3 100644
--- a/rmo/template/status.html
+++ b/rmo/template/status.html
@@ -8,22 +8,31 @@
 <script src="/static/js/location.js"></script>
 <script src="/static/js/map-multipoint.js"></script>
 <script src="/static/js/report-table.js"></script>
-<style>
-</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) {
+function getUniqueFeatures(nuisances, pools, comparatorProperty) {
 	const uniqueIds = new Set();
 	const uniqueFeatures = [];
-	for (const feature of features) {
+	for (const feature of nuisances) {
 		const id = feature.properties[comparatorProperty];
 		if (!uniqueIds.has(id)) {
-		uniqueIds.add(id);
-		uniqueFeatures.push(feature);
+			uniqueIds.add(id);
+			let f = structuredClone(feature);
+			f.type = "nuisance";
+			uniqueFeatures.push(f);
+		}
+	}
+	for (const feature of pools) {
+		const id = feature.properties[comparatorProperty];
+		if (!uniqueIds.has(id)) {
+			uniqueIds.add(id);
+			let f = structuredClone(feature);
+			f.type = "pool";
+			uniqueFeatures.push(f);
 		}
 	}
 	return uniqueFeatures;
@@ -40,7 +49,7 @@ function renderReports(features) {
 			created: feature.properties.created,
 			id: feature.properties.public_id,
 			status: feature.properties.status,
-			type: feature.properties.table_name
+			type: feature.type,
 		});
 	}
 	report_table.reports = reports;
@@ -55,25 +64,36 @@ function onLoad() {
 			]
 		});
 		map.addLayer({
-			'id': 'mosquito',
+			'id': 'nuisance',
 			'source': 'tegola-mosquito',
-			'source-layer': 'report_location',
+			'source-layer': 'nuisance_location',
 			'type': 'circle',
 			'paint': {
-				'circle-color': '#4264fb',
+				'circle-color': "#DC4535",
 				'circle-radius': 7,
 				'circle-stroke-width': 2,
-				'circle-stroke-color': '#ffffff'
+				'circle-stroke-color': "#9C1C28"
+			}
+		});
+		map.addLayer({
+			'id': 'pool',
+			'source': 'tegola-mosquito',
+			'source-layer': 'pool_location',
+			'type': 'circle',
+			'paint': {
+				'circle-color': "#0D6EfD",
+				'circle-radius': 7,
+				'circle-stroke-width': 2,
+				'circle-stroke-color': "#024AB6"
 			}
 		});
 		map.on('render', () => {
-			const features = map.queryRenderedFeatures({target: {layerId: 'mosquito'}});
+			const nuisances = map.queryRenderedFeatures({target: {layerId: 'nuisance'}});
+			const pools = map.queryRenderedFeatures({target: {layerId: 'pool'}});
 
-			if (features) {
-				const uniqueFeatures = getUniqueFeatures(features, 'public_id');
-				// Populate features for the listing overlay.
-				renderReports(uniqueFeatures);
-			}
+			const uniqueFeatures = getUniqueFeatures(nuisances, pools, 'public_id');
+			// Populate features for the listing overlay.
+			renderReports(uniqueFeatures);
 		});
 		getGeolocation({
 			enableHighAccuracy: true,
@@ -116,13 +136,14 @@ document.addEventListener('DOMContentLoaded', onLoad);
 					<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 class="form-check custom-circle-checkbox">
+						<input class="form-check-input" type="checkbox" id="poiRestaurants" data-color="danger">
+						<label class="form-check-label" for="poiRestaurants">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 class="form-check custom-circle-checkbox">
+						<input class="form-check-input" type="checkbox" id="poiParks" data-color="success">
+						<label class="form-check-label" for="poiParks">Standing Water</label>
 					</div>
 				</div>
 			</form>
diff --git a/scss/rmo/status.scss b/scss/rmo/status.scss
index cdf5161f..ee5968d1 100644
--- a/scss/rmo/status.scss
+++ b/scss/rmo/status.scss
@@ -27,4 +27,40 @@
 		height: 300px;
 	}
 }
+/* Base styles for circular checkboxes */
+.custom-circle-checkbox .form-check-input {
+	border-radius: 50%;
+	width: 20px;
+	height: 20px;
+	cursor: pointer;
+	margin-top: 0.25rem;
+	background-image: none; /* Remove Bootstrap's default checkmark */
+	position: relative;
+}
 
+/* Style for when checked */
+.custom-circle-checkbox .form-check-input:checked {
+	background-color: currentColor;
+	border-color: currentColor;
+}
+
+/* Style for when unchecked - just an outline */
+.custom-circle-checkbox .form-check-input:not(:checked) {
+	background-color: transparent;
+}
+
+/* Colors based on data attribute */
+.custom-circle-checkbox .form-check-input[data-color="danger"] {
+	border-color: $red;
+	color: $red;
+}
+
+.custom-circle-checkbox .form-check-input[data-color="success"] {
+	border-color: $blue;
+	color: $blue;
+}
+
+.custom-circle-checkbox .form-check-input[data-color="info"] {
+	border-color: $green;
+	color: $green;
+}