Отрисовал всё по кайфу

templates/index.html

@@ -20,29 +20,85 @@
     <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="d-flex justify-content-center mt-5">
-    <button class="btn btn-primary btn-lg mr-3" class="update_form" type="button" onclick="document.location.href = '/login'">Авторизация</button>
-    &nbsp; &nbsp; &nbsp; 
-    <button class="btn btn-primary btn-lg ml-3" class="update_form" type="button" onclick="document.location.href = '/register'">Регистрация</button>
-  </div>
+  <div class="alertContainer" id="alertcontainer"></div>
+  <div class="homeData" id="homeData"></div>
 
 
-        </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>`;
 
-  <script>
+
+      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({
@@ -52,7 +108,7 @@
         if (data) {
           data = JSON.parse(data);
           console.log(data);
-                var alertHTML = '<div class="alert alert-success alert-dismissible fade show" role="alert">'
+                var alertHTML = '<div class="alert alert-success alert-dismissible fade show" role="alert">';
         var alertMessages = [];
 
           // Iterate over the returned data
@@ -76,23 +132,7 @@
   callSOSCheckEndpoint();
 </script>
 
-<script>
-// this is the id of the submit button
-$(".update_form").click(function() {
-    var myform = $(this).closest("form"); //parent form
-    $.ajax({
-           type: "POST",
-           url: "approve_test.php",
-           data: myform.serialize(), // serializes the form's elements.
-           success: function(data)
-           {
-               alert(data); // show response from the php script.
-           }
-         });
 
-    return false; // avoid to execute the actual submit of the form.
-});
-</script>
 
 </body>