<!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>