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>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>