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

2024-02-27 13:38:37 +07:00 · 2024-02-27 13:38:37 +07:00 · 58fe757a56
parent 8ee399aed3
commit 58fe757a56
10 changed files with 339 additions and 59 deletions
--- a/accounts.json
+++ b/accounts.json
@ -0,0 +1,6 @@
+[
+    {
+        "username": "1",
+        "password": "6b86b273ff34fce19d6b804eff5a3f5747ada4eaa22f1d49c01e52ddb7875b4b"
+    }
+]
--- a/app.py
+++ b/app.py
@ -70,13 +70,9 @@ def get_cur_speed(session):
 def index():
    define_session(session)
    if session['loggedin'] == True:
-        cur_speed = 25
-        if request.method == "POST":
-            cur_speed = request.form.get("slide")
-            return render_template("mashinka.html", cur_speed = cur_speed)
-        return render_template("mashinka.html", cur_speed = cur_speed)
-    else:
        return render_template("index.html")
+    else:
+        return render_template("unauthorized.html")

@app.route('/register', methods = ["POST", "GET"])
 def register():
@ -109,25 +105,50 @@ def login():
        else:
            return render_template("login.html", err="Неверный логин/пароль")

-#Общение с ЕСП
+
+
+#Общение с ЕSP
+
+@app.route("/get_data", methods = ["POST"])
+def return_data():
+    if 1:
+#    if session['loggedin']:
+        sensors = ['earthquake', 'techka', 'pozhar', 'soundstatus', 'tok', 'potok', 'nasostoggle', 'nasosspeed','lightst', 'lightpower', 'gaz']
+        data = {'1': {},
+                '2': {},
+                '3': {}}
+        for i in range(1,4):
+            for j in sensors:
+                if j in ['earthquake', 'techka', 'nasostoggle', 'pozhar', 'soundstatus', 'lighst', 'onfire', 'gaz']:
+                    data[str(i)][j] = random.randint(0,1)
+                else:
+                    data[str(i)][j] = random.randint(0, 100)
+        print(data)
+        return json.dumps(data)
+    return 'no_rights'
+
+
@app.route("/sos_check", methods = ["POST"])
 def sos_check():
    if random.randint(0,1):
        return check_sos(socket)
    else:
        return ''
+
@app.route("/mashinka_go", methods = ["POST"])
 def mashinka_go():
    if session['loggedin']:
        return ''
    else:
        return ""
+
@app.route("/mashinka_stop", methods = ["POST"])
 def mashinka_stop():
    if session['loggedin']:
        return ''
    else:
        return ""
+
@app.route("/get_temperature", methods = ["POST"])
 def get_temperature():
    if session['loggedin']:
--- a/data.json
+++ b/data.json
@ -0,0 +1 @@
+{}
--- a/esplistener/pycache/init.cpython-311.pyc
+++ b/esplistener/pycache/init.cpython-311.pyc
--- a/esplistener/pycache/esplistener.cpython-311.pyc
+++ b/esplistener/pycache/esplistener.cpython-311.pyc
--- a/esplistener/esplistener.py
+++ b/esplistener/esplistener.py
@ -7,7 +7,7 @@ gets_data = {}

 def initialize():
    s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
-    s.bind(('192.168.1.35', 7777))
+    s.bind(('192.168.0.249', 7777))
    s.settimeout(0.5)
    with open('data.json') as f:
            data = json.load(f)
--- a/index.bk
+++ b/index.bk
@ -0,0 +1,139 @@
+<!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>
--- a/templates/accounts.json
+++ b/templates/accounts.json
@ -1,22 +0,0 @@
-[
-    {
-        "username": "1",
-        "password": "d4735e3a265e16eee03f59718b9b5d03019c07d8b6c51f90da3a666eec13ab35"
-    },
-    {
-        "username": "1",
-        "password": "d4735e3a265e16eee03f59718b9b5d03019c07d8b6c51f90da3a666eec13ab35"
-    },
-    {
-        "username": "1",
-        "password": "4e07408562bedb8b60ce05c1decfe3ad16b72230967de01f640b7e4729b49fce"
-    },
-    {
-        "username": "2",
-        "password": "d4735e3a265e16eee03f59718b9b5d03019c07d8b6c51f90da3a666eec13ab35"
-    },
-    {
-        "username": "skillissue",
-        "password": "a665a45920422f9d417e4867efdc4fb8a04a1f3fff1fa07e998e86f7f7a27ae3"
-    }
-]
--- a/templates/index.html
+++ b/templates/index.html
@ -20,27 +20,83 @@
    <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>`;
+
+
+      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() {
@ -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>

--- a/templates/unauthorized.html
+++ b/templates/unauthorized.html
@ -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>