add offline handling

This commit is contained in:
Siwat Sirichai 2024-01-11 10:38:54 +00:00
parent a8e40f9cd8
commit b2e445478c
9 changed files with 62 additions and 10 deletions

View file

@ -27,6 +27,7 @@
--icon-very-unhealthy: /images/aqi-icon-l5.svg;
--icon-hazardous: /images/aqi-icon-l6.svg;
}
body {
display: flex;
justify-content: center;
@ -167,6 +168,7 @@
margin-top: 7px;
margin-bottom: 7px;
}
#health_icon {
transform: scale(2);
padding-top: 30px;
@ -180,7 +182,6 @@
<p class="title_text" id="title">Loading . . .</p>
<div class="top_element" id="top_element">
<div class="health_icon_frame" id="health_icon_frame">
<!-- <span class="iconify" data-icon="mdi-close" id="health_icon"></span> -->
<img id="health_icon" src="">
<p class="health_text" , id="health_text">Loading</p>
</div>
@ -214,14 +215,21 @@
<script>
$(document).ready(function () {
function darkenColor(color, percent) {
var num = parseInt(color.replace("#",""), 16),
var num = parseInt(color.replace("#", ""), 16),
amt = Math.round(2.55 * percent),
R = (num >> 16) + amt,
G = (num >> 8 & 0x00FF) + amt,
B = (num & 0x0000FF) + amt;
return "#" + (0x1000000 + (R<255?R<1?0:R:255)*0x10000 + (G<255?G<1?0:G:255)*0x100 + (B<255?B<1?0:B:255)).toString(16).slice(1);
return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
}
function dateIsToday(date) {
var today = new Date();
return date.getDate() == today.getDate() &&
date.getMonth() == today.getMonth() &&
date.getFullYear() == today.getFullYear();
}
// Fetch data from API
function fetchData() {
var current_path = window.location.pathname;
@ -248,10 +256,24 @@
// The location is the location key in the JSON response
// It must also be appended with the timestamp
var update_time = data.time_outdoor
// First we parse the date string into a Date object
// Data is in format YYYY-MM-DD hh:mm:ss
// We only want hh:mm
var update_time = update_time.substring(11, 16);
$("#title").text(data.location+" @ "+update_time);
var update_date = new Date(update_time);
console.log (update_date);
console.log(dateIsToday(update_date))
// If the update time is not today, we will show the date and time
// Otherwise, we will show the time
if (dateIsToday(update_date)) {
// We only want hh:mm when the update time is today
update_time = update_time.substring(11, 16);
$("#title").text(data.location + " @ " + update_time);
}
else {
// We want dd/mm/yyyy hh:mm when the update time is not today
update_time = update_time.substring(11, 16);
update_date = update_date.toLocaleDateString("th-TH");
$("#title").text(data.location + " @ " + update_date + " " + update_time);
}
// Update outdoor AQI and PM2.5 values
$("#outdoor-aqi").text(data.aqi_outdoor);