From 12ad9fa483e93d858b24b5638976fbd8673239b4 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Thu, 8 Jan 2026 22:43:02 +0000
Subject: [PATCH] Show location details when the location suggestion is
 accepted

---
 .../component/location-geocode-header.html    | 74 ++++++++++++++++++-
 .../template/component/location-geocode.html  | 32 +++++++-
 2 files changed, 100 insertions(+), 6 deletions(-)

diff --git a/public-report/template/component/location-geocode-header.html b/public-report/template/component/location-geocode-header.html
index a21405d1..29996131 100644
--- a/public-report/template/component/location-geocode-header.html
+++ b/public-report/template/component/location-geocode-header.html
@@ -1,15 +1,35 @@
 {{define "location-geocode-header"}}
 <style>
+.detail-label {
+	font-size: 0.8rem;
+	text-transform: uppercase;
+	color: #6c757d;
+	margin-bottom: 2px;
+	font-weight: 600;
+}
+.detail-value {
+	font-weight: 500;
+}
+.main-address {
+	font-weight: 500;
+}
+.place-info {
+	font-size: 0.85rem;
+	color: #6c757d;
+	margin-top: 2px;
+}
 .suggestions-container {
 	position: absolute;
 	width: 100%;
 	max-height: 300px;
 	overflow-y: auto;
 	z-index: 1000;
+	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 }
 .suggestion-item {
 	cursor: pointer;
-	padding: 8px 12px;
+	padding: 10px 12px;
+	border-bottom: 1px solid #f0f0f0;
 }
 .suggestion-item:hover {
 	background-color: #f8f9fa;
@@ -34,15 +54,26 @@ function displaySuggestions(suggestions) {
 	suggestions.forEach(suggestion => {
 		const item = document.createElement('div');
 		item.className = 'suggestion-item list-group-item';
-		item.textContent = suggestion.properties.name || suggestion.properties.full_address;
-		
+
+		// Create structure for the main address and place info
+		const mainAddressDiv = document.createElement('div');
+		mainAddressDiv.className = 'main-address';
+		mainAddressDiv.textContent = suggestion.properties.name || suggestion.properties.full_address;
+
+		item.appendChild(mainAddressDiv);
+		if (suggestion.properties.place_formatted) {
+			const placeInfoDiv = document.createElement('div');
+			placeInfoDiv.className = 'place-info';
+			placeInfoDiv.textContent = suggestion.properties.place_formatted || '';
+			item.appendChild(placeInfoDiv);
+		}
 		// Handle click on a suggestion
 		item.addEventListener('click', function() {
 			addressInput.value = suggestion.properties.name || suggestion.properties.full_address;
 			suggestionsContainer.classList.add('d-none');
 			
 			// Display the selected location details
-			locationDetails.textContent = JSON.stringify(suggestion, null, 2);
+			displaySelectedLocation(suggestion);
 		});
 		
 		suggestionsContainer.appendChild(item);
@@ -66,6 +97,41 @@ async function fetchGeocodingSuggestions(query) {
 	}
 }
 
+function displaySelectedLocation(suggestion) {
+	const locationDisplayContainer = document.getElementById('locationDisplayContainer');
+
+	// Show location display container
+	locationDisplayContainer.classList.remove('d-none');
+	
+	// Extract context data from properties
+	const props = suggestion.properties;
+	const context = props.context || {};
+	
+	// Populate structured fields
+	// Street Address - combine address, street, housenumber if available
+	let addressStr = '';
+	if (context.address) addressStr += context.address.address_number;
+	if (context.street) {
+		 if (addressStr) addressStr += ' ';
+		 addressStr += context.street.name;
+	}
+	if (addressStr === '') {
+		 addressStr = props.name || props.full_address || '-';
+	}
+	streetAddress.textContent = addressStr;
+	
+	// Post Code
+	postCode.textContent = context.postcode.name || '-';
+	
+	// District (could be district, locality, or place)
+	district.textContent = context.district.name || context.place.name || context.locality.name || '-';
+	
+	// Region (state, province, etc.)
+	region.textContent = context.region.name || '-';
+	
+	// Country
+	country.textContent = context.country.name || '-';
+}
 function onAddressInput() {
 	const suggestionsContainer = document.getElementById('suggestions');
 
diff --git a/public-report/template/component/location-geocode.html b/public-report/template/component/location-geocode.html
index 83665783..d73ecd04 100644
--- a/public-report/template/component/location-geocode.html
+++ b/public-report/template/component/location-geocode.html
@@ -8,8 +8,36 @@
 		<div id="suggestions" class="suggestions-container list-group d-none"></div>
 	</div>
 	<div class="mt-3">
-		<h5>Selected Location Details:</h5>
-		<pre id="locationDetails" class="p-3 bg-light">No location selected</pre>
+		<!-- Structured Location Display -->
+		<div id="locationDisplayContainer" class="mt-4 d-none">
+			<h5 class="mb-3">Location Details</h5>
+			<div class="location-card p-3 mb-3">
+				<div class="location-detail">
+					<div class="detail-label">Street Address</div>
+					<div id="streetAddress" class="detail-value">-</div>
+				</div>
+				
+				<div class="location-detail">
+					<div class="detail-label">Post Code</div>
+					<div id="postCode" class="detail-value">-</div>
+				</div>
+				
+				<div class="location-detail">
+					<div class="detail-label">District/Place</div>
+					<div id="district" class="detail-value">-</div>
+				</div>
+				
+				<div class="location-detail">
+					<div class="detail-label">Region/State</div>
+					<div id="region" class="detail-value">-</div>
+				</div>
+				
+				<div class="location-detail">
+					<div class="detail-label">Country</div>
+					<div id="country" class="detail-value">-</div>
+				</div>
+			</div>
+		</div>
 	</div>
 </div>
 {{end}}