added more spaghetticode

This commit is contained in:
2024-02-28 21:41:55 +07:00
parent 58fe757a56
commit 848bd58266
6 changed files with 678 additions and 153 deletions
+124 -129
View File
@@ -1,139 +1,134 @@
<!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() {
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Статистика
</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>
<center><h1>Данные по подъездам</h1></center>
<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 homedata() {
$.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>`;
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));
var alerthtml = '<div class="alert alert-success alert-dismissible fade show" role="alert">';
["1", "2", "3"].forEach(function(alertt) {
console.log(alertt);
html += '<div class="col">';
Object.keys(data[alertt]).forEach(function(key) {
let value = Number(data[alertt][key]);
switch (key) {
case 'pozhar' + alertt:
html += `<div>Пожар ${value ? "<i class='fa-solid fa-triangle-exclamation'></i>" : "<i class='fa-solid fa-check'></i>"}</div>`;
html += `<input type="checkbox" id="pozharotush${alertt}" class="btn-check" ${data[alertt]['pozharolikv'+alertt] ? 'checked' : ''}><label class="btn btn-outline-primary" for="pozharotush${alertt}" id="pozharolikv${alertt}" onclick="sendCommand(this.id)">Система пожаротушения</label><br>`;
if(value == 1) alerthtml += `<div class="alert alert-warning">В подъезде ${alertt} пожар <button type="button" class="btn btn-sm" data-bs-dismiss="alert" id="pozharolikvalert${alertt}" onclick="sendCommand(this.id)">Запустить систему пожаротушения</button></div>`
break;
case 'soundstatus' + alertt:
html += `<div>Лишний шум ${value ? "<i class='fa-solid fa-triangle-exclamation'></i>" : "<i class='fa-solid fa-check'></i>"}</div>`;
html += `<input type="checkbox" id="soundstatuso${alertt}" class="btn-check" ${data[alertt]['soundstatus'+alertt] ? 'checked' : ''}><label class="btn btn-outline-primary" for="soundstatuso${alertt}" id="soundstatus${alertt}" onclick="sendCommand(this.id)">Уведомление о громком шуме</label><br>`;
if (data[alertt]['soundstatus' + alertt] == 1) alerthtml += `<div class="alert alert-warning">В подъезде ${alertt} слишком громко <button type="button" class="btn btn-sm" data-bs-dismiss="alert" id="soundstatusalert${alertt}" onclick="sendCommand(this.id)">Отправить уведомление о шуме</button></div>`;
break;
case 'gaz' + alertt:
html += `<input type="checkbox" id="gazochistka${alertt}" class="btn-check" ${data[alertt]['gazolikv'+alertt] ? 'checked' : ''}><label class="btn btn-outline-primary" for="gazochistka${alertt}" id="gazolikv${alertt}" onclick="sendCommand(this.id)">Система очистки воздуха</label><br>`;
if(value == 1) alerthtml += `<div class="alert alert-warning">В подъезде ${alertt} повышенная концентрация газа<button type="button" class="btn btn-sm" data-bs-dismiss="alert" id="gazolikvalert${alertt}" onclick="sendCommand(this.id)">Запустить систему очистки воздуха</button></div>`
break;
case 'doorst' + alertt:
html += `<div>Статус двери ${value ? "<i class='fa-solid fa-xmark'></i>" : "<i class='fa-solid fa-check'></i>"}</div>`;
html += value ? `<p><button type="button" class="btn btn-primary btn-sm" id="doorst${alertt}" onclick="sendCommand(this.id)">Открыть дверь</button></p>` : `<p><button type="button" class="btn btn-primary btn-sm" id="doorst${alertt}" onclick="sendCommand(this.id)">Закрыть дверь</button> </p>`;
default:
break;
default:
break;
}
});
html += '</div>';
});
html += '</div></div><center>';
for (let i = 0; i < 3; i++)
html += "<p></p>";
html += `<div>Сила тока: ${data['tok']}</div>`;
html += `<div>Сила потока: ${data['potok']}</div>`;
html += `<div> Протечка ${data['techka'] ? "<i class='fa-solid fa-triangle-exclamation'></i>" : "<i class='fa-solid fa-check'></i>"}</div>`;
html += `<div> Землетрясение ${data['earthquake'] ? "<i class='fa-solid fa-triangle-exclamation'></i>" : "<i class='fa-solid fa-check'></i>"}</div>`;
html += `<input type="checkbox" id="nasostog" class="btn-check" ${data['nasostoggle'] == 1 ? 'checked' : ''}><label class="btn btn-outline-primary" for="nasostog" id="nasostoggle" onclick="sendCommand(this.id)">Насос</label><br>`;
html += `<input type="checkbox" id="lightstate" class="btn-check"${data["lightst"] == 1 ? 'checked' : ''}> <label class="btn btn-outline-primary" id="lightst" onclick="sendCommand(this.id)" for="lightstate">Уличное освещение</label><br>`;
html += '</center>';
var x = document.getElementById("homeData");
var t = document.getElementById("alertcontainer");
x.innerHTML = html;
t.innerHTML = alerthtml;
}
}
});
}
homedata();
function sendCommand(id) {
$.ajax({
type: "POST",
url: "/send_command",
data: { comm_id: id },
success: function(response) {
homedata();
console.log("Button ID sent successfully: " + id);
},
error: function(xhr, status, error) {
console.error("Error sending button ID: " + error);
}
});
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>
setInterval(homedata, 3000);
</script>
</body>
</html>