<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WhatsMasterCRM</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/@vkontakte/vk-bridge/dist/browser.min.js"></script> <script type="text/javascript" src="https://vk.com/js/api/openapi.js?169"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css"> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script> <!-- Подключение стилей Notyf --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf/notyf.min.css"> <!-- Подключение скрипта Notyf --> <script src="https://cdn.jsdelivr.net/npm/notyf/notyf.min.js"></script> <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 src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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, #filter-clear, #download-json, #take-for-yourself { color: white; background-color: #4CAF50; border: none; cursor: pointer; padding: 10px 20px; font-size: 16px; border-radius: 5px; margin: 5px; transition: background-color 0.3s ease; } button:hover, #filter-clear:hover, #download-json:hover, #take-for-yourself:hover { background-color: #388E3C; } #filter-field, #filter-type, #filter-value, #filter-field2, #filter-value2 { padding: 10px; font-size: 16px; margin: 5px; border-radius: 5px; border: 1px solid #ccc; background-color: #f0f0f0; transition: border-color 0.3s ease, box-shadow 0.3s ease; } #filter-field:focus, #filter-type:focus, #filter-value:focus, #filter-field2:focus, #filter-value2:focus { border-color: #4CAF50; box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); } #filter-field option, #filter-type option, #filter-field2 option { background-color: #f0f0f0; color: #333; } #filter-field:hover, #filter-type:hover, #filter-value:hover, #filter-field2:hover, #filter-value2:hover { border-color: #4CAF50; } #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; } .swal-button-custom { background-color: #4CAF50; font-size: 16px; padding: 10px 20px; } .swal-title-custom { font-size: 24px; color: #333; } .swal-content-custom { font-size: 16px; color: #666; } /* Переопределение стилей Notyf */ .notyf__toast { background-color: #4CAF50 !important; /* Зеленый фон */ color: #ffffff !important; /* Белый текст */ font-size: 16px; } .notyf__toast--success { background-color: #4CAF50 !important; /* Зеленый фон для успешного уведомления */ } .notyf__toast--error { background-color: #d9534f !important; /* Красный фон для ошибок (по желанию) */ } </style> </head> <body> <div id="header"> <h1>WhatsMasterCRM</h1> </div> <div> <select id="filter-field"> <option></option> <option value="id">Номер в списке</option> <option value="name">Имя</option> <option value="phone">WhatsApp</option> <option value="email">Email</option> <option value="b_mess">Реплики</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_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="Значение фильтра"> <select id="filter-field2"> <option></option> <option value="id">Номер в списке</option> <option value="name">Имя</option> <option value="phone">WhatsApp</option> <option value="email">Email</option> <option value="b_mess">Реплики</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_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> <input id="filter-value2" type="text" placeholder="Значение фильтра 2"> <button id="filter-clear">Очистить фильтр</button> <button id="download-xlsx">Скачать в XLSX</button> <button id="download-json">Download JSON</button> <button id="download-rass">Рассылка по выбранным</button> <button id="take-for-yourself">Взять себе</button> <!-- Добавлена вторая кнопка --> </div> <div id="example-table"></div> <script> vkBridge.send('VKWebAppInit'); document.addEventListener('DOMContentLoaded', function() { fetch('https://dmtuit-psy2.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:100}, {title:"WhatsApp", field:"phone", formatter: function(cell, formatterParams, onRendered) { var phone = cell.getValue(); var ws_stop = cell.getData().ws_stop; var ws_st = cell.getData().ws_st; var imageUrl1 = "https://i.ibb.co/YBvwFR6/whatsapp-2.png"; // Замените на URL первой картинки var imageUrl2 = "https://i.ibb.co/LZx71cM/1.png"; // Замените на URL второй картинки var imageUrl3 = "https://i.ibb.co/Cvn3QsK/whatsapp-3.png"; // Замените на URL второй картинки var link = `<a href="https://web.whatsapp.com/send?phone=${phone}" target="_blank">`; // Проверка условий if (ws_stop !== "1" && ws_st === "1") { console.log("Первая переменная не равна единице, вторая равна единице"); return link + `<img src="${imageUrl2}" alt="WhatsApp" style="width: 98px; height: 14px;">`; } else if (ws_stop === "1" && ws_st === "1") { console.log("Обе переменные равны единице"); return link + `<img src="${imageUrl3}" alt="WhatsApp" style="width: 98px; height: 14px;">`; } else { console.log("Остальные случаи"); return link + `<img src="${imageUrl1}" alt="WhatsApp" style="width: 98px; height: 14px;">`; } }}, {title:"ВКонтакте", field:"vk_id", formatter: function(cell, formatterParams, onRendered) { var vk_id = cell.getValue(); var imageUrlvk1 = "https://i.ibb.co/BKB8R4C/2-2.png"; // Замените на URL первой картинки var imageUrlvk2 = "https://i.ibb.co/MPCGvQX/2-1.png"; // Замените на URL второй картинки var link1 = `<a href="https://vk.com" target="_blank">`; var link2 = `<a href="https://vk.com/id${vk_id}" target="_blank">`; // Проверка условий if (vk_id === "0" || vk_id === "") { // Если vk_id равен "0" или пуст return link1 + `<img src="${imageUrlvk1}" alt="Image" style="width: 98px; height: 14px;">`; } else { // Если vk_id не пуст и не равен "0" return link2 + `<img src="${imageUrlvk2}" alt="Image" style="width: 98px; height: 14px;">`; } }}, {title:"Телеграм", field:"chat_id", formatter: function(cell, formatterParams, onRendered) { var chat_id = cell.getValue(); var imageUrltg1 = "https://i.ibb.co/3S4Wt7m/3-2.png"; var imageUrlntg2 = "https://i.ibb.co/rZrzQhb/3-1.png"; var linktg1 = `<a href="https://t.me" target="_blank">`; var linktg2 = `<a href="https://t.me/${chat_id}" target="_blank">`; if (chat_id === "0" || chat_id === "") { return linktg1 + `<img src="${imageUrltg1}" alt="Image" style="width: 98px; height: 14px;">`; } else { return linktg2 + `<img src="${imageUrlntg2}" alt="Image" style="width: 98px; height: 14px;">`; } }}, {title:"GetCurse", field:"gc_url", formatter: function(cell, formatterParams, onRendered) { var gc_url = cell.getValue(); var imageUrlvkgc1 = "https://i.ibb.co/F8825KY/1-2.png"; var imageUrlvkgc2 = "https://i.ibb.co/S3qwFKM/1-1.png"; var linkgc1 = `<a href="https://vk.com/getcourseru" target="_blank">`; var linkgc2 = `<a href="${gc_url}" target="_blank">`; if (gc_url === "0" || gc_url === "") { return linkgc1 + `<img src="${imageUrlvkgc1}" alt="Image" style="width: 98px; height: 14px;">`; } else { return linkgc2 + `<img src="${imageUrlvkgc2}" alt="Image" style="width: 98px; height: 14px;">`; } }}, {title:"Город", field:"b_city", width:95}, {title:"Email", field:"email", width:95}, {title:"Реплики", field:"b_mess", width:95, cellClick:function(e, cell){ var data = cell.getData(); const notyf = new Notyf({ duration: 5000, position: { x: 'right', y: 'top', }, }); // Формируем текст для уведомления const message = ` Имя: ${data.name}\n WhatsApp: ${data.phone}\n Реплики: ${data.b_mess} `; // Показываем уведомление notyf.open({ type: 'info', message: message, }); }}, {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:"Ссылка на 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:"Вебинары-присутствовал", field:"web_st", formatter:"star", formatterParams:{stars:7}, hozAlign:"center", width:90}, {title:"Вебинары-досмотрел до конца", field:"b_fin", formatter:function(cell, formatterParams, onRendered){ var value = cell.getValue(); var icon; if (value === 'True') { icon = ' <img src="https://i.ibb.co/9sqNhYz/4-2.png" width="98" height="14" />'; // Иконка для активного статуса } else { icon = ''; // Пустая строка для неактивного статуса или если значение не определено } return icon; }}, {title:"Прогрес по воронке", field:"fin_prog", formatter:"progress", formatterParams:{color:["#ff0000", "orange", "#00dd00"]}, 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", width:150} ], }); var fieldEl = document.getElementById("filter-field"); var typeEl = document.getElementById("filter-type"); var valueEl = document.getElementById("filter-value"); var fieldEl2 = document.getElementById("filter-field2"); var valueEl2 = document.getElementById("filter-value2"); function updateFilter() { var filterVal1 = fieldEl.value; var typeVal1 = typeEl.value; var valueVal1 = valueEl.value; var filterVal2 = fieldEl2.value; var valueVal2 = valueEl2.value; if (filterVal1 && filterVal2) { table.setFilter([ { field: filterVal1, type: typeVal1, value: valueVal1 }, { field: filterVal2, type: "=", value: valueVal2 } ]); } } document.getElementById("filter-field").addEventListener("change", updateFilter); document.getElementById("filter-type").addEventListener("change", updateFilter); document.getElementById("filter-value").addEventListener("keyup", updateFilter); document.getElementById("filter-field2").addEventListener("change", updateFilter); document.getElementById("filter-value2").addEventListener("keyup", updateFilter); //trigger download of data.json file document.getElementById("download-json").addEventListener("click", function(){ table.download("json", "data.json"); }); //trigger download of data.xlsx file document.getElementById("download-xlsx").addEventListener("click", function(){ table.download("xlsx", "data.xlsx", {sheetName:"My Data"}); }); document.getElementById("filter-clear").addEventListener("click", function() { fieldEl.value = ""; typeEl.value = "="; valueEl.value = ""; fieldEl2.value = ""; valueEl2.value = ""; table.clearFilter(); }); function handleDownloadRass() { 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-rass").addEventListener("click", handleDownloadRass); document.getElementById("take-for-yourself").addEventListener("click", handleTakeForYourself); }) .catch(error => console.error('Error fetching data:', error)); }); </script> </body> </html>