added all info here

2024-02-23 10:00:48 +07:00
commit b6156ae81d
19 changed files with 1035 additions and 0 deletions
@@ -0,0 +1,187 @@
+<!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>
+  <!-- Centered Buttons -->
+  <div class="d-flex justify-content-around mt-5">
+    <button class="btn btn-primary btn-lg mr-3"  type="button" onclick="document.getElementById('form1').submit();">Запуск</button>
+    <p class="fw-medium fs-3" id="sliderAmount">{{cur_speed}}</p>
+    <button class="btn btn-primary btn-lg ml-3" type="button" onclick="document.getElementById('form2').submit();">Остановка</button>
+  </div>
+
+  <!-- Slider -->
+  <div class="container mt2-5">
+        <div class="row">
+                <div class="col-md-3"></div>
+                <div class="col-md-6">
+                        <form method="POST" action="/">
+          <input type="range" class="form-range" value="{{cur_speed}}" min="1" max="255" step="1" name="slide" id="slide">
+                        </form>
+                        <canvas id="LastTemp"></canvas/>
+                </div>
+
+  <div class="col-md-3"><canvas id="myChart" style="max-width: 500px;"></canvas></div>
+        </div>
+
+  <!-- Forms -->
+  <form id="form1"  action="mashinka_go" method="POST" style="display: none;"></form>
+  <form id="form2"  action="mashinka_stop" method="POST" style="display: none;"></form>
+  <!-- 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>
+    var slide = document.getElementById('slide'),
+    sliderDiv = document.getElementById("sliderAmount");
+
+    slide.onchange = function() {
+    sliderDiv.innerHTML = this.value;
+    $.post({
+            url: '/',
+            data: $('form').serialize(),
+            success: function(response){
+                console.log(response);
+            },
+            error: function(error){
+                console.log(error);
+            }
+        });
+}
+
+  </script>
+  <script>
+(() => {
+  'use strict'
+
+  // Graphs
+  const ctx = document.getElementById('LastTemp')
+  // eslint-disable-next-line no-unused-vars
+  const myChart = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels: [
+        'Sunday',
+        'Monday',
+        'Tuesday',
+        'Wednesday',
+        'Thursday',
+        'Friday',
+        'Saturday'
+      ],
+      datasets: [{
+        data: [
+          15339,
+          21345,
+          18483,
+          24003,
+          23489,
+          24092,
+          12034
+        ],
+        lineTension: 0,
+        backgroundColor: 'transparent',
+        borderColor: '#007bff',
+        borderWidth: 4,
+        pointBackgroundColor: '#007bff'
+      }]
+    },
+    options: {
+      plugins: {
+        legend: {
+          display: false
+        },
+        tooltip: {
+          boxPadding: 3
+        }
+      }
+    }
+  })
+})()
+
+  </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>
+$('form1').submit(function(e){
+    e.preventDefault();
+    $.ajax({
+        url: '/mashinka_go',
+        type: 'post',
+        data:$('#myForm').serialize(),
+        success:function(){
+            // Whatever you want to do after the form is successfully submitted
+        }
+    });
+});
+$('form2').submit(function(e){
+    e.preventDefault();
+    $.ajax({
+        url: '/mashinka_stop',
+        type: 'post',
+        data:$('#myForm').serialize(),
+        success:function(){
+            // Whatever you want to do after the form is successfully submitted
+        }
+    });
+});
+</script>
+
+</body>
+
+</html>