Add tabbed navigation and update styles for content panels
This commit is contained in:
@@ -144,6 +144,19 @@ function renderContinuous(data) {
|
||||
document.getElementById("continuous-logs").textContent = (status.logs || []).join("\n") || "Логов пока нет.";
|
||||
}
|
||||
|
||||
function setupTabs() {
|
||||
const tabs = document.querySelectorAll(".content-tab");
|
||||
const panels = document.querySelectorAll(".tab-panel");
|
||||
|
||||
tabs.forEach((tab) => {
|
||||
tab.addEventListener("click", () => {
|
||||
const targetId = tab.dataset.tabTarget;
|
||||
tabs.forEach((item) => item.classList.toggle("active", item === tab));
|
||||
panels.forEach((panel) => panel.classList.toggle("active", panel.id === targetId));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function refreshDashboard() {
|
||||
const data = await api("/api/dashboard");
|
||||
const authData = await api("/api/auth");
|
||||
@@ -157,6 +170,8 @@ async function refreshDashboard() {
|
||||
}
|
||||
|
||||
async function main() {
|
||||
setupTabs();
|
||||
|
||||
document.getElementById("scrape-all-btn").addEventListener("click", async (event) => {
|
||||
setBusy(event.currentTarget, true);
|
||||
try {
|
||||
|
||||
+104
-86
@@ -68,99 +68,117 @@
|
||||
</aside>
|
||||
|
||||
<main class="content">
|
||||
<section class="panel-grid">
|
||||
<div class="panel stat-panel">
|
||||
<div class="section-title">Каналы</div>
|
||||
<div id="channel-count" class="stat-value">0</div>
|
||||
</div>
|
||||
<div class="panel stat-panel">
|
||||
<div class="section-title">Media scraping</div>
|
||||
<label class="toggle-row">
|
||||
<span id="scrape-media-label">OFF</span>
|
||||
<input id="scrape-media-toggle" type="checkbox" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="panel stat-panel">
|
||||
<div class="section-title">Forwarding rules</div>
|
||||
<div id="forwarding-count" class="stat-value">0</div>
|
||||
</div>
|
||||
<div class="content-tabs">
|
||||
<button class="content-tab active" data-tab-target="overview-tab" type="button">Overview</button>
|
||||
<button class="content-tab" data-tab-target="continuous-tab" type="button">Continuous</button>
|
||||
</div>
|
||||
|
||||
<section id="overview-tab" class="tab-panel active">
|
||||
<section class="panel-grid">
|
||||
<div class="panel stat-panel">
|
||||
<div class="section-title">Каналы</div>
|
||||
<div id="channel-count" class="stat-value">0</div>
|
||||
</div>
|
||||
<div class="panel stat-panel">
|
||||
<div class="section-title">Media scraping</div>
|
||||
<label class="toggle-row">
|
||||
<span id="scrape-media-label">OFF</span>
|
||||
<span class="switch">
|
||||
<input id="scrape-media-toggle" type="checkbox" />
|
||||
<span class="switch-slider"></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="panel stat-panel">
|
||||
<div class="section-title">Forwarding rules</div>
|
||||
<div id="forwarding-count" class="stat-value">0</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<h2>Отслеживаемые каналы</h2>
|
||||
<p class="muted">Берутся из <code>data/state.json</code>, статистика подтягивается из SQLite.</p>
|
||||
</div>
|
||||
<form id="add-channel-form" class="inline-form">
|
||||
<input id="add-channel-id" name="channel_id" placeholder="ID или @username" required />
|
||||
<input id="add-channel-name" name="name" placeholder="Псевдоним (необязательно)" />
|
||||
<button class="button primary" type="submit">Добавить</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Канал</th>
|
||||
<th>Сообщений</th>
|
||||
<th>Медиа</th>
|
||||
<th>Последнее сообщение</th>
|
||||
<th>Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="channels-table"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel jobs-panel">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<h2>Фоновые задачи</h2>
|
||||
<p class="muted">Очередь простая: задачи выполняются по одной, чтобы не драться за Telegram session.</p>
|
||||
</div>
|
||||
<button class="button" id="refresh-jobs-btn">Обновить</button>
|
||||
</div>
|
||||
<div id="jobs-list" class="jobs-list"></div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<h2>Отслеживаемые каналы</h2>
|
||||
<p class="muted">Берутся из <code>data/state.json</code>, статистика подтягивается из SQLite.</p>
|
||||
<section id="continuous-tab" class="tab-panel">
|
||||
<section class="panel">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<h2>Continuous Scraping</h2>
|
||||
<p class="muted">Основной long-running режим: периодически перескрапливает каналы и сохраняет лог цикла.</p>
|
||||
</div>
|
||||
</div>
|
||||
<form id="add-channel-form" class="inline-form">
|
||||
<input id="add-channel-id" name="channel_id" placeholder="ID или @username" required />
|
||||
<input id="add-channel-name" name="name" placeholder="Псевдоним (необязательно)" />
|
||||
<button class="button primary" type="submit">Добавить</button>
|
||||
|
||||
<form id="continuous-form" class="continuous-form">
|
||||
<label class="toggle-row">
|
||||
<span>Включить</span>
|
||||
<span class="switch">
|
||||
<input id="continuous-enabled" type="checkbox" />
|
||||
<span class="switch-slider"></span>
|
||||
</span>
|
||||
</label>
|
||||
<label class="stack-form">
|
||||
<span class="muted small">Интервал, минут</span>
|
||||
<input id="continuous-interval" type="number" min="1" value="1" />
|
||||
</label>
|
||||
<label class="toggle-row">
|
||||
<span>Все отслеживаемые каналы</span>
|
||||
<span class="switch">
|
||||
<input id="continuous-all" type="checkbox" checked />
|
||||
<span class="switch-slider"></span>
|
||||
</span>
|
||||
</label>
|
||||
<label class="stack-form">
|
||||
<span class="muted small">Если выключить опцию выше, сюда можно вписать ID каналов через запятую</span>
|
||||
<input id="continuous-channels" placeholder="-100123, 5926277437" />
|
||||
</label>
|
||||
<button class="button primary" type="submit">Сохранить continuous scraping</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Канал</th>
|
||||
<th>Сообщений</th>
|
||||
<th>Медиа</th>
|
||||
<th>Последнее сообщение</th>
|
||||
<th>Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="channels-table"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel jobs-panel">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<h2>Фоновые задачи</h2>
|
||||
<p class="muted">Очередь простая: задачи выполняются по одной, чтобы не драться за Telegram session.</p>
|
||||
<div class="continuous-meta">
|
||||
<div class="muted small">Статус: <span id="continuous-status">—</span></div>
|
||||
<div class="muted small">Последний цикл: <span id="continuous-last-iteration">—</span></div>
|
||||
<div class="muted small">Последняя ошибка: <span id="continuous-last-error">—</span></div>
|
||||
</div>
|
||||
<button class="button" id="refresh-jobs-btn">Обновить</button>
|
||||
</div>
|
||||
<div id="jobs-list" class="jobs-list"></div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<div class="panel-header">
|
||||
<div>
|
||||
<h2>Continuous Scraping</h2>
|
||||
<p class="muted">Периодически перескрапливает каналы и пишет лог прямо в панель.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="continuous-form" class="continuous-form">
|
||||
<label class="toggle-row">
|
||||
<span>Включить</span>
|
||||
<input id="continuous-enabled" type="checkbox" />
|
||||
</label>
|
||||
<label class="stack-form">
|
||||
<span class="muted small">Интервал, минут</span>
|
||||
<input id="continuous-interval" type="number" min="1" value="1" />
|
||||
</label>
|
||||
<label class="toggle-row">
|
||||
<span>Все отслеживаемые каналы</span>
|
||||
<input id="continuous-all" type="checkbox" checked />
|
||||
</label>
|
||||
<label class="stack-form">
|
||||
<span class="muted small">Если выключить опцию выше, сюда можно вписать ID каналов через запятую</span>
|
||||
<input id="continuous-channels" placeholder="-100123, 5926277437" />
|
||||
</label>
|
||||
<button class="button primary" type="submit">Сохранить continuous scraping</button>
|
||||
</form>
|
||||
|
||||
<div class="continuous-meta">
|
||||
<div class="muted small">Статус: <span id="continuous-status">—</span></div>
|
||||
<div class="muted small">Последний цикл: <span id="continuous-last-iteration">—</span></div>
|
||||
<div class="muted small">Последняя ошибка: <span id="continuous-last-error">—</span></div>
|
||||
</div>
|
||||
|
||||
<pre id="continuous-logs" class="job-logs"></pre>
|
||||
<pre id="continuous-logs" class="job-logs"></pre>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -58,6 +58,34 @@ button {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.content-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.content-tab {
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.content-tab.active {
|
||||
background: var(--accent-strong);
|
||||
border-color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.tab-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-panel.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.brand-block h1,
|
||||
.viewer-sidebar-head h1,
|
||||
.viewer-header h2,
|
||||
@@ -165,6 +193,61 @@ button {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
width: 46px;
|
||||
min-width: 46px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.switch-slider {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 999px;
|
||||
background: #0d141c;
|
||||
border: 1px solid var(--line);
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.switch-slider::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #c9d4df;
|
||||
transition: transform 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.switch input:checked + .switch-slider {
|
||||
background: var(--accent-strong);
|
||||
border-color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.switch input:checked + .switch-slider::before {
|
||||
transform: translateX(18px);
|
||||
background: white;
|
||||
}
|
||||
|
||||
.switch input:focus-visible + .switch-slider {
|
||||
outline: 2px solid rgba(83, 167, 255, 0.45);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 18px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
Reference in New Issue
Block a user