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

add square html

Browse source
This commit is contained in:
Siwat Sirichai 2024-01-09 07:13:16 +00:00
parent 45d952368b
commit 76194119f4
6 changed files with 254 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

24
static/card.html
View file

@ -52,7 +52,7 @@
.top_element {
display: grid;
grid-template-columns: 1fr 2fr 2fr;
background-color: #97FF55;
background-color: #767676;
height: 190px;
}
@ -104,7 +104,7 @@
justify-content: center;
justify-items: center;
align-items: center;
background-color: #7bdb3f;
background-color: #474747;
font-size: 100px;
color: #fff;
@ -161,8 +161,8 @@
<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-heart" id="health_icon"></span>
<p class="health_text" , id="health_text">Healthy</p>
<span class="iconify" data-icon="mdi-close" id="health_icon"></span>
<p class="health_text" , id="health_text">Loading</p>
</div>
<div class="top_frame_label_block">
<p class="top_frame_value_text" , id="outdoor-aqi">N/A</p>
@ -173,7 +173,7 @@
<div class="top_frame_label_block">
<p class="top_frame_value_text" , id="outdoor-pm25">N/A</p>
<div class="top_frame_element_frame">
<p class="top_frame_label_text">PM2.5 (μg/m3)</p>
<p class="top_frame_label_text">PM2.5 (μg/m&sup3;)</p>
</div>
</div>
</div>
@ -216,15 +216,21 @@
console.log(data);
// Set Title Location String
$("#title").text(data.location);
// The location is the location key in the JSON response
// 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);
// Update outdoor AQI and PM2.5 values
$("#outdoor-aqi").text(data.aqi_outdoor);
$("#outdoor-pm25").text(data.pm25_outdoor);
$("#outdoor-pm25").text(data.pm25_outdoor.toFixed(1));
// Update outdoor temperature and humidity values
$("#outdoor-temp").text("Temperature: " + data.temperature_outdoor + "°C");
$("#outdoor-humid").text("Humidity: " + data.humidity_outdoor + "%");
$("#outdoor-temp").text("Temperature: " + data.temperature_outdoor.toFixed(1) + "°C");
$("#outdoor-humid").text("Humidity: " + data.humidity_outdoor.toFixed(1) + "%");
// Is outdoor AQI healthy?
// If AQI is less than 50, it is healthy