Display location label/coordinates right-aligned in weather widget
This commit is contained in:
1 parent
fd73c3ec1c
commit
5c3a29a12e
1 file changed
+48
-1
+48
-1
@@ -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();
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user