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

2024-02-27 13:38:37 +07:00
parent 8ee399aed3
commit 58fe757a56
10 changed files with 339 additions and 59 deletions
@@ -1,22 +0,0 @@
-[
-    {
-        "username": "1",
-        "password": "d4735e3a265e16eee03f59718b9b5d03019c07d8b6c51f90da3a666eec13ab35"
-    },
-    {
-        "username": "1",
-        "password": "d4735e3a265e16eee03f59718b9b5d03019c07d8b6c51f90da3a666eec13ab35"
-    },
-    {
-        "username": "1",
-        "password": "4e07408562bedb8b60ce05c1decfe3ad16b72230967de01f640b7e4729b49fce"
-    },
-    {
-        "username": "2",
-        "password": "d4735e3a265e16eee03f59718b9b5d03019c07d8b6c51f90da3a666eec13ab35"
-    },
-    {
-        "username": "skillissue",
-        "password": "a665a45920422f9d417e4867efdc4fb8a04a1f3fff1fa07e998e86f7f7a27ae3"
-    }
-]
@@ -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>

@@ -1,4 +1,99 @@
 <!DOCTYPE html>
 <html lang="en">
-	no rights
+
+<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>
+  <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>
+
+  <!-- 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 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>
+
+<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>
+
 </html>