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

feat: notification dropdown panel and /notifications page

Browse Source
This commit is contained in:
Agent
2026-06-13 16:48:05 -04:00
parent 25dfb517ee
commit e1b6650454
6 changed files with 450 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
views/layouts/main.php
View File

@@ -40,6 +40,12 @@
<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>
@@ -151,6 +157,28 @@
<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">&times;</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>
@@ -178,34 +206,6 @@
<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): ?>
@@ -220,8 +220,8 @@ function getApiToken() {
}
function toggleNotifications() {
const modal = document.getElementById('notificationModal');
if (modal.style.display === 'flex') {
const dd = document.getElementById('notifDropdown');
if (dd.classList.contains('open')) {
closeNotifications();
} else {
openNotifications();
@@ -229,16 +229,23 @@ function toggleNotifications() {
}
function openNotifications() {
const modal = document.getElementById('notificationModal');
modal.style.display = 'flex';
modal.onclick = function(e) {
if (e.target === this) closeNotifications();
};
const dd = document.getElementById('notifDropdown');
dd.classList.add('open');
fetchNotifications();
document.addEventListener('click', notifOutsideClick);
}
function closeNotifications() {
document.getElementById('notificationModal').style.display = 'none';
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() {
@@ -351,15 +358,11 @@ function updateUnreadCount() {
.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(){});