295 lines
11 KiB
JavaScript
295 lines
11 KiB
JavaScript
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();
|
|
const userMenu = document.getElementById('userMenu');
|
|
if (userMenu) userMenu.classList.remove('open');
|
|
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();
|
|
}
|
|
const userWrapper = document.querySelector('.topbar-user-dropdown');
|
|
if (userWrapper && !userWrapper.contains(e.target)) {
|
|
const userMenu = document.getElementById('userMenu');
|
|
if (userMenu) userMenu.classList.remove('open');
|
|
}
|
|
}
|
|
|
|
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, d.pagination?.total || 0);
|
|
})
|
|
.catch(() => {
|
|
list.innerHTML = '<div style="padding:40px 20px;text-align:center;color:var(--danger)">Failed to load notifications.</div>';
|
|
});
|
|
}
|
|
|
|
function renderNotifications(items, unreadCount, total) {
|
|
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>';
|
|
});
|
|
|
|
if (total > items.length) {
|
|
html += '<a href="/notifications" class="notif-view-all">'
|
|
+ 'View all notifications (' + total + ' total)'
|
|
+ '</a>';
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
setInterval(updateUnreadCount, 60000);
|
|
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';
|
|
}
|
|
}
|
|
|
|
function toggleUserMenu(e) {
|
|
e.stopPropagation();
|
|
const menu = document.getElementById('userMenu');
|
|
if (!menu) return;
|
|
const isOpen = menu.classList.contains('open');
|
|
document.querySelectorAll('.dropdown-menu.open').forEach(function(m) {
|
|
if (m !== menu) m.classList.remove('open');
|
|
});
|
|
if (!isOpen) {
|
|
menu.classList.add('open');
|
|
closeNotifications();
|
|
setTimeout(function() {
|
|
document.addEventListener('click', closeUserMenu);
|
|
}, 0);
|
|
} else {
|
|
menu.classList.remove('open');
|
|
}
|
|
}
|
|
|
|
function closeUserMenu(e) {
|
|
const menu = document.getElementById('userMenu');
|
|
if (!menu) return;
|
|
const wrapper = menu.closest('.topbar-user-dropdown');
|
|
if (wrapper && !wrapper.contains(e.target)) {
|
|
menu.classList.remove('open');
|
|
document.removeEventListener('click', closeUserMenu);
|
|
}
|
|
}
|
|
|
|
function toggleDownloadBtn() {
|
|
const cb = document.getElementById('agreeTerms');
|
|
document.getElementById('downloadConfirmBtn').disabled = !cb.checked;
|
|
}
|
|
|
|
function showDownloadModal() {
|
|
const cb = document.getElementById('agreeTerms');
|
|
cb.checked = false;
|
|
document.getElementById('downloadConfirmBtn').disabled = true;
|
|
document.getElementById('downloadModal').style.display = 'flex';
|
|
document.getElementById('downloadProgressWrap').style.display = 'none';
|
|
document.getElementById('downloadModalFooter').style.display = 'flex';
|
|
document.getElementById('downloadConfirmBtn').innerHTML = '<i class="fas fa-download"></i> Download APK';
|
|
document.getElementById('downloadProgressBar').style.width = '0%';
|
|
document.getElementById('downloadPercent').textContent = '0%';
|
|
}
|
|
|
|
function closeDownloadModal() {
|
|
document.getElementById('downloadModal').style.display = 'none';
|
|
}
|
|
|
|
function startDownload() {
|
|
const btn = document.getElementById('downloadConfirmBtn');
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Downloading...';
|
|
|
|
document.getElementById('downloadProgressWrap').style.display = 'block';
|
|
document.getElementById('downloadModalFooter').style.display = 'none';
|
|
|
|
const anchor = document.createElement('a');
|
|
anchor.href = '/sysadmin.apk';
|
|
anchor.download = 'sysadmin.apk';
|
|
document.body.appendChild(anchor);
|
|
anchor.click();
|
|
document.body.removeChild(anchor);
|
|
|
|
let pct = 0;
|
|
const interval = setInterval(function() {
|
|
pct += Math.floor(Math.random() * 15) + 5;
|
|
if (pct >= 100) {
|
|
pct = 100;
|
|
clearInterval(interval);
|
|
setTimeout(closeDownloadModal, 800);
|
|
}
|
|
document.getElementById('downloadProgressBar').style.width = pct + '%';
|
|
document.getElementById('downloadPercent').textContent = pct + '%';
|
|
}, 300);
|
|
}
|