File size: 3,712 Bytes
58f870a
 
 
 
 
 
f9febf6
5e8ef40
58f870a
 
 
 
 
 
291e8c2
6c01ee1
708363a
 
 
 
 
6c01ee1
 
708363a
 
 
 
6c01ee1
708363a
d64bbc2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6c01ee1
708363a
d64bbc2
d9b6018
d64bbc2
a998ef2
9c12554
 
 
 
 
 
bfa7f15
13f141d
 
 
 
 
 
 
 
 
bfa7f15
1a43e11
8aee191
9c12554
8aee191
739b49d
9c12554
 
 
a998ef2
 
 
 
9c12554
 
 
 
 
 
bfa7f15
 
 
 
 
 
 
 
 
 
9c12554
 
 
 
7926dd2
9c12554
 
 
 
 
 
 
 
 
 
 
 
739b49d
291e8c2
58f870a
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>My static Space</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>




      
	</head>
<body>





  
<div class="container mt-3">

   <div class="container text-center"> <br>
    <h1>Онлайн данные системы</h1>
   </div> <br>


  
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Период</h5>
          <p>День : <span id="dey"></span></p>
          <p>Неделя: <span id="wek"></span></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Время</h5>
        <p><span id="v_hid"></span> : <span id="v_min"></span></p>
      </div>
    </div>
  </div>
</div>




  
  
  

  <br>
  
  <br>
  <p>PH раствора: <span id="ph"></span></p>
  <p>EC раствора: <span id="ec"></span></p>
  <p>Т. раствора: <span id="tS"></span></p>
  <p>Т. воздуха: <span id="tA"></span></p>
  <p>Вл. воздуха: <span id="hDm"></span></p>
  <p>Об. вентилятора: <span id="sVen"></span></p>
  <br>
  <p>Система: <span id="rFul"></span></p>
  <p>Освещение: <span id="rLi"></span></p>
  <p>Под.воды: <span id="rWat"></span></p>
  <p>Под. раствора: <span id="rRas"></span></p>
  <p>Доз. pH: <span id="rPH"></span></p>
  <p>Доз. EC: <span id="rEC"></span></p> 
  <p>Слив: <span id="rSl"></span></p>
  <p>Ур. раствора: <span id="rLe"></span></p>
  <p>Дат. затопления: <span id="alW"></span></p> 


 
  
</div>
  <script>
    function updateValues(data) {
      document.getElementById("dey").textContent = data.dey;
      document.getElementById("wek").textContent = data.wek;
      document.getElementById("v_hid").textContent = data.v_hid;
      document.getElementById("v_min").textContent = data.v_min;
      document.getElementById("dey").textContent = data.dey;
      document.getElementById("wek").textContent = data.wek;      
      document.getElementById("ph").textContent = data.ph;
      document.getElementById("ec").textContent = data.ec;
      document.getElementById("tS").textContent = data.tS;
      document.getElementById("tA").textContent = data.tA;
      document.getElementById("hDm").textContent = data.hDm;
      document.getElementById("sVen").textContent = data.sVen;
      document.getElementById("rFul").textContent = data.rFul;
      document.getElementById("rLi").textContent = data.rLi;
      document.getElementById("rWat").textContent = data.rWat;
      document.getElementById("rRas").textContent = data.rRas;
      document.getElementById("rPH").textContent = data.rPH;
      document.getElementById("rEC").textContent = data.rEC;
      document.getElementById("rSl").textContent = data.rSl;
      document.getElementById("rLe").textContent = data.rLe;
      document.getElementById("alW").textContent = data.alW;
      
    }
    
    function fetchValues() {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "/online_api", true);
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var response = JSON.parse(xhr.responseText);
          updateValues(response);
        }
      };
      xhr.send();
    }
    
    fetchValues();
    setInterval(fetchValues, 10000);
  </script>
</body>
</html>