478 lines
14 KiB
JavaScript
478 lines
14 KiB
JavaScript
|
|
const automode = document.getElementById('m_auto');
|
|
const manmode = document.getElementById('m_man');
|
|
const s_pressure = document.getElementById('pressure'); //slider
|
|
const s_speed = document.getElementById('speed'); //slider
|
|
|
|
const g_pressure = document.getElementById('get_press');
|
|
const g_speed = document.getElementById('get_speed');
|
|
const g_co = document.getElementById('get_co');
|
|
const g_temp = document.getElementById('get_temp');
|
|
const g_rh = document.getElementById('get_rh');
|
|
const canvas = document.getElementById('dataChart');
|
|
const filter = document.getElementById('data');
|
|
const submit = document.getElementById('btn_login');
|
|
const log_out = document.getElementById('btn_log_out');
|
|
const start = document.getElementById('start-time');
|
|
const end = document.getElementById('end-time');
|
|
const reset = document.getElementById('btn_reset');
|
|
|
|
let user;
|
|
let pointerX = -1;
|
|
let pointerY = -1;
|
|
let lastX = 0;
|
|
let lastY = 0;
|
|
let counter = 0;
|
|
let lastSpeed = 0;
|
|
let notSettled = 0;
|
|
let day = new Date();
|
|
day = new Date(day.getTime() - day.getTimezoneOffset()*60000);
|
|
let today = day.toISOString().slice(0,16);
|
|
start.value = today.replace('T', ' ') + ':00';
|
|
end.value = today.replace('T', ' ') + ':00';
|
|
let start_time = new Date(start.value).getTime();
|
|
let end_time = new Date(end.value).getTime();
|
|
|
|
const socket = io();
|
|
|
|
socket.on('connection');
|
|
socket.on('data', (data) =>{
|
|
if(data.error === true){
|
|
document.getElementById('mon-warn').style.display = 'block';
|
|
}
|
|
else{
|
|
document.getElementById('mon-warn').style.display = 'none';
|
|
}
|
|
g_pressure.value = data.pressure;
|
|
g_co.value = data.co2;
|
|
g_rh.value = data.rh;
|
|
g_speed.value = data.speed;
|
|
g_temp.value = data.temp;
|
|
updateChart();
|
|
circleColor();
|
|
});
|
|
|
|
socket.on('pwd', (data) =>{
|
|
if(data){
|
|
sessionStorage.setItem('reload', true);
|
|
document.location.reload();
|
|
|
|
}
|
|
});
|
|
|
|
socket.on('user', (data) =>{
|
|
user = data;
|
|
localStorage.setItem('user', data);
|
|
sessionStorage.setItem('loggedIn', 'true');
|
|
});
|
|
|
|
reset.addEventListener('click', e =>{
|
|
e.preventDefault();
|
|
start.value = today.replace('T', ' ') + ':00';
|
|
end.value = today.replace('T', ' ') + ':00';
|
|
start_time = new Date(start.value).getTime();
|
|
end_time = new Date(end.value).getTime();
|
|
|
|
//start.value = today.replace('T', ' ') + ':00';
|
|
//end.value = today.replace('T', ' ') + ':00';
|
|
updateChart();
|
|
})
|
|
|
|
start.addEventListener('change', e =>{
|
|
e.preventDefault();
|
|
start_time = start.value + ':00';
|
|
start_time = new Date(start_time).getTime();
|
|
updateChart();
|
|
});
|
|
|
|
end.addEventListener('change', e =>{
|
|
e.preventDefault();
|
|
end_time = end.value + ':00';
|
|
end_time = new Date(end_time).getTime();
|
|
updateChart();
|
|
});
|
|
|
|
s_pressure.addEventListener('input', e =>{
|
|
e.preventDefault();
|
|
sendPressure();
|
|
});
|
|
|
|
s_speed.addEventListener('input', e =>{
|
|
e.preventDefault();
|
|
sendSpeed();
|
|
});
|
|
|
|
automode.addEventListener('click', () =>{
|
|
if(!sessionStorage.getItem('loggedIn')){
|
|
document.getElementById('login-form').style.display = "block";
|
|
document.getElementsByClassName('modes').style.display = "none";
|
|
document.getElementsByClassName('set_values').style.display = "none";
|
|
}
|
|
else{
|
|
document.getElementById('login-form').style.display = "none";
|
|
s_pressure.disabled = false;
|
|
document.getElementById('pr_div').style.opacity = 1;
|
|
|
|
s_speed.disabled = true;
|
|
document.getElementById('sp_div').style.opacity = 0.4;
|
|
}
|
|
|
|
})
|
|
|
|
manmode.addEventListener('click', () =>{
|
|
if(!sessionStorage.getItem('loggedIn')){
|
|
document.getElementById('login-form').style.display = "block";
|
|
document.getElementById('sp_div').style.display = "none";
|
|
document.getElementById('pr_div').style.display = "none";
|
|
document.getElementById('m_auto').style.display = "none";
|
|
document.getElementById('m_man').style.display = "none";
|
|
document.getElementById('auto_label').style.display = "none";
|
|
document.getElementById('man_label').style.display = "none";
|
|
}
|
|
else{
|
|
document.getElementById('login-form').style.display = "none";
|
|
document.getElementById('sp_div').style.opacity = 1;
|
|
s_speed.disabled = false;
|
|
|
|
document.getElementById('pr_div').style.opacity = 0.4;
|
|
s_pressure.disabled = true;
|
|
}
|
|
})
|
|
|
|
submit.addEventListener('click', e =>{
|
|
if(document.getElementById('username').value && document.getElementById('password').value){
|
|
document.getElementById('login-form').style.display = "none";
|
|
}
|
|
else{
|
|
e.preventDefault();
|
|
document.getElementById('form-warn').style.display = "block";
|
|
}
|
|
});
|
|
|
|
document.getElementById('password').addEventListener('click', ()=>{
|
|
document.getElementById('form-warn').style.display = "none";
|
|
});
|
|
|
|
log_out.addEventListener('click', () =>{
|
|
console.log('log out clicked');
|
|
localStorage.clear();
|
|
sessionStorage.clear();
|
|
})
|
|
|
|
window.addEventListener('beforeunload', (e)=>{
|
|
if(document.cookie){
|
|
log_out.click();
|
|
}
|
|
});
|
|
|
|
function circleColor(){
|
|
if(g_pressure.value > 115){
|
|
g_pressure.style.borderColor = "red";
|
|
}
|
|
else{
|
|
g_pressure.style.borderColor = "black";
|
|
}
|
|
if(g_speed.value > 95){
|
|
g_speed.style.borderColor = 'red';
|
|
}
|
|
else{
|
|
g_speed.style.borderColor = 'black';
|
|
}
|
|
if(g_co.value > 800){
|
|
g_co.style.borderColor = 'red';
|
|
}
|
|
else{
|
|
g_co.style.borderColor = 'black';
|
|
}
|
|
if(g_temp.value < 15 || g_temp.value >30){
|
|
g_temp.style.borderColor = 'red';
|
|
}
|
|
else{
|
|
g_temp.style.borderColor = 'black';
|
|
}
|
|
if(g_rh.value < 20 || g_rh.value > 70){
|
|
g_rh.style.borderColor = "red";
|
|
}
|
|
else{
|
|
g_rh.style.borderColor = "black";
|
|
}
|
|
}
|
|
|
|
function logOutUser(){
|
|
if(document.cookie){
|
|
log_out.click();
|
|
}
|
|
}
|
|
|
|
document.onmousemove = function(event) {
|
|
pointerX = event.pageX;
|
|
pointerY = event.pageY;
|
|
}
|
|
setInterval(activityCheck, 1000);
|
|
|
|
function activityCheck() {
|
|
if(sessionStorage.getItem('loggedIn')){
|
|
if(pointerX - lastX === 0 && pointerY - lastY === 0){
|
|
counter = counter + 1;
|
|
}
|
|
else{
|
|
lastX = pointerX;
|
|
lastY = pointerY;
|
|
counter = 0;
|
|
}
|
|
}
|
|
if(counter > 60){
|
|
log_out.click();
|
|
}
|
|
}
|
|
|
|
function checkUser(){
|
|
if(sessionStorage.getItem('reload')){
|
|
document.getElementById('login-form').style.display = "block";
|
|
document.getElementById('pwd-warn').style.display = "block";
|
|
sessionStorage.removeItem('reload');
|
|
}
|
|
if(document.cookie && sessionStorage.getItem('loggedIn')){
|
|
document.getElementById('login-form').style.display = "none";
|
|
document.getElementById('user').style.display = "block";
|
|
document.getElementById('user').innerHTML = 'Signed in user: ' + localStorage.getItem('user');
|
|
document.getElementById('btn_log_out').style.display = "block";
|
|
document.getElementById('user').style.display = "block";
|
|
document.getElementById('user').innerHTML = 'Signed in user: ' + localStorage.getItem('user');
|
|
document.getElementById('btn_log_out').style.display = "block";
|
|
document.getElementById('user-table').style.width = "45%";
|
|
document.getElementById('chart-cont').style.width = "50%";
|
|
|
|
if(manmode.checked = true){
|
|
s_pressure.disabled = true;
|
|
document.getElementById('pr_div').style.opacity = 0.4;
|
|
s_speed.disabled = false;
|
|
}
|
|
if(automode.checked = true){
|
|
s_speed.disabled = true;
|
|
document.getElementById('sp_div').style.opacity = 0.4;
|
|
s_pressure.disabled = false;
|
|
}
|
|
}
|
|
else{
|
|
document.getElementById('login-form').style.display = "block";
|
|
document.getElementById('sp_div').style.display = "none";
|
|
document.getElementById('pr_div').style.display = "none";
|
|
document.getElementById('m_auto').style.display = "none";
|
|
document.getElementById('m_man').style.display = "none";
|
|
document.getElementById('auto_label').style.display = "none";
|
|
document.getElementById('man_label').style.display = "none";
|
|
document.getElementById('user-table').style.display = "none";
|
|
document.getElementById('chart-cont').style.width = "95%";
|
|
}
|
|
}
|
|
|
|
function checkMode(){
|
|
if(document.cookie && sessionStorage.getItem('loggedIn')){
|
|
automode.checked = true;
|
|
s_speed.disabled = true;
|
|
document.getElementById('sp_div').style.opacity = 0.4;
|
|
document.getElementById('pr_div').style.opacity = 1;
|
|
s_pressure.disabled = false;
|
|
}
|
|
else{
|
|
document.getElementById('login-form').style.display = "block";
|
|
document.getElementById('sp_div').style.display = "none";
|
|
document.getElementById('pr_div').style.display = "none";
|
|
document.getElementById('m_auto').style.display = "none";
|
|
document.getElementById('m_man').style.display = "none";
|
|
document.getElementById('auto_label').style.display = "none";
|
|
document.getElementById('man_label').style.display = "none";
|
|
document.getElementById('user-table').style.display = "none";
|
|
}
|
|
}
|
|
|
|
function sendPressure(){
|
|
let press = { auto: true, pressure: parseInt(s_pressure.value) }
|
|
socket.emit('setting', press);
|
|
}
|
|
|
|
function sendSpeed(){
|
|
let speed = { auto: false, speed: parseInt(s_speed.value) }
|
|
socket.emit('setting', speed);
|
|
}
|
|
|
|
function updateChart(){
|
|
async function fetchData(){
|
|
const response = await fetch('data.json');
|
|
const data = await response.json();
|
|
if(data.length !== 0){
|
|
let min = data[0].ts;
|
|
let max = data[data.length-1].ts;
|
|
start.min = min.slice(0, 16);
|
|
start.max = max.slice(0, 16);
|
|
end.min = min.slice(0, 16);
|
|
end.max = max.slice(0, 16);
|
|
}
|
|
const datapoints = data.filter(d => {
|
|
if((end_time-start_time) !== 0){
|
|
return (new Date(d.ts).getTime() >= start_time && new Date(d.ts).getTime() <= end_time)
|
|
}
|
|
else{
|
|
return data;
|
|
}
|
|
})
|
|
return datapoints;
|
|
};
|
|
|
|
fetchData().then(datapoints => {
|
|
if(datapoints.length === 0)
|
|
{
|
|
document.getElementById('chart_warn').style.display = "block";
|
|
}
|
|
const time = datapoints.map((index) => {
|
|
return index.ts;
|
|
});
|
|
const co = datapoints.map((index) => {
|
|
return index.co2;
|
|
});
|
|
const pressure = datapoints.map((index) => {
|
|
return index.pressure;
|
|
});
|
|
const rh = datapoints.map((index) => {
|
|
return index.rh;
|
|
});
|
|
myChart.config.data.labels = time;
|
|
myChart.config.data.datasets[0].data = co;
|
|
myChart.config.data.datasets[1].data = pressure;
|
|
myChart.config.data.datasets[2].data = rh;
|
|
myChart.update();
|
|
});
|
|
};
|
|
|
|
const data = {
|
|
datasets: [{
|
|
label: 'CO2',
|
|
yAxisID: 'y0',
|
|
backgroundColor:
|
|
'rgba(247, 37, 133, 0.9)', //red
|
|
borderColor:
|
|
'rgba(247, 37, 133, 1)', //red
|
|
tension: 0.4,
|
|
pointRadius: 1
|
|
},
|
|
{
|
|
label: 'Pressure',
|
|
yAxisID: 'y1',
|
|
backgroundColor:
|
|
'rgba(114, 9, 183, 0.9)', //purple
|
|
borderColor:
|
|
'rgba(114, 9, 183, 1)', //purple
|
|
tension: 0.4,
|
|
pointRadius: 1
|
|
},
|
|
{
|
|
label: 'Relative humidity',
|
|
yAxisID: 'y2',
|
|
backgroundColor:
|
|
'rgba(67, 97, 238, 0.9)', //blue
|
|
borderColor:
|
|
'rgba(67, 97, 238, 1)', //blue
|
|
tension: 0.4,
|
|
pointRadius: 1
|
|
}]
|
|
};
|
|
|
|
const config = {
|
|
type: 'line',
|
|
data,
|
|
options: {
|
|
scales: {
|
|
/*x: {
|
|
ticks: {
|
|
display: false
|
|
}
|
|
},*/
|
|
y0: { // co2
|
|
type: 'linear',
|
|
position: 'left',
|
|
id: 'y-0',
|
|
beginAtZero: true,
|
|
min: 0,
|
|
max: 5000,
|
|
ticks: {
|
|
stepSize: 500,
|
|
color: 'rgba(247, 37, 133, 1)' //red
|
|
}
|
|
},
|
|
y1: { //press
|
|
type: 'linear',
|
|
beginAtZero: true,
|
|
min: 0,
|
|
max: 120,
|
|
position: 'left',
|
|
id: 'y-1',
|
|
ticks: {
|
|
stepSize: 10,
|
|
color: 'rgba(114, 9, 183, 1)' //purple
|
|
}
|
|
},
|
|
y2: { //rh
|
|
type: 'linear',
|
|
position: 'left',
|
|
id: 'y-2',
|
|
beginAtZero: true,
|
|
min: 0,
|
|
max: 100,
|
|
ticks: {
|
|
stepSize: 10,
|
|
color: 'rgba(67, 97, 238, 1)' //blue
|
|
}
|
|
}
|
|
|
|
|
|
},
|
|
aspectRatio: 2
|
|
}
|
|
};
|
|
|
|
const myChart = new Chart(canvas, config);
|
|
|
|
fetch('user_log.json')
|
|
.then((res)=>{
|
|
return res.json();
|
|
})
|
|
.then((logs)=>{
|
|
let placeholder = document.getElementById('table-output');
|
|
let out = '';
|
|
for(let log of logs){
|
|
out += `
|
|
<tr>
|
|
<td>${log.UserId}</td>
|
|
<td>${log.Login}</td>
|
|
<td>${log.Logout}</td>
|
|
</tr>
|
|
`
|
|
}
|
|
placeholder.innerHTML = out;
|
|
});
|
|
|
|
async function getStartValues(){
|
|
await fetch('data.json')
|
|
.then((res) =>{
|
|
return res.json();
|
|
})
|
|
.then((data) =>{
|
|
if(data.length === 0){
|
|
g_pressure.value = 0;
|
|
g_co.value = 0;
|
|
g_rh.value = 0;
|
|
g_speed.value = 0;
|
|
g_temp.value = 0;
|
|
}
|
|
else{
|
|
const last = data[data.length -1];
|
|
g_pressure.value = last.pressure;
|
|
g_co.value = last.co2;
|
|
g_rh.value = last.rh;
|
|
g_speed.value = last.speed;
|
|
g_temp.value = last.temp;
|
|
}
|
|
});
|
|
}
|