add offline handling
This commit is contained in:
parent
a8e40f9cd8
commit
b2e445478c
9 changed files with 62 additions and 10 deletions
|
@ -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);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue