display relative data age instead of exact timestamp

This commit is contained in:
John Bowdre 2024-02-09 09:16:05 -06:00
parent 0b412355d7
commit 3715b4fb95

View file

@ -5,20 +5,37 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous">
<title>Weather Test</title> <title>Weather Test</title>
<script> <script>
// based on https://kris.omg.lol // get ready to calculate relative time
var units = {
year : 24 * 60 * 60 * 1000 * 365,
month : 24 * 60 * 60 * 1000 * 365/12,
day : 24 * 60 * 60 * 1000,
hour : 60 * 60 * 1000,
minute: 60 * 1000,
second: 1000
}
var rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
var getRelativeTime = (d1, d2 = new Date()) => {
var elapsed = d1 - d2
for (var u in units)
if (Math.abs(elapsed) > units[u] || u == 'second')
return rtf.format(Math.round(elapsed/units[u]), u)
}
// weather code inspired by https://kris.omg.lol
// fetch from API proxy // fetch from API proxy
fetch('https://paste.jbowdre.lol/tempest.json/raw') fetch('https://paste.jbowdre.lol/tempest.json/raw')
.then(res => res.json()) .then(res => res.json())
.then(function(res){ .then(function(res){
// format data // calculate age of last update
localTime = res.time; updateTime = res.time;
var localTime = parseInt(localTime); var updateTime = parseInt(updateTime);
var localTime = localTime*1000; var updateTime = updateTime*1000;
var localTime = new Date(localTime); var updateTime = new Date(updateTime);
var localDate = localTime.toLocaleDateString(); updateAge = getRelativeTime(updateTime);
var localTime = localTime.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', hour12: false});
var localTime = localDate + " " + localTime; // parse data
conditions = res.conditions; conditions = res.conditions;
temp = (res.air_temperature)+ "° F ("+(((res.air_temperature-32)*5)/9).toFixed(1) + "° C)"; temp = (res.air_temperature)+ "° F ("+(((res.air_temperature-32)*5)/9).toFixed(1) + "° C)";
humidity = res.relative_humidity + "%"; humidity = res.relative_humidity + "%";
@ -29,7 +46,7 @@
icon = res.icon; icon = res.icon;
// display data // display data
document.getElementById('time').innerHTML = localTime; document.getElementById('time').innerHTML = updateAge;
document.getElementsByClassName('fa-cloud-sun-rain')[0].classList = CLASS_MAP_WX[icon]; document.getElementsByClassName('fa-cloud-sun-rain')[0].classList = CLASS_MAP_WX[icon];
document.getElementById('conditions').innerHTML = conditions; document.getElementById('conditions').innerHTML = conditions;
document.getElementById('temp').innerHTML = temp; document.getElementById('temp').innerHTML = temp;