Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update address input based on marker drag

Browse source
This commit is contained in:
Eli Ribble 2026-01-30 22:00:43 +00:00
parent 96e3441556
commit de3a1d23b6
No known key found for this signature in database
3 changed files with 20 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

9
html/static/js/address-suggestion.js
View file

@ -123,9 +123,7 @@ class AddressInput extends HTMLElement {
el.addEventListener('click', e => {
const index = parseInt(el.dataset.index);
const suggestion = suggestions[index];
this.value = suggestion.properties.full_address;
this._suggestions.innerHTML = '';
this.SetValue(suggestion);
// Dispatch custom event
this.dispatchEvent(new CustomEvent('address-selected', {
bubbles: true,
@ -194,6 +192,11 @@ class AddressInput extends HTMLElement {
this._suggestions.innerHTML = '';
}
}
SetValue(suggestion) {
this.value = suggestion.properties.full_address;
this._suggestions.innerHTML = '';
}
}
customElements.define('address-input', AddressInput);

2
html/static/js/geocode.js
View file

@ -7,5 +7,5 @@ async function geocodeReverse(MAPBOX_ACCESS_TOKEN, lngLat) {
console.warn("No results for reverse geocode");
return;
}
const match = data.features[0];
return data
}

21
rmo/template/nuisance.html
View file

@ -11,6 +11,17 @@
<script>
const MAPBOX_ACCESS_TOKEN = "{{.MapboxToken}}";
// Handle inspection type selection
async function handleMarkerDrag(lngLat) {
const response = await geocodeReverse(MAPBOX_ACCESS_TOKEN, {
lat: lngLat.lat,
lng: lngLat.lng,
})
console.log("marker drag reverse geocode", response);
if (response !== undefined && response.features.length > 0) {
const addressInput = document.querySelector("address-input");
addressInput.SetValue(response.features[0]);
}
}
function selectInspectionType(type) {
// Remove selected class from both cards
document.getElementById('propertyInspection').classList.remove('selected');
@ -64,12 +75,8 @@ function toggleCollapse(something) {
// Check for source identification
document.addEventListener('DOMContentLoaded', function() {
// Elements
const addressInput = document.querySelector("address-input");
const photoInput = document.getElementById('photos');
// Handle photo selection
//photoInput.addEventListener('change', handlePhotoSelection);
// Handle drag and drop
const photoDropArea = document.getElementById('photoDropArea');
photoDropArea.addEventListener('dragover', function(e) {
@ -122,12 +129,10 @@ document.addEventListener('DOMContentLoaded', function() {
mapLocator.addEventListener("markerdragend", (e) => {
const marker = event.detail.marker;
const lngLat = marker.getLngLat();
//displaySelectedCoordinates(lngLat);
geocodeReverse(MAPBOX_ACCESS_TOKEN, lngLat);
handleMarkerDrag(lngLat);
});
const addressDisplay = document.querySelector("address-display");
const addressInput = document.querySelector("address-input");
addressInput.addEventListener("address-selected", (event) => {
const l = event.detail.location;
console.log("Address selected", l);