From d464a5fbd0cdf4a883b9b20aaf213b2e9677ec38 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Fri, 6 Feb 2026 16:55:29 +0000
Subject: [PATCH] Show a tooltip when disabling the lookup button on status
 page

And fix some auto-formatting
---
 .../static/js/address-or-report-suggestion.js |  21 +--
 rmo/template/base.html                        |   8 +-
 rmo/template/status.html                      | 172 +++++++++++-------
 3 files changed, 121 insertions(+), 80 deletions(-)

diff --git a/html/static/js/address-or-report-suggestion.js b/html/static/js/address-or-report-suggestion.js
index cf82e66a..6c40eec2 100644
--- a/html/static/js/address-or-report-suggestion.js
+++ b/html/static/js/address-or-report-suggestion.js
@@ -164,24 +164,23 @@ class AddressOrReportInput extends HTMLElement {
 		this.shadowRoot.querySelectorAll('.suggestion-item').forEach(el => {
 			el.addEventListener('click', e => {
 				const type = el.dataset.type;
+				let detail = null;
 				if (type == "report") {
 					const index = parseInt(el.dataset.index);
-					const report = this._reports[index];
-					this.value = _formatReportID(report.id);
+					detail = this._reports[index];
+					this.value = _formatReportID(detail.id);
 					this._suggestionsContainer.innerHTML = "";
 				} else if (type == "address") {
 					const index = parseInt(el.dataset.index);
-					const address = this._addresses[index];
-					this.SetValue(address);
+					detail = this._addresses[index];
+					this.SetValue(detail);
 					// Dispatch custom event
-					this.dispatchEvent(new CustomEvent('address-selected', {
-						bubbles: true,
-						composed: true, // Allows event to cross shadow DOM boundary
-						detail: {
-							location: address
-						}
-					}));
 				}
+				this.dispatchEvent(new CustomEvent('suggestion-selected', {
+					bubbles: true,
+					composed: true, // Allows event to cross shadow DOM boundary
+					detail: detail,
+				}));
 			});
 		});
 	}
diff --git a/rmo/template/base.html b/rmo/template/base.html
index 327dc56c..d96bdd81 100644
--- a/rmo/template/base.html
+++ b/rmo/template/base.html
@@ -15,6 +15,7 @@
 		<link rel="icon" href="/static/favicon-rmo.ico" type="image/x-icon" />
 		{{ block "extraheader" . }}{{ end }}
 		<script>
+			var tooltipByElementId = {};
 			document.addEventListener("DOMContentLoaded", function () {
 				var popoverTriggerList = [].slice.call(
 					document.querySelectorAll('[data-bs-toggle="popover"]'),
@@ -28,7 +29,12 @@
 					document.querySelectorAll('[data-bs-toggle="tooltip"]'),
 				);
 				var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
-					return new bootstrap.Tooltip(tooltipTriggerEl);
+					let t = new bootstrap.Tooltip(tooltipTriggerEl);
+					if (tooltipTriggerEl.id != "") {
+						tooltipByElementId[tooltipTriggerEl.id] = t;
+						console.log("added tooltip to", tooltipTriggerEl.id);
+					}
+					return t;
 				});
 				console.log("Initialized ", tooltipTriggerList.length, " tooltips");
 			});
diff --git a/rmo/template/status.html b/rmo/template/status.html
index 8d860455..099dcf8d 100644
--- a/rmo/template/status.html
+++ b/rmo/template/status.html
@@ -1,13 +1,13 @@
-{{template "base.html" .}}
+{{ 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/address-or-report-suggestion.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>
+{{ 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/address-or-report-suggestion.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>
 <script>
 const MAPBOX_ACCESS_TOKEN = '{{.MapboxToken}}';
 var markers = [];
@@ -46,13 +46,16 @@ function handleLookupFormSubmit(e) {
 
 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 = true;
-		lookupButton.classList.add("disabled");
-	} else {
 		lookupButton.disabled = false;
 		lookupButton.classList.remove("disabled");
+		lookupButtonTooltip.disable()
+	} else {
+		lookupButton.disabled = true;
+		lookupButton.classList.add("disabled");
+		lookupButtonTooltip.enable()
 	}
 }
 
@@ -137,12 +140,13 @@ function onLoad() {
 		window.location = "/status/" + e.detail.reportId;
 	})
 
+	document.querySelector("address-or-report-input").addEventListener("suggestion-selected", maybeEnableLookupButton);
 	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) {
@@ -161,71 +165,104 @@ function renderReports(features) {
 }
 document.addEventListener('DOMContentLoaded', onLoad);
 </script>
-{{end}}
-{{define "content"}}
-{{if (eq .District nil)}}
-	{{template "header-rmo" .}}
-{{else}}
-	{{template "header-district" .District}}
-{{end}}
-<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-or-report-input
+{{ end }}
+{{ define "content" }}
+	{{ if (eq .District nil) }}
+		{{ template "header-rmo" . }}
+	{{ else }}
+		{{ template "header-district" .District }}
+	{{ end }}
+	<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-or-report-input
 							api-key="{{ .MapboxToken }}"
 							name="address-or-report"
 							placeholder="Enter a report ID, address, neighborhood, or zip code"
+						></address-or-report-input>
+					</div>
+					<div class="col-md-3">
+						<span
+							data-bs-toggle="tooltip"
+							id="lookup-tooltip"
+							title="You can look up a report once you type in the full report ID. Start typing and I'll suggest complete IDs"
+						>
+							<button
+								type="submit"
+								class="btn btn-primary btn-lg w-100 disabled"
+								disabled
+								id="lookup"
+							>
+								Lookup Report by ID
+							</button>
+						</span>
+					</div>
+					<div class="col-12">
+						<div class="form-check custom-circle-checkbox">
+							<input
+								class="form-check-input"
+								type="checkbox"
+								id="checkboxNuisance"
+								data-color="danger"
 							/>
-				</div>
-				<div class="col-md-3">
-					<button type="submit" class="btn btn-primary btn-lg w-100 disabled" disabled id="lookup">Lookup</button>
-				</div>
-				<div class="col-12">
-					<div class="form-check custom-circle-checkbox">
-						<input class="form-check-input" type="checkbox" id="checkboxNuisance" data-color="danger">
-						<label class="form-check-label" for="checkboxNuisance">Mosquito Nuisance</label>
-					</div>
+							<label class="form-check-label" for="checkboxNuisance"
+								>Mosquito Nuisance</label
+							>
+						</div>
 
-					<div class="form-check custom-circle-checkbox">
-						<input class="form-check-input" type="checkbox" id="checkboxWater" data-color="success">
-						<label class="form-check-label" for="checkboxWater">Standing Water</label>
+						<div class="form-check custom-circle-checkbox">
+							<input
+								class="form-check-input"
+								type="checkbox"
+								id="checkboxWater"
+								data-color="success"
+							/>
+							<label class="form-check-label" for="checkboxWater"
+								>Standing Water</label
+							>
+						</div>
 					</div>
-				</div>
-			</form>
+				</form>
+			</div>
 		</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>Reports Map</h5>
-		</div>
-		<div class="card-body p-0">
-			<map-multipoint 
+
+		<!-- 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>Reports Map</h5>
+			</div>
+			<div class="card-body p-0">
+				<map-multipoint
 					api-key="{{ .MapboxToken }}"
 					latitude="36.3"
 					longitude="-119.2"
-					tegola="{{.URL.Tegola}}"
+					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="bi bi-geo-fill me-2"></i>Reports Near You</h5>
-			<span class="badge bg-light text-dark" id="report-count">- Reports Found</span>
-		</div>
-		<div class="card-body p-0">
-			<div class="table-responsive">
-				<report-table />
+				></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="bi bi-geo-fill me-2"></i>Reports Near You
+				</h5>
+				<span class="badge bg-light text-dark" id="report-count"
+					>- 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">
@@ -241,7 +278,6 @@ document.addEventListener('DOMContentLoaded', onLoad);
 				</ul>
 			</nav>
 		</div>
-		-->
+		--></div>
 	</div>
-</div>
-{{end}}
+{{ end }}