ug2024finals/templates/index.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>