Hugging Face's logo

Spaces:
DIAMONIK7777
/
wa_gc_api
Sleeping

App Files Community
DmitrMakeev commited on
Commit
a222113
•
1 Parent(s): 6723e97

Update settings.html

Browse files
Files changed (1) hide show
  1. settings.html +127 -402
settings.html CHANGED
@@ -1,415 +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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
 
11
- <style>
12
- input[type="number"]::-webkit-inner-spin-button,
13
- input[type="number"]::-webkit-outer-spin-button {
14
- -webkit-appearance: inner-spin-button;
15
- opacity: 1;
16
- }
17
-
18
- input[type="number"] {
19
- -moz-appearance: textfield;
20
- }
21
 
22
- </style>
 
 
 
 
 
23
 
24
-
25
- </head>
26
  <body>
27
 
28
-
29
- <nav class="navbar navbar-light bg-light">
30
- <a class="navbar-brand" href="/settings">
31
- <img src="https://huggingface.co/spaces/igs-img/stor/resolve/main/list.png" width="30" height="30" class="d-inline-block align-top" alt="">
32
- MackorLab
33
- </a>
34
- <form class="form-inline">
35
- <button id="st_onl" class="btn btn-outline-success" type="button" >Онлайн</button>
36
- <button id="st_set" class="btn btn-success" type="button" >Настройки</button>
37
-
38
- </form>
39
- </nav>
40
-
41
-
42
-
43
-
44
-
45
-
46
- <div class="container mt-3">
47
- <div class="container text-center">
48
- <h1>Настройки системы</h1>
49
- </div> <br>
50
-
51
-
52
-
53
- <div class="card-deck">
54
- <div class="card">
55
-
56
- <div class="card-body">
57
- <!-- Уровень - PH --> <div class="container text-center">
58
- <h4>Уровень pH</h4> </div>
59
- <p>EEPROM : <span id="pH_eep"></span></p>
60
- <form>
61
- <label for="pH_set">Новое : </label>
62
- <input type="number" id="pH_set" value="5.7" min="1" max="14" step="0.01">
63
- </form>
64
- </div>
65
- <div class="card-footer">
66
- <button id="pH_set_but" type="button" class="btn btn-success btn-lg">Записать</button>
67
- </div>
68
- </div>
69
- <div class="card">
70
-
71
- <div class="card-body">
72
- <!-- PH ON - sec -->
73
- <h4>pH доз. ON sec.</h4>
74
- <p>EEPROM : <span id="ph_on_eep"></span></p>
75
- <form>
76
- <label for="ph_on_set">Новое : </label>
77
- <input type="number" id="ph_on_set" value="2.5" min="0.1" max="20" step="0.01">
78
- </form>
79
- </div>
80
- <div class="card-footer">
81
- <button id="ph_on_set_but" type="button" class="btn btn-success btn-lg">Записать</button>
82
- </div>
83
- </div>
84
- <div class="card">
85
-
86
- <div class="card-body">
87
- <h4>Уровень EC</h4>
88
- <p>EEPROM : <span id="ec_eep"></span></p>
89
-
90
- <form>
91
- <label for="ec_set">Новое : </label>
92
- <input type="number" id="ec_set" value="0.85" min="0.1" max="4" step="0.01">
93
- </form>
94
- </div>
95
- <div class="card-footer">
96
- <button id="ec_set_but" type="button" class="btn btn-success btn-lg">Записать</button>
97
- </div>
98
- </div>
99
- </div>
100
-
101
-
102
- <br>
103
-
104
- <div class="card-deck">
105
- <div class="card">
106
-
107
- <div class="card-body">
108
- <h4>EC доз. A_ON sec.</h4>
109
- <p>EEPROM : <span id="ec_A_eep"></span></p>
110
-
111
- <form>
112
- <label for="ec_A_set">Новое : </label>
113
- <input type="number" id="ec_A_set" value="1.5" min="0.1" max="20" step="0.01">
114
- </form>
115
- </div>
116
- <div class="card-footer">
117
- <button id="ec_A_set_but" type="button" class="btn btn-success btn-lg">Записать</button>
118
- </div>
119
- </div>
120
- <div class="card">
121
-
122
- <div class="card-body">
123
- <h4>EC доз. B_ON sec.</h4>
124
- <p>EEPROM : <span id="ec_B_eep"></span></p>
125
-
126
- <form>
127
- <label for="ec_B_set">Новое : </label>
128
- <input type="number" id="ec_B_set" value="1.5" min="0.1" max="20" step="0.01">
129
- </form>
130
- </div>
131
- <div class="card-footer">
132
- <button id="ec_B_set_but" type="button" class="btn btn-success btn-lg">Записать</button>
133
- </div>
134
- </div>
135
- <div class="card">
136
-
137
- <div class="card-body">
138
- <h4>EC доз. C_ON sec.</h4>
139
- <p>EEPROM : <span id="ec_C_eep"></span></p>
140
-
141
- <form>
142
- <label for="ec_C_set">Новое : </label>
143
- <input type="number" id="ec_C_set" value="1.5" min="0.1" max="20" step="0.01">
144
- </form>
145
- </div>
146
- <div class="card-footer">
147
- <button id="ec_C_set_but" type="button" class="btn btn-success btn-lg">Записать</button>
148
- </div>
149
- </div>
150
- </div>
151
-
152
-
153
-
154
- <br>
155
-
156
-
157
-
158
- <div class="card-deck">
159
- <div class="card">
160
-
161
- <div class="card-body">
162
- <h4>Свет ON </h4>
163
- <p>EEPROM: <span id="l_ON_h_eep"></span> : <span id="l_ON_m_eep"></span></p>
164
- <form>
165
- <label for="l_ON_h_set">Новое h : </label>
166
- <input type="number" id="l_ON_h_set" value="12" min="0" max="23" step="1">
167
- </form>
168
- <form>
169
- <label for="l_ON_m_set">Новое m : </label>
170
- <input type="number" id="l_ON_m_set" value="30" min="0" max="59" step="1">
171
- </form>
172
- </div>
173
- <div class="card-footer">
174
- <button id="l_ON_set" type="button" class="btn btn-success btn-lg">Записать</button>
175
- </div>
176
- </div>
177
- <div class="card">
178
-
179
- <div class="card-body">
180
- <h4>Свет OFF </h4>
181
- <p>EEPROM: <span id="l_OFF_h_eep"></span> : <span id="l_OFF_m_eep"></span></p>
182
- <form>
183
- <label for="l_OFF_h_set">Новое h : </label>
184
- <input type="number" id="l_OFF_h_set" value="12" min="0" max="23" step="1">
185
- </form>
186
- <form>
187
- <label for="l_OFF_m_set">Новое m : </label>
188
- <input type="number" id="l_OFF_m_set" value="30" min="0" max="59" step="1">
189
- </form>
190
- </div>
191
- <div class="card-footer">
192
- <button id="l_OFF_set" type="button" class="btn btn-success btn-lg">Записать</button>
193
- </div>
194
- </div>
195
- <div class="card">
196
-
197
- <div class="card-body">
198
- <h4>Тем. воздуха</h4>
199
- <p>EEPROM : <span id="t_Voz_eep"></span></p>
200
-
201
- <form>
202
- <label for="t_Voz_eep_set">Новое : </label>
203
- <input type="number" id="t_Voz_eep_set" value="25" min="10" max="40" step="1">
204
- </form>
205
- </div>
206
- <div class="card-footer">
207
- <button id="t_Voz_set" type="button" class="btn btn-success btn-lg">Записать</button>
208
- </div>
209
- </div>
210
- </div>
211
-
212
-
213
-
214
- <br><br><br><br>
215
-
216
-
217
-
218
- </div>
219
-
220
-
221
- <script>
222
- document.getElementById("st_onl").addEventListener("click", function() {
223
- // Получаем основной URL без пути и параметров
224
- var baseUrl = window.location.origin;
225
- // Добавляем необходимый путь к основному URL
226
- var targetUrl = baseUrl + "/online";
227
- // Переходим по сформированному URL
228
- window.location.href = targetUrl;
229
- });
230
- </script>
231
- <script>
232
- document.getElementById("st_set").addEventListener("click", function() {
233
- // Получаем основной URL без пути и параметров
234
- var baseUrl = window.location.origin;
235
- // Добавляем необходимый путь к основному URL
236
- var targetUrl = baseUrl + "/settings";
237
- // Переходим по сформированному URL
238
- window.location.href = targetUrl;
239
- });
240
- </script>
241
-
242
-
243
-
244
-
245
-
246
-
247
-
248
-
249
-
250
-
251
-
252
- <script>
253
- // Функция, которая будет выполняться при загрузке страницы
254
- window.onload = function() {
255
- // Создаем запрос
256
- var xhr = new XMLHttpRequest();
257
- xhr.open("GET", "/set_res", true);
258
- // Отправляем запрос
259
- xhr.send();
260
- };
261
- </script>
262
-
263
-
264
-
265
-
266
-
267
-
268
-
269
-
270
-
271
-
272
-
273
- <script>
274
-
275
-
276
- function updateValues(data) {
277
- document.getElementById("pH_eep").textContent = data.ph_eep;
278
- document.getElementById("ph_on_eep").textContent = data.ph_on_eep;
279
- document.getElementById("ec_eep").textContent = data.ec_eep;
280
- document.getElementById("ec_A_eep").textContent = data.ec_A_eep;
281
- document.getElementById("ec_B_eep").textContent = data.ec_B_eep;
282
- document.getElementById("ec_C_eep").textContent = data.ec_C_eep;
283
- document.getElementById("l_ON_h_eep").textContent = data.l_ON_h_eep;
284
- document.getElementById("l_ON_m_eep").textContent = data.l_ON_m_eep;
285
- document.getElementById("l_OFF_h_eep").textContent = data.l_OFF_h_eep;
286
- document.getElementById("l_OFF_m_eep").textContent = data.l_OFF_m_eep;
287
- document.getElementById("t_Voz_eep").textContent = data.t_Voz_eep;
288
-
289
- }
290
-
291
- function fetchValues() {
292
- var xhr = new XMLHttpRequest();
293
- xhr.open("GET", "/settings_api", true);
294
- xhr.setRequestHeader("Content-Type", "application/json");
295
- xhr.onreadystatechange = function () {
296
- if (xhr.readyState === 4 && xhr.status === 200) {
297
- var response = JSON.parse(xhr.responseText);
298
- updateValues(response);
299
  }
300
- };
301
- xhr.send();
302
- }
303
-
304
- fetchValues();
305
- setInterval(fetchValues, 10000);
306
- </script>
307
-
308
-
309
-
310
-
311
-
312
-
313
-
314
-
315
-
316
-
317
- <script>
318
- document.getElementById("pH_set_but").addEventListener("click", function() {
319
- var pHValue = document.getElementById("pH_set").value;
320
- var xhr = new XMLHttpRequest();
321
- xhr.open("GET", "/pH_set?value=" + pHValue, true);
322
- xhr.send();
323
- });
324
- </script>
325
-
326
 
327
- <script>
328
- document.getElementById("ph_on_set_but").addEventListener("click", function() {
329
- var pH_onValue = document.getElementById("ph_on_set").value;
330
- var xhr = new XMLHttpRequest();
331
- xhr.open("GET", "/ph_on_set?value=" + pH_onValue, true);
332
- xhr.send();
333
- });
334
- </script>
335
-
336
-
337
- <script>
338
- document.getElementById("ec_set_but").addEventListener("click", function() {
339
- var ecValue = document.getElementById("ec_set").value;
340
- var xhr = new XMLHttpRequest();
341
- xhr.open("GET", "/EC_set?value=" + ecValue, true);
342
- xhr.send();
343
- });
344
- </script>
345
-
346
- <script>
347
- document.getElementById("ec_A_set_but").addEventListener("click", function() {
348
- var ec_A_setValue = document.getElementById("ec_A_set").value;
349
- var xhr = new XMLHttpRequest();
350
- xhr.open("GET", "/ec_A_set?value=" + ec_A_setValue, true);
351
- xhr.send();
352
- });
353
- </script>
354
-
355
-
356
- <script>
357
- document.getElementById("ec_B_set_but").addEventListener("click", function() {
358
- var ec_B_setValue = document.getElementById("ec_B_set").value;
359
- var xhr = new XMLHttpRequest();
360
- xhr.open("GET", "/ec_B_set?value=" + ec_B_setValue, true);
361
- xhr.send();
362
- });
363
- </script>
364
-
365
-
366
- <script>
367
- document.getElementById("ec_C_set_but").addEventListener("click", function() {
368
- var ec_C_setValue = document.getElementById("ec_C_set").value;
369
- var xhr = new XMLHttpRequest();
370
- xhr.open("GET", "/ec_C_set?value=" + ec_C_setValue, true);
371
- xhr.send();
372
- });
373
- </script>
374
-
375
- <script>
376
- document.getElementById("ec_C_set_but").addEventListener("click", function() {
377
- var ec_C_setValue = document.getElementById("ec_C_set").value;
378
- var xhr = new XMLHttpRequest();
379
- xhr.open("GET", "/ec_C_set?value=" + ec_C_setValue, true);
380
- xhr.send();
381
- });
382
- </script>
383
-
384
-
385
-
386
- <script>
387
- document.getElementById("l_ON_set").addEventListener("click", function() {
388
- var l_ON_h_set = document.getElementById("l_ON_h_set").value;
389
- var l_ON_m_set = document.getElementById("l_ON_m_set").value;
390
- var xhr = new XMLHttpRequest();
391
- xhr.open("GET", "/l_ON_set?l_ON_h_set=" + l_ON_h_set + "&l_ON_m_set=" + l_ON_m_set, true);
392
- xhr.send();
393
- });
394
- </script>
395
 
396
- <script>
397
- document.getElementById("l_OFF_set").addEventListener("click", function() {
398
- var l_OFF_h_set = document.getElementById("l_OFF_h_set").value;
399
- var l_OFF_m_set = document.getElementById("l_OFF_m_set").value;
400
- var xhr = new XMLHttpRequest();
401
- xhr.open("GET", "/l_OFF_set?l_OFF_h_set=" + l_OFF_h_set + "&l_OFF_m_set=" + l_OFF_m_set, true);
402
- xhr.send();
403
- });
404
- </script>
405
-
406
- <script>
407
- document.getElementById("t_Voz_set").addEventListener("click", function() {
408
- var t_Voz_eep_set = document.getElementById("t_Voz_eep_set").value;
409
- var xhr = new XMLHttpRequest();
410
- xhr.open("GET", "/t_Voz_eep_set?value=" + t_Voz_eep_set, true);
411
- xhr.send();
412
- });
413
- </script>
414
  </body>
 
415
  </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>