|
<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="vk_id">Ссылка на VK</option> |
|
<option value="chat_id">Ссылка на Tg</option> |
|
<option value="gc_url">Ссылка на пользователя в GC</option> |
|
<option value="b_city">Город</option> |
|
<option value="email">Email</option> |
|
<option value="b_mess">Реплики</option> |
|
<option value="curator">Куратор</option> |
|
<option value="shop_st">Статус покупки</option> |
|
<option value="ws_stop">Стутус подписки</option> |
|
<option value="web_st">Вебинары</option> |
|
<option value="fin_prog">Прогрес по воронке</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-xlsx">Скачать в XLSX</button> |
|
<button id="download-json">Рассылка по выбранным</button> |
|
<button id="take-for-yourself">Взять себе</button> |
|
<button id="download-json-new">Скачать JSON</button> |
|
</div> |
|
<div id="example-table"></div> |
|
|
|
<script> |
|
vkBridge.send('VKWebAppInit'); |
|
document.addEventListener('DOMContentLoaded', function() { |
|
fetch('https://irdelsol-psy.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, |
|
layout: "fitColumns", |
|
pagination: "local", |
|
paginationSize: 50, |
|
selectable: true, |
|
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"; |
|
var imageUrl2 = "https://i.ibb.co/LZx71cM/1.png"; |
|
var imageUrl3 = "https://i.ibb.co/Cvn3QsK/whatsapp-3.png"; |
|
var link = `<a href="https://web.whatsapp.com/send?phone=${phone}" target="_blank">`; |
|
if (ws_stop !== "1" && ws_st === "1") { |
|
return link + `<img src="${imageUrl2}" alt="WhatsApp" style="width: 98px; height: 14px;">`; |
|
} else if (ws_stop === "1" && ws_st === "1") { |
|
return link + `<img src="${imageUrl3}" alt="WhatsApp" style="width: 98px; height: 14px;">`; |
|
} else { |
|
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"; |
|
var imageUrlvk2 = "https://i.ibb.co/MPCGvQX/2-1.png"; |
|
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 === "") { |
|
return link1 + `<img src="${imageUrlvk1}" alt="Image" style="width: 98px; height: 14px;">`; |
|
} else { |
|
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}; border-radius: 50%;"></div>`; |
|
}}, |
|
{title:"Канал трафика", field:"pr4", width:95}, |
|
{title:"Дата", field:"pr5", width:95}, |
|
{title:"Ключ PR", field:"key_pr", width:95}, |
|
{title:"Канал", field:"canal", width:95}, |
|
{title:"Дата", field:"data_t", width:95}, |
|
], |
|
}); |
|
|
|
document.getElementById('filter-clear').addEventListener('click', function() { |
|
table.clearFilter(true); |
|
}); |
|
|
|
document.getElementById('download-xlsx').addEventListener('click', function() { |
|
table.download("xlsx", "data.xlsx"); |
|
}); |
|
|
|
document.getElementById('download-json').addEventListener('click', function() { |
|
var selectedRows = table.getSelectedData(); |
|
var jsonData = JSON.stringify(selectedRows); |
|
var blob = new Blob([jsonData], { type: 'application/json' }); |
|
var url = URL.createObjectURL(blob); |
|
var a = document.createElement('a'); |
|
a.href = url; |
|
a.download = 'data.json'; |
|
document.body.appendChild(a); |
|
a.click(); |
|
URL.revokeObjectURL(url); |
|
}); |
|
|
|
document.getElementById('download-json-new').addEventListener('click', function() { |
|
var jsonData = JSON.stringify(data); |
|
var blob = new Blob([jsonData], { type: 'application/json' }); |
|
var url = URL.createObjectURL(blob); |
|
var a = document.createElement('a'); |
|
a.href = url; |
|
a.download = 'data.json'; |
|
document.body.appendChild(a); |
|
a.click(); |
|
URL.revokeObjectURL(url); |
|
}); |
|
|
|
document.getElementById('take-for-yourself').addEventListener('click', function() { |
|
var selectedRows = table.getSelectedData(); |
|
|
|
console.log('Selected rows:', selectedRows); |
|
}); |
|
}) |
|
.catch(error => { |
|
console.error('Ошибка при загрузке JSON:', error); |
|
}); |
|
}); |
|
</script> |
|
</body> |
