|
<!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> |
|
<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; |
|
} |
|
.container { |
|
padding: 20px; |
|
} |
|
#contacts-table { |
|
margin: 0 auto; |
|
background-color: white; |
|
border: 1px solid #ddd; |
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
border-radius: 4px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<h1>Контакты</h1> |
|
<div class="container"> |
|
<div id="contacts-table"></div> |
|
</div> |
|
<script> |
|
document.addEventListener("DOMContentLoaded", function() { |
|
const apiKeySys = "<%= api_key_sys %>"; |
|
|
|
async function fetchData() { |
|
const response = await fetch(`/data_gc_tab_out?api_sys=${apiKeySys}`); |
|
return response.json(); |
|
} |
|
|
|
fetchData().then(contacts => { |
|
const table = new Tabulator("#contacts-table", { |
|
data: contacts, |
|
layout: "fitColumns", |
|
columns: [ |
|
{title: "ID", field: "id", headerFilter: true}, |
|
{title: "Имя", field: "name", headerFilter: true}, |
|
{title: "Телефон", field: "phone", headerFilter: true}, |
|
{title: "Email", field: "email", headerFilter: true}, |
|
{title: "VK ID", field: "vk_id", headerFilter: true}, |
|
{title: "Chat ID", field: "chat_id", headerFilter: true}, |
|
{title: "WS Status", field: "ws_statys", headerFilter: true}, |
|
{title: "WS Stop", field: "ws_stop", headerFilter: true}, |
|
{title: "Web Status", field: "web_statys", headerFilter: true}, |
|
{title: "Fin Progress", field: "fin_progress", headerFilter: true}, |
|
{title: "Shop Status Full", field: "shop_statys_full", headerFilter: true}, |
|
{title: "PR1", field: "pr1", headerFilter: true}, |
|
{title: "PR2", field: "pr2", headerFilter: true}, |
|
{title: "PR3", field: "pr3", headerFilter: true}, |
|
{title: "PR4", field: "pr4", headerFilter: true}, |
|
{title: "PR5", field: "pr5", headerFilter: true}, |
|
{title: "Ad URL", field: "ad_url", headerFilter: true}, |
|
{title: "Curator", field: "curator", headerFilter: true} |
|
], |
|
}); |
|
}).catch(error => { |
|
console.error("Error fetching data:", error); |
|
}); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
|
|
