Hugging Face's logo

Spaces:
DMTuit
/
gc_api_raBiz
Sleeping

App Files Community
DmitrMakeev commited on
Commit
326b9e2
·
verified ·
1 Parent(s): 61e87e6

Update online.html

Browse files
Files changed (1) hide show
  1. online.html +127 -418
online.html CHANGED
@@ -1,431 +1,140 @@
1
  <!DOCTYPE html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <link rel="icon" type="image/ico" href="https://huggingface.co/spaces/igs-img/stor/resolve/main/list.ico">
7
- <title>My static Space</title>
8
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
9
- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
10
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
 
 
 
 
 
 
12
 
 
 
 
 
 
 
13
 
14
-
15
- </head>
16
  <body>
17
 
18
- <nav class="navbar navbar-light bg-light">
19
- <a class="navbar-brand" href="/online">
20
- <img src="https://huggingface.co/spaces/igs-img/stor/resolve/main/list.png" width="30" height="30" class="d-inline-block align-top" alt="">
21
- MackorLab
22
- </a>
23
- <form class="form-inline">
24
- <button id="st_onl" class="btn btn-success" type="button" >Онлайн</button>
25
- <button id="st_set" class="btn btn-outline-success" type="button" >Настройки</button>
26
-
27
- </form>
28
- </nav>
29
-
30
-
31
-
32
- <div class="container mt-3">
33
-
34
- <div class="container text-center">
35
- <h1>Онлайн данные системы</h1>
36
- </div> <br>
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
-
57
-
58
- <div class="card-deck">
59
- <div class="card">
60
-
61
- <div class="card-body">
62
- <div class="container text-center">
63
- <h5 class="card-title">Время </h5>
64
- </div>
65
- <div class="container text-center">
66
- <h2><span id="v_hid"></span> : <span id="v_min"></span></h2>
67
- </div>
68
- </div>
69
- <div class="card-footer">
70
-
71
- </div>
72
- </div>
73
- <div class="card">
74
-
75
- <div class="card-body">
76
- <div class="container text-center">
77
- <h5 class="card-title">Неделя </h5>
78
- </div>
79
- <div class="container text-center">
80
- <h2><span id="wek"></span></h2>
81
- </div>
82
- </div>
83
- <div class="card-footer">
84
-
85
- </div>
86
- </div>
87
- <div class="card">
88
-
89
- <div class="card-body">
90
- <div class="container text-center">
91
- <h5 class="card-title">День </h5>
92
- </div>
93
- <div class="container text-center">
94
- <h2><span id="dey"></span></h2>
95
- </div>
96
- </div>
97
- <div class="card-footer">
98
-
99
- </div>
100
- </div>
101
- </div>
102
- <br>
103
-
104
-
105
-
106
-
107
-
108
-
109
- <div class="card-deck">
110
- <div class="card">
111
-
112
- <div class="card-body">
113
- <div class="container text-center">
114
- <h5 class="card-title">pH раствора</h5>
115
- </div>
116
- <div class="container text-center">
117
- <h2><span id="ph"></span></h2>
118
- </div>
119
- </div>
120
- <div class="card-footer">
121
-
122
- </div>
123
- </div>
124
- <div class="card">
125
-
126
- <div class="card-body">
127
- <div class="container text-center">
128
- <h5 class="card-title">EC раствора</h5>
129
- </div>
130
- <div class="container text-center">
131
- <h2><span id="ec"></span></h2>
132
- </div>
133
- </div>
134
- <div class="card-footer">
135
-
136
- </div>
137
- </div>
138
- <div class="card">
139
-
140
- <div class="card-body">
141
- <div class="container text-center">
142
- <h5 class="card-title">Т. раствора</h5>
143
- </div>
144
- <div class="container text-center">
145
- <h2><span id="tS"></span></h2>
146
- </div>
147
- </div>
148
- <div class="card-footer">
149
-
150
- </div>
151
- </div>
152
- </div>
153
-
154
- <br>
155
- <div class="card-deck">
156
- <div class="card">
157
-
158
- <div class="card-body">
159
- <div class="container text-center">
160
- <h5 class="card-title">Т. воздуха</h5>
161
- </div>
162
- <div class="container text-center">
163
- <h2><span id="tA"></span></h2>
164
- </div>
165
- </div>
166
- <div class="card-footer">
167
-
168
- </div>
169
- </div>
170
- <div class="card">
171
-
172
- <div class="card-body">
173
- <div class="container text-center">
174
- <h5 class="card-title">Вл. воздуха</h5>
175
- </div>
176
- <div class="container text-center">
177
- <h2><span id="hDm"></span></h2>
178
- </div>
179
- </div>
180
- <div class="card-footer">
181
-
182
- </div>
183
- </div>
184
- <div class="card">
185
-
186
- <div class="card-body">
187
- <div class="container text-center">
188
- <h5 class="card-title">Об. вентилятора</h5>
189
- </div>
190
- <div class="container text-center">
191
- <h2><span id="sVen"></span></h2>
192
- </div>
193
- </div>
194
- <div class="card-footer">
195
-
196
- </div>
197
- </div>
198
- </div>
199
-
200
-
201
- <br>
202
-
203
-
204
- <div class="card-deck">
205
- <div class="card">
206
-
207
- <div class="card-body">
208
- <div class="container text-center">
209
- <h5 class="card-title">Система: <span id="rFul"></span></h5>
210
- </div>
211
- </div>
212
- </div>
213
- <div class="card">
214
-
215
- <div class="card-body">
216
- <div class="container text-center">
217
- <h5 class="card-title">Освещение: <span id="rLi"></span></h5>
218
- </div>
219
- </div>
220
- </div>
221
- <div class="card">
222
-
223
- <div class="card-body">
224
- <div class="container text-center">
225
- <h5 class="card-title">Под.воды: <span id="rWat"></span></h5>
226
- </div>
227
- </div>
228
- </div>
229
- </div>
230
-
231
-
232
-
233
-
234
- <br>
235
-
236
- <div class="card-deck">
237
- <div class="card">
238
-
239
- <div class="card-body">
240
- <div class="container text-center">
241
- <h5 class="card-title">Под. раствора: <span id="rRas"></span></h5>
242
- </div>
243
- </div>
244
- </div>
245
- <div class="card">
246
-
247
- <div class="card-body">
248
- <div class="container text-center">
249
- <h5 class="card-title">Доз. pH: <span id="rPH"></span></h5>
250
- </div>
251
- </div>
252
- </div>
253
- <div class="card">
254
-
255
- <div class="card-body">
256
- <div class="container text-center">
257
- <h5 class="card-title">Доз. EC: <span id="rEC"></span></h5>
258
- </div>
259
- </div>
260
- </div>
261
- </div>
262
-
263
-
264
-
265
-
266
- <br>
267
-
268
-
269
- <div class="card-deck">
270
- <div class="card">
271
-
272
- <div class="card-body">
273
- <div class="container text-center">
274
- <h5 class="card-title">Слив: <span id="rSl"></span></h5>
275
- </div>
276
- </div>
277
- </div>
278
- <div class="card">
279
-
280
- <div class="card-body">
281
- <div class="container text-center">
282
- <h5 class="card-title">Ур. раствора: <span id="rLe"></span></h5>
283
- </div>
284
- </div>
285
- </div>
286
- <div class="card">
287
-
288
- <div class="card-body">
289
- <div class="container text-center">
290
- <h5 class="card-title">Дат. затопления: <span id="alW"></span></h5>
291
- </div>
292
- </div>
293
- </div>
294
- </div>
295
-
296
- <br>
297
-
298
-
299
-
300
-
301
- <div class="card text-center">
302
-
303
- <div class="card-body">
304
- <div class="container text-center">
305
- <span><button id="but_start" type="button" class="btn btn-success btn-lg">Старт</button></span>
306
- <span><button id="but_stop" type="button" class="btn btn-danger btn-lg">Стоп</button></span>
307
- <span><button id="but_res" type="button" class="btn btn-info btn-lg">Рестарт</button></span>
308
- <span><button id="but_sliv" type="button" class="btn btn-secondary btn-lg">Зам. раствора</button></span>
309
- </div>
310
- </div>
311
- <div class="card-footer text-muted"> </div>
312
- </div>
313
- <br><br><br><br><br><br>
314
-
315
- </div>
316
-
317
-
318
- <script>
319
- document.getElementById("but_start").addEventListener("click", function() {
320
- var xhr = new XMLHttpRequest();
321
- xhr.open("GET", "/but_start", true);
322
- xhr.send();
323
- });
324
- </script>
325
-
326
- <script>
327
- document.getElementById("but_stop").addEventListener("click", function() {
328
- var xhr = new XMLHttpRequest();
329
- xhr.open("GET", "/but_stop", true);
330
- xhr.send();
331
- });
332
- </script>
333
-
334
- <script>
335
- document.getElementById("but_res").addEventListener("click", function() {
336
- var xhr = new XMLHttpRequest();
337
- xhr.open("GET", "/but_res", true);
338
- xhr.send();
339
- });
340
- </script>
341
-
342
- <script>
343
- document.getElementById("but_sliv").addEventListener("click", function() {
344
- var xhr = new XMLHttpRequest();
345
- xhr.open("GET", "/but_sliv", true);
346
- xhr.send();
347
- });
348
- </script>
349
-
350
-
351
-
352
-
353
- <script>
354
- document.getElementById("st_onl").addEventListener("click", function() {
355
- // Получаем основной URL без пути и параметров
356
- var baseUrl = window.location.origin;
357
- // Добавляем необходимый путь к основному URL
358
- var targetUrl = baseUrl + "/online";
359
- // Переходим по сформированному URL
360
- window.location.href = targetUrl;
361
- });
362
- </script>
363
- <script>
364
- document.getElementById("st_set").addEventListener("click", function() {
365
- // Получаем основной URL без пути и параметров
366
- var baseUrl = window.location.origin;
367
- // Добавляем необходимый путь к основному URL
368
- var targetUrl = baseUrl + "/settings";
369
- // Переходим по сформированному URL
370
- window.location.href = targetUrl;
371
- });
372
- </script>
373
-
374
-
375
-
376
-
377
-
378
-
379
-
380
-
381
- <script>
382
- function updateValues(data) {
383
- document.getElementById("dey").textContent = data.dey;
384
- document.getElementById("wek").textContent = data.wek;
385
- document.getElementById("v_hid").textContent = data.v_hid;
386
- document.getElementById("v_min").textContent = data.v_min;
387
- document.getElementById("dey").textContent = data.dey;
388
- document.getElementById("wek").textContent = data.wek;
389
- document.getElementById("ph").textContent = data.ph;
390
- document.getElementById("ec").textContent = data.ec;
391
- document.getElementById("tS").textContent = data.tS;
392
- document.getElementById("tA").textContent = data.tA;
393
- document.getElementById("hDm").textContent = data.hDm;
394
- document.getElementById("sVen").textContent = data.sVen;
395
- document.getElementById("rFul").textContent = data.rFul;
396
- document.getElementById("rLi").textContent = data.rLi;
397
- document.getElementById("rWat").textContent = data.rWat;
398
- document.getElementById("rRas").textContent = data.rRas;
399
- document.getElementById("rPH").textContent = data.rPH;
400
- document.getElementById("rEC").textContent = data.rEC;
401
- document.getElementById("rSl").textContent = data.rSl;
402
- document.getElementById("rLe").textContent = data.rLe;
403
- document.getElementById("alW").textContent = data.alW;
404
-
405
- }
406
-
407
- function fetchValues() {
408
- var xhr = new XMLHttpRequest();
409
- xhr.open("GET", "/online_api", true);
410
- xhr.setRequestHeader("Content-Type", "application/json");
411
- xhr.onreadystatechange = function () {
412
- if (xhr.readyState === 4 && xhr.status === 200) {
413
- var response = JSON.parse(xhr.responseText);
414
- updateValues(response);
415
  }
416
- };
417
- xhr.send();
418
- }
419
-
420
- fetchValues();
421
- setInterval(fetchValues, 10000);
422
- </script>
423
-
424
-
425
-
426
-
427
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
428
 
429
-
430
  </body>
 
431
  </html>
 
1
  <!DOCTYPE html>
2
  <html>
 
 
 
 
 
 
 
3
 
4
+ <head>
5
+ <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
6
+ <meta content="utf-8" http-equiv="encoding">
7
+ <style>
8
+ .button {
9
+ border: none;
10
+ color: white;
11
+ padding: 16px 32px;
12
+ text-align: center;
13
+ text-decoration: none;
14
+ display: inline-block;
15
+ font-size: 16px;
16
+ margin: 4px 2px;
17
+ transition-duration: 0.4s;
18
+ cursor: pointer;
19
+ }
20
 
21
+ .buttonGreen {
22
+ background-color: white;
23
+ color: black;
24
+ border: 2px solid #4CAF50;
25
+ }
26
 
27
+ .buttonGreen:hover {
28
+ background-color: #4CAF50;
29
+ color: white;
30
+ }
31
+ </style>
32
+ </head>
33
 
 
 
34
  <body>
35
 
36
+ <h1>WhatsApp client browser example</h1>
37
+
38
+ <form>
39
+ <label for="idInstance">Id Instance:</label><br>
40
+ <input required type="text" id="idInstance" name="idInstance"><br>
41
+ <label for="apiTokenIsntance">API Token:</label><br>
42
+ <input required type="text" id="apiTokenIsntance" name="apiTokenIsntance"><br>
43
+ </form>
44
+
45
+ <p style="color:blue" id="statusText"></p>
46
+ <p style="color:blue" id="resultText"></p>
47
+ <p>Press button to get qr code</p>
48
+ <div style="display:grid; width: 20%">
49
+ <button id="getQrBtn" class="button buttonGreen">Get QR</button>
50
+ <button style="display: none" hidden id="logoutQrBtn" class="button buttonGreen">Logout</button>
51
+ <img hidden id="img-qr-code" alt="QR-Code" class="sb-qr-wizard-qr-code" aria-hidden="false" src="data:image/png;base64,%QR_DATA%" style="">
52
+ </div>
53
+ <script type="text/javascript" src="https://unpkg.com/@green-api/whatsapp-api-client/lib/whatsapp-api-client.min.js"></script>
54
+ <script>
55
+ var intervalId = null
56
+ const qrCodeElement = document.getElementById("img-qr-code")
57
+ const qrTempalte = qrCodeElement.getAttribute('src');
58
+
59
+ document.getElementById("getQrBtn").addEventListener("click", function () {
60
+ try {
61
+ isAuthed();
62
+ clearInterval(intervalId)
63
+ updateQRCode()
64
+ intervalId = setInterval(updateQRCode, 5000);
65
+
66
+ } catch (reason) {
67
+ console.error(reason);
68
+ document.getElementById("resultText").innerHTML = reason + ". See logs for details";
69
+ }
70
+ });
71
+
72
+ document.getElementById("logoutQrBtn").addEventListener("click", function () {
73
+ try {
74
+ const restAPI = whatsAppClient.restAPI(({
75
+ idInstance: document.getElementById("idInstance").value,
76
+ apiTokenInstance: document.getElementById("apiTokenIsntance").value
77
+ }))
78
+
79
+ restAPI.instance.logout()
80
+ .then((data) => {
81
+ document.getElementById("resultText").innerHTML = "isLogout=" + data.isLogout
82
+ isAuthed();
83
+ }).catch((reason) => {
84
+ console.error(reason);
85
+ document.getElementById("resultText").innerHTML = reason + ". See logs for details";
86
+ });
87
+ } catch (reason) {
88
+ console.error(reason);
89
+ document.getElementById("resultText").innerHTML = reason + ". See logs for details";
90
+ }
91
+ });
92
+
93
+ function updateQRCode() {
94
+ const restAPI = whatsAppClient.restAPI(({
95
+ idInstance: document.getElementById("idInstance").value,
96
+ apiTokenInstance: document.getElementById("apiTokenIsntance").value
97
+ }))
98
+ restAPI.instance.qr()
99
+ .then((data) => {
100
+ console.log(data);
101
+ document.getElementById("resultText").innerHTML = "";
102
+ if (data.type === 'qrCode') {
103
+ qrCodeElement.hidden = false;
104
+ qrCodeElement.setAttribute('src', qrTempalte.replace("%QR_DATA%", data.message))
105
+ } else {
106
+ qrCodeElement.hidden = true;
107
+ clearInterval(intervalId)
108
+ isAuthed();
109
+ document.getElementById("resultText").innerHTML = data.message
110
+ }
111
+ }).catch((reason) => {
112
+ console.error(reason);
113
+ document.getElementById("resultText").innerHTML = reason + ". See logs for details";
114
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
115
  }
 
 
 
 
 
 
 
 
 
 
 
116
 
117
+ function isAuthed() {
118
+ const restAPI = whatsAppClient.restAPI(({
119
+ idInstance: document.getElementById("idInstance").value,
120
+ apiTokenInstance: document.getElementById("apiTokenIsntance").value
121
+ }))
122
+ restAPI.instance.getStateInstance().then(data => {
123
+ document.getElementById("statusText").innerHTML = data.stateInstance;
124
+
125
+ if (data.stateInstance === 'authorized') {
126
+ document.getElementById("getQrBtn").style.display = "none"
127
+ document.getElementById("logoutQrBtn").style.display = "block"
128
+ } else {
129
+ document.getElementById("getQrBtn").style.display = "block"
130
+ document.getElementById("logoutQrBtn").style.display = "none"
131
+ }
132
+
133
+
134
+ })
135
+ }
136
+ </script>
137
 
 
138
  </body>
139
+
140
  </html>