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

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

@ -5,14 +5,14 @@ class AddressInput extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: "open" });
this.attachShadow({ mode: "open" });
this.internals = this.attachInternals();
this.render();
// Element references
this._input = this.shadowRoot.querySelector("input");
this._suggestions = this.shadowRoot.querySelector(".suggestions-container");
// Bind methods
this._handleInput = this._handleInput.bind(this);
@ -30,30 +30,30 @@ 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) {
if (this._input) {
this._input.value = val;
@ -63,87 +63,89 @@ class AddressInput extends HTMLElement {
}
}
// Private methods
// Private methods
_handleInput(event) {
const searchText = event.target.value.trim();
// Clear previous timer
clearTimeout(this._debounceTimer);
// 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._renderSuggestions(response.features);
});
this._fetchAddressSuggestions(searchText).then((response) => {
this._renderSuggestions(response.features);
});
}, 300);
}
async _fetchAddressSuggestions(text) {
try {
const url = `https://api.mapbox.com/search/geocode/v6/forward?q=${encodeURIComponent(text)}&access_token=${this._apiKey}`;
const response = await fetch(url);
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) => {
if (item.properties.place_formatted != "") {
return `
this._suggestions.innerHTML = suggestions
.map((item, index) => {
if (item.properties.place_formatted != "") {
return `
<div class="suggestion-item list-group-item"
data-index="${index}"
data-lat="${item.geometry.coordinates[1]}"
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>`
} else {
return `
</div>`;
} else {
return `
<div class="suggestion-item list-group-item"
data-index="${index}"
data-lat="${item.coordinates.lat}"
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>`
}
}).join('');
</div>`;
}
})
.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', {
bubbles: true,
composed: true, // Allows event to cross shadow DOM boundary
detail: {
location: suggestion
}
}));
this.dispatchEvent(
new CustomEvent("address-selected", {
bubbles: true,
composed: true, // Allows event to cross shadow DOM boundary
detail: {
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>
@import url('/static/vendor/css/bootstrap.min.css');
@ -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);