simon
/
aqi_monitor
mirror of https://github.com/bbilly1/aqi_monitor.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

added initial monthly graph to frontent

This commit is contained in:
simon 2021-04-03 18:52:56 +07:00
parent 4857960c07
commit 0eee8a36fc
4 changed files with 113 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/nginx/css/style.css
View File

@ -111,8 +111,8 @@ a {
}
.nav li {
padding: 10px 40px;
margin: 10px;
padding: 5px 40px;
margin: 5px;
border-style: none none solid none;
border-width: 2px;
}
@ -122,7 +122,6 @@ a {
}
.title {
padding: 10px 0 30px 0;
flex: 80%;
}
@ -419,7 +418,7 @@ a {
}
.nav li {
display: inline-flex;
padding: 5px 15px;
padding: 5px;
}
.nav ul {
margin: 10px auto;

1
frontend/nginx/incl/topnav.php
View File

@ -12,6 +12,7 @@
<a href="/"><li class="col_border">Home</li></a>
<a href="/about"><li class="col_border">About</li></a>
<a href="/graphs"><li class="col_border">Graphs</li></a>
<a href="/monthly"><li class="col_border">Monthly</li></a>
</ul>
</div>
</div>

57
frontend/nginx/js/aqi.js
View File

@ -5,6 +5,7 @@ const startInterval = async () => {
setInterval("refreshImg();",300000);
await new Promise(resolve => setTimeout(resolve, 1000));
tableContent();
monthlyTable();
rmPreload();
}
window.addEventListener('load', startInterval);
@ -270,6 +271,62 @@ function tableContent() {
req.send();
}
function monthlyTable() {
// fill data into monthly tables
var allTables = document.getElementsByClassName('monthly-table');
if (allTables) {
for (var i = 0; i < allTables.length; i++) {
var data = allTables[i].getAttribute('data');
tableBody = document.getElementById(data);
// get rows and put in table
fillMonthlyTable(tableBody, data);
};
};
}
function fillMonthlyTable(tableBody, data) {
// setup req
var req = new XMLHttpRequest();
req.responseType = 'json';
req.open('GET', '/dyn/monthly/2021-03.json', true);
req.onload = function() {
// parse json
var json = req.response['data']
json.forEach((row) => {
var tr = document.createElement('tr');
// loop through each cell
row.forEach((cell) => {
var td = document.createElement('td');
var tdType = typeof cell;
if (tdType == 'number') {
var background = parseCatId(cell);
td.style.backgroundColor = background;
}
if (cell == 'down') {
td.textContent = '\u25BC';
td.style.backgroundColor = '#6ecd65';
} else if (cell == 'up') {
td.textContent = '\u25B2';
td.style.backgroundColor = '#ff4d4d';
} else if (cell == 'same') {
td.textContent = '\u301C';
td.style.backgroundColor = '#bdbdbd';
} else {
td.textContent = cell;
try {
td.style.backgroundColor = colorConfig[cell][0];
} catch(e) {
//
};
};
tr.appendChild(td);
})
tableBody.appendChild(tr);
})
};
req.send();
}
function parseCatId(cell) {
// helper function to return correct
// background color based on aqi value

52
frontend/nginx/monthly/index.php Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/lightbox.css">
<title>Monthly</title>
<script src="/js/aqi.js"></script>
<script src="/js/lightbox.js"></script>
</head>
<body>
<div class="preload">
<img src="/img/cloud_colors.gif" alt="cloud_animation">
</div>
<div class="block_wrap light_background">
<?php include($_SERVER['DOCUMENT_ROOT'] . '/incl/topnav.php'); ?>
</div>
<div class="block_wrap">
<div class="content">
<h1>Month by month</h1>
<p>Month compared to last year. Values are in 8h average.</p>
</div>
<div class="content">
<h2>March 2021</h2>
</div>
<div class="graph2 content">
<div class="graph_item">
<a href="/dyn/monthly/2021-03.png" data-lightbox="monthly">
<img src="/dyn/monthly/2021-03.png" alt="2021-03">
</a>
</div>
<div class="year-table monthly-table" data='2021-03'>
<table>
<thead>
<tr>
<th></th>
<th>this year</th>
<th>last year</th>
<th>change</th>
</tr>
</thead>
<tbody id='2021-03'>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>