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

Move to using web components for custom components

Browse source 
They're modular, which is really nice.
This commit is contained in:
Eli Ribble 2026-01-14 18:21:56 +00:00
parent b91718cd7c
commit 6fd0ed8711
No known key found for this signature in database
9 changed files with 473 additions and 280 deletions
Download patch file Download diff file Expand all files Collapse all files

206
public-report/template/component/location-geocode-header.html
View file

@ -1,206 +0,0 @@
{{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: 10px 12px;
border-bottom: 1px solid #f0f0f0;
}
.suggestion-item:hover {
background-color: #f8f9fa;
}
</style>
<script>
// Display suggestions in the dropdown
function displaySuggestions(suggestions) {
const suggestionsContainer = document.getElementById('suggestions');
// Clear previous suggestions
suggestionsContainer.innerHTML = '';
if (suggestions.length === 0) {
suggestionsContainer.classList.add('d-none');
return;
}
// Create and append suggestion items
suggestions.forEach(suggestion => {
const item = document.createElement('div');
item.className = 'suggestion-item list-group-item';
// 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() {
// Hide the suggestions container
setLocationInputs(suggestion);
suggestionsContainer.classList.add('d-none');
displaySelectedLocation(suggestion);
const locationSelected = new CustomEvent("locationselected", {
detail: {
coordinates: suggestion.geometry.coordinates,
},
});
suggestionsContainer.dispatchEvent(locationSelected);
});
suggestionsContainer.appendChild(item);
});
// Show the suggestions container
suggestionsContainer.classList.remove('d-none');
}
// Fetch suggestions from Mapbox API
async function fetchGeocodingSuggestions(query) {
// Replace with your actual Mapbox access token
const MAPBOX_ACCESS_TOKEN = '{{.MapboxToken}}';
try {
const url = `https://api.mapbox.com/search/geocode/v6/forward?q=${encodeURIComponent(query)}&access_token=${MAPBOX_ACCESS_TOKEN}`;
const response = await fetch(url);
const data = await response.json();
displaySuggestions(data.features || []);
} catch (error) {
console.error('Error fetching geocoding suggestions:', error);
}
}
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');
let debounceTimer;
const query = this.value.trim();
// Clear previous timer
clearTimeout(debounceTimer);
// Clear suggestions if input is less than 3 characters
if (query.length < 3) {
suggestionsContainer.classList.add('d-none');
suggestionsContainer.innerHTML = '';
return;
}
// Debounce API calls (wait 300ms after typing stops)
debounceTimer = setTimeout(() => {
fetchGeocodingSuggestions(query);
}, 300);
}
function setLocationInputs(suggestion) {
let address = document.getElementById('address');
let country = document.getElementById('address-country');
let latitude = document.getElementById('latitude');
let longitude = document.getElementById('longitude');
let latlngAccuracyType = document.getElementById('latlng-accuracy-type');
let postcode = document.getElementById('address-postcode');
let place = document.getElementById('address-place');
let region = document.getElementById('address-region');
let street = document.getElementById('address-street');
// Extract context data from properties
const props = suggestion.properties;
const context = props.context || {};
// Populate structured fields
address.value = props.full_address;
country.value = context.country.name;
latitude.value = props.coordinates.latitude;
longitude.value = props.coordinates.longitude;
latlngAccuracyType.value = props.coordinates.accuracy;
postcode.value = context.postcode.name;
place.value = context.place.name;
region.value = context.region.name;
street.value = context.country.name;
}
document.addEventListener('DOMContentLoaded', function() {
const address = document.getElementById('address');
const suggestionsContainer = document.getElementById('suggestions');
const locationDetails = document.getElementById('locationDetails');
// Listen for input changes
address.addEventListener('input', onAddressInput);
// Close suggestions when clicking outside
document.addEventListener('click', function(event) {
if (!address.contains(event.target) && !suggestionsContainer.contains(event.target)) {
suggestionsContainer.classList.add('d-none');
}
});
});
</script>
{{end}}

52
public-report/template/component/location-geocode.html
View file

@ -1,52 +0,0 @@
{{define "location-geocode"}}
<!-- Hidden fields for location data -->
<input type="hidden" id="address-country" name="address-country"/>
<input type="hidden" id="address-postcode" name="address-postcode"/>
<input type="hidden" id="address-place" name="address-place"/>
<input type="hidden" id="address-region" name="address-region"/>
<input type="hidden" id="address-street" name="address-street"/>
<input type="hidden" id="latitude" name="latitude"/>
<input type="hidden" id="longitude" name="longitude"/>
<input type="hidden" id="latlng-accuracy-type" name="latlng-accuracy-type"/>
<input type="hidden" id="latlng-accuracy-value" name="latlng-accuracy-value"/>
<div class="col-md-6">
<div class="mb-3 position-relative">
<label for="addressInput" class="form-label">Enter address</label>
<input type="text" class="form-control" id="address" name="address"
placeholder="Start typing an address (min 3 characters)">
<div id="suggestions" class="suggestions-container list-group d-none"></div>
</div>
<div class="mt-3">
<!-- 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}}