DmitrMakeev commited on
Commit
89c2bb0
1 Parent(s): 428b4e6

Update data_gc_tab.html

Browse files
Files changed (1) hide show
  1. data_gc_tab.html +72 -219
data_gc_tab.html CHANGED
@@ -1,146 +1,10 @@
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/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
8
- <script type="text/javascript" src="https://unpkg.com/[email protected]/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
-
125
- #download-json {
126
- padding: 10px 20px;
127
- background-color: #4CAF50;
128
- color: white;
129
- border: none;
130
- cursor: pointer;
131
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
132
- transition: background-color 0.3s ease;
133
- }
134
- #download-json:hover {
135
- background-color: #388E3C;
136
- }
137
-
138
-
139
-
140
-
141
- </style>
142
  </head>
143
-
144
  <body>
145
  <div id="header">
146
  <h1>GetCurse - WhatsCRM</h1>
@@ -158,7 +22,7 @@
158
  <option value="vk_id">Ссылка на VK</option>
159
  <option value="chat_id">Ссылка на Tg</option>
160
  <option value="ws_st">Статус WhatsApp</option>
161
- <option value="ws_stop">Стутус подписки</option>
162
  <option value="web_st">Вебинары</option>
163
  <option value="fin_prog">Прогрес по воронке</option>
164
  <option value="pr1">pr1</option>
@@ -191,125 +55,114 @@
191
 
192
  <script>
193
  document.addEventListener('DOMContentLoaded', function() {
194
- fetch('https://dmtuit-gc-api-raBiz.hf.space/data_gc_tab_out?api_sys=fasSd345D')
195
  .then(response => response.json())
196
  .then(data => {
197
- console.log('Data received:', data); // Логирование данных
198
- // Пользовательский форматтер для ссылки на куратора
199
  var linkFormatter = function(cell, formatterParams, onRendered) {
200
  var curator = cell.getValue();
201
  var curatorLink = cell.getData().curator_link;
202
  return `<a href="${curatorLink}" target="_blank">${curator}</a>`;
203
  };
 
204
  var table = new Tabulator("#example-table", {
205
- data: data, // set table data
206
- layout: "fitColumns", // fit columns to width of table
207
- pagination: "local", // enable local pagination
208
- paginationSize: 50, // number of rows per page
209
  columns: [
210
- {title:"Номер в списке", field:"id"},
211
- {title:"Имя", field:"name"},
212
- {title:"Телефон", field:"phone"},
213
- {title:"Email", field:"email"},
214
- {title:"Куратор", field:"curator", formatter: linkFormatter},
215
- {title:"Статус покупки", field:"shop_st", formatter: function(cell, formatterParams, onRendered) {
216
  var status = cell.getValue();
217
  var color;
218
  switch (status) {
219
- case 'green':
220
- color = 'green';
221
- break;
222
- case 'red':
223
- color = 'red';
224
- break;
225
- case 'yellow':
226
- color = 'yellow';
227
- break;
228
- default:
229
- color = 'gray';
230
  }
231
  return `<div style="width: 20px; height: 20px; background-color: ${color};"></div>`;
232
  }},
233
- {title:"Ссылка на пользователя в GC", field:"ad_url", formatter: function(cell, formatterParams, onRendered) {
234
  var ad_url = cell.getValue();
235
  return `<a href="${ad_url}" target="_blank">${ad_url}</a>`;
236
  }},
237
- {title:"Ссылка на VK", field:"vk_id", formatter: function(cell, formatterParams, onRendered) {
238
  var vk_id = cell.getValue();
239
  return `<a href="https://vk.com/id${vk_id}" target="_blank">${vk_id}</a>`;
240
  }},
241
- {title:"Ссылка на Tg", field:"chat_id", formatter: function(cell, formatterParams, onRendered) {
242
  var chatId = cell.getValue();
243
  if (chatId.startsWith('@')) {
244
- chatId = chatId.substring(1); // Удаление символа @ в начале
245
  }
246
  return `<a href="https://t.me/${chatId}" target="_blank">${chatId}</a>`;
247
  }},
248
- {title:"Ссылка на WhatsApp", field:"phone", formatter: function(cell, formatterParams, onRendered) {
249
  var phone = cell.getValue();
250
  return `<a href="https://web.whatsapp.com/send?phone=${phone}" target="_blank">${phone}</a>`;
251
  }},
252
- {title:"Статус WhatsApp", field:"ws_st"},
253
- {title:"Стутус подписки", field:"ws_stop"},
254
- {title:"Вебинары", field:"web_st", formatter:"star", formatterParams:{stars:7}, hozAlign:"center", width:120},
255
- {title:"Прогрес по воронке", field:"fin_prog", formatter:"progress", formatterParams:{color:["#00dd00", "orange", "rgb(255,0,0)"]}, sorter:"number", width:100},
256
- {title:"pr1", field:"pr1"},
257
- {title:"pr2", field:"pr2"},
258
- {title:"pr3", field:"pr3"},
259
- {title:"Канал трафика", field:"pr4"},
260
- {title:"Дата", field:"pr5"},
261
- {title:"Ключ PR", field:"key_pr"},
262
- {title:"Канал", field:"canal"},
263
- {title:"Дата", field:"data_t"}
 
 
 
 
 
 
264
  ],
265
  });
266
- // Define variables for input elements
267
- var fieldEl = document.getElementById("filter-field");
268
- var typeEl = document.getElementById("filter-type");
269
- var valueEl = document.getElementById("filter-value");
270
- // Trigger setFilter function with correct parameters
 
 
 
271
  function updateFilter() {
272
- var filterVal = fieldEl.options[fieldEl.selectedIndex].value;
273
- var typeVal = typeEl.options[typeEl.selectedIndex].value;
274
- if (filterVal) {
275
- table.setFilter(filterVal, typeVal, valueEl.value);
 
276
  }
277
  }
278
- // Update filters on value change
279
  document.getElementById("filter-field").addEventListener("change", updateFilter);
280
  document.getElementById("filter-type").addEventListener("change", updateFilter);
281
  document.getElementById("filter-value").addEventListener("keyup", updateFilter);
282
- // Clear filters on "Clear Filters" button click
283
- document.getElementById("filter-clear").addEventListener("click", function() {
284
- fieldEl.value = "";
285
- typeEl.value = "=";
286
- valueEl.value = "";
287
- table.clearFilter();
288
- });
289
- // Переопределяем метод table.download
290
- table.download = function(type, filename, options) {
291
- // Сохраняем старые данные
292
- var oldData = table.getData();
293
- // Получаем новые данные таблицы
294
- var tableData = table.getData("active");
295
- // Преобразуем данные в JSON-строку
296
- var jsonData = JSON.stringify(tableData, null, 2);
297
- // Выводим JSON-строку в консоль
298
- console.log(jsonData);
299
- // Очищаем старые данные
300
- table.setData([]);
301
- // Восстанавливаем старые данные
302
- table.setData(oldData);
303
- };
304
- // Пример использования переопределенного метода
305
  document.getElementById("download-json").addEventListener("click", function() {
306
- table.download("json", "data.json"); // ЭТУ СТРОКУ НЕ УДАЛЯТЬ!!! ЕЁ НАДО ПЕРЕХВАТИТЬ, А НЕ ТВОЙ КОД!!!
 
 
 
 
 
 
 
 
 
307
  });
308
  })
309
- .catch(error => console.error('Error fetching data:', error));
 
 
310
  });
311
  </script>
312
  </body>
313
-
314
-
315
  </html>
 
1
  <!DOCTYPE html>
2
+ <html>
3
  <head>
4
+ <title>GetCurse - WhatsCRM</title>
5
+ <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
6
+ <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  </head>
 
8
  <body>
9
  <div id="header">
10
  <h1>GetCurse - WhatsCRM</h1>
 
22
  <option value="vk_id">Ссылка на VK</option>
23
  <option value="chat_id">Ссылка на Tg</option>
24
  <option value="ws_st">Статус WhatsApp</option>
25
+ <option value="ws_stop">Статус подписки</option>
26
  <option value="web_st">Вебинары</option>
27
  <option value="fin_prog">Прогрес по воронке</option>
28
  <option value="pr1">pr1</option>
 
55
 
56
  <script>
57
  document.addEventListener('DOMContentLoaded', function() {
58
+ fetch('/data_gc_tab_out?api_sys=fasSd345D')
59
  .then(response => response.json())
60
  .then(data => {
 
 
61
  var linkFormatter = function(cell, formatterParams, onRendered) {
62
  var curator = cell.getValue();
63
  var curatorLink = cell.getData().curator_link;
64
  return `<a href="${curatorLink}" target="_blank">${curator}</a>`;
65
  };
66
+
67
  var table = new Tabulator("#example-table", {
68
+ data: data,
69
+ layout: "fitColumns",
70
+ pagination: "local",
71
+ paginationSize: 50,
72
  columns: [
73
+ {title: "Номер в списке", field: "id"},
74
+ {title: "Имя", field: "name"},
75
+ {title: "Телефон", field: "phone"},
76
+ {title: "Email", field: "email"},
77
+ {title: "Куратор", field: "curator", formatter: linkFormatter},
78
+ {title: "Статус покупки", field: "shop_st", formatter: function(cell, formatterParams, onRendered) {
79
  var status = cell.getValue();
80
  var color;
81
  switch (status) {
82
+ case 'green': color = 'green'; break;
83
+ case 'red': color = 'red'; break;
84
+ case 'yellow': color = 'yellow'; break;
85
+ default: color = 'gray';
 
 
 
 
 
 
 
86
  }
87
  return `<div style="width: 20px; height: 20px; background-color: ${color};"></div>`;
88
  }},
89
+ {title: "Ссылка на пользователя в GC", field: "ad_url", formatter: function(cell, formatterParams, onRendered) {
90
  var ad_url = cell.getValue();
91
  return `<a href="${ad_url}" target="_blank">${ad_url}</a>`;
92
  }},
93
+ {title: "Ссылка на VK", field: "vk_id", formatter: function(cell, formatterParams, onRendered) {
94
  var vk_id = cell.getValue();
95
  return `<a href="https://vk.com/id${vk_id}" target="_blank">${vk_id}</a>`;
96
  }},
97
+ {title: "Ссылка на Tg", field: "chat_id", formatter: function(cell, formatterParams, onRendered) {
98
  var chatId = cell.getValue();
99
  if (chatId.startsWith('@')) {
100
+ chatId = chatId.substring(1);
101
  }
102
  return `<a href="https://t.me/${chatId}" target="_blank">${chatId}</a>`;
103
  }},
104
+ {title: "Ссылка на WhatsApp", field: "phone", formatter: function(cell, formatterParams, onRendered) {
105
  var phone = cell.getValue();
106
  return `<a href="https://web.whatsapp.com/send?phone=${phone}" target="_blank">${phone}</a>`;
107
  }},
108
+ {title: "Статус WhatsApp", field: "ws_st"},
109
+ {title: "Статус подписки", field: "ws_stop"},
110
+ {title: "Вебинары", field: "web_st", formatter: "star", formatterParams: {stars: 7}, hozAlign: "center", width: 120},
111
+ {title: "Прогрес по воронке", field: "fin_prog", formatter: "progress", formatterParams: {color: ["#00dd00", "orange", "rgb(255,0,0)"]}, sorter: "number", width: 100},
112
+ {title: "Город", field: "b_city"},
113
+ {title: "Финансы", field: "b_fin"},
114
+ {title: "Бан", field: "b_ban"},
115
+ {title: "Игнорирование", field: "b_ign"},
116
+ {title: "Баннеры", field: "b_baners"},
117
+ {title: "Кнопки", field: "b_butt"},
118
+ {title: "Сообщения", field: "b_mess"},
119
+ {title: "pr1", field: "pr1"},
120
+ {title: "pr2", field: "pr2"},
121
+ {title: "pr3", field: "pr3"},
122
+ {title: "pr4", field: "pr4"},
123
+ {title: "pr5", field: "pr5"},
124
+ {title: "Канал трафика", field: "canal"},
125
+ {title: "Дата", field: "data_t"},
126
  ],
127
  });
128
+
129
+ document.getElementById("filter-clear").addEventListener("click", function() {
130
+ document.getElementById("filter-field").value = "";
131
+ document.getElementById("filter-type").value = "=";
132
+ document.getElementById("filter-value").value = "";
133
+ table.clearFilter();
134
+ });
135
+
136
  function updateFilter() {
137
+ var field = document.getElementById("filter-field").value;
138
+ var type = document.getElementById("filter-type").value;
139
+ var value = document.getElementById("filter-value").value;
140
+ if (field) {
141
+ table.setFilter(field, type, value);
142
  }
143
  }
144
+
145
  document.getElementById("filter-field").addEventListener("change", updateFilter);
146
  document.getElementById("filter-type").addEventListener("change", updateFilter);
147
  document.getElementById("filter-value").addEventListener("keyup", updateFilter);
148
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
149
  document.getElementById("download-json").addEventListener("click", function() {
150
+ var selectedData = table.getSelectedData();
151
+ var jsonString = JSON.stringify(selectedData);
152
+ var blob = new Blob([jsonString], {type: "application/json"});
153
+ var url = URL.createObjectURL(blob);
154
+ var a = document.createElement("a");
155
+ a.href = url;
156
+ a.download = "selectedData.json";
157
+ document.body.appendChild(a);
158
+ a.click();
159
+ document.body.removeChild(a);
160
  });
161
  })
162
+ .catch(error => {
163
+ console.error('Error fetching data:', error);
164
+ });
165
  });
166
  </script>
167
  </body>
 
 
168
  </html>