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

creating aqi tables now directly with php, js just for coloring

This commit is contained in:
simon 2021-04-14 17:27:59 +07:00
parent 1a76c3633f
commit fd28ca9ca3
3 changed files with 77 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/nginx/graphs/index.php
View File

@ -117,7 +117,21 @@
<th>change</th>
</tr>
</thead>
<tbody id="tableBody">
<tbody class="aqi-table">
<!-- start trs -->
<?php
$json_file = $_SERVER['DOCUMENT_ROOT'] . '/dyn/year-table.json';
$json = json_decode(file_get_contents($json_file), true);
$rows = $json['data'];
foreach($rows as $row) {
echo '<tr>';
foreach($row as $cell) {
echo '<td>' . $cell . '</td>';
}
echo '</tr>';
}
?>
<!-- end trs -->
</tbody>
</table>
</div>

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

@ -4,8 +4,7 @@ const startInterval = async () => {
setInterval("refreshAqiValues();",60000);
setInterval("refreshImg();",300000);
await new Promise(resolve => setTimeout(resolve, 1000));
tableContent();
monthlyTable();
colorTables();
rmPreload();
}
window.addEventListener('load', startInterval);
@ -227,110 +226,44 @@ function setDesc(responseAqi) {
}
function tableContent() {
// get tbody
var tableBody = document.getElementById("tableBody");
if (!tableBody) {
return;
function colorTables() {
// color table cells based on aqi value
var tableBodies = document.getElementsByClassName('aqi-table');
if (tableBodies) {
var allCells = document.getElementsByTagName('td');
for (var i = 0; i < allCells.length; i++) {
var cell = allCells[i];
var cellContent = cell.textContent;
if (Number(cellContent)) {
var background = parseCatId(cellContent);
cell.style.backgroundColor = background;
} else if (cellContent == 'down') {
cell.textContent = '\u25BC';
cell.style.backgroundColor = '#6ecd65';
} else if (cellContent == 'up') {
cell.textContent = '\u25B2';
cell.style.backgroundColor = '#ff4d4d';
} else if (cellContent == 'same') {
cell.textContent = '\u301C';
cell.style.backgroundColor = '#bdbdbd';
} else {
try {
var backgroundColor = colorConfig[cellContent][0];
cell.style.backgroundColor = backgroundColor;
} catch(e) {
//
}
}
}
}
// setup req
var req = new XMLHttpRequest();
req.responseType = 'json';
req.open('GET', '/dyn/year-table.json', true);
req.onload = function() {
// parse json
var json = req.response['data']
// loop through row
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;
}
tr.appendChild(td);
})
tableBody.appendChild(tr);
})
};
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) {
function parseCatId(cellContent) {
// helper function to return correct
// background color based on aqi value
aqiCatId = Math.floor(cell / 50);
aqiCatId = Math.floor(cellContent / 50);
if (aqiCatId == 0) {
var background = colorConfig['Good'][0];
} else if (aqiCatId == 1) {

54
frontend/nginx/monthly/index.php
View File

@ -22,31 +22,35 @@
<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>
<!-- list start -->
<?php
foreach(array_reverse(glob($_SERVER['DOCUMENT_ROOT'] . '/dyn/monthly/*.png')) as $month) {
$file_name = basename($month,".png");
$json_file = $_SERVER['DOCUMENT_ROOT'] . '/dyn/monthly/'.$file_name.'.json';
$json = json_decode(file_get_contents($json_file), true);
$rows = $json['data'];
$date = new DateTime($file_name);
$date_str = $date->format('F Y');
echo '<div class="content"><h2>'.$date_str.'</h2></div>';
echo '<div class="graph2 content">';
echo '<div class="graph_item"><a href="/dyn/monthly/'.$file_name.'.png" data-lightbox="monthly">';
echo '<img src="/dyn/monthly/'.$file_name.'.png" alt="'.$file_name.'"></a></div>';
echo '<div class="year-table"><table>';
echo '<thead><tr><th></th><th>this year</th><th>last year</th><th>change</th></tr></thead>';
echo '<tbody class="aqi-table">';
foreach($rows as $row) {
echo '<tr>';
foreach($row as $cell) {
echo '<td>' . $cell . '</td>';
}
echo '</tr>';
}
echo '</tbody>';
echo '</table></div>';
echo '</div>';
}
?>
<!-- list end -->
</div>
</body>
</html>