281 lines
10 KiB
JavaScript
281 lines
10 KiB
JavaScript
// main entry on load
|
|
const startInterval = async () => {
|
|
await refreshAqiValues();
|
|
setInterval("refreshAqiValues();",60000);
|
|
setInterval("refreshImg();",300000);
|
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
colorTables();
|
|
rmPreload();
|
|
}
|
|
window.addEventListener('load', startInterval);
|
|
|
|
|
|
var colorConfig =
|
|
{
|
|
// green
|
|
'Good': [
|
|
"#85a762", "#dbe4d1",
|
|
"invert(66%) sepia(11%) saturate(1318%) hue-rotate(47deg) brightness(92%) contrast(86%)",
|
|
"AQI 0 to 50",
|
|
"Good: No health concerns, enjoy activities."
|
|
],
|
|
// yellow
|
|
'Moderate': [
|
|
"#d4b93c", "#f9f0c7",
|
|
"invert(79%) sepia(5%) saturate(4660%) hue-rotate(9deg) brightness(89%) contrast(103%)",
|
|
"AQI 51 - 100:",
|
|
"Moderate: Active children and adults, and people with respiratory disease, such as asthma, should limit prolonged outdoor exertion."
|
|
],
|
|
// orange
|
|
'Unhealthy for Sensitive Groups': [
|
|
"#e96843", "#f8d0c8",
|
|
"invert(61%) sepia(93%) saturate(3252%) hue-rotate(333deg) brightness(95%) contrast(91%)",
|
|
"AQI 101 - 150:",
|
|
"Unhealthy for Sensitive Groups: Active children and adults, and people with respiratory disease, such as asthma, should limit prolonged outdoor exertion."
|
|
],
|
|
// red
|
|
'Unhealthy': [
|
|
"#d03f3b", "#f1c5c4",
|
|
"invert(39%) sepia(16%) saturate(2264%) hue-rotate(314deg) brightness(97%) contrast(110%)",
|
|
"AQI 151 - 200:",
|
|
"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."
|
|
],
|
|
// pink
|
|
'Very Unhealthy': [
|
|
"#be4173", "#e9c9d6",
|
|
"invert(45%) sepia(32%) saturate(3238%) hue-rotate(308deg) brightness(77%) contrast(90%)",
|
|
"AQI 201 - 300:",
|
|
"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."
|
|
],
|
|
// violet
|
|
'Hazardous': [
|
|
"#714261", "#d7c6d0",
|
|
"invert(31%) sepia(8%) saturate(2659%) hue-rotate(268deg) brightness(91%) contrast(88%)",
|
|
"AQI 301 - 500:",
|
|
"Hazardous: Everyone should avoid all outdoor exertion."
|
|
]
|
|
}
|
|
|
|
|
|
// remove preload cloud gif
|
|
function rmPreload() {
|
|
const preload = document.querySelector('.preload');
|
|
preload.classList.add('preload-finish');
|
|
// scrollbar
|
|
document.querySelector('body').style.overflow = 'unset'
|
|
// sticky
|
|
// const topBar = document.querySelector('.colorbox');
|
|
// topBar.style.position = 'sticky';
|
|
// topBar.style.position = '-webkit-sticky';
|
|
}
|
|
|
|
// reload current.png from remote
|
|
function refreshImg() {
|
|
var timestamp = new Date().getTime();
|
|
var newLink = "/dyn/current.png?t=" + timestamp;
|
|
var lastThreeImg = document.getElementById('last3-img');
|
|
var lastThreeA = document.getElementById('last3-a');
|
|
try {
|
|
lastThreeImg.src = newLink;
|
|
lastThreeA.href = newLink;
|
|
} catch(e) {
|
|
// console.log('no link to change');
|
|
}
|
|
}
|
|
|
|
// wrap for interval
|
|
function refreshAqiValues() {
|
|
return new Promise((resolve, reject) => {
|
|
var req = new XMLHttpRequest();
|
|
req.responseType = 'json';
|
|
req.open('GET', '/data/out', true);
|
|
req.setRequestHeader('cache-control', 'no-cache');
|
|
req.onload = function() {
|
|
var responseAqi = req.response;
|
|
var timestamp = responseAqi['timestamp'];
|
|
var aqiValue = responseAqi['aqi_value'];
|
|
var aqiCategory = responseAqi['aqi_category'];
|
|
setAqiValues(timestamp,aqiValue,aqiCategory);
|
|
setAqiColors(aqiCategory);
|
|
try {
|
|
setWeatherDetails(responseAqi);
|
|
} catch(e) {
|
|
// console.log('no weather box found');
|
|
};
|
|
try {
|
|
setDesc(responseAqi);
|
|
} catch(e) {
|
|
// console.log('no desc box found');
|
|
};
|
|
};
|
|
req.send();
|
|
resolve(true);
|
|
});
|
|
}
|
|
|
|
function setAqiValues(timestamp,aqiValue,aqiCategory) {
|
|
|
|
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) {
|
|
// parse config
|
|
var colMain = colorConfig[aqiCategory][0];
|
|
var colSecond = colorConfig[aqiCategory][1];
|
|
var colFilter = colorConfig[aqiCategory][2];
|
|
// apply topbox col
|
|
var colorboxList = document.getElementsByClassName('col_bg');
|
|
for (var i = 0; i < colorboxList.length; i++) {
|
|
colorboxList[i].style.backgroundColor = colMain;
|
|
}
|
|
// apply border col
|
|
var colBorder = document.getElementsByClassName('col_border');
|
|
if (colBorder) {
|
|
for (var i = 0; i < colBorder.length; i++) {
|
|
colBorder[i].style.borderColor = colMain;
|
|
};
|
|
}
|
|
// apply light background change
|
|
var lightBg = document.getElementsByClassName('col_lightbg');
|
|
if (lightBg) {
|
|
for (var i = 0; i < lightBg.length; i++) {
|
|
lightBg[i].style.backgroundColor = colSecond;
|
|
};
|
|
}
|
|
// apply color filter
|
|
var colFilterElements = document.getElementsByClassName('col_filter');
|
|
if (colFilterElements) {
|
|
for (var i = 0; i < colFilterElements.length; i++) {
|
|
colFilterElements[i].style.filter = colFilter;
|
|
};
|
|
}
|
|
// apply font color
|
|
var colFontElements = document.getElementsByClassName('col_font');
|
|
if (colFontElements) {
|
|
for (var i = 0; i < colFontElements.length; i++) {
|
|
colFontElements[i].style.color = colMain;
|
|
};
|
|
}
|
|
// apply hover color
|
|
var css = '.title-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) {
|
|
// parse response
|
|
var weatherIcon = responseAqi['weather_icon'];
|
|
var weatherName = responseAqi['weather_name'];
|
|
var temperature = Math.round(responseAqi['temperature'] * 10) / 10
|
|
var windSpeed = responseAqi['wind_speed'];
|
|
var humidity = Math.round(responseAqi['humidity']);
|
|
var pressure = Math.round(responseAqi['pressure']);
|
|
// weather icon
|
|
weatherIconSrc = '/static/img/icon/' + weatherIcon + '.png';
|
|
document.getElementById('weather_icon').src = weatherIconSrc;
|
|
// weather name
|
|
document.getElementById('weather_name').innerHTML = weatherName;
|
|
// temperature
|
|
document.getElementById('temperature').innerHTML = temperature;
|
|
// wind speed
|
|
document.getElementById('wind_speed').innerHTML = windSpeed;
|
|
// humidity
|
|
document.getElementById('humidity').innerHTML = humidity;
|
|
// pressure
|
|
document.getElementById('pressure').innerHTML = pressure;
|
|
}
|
|
|
|
function setDesc(responseAqi) {
|
|
// parse response
|
|
var aqiCategory = responseAqi['aqi_category'];
|
|
var aqiCatClean = aqiCategory.toLowerCase().replaceAll(' ', '');
|
|
var iconSrc = '/static/img/icon/category-' + aqiCatClean + ".png";
|
|
// parse config
|
|
var aqiRange = colorConfig[aqiCategory][3];
|
|
var aqiDesc = colorConfig[aqiCategory][4];
|
|
// set values
|
|
document.getElementById('categoryIcon').src = iconSrc;
|
|
document.getElementById('aqiName').innerHTML = aqiCategory;
|
|
document.getElementById('aqiRange').innerHTML = aqiRange;
|
|
document.getElementById('aqiDesc').innerHTML = aqiDesc;
|
|
// remove active if any
|
|
var active = document.querySelector(".active");
|
|
if (active) {
|
|
active.classList.remove("active");
|
|
};
|
|
// figure out which to activate
|
|
var allCategories = Object.keys(colorConfig);
|
|
var indexMatch = allCategories.indexOf(aqiCategory);
|
|
var activeCat = document.getElementsByClassName('cat-item')[indexMatch];
|
|
// activate
|
|
activeCat.classList.add("active");
|
|
}
|
|
|
|
|
|
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) {
|
|
//
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
function parseCatId(cellContent) {
|
|
// helper function to return correct
|
|
// background color based on aqi value
|
|
aqiCatId = Math.floor(cellContent / 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;
|
|
} |