File size: 14,234 Bytes
f017436
 
4f10948
e9e551b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b72b1f2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e9e551b
4f10948
e9e551b
27648bc
3eeb6eb
2624f20
d059411
9722b56
502be49
 
 
 
 
 
 
af80dca
502be49
 
 
af80dca
f017436
af80dca
 
502be49
 
 
773d8b4
 
 
502be49
 
 
1b9bb85
 
 
 
 
 
 
 
 
 
 
ce428db
1b9bb85
773d8b4
 
271f63a
d34bded
9722b56
3eeb6eb
 
9cc7451
3eeb6eb
f017436
3eeb6eb
 
f017436
f566035
 
 
 
008804b
 
 
 
 
502be49
f017436
 
 
 
d34bded
502be49
f017436
f97b32b
6cfad82
 
 
 
 
f97b32b
f017436
 
502be49
 
 
f017436
 
 
 
 
 
 
 
 
 
 
502be49
 
 
f017436
502be49
 
 
f017436
502be49
 
 
f017436
502be49
 
f017436
502be49
 
 
f017436
 
 
 
 
 
 
 
 
 
 
 
502be49
 
f017436
 
 
9722b56
f017436
 
 
 
9722b56
 
1b9bb85
 
91549a2
f017436
 
 
 
 
 
f823433
f017436
 
f823433
 
 
 
 
 
 
 
 
91549a2
f017436
91549a2
 
 
f017436
fbeea76
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
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
<!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 , #download-json{
            padding: 10px;
            font-size: 16px;
            margin: 5px;
        }
        #filter-value {
            width: 200px;
        }
        #filter-clear {
            padding: 10px 20px;
        }
         #filter-field, #filter-type, #filter-value, #filter-clear, #download-json {
         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;
        }
         #download-json {
          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;
         }
        #download-json:hover {
        background-color: #388E3C;
        }
   #take-for-yourself {
    padding: 10px 20px;
    font-size: 16px;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

#take-for-yourself:hover {
    background-color: #388E3C;
}   
    </style>
</head>

<body>
    <div id="header">
        <h1>WhatsCRM - Автопилот + Tilda + Бизон 365 + GetCurse</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_st">Статус покупки</option>
            <option value="ad_url">Ссылка на пользователя в GC</option>
            <option value="vk_id">Ссылка на VK</option>
            <option value="chat_id">Ссылка на Tg</option>
            <option value="ws_st">Статус WhatsApp</option>
            <option value="ws_stop">Стутус подписки</option>
            <option value="web_st">Вебинары</option>
            <option value="fin_prog">Прогрес по воронке</option>
            <option value="pr1">pr1</option>
            <option value="pr2">pr2</option>
            <option value="pr3">pr3</option>
            <option value="pr4">Канал трафика</option>
            <option value="pr5">Дата</option>
            <option value="key_pr">Ключ PR</option>
            <option value="canal">Канал</option>
            <option value="data_t">Дата</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">Рассылка по выбранным</button>
        <button id="take-for-yourself">Взять себе</button> <!-- Добавлена вторая кнопка -->
    </div>
    <div id="example-table"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            fetch('https://dmtuit-gc-api-raBiz.hf.space/data_gc_tab_out?api_sys=fasSd345D')
                .then(response => response.json())
                .then(data => {
                    console.log('Data received:', data); // Логирование данных

                    // Переворачиваем массив данных
                    data.reverse();

                    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
                        selectable: true, // enable row selection
                        columns: [
                            {title:"Номер в списке", field:"id"},
                            {title:"Имя", field:"name", width:120},
                            {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:"Email", field:"email", width:120},
                            {title:"Куратор", field:"curator", formatter: linkFormatter},  
                            {title:"Статус покупки", field:"shop_st", 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:"ws_st"},
                            {title:"Стутус подписки", field:"ws_stop"},
                            {title:"Вебинары", field:"web_st", formatter:"star", formatterParams:{stars:7}, hozAlign:"center", width:120},
                            {title:"Прогрес по воронке", field:"fin_prog", formatter:"progress", formatterParams:{color:["#00dd00", "orange", "rgb(255,0,0)"]}, sorter:"number", width:100},
                            {title:"pr1", field:"pr1"},
                            {title:"pr2", field:"pr2"},
                            {title:"pr3", field:"pr3"},
                            {title:"Канал трафика", field:"pr4"},
                            {title:"Дата", field:"pr5"},
                            {title:"Ключ PR", field:"key_pr"},
                            {title:"Канал", field:"canal"},
                            {title:"Дата", field:"data_t"}
                        ],
                    });
                    var fieldEl = document.getElementById("filter-field");
                    var typeEl = document.getElementById("filter-type");
                    var valueEl = document.getElementById("filter-value");
                    function updateFilter() {
                        var filterVal = fieldEl.options[fieldEl.selectedIndex].value;
                        var typeVal = typeEl.options[typeEl.selectedIndex].value;
                        if (filterVal) {
                            table.setFilter(filterVal, typeVal, valueEl.value);
                        }
                    }
                    document.getElementById("filter-field").addEventListener("change", updateFilter);
                    document.getElementById("filter-type").addEventListener("change", updateFilter);
                    document.getElementById("filter-value").addEventListener("keyup", updateFilter);
                    document.getElementById("filter-clear").addEventListener("click", function() {
                        fieldEl.value = "";
                        typeEl.value = "=";
                        valueEl.value = "";
                        table.clearFilter();
                    });
                    function handleDownloadJson() {
                        var tableData = table.getData("active");
                        var jsonData = JSON.stringify(tableData, null, 2);
                        console.log("Данные для рассылки:", jsonData);
                    }
                    function handleTakeForYourself() {
                        var tableData = table.getData("active");
                        var jsonData = JSON.stringify(tableData, null, 2);
                        console.log("Данные для себя:", jsonData);
                    }
                    document.getElementById("download-json").addEventListener("click", handleDownloadJson);
                    document.getElementById("take-for-yourself").addEventListener("click", handleTakeForYourself);
                })
                .catch(error => console.error('Error fetching data:', error));
        });
    </script>
</body>

</html>