423 lines
19 KiB
PHP
Executable File
423 lines
19 KiB
PHP
Executable File
<!DOCTYPE html>
|
|
<html lang="en" data-theme="dark">
|
|
<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">
|
|
<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">
|
|
<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>
|
|
<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>
|
|
<?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>
|
|
<a href="/logout" title="Logout"><i class="fas fa-sign-out-alt"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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">
|
|
<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>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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) ?>
|
|
</div>
|
|
<button class="toast-close">×</button>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
|
|
<?= $content ?? '' ?>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<div id="toastContainer" class="toast-container"></div>
|
|
|
|
<script src="/assets/js/app.js"></script>
|
|
<?php if (isset($scripts)): ?>
|
|
<?php foreach ($scripts as $script): ?>
|
|
<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> '
|
|
+ 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>
|
|
</body>
|
|
</html>
|