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

Fix reference to full formatted address

Browse source
This commit is contained in:
Eli Ribble 2026-03-09 18:28:03 +00:00
parent 99dc9a08c0
commit 3c43f72028
No known key found for this signature in database
1 changed files with 49 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -30,28 +30,28 @@ class AddressInput extends HTMLElement {
// Lifecycle: when element is removed from the DOM
disconnectedCallback() {
this._input.removeEventListener('input', this._handleInput);
this._input.removeEventListener("input", this._handleInput);
}
// Lifecycle: watch these attributes for changes
static get observedAttributes() {
return ['placeholder', 'api-key'];
return ["placeholder", "api-key"];
}
// Lifecycle: respond to attribute changes
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'placeholder' && this._input) {
if (name === "placeholder" && this._input) {
this._input.placeholder = newValue;
}
if (name === 'api-key') {
if (name === "api-key") {
this._apiKey = newValue;
}
}
// Properties API
get value() {
return this._input ? this._input.value : '';
return this._input ? this._input.value : "";
}
set value(val) {
@ -72,18 +72,16 @@ class AddressInput extends HTMLElement {
// Clear suggestions if input is less than 3 characters
if (searchText.length < 3) {
this._suggestions.innerHTML = '';
this._suggestions.innerHTML = "";
return;
}
// Debounce API calls (wait 300ms after typing stops)
this._debounceTimer = setTimeout(() => {
this._fetchAddressSuggestions(searchText)
.then(response => {
this._fetchAddressSuggestions(searchText).then((response) => {
this._renderSuggestions(response.features);
});
}, 300);
}
async _fetchAddressSuggestions(text) {
@ -94,13 +92,14 @@ class AddressInput extends HTMLElement {
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching geocoding suggestions:', error);
console.error("Error fetching geocoding suggestions:", error);
}
}
_renderSuggestions(suggestions) {
console.log("Rendering suggestions", suggestions);
this._suggestions.innerHTML = suggestions.map((item, index) => {
this._suggestions.innerHTML = suggestions
.map((item, index) => {
if (item.properties.place_formatted != "") {
return `
<div class="suggestion-item list-group-item"
@ -109,7 +108,7 @@ class AddressInput extends HTMLElement {
data-lng="${item.geometry.coordinates[0]}">
<div class="main-address">${item.properties.name || item.properties.full_address}</div>
<div class="place-info">${item.properties.place_formatted}</div>
</div>`
</div>`;
} else {
return `
<div class="suggestion-item list-group-item"
@ -118,31 +117,34 @@ class AddressInput extends HTMLElement {
data-lng="${item.coordinates.lng}">
<div class="main-address">${item.properties.name || item.properties.full_address}</div>
<div class="place-info">${item.properties.place_formatted}</div>
</div>`
</div>`;
}
}).join('');
})
.join("");
// Add click listeners to suggestions
this.shadowRoot.querySelectorAll('.suggestion-item').forEach(el => {
el.addEventListener('click', e => {
this.shadowRoot.querySelectorAll(".suggestion-item").forEach((el) => {
el.addEventListener("click", (e) => {
const index = parseInt(el.dataset.index);
const suggestion = suggestions[index];
this.SetValue(suggestion);
// Dispatch custom event
this.dispatchEvent(new CustomEvent('address-selected', {
this.dispatchEvent(
new CustomEvent("address-selected", {
bubbles: true,
composed: true, // Allows event to cross shadow DOM boundary
detail: {
location: suggestion
}
}));
location: suggestion,
},
}),
);
});
});
}
// Initial render of component
render() {
const placeholder = this.getAttribute('placeholder') || 'Enter address';
const placeholder = this.getAttribute("placeholder") || "Enter address";
this.shadowRoot.innerHTML = `
<style>
@ -192,15 +194,15 @@ class AddressInput extends HTMLElement {
// Public methods
clear() {
if (this._input) {
this._input.value = '';
this._suggestions.innerHTML = '';
this._input.value = "";
this._suggestions.innerHTML = "";
}
}
SetValue(suggestion) {
this.value = suggestion.properties.full_address;
this._suggestions.innerHTML = '';
this.value = suggestion.properties.formatted_address_line;
this._suggestions.innerHTML = "";
}
}
customElements.define('address-input', AddressInput);
customElements.define("address-input", AddressInput);