siwat/iqair-apiserver
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add offline handling

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

36
static/square.html
View file

@ -29,6 +29,7 @@
border-radius: 30px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative;
}
.health_icon_frame {
@ -47,10 +48,13 @@
font-size: 20px;
font-weight: 500;
color: #ffffff;
margin-left: 10px;
margin-left: 0px;
padding-top: 0;
margin-top: 0;
margin-bottom: 0;
align-content: center;
justify-content: center;
text-align: center;
}
.aqi_block {
@ -96,6 +100,15 @@
padding-top: 15px;
padding-bottom: 20px;
}
#offline_icon {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: red;
padding: 5px;
box-sizing: border-box;
}
</style>
</head>
@ -107,11 +120,20 @@
<img id="health_icon" src="">
<p class="health_text" , id="health_text">Healthy</p>
</div>
<img id="offline_icon" src="/images/offline-icon.svg" style="display: none; position: absolute; top: 10px; left: 10px;">
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function dateIsToday(date) {
var today = new Date();
return date.getDate() == today.getDate() &&
date.getMonth() == today.getMonth() &&
date.getFullYear() == today.getFullYear();
}
$(document).ready(function () {
// Fetch data from API
function fetchData() {
@ -140,9 +162,15 @@
// It must also be appended with the timestamp
var update_time = data.time_outdoor
// 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);
// Parse the string to Date object
update_time = new Date(update_time);
// If the date not today, we want to show show the offline icon
if (!dateIsToday(update_time)) {
$("#offline_icon").css("display", "block");
} else {
$("#offline_icon").css("display", "none");
}
// Update outdoor AQI and PM2.5 values
$("#outdoor-aqi").text("AQI : "+data.aqi_outdoor);