<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VMK Bot Admin Panel</title>
<link href="https://cdn.jsdelivr.net/npm/@coreui/coreui@5.4.0/dist/css/coreui.min.css" rel="stylesheet" integrity="sha384-TjEsBrREQ8e4UQZBv0t+xyJqXlIR9Z0I2S84WzGcxjOpwG3287e0uXc5MqDVOLPh" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@coreui/coreui@5.4.0/dist/js/coreui.bundle.min.js" integrity="sha384-mvTPoGrYInSYB+3c+wPW3q5fVw8StAVbCfbVjMsgJhNZBnYW2+bHUm/78D8Kj9mY" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="/css/main.css">
<script>
const BACKSERV = "http://kitan-bot.local/adminback/api.php";
// const BACKSERV = "https://kitanbotadmin.vmk-group.tech/adminback/api.php";
</script>
<script src="/js/main.js"></script>
</head>
<body>
<div class="container">
<header class="header">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Адмін панель</a>
<button class="navbar-toggler" type="button" data-coreui-toggle="collapse" data-coreui-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav nav-pills mb-1 mt-1" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-knbase-tab" data-coreui-toggle="pill" data-coreui-target="#pills-knbase" type="button" role="tab" aria-controls="pills-knbase" aria-selected="true">База знань</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-log-tab" data-coreui-toggle="pill" data-coreui-target="#pills-log" type="button" role="tab" aria-controls="pills-log" aria-selected="true">Журнал</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-bots-tab" data-coreui-toggle="pill" data-coreui-target="#pills-bots" type="button" role="tab" aria-controls="pills-bots" aria-selected="false">Керування ботами</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-analitics-tab" data-coreui-toggle="pill" data-coreui-target="#pills-analitics" type="button" role="tab" aria-controls="pills-analitics" aria-selected="false">Аналітика</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-sms-tab" data-coreui-toggle="pill" data-coreui-target="#pills-sms" type="button" role="tab" aria-controls="pills-sms" aria-selected="false" disabled>Розсилки</button>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="wrap">
<div class="tab-content mb-5 mt-5" id="pills-tabContent">
<div class="tab-pane fade" id="pills-knbase" role="tabpanel" aria-labelledby="pills-knbase-tab" tabindex="0">
<div class="modal fade" id="knbaseEntryForm" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Новий запис</h5>
<button type="button" class="btn-close" data-coreui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="new_entry" class="add-new-entry">
<div class="form">
<div class="mb-1">
Оберіть тип запису
</div>
<select class="form-select form-select-sm mb-3 knbase">
<option value="catalog">Фізичний товар</option>
<option value="cources">Навчання</option>
<option value="promo">Промо/акції</option>
<option value="other">Інше</option>
</select>
<div class="mb-3">
<div class="bots-multi">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="bot-mediceuticals" name="bot-mediceuticals">
<label class="form-check-label" for="bot-mediceuticals">Mediceuticals</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="bot-kitangroup" name="bot-kitangroup">
<label class="form-check-label" for="bot-kitangroup">Kitan Group</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="bot-hbloom" name="bot-hbloom">
<label class="form-check-label" for="bot-hbloom">HBloom</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="bot-nubea" name="bot-nubea">
<label class="form-check-label" for="bot-nubea">Nubea</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="bot-bosley" name="bot-bosley">
<label class="form-check-label" for="bot-bosley">BOSLEY</label>
</div>
</div>
</div>
<div class="mb-4">
<label for="">Заголовок</label>
<input type="text" name="title" class="form-control form-control-sm" placeholder="Заголовок" required>
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Повний опис запису</label>
<textarea class="form-control" name="content" id="exampleFormControlTextarea1" rows="6" required></textarea>
</div>
<div class="mb-3">
<label for="link-on-entry-page" class="form-label">Посилання на сторінку запису</label>
<input type="url" name="hlink" class="form-control form-control-sm" id="link-on-entry-page" placeholder="https://">
</div>
<div class="mb-3">
<label for="price-of-entry" class="form-label">Ціна</label>
<input type="text" name="price" class="form-control form-control-sm" id="price-of-entry" placeholder="0.00 грн">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary submit-form">Створити</button>
<button type="button" class="btn btn-secondary reset-form" data-coreui-dismiss="modal">Відмінити</button>
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", e => {
const knbaseEntryForm = document.getElementById("knbaseEntryForm");
const form = knbaseEntryForm.querySelector(".add-new-entry");
const modal = new coreui.Modal(knbaseEntryForm);
form.validityChecking = function(e){
return validityChecking(this);
}
form.submitting = function(e){
e.preventDefault();
const data = {};
data["type"] = form.querySelector("select.knbase").value;
data["include_to"] = getSwitchersVal(form.querySelector(".bots-multi"));
data["title"] = form.querySelector('[name="title"]').value;
data["content"] = form.querySelector('[name="content"]').value;
data["hlink"] = form.querySelector('[name="hlink"]').value;
data["price"] = form.querySelector('[name="price"]').value;
if(!this.validityChecking()) {
return;
}
doAction("knbase.new_entry", data, resp => {
document.querySelector("table.entries").loadDataFromServer();
});
document.activeElement.blur();
modal.hide();
form.reset();
}
form.addEventListener("submit", e => {
form.submitting(e);
});
knbaseEntryForm.querySelector(".submit-form").addEventListener("click", e => {
form.submitting(e);
});
knbaseEntryForm.querySelector(".reset-form").addEventListener("click", e => {
document.activeElement.blur();
form.reset();
});
});
</script>
<div class="modal fade" id="knbaseEditEntryForm" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Редагування запису</h5>
<button type="button" class="btn-close" data-coreui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="update_entry" class="edit-entry">
<input type="hidden" name="id" value="">
<div class="form">
<div class="mb-1">
Оберіть тип запису
</div>
<select class="form-select form-select-sm mb-3 knbase">
<option value="catalog">Фізичний товар</option>
<option value="cources">Навчання</option>
<option value="promo">Промо/акції</option>
<option value="other">Інше</option>
</select>
<div class="mb-3">
<div class="bots-multi">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="bot-mediceuticals" name="bot-mediceuticals">
<label class="form-check-label" for="bot-mediceuticals">Mediceuticals</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="bot-kitangroup" name="bot-kitangroup">
<label class="form-check-label" for="bot-kitangroup">Kitan Group</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="bot-hbloom" name="bot-hbloom">
<label class="form-check-label" for="bot-hbloom">HBloom</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="bot-nubea" name="bot-nubea">
<label class="form-check-label" for="bot-nubea">Nubea</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="bot-bosley" name="bot-bosley">
<label class="form-check-label" for="bot-bosley">BOSLEY</label>
</div>
</div>
</div>
<div class="mb-4">
<label for="">Заголовок</label>
<input type="text" name="title" class="form-control form-control-sm" placeholder="Заголовок" required>
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Повний опис запису</label>
<textarea class="form-control" name="content" id="exampleFormControlTextarea1" rows="6" required></textarea>
</div>
<div class="mb-3">
<label for="link-on-entry-page" class="form-label">Посилання на сторінку запису</label>
<input type="url" name="hlink" class="form-control form-control-sm" id="link-on-entry-page" placeholder="https://">
</div>
<div class="mb-3">
<label for="price-of-entry" class="form-label">Ціна</label>
<input type="text" name="price" class="form-control form-control-sm" id="price-of-entry" placeholder="0.00 грн">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary submit-form">Зберегти</button>
<button type="button" class="btn btn-secondary reset-form" data-coreui-dismiss="modal">Відмінити зміни</button>
<button type="button" class="btn btn-outline-danger" data-coreui-toggle="modal" data-coreui-target="#knbaseRemoveEntryForm"><span class="mdi mdi-delete-outline"></span> Видалити</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="knbaseRemoveEntryForm" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Підтвердіть видалення запису</h5>
<button type="button" class="btn-close" data-coreui-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<button type="button" class="btn btn-danger apply-remove-entry" data-coreui-dismiss="modal"><span class="mdi mdi-delete-outline"></span> Так, видалити</button>
<button type="button" class="btn btn-primary cancel" data-coreui-toggle="modal" data-coreui-target="#knbaseEditEntryForm">Відмінити дію</button>
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", e => {
const editForm = document.getElementById("knbaseEditEntryForm");
editForm.viewEntryData = function(entry){
console.log("viewEntryData", entry);
const form = this.querySelector("form.edit-entry");
form.reset();
form.querySelector(`[name="id"]`).value = entry.id;
const selectType = form.querySelector("select.knbase");
selectType.value = entry.type;
form.querySelector(`[name="title"]`).value = entry.title;
form.querySelector(`[name="content"]`).value = entry.content;
form.querySelector(`[name="hlink"]`).value = entry.hlink;
form.querySelector(`[name="price"]`).value = entry.price;
let includes = entry.include_to.split(",");
for(let i of includes) {
form.querySelector(`[name="${i}"]`).checked = true;
}
}
const form = editForm.querySelector(".edit-entry");
const modal = new coreui.Modal(editForm);
form.validityChecking = function(e){
return validityChecking(this);
}
form.submitting = function(e){
e.preventDefault();
const data = {};
data["type"] = form.querySelector("select.knbase").value;
data["include_to"] = getSwitchersVal(form.querySelector(".bots-multi"));
data["id"] = form.querySelector('[name="id"]').value;
data["title"] = form.querySelector('[name="title"]').value;
data["content"] = form.querySelector('[name="content"]').value;
data["hlink"] = form.querySelector('[name="hlink"]').value;
data["price"] = form.querySelector('[name="price"]').value;
if(!this.validityChecking()) {
return;
}
doAction("knbase.update_entry", data, resp => {
document.querySelector("table.entries").loadDataFromServer();
});
document.activeElement.blur();
modal.hide();
form.reset();
}
form.addEventListener("submit", e => {
form.submitting(e);
});
editForm.querySelector(".submit-form").addEventListener("click", e => {
form.submitting(e);
});
editForm.querySelector(".reset-form").addEventListener("click", e => {
document.activeElement.blur();
form.reset();
});
document.querySelector("#knbaseRemoveEntryForm .apply-remove-entry").addEventListener("click", e => {
const id = form.querySelector('[name="id"]').value;
doAction("knbase.remove_entry", {
"id": id
}, resp => {
document.querySelector("table.entries").loadDataFromServer();
});
});
});
</script>
<div class="container">
<div class="row">
<div class="col select-knbase-cat">
<div class="mb-1">
Оберіть тип запису
</div>
<select class="form-select form-select-sm mb-3 knbase">
<option value="catalog">Фізичний товар</option>
<option value="cources">Навчання</option>
<option value="promo">Промо/акції</option>
<option value="other">Інше</option>
</select>
</div>
<div class="col knbase-search">
<div class="mb-1">
Пошук
</div>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text" id="inputGroup-sizing-sm"><span class="mdi mdi-magnify"></span></span>
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" placeholder="Введіть запит">
</div>
</div>
<div class="col">
<div class="mt-1">
Новий запис
</div>
<button type="button" class="btn btn-primary btn-sm" data-coreui-toggle="modal" data-coreui-target="#knbaseEntryForm"><span class="mdi mdi-plus"></span> Створити</button>
</div>
</div>
<div class="row">
<div class="col">
<table class="table table-striped-columns entries">
<thead>
<tr>
<th>Заголовок</th>
<th>Тип запису</th>
<th>Додано</th>
<th>Редагувати</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", e => {
const table = document.querySelector("table.entries");
const tbody = table.querySelector("tbody");
const knbaseSelector = document.querySelector("#pills-knbase .select-knbase-cat .form-select.knbase");
const knbaseSearch = document.querySelector("#pills-knbase .knbase-search input");
table.rendering = function(resp) {
this.querySelector("tbody").innerHTML = "";
for(let item of resp.entries) {
const create_at = formattedTimestamp(item.create_at);
const entry_type = entryTypeToView(item.type);
const keywords = [`id${item.id}`, item.title, item.content, create_at, item.include_to, item.hlink].join(" ").toLowerCase().replaceAll('"', "");
let entry = `
<td>${item.title}</td>
<td>${entry_type}</td>
<td>${create_at}</td>
<td>
<button type="button" class="btn btn-link btn-sm" data-coreui-toggle="modal" data-coreui-target="#knbaseEditEntryForm" data-entry-id="${item.id}">Редагувати</button>
</td>
`;
let row = document.createElement("tr");
row.dataset.keywords = keywords;
row.innerHTML = entry;
row.querySelector("button[data-entry-id]").addEventListener("click", e => {
const entryId = e.currentTarget.dataset.entryId;
doAction("knbase.entry", {"entry_id": entryId}, resp => {
document.getElementById("knbaseEditEntryForm").viewEntryData(resp.entry);
});
});
this.querySelector("tbody").appendChild(row);
}
};
table.loadDataFromServer = function(){
doAction("knbase.entries", {
"type": knbaseSelector.value
}, resp => {
table.rendering(resp);
knbaseSearch.value = "";
});
}
knbaseSelector.addEventListener("change", e => {
table.loadDataFromServer();
});
knbaseSearch.addEventListener("input", e => {
let query = e.currentTarget.value.trim().toLowerCase().split(/\s+/);
const regex = new RegExp(query.map(w => w.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join(".*?"), "i");
const rows = tbody.querySelectorAll("tr");
for(let i in rows) {
if(!regex.test(rows[i].dataset.keywords)) {
rows[i].style.display = "none";
} else {
rows[i].removeAttribute("style");
}
}
});
table.loadDataFromServer();
});
</script>
</div>
<div class="tab-pane fade" id="pills-log" role="tabpanel" aria-labelledby="pills-log-tab" tabindex="0">
<div class="container">
<div class="row">
<div class="col site-select">
<div class="mb-1">
Оберіть сайт
</div>
<select class="form-select form-select-sm mb-3 botname">
<option value="*">Всі</option>
<option value="mediceuticals">Mediceuticals</option>
<option value="kitan-group">Kitan Group</option>
<option value="hbloom">HBloom</option>
<option value="nubea">Nubea</option>
<option value="bosleymd">BOSLEY</option>
</select>
</div>
<div class="col time-period">
<div class="mb-1">
Оберіть період
</div>
<select class="form-select form-select-sm mb-3 pediod">
<option value="1" selected>За останні 24 години</option>
<option value="7">За останні 7 днів</option>
<option value="30">За останні 30 днів</option>
<option value="365">За останні 365 днів</option>
<option value="0">За увесь час</option>
</select>
</div>
</div>
<div class="row">
<div class="col">
<table class="table table-striped-columns">
<thead>
<tr>
<th>Дата</th>
<th>Тип запиту</th>
<th>Оцінка</th>
<th>Переглянути</th>
</tr>
</thead>
<tbody>
<tr>
<td>10.05.2025 12:24</td>
<td>Партнерство</td>
<td><span class="mdi mdi-thumb-up"></span></td>
<td>
<a href="#">Переглянути</a>
</td>
</tr>
<tr>
<td>10.05.2025 12:20</td>
<td>Партнерство</td>
<td><span class="mdi mdi-thumb-down-outline"></span></td>
<td>
<a href="#">Переглянути</a>
</td>
</tr>
<tr>
<td>10.05.2025 12:15</td>
<td>Партнерство</td>
<td><span class="mdi mdi-thumb-up"></span></td>
<td>
<a href="#">Переглянути</a>
</td>
</tr>
<tr>
<td>10.05.2025 12:24</td>
<td>Партнерство</td>
<td><span class="mdi mdi-thumb-up"></span></td>
<td>
<a href="#">Переглянути</a>
</td>
</tr>
<tr>
<td>10.05.2025 12:20</td>
<td>Партнерство</td>
<td><span class="mdi mdi-thumb-down-outline"></span></td>
<td>
<a href="#">Переглянути</a>
</td>
</tr>
<tr>
<td>10.05.2025 12:15</td>
<td>Партнерство</td>
<td><span class="mdi mdi-thumb-up"></span></td>
<td>
<a href="#">Переглянути</a>
</td>
</tr>
</tbody>
</table>
<div class="paginator-container mt-3 mb-3">
<nav>
<ul class="pagination pagination-sm">
</ul>
</nav>
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", e => {
const table = document.querySelector("#pills-log .table");
const tbody = table.querySelector("tbody");
const siteSelector = document.querySelector("#pills-log .site-select select");
const timePeriod = document.querySelector("#pills-log .time-period select");
table.rendering = function(resp){
this.querySelector("tbody").innerHTML = "";
for(let item of resp.logs) {
const create_at = formattedTimestamp(item.create_at);
let rating = "";
if(item.rating == -1) {
rating = `<span class="mdi mdi-thumb-down-outline"></span>`;
} else if(item.rating == 1) {
rating = `<span class="mdi mdi-thumb-up"></span>`;
}
const dialogUrl = `${BACKSERV}?action=logs.dialog&chat_id=${item.chat_id}`;
let entry = `
<td>${create_at}</td>
<td>${item.auto_type}</td>
<td>${rating}</td>
<td>
<a href="${dialogUrl}" class="btn btn-link btn-sm" target="_blank">Переглянути</a>
</td>
`;
let row = document.createElement("tr");
row.innerHTML = entry;
this.querySelector("tbody").appendChild(row);
}
}
table.loadDataFromServer = function() {
let pagenum = document.querySelector("#pills-log .paginator-container [data-goto-pagenum]")?.dataset.gotoPagenum;
pagenum = (typeof pagenum == "undefined") ? 1 : pagenum;
doAction("logs.list", {
"site": siteSelector.value,
"period": timePeriod.value,
"pagenum": pagenum
}, resp => {
table.rendering(resp);
if(typeof resp.paginator != "undefined") {
paginator_handler(
document.querySelector("#pills-log .paginator-container"),
resp.paginator,
table.loadDataFromServer
);
}
});
}
siteSelector.addEventListener("change", e => {
table.loadDataFromServer();
});
timePeriod.addEventListener("change", e => {
table.loadDataFromServer();
});
table.loadDataFromServer();
});
</script>
</div>
<div class="tab-pane fade" id="pills-bots" role="tabpanel" aria-labelledby="pills-bots-tab" tabindex="0">
<div class="container">
<table class="table table-striped-columns">
<thead>
<tr>
<th>Назва</th>
<th>Відображення на сайті</th>
<th>Направляти до оператора</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mediceuticals</td>
<td>
<div class="form-check form-switch form-switch-xl">
<input class="form-check-input" type="checkbox" id="mediceuticals-enable" checked>
<label class="form-check-label" for="mediceuticals-enable">Увімкнути</label>
</div>
</td>
<td>
<div class="form-check form-switch form-switch-xl">
<input class="form-check-input" type="checkbox" id="mediceuticals-forced">
<label class="form-check-label" for="mediceuticals-forced">Форсувати</label>
</div>
</td>
</tr>
<tr>
<td>HBloom</td>
<td>
<div class="form-check form-switch form-switch-xl">
<input class="form-check-input" type="checkbox" id="hbloom-enable" checked>
<label class="form-check-label" for="hbloom-enable">Увімкнути</label>
</div>
</td>
<td>
<div class="form-check form-switch form-switch-xl">
<input class="form-check-input" type="checkbox" id="hbloom-forced">
<label class="form-check-label" for="hbloom-forced">Форсувати</label>
</div>
</td>
</tr>
<tr>
<td>Kitan Group</td>
<td>
<div class="form-check form-switch form-switch-xl">
<input class="form-check-input" type="checkbox" id="kitan-group-enable" checked>
<label class="form-check-label" for="kitan-group-enable">Увімкнути</label>
</div>
</td>
<td>
<div class="form-check form-switch form-switch-xl">
<input class="form-check-input" type="checkbox" id="kitan-group-forced" checked>
<label class="form-check-label" for="kitan-group-forced">Форсувати</label>
</div>
</td>
</tr>
<tr>
<td>Nubea</td>
<td>
<div class="form-check form-switch form-switch-xl">
<input class="form-check-input" type="checkbox" id="nubea-enable" checked>
<label class="form-check-label" for="nubea-enable">Увімкнути</label>
</div>
</td>
<td>
<div class="form-check form-switch form-switch-xl">
<input class="form-check-input" type="checkbox" id="nubea-forced">
<label class="form-check-label" for="nubea-forced">Форсувати</label>
</div>
</td>
</tr>
<tr>
<td>BOSLEY</td>
<td>
<div class="form-check form-switch form-switch-xl">
<input class="form-check-input" type="checkbox" id="bosley-enable">
<label class="form-check-label" for="bosley-enable">Увімкнути</label>
</div>
</td>
<td>
<div class="form-check form-switch form-switch-xl">
<input class="form-check-input" type="checkbox" id="bosley-forced">
<label class="form-check-label" for="bosley-forced">Форсувати</label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="pills-analitics" role="tabpanel" aria-labelledby="pills-analitics-tab" tabindex="0">
<div class="container">
<div class="row">
<div class="col site-select">
<div class="mb-1">
Оберіть сайт
</div>
<select class="form-select form-select-sm mb-3 botname">
<option value="*">Всі</option>
<option value="mediceuticals">Mediceuticals</option>
<option value="kitan-group">Kitan Group</option>
<option value="hbloom">HBloom</option>
<option value="nubea">Nubea</option>
<option value="bosleymd">BOSLEY</option>
</select>
</div>
<div class="col time-period">
<div class="mb-1">
Оберіть період
</div>
<select class="form-select form-select-sm mb-3 pediod">
<option value="1" selected>За останні 24 години</option>
<option value="7">За останні 7 днів</option>
<option value="30">За останні 30 днів</option>
<option value="365">За останні 365 днів</option>
<option value="0">За увесь час</option>
</select>
</div>
</div>
<div class="row">
<div class="col">
<table class="table table-striped-columns">
<tbody>
<tr>
<th>Сайт</th>
<td>Mediceuticals</td>
</tr>
<tr>
<th>Кількість діалогів</th>
<td><strong>28</strong></td>
</tr>
<tr>
<th>Кількість переадресацій</th>
<td><strong>4</strong> (14%)</td>
</tr>
<tr>
<th>Середня оцінка</th>
<td>
<strong>7.5</strong>
<span class="mdi mdi-star"></span>
(<span class="mdi mdi-thumb-up"></span> 8 <span class="mdi mdi-thumb-down-outline"></span> 4)
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", e => {
const table = document.querySelector("#pills-analitics .table");
const tbody = table.querySelector("tbody");
const siteSelector = document.querySelector("#pills-analitics .site-select select");
const timePeriod = document.querySelector("#pills-analitics .time-period select");
table.rendering = function(resp){
this.querySelector("tbody").innerHTML = "";
let entry = `
<tr>
<th>Сайт</th>
<td>${resp.site}</td>
</tr>
<tr>
<th>Кількість діалогів</th>
<td><strong>${resp.total_dialogs}</strong></td>
</tr>
<tr>
<th>Кількість переадресацій</th>
<td><strong>?</strong> (??%)</td>
</tr>
<tr>
<th>Середня оцінка</th>
<td>
<strong>${resp.final_rating}</strong>
<span class="mdi mdi-star"></span>
(<span class="mdi mdi-thumb-up"></span> ${resp.total_likes} <span class="mdi mdi-thumb-down-outline"></span> ${resp.total_dislikes})
</td>
</tr>
`;
this.querySelector("tbody").innerHTML = entry;
}
table.loadDataFromServer = function() {
doAction("analitics.get_by_site", {
"site": siteSelector.value,
"period": timePeriod.value
}, resp => {
table.rendering(resp);
});
}
siteSelector.addEventListener("change", e => {
table.loadDataFromServer();
});
timePeriod.addEventListener("change", e => {
table.loadDataFromServer();
});
table.loadDataFromServer();
});
</script>
</div>
<div class="tab-pane fade" id="pills-sms" role="tabpanel" aria-labelledby="pills-sms-tab" tabindex="0">
SMS
</div>
</div>
</div>
<footer class="footer">
Designed by VMK Group ©2025
</footer>
</div>
</body>
</html>
