feat(whereami): consolidate to /whereami endpoint, add OG title tag
This commit is contained in:
Adriano Caloiaro
parent
24512ad1f8
commit
ac71446095
1 changed files with 78 additions and 54 deletions
|
|
@ -1,3 +1,20 @@
|
|||
{{ define "title" }}
|
||||
{{ $title := "Where Am I? :: adriano.fyi" }}
|
||||
{{ $desc := "" }}
|
||||
{{ with resources.GetRemote "https://jellybee.bison-lizard.ts.net/whereami" }}
|
||||
{{ with .Err }}
|
||||
{{ else }}
|
||||
{{ with (. | transform.Unmarshal) }}
|
||||
{{ with .location.name }}{{ $title = printf "Adriano is in %s :: adriano.fyi" . }}{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<title>{{ $title }}</title>
|
||||
<meta property="og:title" content="{{ $title }}">
|
||||
<meta property="og:url" content="https://adriano.fyi/whereami">
|
||||
<meta property="og:type" content="website">
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin=""/>
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
|
||||
|
|
@ -44,65 +61,72 @@
|
|||
}).addTo(map);
|
||||
L.control.scale().addTo(map);
|
||||
|
||||
fetch('https://jellybee.bison-lizard.ts.net/current_location')
|
||||
.then(function(r) { return r.json(); })
|
||||
fetch('https://jellybee.bison-lizard.ts.net/whereami')
|
||||
.then(function(r) { if (!r.ok) throw new Error(r.status); return r.json(); })
|
||||
.then(function(data) {
|
||||
var lat = data.lat;
|
||||
var lon = data.lon;
|
||||
map.setView([lat, lon], 10);
|
||||
L.circle([lat, lon], {
|
||||
radius: 5000,
|
||||
color: 'red',
|
||||
fillColor: '#f03',
|
||||
fillOpacity: 0.25
|
||||
}).addTo(map);
|
||||
return fetch('https://nominatim.openstreetmap.org/reverse?lat=' + lat + '&lon=' + lon + '&format=json')
|
||||
.then(function(r) { return r.json(); })
|
||||
.then(function(geo) {
|
||||
var a = geo.address;
|
||||
var place = a.city || a.town || a.village || a.county || '';
|
||||
var state = a.state || '';
|
||||
document.getElementById('location-name').textContent = [place, state].filter(Boolean).join(', ');
|
||||
});
|
||||
var loc = data.location;
|
||||
var w = data.weather;
|
||||
|
||||
if (loc) {
|
||||
map.setView([loc.lat, loc.lon], 10);
|
||||
L.circle([loc.lat, loc.lon], {
|
||||
radius: 5000,
|
||||
color: 'red',
|
||||
fillColor: '#f03',
|
||||
fillOpacity: 0.25
|
||||
}).addTo(map);
|
||||
|
||||
if (loc.name) {
|
||||
document.getElementById('location-name').textContent = loc.name;
|
||||
} else {
|
||||
fetch('https://nominatim.openstreetmap.org/reverse?lat=' + loc.lat + '&lon=' + loc.lon + '&format=json')
|
||||
.then(function(r) { return r.json(); })
|
||||
.then(function(geo) {
|
||||
var a = geo.address;
|
||||
var place = a.city || a.town || a.village || a.county || '';
|
||||
var state = a.state || '';
|
||||
document.getElementById('location-name').textContent = [place, state].filter(Boolean).join(', ');
|
||||
});
|
||||
}
|
||||
} else {
|
||||
document.getElementById('location-name').textContent = 'Location unavailable';
|
||||
}
|
||||
|
||||
if (w) {
|
||||
function fmt1(v) { return v !== undefined && v !== null ? Math.round(v * 10) / 10 : null; }
|
||||
function fmt0(v) { return v !== undefined && v !== null ? Math.round(v) : null; }
|
||||
var cards = [
|
||||
{ label: 'Temperature', value: fmt1(w.tempf), unit: '°F' },
|
||||
{ label: 'Feels like', value: fmt1(w.feelsLike), unit: '°F' },
|
||||
{ label: 'Humidity', value: fmt0(w.humidity), unit: '%' },
|
||||
{ label: 'Dew point', value: fmt1(w.dewPoint), unit: '°F' },
|
||||
{ label: 'Wind speed', value: fmt1(w.windspeedmph), unit: 'mph' },
|
||||
{ label: 'Wind gust', value: fmt1(w.windgustmph), unit: 'mph' },
|
||||
{ label: 'Pressure', value: fmt1(w.baromrelin), unit: 'inHg' },
|
||||
{ label: 'UV index', value: fmt0(w.uv), unit: '' },
|
||||
{ label: 'Solar', value: fmt0(w.solarradiation), unit: 'W/m²' },
|
||||
{ label: 'Rain (hourly)', value: w.hourlyrainin, unit: 'in' },
|
||||
{ label: 'Rain (daily)', value: w.dailyrainin, unit: 'in' },
|
||||
{ label: 'Indoor temp', value: fmt1(w.tempinf), unit: '°F' },
|
||||
{ label: 'Indoor humidity', value: fmt0(w.humidityin), unit: '%' },
|
||||
].filter(function(c) { return c.value !== null && c.value !== undefined; });
|
||||
|
||||
if (cards.length > 0) {
|
||||
var updated = w.lastUpdated ? new Date(w.lastUpdated).toLocaleTimeString() : '';
|
||||
var html = '<h3 style="margin-bottom:0.3rem">My Weather Station</h3>';
|
||||
if (updated) html += '<div id="weather-updated">updated ' + updated + '</div>';
|
||||
html += '<div id="weather-grid">';
|
||||
cards.forEach(function(c) {
|
||||
html += '<div class="wx-card"><p class="wx-label">' + c.label + '</p><p class="wx-value">' + c.value + (c.unit ? ' ' + c.unit : '') + '</p></div>';
|
||||
});
|
||||
html += '</div>';
|
||||
document.getElementById('weather').innerHTML = html;
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(function() {
|
||||
document.getElementById('location-name').textContent = 'Location unavailable';
|
||||
});
|
||||
|
||||
fetch('https://jellybee.bison-lizard.ts.net/weather')
|
||||
.then(function(r) { if (!r.ok) throw new Error(r.status); return r.json(); })
|
||||
.then(function(w) {
|
||||
function fmt1(v) { return v !== undefined && v !== null ? Math.round(v * 10) / 10 : null; }
|
||||
function fmt0(v) { return v !== undefined && v !== null ? Math.round(v) : null; }
|
||||
var cards = [
|
||||
{ label: 'Temperature', value: fmt1(w.tempf), unit: '°F' },
|
||||
{ label: 'Feels like', value: fmt1(w.feelsLike), unit: '°F' },
|
||||
{ label: 'Humidity', value: fmt0(w.humidity), unit: '%' },
|
||||
{ label: 'Dew point', value: fmt1(w.dewPoint), unit: '°F' },
|
||||
{ label: 'Wind speed', value: fmt1(w.windspeedmph), unit: 'mph' },
|
||||
{ label: 'Wind gust', value: fmt1(w.windgustmph), unit: 'mph' },
|
||||
{ label: 'Pressure', value: fmt1(w.baromrelin), unit: 'inHg' },
|
||||
{ label: 'UV index', value: fmt0(w.uv), unit: '' },
|
||||
{ label: 'Solar', value: fmt0(w.solarradiation), unit: 'W/m²' },
|
||||
{ label: 'Rain (hourly)', value: w.hourlyrainin, unit: 'in' },
|
||||
{ label: 'Rain (daily)', value: w.dailyrainin, unit: 'in' },
|
||||
{ label: 'Indoor temp', value: fmt1(w.tempinf), unit: '°F' },
|
||||
{ label: 'Indoor humidity', value: fmt0(w.humidityin), unit: '%' },
|
||||
].filter(function(c) { return c.value !== null && c.value !== undefined; });
|
||||
|
||||
if (cards.length === 0) return;
|
||||
|
||||
var updated = w.lastUpdated ? new Date(w.lastUpdated).toLocaleTimeString() : '';
|
||||
var html = '<h3 style="margin-bottom:0.3rem">My Weather Station</h3>';
|
||||
if (updated) html += '<div id="weather-updated">updated ' + updated + '</div>';
|
||||
html += '<div id="weather-grid">';
|
||||
cards.forEach(function(c) {
|
||||
html += '<div class="wx-card"><p class="wx-label">' + c.label + '</p><p class="wx-value">' + c.value + (c.unit ? ' ' + c.unit : '') + '</p></div>';
|
||||
});
|
||||
html += '</div>';
|
||||
document.getElementById('weather').innerHTML = html;
|
||||
})
|
||||
.catch(function() {});
|
||||
</script>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Reference in a new issue