DmitrMakeev commited on
Commit
996e5dd
1 Parent(s): 65e4d0f

Update bas_vk_tab.html

Browse files
Files changed (1) hide show
  1. bas_vk_tab.html +416 -300
bas_vk_tab.html CHANGED
@@ -1,159 +1,187 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Tabulator Example</title>
7
- <link href="https://unpkg.com/tabulator-tables@6.2.1/dist/css/tabulator.min.css" rel="stylesheet">
8
- <script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.2.1/dist/js/tabulator.min.js"></script>
9
- <script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>
10
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
  <style>
12
- body {
13
- font-family: Arial, sans-serif;
14
- text-align: center;
15
- background-color: #f0f0f0;
16
- margin: 0;
17
- padding: 0;
18
- }
19
- h1 {
20
- background-color: #4CAF50;
21
- color: white;
22
- padding: 20px;
23
- margin: 0;
24
- border-bottom: 2px solid #388E3C;
25
- font-size: 28px;
26
- text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
27
- }
28
- button[type="submit"] {
29
- color: white;
30
- background-color: #4CAF50;
31
- border: none;
32
- cursor: pointer;
33
- padding: 10px 20px;
34
- font-size: 16px;
35
- border-radius: 5px;
36
- margin-top: 20px;
37
- transition: background-color 0.3s ease;
38
- }
39
- button[type="submit"]:hover {
40
- background-color: #388E3C;
41
- }
42
- #mediaContainer {
43
- margin-top: 20px;
44
- display: flex;
45
- justify-content: center;
46
- align-items: center;
47
- flex-direction: column;
48
- max-width: 100%;
49
- height: auto;
50
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
51
- border-radius: 10px;
52
- padding: 20px;
53
- background-color: white;
54
- }
55
- #mediaContainer img, #mediaContainer video {
56
- max-width: 100%;
57
- height: auto;
58
- object-fit: contain;
59
- border-radius: 10px;
60
- }
61
- #imageUrl {
62
- margin-top: 20px;
63
- font-size: 16px;
64
- color: #333;
65
- cursor: pointer;
66
- text-decoration: underline;
67
- transition: color 0.3s ease;
68
- }
69
- #imageUrl:hover {
70
- color: #4CAF50;
71
- }
72
- #progressBarContainer {
73
- width: 80%;
74
- margin: 20px auto;
75
- background-color: #ddd;
76
- border-radius: 13px;
77
- padding: 3px;
78
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
79
- }
80
- #progressBar {
81
- width: 0%;
82
- height: 20px;
83
- background-color: #4CAF50;
84
- border-radius: 10px;
85
- text-align: center;
86
- line-height: 20px;
87
- color: white;
88
- transition: width 0.3s ease;
89
- }
90
- #filter-field, #filter-type, #filter-value, #filter-clear , #download-json{
91
- padding: 10px;
92
- font-size: 16px;
93
- margin: 5px;
94
- }
95
- #filter-value {
96
- width: 200px;
97
- }
98
- #filter-clear {
99
- padding: 10px 20px;
100
- }
101
- #filter-field, #filter-type, #filter-value, #filter-clear, #download-json {
102
- padding: 10px;
103
- font-size: 16px;
104
- margin: 5px;
105
- border-radius: 5px;
106
- border: 1px solid #ccc;
107
- }
108
- #filter-value {
109
- width: 200px;
110
- background-color: #f0f0f0;
111
- }
112
- #filter-clear {
113
- padding: 10px 20px;
114
- background-color: #4CAF50;
115
- color: white;
116
- border: none;
117
- cursor: pointer;
118
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
119
- transition: background-color 0.3s ease;
120
- }
121
- #filter-clear:hover {
122
- background-color: #388E3C;
123
- }
124
- #download-json {
125
- padding: 10px 20px;
126
- background-color: #4CAF50;
127
- color: white;
128
- border: none;
129
- cursor: pointer;
130
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
131
- transition: background-color 0.3s ease;
132
- }
133
- #download-json:hover {
134
- background-color: #388E3C;
135
- }
136
- #take-for-yourself {
137
  padding: 10px 20px;
138
  font-size: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
139
  margin: 5px;
140
  border-radius: 5px;
141
  border: 1px solid #ccc;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
142
  background-color: #4CAF50;
 
 
 
143
  color: white;
144
- cursor: pointer;
145
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
146
- transition: background-color 0.3s ease;
147
  }
148
- #take-for-yourself:hover {
149
- background-color: #388E3C;
150
- }
151
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
152
  </head>
153
 
154
  <body>
155
  <div id="header">
156
- <h1>WhatsCRM - Автопилот + Tilda + Бизон 365 + GetCurse</h1>
157
  </div>
158
  <div>
159
  <select id="filter-field">
@@ -162,6 +190,7 @@
162
  <option value="name">Имя</option>
163
  <option value="phone">WhatsApp</option>
164
  <option value="email">Email</option>
 
165
  <option value="curator">Куратор</option>
166
  <option value="shop_st">Статус покупки</option>
167
  <option value="ad_url">Ссылка на пользователя в GC</option>
@@ -192,175 +221,262 @@
192
 
193
  <input id="filter-value" type="text" placeholder="Значение фильтра">
194
 
195
- <button id="filter-clear">Очистить фильтр</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
196
 
 
 
 
 
197
  <button id="download-json">Рассылка по выбранным</button>
198
  <button id="take-for-yourself">Взять себе</button> <!-- Добавлена вторая кнопка -->
199
  </div>
200
  <div id="example-table"></div>
201
 
202
- <script>
203
- document.addEventListener('DOMContentLoaded', function() {
204
- fetch('https://dmtuit-psy2.hf.space/data_gc_tab_out?api_sys=fasSd345D')
205
- .then(response => response.json())
206
- .then(data => {
207
- console.log('Data received:', data); // Логирование данных
208
- // Переворачиваем массив данных
209
- data.reverse();
210
- var linkFormatter = function(cell, formatterParams, onRendered) {
211
- var curator = cell.getValue();
212
- var curatorLink = cell.getData().curator_link;
213
- return `<a href="${curatorLink}" target="_blank">${curator}</a>`;
214
- };
215
- var table = new Tabulator("#example-table", {
216
- data: data, // set table data
217
- layout: "fitColumns", // fit columns to width of table
218
- pagination: "local", // enable local pagination
219
- paginationSize: 50, // number of rows per page
220
- selectable: true, // enable row selection
221
- columns: [
222
- {title:"Номер в списке", field:"id"},
223
- {title:"Имя", field:"name", width:100},
224
- {title:"WhatsApp", field:"phone", formatter: function(cell, formatterParams, onRendered) {
225
- var phone = cell.getValue();
226
- var ws_stop = cell.getData().ws_stop;
227
- var ws_st = cell.getData().ws_st;
228
- var imageUrl1 = "https://i.ibb.co/YBvwFR6/whatsapp-2.png";
229
- var imageUrl2 = "https://i.ibb.co/LZx71cM/1.png";
230
- var imageUrl3 = "https://i.ibb.co/Cvn3QsK/whatsapp-3.png";
231
- var link = `<a href="https://web.whatsapp.com/send?phone=${phone}" target="_blank">`;
232
- if (ws_stop !== "1" && ws_st === "1") {
233
- return link + `<img src="${imageUrl2}" alt="WhatsApp" style="width: 98px; height: 14px;">`;
234
- } else if (ws_stop === "1" && ws_st === "1") {
235
- return link + `<img src="${imageUrl3}" alt="WhatsApp" style="width: 98px; height: 14px;">`;
236
- } else {
237
- return link + `<img src="${imageUrl1}" alt="WhatsApp" style="width: 98px; height: 14px;">`;
238
- }
239
- }},
240
- {title:"ВКонтакте", field:"vk_id", formatter: function(cell, formatterParams, onRendered) {
241
- var vk_id = cell.getValue();
242
- var imageUrlvk1 = "https://i.ibb.co/BKB8R4C/2-2.png";
243
- var imageUrlvk2 = "https://i.ibb.co/MPCGvQX/2-1.png";
244
- var link1 = `<a href="https://vk.com" target="_blank">`;
245
- var link2 = `<a href="https://vk.com/id${vk_id}" target="_blank">`;
246
- if (vk_id === "0" || vk_id === "") {
247
- return link1 + `<img src="${imageUrlvk1}" alt="Image" style="width: 98px; height: 14px;">`;
248
- } else {
249
- return link2 + `<img src="${imageUrlvk2}" alt="Image" style="width: 98px; height: 14px;">`;
250
- }
251
- }},
252
- {title:"Телеграм", field:"chat_id", formatter: function(cell, formatterParams, onRendered) {
253
- var chat_id = cell.getValue();
254
- var imageUrltg1 = "https://i.ibb.co/3S4Wt7m/3-2.png";
255
- var imageUrlntg2 = "https://i.ibb.co/rZrzQhb/3-1.png";
256
- var linktg1 = `<a href="https://t.me" target="_blank">`;
257
- var linktg2 = `<a href="https://t.me/${chat_id}" target="_blank">`;
258
- if (chat_id === "0" || chat_id === "") {
259
- return linktg1 + `<img src="${imageUrltg1}" alt="Image" style="width: 98px; height: 14px;">`;
260
- } else {
261
- return linktg2 + `<img src="${imageUrlntg2}" alt="Image" style="width: 98px; height: 14px;">`;
262
- }
263
- }},
264
- {title:"GetCurse", field:"gc_url", formatter: function(cell, formatterParams, onRendered) {
265
- var gc_url = cell.getValue();
266
- var imageUrlvkgc1 = "https://i.ibb.co/F8825KY/1-2.png";
267
- var imageUrlvkgc2 = "https://i.ibb.co/S3qwFKM/1-1.png";
268
- var linkgc1 = `<a href="https://vk.com/getcourseru" target="_blank">`;
269
- var linkgc2 = `<a href="${gc_url}" target="_blank">`;
270
- if (gc_url === "0" || gc_url === "") {
271
- return linkgc1 + `<img src="${imageUrlvkgc1}" alt="Image" style="width: 98px; height: 14px;">`;
272
- } else {
273
- return linkgc2 + `<img src="${imageUrlvkgc2}" alt="Image" style="width: 98px; height: 14px;">`;
274
- }
275
- }},
276
- {title:"Город", field:"b_city", width:95},
277
- {title:"Email", field:"email", width:95},
278
- {title:"Реплики", field:"b_mess", width:95, cellClick:function(e, cell){
279
- var data = cell.getData();
280
- const notyf = new Notyf({
281
- duration: 5000,
282
- position: {
283
- x: 'right',
284
- y: 'top',
285
- },
286
- });
287
- const message = `
288
- Имя: ${data.name}\n
289
- WhatsApp: ${data.phone}\n
290
- Реплики: ${data.b_mess}
291
- `;
292
- notyf.open({
293
- type: 'info',
294
- message: message,
295
- });
296
- }},
297
- {title:"Куратор", field:"curator", formatter: linkFormatter},
298
- {title:"Статус покупки", field:"shop_st", formatter: function(cell, formatterParams, onRendered) {
299
- var status = cell.getValue();
300
- var color;
301
- switch (status) {
302
- case 'green':
303
- color = 'green';
304
- break;
305
- case 'red':
306
- color = 'red';
307
- break;
308
- case 'yellow':
309
- color = 'yellow';
310
- break;
311
- default:
312
- color = 'gray';
313
- }
314
- return `<div style="width: 20px; height: 20px; background-color: ${color}; border-radius: 50%;"></div>`;
315
- }},
316
- {title:"Канал трафика", field:"pr4", width:95},
317
- {title:"Дата", field:"pr5", width:95},
318
- {title:"Ключ PR", field:"key_pr", width:95},
319
- {title:"Канал", field:"canal", width:95},
320
- {title:"Дата", field:"data_t", width:95},
321
- ],
322
- });
323
- var fieldEl = document.getElementById("filter-field");
324
- var typeEl = document.getElementById("filter-type");
325
- var valueEl = document.getElementById("filter-value");
326
- function updateFilter() {
327
- var filterVal = fieldEl.options[fieldEl.selectedIndex].value;
328
- var typeVal = typeEl.options[typeEl.selectedIndex].value;
329
- if (filterVal) {
330
- table.setFilter(filterVal, typeVal, valueEl.value);
331
- }
332
- }
333
- document.getElementById("filter-field").addEventListener("change", updateFilter);
334
- document.getElementById("filter-type").addEventListener("change", updateFilter);
335
- document.getElementById("filter-value").addEventListener("keyup", updateFilter);
336
- document.getElementById("filter-clear").addEventListener("click", function() {
337
- fieldEl.value = "";
338
- typeEl.value = "=";
339
- valueEl.value = "";
340
- table.clearFilter();
341
- });
342
- function handleDownloadJson() {
343
- var tableData = table.getData("active");
344
- var jsonData = JSON.stringify(tableData, null, 2);
345
- console.log("Данные для рассылки:", jsonData);
346
- }
347
- function handleTakeForYourself() {
348
- var tableData = table.getData("active");
349
- var jsonData = JSON.stringify(tableData, null, 2);
350
- console.log("Данные для себя:", jsonData);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
351
  }
352
- document.getElementById("download-json").addEventListener("click", handleDownloadJson);
353
- document.getElementById("take-for-yourself").addEventListener("click", handleTakeForYourself);
354
- // Take for yourself functionality
355
- document.getElementById('take-for-yourself').addEventListener('click', function() {
356
- var selectedRows = table.getSelectedData();
357
- // Your logic to handle selected rows
358
- console.log('Selected rows:', selectedRows);
359
- });
360
- })
361
- .catch(error => console.error('Error fetching data:', error));
362
- });
363
- </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
364
  </body>
365
 
366
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="ru">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>WhatsMasterCRM</title>
 
 
 
7
 
8
+
9
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
10
+ <script src="https://unpkg.com/@vkontakte/vk-bridge/dist/browser.min.js"></script>
11
+ <script type="text/javascript" src="https://vk.com/js/api/openapi.js?169"></script>
12
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
13
+ <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
14
+ <script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>
15
+
16
+
17
+
18
+ <!-- Подключение стилей Notyf -->
19
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf/notyf.min.css">
20
+
21
+ <!-- Подключение скрипта Notyf -->
22
+ <script src="https://cdn.jsdelivr.net/npm/notyf/notyf.min.js"></script>
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+
32
+
33
+ <link href="https://unpkg.com/tabulator-tables@6.2.1/dist/css/tabulator.min.css" rel="stylesheet">
34
+ <script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.2.1/dist/js/tabulator.min.js"></script>
35
+
36
+
37
+
38
+ <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
39
  <style>
40
+ body {
41
+ font-family: Arial, sans-serif;
42
+ text-align: center;
43
+ background-color: #f0f0f0;
44
+ margin: 0;
45
+ padding: 0;
46
+ }
47
+
48
+ h1 {
49
+ background-color: #4CAF50;
50
+ color: white;
51
+ padding: 20px;
52
+ margin: 0;
53
+ border-bottom: 2px solid #388E3C;
54
+ font-size: 28px;
55
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
56
+ }
57
+
58
+ button, #filter-clear, #download-json, #take-for-yourself {
59
+ color: white;
60
+ background-color: #4CAF50;
61
+ border: none;
62
+ cursor: pointer;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  padding: 10px 20px;
64
  font-size: 16px;
65
+ border-radius: 5px;
66
+ margin: 5px;
67
+ transition: background-color 0.3s ease;
68
+ }
69
+
70
+ button:hover, #filter-clear:hover, #download-json:hover, #take-for-yourself:hover {
71
+ background-color: #388E3C;
72
+ }
73
+
74
+ #filter-field, #filter-type, #filter-value, #filter-field2, #filter-value2 {
75
+ padding: 10px;
76
+ font-size: 16px;
77
  margin: 5px;
78
  border-radius: 5px;
79
  border: 1px solid #ccc;
80
+ background-color: #f0f0f0;
81
+ transition: border-color 0.3s ease, box-shadow 0.3s ease;
82
+ }
83
+
84
+ #filter-field:focus, #filter-type:focus, #filter-value:focus, #filter-field2:focus, #filter-value2:focus {
85
+ border-color: #4CAF50;
86
+ box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
87
+ }
88
+
89
+ #filter-field option, #filter-type option, #filter-field2 option {
90
+ background-color: #f0f0f0;
91
+ color: #333;
92
+ }
93
+
94
+ #filter-field:hover, #filter-type:hover, #filter-value:hover, #filter-field2:hover, #filter-value2:hover {
95
+ border-color: #4CAF50;
96
+ }
97
+
98
+ #mediaContainer {
99
+ margin-top: 20px;
100
+ display: flex;
101
+ justify-content: center;
102
+ align-items: center;
103
+ flex-direction: column;
104
+ max-width: 100%;
105
+ height: auto;
106
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
107
+ border-radius: 10px;
108
+ padding: 20px;
109
+ background-color: white;
110
+ }
111
+
112
+ #mediaContainer img, #mediaContainer video {
113
+ max-width: 100%;
114
+ height: auto;
115
+ object-fit: contain;
116
+ border-radius: 10px;
117
+ }
118
+
119
+ #imageUrl {
120
+ margin-top: 20px;
121
+ font-size: 16px;
122
+ color: #333;
123
+ cursor: pointer;
124
+ text-decoration: underline;
125
+ transition: color 0.3s ease;
126
+ }
127
+
128
+ #imageUrl:hover {
129
+ color: #4CAF50;
130
+ }
131
+
132
+ #progressBarContainer {
133
+ width: 80%;
134
+ margin: 20px auto;
135
+ background-color: #ddd;
136
+ border-radius: 13px;
137
+ padding: 3px;
138
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
139
+ }
140
+
141
+ #progressBar {
142
+ width: 0%;
143
+ height: 20px;
144
  background-color: #4CAF50;
145
+ border-radius: 10px;
146
+ text-align: center;
147
+ line-height: 20px;
148
  color: white;
149
+ transition: width 0.3s ease;
 
 
150
  }
151
+
152
+ .swal-button-custom {
153
+ background-color: #4CAF50;
154
+ font-size: 16px;
155
+ padding: 10px 20px;
156
+ }
157
+
158
+ .swal-title-custom {
159
+ font-size: 24px;
160
+ color: #333;
161
+ }
162
+
163
+ .swal-content-custom {
164
+ font-size: 16px;
165
+ color: #666;
166
+ }
167
+ /* Переопределение стилей Notyf */
168
+ .notyf__toast {
169
+ background-color: #4CAF50 !important; /* Зеленый фон */
170
+ color: #ffffff !important; /* Белый текст */
171
+ font-size: 16px;
172
+ }
173
+ .notyf__toast--success {
174
+ background-color: #4CAF50 !important; /* Зеленый фон для успешного уведомления */
175
+ }
176
+ .notyf__toast--error {
177
+ background-color: #d9534f !important; /* Красный фон для ошибок (по желанию) */
178
+ }
179
+ </style>
180
  </head>
181
 
182
  <body>
183
  <div id="header">
184
+ <h1>WhatsMasterCRM</h1>
185
  </div>
186
  <div>
187
  <select id="filter-field">
 
190
  <option value="name">Имя</option>
191
  <option value="phone">WhatsApp</option>
192
  <option value="email">Email</option>
193
+ <option value="b_mess">Реплики</option>
194
  <option value="curator">Куратор</option>
195
  <option value="shop_st">Статус покупки</option>
196
  <option value="ad_url">Ссылка на пользователя в GC</option>
 
221
 
222
  <input id="filter-value" type="text" placeholder="Значение фильтра">
223
 
224
+ <select id="filter-field2">
225
+ <option></option>
226
+ <option value="id">Номер в списке</option>
227
+ <option value="name">Имя</option>
228
+ <option value="phone">WhatsApp</option>
229
+ <option value="email">Email</option>
230
+ <option value="b_mess">Реплики</option>
231
+ <option value="curator">Куратор</option>
232
+ <option value="shop_st">Статус покупки</option>
233
+ <option value="ad_url">Ссылка на пользователя в GC</option>
234
+ <option value="vk_id">Ссылка на VK</option>
235
+ <option value="chat_id">Ссылка на Tg</option>
236
+ <option value="ws_stop">Стутус подписки</option>
237
+ <option value="web_st">Вебинары</option>
238
+ <option value="fin_prog">Прогрес по воронке</option>
239
+ <option value="pr1">pr1</option>
240
+ <option value="pr2">pr2</option>
241
+ <option value="pr3">pr3</option>
242
+ <option value="pr4">Канал трафика</option>
243
+ <option value="pr5">Дата</option>
244
+ <option value="key_pr">Ключ PR</option>
245
+ <option value="canal">Канал</option>
246
+ <option value="data_t">Дата</option>
247
+ </select>
248
 
249
+ <input id="filter-value2" type="text" placeholder="Значение фильтра 2">
250
+
251
+ <button id="filter-clear">Очистить фильтр</button>
252
+ <button id="download-xlsx">Скачать в XLSX</button>
253
  <button id="download-json">Рассылка по выбранным</button>
254
  <button id="take-for-yourself">Взять себе</button> <!-- Добавлена вторая кнопка -->
255
  </div>
256
  <div id="example-table"></div>
257
 
258
+ <script>
259
+ vkBridge.send('VKWebAppInit');
260
+ document.addEventListener('DOMContentLoaded', function() {
261
+ fetch('https://irdelsol-psy.hf.space/data_gc_tab_out?api_sys=fasSd345D')
262
+ .then(response => response.json())
263
+ .then(data => {
264
+ console.log('Data received:', data); // Логирование данных
265
+ // Переворачиваем массив данных
266
+ data.reverse();
267
+ var linkFormatter = function(cell, formatterParams, onRendered) {
268
+ var curator = cell.getValue();
269
+ var curatorLink = cell.getData().curator_link;
270
+ return `<a href="${curatorLink}" target="_blank">${curator}</a>`;
271
+ };
272
+ var table = new Tabulator("#example-table", {
273
+ data: data, // set table data
274
+ layout: "fitColumns", // fit columns to width of table
275
+ pagination: "local", // enable local pagination
276
+ paginationSize: 50, // number of rows per page
277
+ selectable: true, // enable row selection
278
+ columns: [
279
+ {title:"Номер в списке", field:"id"},
280
+ {title:"Имя", field:"name", width:100},
281
+
282
+
283
+ {title:"WhatsApp", field:"phone", formatter: function(cell, formatterParams, onRendered) {
284
+ var phone = cell.getValue();
285
+ var ws_stop = cell.getData().ws_stop;
286
+ var ws_st = cell.getData().ws_st;
287
+ var imageUrl1 = "https://i.ibb.co/YBvwFR6/whatsapp-2.png"; // Замените на URL первой картинки
288
+ var imageUrl2 = "https://i.ibb.co/LZx71cM/1.png"; // Замените на URL второй картинки
289
+ var imageUrl3 = "https://i.ibb.co/Cvn3QsK/whatsapp-3.png"; // Замените на URL второй картинки
290
+ var link = `<a href="https://web.whatsapp.com/send?phone=${phone}" target="_blank">`;
291
+ // Проверка условий
292
+ if (ws_stop !== "1" && ws_st === "1") {
293
+ console.log("Первая переменная не равна единице, вторая равна единице");
294
+ return link + `<img src="${imageUrl2}" alt="WhatsApp" style="width: 98px; height: 14px;">`;
295
+
296
+ } else if (ws_stop === "1" && ws_st === "1") {
297
+ console.log("Обе переменные равны единице");
298
+ return link + `<img src="${imageUrl3}" alt="WhatsApp" style="width: 98px; height: 14px;">`;
299
+
300
+ } else {
301
+ console.log("Остальные случаи");
302
+ return link + `<img src="${imageUrl1}" alt="WhatsApp" style="width: 98px; height: 14px;">`;
303
+ }
304
+ }},
305
+
306
+
307
+
308
+
309
+
310
+ {title:"ВКонтакте", field:"vk_id", formatter: function(cell, formatterParams, onRendered) {
311
+ var vk_id = cell.getValue();
312
+ var imageUrlvk1 = "https://i.ibb.co/BKB8R4C/2-2.png"; // Замените на URL первой картинки
313
+ var imageUrlvk2 = "https://i.ibb.co/MPCGvQX/2-1.png"; // Замените на URL второй картинки
314
+
315
+ var link1 = `<a href="https://vk.com" target="_blank">`;
316
+ var link2 = `<a href="https://vk.com/id${vk_id}" target="_blank">`;
317
+ // Проверка условий
318
+ if (vk_id === "0" || vk_id === "") {
319
+ // Если vk_id равен "0" или пуст
320
+ return link1 + `<img src="${imageUrlvk1}" alt="Image" style="width: 98px; height: 14px;">`;
321
+ } else {
322
+ // Если vk_id не пуст и не равен "0"
323
+ return link2 + `<img src="${imageUrlvk2}" alt="Image" style="width: 98px; height: 14px;">`;
324
+ }
325
+ }},
326
+
327
+
328
+
329
+
330
+
331
+
332
+
333
+
334
+
335
+
336
+
337
+ {title:"Город", field:"b_city", width:95},
338
+ {title:"Email", field:"email", width:95},
339
+ {title:"Реплики", field:"b_mess", width:95, cellClick:function(e, cell){
340
+ var data = cell.getData();
341
+ const notyf = new Notyf({
342
+ duration: 5000,
343
+ position: {
344
+ x: 'right',
345
+ y: 'top',
346
+ },
347
+ });
348
+
349
+ // Формируем текст для уведомления
350
+ const message = `
351
+ Имя: ${data.name}\n
352
+ WhatsApp: ${data.phone}\n
353
+ Реплики: ${data.b_mess}
354
+ `;
355
+
356
+ // Показываем уведомление
357
+ notyf.open({
358
+ type: 'info',
359
+ message: message,
360
+ });
361
+ }},
362
+
363
+
364
+
365
+ {title:"Куратор", field:"curator", formatter: linkFormatter},
366
+ {title:"Статус покупки", field:"shop_st", formatter: function(cell, formatterParams, onRendered) {
367
+ var status = cell.getValue();
368
+ var color;
369
+ switch (status) {
370
+ case 'green':
371
+ color = 'green';
372
+ break;
373
+ case 'red':
374
+ color = 'red';
375
+ break;
376
+ case 'yellow':
377
+ color = 'yellow';
378
+ break;
379
+ default:
380
+ color = 'gray';
381
+ }
382
+ return `<div style="width: 20px; height: 20px; background-color: ${color};"></div>`;
383
+ }},
384
+ {title:"Ссылка на пользователя в GC", field:"ad_url", formatter: function(cell, formatterParams, onRendered) {
385
+ var ad_url = cell.getValue();
386
+ return `<a href="${ad_url}" target="_blank">${ad_url}</a>`;
387
+ }},
388
+
389
+ {title:"Ссылка на Tg", field:"chat_id", formatter: function(cell, formatterParams, onRendered) {
390
+ var chatId = cell.getValue();
391
+ if (chatId.startsWith('@')) {
392
+ chatId = chatId.substring(1); // Удаление символа @ в начале
393
+ }
394
+ return `<a href="https://t.me/${chatId}" target="_blank">${chatId}</a>`;
395
+ }},
396
+
397
+ {title:"Вебинары-присутствовал", field:"web_st", formatter:"star", formatterParams:{stars:7}, hozAlign:"center", width:90},
398
+ {title:"Вебинары-досмотрел до конца", field:"b_fin", formatter:function(cell, formatterParams, onRendered){
399
+ var value = cell.getValue();
400
+ var icon;
401
+ if (value === 'True') {
402
+ icon = ' <img src="https://i.ibb.co/9sqNhYz/4-2.png" width="98" height="14" />'; // Иконка для активного статуса
403
+ } else {
404
+ icon = ''; // Пустая строка для неактивного статуса или если значение не определено
405
+ }
406
+ return icon;
407
+ }},
408
+
409
+ {title:"Прогрес по воронке", field:"fin_prog", formatter:"progress", formatterParams:{color:["#ff0000", "orange", "#00dd00"]}, sorter:"number", width:100},
410
+ {title:"pr1", field:"pr1"},
411
+ {title:"pr2", field:"pr2"},
412
+ {title:"pr3", field:"pr3"},
413
+ {title:"Канал трафика", field:"pr4"},
414
+ {title:"Дата", field:"pr5"},
415
+ {title:"Ключ PR", field:"key_pr"},
416
+ {title:"Канал", field:"canal"},
417
+ {title:"Дата", field:"data_t", width:150}
418
+ ],
419
+ });
420
+
421
+
422
+ var fieldEl = document.getElementById("filter-field");
423
+ var typeEl = document.getElementById("filter-type");
424
+ var valueEl = document.getElementById("filter-value");
425
+ var fieldEl2 = document.getElementById("filter-field2");
426
+ var valueEl2 = document.getElementById("filter-value2");
427
+
428
+ function updateFilter() {
429
+ var filterVal1 = fieldEl.value;
430
+ var typeVal1 = typeEl.value;
431
+ var valueVal1 = valueEl.value;
432
+
433
+ var filterVal2 = fieldEl2.value;
434
+ var valueVal2 = valueEl2.value;
435
+
436
+ if (filterVal1 && filterVal2) {
437
+ table.setFilter([
438
+ { field: filterVal1, type: typeVal1, value: valueVal1 },
439
+ { field: filterVal2, type: "=", value: valueVal2 }
440
+ ]);
441
  }
442
+ }
443
+
444
+ document.getElementById("filter-field").addEventListener("change", updateFilter);
445
+ document.getElementById("filter-type").addEventListener("change", updateFilter);
446
+ document.getElementById("filter-value").addEventListener("keyup", updateFilter);
447
+ document.getElementById("filter-field2").addEventListener("change", updateFilter);
448
+ document.getElementById("filter-value2").addEventListener("keyup", updateFilter);
449
+ //trigger download of data.xlsx file
450
+ document.getElementById("download-xlsx").addEventListener("click", function(){
451
+ table.download("xlsx", "data.xlsx", {sheetName:"My Data"});
452
+ });
453
+ document.getElementById("filter-clear").addEventListener("click", function() {
454
+ fieldEl.value = "";
455
+ typeEl.value = "=";
456
+ valueEl.value = "";
457
+ fieldEl2.value = "";
458
+ valueEl2.value = "";
459
+ table.clearFilter();
460
+ });
461
+
462
+ function handleDownloadJson() {
463
+ var tableData = table.getData("active");
464
+ var jsonData = JSON.stringify(tableData, null, 2);
465
+ console.log("Данные для рассылки:", jsonData);
466
+ }
467
+
468
+ function handleTakeForYourself() {
469
+ var tableData = table.getData("active");
470
+ var jsonData = JSON.stringify(tableData, null, 2);
471
+ console.log("Данные для себя:", jsonData);
472
+ }
473
+
474
+ document.getElementById("download-json").addEventListener("click", handleDownloadJson);
475
+ document.getElementById("take-for-yourself").addEventListener("click", handleTakeForYourself);
476
+ })
477
+ .catch(error => console.error('Error fetching data:', error));
478
+ });
479
+ </script>
480
  </body>
481
 
482
  </html>