140 lines
5.5 KiB
Plaintext
140 lines
5.5 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Mashinka Control</title>
|
||
|
||
<!-- Font Awesome -->
|
||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||
<!-- Google Fonts -->
|
||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
|
||
<!-- MDB -->
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
|
||
</head>
|
||
|
||
<body>
|
||
<!-- Navbar -->
|
||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#">Seal Team</a>
|
||
<span class="navbar-text">
|
||
Демонстрационный режим
|
||
</span>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="alertContainer" id="alertcontainer"></div>
|
||
<div class="homeData" id="homeData"></div>
|
||
|
||
|
||
<!-- MDB -->
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
|
||
<!--Script-->
|
||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<script>
|
||
function callHomeData() {
|
||
setInterval(function() {
|
||
$.ajax({
|
||
url: '/get_data',
|
||
method: 'POST',
|
||
success: function(kk) {
|
||
if (kk) {
|
||
data = JSON.parse(kk);
|
||
console.log(data);
|
||
var html = '<div class="container"><div class="row">';
|
||
var alertMessages = [];
|
||
console.log(typeof(data));
|
||
Object.keys(data).forEach(function(alertt) {
|
||
html += '<div class="col">';
|
||
Object.keys(data[alertt]).forEach(function(key) {
|
||
let value = Number(data[alertt][key]);
|
||
switch (key) {
|
||
case 'pozhar':
|
||
html += `<div class="indicator ${value ? 'red' : 'green'}">Пожар</div>`;
|
||
if(data[alertt]["pozhar"] == 1) html += `<button type="button" class="btn btn-primary btn-sm">Включить систему пожаротушения</button>`;
|
||
break;
|
||
case 'soundstatus':
|
||
html += `<div class="indicator ${value ? 'red' : 'green'}">Лишний шум</div>`;
|
||
if(data[alertt]['soundstatus'] == 1) html += `<p><button type="button" class="btn btn-primary btn-sm">Отправить уведомление</button></p>`
|
||
break;
|
||
case 'gaz':
|
||
html += `<button type="button" class="btn btn-primary btn-sm">Включить систему очистки воздуха</button>`;
|
||
break;
|
||
case 'doorst':
|
||
html += `<div class="indicator ${value ? 'red' : 'green'}" Статус двери`;
|
||
html += `<p><button type="button" class="btn btn-primary btn-sm">Открыть дверь</button></p>`;
|
||
html += `<p><button type="button" class="btn btn-primary btn-sm">Закрыть дверь</button></p>`;
|
||
|
||
|
||
default:
|
||
break;
|
||
}
|
||
});
|
||
|
||
|
||
|
||
html += '</div>';
|
||
|
||
});
|
||
html += '</div></div>';
|
||
html += `<div>Сила тока: ${data['tok']}</div>`;
|
||
html += `<div>Сила потока: ${data['potok']}</div>`;
|
||
html += `<div class="indicator ${data['techka'] ? 'red' : 'green'}">Протечка</div>`;
|
||
html += `<div class="indicator ${data['earthquake'] ? 'red' : 'green'}">Землетрясение</div>`;
|
||
html += `Насос <input type="checkbox" ${data['nasostoggle'] ? 'checked' : ''}><br>`;
|
||
html += `<input type="range" min="0" max="100" value="${data['nasosspeed']}" oninput="this.nextElementSibling.value = this.value"> <p>Сила работы насоса: <output>${data['nasosspeed']}</output></p>`;
|
||
html += `<input type="checkbox" ${data["lightst"] ? 'checked' : ''}> Уличное освещение<br>`;
|
||
if(data["lightst"] == 1) html += `<input type="range" min="0" max="100" value="${data["lightpower"]} oninput="this.nextElementSibling.value = this.value"> <p>Яркость освещения: <output>${data["lightpower"]}</output></p>`;
|
||
var x = document.getElementById("homeData");
|
||
x.innerHTML = html;
|
||
}
|
||
}
|
||
});
|
||
}, 3000);
|
||
}
|
||
callHomeData();
|
||
</script>
|
||
|
||
<script>
|
||
function callSOSCheckEndpoint() {
|
||
setInterval(function() {
|
||
$.ajax({
|
||
url: '/sos_check',
|
||
method: 'POST',
|
||
success: function(data) {
|
||
if (data) {
|
||
data = JSON.parse(data);
|
||
console.log(data);
|
||
var alertHTML = '<div class="alert alert-success alert-dismissible fade show" role="alert">';
|
||
var alertMessages = [];
|
||
|
||
// Iterate over the returned data
|
||
data.forEach(function(alertt) {
|
||
var statname = alertt["stationName"];
|
||
var sosAlertType = alertt["alertType"];
|
||
var alertMessage = 'SOS ALERT ON THIS STATIONS: ' + statname + ':' + sosAlertType;
|
||
alertMessages.push(alertMessage);
|
||
});
|
||
alertMessages.forEach(function(alertMessage) {
|
||
alertHTML += '<div class="alert alert-warning">' + alertMessage + '</div>';
|
||
});
|
||
alertHTML += '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>'
|
||
var x = document.getElementById("alertcontainer");
|
||
x.innerHTML = alertHTML;
|
||
}
|
||
}
|
||
});
|
||
}, 10000);
|
||
}
|
||
callSOSCheckEndpoint();
|
||
</script>
|
||
|
||
|
||
|
||
</body>
|
||
|
||
</html>
|