added year comparison table to frontent

frontend/nginx/css/style.css

@@ -28,12 +28,12 @@ h2 {
     font-family: Rubik-Bold;
 }
 
-h3 {
+h3, th {
     font-family: Rubik-Light;
     font-size: 1.3em;
 }
 
-p, li {
+p, li, td {
     font-family: Rubik-Regular;
     font-size: 1.1em;
 }
@@ -284,6 +284,31 @@ a {
     font-weight: bold;   
 }
 
+/* table */
+.year-table table{
+    width: 100%;
+    max-width: 500px;
+    table-layout: fixed;
+    margin: auto;
+}
+
+.year-table thead th {
+    padding: 5px 0;
+    background-color: #eeeeee;
+}
+
+.year-table tbody td:nth-child(1) {
+    padding: 3px 0 3px 10px;
+    background-color: #eeeeee;
+}
+
+.year-table td:nth-child(2),
+.year-table td:nth-child(3),
+.year-table td:nth-child(4) {
+    text-align: center;
+    color: #fff;
+}
+
 /* about */
 .aqirow {
     display: flex;

frontend/nginx/incl/footer.html

@@ -1,4 +1,4 @@
-<div class="colorbox footer_wrap">
+<div class="col_bg footer_wrap">
     <div class="content footer">
         <p>© 2021 | <a href="https://github.com/bbilly1/aqi_monitor" target="_blank">Documentation</a></p>
     </div>

frontend/nginx/incl/topnav.php

@@ -1,4 +1,4 @@
-<div class="colorbox" id="colorbox">
+<div class="col_bg colorbox" id="colorbox">
     <?php include($_SERVER['DOCUMENT_ROOT'] . '/incl/update.html'); ?>
 </div>
 <div class="top_content content">

frontend/nginx/index.php

@@ -122,6 +122,24 @@
                 </a>
             </div>
         </div>
+        <div class="content">
+            <h3>Compared to last year</h3>
+            <p>This year's daily average AQI values from last 10 days compared to corresponding values from last year.</p>
+            <div class="year-table" id="compare">
+                <table>
+                    <thead>
+                        <tr>
+                            <th></th>
+                            <th>this year</th>
+                            <th>last year</th>
+                            <th>change</th>
+                        </tr>
+                    </thead>
+                    <tbody id="tableBody">
+                    </tbody>
+                </table>
+            </div>
+        </div>
     </div>
     <?php include($_SERVER['DOCUMENT_ROOT'] . '/incl/footer.html'); ?>
 </body>

frontend/nginx/js/aqi.js

@@ -4,6 +4,7 @@ const startInterval = async () => {
     setInterval("refreshAqiValues();",60000);
     setInterval("refreshImg();",300000);
     await new Promise(resolve => setTimeout(resolve, 1000));
+    tableContent();
     rmPreload();
 }
 window.addEventListener('load', startInterval);
@@ -136,7 +137,7 @@ function setAqiColors(aqiCategory) {
     var colSecond = colorConfig[aqiCategory][1];
     var colFilter = colorConfig[aqiCategory][2];
     // apply topbox col
-    var colorboxList = document.getElementsByClassName('colorbox');
+    var colorboxList = document.getElementsByClassName('col_bg');
     for (var i = 0; i < colorboxList.length; i++) {
         colorboxList[i].style.backgroundColor = colMain;
     }
@@ -223,3 +224,68 @@ function setDesc(responseAqi) {
     // activate
     activeCat.classList.add("active");
 }
+
+
+function tableContent() {
+    // get tbody
+    var tableBody = document.getElementById("tableBody");
+    if (!tableBody) {
+        return;
+    }
+    // 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 = '#00cc00';
+                } else if (cell == 'up') {
+                    td.textContent = '\u25B2';
+                    td.style.backgroundColor = '#cc0000';
+                } else if (cell == 'same') {
+                    td.textContent = '\u301C';
+                    td.style.backgroundColor = '#bdbdbd';
+                } else {
+                    td.textContent = cell;
+                }
+                tr.appendChild(td);
+            })
+            tableBody.appendChild(tr);
+        })
+    };
+    req.send();
+}
+
+function parseCatId(cell) {
+    // helper function to return correct
+    // background color based on aqi value
+    aqiCatId = Math.floor(cell / 50);
+    if (aqiCatId == 0) {
+        var background = colorConfig['Good'][0];
+    } else if (aqiCatId == 1) {
+        var background = colorConfig['Moderate'][0];
+    } else if (aqiCatId == 2) {
+        var background = colorConfig['Unhealthy for Sensitive Groups'][0];
+    } else if (aqiCatId == 3) {
+        var background = colorConfig['Unhealthy'][0];
+    } else if (aqiCatId >= 4 && aqiCatId <= 5) {
+        var background = colorConfig['Very Unhealthy'][0];
+    } else {
+        var background = colorConfig['Hazardous'][0];
+    }
+    return background;
+}