File size: 10,475 Bytes
5813704 3eeb6eb 5813704 27648bc 3eeb6eb be80925 d059411 9722b56 1b9bb85 ce428db 1b9bb85 ce428db 64ed340 9722b56 3eeb6eb 9cc7451 3eeb6eb 1779a91 3eeb6eb 200c9dd 128698b 3eeb6eb a8f86dd c0413b9 baa844b 3eeb6eb baa844b 8fbc90a baa844b a8f86dd 3eeb6eb a8f86dd 3eeb6eb a8f86dd 3eeb6eb a8f86dd 3eeb6eb a8f86dd 1fceb6d 5e1cb9e 1fceb6d 3eeb6eb 9722b56 1b9bb85 9722b56 64ed340 9722b56 1b9bb85 9722b56 1b9bb85 9722b56 64ed340 9722b56 1b9bb85 9722b56 1b9bb85 9722b56 3eeb6eb 64ed340 3eeb6eb 4ff0571 3eeb6eb |
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 |
<!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/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
</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>
<input type="checkbox" id="select-filtered-data-checkbox"> Выбрать отфильтрованные данные для экспорта
</div>
<div id="example-table"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
fetch('https://dmtuit-gc-api-ras.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");
var selectFilteredDataCheckbox = document.getElementById("select-filtered-data-checkbox");
// 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);
}
if (selectFilteredDataCheckbox.checked) {
var filteredData = table.getData("filtered");
var jsonData = JSON.stringify(filteredData);
window.filteredDataJSON = jsonData;
console.log("Отфильтрованные данные преобразованы в JSON:", jsonData);
}
}
// 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();
});
// Handle checkbox change for exporting filtered data
selectFilteredDataCheckbox.addEventListener("change", function() {
if (this.checked) {
var filteredData = table.getData("filtered");
var jsonData = JSON.stringify(filteredData);
window.filteredDataJSON = jsonData;
console.log("Отфильтрованные данные преобразованы в JSON:", jsonData);
} else {
window.filteredDataJSON = null;
console.log("Выбор отфильтрованных данных для экспорта отменен");
}
});
})
.catch(error => console.error('Error fetching data:', error));
});
</script>
</body>
</html> |