DmitrMakeev
commited on
Commit
•
89c2bb0
1
Parent(s):
428b4e6
Update data_gc_tab.html
Browse files- data_gc_tab.html +72 -219
data_gc_tab.html
CHANGED
@@ -1,146 +1,10 @@
|
|
1 |
<!DOCTYPE html>
|
2 |
-
<html
|
3 |
<head>
|
4 |
-
<
|
5 |
-
<
|
6 |
-
<
|
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"
|
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('
|
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,
|
206 |
-
layout: "fitColumns",
|
207 |
-
pagination: "local",
|
208 |
-
paginationSize: 50,
|
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 |
-
|
221 |
-
|
222 |
-
|
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:"
|
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:"
|
257 |
-
{title:"
|
258 |
-
{title:"
|
259 |
-
{title:
|
260 |
-
{title:"
|
261 |
-
{title:
|
262 |
-
{title:"
|
263 |
-
{title:"
|
|
|
|
|
|
|
|
|
|
|
|
|
264 |
],
|
265 |
});
|
266 |
-
|
267 |
-
|
268 |
-
|
269 |
-
|
270 |
-
|
|
|
|
|
|
|
271 |
function updateFilter() {
|
272 |
-
var
|
273 |
-
var
|
274 |
-
|
275 |
-
|
|
|
276 |
}
|
277 |
}
|
278 |
-
|
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 |
-
|
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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
307 |
});
|
308 |
})
|
309 |
-
.catch(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>
|