File size: 13,379 Bytes
4f10948
 
 
 
 
 
 
 
b62d99d
dc31e57
0a59d2d
4f10948
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27648bc
3eeb6eb
be80925
d059411
9722b56
1b9bb85
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ce428db
1b9bb85
ce428db
008804b
e560a96
2020f0d
e560a96
dc31e57
9722b56
3eeb6eb
 
9cc7451
3eeb6eb
68c4415
3eeb6eb
 
 
008804b
 
 
 
 
 
3eeb6eb
008804b
 
 
 
3eeb6eb
a8f86dd
0a59d2d
a8f86dd
0a59d2d
008804b
a86c6fa
3eeb6eb
 
 
 
 
 
 
 
 
 
 
 
 
baa844b
8fbc90a
008804b
a8f86dd
3eeb6eb
 
008804b
a8f86dd
3eeb6eb
 
008804b
a8f86dd
3eeb6eb
 
 
 
 
008804b
a8f86dd
3eeb6eb
 
008804b
a8f86dd
1fceb6d
 
5e1cb9e
 
1fceb6d
 
 
 
16948c7
3eeb6eb
9722b56
008804b
1b9bb85
 
9722b56
008804b
9722b56
1b9bb85
 
9722b56
1b9bb85
9722b56
 
008804b
1b9bb85
 
9722b56
008804b
9722b56
1b9bb85
 
9722b56
 
3eeb6eb
640f9cc
780aeee
d05b7d9
 
d136650
780aeee
 
 
 
 
e560a96
 
d05b7d9
 
780aeee
 
e560a96
 
 
2020f0d
 
 
e560a96
3eeb6eb
 
4ff0571
 
 
4f10948
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabulator Example</title>
    <link href="https://unpkg.com/tabulator-tables@6.2.1/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.2.1/dist/js/tabulator.min.js"></script>
  <script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>

    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }
        h1 {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            margin: 0;
            border-bottom: 2px solid #388E3C;
            font-size: 28px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        button[type="submit"] {
            color: white;
            background-color: #4CAF50;
            border: none;
            cursor: pointer;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 5px;
            margin-top: 20px;
            transition: background-color 0.3s ease;
        }
        button[type="submit"]:hover {
            background-color: #388E3C;
        }
        #mediaContainer {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            max-width: 100%;
            height: auto;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            padding: 20px;
            background-color: white;
        }
        #mediaContainer img, #mediaContainer video {
            max-width: 100%;
            height: auto;
            object-fit: contain;
            border-radius: 10px;
        }
        #imageUrl {
            margin-top: 20px;
            font-size: 16px;
            color: #333;
            cursor: pointer;
            text-decoration: underline;
            transition: color 0.3s ease;
        }
        #imageUrl:hover {
            color: #4CAF50;
        }
        #progressBarContainer {
            width: 80%;
            margin: 20px auto;
            background-color: #ddd;
            border-radius: 13px;
            padding: 3px;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
        }
        #progressBar {
            width: 0%;
            height: 20px;
            background-color: #4CAF50;
            border-radius: 10px;
            text-align: center;
            line-height: 20px;
            color: white;
            transition: width 0.3s ease;
        }
        #filter-field, #filter-type, #filter-value, #filter-clear {
            padding: 10px;
            font-size: 16px;
            margin: 5px;
        }
        #filter-value {
            width: 200px;
        }
        #filter-clear {
            padding: 10px 20px;
        }
         #filter-field, #filter-type, #filter-value, #filter-clear {
         padding: 10px;
         font-size: 16px;
         margin: 5px;
         border-radius: 5px;
         border: 1px solid #ccc;
        }
         #filter-value {
           width: 200px;
          background-color: #f0f0f0;
        }
         #filter-clear {
          padding: 10px 20px;
          background-color: #4CAF50;
          color: white;
          border: none;
          cursor: pointer;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
          transition: background-color 0.3s ease;
         }
        #filter-clear:hover {
        background-color: #388E3C;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>GetCurse - WhatsCRM</h1>
    </div>
    <div>
        <select id="filter-field">
            <option></option>
            <option value="id">Номер в списке</option>
            <option value="name">Имя</option>
            <option value="phone">Телефон</option>
            <option value="email">Email</option>
            <option value="curator">Куратор</option>
            <option value="shop_statys_full">Статус покупки</option>
            <option value="ad_url">Ссылка на пользователя в GC</option>
            <option value="vk_id">Ссылка на VK</option>
            <option value="chat_id">Ссылка на Tg</option>
            <option value="ws_statys">Статус WhatsApp</option>
            <option value="ws_stop">Стутус подписки</option>
            <option value="web_statys">Вебинары</option>
            <option value="fin_progress">Прогрес по воронке</option>
            <option value="pr1">utm_source</option>
            <option value="pr2">utm_medium</option>
            <option value="pr3">utm_campaign</option>
            <option value="pr4">utm_term</option>
            <option value="pr5">utm_content</option>
        </select>

        <select id="filter-type">
            <option value="=">=</option>
            <option value="<"><</option>
            <option value="<="><=</option>
            <option value=">">></option>
            <option value=">=">>=</option>
            <option value="!=">!=</option>
            <option value="like">like</option>
        </select>

        <input id="filter-value" type="text" placeholder="Значение фильтра">

        <button id="filter-clear">Очистить фильтр</button>


    <button id="download-json">Download JSON</button>


    </div>
    <div id="example-table"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            fetch('https://dmtuit-gc-api-rass.hf.space/data_gc_tab_out?api_sys=fasSd345D')
                .then(response => response.json())
                .then(data => {
                    console.log('Data received:', data); // Логирование данных
                    // Пользовательский форматтер для ссылки на куратора
                    var linkFormatter = function(cell, formatterParams, onRendered) {
                        var curator = cell.getValue();
                        var curatorLink = cell.getData().curator_link;
                        return `<a href="${curatorLink}" target="_blank">${curator}</a>`;
                    };
                    var table = new Tabulator("#example-table", {
                        data: data, // set table data
                        layout: "fitColumns", // fit columns to width of table
                        pagination: "local", // enable local pagination
                        paginationSize: 50, // number of rows per page
                        columns: [
                            {title:"Номер в списке", field:"id"},
                            {title:"Имя", field:"name"},
                            {title:"Телефон", field:"phone"},
                            {title:"Email", field:"email"},
                            {title:"Куратор", field:"curator", formatter: linkFormatter},  
                            {title:"Статус покупки", field:"shop_statys_full", formatter: function(cell, formatterParams, onRendered) {
                                var status = cell.getValue();
                                var color;
                                switch (status) {
                                    case 'green':
                                        color = 'green';
                                        break;
                                    case 'red':
                                        color = 'red';
                                        break;
                                    case 'yellow':
                                        color = 'yellow';
                                        break;
                                    default:
                                        color = 'gray';
                                }
                                return `<div style="width: 20px; height: 20px; background-color: ${color};"></div>`;
                            }},
                            {title:"Ссылка на пользователя в GC", field:"ad_url", formatter: function(cell, formatterParams, onRendered) {
                                var ad_url = cell.getValue();
                                return `<a href="${ad_url}" target="_blank">${ad_url}</a>`;
                            }},
                            {title:"Ссылка на VK", field:"vk_id", formatter: function(cell, formatterParams, onRendered) {
                                var vk_id = cell.getValue();
                                return `<a href="https://vk.com/id${vk_id}" target="_blank">${vk_id}</a>`;
                            }},
                            {title:"Ссылка на Tg", field:"chat_id", formatter: function(cell, formatterParams, onRendered) {
                                var chatId = cell.getValue();
                                if (chatId.startsWith('@')) {
                                    chatId = chatId.substring(1); // Удаление символа @ в начале
                                }
                                return `<a href="https://t.me/${chatId}" target="_blank">${chatId}</a>`;
                            }},
                            {title:"Ссылка на WhatsApp", field:"phone", formatter: function(cell, formatterParams, onRendered) {
                                var phone = cell.getValue();
                                return `<a href="https://web.whatsapp.com/send?phone=${phone}" target="_blank">${phone}</a>`;
                            }},
                            {title:"Статус WhatsApp", field:"ws_statys"},
                            {title:"Стутус подписки", field:"ws_stop"},
                            {title:"Вебинары", field:"web_statys", formatter:"star", formatterParams:{stars:7}, hozAlign:"center", width:120},
                            {title:"Прогрес по воронке", field:"fin_progress", formatter:"progress", formatterParams:{color:["#00dd00", "orange", "rgb(255,0,0)"]}, sorter:"number", width:100},
                            {title:"utm_source", field:"pr1"},
                            {title:"utm_medium", field:"pr2"},
                            {title:"utm_campaign", field:"pr3"},
                            {title:"utm_term", field:"pr4"},
                            {title:"utm_content", field:"pr5"}
                        ],
                    });
                    // Define variables for input elements
                    var fieldEl = document.getElementById("filter-field");
                    var typeEl = document.getElementById("filter-type");
                    var valueEl = document.getElementById("filter-value");
                    // Trigger setFilter function with correct parameters
                    function updateFilter() {
                        var filterVal = fieldEl.options[fieldEl.selectedIndex].value;
                        var typeVal = typeEl.options[typeEl.selectedIndex].value;
                        if (filterVal) {
                            table.setFilter(filterVal, typeVal, valueEl.value);
                        }
                    }
                    // Update filters on value change
                    document.getElementById("filter-field").addEventListener("change", updateFilter);
                    document.getElementById("filter-type").addEventListener("change", updateFilter);
                    document.getElementById("filter-value").addEventListener("keyup", updateFilter);
                    // Clear filters on "Clear Filters" button click
                    document.getElementById("filter-clear").addEventListener("click", function() {
                        fieldEl.value = "";
                        typeEl.value = "=";
                        valueEl.value = "";
                        table.clearFilter();
                    });
// Переопределяем метод table.download
table.download = function(type, filename, options) {
    // Сохраняем старые данные
    var oldData = table.getData();
    // Получаем новые данные таблицы
    var tableData = table.getData("active");
    // Преобразуем данные в JSON-строку
    var jsonData = JSON.stringify(tableData, null, 2);
    // Выводим JSON-строку в консоль
    console.log(jsonData);
    // Очищаем старые данные
    table.setData([]);
    // Восстанавливаем старые данные
    table.setData(oldData);
};

// Пример использования переопределенного метода
document.getElementById("download-json").addEventListener("click", function() {
    table.download("json", "data.json"); // ЭТУ СТРОКУ НЕ УДАЛЯТЬ!!! ЕЁ НАДО ПЕРЕХВАТИТЬ, А НЕ ТВОЙ КОД!!!
});



                })
                .catch(error => console.error('Error fetching data:', error));
        });
    </script>
</body>
</html>