Display location label/coordinates right-aligned in weather widget

This commit is contained in:
Richard Zink committed 2026-10-07 14:35:10 +02:00
1 parent fd73c3ec1c
commit 5c3a29a12e
1 file changed
+48 -1
+48 -1
View File
@@ -257,6 +257,18 @@
.weather-current-temp { .weather-current-temp {
font-size: 2.4em; font-size: 2.4em;
font-weight: bold; font-weight: bold;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1vw;
}
.weather-location {
font-size: 0.45em;
font-weight: normal;
color: var(--icon);
text-align: right;
word-break: break-word;
max-width: 60%;
} }
.weather-current-detail { .weather-current-detail {
font-size: 1em; font-size: 1em;
@@ -1643,12 +1655,44 @@ window.weatherThemes = {
window.CONFIG.location = { lat: WEATHER_LAT, lon: WEATHER_LON }; window.CONFIG.location = { lat: WEATHER_LAT, lon: WEATHER_LON };
// Reload weather with new coordinates // Reload weather with new coordinates
if (typeof fetchWeather === 'function') fetchWeather(); if (typeof fetchWeather === 'function') fetchWeather();
// Reverse geocode to get place name
reverseGeocode(WEATHER_LAT, WEATHER_LON);
}, },
function() { /* ignored - keep default */ }, function() { /* ignored - keep default */ },
{ timeout: 10000 } { timeout: 10000 }
); );
} }
// Reverse geocode lat/lon to a place name using Nominatim (OpenStreetMap).
// Free, no API key required. Has a 1 req/sec rate limit.
function reverseGeocode(lat, lon) {
var url = 'https://nominatim.openstreetmap.org/reverse?format=json&lat=' +
lat + '&lon=' + lon + '&zoom=10&addressdetails=1';
fetch(url, {
headers: { 'Accept-Language': (window.CONFIG && window.CONFIG.language) || 'en' }
})
.then(function(r) { return r.ok ? r.json() : null; })
.then(function(data) {
if (data && data.address) {
var addr = data.address;
var name = addr.city || addr.town || addr.village || addr.hamlet ||
addr.suburb || addr.county || addr.state || data.display_name;
if (window.CONFIG && window.CONFIG.location) {
window.CONFIG.location.label = name;
}
}
})
.catch(function() { /* ignore errors */ });
}
// If config has lat/lon but no label, fetch the label
function fetchLocationLabel() {
if (!window.CONFIG || !window.CONFIG.location) return;
if (window.CONFIG.location.label) return;
if (!window.CONFIG.location.lat) return;
reverseGeocode(window.CONFIG.location.lat, window.CONFIG.location.lon);
}
// Get timezone offset based on user's local time // Get timezone offset based on user's local time
function getTimezoneOffsetMinutes() { function getTimezoneOffsetMinutes() {
return new Date().getTimezoneOffset(); return new Date().getTimezoneOffset();
@@ -1781,7 +1825,8 @@ window.weatherThemes = {
? Math.round(current.wind_speed_10m * 0.621371) + ' mph' ? Math.round(current.wind_speed_10m * 0.621371) + ' mph'
: Math.round(current.wind_speed_10m) + ' km/h'; : Math.round(current.wind_speed_10m) + ' km/h';
var currentHtml = '<div class="weather-current-icon">' + weatherSVG(current.weather_code) + '</div>' + var currentHtml = '<div class="weather-current-icon">' + weatherSVG(current.weather_code) + '</div>' +
'<div><div class="weather-current-temp">' + tempDisplay + '</div>' + '<div><div class="weather-current-temp"><span>' + tempDisplay + '</span><span class="weather-location" id="weather-location">' +
((window.CONFIG && window.CONFIG.location && (window.CONFIG.location.label || (window.CONFIG.location.lat.toFixed(2) + ',' + window.CONFIG.location.lon.toFixed(2)))) || '') + '</span></div>' +
'<div class="weather-current-detail">' + '<div class="weather-current-detail">' +
t('Humidity') + ' ' + Math.round(current.relative_humidity_2m) + '% · ' + t('Wind') + ' ' + windDisplay + '</div></div>'; t('Humidity') + ' ' + Math.round(current.relative_humidity_2m) + '% · ' + t('Wind') + ' ' + windDisplay + '</div></div>';
document.getElementById('weather-current').innerHTML = currentHtml; document.getElementById('weather-current').innerHTML = currentHtml;
@@ -1847,6 +1892,8 @@ window.weatherThemes = {
} }
// Try browser geolocation if no explicit location configured // Try browser geolocation if no explicit location configured
initBrowserGeolocation(); initBrowserGeolocation();
// Fetch location label from lat/lon if available
fetchLocationLabel();
animate(); animate();
tick(); tick();