devlab/server-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: notification bell with modal showing 10 latest notifications

Browse Source
This commit is contained in:
Agent
2026-06-13 16:41:56 -04:00
parent e92f51e36b
commit 25dfb517ee
2 changed files with 355 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
views/layouts/main.php
View File

@@ -4,6 +4,17 @@
<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">
@@ -135,6 +146,12 @@
<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>
</div>
</div>
</header>
@@ -161,6 +178,34 @@
<div id="toastContainer" class="toast-container"></div>
<div id="notificationModal" class="modal">
<div class="modal-dialog" style="max-width:480px">
<div class="modal-header">
<h3 style="font-size:1em;display:flex;align-items:center;gap:8px">
<i class="fas fa-bell" style="color:var(--info)"></i> Notifications
<span id="notifCountBadge" class="badge" style="display:none;font-size:0.75em">0</span>
</h3>
<div style="display:flex;align-items:center;gap:8px">
<button class="btn btn-sm btn-text" id="markAllReadBtn" onclick="markAllRead()" style="display:none;font-size:0.82em">
<i class="fas fa-check-double"></i> Mark all read
</button>
<button type="button" class="modal-close" onclick="closeNotifications()">&times;</button>
</div>
</div>
<div class="modal-body" style="padding:0;max-height:420px;overflow-y:auto" 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="modal-footer" style="justify-content:center;padding:0.7rem">
<a href="/admin/notifications" class="btn btn-sm btn-text" style="font-size:0.85em;color:var(--info)">
<i class="fas fa-external-link-alt"></i> View all in admin panel
</a>
</div>
</div>
</div>
<script src="/assets/js/app.js"></script>
<?php if (isset($scripts)): ?>
<?php foreach ($scripts as $script): ?>
@@ -169,6 +214,180 @@
<?php endif; ?>
<script>
let serverListLoaded = false;
function getApiToken() {
return document.querySelector('meta[name="api-token"]')?.getAttribute('content') || '';
}
function toggleNotifications() {
const modal = document.getElementById('notificationModal');
if (modal.style.display === 'flex') {
closeNotifications();
} else {
openNotifications();
}
}
function openNotifications() {
const modal = document.getElementById('notificationModal');
modal.style.display = 'flex';
modal.onclick = function(e) {
if (e.target === this) closeNotifications();
};
fetchNotifications();
}
function closeNotifications() {
document.getElementById('notificationModal').style.display = 'none';
}
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">' + timeAgo(n.created_at) + '</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');
const notifCount = document.getElementById('notifCountBadge');
if (count > 0) {
badge.textContent = count > 99 ? '99+' : count;
badge.style.display = 'inline-flex';
notifCount.textContent = count;
notifCount.style.display = 'inline-flex';
} else {
badge.style.display = 'none';
notifCount.style.display = 'none';
}
})
.catch(function(){});
}
function escapeHtml(str) {
const d = document.createElement('div');
d.textContent = str;
return d.innerHTML;
}
function timeAgo(dateStr) {
const now = new Date();
const d = new Date(dateStr.replace(' ', 'T') + (dateStr.includes('Z') ? '' : 'Z'));
const diff = Math.floor((now - d) / 1000);
if (diff < 60) return 'just now';
if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
const days = Math.floor(diff / 86400);
if (days < 7) return days + 'd ago';
return d.toLocaleDateString();
}
// Poll unread count every 60s
setInterval(updateUnreadCount, 60000);
// Initial fetch
updateUnreadCount();
function toggleServerList(e) {
e.preventDefault();
const item = e.currentTarget.closest('.nav-item-accordion');