refactor: extract inline CSS/JS from views into separate asset files (20+ files)
Phase A — HTML removed from PHP files: - RateLimitMiddleware.php: heredoc moved to views/errors/429.php - public/index.php: inline HTML replaced with View::error() - AuthMiddleware.php: <script> redirect replaced with <meta refresh> Phase B — Inline CSS/JS extracted from views: - CSS: landing.css (459 lines), legal.css (shared by terms+privacy) - JS: 17 new files extracted from ~20 view files - main.js (layout sidebar + notifications) - dashboard-chart.js, server-show.js, server-services.js - nginx-manager.js, database-manager.js - terminal.js, team-show.js, team-index.js - server-list.js, server-permissions.js (shared by edit+create) - server-ssl.js, server-processes.js, system-users.js - admin-users.js, audit-log.js, admin-notifications.js, admin-security.js - notifications.js Total: -3264 lines from views, +288 lines in new assets
This commit is contained in:
@@ -1,216 +1,154 @@
|
||||
<?php
|
||||
$user = $user ?? null;
|
||||
$notifications = $notifications ?? [];
|
||||
$unreadCount = $unreadCount ?? 0;
|
||||
$teamId = $teamId ?? null;
|
||||
$title = $title ?? 'ServerManager';
|
||||
$content = $content ?? '';
|
||||
|
||||
$currentRoute = $_SERVER['REQUEST_URI'] ?? '/';
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="dark">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="csrf-token" content="<?= $_SESSION['csrf_token'] ?? '' ?>">
|
||||
<meta name="api-token" content="<?php
|
||||
$uid = $_SESSION['user_id'] ?? 0;
|
||||
$token = '';
|
||||
if ($uid) {
|
||||
$u = \ServerManager\Core\Database::getInstance()->fetch(
|
||||
'SELECT api_token FROM users WHERE id = ? AND status = \'active\'', [(int) $uid]
|
||||
);
|
||||
$token = $u['api_token'] ?? '';
|
||||
}
|
||||
echo htmlspecialchars($token);
|
||||
?>">
|
||||
<title><?= htmlspecialchars($title ?? 'ServerManager') ?></title>
|
||||
<link rel="icon" type="image/svg+xml" href="/assets/img/server.svg">
|
||||
<link rel="stylesheet" href="/assets/css/style.css">
|
||||
<title><?= htmlspecialchars($title) ?> — ServerManager</title>
|
||||
<meta name="api-token" content="<?= htmlspecialchars($user['api_token'] ?? '') ?>">
|
||||
<meta name="csrf-token" content="<?= $this->csrfToken() ?>">
|
||||
<link rel="stylesheet" href="/assets/css/app.css">
|
||||
<link rel="icon" type="image/svg+xml" href="/assets/img/favicon.svg">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-container">
|
||||
<div class="app-layout">
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar" id="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="/dashboard" class="sidebar-logo">
|
||||
<i class="fas fa-server"></i>
|
||||
<span class="logo-text">ServerManager</span>
|
||||
<a href="/dashboard" class="sidebar-brand">
|
||||
<i class="fas fa-cubes"></i>
|
||||
<span>ServerManager</span>
|
||||
</a>
|
||||
<button class="sidebar-toggle" id="sidebarToggle" title="Toggle sidebar">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="nav-list">
|
||||
<li class="nav-item">
|
||||
<a href="/dashboard" class="nav-link <?= str_starts_with($_SERVER['REQUEST_URI'] ?? '', '/dashboard') ? 'active' : '' ?>">
|
||||
<i class="fas fa-tachometer-alt"></i>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/notifications" class="nav-link <?= str_starts_with($_SERVER['REQUEST_URI'] ?? '', '/notifications') ? 'active' : '' ?>">
|
||||
<i class="fas fa-bell"></i>
|
||||
<span>Notifications</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-item-accordion <?= str_starts_with($_SERVER['REQUEST_URI'] ?? '', '/servers') ? 'active' : '' ?>">
|
||||
<a href="#" class="nav-link" onclick="toggleServerList(event)">
|
||||
<i class="fas fa-hdd"></i>
|
||||
<span>Servers</span>
|
||||
<i class="fas fa-chevron-right nav-chevron"></i>
|
||||
</a>
|
||||
<div class="nav-submenu" id="serverList">
|
||||
<div class="nav-submenu-loading"><i class="fas fa-spinner fa-spin"></i></div>
|
||||
</div>
|
||||
</li>
|
||||
<?php if (is_super_admin()): ?>
|
||||
<li class="nav-divider"></li>
|
||||
<li class="nav-section">Administration</li>
|
||||
<li class="nav-item">
|
||||
<a href="/teams" class="nav-link <?= str_starts_with($_SERVER['REQUEST_URI'] ?? '', '/teams') ? 'active' : '' ?>">
|
||||
<i class="fas fa-users-cog"></i>
|
||||
<span>Teams</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/admin/users" class="nav-link <?= str_starts_with($_SERVER['REQUEST_URI'] ?? '', '/admin/users') ? 'active' : '' ?>">
|
||||
<i class="fas fa-users"></i>
|
||||
<span>Users</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/admin/audit" class="nav-link <?= str_starts_with($_SERVER['REQUEST_URI'] ?? '', '/admin/audit') ? 'active' : '' ?>">
|
||||
<i class="fas fa-history"></i>
|
||||
<span>Audit Logs</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/admin/security" class="nav-link <?= str_starts_with($_SERVER['REQUEST_URI'] ?? '', '/admin/security') ? 'active' : '' ?>">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
<span>Security</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/admin/app-version" class="nav-link <?= str_starts_with($_SERVER['REQUEST_URI'] ?? '', '/admin/app-version') ? 'active' : '' ?>">
|
||||
<i class="fas fa-mobile-alt"></i>
|
||||
<span>App Version</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/admin/notifications" class="nav-link <?= str_starts_with($_SERVER['REQUEST_URI'] ?? '', '/admin/notifications') ? 'active' : '' ?>">
|
||||
<i class="fas fa-bell"></i>
|
||||
<span>Notifications</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/admin/policies" class="nav-link <?= str_starts_with($_SERVER['REQUEST_URI'] ?? '', '/admin/policies') ? 'active' : '' ?>">
|
||||
<i class="fas fa-file-contract"></i>
|
||||
<span>Policies</span>
|
||||
</a>
|
||||
</li>
|
||||
<?php elseif (is_admin()): ?>
|
||||
<li class="nav-divider"></li>
|
||||
<li class="nav-section">Administration</li>
|
||||
<li class="nav-item">
|
||||
<a href="/teams" class="nav-link <?= str_starts_with($_SERVER['REQUEST_URI'] ?? '', '/teams') ? 'active' : '' ?>">
|
||||
<i class="fas fa-users-cog"></i>
|
||||
<span>Teams</span>
|
||||
</a>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
<li class="nav-divider"></li>
|
||||
<li class="nav-section">Mobile</li>
|
||||
<li class="nav-item">
|
||||
<a href="/sysadmin.apk" class="nav-link" download>
|
||||
<i class="fas fa-download"></i>
|
||||
<span>Download APK</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="user-info">
|
||||
<div class="user-avatar">
|
||||
<?= strtoupper(substr($_SESSION['username'] ?? '?', 0, 2)) ?>
|
||||
</div>
|
||||
<div class="user-details">
|
||||
<span class="user-name"><?= htmlspecialchars($_SESSION['username'] ?? 'Guest') ?></span>
|
||||
<span class="user-role"><?= htmlspecialchars(ucfirst(str_replace('_', ' ', $_SESSION['user_role'] ?? 'guest'))) ?></span>
|
||||
</div>
|
||||
<div class="user-menu">
|
||||
<a href="/profile" title="Profile"><i class="fas fa-user-cog"></i></a>
|
||||
<form method="POST" action="/logout" class="logout-form" style="display:inline">
|
||||
<input type="hidden" name="_csrf_token" value="<?= $this->csrfToken() ?>">
|
||||
<button type="submit" title="Logout" style="background:none;border:none;color:inherit;cursor:pointer;padding:0;font:inherit;line-height:1"><i class="fas fa-sign-out-alt"></i></button>
|
||||
</form>
|
||||
<!-- Dashboard -->
|
||||
<a href="/dashboard" class="nav-item <?= str_starts_with($currentRoute, '/dashboard') ? 'active' : '' ?>">
|
||||
<i class="fas fa-chart-pie"></i>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
|
||||
<!-- Servers -->
|
||||
<div class="nav-item-accordion <?= str_starts_with($currentRoute, '/servers') || str_starts_with($currentRoute, '/terminal') ? 'expanded' : '' ?>">
|
||||
<a href="#" class="nav-item nav-item-toggle <?= str_starts_with($currentRoute, '/servers') ? 'active' : '' ?>" onclick="toggleServerList(event)">
|
||||
<i class="fas fa-server"></i>
|
||||
<span>Servers</span>
|
||||
<i class="fas fa-chevron-right nav-chevron"></i>
|
||||
</a>
|
||||
<div class="nav-sublist" id="serverList" style="<?= str_starts_with($currentRoute, '/servers') || str_starts_with($currentRoute, '/terminal') ? '' : '' ?>">
|
||||
<a href="/servers" class="nav-sub-item"><i class="fas fa-list"></i> All Servers</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Teams -->
|
||||
<a href="/teams" class="nav-item <?= str_starts_with($currentRoute, '/teams') ? 'active' : '' ?>">
|
||||
<i class="fas fa-users"></i>
|
||||
<span>Teams</span>
|
||||
</a>
|
||||
|
||||
<!-- Activity Log (admin+) -->
|
||||
<?php if (is_admin() || is_super_admin()): ?>
|
||||
<a href="/admin/activity" class="nav-item <?= str_starts_with($currentRoute, '/admin/activity') ? 'active' : '' ?>">
|
||||
<i class="fas fa-history"></i>
|
||||
<span>Activity Log</span>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Admin panel (admin+) -->
|
||||
<?php if (is_admin() || is_super_admin()): ?>
|
||||
<a href="/admin" class="nav-item <?= str_starts_with($currentRoute, '/admin') ? 'active' : '' ?>">
|
||||
<i class="fas fa-cog"></i>
|
||||
<span>Administration</span>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<hr class="nav-divider">
|
||||
|
||||
<!-- Account -->
|
||||
<a href="/account" class="nav-item <?= str_starts_with($currentRoute, '/account') ? 'active' : '' ?>">
|
||||
<i class="fas fa-user"></i>
|
||||
<span>My Account</span>
|
||||
</a>
|
||||
|
||||
<a href="/logout" class="nav-item nav-item-danger">
|
||||
<i class="fas fa-sign-out-alt"></i>
|
||||
<span>Log out</span>
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<div class="mobile-overlay" id="mobileOverlay"></div>
|
||||
|
||||
<main class="main-content">
|
||||
<header class="top-bar">
|
||||
<div class="top-bar-left">
|
||||
<button class="mobile-toggle" id="mobileToggle">
|
||||
<!-- Main Content -->
|
||||
<div class="main-area">
|
||||
<!-- Topbar -->
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<button class="btn btn-icon" id="sidebarToggle" onclick="document.getElementById('sidebar').classList.toggle('collapsed')">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
<div class="breadcrumb">
|
||||
<?= htmlspecialchars($title ?? 'ServerManager') ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-bar-right">
|
||||
<div class="top-bar-actions">
|
||||
<button class="btn-icon" id="refreshBtn" title="Refresh">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
<div class="topbar-right">
|
||||
<div class="notification-btn-wrapper">
|
||||
<button class="btn btn-icon notification-btn" onclick="toggleNotifications()" title="Notifications">
|
||||
<i class="fas fa-bell"></i>
|
||||
<span class="notification-badge" id="notificationBadge" style="display:<?= $unreadCount > 0 ? 'inline-flex' : 'none' ?>">
|
||||
<?= $unreadCount > 99 ? '99+' : $unreadCount ?>
|
||||
</span>
|
||||
</button>
|
||||
<button class="btn-icon" id="themeToggle" title="Toggle theme">
|
||||
<i class="fas fa-moon"></i>
|
||||
</button>
|
||||
<div class="notification-btn-wrapper">
|
||||
<button class="btn-icon notification-btn" id="notificationBell" title="Notifications" onclick="toggleNotifications()">
|
||||
<i class="fas fa-bell"></i>
|
||||
<span class="notification-badge" id="notificationBadge" style="display:none">0</span>
|
||||
</button>
|
||||
<div class="notification-dropdown" id="notifDropdown">
|
||||
<div class="notif-dropdown-header">
|
||||
<span style="font-weight:600;font-size:0.9em">Notifications</span>
|
||||
<div style="display:flex;align-items:center;gap:6px">
|
||||
<button class="btn-text" id="markAllReadBtn" onclick="markAllRead()" style="display:none;font-size:0.78em;padding:2px 6px;border-radius:4px">
|
||||
<i class="fas fa-check-double"></i> Mark all read
|
||||
</button>
|
||||
<button class="btn-text" onclick="closeNotifications()" style="font-size:0.78em;padding:2px 6px;border-radius:4px">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notif-dropdown-body" id="notifList">
|
||||
<div style="padding:40px 20px;text-align:center;color:var(--text-muted)">
|
||||
<i class="fas fa-spinner fa-spin" style="font-size:1.5em;margin-bottom:10px;display:block"></i>
|
||||
<span>Loading notifications...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notif-dropdown-footer">
|
||||
<a href="/notifications" class="btn-text" style="font-size:0.82em;color:var(--info);width:100%;text-align:center;padding:8px;display:block">
|
||||
<i class="fas fa-external-link-alt"></i> View all notifications
|
||||
</a>
|
||||
<div class="notification-dropdown" id="notifDropdown">
|
||||
<div class="notif-header">
|
||||
<h3>Notifications</h3>
|
||||
<button class="btn btn-text btn-sm" id="markAllReadBtn" onclick="markAllRead()"
|
||||
style="display:<?= $unreadCount > 0 ? 'inline-flex' : 'none' ?>">
|
||||
<i class="fas fa-check-double"></i> Mark all read
|
||||
</button>
|
||||
</div>
|
||||
<div class="notif-list" id="notifList">
|
||||
<div style="padding:40px 20px;text-align:center;color:var(--text-muted)">
|
||||
<i class="fas fa-spinner fa-spin" style="font-size:1.5em;margin-bottom:10px;display:block"></i>
|
||||
<span>Loading notifications...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="topbar-user">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
<?= htmlspecialchars($user['username'] ?? 'Guest') ?>
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content-area">
|
||||
<?php if ($flash = \ServerManager\Core\Session::getAllFlashes()): ?>
|
||||
<?php foreach ($flash as $type => $messages): ?>
|
||||
<?php foreach ($messages as $message): ?>
|
||||
<div class="toast toast-<?= htmlspecialchars($type) ?>" data-autohide="true">
|
||||
<div class="toast-body">
|
||||
<i class="fas fa-<?= $type === 'success' ? 'check-circle' : ($type === 'error' ? 'times-circle' : 'info-circle') ?>"></i>
|
||||
<?= htmlspecialchars($message) ?>
|
||||
<!-- Page Content -->
|
||||
<main class="page-content">
|
||||
<div class="container">
|
||||
<?php if (isset($_SESSION['_flash'])): ?>
|
||||
<?php foreach ($_SESSION['_flash'] as $type => $messages): ?>
|
||||
<?php foreach ($messages as $msg): ?>
|
||||
<div class="alert alert-<?= $type === 'error' ? 'danger' : $type ?>">
|
||||
<i class="fas fa-<?= $type === 'success' ? 'check-circle' : ($type === 'error' ? 'exclamation-circle' : 'info-circle') ?>"></i>
|
||||
<?= htmlspecialchars($msg) ?>
|
||||
</div>
|
||||
<button class="toast-close">×</button>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php endforeach; ?>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
<?php unset($_SESSION['_flash']); ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?= $content ?? '' ?>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="toastContainer" class="toast-container"></div>
|
||||
@@ -221,211 +159,6 @@
|
||||
<script src="<?= htmlspecialchars($script) ?>"></script>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
<script>
|
||||
let serverListLoaded = false;
|
||||
|
||||
function getApiToken() {
|
||||
return document.querySelector('meta[name="api-token"]')?.getAttribute('content') || '';
|
||||
}
|
||||
|
||||
function toggleNotifications() {
|
||||
const dd = document.getElementById('notifDropdown');
|
||||
if (dd.classList.contains('open')) {
|
||||
closeNotifications();
|
||||
} else {
|
||||
openNotifications();
|
||||
}
|
||||
}
|
||||
|
||||
function openNotifications() {
|
||||
const dd = document.getElementById('notifDropdown');
|
||||
dd.classList.add('open');
|
||||
fetchNotifications();
|
||||
document.addEventListener('click', notifOutsideClick);
|
||||
}
|
||||
|
||||
function closeNotifications() {
|
||||
const dd = document.getElementById('notifDropdown');
|
||||
dd.classList.remove('open');
|
||||
document.removeEventListener('click', notifOutsideClick);
|
||||
}
|
||||
|
||||
function notifOutsideClick(e) {
|
||||
const wrapper = document.querySelector('.notification-btn-wrapper');
|
||||
if (!wrapper.contains(e.target)) {
|
||||
closeNotifications();
|
||||
}
|
||||
}
|
||||
|
||||
function fetchNotifications() {
|
||||
const list = document.getElementById('notifList');
|
||||
list.innerHTML = '<div style="padding:40px 20px;text-align:center;color:var(--text-muted)"><i class="fas fa-spinner fa-spin" style="font-size:1.5em;margin-bottom:10px;display:block"></i><span>Loading notifications...</span></div>';
|
||||
|
||||
const token = getApiToken();
|
||||
const headers = { 'Accept': 'application/json' };
|
||||
if (token) headers['Authorization'] = 'Bearer ' + token;
|
||||
|
||||
fetch('/api/notifications?per_page=10', { headers })
|
||||
.then(r => r.json())
|
||||
.then(d => {
|
||||
if (!d.success) {
|
||||
list.innerHTML = '<div style="padding:40px 20px;text-align:center;color:var(--text-muted)">Could not load notifications.</div>';
|
||||
return;
|
||||
}
|
||||
renderNotifications(d.data || [], d.unread_count || 0);
|
||||
})
|
||||
.catch(() => {
|
||||
list.innerHTML = '<div style="padding:40px 20px;text-align:center;color:var(--danger)">Failed to load notifications.</div>';
|
||||
});
|
||||
}
|
||||
|
||||
function renderNotifications(items, unreadCount) {
|
||||
const list = document.getElementById('notifList');
|
||||
|
||||
if (!items.length) {
|
||||
list.innerHTML = '<div style="padding:40px 20px;text-align:center;color:var(--text-muted)">'
|
||||
+ '<i class="fas fa-check-circle" style="font-size:1.8em;margin-bottom:10px;display:block;color:var(--success)"></i>'
|
||||
+ '<span>No notifications</span></div>';
|
||||
document.getElementById('markAllReadBtn').style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
let html = '';
|
||||
items.forEach(function(n) {
|
||||
const typeColors = { error: 'danger', warning: 'warning', info: 'info' };
|
||||
const typeColor = typeColors[n.type] || 'info';
|
||||
const icons = { error: 'fa-times-circle', warning: 'fa-exclamation-triangle', info: 'fa-info-circle' };
|
||||
const icon = icons[n.type] || 'fa-info-circle';
|
||||
|
||||
html += '<div class="notif-item ' + (n.is_read ? 'notif-read' : 'notif-unread') + '"'
|
||||
+ ' onclick="markRead(' + n.id + ', this)"'
|
||||
+ ' data-id="' + n.id + '">'
|
||||
+ '<div class="notif-icon notif-' + typeColor + '"><i class="fas ' + icon + '"></i></div>'
|
||||
+ '<div class="notif-content">'
|
||||
+ '<div class="notif-title">' + escapeHtml(n.title) + '</div>'
|
||||
+ '<div class="notif-message">' + escapeHtml(n.message) + '</div>'
|
||||
+ '<div class="notif-time">' + (n.time_ago || '') + '</div>'
|
||||
+ '</div>'
|
||||
+ (n.is_read ? '' : '<div class="notif-dot"></div>')
|
||||
+ '</div>';
|
||||
});
|
||||
list.innerHTML = html;
|
||||
|
||||
document.getElementById('markAllReadBtn').style.display = unreadCount > 0 ? 'inline-flex' : 'none';
|
||||
}
|
||||
|
||||
function markRead(id, el) {
|
||||
if (el.classList.contains('notif-read')) return;
|
||||
|
||||
const token = getApiToken();
|
||||
const headers = { 'Accept': 'application/json' };
|
||||
if (token) headers['Authorization'] = 'Bearer ' + token;
|
||||
|
||||
fetch('/api/notifications/' + id + '/read', { method: 'POST', headers })
|
||||
.then(r => r.json())
|
||||
.then(d => {
|
||||
if (d.success) {
|
||||
el.classList.remove('notif-unread');
|
||||
el.classList.add('notif-read');
|
||||
const dot = el.querySelector('.notif-dot');
|
||||
if (dot) dot.remove();
|
||||
updateUnreadCount();
|
||||
}
|
||||
})
|
||||
.catch(function(){});
|
||||
}
|
||||
|
||||
function markAllRead() {
|
||||
const token = getApiToken();
|
||||
const headers = { 'Accept': 'application/json' };
|
||||
if (token) headers['Authorization'] = 'Bearer ' + token;
|
||||
|
||||
fetch('/api/notifications/read-all', { method: 'POST', headers })
|
||||
.then(r => r.json())
|
||||
.then(d => {
|
||||
if (d.success) {
|
||||
document.querySelectorAll('.notif-item').forEach(function(el) {
|
||||
el.classList.remove('notif-unread');
|
||||
el.classList.add('notif-read');
|
||||
const dot = el.querySelector('.notif-dot');
|
||||
if (dot) dot.remove();
|
||||
});
|
||||
document.getElementById('markAllReadBtn').style.display = 'none';
|
||||
updateUnreadCount();
|
||||
}
|
||||
})
|
||||
.catch(function(){});
|
||||
}
|
||||
|
||||
function updateUnreadCount() {
|
||||
const token = getApiToken();
|
||||
const headers = { 'Accept': 'application/json' };
|
||||
if (token) headers['Authorization'] = 'Bearer ' + token;
|
||||
|
||||
fetch('/api/notifications/unread-count', { headers })
|
||||
.then(r => r.json())
|
||||
.then(d => {
|
||||
const count = d.unread_count || 0;
|
||||
const badge = document.getElementById('notificationBadge');
|
||||
if (count > 0) {
|
||||
badge.textContent = count > 99 ? '99+' : count;
|
||||
badge.style.display = 'inline-flex';
|
||||
} else {
|
||||
badge.style.display = 'none';
|
||||
}
|
||||
})
|
||||
.catch(function(){});
|
||||
}
|
||||
|
||||
function escapeHtml(str) {
|
||||
const d = document.createElement('div');
|
||||
d.textContent = str;
|
||||
return d.innerHTML;
|
||||
}
|
||||
|
||||
// Poll unread count every 60s
|
||||
setInterval(updateUnreadCount, 60000);
|
||||
// Initial fetch
|
||||
updateUnreadCount();
|
||||
|
||||
function toggleServerList(e) {
|
||||
e.preventDefault();
|
||||
const item = e.currentTarget.closest('.nav-item-accordion');
|
||||
const sub = document.getElementById('serverList');
|
||||
const chevron = item.querySelector('.nav-chevron');
|
||||
if (item.classList.contains('expanded')) {
|
||||
item.classList.remove('expanded');
|
||||
sub.style.maxHeight = '0';
|
||||
return;
|
||||
}
|
||||
item.classList.add('expanded');
|
||||
if (!serverListLoaded) {
|
||||
serverListLoaded = true;
|
||||
fetch('/sidebar/servers')
|
||||
.then(r => r.json())
|
||||
.then(d => {
|
||||
if (d.success && d.data) {
|
||||
let html = '<a href="/servers" class="nav-sub-item"><i class="fas fa-list"></i> All Servers</a>';
|
||||
d.data.forEach(s => {
|
||||
const status = s.current_status === 'online' ? 'success' : s.current_status === 'offline' ? 'danger' : 'muted';
|
||||
html += '<a href="/servers/' + s.id + '" class="nav-sub-item">'
|
||||
+ '<span class="status-dot-sm status-' + status + '"></span> '
|
||||
+ escapeHtml(s.name) + '</a>';
|
||||
});
|
||||
sub.innerHTML = html;
|
||||
} else {
|
||||
sub.innerHTML = '<div class="nav-sub-item" style="color:var(--text-muted)">No servers</div>';
|
||||
}
|
||||
sub.style.maxHeight = sub.scrollHeight + 'px';
|
||||
})
|
||||
.catch(() => {
|
||||
sub.innerHTML = '<div class="nav-sub-item" style="color:var(--danger)">Failed to load</div>';
|
||||
sub.style.maxHeight = sub.scrollHeight + 'px';
|
||||
});
|
||||
} else {
|
||||
sub.style.maxHeight = sub.scrollHeight + 'px';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="/assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user