psy4

Sleeping

App Files Files Community

psy4 / data_gc_tab.html

DmitrMakeev

Update data_gc_tab.html

d05b7d9 verified 5 months ago

raw

history blame

13.4 kB

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