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

added about page, improved js to no throw errors so same file can be used on about, external footer and nav files for easy reuse with php include

This commit is contained in:
simon 2021-02-21 15:12:20 +07:00
parent 4782f88650
commit 13646f387b
6 changed files with 259 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
frontend/nginx/about/index.php Normal file
View File

@ -0,0 +1,88 @@
<!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">
<script src="/js/aqi.js"></script>
<title>About</title>
</head>
<body>
<div class="block_wrap light_background">
<?php include($_SERVER['DOCUMENT_ROOT'] . '/incl/topnav.html'); ?>
</div>
<div class="block_wrap">
<div class="content">
<h2>About</h2>
<p>This page and its contents are still under construction. More content is coming soon.</p>
<p>The data for this page is collected from an air monitor located downtown Luang Prabang. While we do our best, no guarantee is given for the accuracy of this data.</p>
<p>The data is updated every 3 minutes. Contrary to international websites who measure the air pollution via satellite images and rely on estimates and averages, an on-site air monitor delivers real time values that paint a much more accurate picture of the local situation.</p>
<p>Roughly, the Air Quality Index (AQI) is the internationally used air quality standard to measure the pollution of the air. It is divided into 6 levels, and according to these levels, certain health advices are given:</p>
</div>
<div class="aqidesc content">
<div class="aqirow">
<div class="leftcolumn">
<p>Aqi Values</p>
</div>
<div class="rightcolumn hide">
<p>Description</p>
</div>
</div>
<div class="aqirow">
<div class="leftcolumn category-class good">
<p>0 to 50:</p>
</div>
<div class="rightcolumn">
<p>Good: No health concerns, enjoy activities.</p>
</div>
</div>
<div class="aqirow">
<div class="leftcolumn category-class moderate">
<p>51 - 100:</p>
</div>
<div class="rightcolumn">
<p>Moderate: Active children and adults, and people with respiratory disease, such as asthma, should limit prolonged outdoor exertion.</p>
</div>
</div>
<div class="aqirow">
<div class="leftcolumn category-class ufsg">
<p>101 - 150:</p>
</div>
<div class="rightcolumn">
<p>Unhealthy for Sensitive Groups: Active children and adults, and people with respiratory disease, such as asthma, should limit prolonged outdoor exertion.</p>
</div>
</div>
<div class="aqirow">
<div class="leftcolumn category-class unhealthy">
<p>151 - 200:</p>
</div>
<div class="rightcolumn">
<p>Unhealthy: Everyone may begin to experience health effects: Active children and adults, and people with respiratory disease, such as asthma, should avoid prolonged outdoor exertion; everyone else, especially children, should limit prolonged outdoor exertion</p>
</div>
</div>
<div class="aqirow">
<div class="leftcolumn category-class vunhealthy">
<p>201 - 300:</p>
</div>
<div class="rightcolumn">
<p>Very Unhealthy: Active children and adults, and people with respiratory disease, such as asthma, should avoid all outdoor exertion; everyone else, especially children, should limit outdoor exertion.</p>
</div>
</div>
<div class="aqirow">
<div class="leftcolumn category-class hazardous">
<p>301 - 500:</p>
</div>
<div class="rightcolumn">
<p>Hazardous: Everyone should avoid all outdoor exertion.</p>
</div>
</div>
</div>
<div class="credits content">
<h2>Credits</h2>
<p>Partial Weather data, namely weather icon, weather description and windspeed are provided from <a href="https://openweathermap.org/ " target="_blank">openweather.org</a> API distributed under the <a href="https://openweathermap.org/full-price" target="_blank">Creative Commons Attribution-ShareAlike 4.0 Generic License</a>.</p>
</div>
</div>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/incl/footer.html'); ?>
</body>
</html>

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

@ -37,10 +37,12 @@ p {
font-size: 1.1em;
}
.top_content,
.weather_content,
.tagline_content,
.desc_content {
a {
color: inherit;
font-family: Rubik-Regular;
}
.content {
width: 70%;
max-width: 900px;
margin-left: auto;
@ -53,8 +55,35 @@ p {
padding: 0;
}
.top_content {
display: flex;
flex-wrap: nowrap;
}
.nav {
display: flex;
align-items: center;
flex: 20%;
}
.nav ul {
list-style-type:none;
}
.nav li {
padding: 10px 40px;
margin: 10px;
border-style: none none solid none;
border-width: 2px;
}
.nav a {
text-decoration: none;
}
.title {
padding: 30px 0;
flex: 80%;
}
.cloud {
@ -86,8 +115,8 @@ p {
}
/* weather styling */
.weather_wrap {
margin: 40px 0;
.block_wrap {
margin-bottom: 40px;
}
.weather_box {
@ -135,6 +164,8 @@ p {
}
.desc_content {
padding-top: 30px;
padding-bottom: 30px;
display: grid;
grid-template-columns: 33% 33% 33%;
grid-column-gap: 10px;
@ -197,10 +228,59 @@ p {
transform: scale(1.2);
font-size: 1.2em;
box-shadow: darkgray 5px 5px;
font-weight: bold;
font-weight: bold;
}
/* about */
.aqirow {
display: flex;
width: 100%;
height: 100%;
margin: 10px auto;
padding: 0;
}
.leftcolumn {
width: 150px;
margin: 0;
padding: 10px 15px;
display: flex;
}
.leftcolumn.category-class {
font-weight: bold;
color: #FFFFFF;
}
.rightcolumn {
width: 100%;
margin: 0px;
padding: 10px;
justify-content: center;
}
.credits {
padding-top: 30px;
padding-bottom: 30px;
}
.leftcolumn p,
.rightcolumn p {
margin: 0;
padding: 0;
align-items: center;
display: flex;
}
/* footer */
.footer_wrap {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
/* responsiv */
@media screen and (max-width: 1100px) {
.top_content,

5
frontend/nginx/incl/footer.html Normal file
View File

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

14
frontend/nginx/incl/topnav.html Normal file
View File

@ -0,0 +1,14 @@
<div class="colorbox" id="colorbox"></div>
<div class="top_content content">
<div class="title">
<h1>Live Air Quality</h1>
<h2>in Luang Prabang Laos PDR</h2>
<p>Last updated: <span id="timestamp"></span></p>
</div>
<div class="nav">
<ul>
<a href="/"><li class="col_border">Home</li></a>
<a href="/about"><li class="col_border">About</li></a>
</ul>
</div>
</div>

28
frontend/nginx/index.php
View File

@ -4,19 +4,14 @@
<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/style.css">
<script src="/js/aqi.js"></script>
<title>AQI</title>
</head>
<body>
<div class="colorbox" id="colorbox"></div>
<div class="top_wrap light_background">
<div class="top_content">
<div class="title">
<h1>Live Air Quality</h1>
<h2>in Luang Prabang Laos PDR</h2>
<p>Last updated: <span id="timestamp"></span></p>
</div>
<div class="block_wrap light_background">
<?php include($_SERVER['DOCUMENT_ROOT'] . '/incl/topnav.html'); ?>
<div class="top_content content">
<div class="cloud">
<img src="/img/cloud.png" alt="cloud" class="col_filter">
<div class="aqi_box">
@ -26,8 +21,8 @@
</div>
</div>
</div>
<div class="weather_wrap">
<div class="weather_content">
<div class="block_wrap">
<div class="weather_content content">
<div class="weather_box col_border">
<div class="weather_icon">
<img src="/img/icon/000.png" alt="weather_icon" class="col_filter" id="weather_icon">
@ -66,8 +61,8 @@
</div>
</div>
</div>
<div class="desc_wrap light_background">
<div class="desc_content">
<div class="block_wrap light_background">
<div class="desc_content content">
<div class="desc_box">
<div class="desc_item_wrap">
<div class="desc_item good">
@ -102,10 +97,11 @@
</div>
</div>
</div>
<div class="tagline_wrap">
<div class="tagline_content">
<h1>More is coming soon here!</h1>
<div class="block_wrap">
<div class="tagline_content content">
<h2>Some cool graphs are coming soon here!</h2>
</div>
</div>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/incl/footer.html'); ?>
</body>
</html>

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

@ -67,18 +67,36 @@ function refreshAqiValues() {
var aqiCategory = responseAqi['aqi_category'];
setAqiValues(timestamp,aqiValue,aqiCategory);
setAqiColors(aqiCategory);
setWeatherDetails(responseAqi);
setDesc(responseAqi);
try {
setWeatherDetails(responseAqi);
} catch(e) {
// console.log('no weather box found');
};
try {
setDesc(responseAqi);
} catch(e) {
// console.log('no desc box found');
};
};
req.send();
}
function setAqiValues(timestamp,aqiValue,aqiCategory) {
document.getElementById('aqiValue').innerHTML = aqiValue;
document.getElementById('aqiCategory').innerHTML = aqiCategory;
document.getElementById('timestamp').innerHTML = timestamp;
var aqiValueField = document.getElementById('aqiValue');
if (aqiValueField) {
aqiValueField.innerHTML = aqiValue;
};
var aqiCategoryField = document.getElementById('aqiCategory');
if (aqiCategoryField) {
aqiCategoryField.innerHTML = aqiCategory;
};
var timestampField = document.getElementById('timestamp');
if (timestampField) {
timestampField.innerHTML = timestamp;
};
}
function setAqiColors(aqiCategory) {
@ -87,27 +105,43 @@ function setAqiColors(aqiCategory) {
var colSecond = colorConfig[aqiCategory][1];
var colFilter = colorConfig[aqiCategory][2];
// apply topbox col
document.getElementById('colorbox').style.backgroundColor = colMain;
var colorboxList = document.getElementsByClassName('colorbox');
for (var i = 0; i < colorboxList.length; i++) {
colorboxList[i].style.backgroundColor = colMain;
}
// apply border col
var colBorder = document.getElementsByClassName('col_border');
for (var i = 0; i < colBorder.length; i++) {
colBorder[i].style.borderColor = colMain;
};
if (colBorder) {
for (var i = 0; i < colBorder.length; i++) {
colBorder[i].style.borderColor = colMain;
};
}
// apply light background change
var lightBg = document.getElementsByClassName('light_background');
for (var i = 0; i < lightBg.length; i++) {
lightBg[i].style.backgroundColor = colSecond;
};
if (lightBg) {
for (var i = 0; i < lightBg.length; i++) {
lightBg[i].style.backgroundColor = colSecond;
};
}
// apply color filter
var colFilterElements = document.getElementsByClassName('col_filter');
for (var i = 0; i < colFilterElements.length; i++) {
colFilterElements[i].style.filter = colFilter;
};
if (colFilterElements) {
for (var i = 0; i < colFilterElements.length; i++) {
colFilterElements[i].style.filter = colFilter;
};
}
// apply font color
var colFontElements = document.getElementsByClassName('col_font');
for (var i = 0; i < colFontElements.length; i++) {
colFontElements[i].style.color = colMain;
};
if (colFontElements) {
for (var i = 0; i < colFontElements.length; i++) {
colFontElements[i].style.color = colMain;
};
}
// apply hover color
var css = '.nav li:hover {background-color: ' + colMain + ';}';
var style = document.createElement('style');
style.appendChild(document.createTextNode(css));
document.getElementsByTagName('head')[0].appendChild(style);
}
function setWeatherDetails(responseAqi) {