135 lines
7.1 KiB
HTML
135 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<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));
|
||
|
||
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;
|
||
}
|
||
});
|
||
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);
|
||
}
|
||
});
|
||
}
|
||
|
||
setInterval(homedata, 3000);
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|