mirror of
https://github.com/NNTmux/newznab-tmux.git
synced 2026-08-28 17:01:16 +00:00
DariusIII
4366 lines
162 KiB
JavaScript
4366 lines
162 KiB
JavaScript
// CSP-Safe JavaScript - All inline event handlers moved here
|
||
// This file handles all onclick, onchange, and other inline event handlers
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
initEventDelegation();
|
||
initToastNotifications();
|
||
initNfoModal();
|
||
initConfirmDialogs();
|
||
initSelectRedirects();
|
||
initLogoutForms();
|
||
initSeasonSwitcher();
|
||
initBinaryBlacklist();
|
||
initImageModal();
|
||
initTabSwitcher();
|
||
initPreviewModal();
|
||
initRegexManagement();
|
||
initMediainfoAndFilelist();
|
||
initCartFunctionality();
|
||
initAdminMenu();
|
||
initSidebarToggle();
|
||
initDropdownMenus();
|
||
initImageFallbacks();
|
||
initProfileTabs();
|
||
initAdminUserEdit();
|
||
initMobileEnhancements();
|
||
initAdminDashboardCharts();
|
||
initAdminGroups();
|
||
initTinyMCE();
|
||
initAdminSpecificFeatures();
|
||
|
||
// Initialize page-specific functionality from inline scripts
|
||
initMyMovies();
|
||
initAuthPages();
|
||
initProfileEdit();
|
||
initDetailsPageImageModal();
|
||
initAddToCart();
|
||
initMoviesLayoutToggle();
|
||
});
|
||
|
||
// Event delegation for dynamically added elements
|
||
function initEventDelegation() {
|
||
document.addEventListener('click', function(e) {
|
||
// Handle toast close buttons
|
||
if (e.target.classList.contains('toast-close') || e.target.closest('.toast-close')) {
|
||
const toast = e.target.closest('.toast-notification');
|
||
if (toast) {
|
||
toast.remove();
|
||
}
|
||
}
|
||
|
||
// Handle NFO modal close
|
||
if (e.target.hasAttribute('data-close-nfo-modal') || e.target.closest('[data-close-nfo-modal]')) {
|
||
e.preventDefault();
|
||
closeNfoModal();
|
||
}
|
||
|
||
// Handle NFO modal open
|
||
if (e.target.hasAttribute('data-open-nfo') || e.target.closest('[data-open-nfo]')) {
|
||
e.preventDefault();
|
||
const guid = e.target.getAttribute('data-open-nfo') || e.target.closest('[data-open-nfo]').getAttribute('data-open-nfo');
|
||
if (guid) {
|
||
openNfoModal(guid);
|
||
}
|
||
}
|
||
|
||
// Handle logout
|
||
if (e.target.hasAttribute('data-logout') || e.target.closest('[data-logout]')) {
|
||
e.preventDefault();
|
||
const logoutForm = document.getElementById('logout-form');
|
||
if (logoutForm) {
|
||
logoutForm.submit();
|
||
}
|
||
}
|
||
|
||
// Handle confirm delete
|
||
if (e.target.hasAttribute('data-confirm-delete') || e.target.closest('[data-confirm-delete]')) {
|
||
const confirmed = confirm('Are you sure you want to delete this item?');
|
||
if (!confirmed) {
|
||
e.preventDefault();
|
||
}
|
||
}
|
||
|
||
// Handle confirm action
|
||
if (e.target.hasAttribute('data-confirm') || e.target.closest('[data-confirm]')) {
|
||
const message = e.target.getAttribute('data-confirm') || e.target.closest('[data-confirm]').getAttribute('data-confirm');
|
||
const confirmed = confirm(message);
|
||
if (!confirmed) {
|
||
e.preventDefault();
|
||
}
|
||
}
|
||
|
||
// Handle download NZB buttons
|
||
if (e.target.classList.contains('download-nzb') || e.target.closest('.download-nzb')) {
|
||
if (typeof showToast === 'function') {
|
||
showToast('Downloading NZB...', 'success');
|
||
}
|
||
}
|
||
|
||
// Handle season switcher
|
||
if (e.target.hasAttribute('data-season') || e.target.closest('[data-season]')) {
|
||
e.preventDefault();
|
||
const seasonNumber = e.target.getAttribute('data-season') || e.target.closest('[data-season]').getAttribute('data-season');
|
||
switchSeason(seasonNumber);
|
||
}
|
||
|
||
// Handle binary blacklist delete
|
||
if (e.target.hasAttribute('data-delete-blacklist') || e.target.closest('[data-delete-blacklist]')) {
|
||
const id = e.target.getAttribute('data-delete-blacklist') || e.target.closest('[data-delete-blacklist]').getAttribute('data-delete-blacklist');
|
||
const confirmed = confirm('Are you sure? This will delete the blacklist from this list.');
|
||
if (confirmed && typeof ajax_binaryblacklist_delete === 'function') {
|
||
ajax_binaryblacklist_delete(id);
|
||
}
|
||
e.preventDefault();
|
||
}
|
||
|
||
// Handle admin groups management actions
|
||
const actionTarget = e.target.closest('[data-action]');
|
||
if (actionTarget) {
|
||
const action = actionTarget.dataset.action;
|
||
const groupId = actionTarget.dataset.groupId;
|
||
const status = actionTarget.dataset.status;
|
||
|
||
switch(action) {
|
||
case 'show-reset-modal':
|
||
showResetAllModal();
|
||
break;
|
||
case 'hide-reset-modal':
|
||
hideResetAllModal();
|
||
break;
|
||
case 'show-purge-modal':
|
||
showPurgeAllModal();
|
||
break;
|
||
case 'hide-purge-modal':
|
||
hidePurgeAllModal();
|
||
break;
|
||
case 'toggle-group-status':
|
||
ajax_group_status(groupId, status);
|
||
break;
|
||
case 'toggle-backfill':
|
||
ajax_backfill_status(groupId, status);
|
||
break;
|
||
case 'reset-group':
|
||
ajax_group_reset(groupId);
|
||
break;
|
||
case 'delete-group':
|
||
confirmGroupDelete(groupId);
|
||
break;
|
||
case 'purge-group':
|
||
confirmGroupPurge(groupId);
|
||
break;
|
||
case 'reset-all':
|
||
ajax_group_reset_all();
|
||
break;
|
||
case 'purge-all':
|
||
ajax_group_purge_all();
|
||
break;
|
||
}
|
||
}
|
||
});
|
||
|
||
// Handle select redirects
|
||
document.addEventListener('change', function(e) {
|
||
if (e.target.hasAttribute('data-redirect-on-change')) {
|
||
const url = e.target.value;
|
||
if (url && url !== '#') {
|
||
window.location.href = url;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Toast Notifications
|
||
function initToastNotifications() {
|
||
// showToast is defined globally for backward compatibility
|
||
window.showToast = function(message, type) {
|
||
type = type || 'success';
|
||
|
||
let container = document.getElementById('toast-container');
|
||
if (!container) {
|
||
// Create container if it doesn't exist
|
||
container = document.createElement('div');
|
||
container.id = 'toast-container';
|
||
container.className = 'fixed top-4 right-4 z-50';
|
||
document.body.appendChild(container);
|
||
}
|
||
|
||
const toast = document.createElement('div');
|
||
toast.className = 'toast-notification ' + type;
|
||
|
||
const iconClass = type === 'success' ? 'fa-check-circle' :
|
||
type === 'error' ? 'fa-exclamation-circle' :
|
||
'fa-info-circle';
|
||
|
||
toast.innerHTML =
|
||
'<span class="toast-icon"><i class="fas ' + iconClass + '"></i></span>' +
|
||
'<span class="toast-message">' + escapeHtml(message) + '</span>' +
|
||
'<button class="toast-close" type="button" aria-label="Close">×</button>';
|
||
|
||
container.appendChild(toast);
|
||
|
||
// Auto-remove after 5 seconds
|
||
setTimeout(function() {
|
||
toast.classList.add('removing');
|
||
setTimeout(function() {
|
||
toast.remove();
|
||
}, 300);
|
||
}, 5000);
|
||
};
|
||
}
|
||
|
||
// NFO Modal
|
||
function initNfoModal() {
|
||
window.openNfoModal = function(guid) {
|
||
const modal = document.getElementById('nfoModal');
|
||
const content = document.getElementById('nfoContent');
|
||
|
||
if (!modal || !content) return;
|
||
|
||
// Show modal
|
||
modal.classList.remove('hidden');
|
||
|
||
// Reset content with loading message
|
||
content.innerHTML = '<div class="flex items-center justify-center py-8"><i class="fas fa-spinner fa-spin text-2xl mr-2"></i><span>Loading NFO...</span></div>';
|
||
|
||
// Fetch NFO content
|
||
const baseUrl = document.querySelector('meta[name="app-url"]')?.content || '';
|
||
fetch(baseUrl + '/nfo/' + guid + '?modal=1')
|
||
.then(response => {
|
||
if (!response.ok) {
|
||
throw new Error('NFO not found');
|
||
}
|
||
return response.text();
|
||
})
|
||
.then(html => {
|
||
// Extract the NFO content from the response
|
||
const parser = new DOMParser();
|
||
const doc = parser.parseFromString(html, 'text/html');
|
||
const nfoText = doc.querySelector('pre')?.textContent || doc.body.textContent;
|
||
content.textContent = nfoText;
|
||
})
|
||
.catch(error => {
|
||
content.innerHTML = '<div class="text-center py-8 text-red-400"><i class="fas fa-exclamation-triangle text-2xl mr-2"></i><span>Error loading NFO file</span></div>';
|
||
console.error('Error loading NFO:', error);
|
||
});
|
||
};
|
||
|
||
window.closeNfoModal = function() {
|
||
const modal = document.getElementById('nfoModal');
|
||
if (modal) {
|
||
modal.classList.add('hidden');
|
||
}
|
||
};
|
||
|
||
// Close modal on Escape key
|
||
document.addEventListener('keydown', function(event) {
|
||
if (event.key === 'Escape') {
|
||
const modal = document.getElementById('nfoModal');
|
||
if (modal && !modal.classList.contains('hidden')) {
|
||
closeNfoModal();
|
||
}
|
||
}
|
||
});
|
||
|
||
// Add click handlers for NFO badges
|
||
document.addEventListener('click', function(event) {
|
||
if (event.target.closest('.nfo-badge')) {
|
||
event.preventDefault();
|
||
const badge = event.target.closest('.nfo-badge');
|
||
const guid = badge.getAttribute('data-guid');
|
||
if (guid) {
|
||
openNfoModal(guid);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Confirm dialogs
|
||
function initConfirmDialogs() {
|
||
window.confirmDelete = function(id) {
|
||
if (confirm('Are you sure you want to delete this item?')) {
|
||
// If there's a form with this ID, submit it
|
||
const form = document.getElementById('delete-form-' + id);
|
||
if (form) {
|
||
form.submit();
|
||
}
|
||
return true;
|
||
}
|
||
return false;
|
||
};
|
||
}
|
||
|
||
// Select redirects
|
||
function initSelectRedirects() {
|
||
// Already handled in event delegation
|
||
}
|
||
|
||
// Logout forms
|
||
function initLogoutForms() {
|
||
// Already handled in event delegation
|
||
}
|
||
|
||
// Season switcher for series
|
||
function initSeasonSwitcher() {
|
||
window.switchSeason = function(seasonNumber) {
|
||
// Hide all season containers
|
||
document.querySelectorAll('[data-season-container]').forEach(function(container) {
|
||
container.style.display = 'none';
|
||
});
|
||
|
||
// Show selected season
|
||
const selectedSeason = document.querySelector('[data-season-container="' + seasonNumber + '"]');
|
||
if (selectedSeason) {
|
||
selectedSeason.style.display = 'block';
|
||
}
|
||
|
||
// Update button states
|
||
document.querySelectorAll('[data-season]').forEach(function(btn) {
|
||
btn.classList.remove('active', 'bg-blue-600', 'text-white');
|
||
btn.classList.add('bg-gray-200', 'text-gray-700');
|
||
});
|
||
|
||
const activeBtn = document.querySelector('[data-season="' + seasonNumber + '"]');
|
||
if (activeBtn) {
|
||
activeBtn.classList.remove('bg-gray-200', 'text-gray-700');
|
||
activeBtn.classList.add('active', 'bg-blue-600', 'text-white');
|
||
}
|
||
};
|
||
}
|
||
|
||
// Binary blacklist
|
||
function initBinaryBlacklist() {
|
||
// Placeholder - actual implementation depends on existing ajax function
|
||
window.ajax_binaryblacklist_delete = window.ajax_binaryblacklist_delete || function(id) {
|
||
console.log('Delete blacklist:', id);
|
||
};
|
||
}
|
||
|
||
// Image modal
|
||
function initImageModal() {
|
||
// Handle image modal if needed
|
||
document.querySelectorAll('[data-open-image-modal]').forEach(function(element) {
|
||
element.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
const imageUrl = this.getAttribute('data-open-image-modal');
|
||
openImageModal(imageUrl);
|
||
});
|
||
});
|
||
|
||
window.openImageModal = function(imageUrl) {
|
||
const modal = document.getElementById('imageModal');
|
||
if (modal) {
|
||
const img = modal.querySelector('img');
|
||
if (img) {
|
||
img.src = imageUrl;
|
||
}
|
||
modal.classList.remove('hidden');
|
||
modal.classList.add('flex');
|
||
}
|
||
};
|
||
|
||
window.closeImageModal = function() {
|
||
const modal = document.getElementById('imageModal');
|
||
if (modal) {
|
||
modal.classList.add('hidden');
|
||
modal.classList.remove('flex');
|
||
}
|
||
};
|
||
}
|
||
|
||
// Tab switcher for profile and other pages
|
||
function initTabSwitcher() {
|
||
document.querySelectorAll('[data-tab-trigger]').forEach(function(trigger) {
|
||
trigger.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
const tabId = this.getAttribute('data-tab-trigger');
|
||
|
||
// Hide all tabs
|
||
document.querySelectorAll('.tab-content').forEach(function(tab) {
|
||
tab.style.display = 'none';
|
||
});
|
||
|
||
// Show selected tab
|
||
const selectedTab = document.getElementById(tabId);
|
||
if (selectedTab) {
|
||
selectedTab.style.display = 'block';
|
||
}
|
||
|
||
// Update active state
|
||
document.querySelectorAll('[data-tab-trigger]').forEach(function(t) {
|
||
t.classList.remove('active', 'border-blue-500', 'text-blue-600');
|
||
t.classList.add('border-transparent', 'text-gray-500');
|
||
});
|
||
|
||
this.classList.remove('border-transparent', 'text-gray-500');
|
||
this.classList.add('active', 'border-blue-500', 'text-blue-600');
|
||
});
|
||
});
|
||
}
|
||
|
||
// Preview Modal for Browse Page
|
||
function initPreviewModal() {
|
||
window.closePreviewModal = function() {
|
||
const modal = document.getElementById('previewModal');
|
||
if (modal) {
|
||
modal.style.display = 'none';
|
||
modal.classList.add('hidden');
|
||
const img = document.getElementById('previewImage');
|
||
if (img) img.src = '';
|
||
}
|
||
};
|
||
|
||
window.showPreviewImage = function(guid, type = 'preview') {
|
||
const modal = document.getElementById('previewModal');
|
||
const img = document.getElementById('previewImage');
|
||
const error = document.getElementById('previewError');
|
||
const title = document.getElementById('previewTitle');
|
||
|
||
if (!modal || !img || !error || !title) return;
|
||
|
||
modal.style.display = 'flex';
|
||
modal.classList.remove('hidden');
|
||
title.textContent = type === 'sample' ? 'Sample Image' : 'Preview Image';
|
||
|
||
const imageUrl = '/covers/' + type + '/' + guid + '_thumb.jpg';
|
||
img.src = imageUrl;
|
||
error.classList.add('hidden');
|
||
img.style.display = 'block';
|
||
|
||
img.onerror = function() {
|
||
error.textContent = (type === 'sample' ? 'Sample' : 'Preview') + ' image not available';
|
||
error.classList.remove('hidden');
|
||
img.style.display = 'none';
|
||
};
|
||
|
||
img.onload = function() {
|
||
img.style.display = 'block';
|
||
};
|
||
};
|
||
|
||
// Event listeners for preview badges
|
||
document.querySelectorAll('.preview-badge').forEach(function(badge) {
|
||
badge.addEventListener('click', function() {
|
||
const guid = this.getAttribute('data-guid');
|
||
if (guid) {
|
||
window.showPreviewImage(guid, 'preview');
|
||
}
|
||
});
|
||
});
|
||
|
||
// Event listeners for sample badges
|
||
document.querySelectorAll('.sample-badge').forEach(function(badge) {
|
||
badge.addEventListener('click', function() {
|
||
const guid = this.getAttribute('data-guid');
|
||
if (guid) {
|
||
window.showPreviewImage(guid, 'sample');
|
||
}
|
||
});
|
||
});
|
||
|
||
// Event listeners for NFO badges
|
||
document.querySelectorAll('.nfo-badge').forEach(function(badge) {
|
||
badge.addEventListener('click', function() {
|
||
const guid = this.getAttribute('data-guid');
|
||
if (guid) {
|
||
fetch('/getnfo/' + guid)
|
||
.then(response => response.text())
|
||
.then(data => {
|
||
const nfoContent = document.getElementById('nfo-content');
|
||
if (nfoContent) {
|
||
nfoContent.textContent = data;
|
||
const nfoModal = document.getElementById('nfo-modal');
|
||
if (nfoModal) {
|
||
nfoModal.classList.remove('hidden');
|
||
nfoModal.classList.add('flex');
|
||
}
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error fetching NFO:', error);
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// Close preview modal on background click
|
||
const previewModal = document.getElementById('previewModal');
|
||
if (previewModal) {
|
||
previewModal.addEventListener('click', function(e) {
|
||
if (e.target === this) {
|
||
window.closePreviewModal();
|
||
}
|
||
});
|
||
|
||
// Event listener for close button (using onclick attribute)
|
||
const closeButton = previewModal.querySelector('button[onclick*="closePreviewModal"]');
|
||
if (closeButton) {
|
||
closeButton.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
window.closePreviewModal();
|
||
});
|
||
}
|
||
|
||
// Also handle any data-close-preview buttons
|
||
const dataCloseButton = previewModal.querySelector('[data-close-preview]');
|
||
if (dataCloseButton) {
|
||
dataCloseButton.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
window.closePreviewModal();
|
||
});
|
||
}
|
||
}
|
||
|
||
// Close modal on Escape key
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape') {
|
||
window.closePreviewModal();
|
||
}
|
||
});
|
||
}
|
||
|
||
// Regex Management Functions
|
||
function initRegexManagement() {
|
||
window.deleteRegex = function(id, deleteUrl) {
|
||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
|
||
|
||
fetch(deleteUrl + '?id=' + id, {
|
||
method: 'GET',
|
||
headers: {
|
||
'X-Requested-With': 'XMLHttpRequest',
|
||
'X-CSRF-TOKEN': csrfToken
|
||
}
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
const row = document.getElementById('row-' + id);
|
||
if (row) {
|
||
row.style.transition = 'opacity 0.3s';
|
||
row.style.opacity = '0';
|
||
setTimeout(() => row.remove(), 300);
|
||
}
|
||
showMessage('Regex deleted successfully', 'success');
|
||
} else {
|
||
showMessage('Error deleting regex', 'error');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
showMessage('Error deleting regex', 'error');
|
||
console.error('Error:', error);
|
||
});
|
||
};
|
||
|
||
window.showMessage = function(message, type = 'success') {
|
||
const messageDiv = document.getElementById('message');
|
||
if (!messageDiv) return;
|
||
|
||
const bgColor = type === 'success' ? 'bg-green-50 dark:bg-green-900 border-green-200 dark:border-green-700' : 'bg-red-50 dark:bg-red-900 border-red-200 dark:border-red-700';
|
||
const textColor = type === 'success' ? 'text-green-800 dark:text-green-200' : 'text-red-800 dark:text-red-200';
|
||
const icon = type === 'success' ? 'check-circle' : 'exclamation-circle';
|
||
|
||
const messageEl = document.createElement('div');
|
||
messageEl.className = 'mt-4 p-4 border rounded-lg ' + bgColor;
|
||
messageEl.innerHTML = `
|
||
<div class="flex items-center justify-between">
|
||
<p class="${textColor}">
|
||
<i class="fa fa-${icon} mr-2"></i>${escapeHtml(message)}
|
||
</p>
|
||
<button type="button" class="${textColor} hover:opacity-75 close-message">
|
||
<i class="fa fa-times"></i>
|
||
</button>
|
||
</div>
|
||
`;
|
||
|
||
messageDiv.appendChild(messageEl);
|
||
|
||
// Add close handler
|
||
messageEl.querySelector('.close-message').addEventListener('click', function() {
|
||
messageEl.remove();
|
||
});
|
||
|
||
// Auto-remove after 5 seconds
|
||
setTimeout(() => {
|
||
messageEl.remove();
|
||
}, 5000);
|
||
};
|
||
|
||
// Handle delete buttons with proper confirmation
|
||
document.addEventListener('click', function(e) {
|
||
if (e.target.hasAttribute('data-delete-regex') || e.target.closest('[data-delete-regex]')) {
|
||
const element = e.target.hasAttribute('data-delete-regex') ? e.target : e.target.closest('[data-delete-regex]');
|
||
const id = element.getAttribute('data-delete-regex');
|
||
const deleteUrl = element.getAttribute('data-delete-url');
|
||
|
||
if (confirm('Are you sure you want to delete this regex? This action cannot be undone.')) {
|
||
deleteRegex(id, deleteUrl);
|
||
}
|
||
e.preventDefault();
|
||
}
|
||
});
|
||
}
|
||
|
||
// Mediainfo and Filelist Modals
|
||
function initMediainfoAndFilelist() {
|
||
window.closeMediainfoModal = function() {
|
||
const modal = document.getElementById('mediainfoModal');
|
||
if (modal) {
|
||
modal.style.display = 'none';
|
||
}
|
||
};
|
||
|
||
window.closeFilelistModal = function() {
|
||
const modal = document.getElementById('filelistModal');
|
||
if (modal) {
|
||
modal.style.display = 'none';
|
||
}
|
||
};
|
||
|
||
window.formatFileSize = function(bytes) {
|
||
if (bytes === 0) return '0 Bytes';
|
||
const k = 1024;
|
||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||
return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
|
||
};
|
||
|
||
window.showFilelist = function(guid) {
|
||
let modal = document.getElementById('filelistModal');
|
||
if (modal && modal.parentElement !== document.body) {
|
||
document.body.appendChild(modal);
|
||
}
|
||
|
||
const content = document.getElementById('filelistContent');
|
||
modal.style.display = 'flex';
|
||
modal.style.position = 'fixed';
|
||
modal.style.top = '0';
|
||
modal.style.left = '0';
|
||
modal.style.right = '0';
|
||
modal.style.bottom = '0';
|
||
modal.style.zIndex = '99999';
|
||
modal.style.backgroundColor = 'rgba(0, 0, 0, 0.75)';
|
||
|
||
content.innerHTML = `
|
||
<div class="text-center py-8">
|
||
<i class="fas fa-spinner fa-spin text-3xl text-green-600"></i>
|
||
<p class="text-gray-600 dark:text-gray-400 mt-2">Loading file list...</p>
|
||
</div>
|
||
`;
|
||
|
||
const apiUrl = '/api/release/' + guid + '/filelist';
|
||
|
||
fetch(apiUrl)
|
||
.then(response => {
|
||
if (!response.ok) {
|
||
throw new Error('Failed to load file list');
|
||
}
|
||
return response.json();
|
||
})
|
||
.then(data => {
|
||
if (!data.files || data.files.length === 0) {
|
||
content.innerHTML = '<p class="text-center text-gray-500 dark:text-gray-400 py-8">No files available</p>';
|
||
return;
|
||
}
|
||
|
||
let html = '<div class="space-y-4">';
|
||
html += `
|
||
<div class="bg-gradient-to-r from-green-50 to-teal-50 dark:from-green-900 dark:to-teal-900 rounded-lg p-4 mb-4">
|
||
<h4 class="text-md font-semibold text-gray-800 dark:text-gray-200 mb-2">${escapeHtml(data.release.searchname)}</h4>
|
||
<p class="text-sm text-gray-600 dark:text-gray-400">Total Files: ${data.total}</p>
|
||
</div>
|
||
`;
|
||
|
||
html += `
|
||
<div class="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
|
||
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||
<thead class="bg-gray-100 dark:bg-gray-800">
|
||
<tr>
|
||
<th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">File Name</th>
|
||
<th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Size</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
||
`;
|
||
|
||
data.files.forEach((file, index) => {
|
||
const rowClass = index % 2 === 0 ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-900';
|
||
const fileName = file.title || file.name || 'Unknown';
|
||
const fileSize = file.size ? formatFileSize(file.size) : 'N/A';
|
||
|
||
html += `
|
||
<tr class="${rowClass} hover:bg-gray-100 dark:hover:bg-gray-700">
|
||
<td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100 break-all">${escapeHtml(fileName)}</td>
|
||
<td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap">${fileSize}</td>
|
||
</tr>
|
||
`;
|
||
});
|
||
|
||
html += `
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
`;
|
||
|
||
html += '</div>';
|
||
content.innerHTML = html;
|
||
})
|
||
.catch(error => {
|
||
content.innerHTML = `
|
||
<div class="text-center py-8">
|
||
<i class="fas fa-exclamation-circle text-3xl text-red-600"></i>
|
||
<p class="text-red-600 mt-2">${escapeHtml(error.message)}</p>
|
||
</div>
|
||
`;
|
||
});
|
||
};
|
||
|
||
window.showMediainfo = function(releaseId) {
|
||
let modal = document.getElementById('mediainfoModal');
|
||
|
||
if (modal && modal.parentElement !== document.body) {
|
||
document.body.appendChild(modal);
|
||
}
|
||
|
||
const content = document.getElementById('mediainfoContent');
|
||
|
||
modal.style.display = 'flex';
|
||
modal.style.position = 'fixed';
|
||
modal.style.top = '0';
|
||
modal.style.left = '0';
|
||
modal.style.right = '0';
|
||
modal.style.bottom = '0';
|
||
modal.style.zIndex = '99999';
|
||
modal.style.backgroundColor = 'rgba(0, 0, 0, 0.75)';
|
||
|
||
content.innerHTML = `
|
||
<div class="text-center py-8">
|
||
<i class="fas fa-spinner fa-spin text-3xl text-blue-600"></i>
|
||
<p class="text-gray-600 dark:text-gray-400 mt-2">Loading media information...</p>
|
||
</div>
|
||
`;
|
||
|
||
const apiUrl = '/api/release/' + releaseId + '/mediainfo';
|
||
|
||
fetch(apiUrl)
|
||
.then(response => {
|
||
if (!response.ok) {
|
||
throw new Error('Failed to load media information');
|
||
}
|
||
return response.json();
|
||
})
|
||
.then(data => {
|
||
if (!data.video && !data.audio && !data.subs) {
|
||
content.innerHTML = '<p class="text-center text-gray-500 dark:text-gray-400 py-8">No media information available</p>';
|
||
return;
|
||
}
|
||
|
||
let html = '<div class="space-y-6">';
|
||
|
||
// Video information
|
||
if (data.video) {
|
||
html += `
|
||
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900 dark:to-indigo-900 rounded-lg p-4">
|
||
<h4 class="text-md font-semibold text-gray-800 dark:text-gray-200 mb-3 flex items-center">
|
||
<i class="fas fa-video mr-2 text-blue-600 dark:text-blue-400"></i> Video Information
|
||
</h4>
|
||
<dl class="grid grid-cols-2 gap-3">
|
||
`;
|
||
|
||
if (data.video.containerformat) {
|
||
html += `
|
||
<div>
|
||
<dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Container</dt>
|
||
<dd class="text-sm text-gray-900 dark:text-gray-100">${escapeHtml(data.video.containerformat)}</dd>
|
||
</div>
|
||
`;
|
||
}
|
||
if (data.video.videocodec) {
|
||
html += `
|
||
<div>
|
||
<dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Codec</dt>
|
||
<dd class="text-sm text-gray-900 dark:text-gray-100">${escapeHtml(data.video.videocodec)}</dd>
|
||
</div>
|
||
`;
|
||
}
|
||
if (data.video.videowidth && data.video.videoheight) {
|
||
html += `
|
||
<div>
|
||
<dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Resolution</dt>
|
||
<dd class="text-sm text-gray-900 dark:text-gray-100">${data.video.videowidth}x${data.video.videoheight}</dd>
|
||
</div>
|
||
`;
|
||
}
|
||
if (data.video.videoaspect) {
|
||
html += `
|
||
<div>
|
||
<dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Aspect Ratio</dt>
|
||
<dd class="text-sm text-gray-900 dark:text-gray-100">${escapeHtml(data.video.videoaspect)}</dd>
|
||
</div>
|
||
`;
|
||
}
|
||
if (data.video.videoframerate) {
|
||
html += `
|
||
<div>
|
||
<dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Frame Rate</dt>
|
||
<dd class="text-sm text-gray-900 dark:text-gray-100">${escapeHtml(data.video.videoframerate)} fps</dd>
|
||
</div>
|
||
`;
|
||
}
|
||
if (data.video.videoduration) {
|
||
const durationMs = parseInt(data.video.videoduration);
|
||
if (!isNaN(durationMs) && durationMs > 0) {
|
||
const minutes = Math.round(durationMs / 1000 / 60);
|
||
html += `
|
||
<div>
|
||
<dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Duration</dt>
|
||
<dd class="text-sm text-gray-900 dark:text-gray-100">${minutes} minutes</dd>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
|
||
html += '</dl></div>';
|
||
}
|
||
|
||
// Audio information
|
||
if (data.audio && data.audio.length > 0) {
|
||
html += `
|
||
<div class="bg-gradient-to-r from-green-50 to-teal-50 dark:from-green-900 dark:to-teal-900 rounded-lg p-4">
|
||
<h4 class="text-md font-semibold text-gray-800 dark:text-gray-200 mb-3 flex items-center">
|
||
<i class="fas fa-volume-up mr-2 text-green-600 dark:text-green-400"></i> Audio Information
|
||
</h4>
|
||
`;
|
||
|
||
data.audio.forEach((audio, index) => {
|
||
if (index > 0) html += '<hr class="my-3 border-gray-200 dark:border-gray-700">';
|
||
html += '<dl class="grid grid-cols-2 gap-3">';
|
||
|
||
if (audio.audioformat) {
|
||
html += `
|
||
<div>
|
||
<dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Format</dt>
|
||
<dd class="text-sm text-gray-900 dark:text-gray-100">${escapeHtml(audio.audioformat)}</dd>
|
||
</div>
|
||
`;
|
||
}
|
||
if (audio.audiochannels) {
|
||
html += `
|
||
<div>
|
||
<dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Channels</dt>
|
||
<dd class="text-sm text-gray-900 dark:text-gray-100">${escapeHtml(audio.audiochannels)}</dd>
|
||
</div>
|
||
`;
|
||
}
|
||
if (audio.audiobitrate) {
|
||
html += `
|
||
<div>
|
||
<dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Bit Rate</dt>
|
||
<dd class="text-sm text-gray-900 dark:text-gray-100">${escapeHtml(audio.audiobitrate)}</dd>
|
||
</div>
|
||
`;
|
||
}
|
||
if (audio.audiolanguage) {
|
||
html += `
|
||
<div>
|
||
<dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Language</dt>
|
||
<dd class="text-sm text-gray-900 dark:text-gray-100">${escapeHtml(audio.audiolanguage)}</dd>
|
||
</div>
|
||
`;
|
||
}
|
||
if (audio.audiosamplerate) {
|
||
html += `
|
||
<div>
|
||
<dt class="text-xs font-medium text-gray-600 dark:text-gray-400">Sample Rate</dt>
|
||
<dd class="text-sm text-gray-900 dark:text-gray-100">${escapeHtml(audio.audiosamplerate)}</dd>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
html += '</dl>';
|
||
});
|
||
|
||
html += '</div>';
|
||
}
|
||
|
||
// Subtitle information
|
||
if (data.subs) {
|
||
html += `
|
||
<div class="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900 dark:to-pink-900 rounded-lg p-4">
|
||
<h4 class="text-md font-semibold text-gray-800 dark:text-gray-200 mb-3 flex items-center">
|
||
<i class="fas fa-closed-captioning mr-2 text-purple-600 dark:text-purple-400"></i> Subtitles
|
||
</h4>
|
||
<p class="text-sm text-gray-900 dark:text-gray-100">${escapeHtml(data.subs)}</p>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
html += '</div>';
|
||
content.innerHTML = html;
|
||
})
|
||
.catch(error => {
|
||
content.innerHTML = `
|
||
<div class="text-center py-8">
|
||
<i class="fas fa-exclamation-circle text-3xl text-red-600"></i>
|
||
<p class="text-red-600 mt-2">${escapeHtml(error.message)}</p>
|
||
</div>
|
||
`;
|
||
});
|
||
};
|
||
|
||
// Event handlers for badges and modals
|
||
document.addEventListener('click', function(e) {
|
||
// Preview badge
|
||
const previewBadge = e.target.closest('.preview-badge');
|
||
if (previewBadge) {
|
||
e.preventDefault();
|
||
const guid = previewBadge.dataset.guid;
|
||
if (typeof showPreviewImage === 'function') {
|
||
showPreviewImage(guid, 'preview');
|
||
}
|
||
}
|
||
|
||
// Sample badge
|
||
const sampleBadge = e.target.closest('.sample-badge');
|
||
if (sampleBadge) {
|
||
e.preventDefault();
|
||
const guid = sampleBadge.dataset.guid;
|
||
if (typeof showPreviewImage === 'function') {
|
||
showPreviewImage(guid, 'sample');
|
||
}
|
||
}
|
||
|
||
// Mediainfo badge
|
||
const mediainfoBadge = e.target.closest('.mediainfo-badge');
|
||
if (mediainfoBadge) {
|
||
e.preventDefault();
|
||
const releaseId = mediainfoBadge.dataset.releaseId;
|
||
showMediainfo(releaseId);
|
||
}
|
||
|
||
// File list badge
|
||
const filelistBadge = e.target.closest('.filelist-badge');
|
||
if (filelistBadge) {
|
||
e.preventDefault();
|
||
const guid = filelistBadge.dataset.guid;
|
||
showFilelist(guid);
|
||
}
|
||
});
|
||
|
||
// Close modals on background click
|
||
const previewModal = document.getElementById('previewModal');
|
||
if (previewModal) {
|
||
previewModal.addEventListener('click', function(e) {
|
||
if (e.target === this && typeof closePreviewModal === 'function') {
|
||
closePreviewModal();
|
||
}
|
||
});
|
||
}
|
||
|
||
const mediainfoModal = document.getElementById('mediainfoModal');
|
||
if (mediainfoModal) {
|
||
mediainfoModal.addEventListener('click', function(e) {
|
||
// Close if clicking the backdrop OR the close button
|
||
if (e.target === this || e.target.closest('[onclick*="closeMediainfoModal"]')) {
|
||
closeMediainfoModal();
|
||
}
|
||
});
|
||
}
|
||
|
||
const filelistModal = document.getElementById('filelistModal');
|
||
if (filelistModal) {
|
||
filelistModal.addEventListener('click', function(e) {
|
||
// Close if clicking the backdrop OR the close button
|
||
if (e.target === this || e.target.closest('[onclick*="closeFilelistModal"]')) {
|
||
closeFilelistModal();
|
||
}
|
||
});
|
||
}
|
||
|
||
// Close modals on ESC key
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape') {
|
||
if (typeof closePreviewModal === 'function') closePreviewModal();
|
||
closeMediainfoModal();
|
||
closeFilelistModal();
|
||
}
|
||
});
|
||
}
|
||
|
||
// Cart and Multi-select functionality
|
||
function initCartFunctionality() {
|
||
// Global showConfirmation function for cart page
|
||
window.showConfirmation = function(message, onConfirm) {
|
||
const modal = document.createElement('div');
|
||
modal.className = 'confirmation-modal';
|
||
modal.innerHTML = `
|
||
<div class="confirmation-modal-content">
|
||
<div class="confirmation-modal-header">
|
||
<div class="confirmation-modal-icon">
|
||
<i class="fa fa-exclamation-triangle"></i>
|
||
</div>
|
||
<h3 class="confirmation-modal-title">Confirm Deletion</h3>
|
||
</div>
|
||
<div class="confirmation-modal-body">
|
||
${message}
|
||
</div>
|
||
<div class="confirmation-modal-footer">
|
||
<button class="btn-cancel">Cancel</button>
|
||
<button class="btn-confirm">Delete</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
document.body.appendChild(modal);
|
||
|
||
const cancelBtn = modal.querySelector('.btn-cancel');
|
||
const confirmBtn = modal.querySelector('.btn-confirm');
|
||
|
||
function closeModal() {
|
||
modal.style.animation = 'fadeOut 0.2s ease-out';
|
||
setTimeout(() => modal.remove(), 200);
|
||
}
|
||
|
||
cancelBtn.addEventListener('click', closeModal);
|
||
modal.addEventListener('click', function(e) {
|
||
if (e.target === modal) {
|
||
closeModal();
|
||
}
|
||
});
|
||
|
||
confirmBtn.addEventListener('click', function() {
|
||
closeModal();
|
||
onConfirm();
|
||
});
|
||
|
||
// Focus on cancel button by default
|
||
setTimeout(() => cancelBtn.focus(), 100);
|
||
|
||
// ESC key to close
|
||
const escHandler = function(e) {
|
||
if (e.key === 'Escape') {
|
||
closeModal();
|
||
document.removeEventListener('keydown', escHandler);
|
||
}
|
||
};
|
||
document.addEventListener('keydown', escHandler);
|
||
};
|
||
|
||
// Cart page specific functionality
|
||
const checkAll = document.getElementById('check-all');
|
||
const checkboxes = document.querySelectorAll('.cart-checkbox');
|
||
|
||
if (checkAll && checkboxes.length > 0) {
|
||
// Function to update the check-all checkbox state
|
||
function updateCheckAllState() {
|
||
const checkedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
|
||
checkAll.checked = checkedCount === checkboxes.length;
|
||
checkAll.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
|
||
}
|
||
|
||
// Handle check-all checkbox change
|
||
checkAll.addEventListener('change', function() {
|
||
const isChecked = this.checked;
|
||
checkboxes.forEach(checkbox => {
|
||
checkbox.checked = isChecked;
|
||
});
|
||
});
|
||
|
||
// Handle individual checkbox changes
|
||
checkboxes.forEach(checkbox => {
|
||
checkbox.addEventListener('change', updateCheckAllState);
|
||
});
|
||
|
||
// Initialize the check-all state on page load
|
||
updateCheckAllState();
|
||
|
||
// Download selected
|
||
document.querySelectorAll('.nzb_multi_operations_download_cart').forEach(btn => {
|
||
btn.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
|
||
const selected = Array.from(checkboxes)
|
||
.filter(cb => cb.checked)
|
||
.map(cb => cb.value);
|
||
|
||
if (selected.length === 0) {
|
||
if (typeof showToast === 'function') {
|
||
showToast('Please select at least one item', 'error');
|
||
} else {
|
||
alert('Please select at least one item');
|
||
}
|
||
return;
|
||
}
|
||
|
||
// Download all selected NZBs
|
||
selected.forEach(guid => {
|
||
window.open('/getnzb?id=' + guid, '_blank');
|
||
});
|
||
|
||
if (typeof showToast === 'function') {
|
||
showToast('Downloading ' + selected.length + ' item(s)', 'success');
|
||
}
|
||
});
|
||
});
|
||
|
||
// Delete selected
|
||
document.querySelectorAll('.nzb_multi_operations_cartdelete').forEach(btn => {
|
||
btn.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
|
||
const selected = Array.from(checkboxes)
|
||
.filter(cb => cb.checked)
|
||
.map(cb => cb.value);
|
||
|
||
if (selected.length === 0) {
|
||
if (typeof showToast === 'function') {
|
||
showToast('Please select at least one item', 'error');
|
||
} else {
|
||
alert('Please select at least one item');
|
||
}
|
||
return;
|
||
}
|
||
|
||
showConfirmation(
|
||
`Are you sure you want to delete <strong>${selected.length}</strong> item(s) from your cart?`,
|
||
function() {
|
||
// Delete via AJAX
|
||
fetch('/cart/delete/' + selected.join(','), {
|
||
method: 'POST',
|
||
headers: {
|
||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
||
'Content-Type': 'application/json',
|
||
}
|
||
})
|
||
.then(response => {
|
||
if (response.ok) {
|
||
if (typeof showToast === 'function') {
|
||
showToast('Items deleted successfully', 'success');
|
||
}
|
||
setTimeout(() => window.location.reload(), 1000);
|
||
} else {
|
||
if (typeof showToast === 'function') {
|
||
showToast('Failed to delete items', 'error');
|
||
} else {
|
||
alert('Failed to delete items');
|
||
}
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error:', error);
|
||
if (typeof showToast === 'function') {
|
||
showToast('Failed to delete items', 'error');
|
||
} else {
|
||
alert('Failed to delete items');
|
||
}
|
||
});
|
||
}
|
||
);
|
||
});
|
||
});
|
||
|
||
// Individual delete confirmation
|
||
document.querySelectorAll('.cart-delete-link').forEach(function(link) {
|
||
link.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
const releaseName = this.getAttribute('data-release-name');
|
||
const deleteUrl = this.getAttribute('data-delete-url');
|
||
|
||
showConfirmation(
|
||
`Are you sure you want to remove <strong>${releaseName}</strong> from your cart?`,
|
||
function() {
|
||
if (typeof showToast === 'function') {
|
||
showToast('Removing item from cart...', 'info');
|
||
}
|
||
|
||
setTimeout(() => {
|
||
window.location.href = deleteUrl;
|
||
}, 500);
|
||
}
|
||
);
|
||
});
|
||
});
|
||
}
|
||
|
||
// Select all checkbox functionality
|
||
const selectAllCheckbox = document.getElementById('chkSelectAll');
|
||
if (selectAllCheckbox) {
|
||
selectAllCheckbox.addEventListener('change', function() {
|
||
const checkboxes = document.querySelectorAll('.chkRelease');
|
||
checkboxes.forEach(checkbox => checkbox.checked = this.checked);
|
||
});
|
||
}
|
||
|
||
// Multi-operations download
|
||
const multiDownloadBtn = document.querySelector('.nzb_multi_operations_download');
|
||
if (multiDownloadBtn) {
|
||
multiDownloadBtn.addEventListener('click', function() {
|
||
const selected = Array.from(document.querySelectorAll('.chkRelease:checked')).map(cb => cb.value);
|
||
if (selected.length === 0) {
|
||
if (typeof showToast === 'function') {
|
||
showToast('Please select at least one release', 'error');
|
||
}
|
||
return;
|
||
}
|
||
|
||
// If only one release is selected, download it directly
|
||
if (selected.length === 1) {
|
||
window.location.href = '/getnzb/' + selected[0];
|
||
if (typeof showToast === 'function') {
|
||
showToast('Downloading NZB...', 'success');
|
||
}
|
||
} else {
|
||
// For multiple releases, download as zip
|
||
const guids = selected.join(',');
|
||
window.location.href = '/getnzb?id=' + encodeURIComponent(guids) + '&zip=1';
|
||
if (typeof showToast === 'function') {
|
||
showToast(`Downloading ${selected.length} NZBs as zip file...`, 'success');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Multi-operations cart
|
||
const multiCartBtn = document.querySelector('.nzb_multi_operations_cart');
|
||
if (multiCartBtn) {
|
||
multiCartBtn.addEventListener('click', function() {
|
||
const selected = Array.from(document.querySelectorAll('.chkRelease:checked')).map(cb => cb.value);
|
||
if (selected.length === 0) {
|
||
if (typeof showToast === 'function') {
|
||
showToast('Please select at least one release', 'error');
|
||
}
|
||
return;
|
||
}
|
||
|
||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
|
||
|
||
fetch('/cart/add', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRF-TOKEN': csrfToken,
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
},
|
||
body: JSON.stringify({ id: selected.join(',') })
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
if (typeof showToast === 'function') {
|
||
showToast(data.message || `Added ${selected.length} item${selected.length > 1 ? 's' : ''} to cart`, 'success');
|
||
}
|
||
} else {
|
||
if (typeof showToast === 'function') {
|
||
showToast('Failed to add items to cart', 'error');
|
||
}
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error adding to cart:', error);
|
||
if (typeof showToast === 'function') {
|
||
showToast('An error occurred', 'error');
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// Individual add to cart buttons
|
||
document.addEventListener('click', function(e) {
|
||
const cartBtn = e.target.closest('.add-to-cart');
|
||
|
||
if (cartBtn) {
|
||
e.preventDefault();
|
||
|
||
const guid = cartBtn.dataset.guid;
|
||
const iconElement = cartBtn.querySelector('.icon_cart');
|
||
|
||
if (!guid) {
|
||
console.error('No GUID found for cart item');
|
||
return;
|
||
}
|
||
|
||
// Prevent double-clicking
|
||
if (iconElement && iconElement.classList.contains('icon_cart_clicked')) {
|
||
return;
|
||
}
|
||
|
||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
|
||
|
||
// Send AJAX request to add item to cart
|
||
fetch('/cart/add', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRF-TOKEN': csrfToken,
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
},
|
||
body: JSON.stringify({ id: guid })
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
// Visual feedback
|
||
if (iconElement) {
|
||
iconElement.classList.remove('fa-shopping-basket');
|
||
iconElement.classList.add('fa-check', 'icon_cart_clicked');
|
||
|
||
// Reset icon after 2 seconds
|
||
setTimeout(() => {
|
||
iconElement.classList.remove('fa-check', 'icon_cart_clicked');
|
||
iconElement.classList.add('fa-shopping-basket');
|
||
}, 2000);
|
||
}
|
||
|
||
// Show success notification
|
||
if (typeof showToast === 'function') {
|
||
showToast('Added to cart successfully!', 'success');
|
||
}
|
||
} else {
|
||
if (typeof showToast === 'function') {
|
||
showToast('Failed to add item to cart', 'error');
|
||
}
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error adding to cart:', error);
|
||
if (typeof showToast === 'function') {
|
||
showToast('An error occurred', 'error');
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
// Admin Menu Toggle
|
||
function initAdminMenu() {
|
||
window.toggleAdminSubmenu = function(id) {
|
||
const submenu = document.getElementById(id);
|
||
const icon = document.getElementById(id + '-icon');
|
||
if (submenu) {
|
||
submenu.classList.toggle('hidden');
|
||
}
|
||
if (icon) {
|
||
icon.classList.toggle('rotate-180');
|
||
}
|
||
};
|
||
|
||
// Add click handlers for admin menu buttons
|
||
document.addEventListener('click', function(e) {
|
||
const menuButton = e.target.closest('[data-toggle-submenu]');
|
||
if (menuButton) {
|
||
const menuId = menuButton.getAttribute('data-toggle-submenu');
|
||
if (menuId) {
|
||
toggleAdminSubmenu(menuId);
|
||
}
|
||
}
|
||
});
|
||
|
||
// Theme management with system preference support for admin panel
|
||
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||
const themeToggle = document.getElementById('theme-toggle');
|
||
|
||
if (themeToggle) {
|
||
// Get initial theme preference
|
||
const metaTheme = document.querySelector('meta[name="theme-preference"]');
|
||
const isAuthenticated = document.querySelector('meta[name="user-authenticated"]');
|
||
let currentTheme = metaTheme ? metaTheme.content : 'light';
|
||
|
||
if (!isAuthenticated || isAuthenticated.content !== 'true') {
|
||
currentTheme = localStorage.getItem('theme') || 'light';
|
||
}
|
||
|
||
// Function to apply theme
|
||
function applyTheme(themePreference) {
|
||
const html = document.documentElement;
|
||
|
||
if (themePreference === 'system') {
|
||
if (mediaQuery.matches) {
|
||
html.classList.add('dark');
|
||
} else {
|
||
html.classList.remove('dark');
|
||
}
|
||
} else if (themePreference === 'dark') {
|
||
html.classList.add('dark');
|
||
} else {
|
||
html.classList.remove('dark');
|
||
}
|
||
}
|
||
|
||
// Apply initial theme
|
||
applyTheme(currentTheme);
|
||
|
||
// Listen for OS theme changes
|
||
mediaQuery.addEventListener('change', () => {
|
||
const userThemePreference = metaTheme ? metaTheme.content : localStorage.getItem('theme') || 'light';
|
||
if (userThemePreference === 'system') {
|
||
applyTheme('system');
|
||
}
|
||
});
|
||
|
||
// Theme toggle click handler - cycles through light -> dark -> system
|
||
themeToggle.addEventListener('click', function() {
|
||
let nextTheme;
|
||
|
||
// Cycle through: light -> dark -> system -> light
|
||
if (currentTheme === 'light') {
|
||
nextTheme = 'dark';
|
||
} else if (currentTheme === 'dark') {
|
||
nextTheme = 'system';
|
||
} else {
|
||
nextTheme = 'light';
|
||
}
|
||
|
||
applyTheme(nextTheme);
|
||
|
||
// Update button title
|
||
const titles = {
|
||
'light': 'Theme: Light',
|
||
'dark': 'Theme: Dark',
|
||
'system': 'Theme: System (Auto)'
|
||
};
|
||
this.setAttribute('title', titles[nextTheme]);
|
||
|
||
// Save theme preference
|
||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
|
||
const updateThemeUrl = document.querySelector('meta[name="update-theme-url"]')?.content;
|
||
|
||
if (isAuthenticated && isAuthenticated.content === 'true' && updateThemeUrl && csrfToken) {
|
||
// Save to backend for authenticated users
|
||
fetch(updateThemeUrl, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRF-TOKEN': csrfToken
|
||
},
|
||
body: JSON.stringify({ theme_preference: nextTheme })
|
||
}).then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
currentTheme = nextTheme;
|
||
if (metaTheme) {
|
||
metaTheme.content = nextTheme;
|
||
}
|
||
}
|
||
})
|
||
.catch(error => console.error('Error updating theme:', error));
|
||
} else {
|
||
// Save to localStorage for guests
|
||
localStorage.setItem('theme', nextTheme);
|
||
currentTheme = nextTheme;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// Sidebar Toggle functionality for regular user sidebar
|
||
function initSidebarToggle() {
|
||
const sidebarToggles = document.querySelectorAll('.sidebar-toggle');
|
||
|
||
sidebarToggles.forEach(toggle => {
|
||
toggle.addEventListener('click', function() {
|
||
const targetId = this.getAttribute('data-target');
|
||
const submenu = document.getElementById(targetId);
|
||
const chevron = this.querySelector('.fa-chevron-down');
|
||
|
||
if (submenu) {
|
||
submenu.classList.toggle('hidden');
|
||
if (chevron) {
|
||
chevron.classList.toggle('rotate-180');
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
// Handle logout link in sidebar
|
||
const sidebarLogoutLink = document.querySelector('[data-logout]');
|
||
const sidebarLogoutForm = document.getElementById('sidebar-logout-form');
|
||
|
||
if (sidebarLogoutLink && sidebarLogoutForm) {
|
||
sidebarLogoutLink.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
sidebarLogoutForm.submit();
|
||
});
|
||
}
|
||
}
|
||
|
||
// Dropdown Menus for Header Navigation
|
||
function initDropdownMenus() {
|
||
document.querySelectorAll('.dropdown-toggle').forEach(function(toggle) {
|
||
toggle.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
const menu = this.nextElementSibling;
|
||
if (menu && menu.classList.contains('dropdown-menu')) {
|
||
// Close all other dropdowns
|
||
document.querySelectorAll('.dropdown-menu').forEach(function(m) {
|
||
if (m !== menu) {
|
||
m.classList.remove('show');
|
||
m.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
// Toggle this dropdown
|
||
menu.classList.toggle('show');
|
||
menu.style.display = menu.classList.contains('show') ? 'block' : 'none';
|
||
}
|
||
});
|
||
});
|
||
|
||
// Close dropdowns when clicking outside
|
||
document.addEventListener('click', function(e) {
|
||
if (!e.target.closest('.dropdown-toggle') && !e.target.closest('.dropdown-menu')) {
|
||
document.querySelectorAll('.dropdown-menu').forEach(function(menu) {
|
||
menu.classList.remove('show');
|
||
menu.style.display = 'none';
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
// Image Fallbacks
|
||
function initImageFallbacks() {
|
||
// Handle images with data-fallback-src attribute
|
||
document.querySelectorAll('img[data-fallback-src]').forEach(function(img) {
|
||
img.addEventListener('error', function() {
|
||
const fallbackSrc = this.getAttribute('data-fallback-src');
|
||
if (fallbackSrc && this.src !== fallbackSrc) {
|
||
this.src = fallbackSrc;
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// Profile Page Tab Switching
|
||
function initProfileTabs() {
|
||
const tabLinks = document.querySelectorAll('.tab-link');
|
||
const tabContents = document.querySelectorAll('.tab-content');
|
||
|
||
if (tabLinks.length === 0 || tabContents.length === 0) {
|
||
return; // Not on a page with tabs
|
||
}
|
||
|
||
tabLinks.forEach(link => {
|
||
link.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
const targetId = this.getAttribute('href').substring(1);
|
||
|
||
// Update active states on tab links
|
||
tabLinks.forEach(l => {
|
||
l.classList.remove('bg-blue-50', 'text-blue-700', 'font-medium');
|
||
l.classList.add('text-gray-700');
|
||
l.classList.add('dark:text-gray-300');
|
||
});
|
||
this.classList.add('bg-blue-50', 'text-blue-700', 'font-medium');
|
||
this.classList.remove('text-gray-700', 'dark:text-gray-300');
|
||
|
||
// Hide all tab contents
|
||
tabContents.forEach(content => {
|
||
content.style.display = 'none';
|
||
});
|
||
|
||
// Show selected tab content
|
||
const targetContent = document.getElementById(targetId);
|
||
if (targetContent) {
|
||
targetContent.style.display = 'block';
|
||
}
|
||
|
||
// Update URL hash without scrolling
|
||
history.pushState(null, null, '#' + targetId);
|
||
});
|
||
});
|
||
|
||
// Handle initial hash
|
||
const hash = window.location.hash.substring(1);
|
||
if (hash && document.getElementById(hash)) {
|
||
const link = document.querySelector(`a[href="#${hash}"]`);
|
||
if (link) {
|
||
link.click();
|
||
}
|
||
}
|
||
}
|
||
|
||
// Add to Cart function (standalone for backward compatibility)
|
||
window.addToCart = function(guid) {
|
||
if (!guid) {
|
||
console.error('No GUID provided to addToCart');
|
||
return;
|
||
}
|
||
|
||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
|
||
|
||
fetch('/cart/add', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRF-TOKEN': csrfToken,
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
},
|
||
body: JSON.stringify({ id: guid })
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
if (typeof showToast === 'function') {
|
||
showToast('Added to cart successfully!', 'success');
|
||
}
|
||
} else {
|
||
if (typeof showToast === 'function') {
|
||
showToast('Failed to add item to cart', 'error');
|
||
}
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error adding to cart:', error);
|
||
if (typeof showToast === 'function') {
|
||
showToast('An error occurred', 'error');
|
||
}
|
||
});
|
||
};
|
||
|
||
// Admin User Edit - Role Expiry DateTime Picker
|
||
function initAdminUserEdit() {
|
||
// Only run if we're on the admin user edit page
|
||
if (!document.getElementById('rolechangedate')) {
|
||
return;
|
||
}
|
||
|
||
initializeDateTimePicker();
|
||
setupTypeToSelect();
|
||
setupExpiryDateHandlers();
|
||
}
|
||
|
||
// Initialize the datetime picker with existing values
|
||
function initializeDateTimePicker() {
|
||
const hiddenInput = document.getElementById('rolechangedate');
|
||
if (!hiddenInput) return;
|
||
|
||
if (hiddenInput.value) {
|
||
const date = new Date(hiddenInput.value);
|
||
if (!isNaN(date.getTime())) {
|
||
document.getElementById('expiry_year').value = date.getFullYear().toString();
|
||
document.getElementById('expiry_month').value = String(date.getMonth() + 1).padStart(2, '0');
|
||
document.getElementById('expiry_day').value = String(date.getDate()).padStart(2, '0');
|
||
document.getElementById('expiry_hour').value = String(date.getHours()).padStart(2, '0');
|
||
document.getElementById('expiry_minute').value = String(date.getMinutes()).padStart(2, '0');
|
||
updateDateTimePreview();
|
||
}
|
||
}
|
||
|
||
// Add change listeners to all selectors
|
||
['expiry_year', 'expiry_month', 'expiry_day', 'expiry_hour', 'expiry_minute'].forEach(id => {
|
||
const element = document.getElementById(id);
|
||
if (element) {
|
||
element.addEventListener('change', updateDateTime);
|
||
}
|
||
});
|
||
}
|
||
|
||
// Setup type-to-select functionality for all dropdowns
|
||
function setupTypeToSelect() {
|
||
const selects = ['expiry_year', 'expiry_month', 'expiry_day', 'expiry_hour', 'expiry_minute'];
|
||
|
||
selects.forEach(selectId => {
|
||
const select = document.getElementById(selectId);
|
||
if (!select) return;
|
||
|
||
let typedValue = '';
|
||
let typingTimer;
|
||
|
||
select.addEventListener('keypress', function(e) {
|
||
clearTimeout(typingTimer);
|
||
|
||
// Add typed character
|
||
typedValue += e.key;
|
||
|
||
// Find matching option
|
||
const options = Array.from(this.options);
|
||
const match = options.find(opt =>
|
||
opt.value.startsWith(typedValue) ||
|
||
opt.text.toLowerCase().startsWith(typedValue.toLowerCase())
|
||
);
|
||
|
||
if (match) {
|
||
this.value = match.value;
|
||
updateDateTime();
|
||
|
||
// Visual feedback
|
||
this.classList.add('ring-2', 'ring-green-500', 'dark:ring-green-400');
|
||
setTimeout(() => {
|
||
this.classList.remove('ring-2', 'ring-green-500', 'dark:ring-green-400');
|
||
}, 300);
|
||
}
|
||
|
||
// Clear typed value after 1 second
|
||
typingTimer = setTimeout(() => {
|
||
typedValue = '';
|
||
}, 1000);
|
||
});
|
||
});
|
||
}
|
||
|
||
// Update the hidden input and preview when any selector changes
|
||
function updateDateTime() {
|
||
const year = document.getElementById('expiry_year')?.value;
|
||
const month = document.getElementById('expiry_month')?.value;
|
||
const day = document.getElementById('expiry_day')?.value;
|
||
const hour = document.getElementById('expiry_hour')?.value;
|
||
const minute = document.getElementById('expiry_minute')?.value;
|
||
|
||
if (year && month && day && hour && minute) {
|
||
const dateTimeStr = `${year}-${month}-${day}T${hour}:${minute}:00`;
|
||
document.getElementById('rolechangedate').value = dateTimeStr;
|
||
updateDateTimePreview();
|
||
|
||
// Show success flash on all filled selectors
|
||
['expiry_year', 'expiry_month', 'expiry_day', 'expiry_hour', 'expiry_minute'].forEach(id => {
|
||
const el = document.getElementById(id);
|
||
if (el && el.value) {
|
||
el.classList.add('border-green-500', 'dark:border-green-400');
|
||
setTimeout(() => {
|
||
el.classList.remove('border-green-500', 'dark:border-green-400');
|
||
}, 500);
|
||
}
|
||
});
|
||
} else {
|
||
const preview = document.getElementById('datetime_preview');
|
||
if (preview) {
|
||
preview.classList.add('hidden');
|
||
}
|
||
}
|
||
}
|
||
|
||
// Update the datetime preview display
|
||
function updateDateTimePreview() {
|
||
const hiddenInput = document.getElementById('rolechangedate');
|
||
const preview = document.getElementById('datetime_preview');
|
||
const display = document.getElementById('datetime_display');
|
||
|
||
if (!hiddenInput || !preview || !display) return;
|
||
|
||
if (hiddenInput.value) {
|
||
const date = new Date(hiddenInput.value);
|
||
const options = {
|
||
weekday: 'short',
|
||
year: 'numeric',
|
||
month: 'long',
|
||
day: 'numeric',
|
||
hour: '2-digit',
|
||
minute: '2-digit'
|
||
};
|
||
display.textContent = date.toLocaleDateString('en-US', options);
|
||
preview.classList.remove('hidden');
|
||
|
||
// Check if date is in past or expiring soon
|
||
const now = new Date();
|
||
const diff = date - now;
|
||
if (diff < 0) {
|
||
display.classList.add('text-red-600', 'dark:text-red-400');
|
||
display.classList.remove('text-blue-600', 'dark:text-blue-400', 'text-yellow-600', 'dark:text-yellow-400');
|
||
} else if (diff < 7 * 24 * 60 * 60 * 1000) {
|
||
display.classList.add('text-yellow-600', 'dark:text-yellow-400');
|
||
display.classList.remove('text-blue-600', 'dark:text-blue-400', 'text-red-600', 'dark:text-red-400');
|
||
} else {
|
||
display.classList.add('text-blue-600', 'dark:text-blue-400');
|
||
display.classList.remove('text-red-600', 'dark:text-red-400', 'text-yellow-600', 'dark:text-yellow-400');
|
||
}
|
||
} else {
|
||
preview.classList.add('hidden');
|
||
}
|
||
}
|
||
|
||
// Setup event handlers for expiry date quick actions
|
||
function setupExpiryDateHandlers() {
|
||
// Event delegation for all expiry date buttons
|
||
document.addEventListener('click', function(e) {
|
||
const target = e.target.closest('[data-expiry-action]');
|
||
if (!target) return;
|
||
|
||
e.preventDefault();
|
||
const action = target.getAttribute('data-expiry-action');
|
||
const days = parseInt(target.getAttribute('data-days') || '0', 10);
|
||
const hours = parseInt(target.getAttribute('data-hours') || '0', 10);
|
||
|
||
if (action === 'set') {
|
||
setExpiryDateTime(days, hours);
|
||
} else if (action === 'end-of-day') {
|
||
setEndOfDay();
|
||
} else if (action === 'clear') {
|
||
clearExpiryDate();
|
||
}
|
||
});
|
||
}
|
||
|
||
// Function to set expiry date and time by adding days and hours (stackable)
|
||
function setExpiryDateTime(days, hours) {
|
||
let baseDate;
|
||
|
||
// Check if there's already a selected datetime
|
||
const year = document.getElementById('expiry_year')?.value;
|
||
const month = document.getElementById('expiry_month')?.value;
|
||
const day = document.getElementById('expiry_day')?.value;
|
||
const hour = document.getElementById('expiry_hour')?.value;
|
||
const minute = document.getElementById('expiry_minute')?.value;
|
||
|
||
if (year && month && day && hour && minute) {
|
||
// Use existing selected datetime as base
|
||
baseDate = new Date(year, parseInt(month) - 1, day, hour, minute);
|
||
showExpiryToast('Added ' + (days > 0 ? days + ' day' + (days !== 1 ? 's' : '') : '') + (days > 0 && hours > 0 ? ' and ' : '') + (hours > 0 ? hours + ' hour' + (hours !== 1 ? 's' : '') : ''), 'info');
|
||
} else {
|
||
// Start from current time
|
||
baseDate = new Date();
|
||
showExpiryToast('Expiry date set to ' + formatDateTimeForDisplay(baseDate), 'success');
|
||
}
|
||
|
||
// Add the days and hours
|
||
baseDate.setDate(baseDate.getDate() + days);
|
||
baseDate.setHours(baseDate.getHours() + hours);
|
||
|
||
// Update all selectors
|
||
document.getElementById('expiry_year').value = baseDate.getFullYear().toString();
|
||
document.getElementById('expiry_month').value = String(baseDate.getMonth() + 1).padStart(2, '0');
|
||
document.getElementById('expiry_day').value = String(baseDate.getDate()).padStart(2, '0');
|
||
document.getElementById('expiry_hour').value = String(baseDate.getHours()).padStart(2, '0');
|
||
document.getElementById('expiry_minute').value = String(baseDate.getMinutes()).padStart(2, '0');
|
||
|
||
updateDateTime();
|
||
|
||
// Add animated visual feedback
|
||
['expiry_year', 'expiry_month', 'expiry_day', 'expiry_hour', 'expiry_minute'].forEach(id => {
|
||
const el = document.getElementById(id);
|
||
if (el) {
|
||
el.classList.add('ring-2', 'ring-green-500', 'dark:ring-green-400', 'scale-105');
|
||
setTimeout(() => {
|
||
el.classList.remove('ring-2', 'ring-green-500', 'dark:ring-green-400', 'scale-105');
|
||
}, 600);
|
||
}
|
||
});
|
||
}
|
||
|
||
// Function to set expiry to end of current day (23:59)
|
||
function setEndOfDay() {
|
||
const endOfDay = new Date();
|
||
endOfDay.setHours(23, 59, 0, 0);
|
||
|
||
document.getElementById('expiry_year').value = endOfDay.getFullYear().toString();
|
||
document.getElementById('expiry_month').value = String(endOfDay.getMonth() + 1).padStart(2, '0');
|
||
document.getElementById('expiry_day').value = String(endOfDay.getDate()).padStart(2, '0');
|
||
document.getElementById('expiry_hour').value = '23';
|
||
document.getElementById('expiry_minute').value = '55';
|
||
|
||
updateDateTime();
|
||
|
||
['expiry_year', 'expiry_month', 'expiry_day', 'expiry_hour', 'expiry_minute'].forEach(id => {
|
||
const el = document.getElementById(id);
|
||
if (el) {
|
||
el.classList.add('ring-2', 'ring-indigo-500', 'dark:ring-indigo-400', 'scale-105');
|
||
setTimeout(() => {
|
||
el.classList.remove('ring-2', 'ring-indigo-500', 'dark:ring-indigo-400', 'scale-105');
|
||
}, 600);
|
||
}
|
||
});
|
||
|
||
showExpiryToast('Expiry set to end of today (23:59)', 'info');
|
||
}
|
||
|
||
// Function to clear expiry date
|
||
function clearExpiryDate() {
|
||
document.getElementById('expiry_year').value = '';
|
||
document.getElementById('expiry_month').value = '';
|
||
document.getElementById('expiry_day').value = '';
|
||
document.getElementById('expiry_hour').value = '';
|
||
document.getElementById('expiry_minute').value = '';
|
||
document.getElementById('rolechangedate').value = '';
|
||
const preview = document.getElementById('datetime_preview');
|
||
if (preview) {
|
||
preview.classList.add('hidden');
|
||
}
|
||
|
||
// Add a visual feedback with gray pulse
|
||
['expiry_year', 'expiry_month', 'expiry_day', 'expiry_hour', 'expiry_minute'].forEach(id => {
|
||
const el = document.getElementById(id);
|
||
if (el) {
|
||
el.classList.add('ring-2', 'ring-gray-500', 'dark:ring-gray-400', 'scale-105');
|
||
setTimeout(() => {
|
||
el.classList.remove('ring-2', 'ring-gray-500', 'dark:ring-gray-400', 'scale-105');
|
||
}, 600);
|
||
}
|
||
});
|
||
|
||
showExpiryToast('Expiry date cleared - role is now permanent', 'info');
|
||
}
|
||
|
||
// Format date for display
|
||
function formatDateTimeForDisplay(date) {
|
||
const options = {
|
||
year: 'numeric',
|
||
month: 'short',
|
||
day: 'numeric',
|
||
hour: '2-digit',
|
||
minute: '2-digit'
|
||
};
|
||
return date.toLocaleDateString('en-US', options);
|
||
}
|
||
|
||
// Show toast notification specific to expiry date changes
|
||
function showExpiryToast(message, type) {
|
||
type = type || 'success';
|
||
|
||
// Remove existing toast if any
|
||
const existingToast = document.getElementById('expiryToast');
|
||
if (existingToast) {
|
||
existingToast.remove();
|
||
}
|
||
|
||
// Create toast
|
||
const toast = document.createElement('div');
|
||
toast.id = 'expiryToast';
|
||
toast.className = 'fixed bottom-4 right-4 px-4 py-3 rounded-lg shadow-lg flex items-center gap-2 z-50 transform transition-all duration-300 translate-y-0 opacity-100';
|
||
|
||
if (type === 'success') {
|
||
toast.classList.add('bg-green-500', 'dark:bg-green-600', 'text-white');
|
||
toast.innerHTML = '<i class="fa fa-check-circle"></i><span>' + escapeHtml(message) + '</span>';
|
||
} else if (type === 'info') {
|
||
toast.classList.add('bg-blue-500', 'dark:bg-blue-600', 'text-white');
|
||
toast.innerHTML = '<i class="fa fa-info-circle"></i><span>' + escapeHtml(message) + '</span>';
|
||
}
|
||
|
||
document.body.appendChild(toast);
|
||
|
||
// Animate in
|
||
setTimeout(() => {
|
||
toast.style.transform = 'translateY(0)';
|
||
toast.style.opacity = '1';
|
||
}, 10);
|
||
|
||
// Remove after 3 seconds with fade out
|
||
setTimeout(() => {
|
||
toast.style.transform = 'translateY(20px)';
|
||
toast.style.opacity = '0';
|
||
setTimeout(() => toast.remove(), 300);
|
||
}, 3000);
|
||
}
|
||
|
||
// Utility function to escape HTML
|
||
function escapeHtml(text) {
|
||
// Handle non-string values
|
||
if (text === null || text === undefined) {
|
||
return '';
|
||
}
|
||
// Convert to string if it's not already
|
||
if (typeof text !== 'string') {
|
||
text = String(text);
|
||
}
|
||
|
||
const map = {
|
||
'&': '&',
|
||
'<': '<',
|
||
'>': '>',
|
||
'"': '"',
|
||
"'": '''
|
||
};
|
||
return text.replace(/[&<>"']/g, function(m) { return map[m]; });
|
||
}
|
||
|
||
// TinyMCE Initialization for Admin Content Pages
|
||
function initTinyMCE() {
|
||
// Only initialize if TinyMCE editor element exists (check for #body or .tinymce-editor)
|
||
if (!document.getElementById('body') && !document.querySelector('.tinymce-editor')) {
|
||
return;
|
||
}
|
||
|
||
// Function to dynamically load TinyMCE from CDN
|
||
function loadTinyMCEScript() {
|
||
return new Promise(function(resolve, reject) {
|
||
// Check if already loaded
|
||
if (typeof tinymce !== 'undefined') {
|
||
resolve();
|
||
return;
|
||
}
|
||
|
||
// Get API key from textarea data attribute or create meta tag
|
||
const bodyTextarea = document.getElementById('body');
|
||
const tinymceEditors = document.querySelectorAll('.tinymce-editor');
|
||
let apiKey = 'no-api-key';
|
||
|
||
// Try to get from existing meta tag first
|
||
let apiKeyMeta = document.querySelector('meta[name="tinymce-api-key"]');
|
||
|
||
if (!apiKeyMeta) {
|
||
// Create meta tag dynamically if it doesn't exist
|
||
// Get API key from window config or use default
|
||
if (window.NNTmuxConfig && window.NNTmuxConfig.tinymceApiKey) {
|
||
apiKey = window.NNTmuxConfig.tinymceApiKey;
|
||
} else if (bodyTextarea && bodyTextarea.dataset.tinymceApiKey) {
|
||
apiKey = bodyTextarea.dataset.tinymceApiKey;
|
||
} else if (tinymceEditors.length > 0) {
|
||
// Check if any tinymce-editor has the API key
|
||
for (let i = 0; i < tinymceEditors.length; i++) {
|
||
if (tinymceEditors[i].dataset.tinymceApiKey) {
|
||
apiKey = tinymceEditors[i].dataset.tinymceApiKey;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Create and append meta tag
|
||
apiKeyMeta = document.createElement('meta');
|
||
apiKeyMeta.setAttribute('name', 'tinymce-api-key');
|
||
apiKeyMeta.setAttribute('content', apiKey);
|
||
document.head.appendChild(apiKeyMeta);
|
||
} else {
|
||
apiKey = apiKeyMeta.content;
|
||
}
|
||
|
||
// Create script element
|
||
const script = document.createElement('script');
|
||
script.src = 'https://cdn.tiny.cloud/1/' + apiKey + '/tinymce/8/tinymce.min.js';
|
||
script.referrerPolicy = 'origin';
|
||
|
||
script.onload = function() {
|
||
console.log('TinyMCE script loaded from CDN');
|
||
resolve();
|
||
};
|
||
|
||
script.onerror = function() {
|
||
console.error('Failed to load TinyMCE script from CDN');
|
||
reject(new Error('Failed to load TinyMCE'));
|
||
};
|
||
|
||
// Append to head
|
||
document.head.appendChild(script);
|
||
});
|
||
}
|
||
|
||
// Function to detect if dark mode is active
|
||
function isDarkMode() {
|
||
return document.documentElement.classList.contains('dark') ||
|
||
(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||
}
|
||
|
||
// Function to get TinyMCE config
|
||
function getTinyMCEConfig() {
|
||
const darkMode = isDarkMode();
|
||
const apiKeyMeta = document.querySelector('meta[name="tinymce-api-key"]');
|
||
const apiKey = apiKeyMeta ? apiKeyMeta.content : 'no-api-key';
|
||
|
||
return {
|
||
selector: '#body, .tinymce-editor',
|
||
height: 500,
|
||
menubar: true,
|
||
skin: darkMode ? 'oxide-dark' : 'oxide',
|
||
content_css: darkMode ? 'dark' : 'default',
|
||
plugins: [
|
||
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
|
||
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
|
||
'insertdatetime', 'media', 'table', 'help', 'wordcount', 'emoticons'
|
||
],
|
||
toolbar: 'undo redo | blocks fontfamily fontsize | ' +
|
||
'bold italic underline strikethrough | forecolor backcolor | ' +
|
||
'alignleft aligncenter alignright alignjustify | ' +
|
||
'bullist numlist outdent indent | ' +
|
||
'link image media table emoticons | ' +
|
||
'removeformat code fullscreen | help',
|
||
toolbar_mode: 'sliding',
|
||
content_style: 'body { font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6; }',
|
||
branding: false,
|
||
promotion: false,
|
||
resize: true,
|
||
statusbar: true,
|
||
elementpath: true,
|
||
automatic_uploads: false,
|
||
file_picker_types: 'image',
|
||
font_family_formats: 'Arial=arial,helvetica,sans-serif; Courier New=courier new,courier,monospace; Georgia=georgia,palatino,serif; Tahoma=tahoma,arial,helvetica,sans-serif; Times New Roman=times new roman,times,serif; Verdana=verdana,geneva,sans-serif',
|
||
font_size_formats: '8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt 48pt',
|
||
autolink_pattern: /^(https?:\/\/|www\.|(?!www\.)[a-z0-9\-]+\.[a-z]{2,13})/i,
|
||
link_default_protocol: 'https',
|
||
link_assume_external_targets: true,
|
||
link_target_list: [
|
||
{title: 'None', value: ''},
|
||
{title: 'New window', value: '_blank'},
|
||
{title: 'Same window', value: '_self'}
|
||
],
|
||
block_formats: 'Paragraph=p; Heading 1=h1; Heading 2=h2; Heading 3=h3; Heading 4=h4; Heading 5=h5; Heading 6=h6; Preformatted=pre; Blockquote=blockquote',
|
||
valid_elements: '*[*]',
|
||
extended_valid_elements: '*[*]',
|
||
valid_children: '+body[style]',
|
||
paste_as_text: false,
|
||
paste_block_drop: false,
|
||
paste_data_images: true,
|
||
image_advtab: true,
|
||
image_caption: true,
|
||
image_description: true,
|
||
image_dimensions: true,
|
||
image_title: true,
|
||
table_default_attributes: {
|
||
border: '1'
|
||
},
|
||
table_default_styles: {
|
||
'border-collapse': 'collapse',
|
||
'width': '100%'
|
||
},
|
||
emoticons_database: 'emojis',
|
||
setup: function(editor) {
|
||
// Auto-save on content change
|
||
editor.on('change', function() {
|
||
editor.save();
|
||
});
|
||
// Auto-save on blur (when editor loses focus)
|
||
editor.on('blur', function() {
|
||
editor.save();
|
||
});
|
||
// Auto-save on keyup (for continuous saving)
|
||
editor.on('keyup', function() {
|
||
editor.save();
|
||
});
|
||
// Save before form submission
|
||
editor.on('submit', function() {
|
||
editor.save();
|
||
});
|
||
}
|
||
};
|
||
}
|
||
|
||
// Function to actually initialize TinyMCE once it's loaded
|
||
function doInitTinyMCE() {
|
||
// Initialize TinyMCE
|
||
tinymce.init(getTinyMCEConfig()).then(function(editors) {
|
||
if (editors && editors.length > 0) {
|
||
console.log('TinyMCE initialized successfully for ' + editors.length + ' editor(s)');
|
||
|
||
// Add form submission handler to sync content for all editors
|
||
editors.forEach(function(editor) {
|
||
const textarea = document.getElementById(editor.id);
|
||
if (textarea && textarea.form) {
|
||
// Remove any existing listeners to avoid duplicates
|
||
const form = textarea.form;
|
||
if (!form.hasAttribute('data-tinymce-handler')) {
|
||
form.addEventListener('submit', function(e) {
|
||
// Sync all TinyMCE editors before form submission
|
||
tinymce.triggerSave();
|
||
console.log('TinyMCE content synced to textareas before form submission');
|
||
});
|
||
form.setAttribute('data-tinymce-handler', 'true');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}).catch(function(error) {
|
||
console.error('TinyMCE initialization failed:', error);
|
||
});
|
||
|
||
// Watch for theme changes and reinitialize TinyMCE
|
||
const observer = new MutationObserver(function(mutations) {
|
||
mutations.forEach(function(mutation) {
|
||
if (mutation.attributeName === 'class') {
|
||
// Get all active TinyMCE editors
|
||
const allEditors = tinymce.editors;
|
||
if (allEditors && allEditors.length > 0) {
|
||
// Save content from all editors
|
||
const editorContents = {};
|
||
allEditors.forEach(function(editor) {
|
||
editorContents[editor.id] = editor.getContent();
|
||
});
|
||
|
||
// Remove all editors
|
||
tinymce.remove();
|
||
|
||
// Reinitialize with new theme
|
||
tinymce.init(getTinyMCEConfig()).then(function(editors) {
|
||
// Restore content to each editor
|
||
if (editors && editors.length > 0) {
|
||
editors.forEach(function(editor) {
|
||
if (editorContents[editor.id]) {
|
||
editor.setContent(editorContents[editor.id]);
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
// Start observing theme changes on the html element
|
||
observer.observe(document.documentElement, {
|
||
attributes: true,
|
||
attributeFilter: ['class']
|
||
});
|
||
}
|
||
|
||
// Load TinyMCE script dynamically, then initialize
|
||
loadTinyMCEScript()
|
||
.then(function() {
|
||
console.log('TinyMCE available, initializing editor...');
|
||
doInitTinyMCE();
|
||
})
|
||
.catch(function(error) {
|
||
console.error('Failed to load TinyMCE:', error);
|
||
// Show error message to user for all TinyMCE textareas
|
||
const textareas = document.querySelectorAll('#body, .tinymce-editor');
|
||
textareas.forEach(function(textarea) {
|
||
if (textarea && textarea.parentElement) {
|
||
const errorDiv = document.createElement('div');
|
||
errorDiv.className = 'mt-2 p-3 bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 text-red-800 dark:text-red-200 rounded';
|
||
errorDiv.innerHTML = '<i class="fas fa-exclamation-triangle mr-2"></i>TinyMCE editor failed to load. Please refresh the page or check your internet connection.';
|
||
textarea.parentElement.insertBefore(errorDiv, textarea.nextSibling);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// Mobile Enhancements
|
||
function initMobileEnhancements() {
|
||
// Create mobile sidebar overlay
|
||
createMobileSidebarOverlay();
|
||
|
||
// Enhanced mobile sidebar toggle
|
||
initMobileSidebarToggle();
|
||
|
||
// Mobile menu toggle in header
|
||
initMobileHeaderMenu();
|
||
|
||
// Touch-friendly improvements
|
||
initTouchEnhancements();
|
||
|
||
// Mobile table responsiveness
|
||
initMobileTableEnhancements();
|
||
|
||
// Prevent zoom on double tap for buttons
|
||
preventDoubleTapZoom();
|
||
|
||
// Optimize modals for mobile
|
||
optimizeModalsForMobile();
|
||
}
|
||
|
||
// Create overlay for mobile sidebar
|
||
function createMobileSidebarOverlay() {
|
||
if (document.querySelector('.mobile-sidebar-overlay')) return;
|
||
|
||
const overlay = document.createElement('div');
|
||
overlay.className = 'mobile-sidebar-overlay';
|
||
overlay.addEventListener('click', function() {
|
||
closeMobileSidebar();
|
||
});
|
||
document.body.appendChild(overlay);
|
||
}
|
||
|
||
// Mobile sidebar toggle functionality
|
||
function initMobileSidebarToggle() {
|
||
const mobileToggle = document.getElementById('mobile-sidebar-toggle');
|
||
const sidebar = document.getElementById('sidebar');
|
||
|
||
if (mobileToggle && sidebar) {
|
||
mobileToggle.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
toggleMobileSidebar();
|
||
});
|
||
}
|
||
}
|
||
|
||
function toggleMobileSidebar() {
|
||
const sidebar = document.getElementById('sidebar');
|
||
const overlay = document.querySelector('.mobile-sidebar-overlay');
|
||
|
||
if (sidebar && overlay) {
|
||
sidebar.classList.toggle('mobile-open');
|
||
overlay.classList.toggle('active');
|
||
|
||
// Prevent body scroll when sidebar is open
|
||
if (sidebar.classList.contains('mobile-open')) {
|
||
document.body.style.overflow = 'hidden';
|
||
} else {
|
||
document.body.style.overflow = '';
|
||
}
|
||
}
|
||
}
|
||
|
||
function closeMobileSidebar() {
|
||
const sidebar = document.getElementById('sidebar');
|
||
const overlay = document.querySelector('.mobile-sidebar-overlay');
|
||
|
||
if (sidebar && overlay) {
|
||
sidebar.classList.remove('mobile-open');
|
||
overlay.classList.remove('active');
|
||
document.body.style.overflow = '';
|
||
}
|
||
}
|
||
|
||
// Mobile header menu toggle
|
||
function initMobileHeaderMenu() {
|
||
// Mobile search toggle
|
||
const mobileSearchToggle = document.getElementById('mobile-search-toggle');
|
||
const mobileSearchForm = document.getElementById('mobile-search-form');
|
||
|
||
if (mobileSearchToggle && mobileSearchForm) {
|
||
mobileSearchToggle.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
|
||
if (mobileSearchForm.classList.contains('hidden')) {
|
||
mobileSearchForm.classList.remove('hidden');
|
||
// Close mobile menu if open
|
||
const mobileMenu = document.getElementById('mobile-menu');
|
||
if (mobileMenu) {
|
||
mobileMenu.style.display = 'none';
|
||
}
|
||
} else {
|
||
mobileSearchForm.classList.add('hidden');
|
||
}
|
||
});
|
||
|
||
// Close mobile search when clicking outside
|
||
document.addEventListener('click', function(e) {
|
||
if (!mobileSearchForm.contains(e.target) &&
|
||
!mobileSearchToggle.contains(e.target) &&
|
||
!mobileSearchForm.classList.contains('hidden')) {
|
||
mobileSearchForm.classList.add('hidden');
|
||
}
|
||
});
|
||
}
|
||
|
||
const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
|
||
|
||
if (mobileMenuToggle) {
|
||
mobileMenuToggle.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
|
||
// Close mobile search if open
|
||
if (mobileSearchForm && !mobileSearchForm.classList.contains('hidden')) {
|
||
mobileSearchForm.classList.add('hidden');
|
||
}
|
||
|
||
const desktopNav = document.querySelector('.hidden.md\\:flex');
|
||
|
||
if (desktopNav) {
|
||
// Create mobile menu if it doesn't exist
|
||
let mobileMenu = document.getElementById('mobile-menu');
|
||
|
||
if (!mobileMenu) {
|
||
mobileMenu = document.createElement('div');
|
||
mobileMenu.id = 'mobile-menu';
|
||
mobileMenu.className = 'md:hidden absolute top-16 left-0 right-0 bg-gray-800 dark:bg-gray-950 shadow-lg z-50 max-h-[80vh] overflow-y-auto';
|
||
mobileMenu.style.display = 'none';
|
||
|
||
// Clone navigation content
|
||
const navClone = desktopNav.cloneNode(true);
|
||
navClone.classList.remove('hidden', 'md:flex', 'md:items-center', 'md:space-x-1', 'flex-1');
|
||
navClone.classList.add('flex', 'flex-col', 'space-y-2', 'p-4');
|
||
|
||
// Update dropdown styles for mobile
|
||
navClone.querySelectorAll('.dropdown-container').forEach(dropdown => {
|
||
dropdown.classList.remove('relative');
|
||
dropdown.classList.add('w-full');
|
||
|
||
const button = dropdown.querySelector('.dropdown-toggle');
|
||
if (button) {
|
||
button.classList.add('w-full', 'justify-between');
|
||
}
|
||
|
||
const menu = dropdown.querySelector('.dropdown-menu');
|
||
if (menu) {
|
||
menu.classList.remove('absolute', 'left-0', 'top-full', 'w-48');
|
||
menu.classList.add('relative', 'w-full', 'mt-2');
|
||
}
|
||
});
|
||
|
||
mobileMenu.appendChild(navClone);
|
||
mobileMenuToggle.parentElement.parentElement.appendChild(mobileMenu);
|
||
}
|
||
|
||
// Toggle menu visibility
|
||
if (mobileMenu.style.display === 'none') {
|
||
mobileMenu.style.display = 'block';
|
||
mobileMenuToggle.querySelector('i').classList.replace('fa-bars', 'fa-times');
|
||
} else {
|
||
mobileMenu.style.display = 'none';
|
||
mobileMenuToggle.querySelector('i').classList.replace('fa-times', 'fa-bars');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Close mobile menu when clicking outside
|
||
document.addEventListener('click', function(e) {
|
||
const mobileMenu = document.getElementById('mobile-menu');
|
||
const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
|
||
|
||
if (mobileMenu && mobileMenuToggle &&
|
||
mobileMenu.style.display === 'block' &&
|
||
!mobileMenu.contains(e.target) &&
|
||
!mobileMenuToggle.contains(e.target)) {
|
||
mobileMenu.style.display = 'none';
|
||
mobileMenuToggle.querySelector('i').classList.replace('fa-times', 'fa-bars');
|
||
}
|
||
});
|
||
}
|
||
|
||
// Touch enhancements for better mobile interaction
|
||
function initTouchEnhancements() {
|
||
// Add touch feedback to all buttons
|
||
document.addEventListener('touchstart', function(e) {
|
||
const btn = e.target.closest('.btn, button, a[class*="btn"]');
|
||
if (btn) {
|
||
btn.style.opacity = '0.7';
|
||
}
|
||
}, { passive: true });
|
||
|
||
document.addEventListener('touchend', function(e) {
|
||
const btn = e.target.closest('.btn, button, a[class*="btn"]');
|
||
if (btn) {
|
||
setTimeout(() => {
|
||
btn.style.opacity = '';
|
||
}, 100);
|
||
}
|
||
}, { passive: true });
|
||
|
||
// Improve dropdown touch handling
|
||
document.querySelectorAll('.dropdown-toggle').forEach(toggle => {
|
||
let touchStartY = 0;
|
||
|
||
toggle.addEventListener('touchstart', function(e) {
|
||
touchStartY = e.touches[0].clientY;
|
||
}, { passive: true });
|
||
|
||
toggle.addEventListener('touchend', function(e) {
|
||
const touchEndY = e.changedTouches[0].clientY;
|
||
const touchDiff = Math.abs(touchEndY - touchStartY);
|
||
|
||
// Only trigger if it's a tap, not a scroll
|
||
if (touchDiff < 10) {
|
||
e.preventDefault();
|
||
this.click();
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// Mobile table enhancements
|
||
function initMobileTableEnhancements() {
|
||
// Add data labels to table cells for mobile view
|
||
const tables = document.querySelectorAll('table');
|
||
|
||
tables.forEach(table => {
|
||
const headers = Array.from(table.querySelectorAll('thead th')).map(th => th.textContent.trim());
|
||
|
||
table.querySelectorAll('tbody tr').forEach(row => {
|
||
Array.from(row.querySelectorAll('td')).forEach((cell, index) => {
|
||
if (headers[index] && !cell.hasAttribute('data-label')) {
|
||
cell.setAttribute('data-label', headers[index]);
|
||
}
|
||
});
|
||
});
|
||
|
||
// Add responsive wrapper if not present
|
||
if (!table.parentElement.classList.contains('table-responsive')) {
|
||
const wrapper = document.createElement('div');
|
||
wrapper.className = 'table-responsive';
|
||
table.parentNode.insertBefore(wrapper, table);
|
||
wrapper.appendChild(table);
|
||
}
|
||
});
|
||
}
|
||
|
||
// Prevent double-tap zoom on buttons
|
||
function preventDoubleTapZoom() {
|
||
let lastTouchEnd = 0;
|
||
|
||
document.addEventListener('touchend', function(e) {
|
||
const now = Date.now();
|
||
if (now - lastTouchEnd <= 300) {
|
||
const target = e.target.closest('button, a, .btn, input[type="submit"]');
|
||
if (target) {
|
||
e.preventDefault();
|
||
}
|
||
}
|
||
lastTouchEnd = now;
|
||
}, { passive: false });
|
||
}
|
||
|
||
// Optimize modals for mobile devices
|
||
function optimizeModalsForMobile() {
|
||
// Ensure modals are properly sized on mobile
|
||
const observer = new MutationObserver(function(mutations) {
|
||
mutations.forEach(function(mutation) {
|
||
mutation.addedNodes.forEach(function(node) {
|
||
if (node.nodeType === 1) {
|
||
const modal = node.querySelector('.modal-content') ||
|
||
(node.classList && node.classList.contains('modal-content') ? node : null);
|
||
|
||
if (modal && window.innerWidth < 768) {
|
||
modal.style.maxHeight = '90vh';
|
||
modal.style.overflowY = 'auto';
|
||
modal.style.margin = '0.5rem';
|
||
modal.style.width = 'calc(100% - 1rem)';
|
||
}
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
observer.observe(document.body, { childList: true, subtree: true });
|
||
|
||
// Handle existing modals
|
||
document.querySelectorAll('.modal-content').forEach(modal => {
|
||
if (window.innerWidth < 768) {
|
||
modal.style.maxHeight = '90vh';
|
||
modal.style.overflowY = 'auto';
|
||
modal.style.margin = '0.5rem';
|
||
modal.style.width = 'calc(100% - 1rem)';
|
||
}
|
||
});
|
||
|
||
// Close sidebar when opening modal
|
||
document.addEventListener('click', function(e) {
|
||
if (e.target.closest('[data-open-nfo], [data-open-image-modal], .mediainfo-badge, .filelist-badge')) {
|
||
closeMobileSidebar();
|
||
}
|
||
});
|
||
}
|
||
|
||
// Admin Dashboard Charts Initialization
|
||
function initAdminDashboardCharts() {
|
||
// Check if Chart.js is loaded and if we're on the admin dashboard
|
||
if (typeof Chart === 'undefined') {
|
||
return;
|
||
}
|
||
|
||
// Check for dark mode
|
||
const isDarkMode = document.documentElement.classList.contains('dark');
|
||
const textColor = isDarkMode ? '#e5e7eb' : '#374151';
|
||
const gridColor = isDarkMode ? '#374151' : '#e5e7eb';
|
||
|
||
// Store chart instances for updates
|
||
window.adminCharts = {
|
||
cpu24h: null,
|
||
ram24h: null,
|
||
cpu30d: null,
|
||
ram30d: null,
|
||
downloadsMinute: null,
|
||
apiHitsMinute: null
|
||
};
|
||
|
||
// Downloads Chart (Hourly)
|
||
const downloadsCtx = document.getElementById('downloadsChart');
|
||
if (downloadsCtx) {
|
||
const downloadsData = JSON.parse(downloadsCtx.getAttribute('data-chart-data') || '[]');
|
||
new Chart(downloadsCtx, {
|
||
type: 'bar',
|
||
data: {
|
||
labels: downloadsData.map(d => d.time || d.date),
|
||
datasets: [{
|
||
label: 'Downloads',
|
||
data: downloadsData.map(d => d.count),
|
||
backgroundColor: 'rgba(34, 197, 94, 0.7)',
|
||
borderColor: 'rgba(34, 197, 94, 1)',
|
||
borderWidth: 2,
|
||
borderRadius: 6,
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
display: false
|
||
},
|
||
tooltip: {
|
||
backgroundColor: isDarkMode ? '#1f2937' : '#ffffff',
|
||
titleColor: textColor,
|
||
bodyColor: textColor,
|
||
borderColor: gridColor,
|
||
borderWidth: 1,
|
||
padding: 12,
|
||
displayColors: false,
|
||
callbacks: {
|
||
label: function(context) {
|
||
return 'Downloads: ' + context.parsed.y.toLocaleString();
|
||
}
|
||
}
|
||
}
|
||
},
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true,
|
||
ticks: {
|
||
color: textColor,
|
||
precision: 0
|
||
},
|
||
grid: {
|
||
color: gridColor,
|
||
drawBorder: false
|
||
}
|
||
},
|
||
x: {
|
||
ticks: {
|
||
color: textColor,
|
||
maxRotation: 45,
|
||
minRotation: 45,
|
||
maxTicksLimit: 24
|
||
},
|
||
grid: {
|
||
display: false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// API Hits Chart (Hourly)
|
||
const apiHitsCtx = document.getElementById('apiHitsChart');
|
||
if (apiHitsCtx) {
|
||
const apiHitsData = JSON.parse(apiHitsCtx.getAttribute('data-chart-data') || '[]');
|
||
new Chart(apiHitsCtx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: apiHitsData.map(d => d.time || d.date),
|
||
datasets: [{
|
||
label: 'API Hits',
|
||
data: apiHitsData.map(d => d.count),
|
||
backgroundColor: 'rgba(147, 51, 234, 0.1)',
|
||
borderColor: 'rgba(147, 51, 234, 1)',
|
||
borderWidth: 3,
|
||
fill: true,
|
||
tension: 0.4,
|
||
pointRadius: 4,
|
||
pointHoverRadius: 6,
|
||
pointBackgroundColor: 'rgba(147, 51, 234, 1)',
|
||
pointBorderColor: '#ffffff',
|
||
pointBorderWidth: 2,
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
display: false
|
||
},
|
||
tooltip: {
|
||
backgroundColor: isDarkMode ? '#1f2937' : '#ffffff',
|
||
titleColor: textColor,
|
||
bodyColor: textColor,
|
||
borderColor: gridColor,
|
||
borderWidth: 1,
|
||
padding: 12,
|
||
displayColors: false,
|
||
callbacks: {
|
||
label: function(context) {
|
||
return 'API Hits: ' + context.parsed.y.toLocaleString();
|
||
}
|
||
}
|
||
}
|
||
},
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true,
|
||
ticks: {
|
||
color: textColor,
|
||
precision: 0
|
||
},
|
||
grid: {
|
||
color: gridColor,
|
||
drawBorder: false
|
||
}
|
||
},
|
||
x: {
|
||
ticks: {
|
||
color: textColor,
|
||
maxRotation: 45,
|
||
minRotation: 45,
|
||
maxTicksLimit: 24
|
||
},
|
||
grid: {
|
||
color: gridColor,
|
||
drawBorder: false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Downloads Per Minute Chart
|
||
const downloadsMinuteCtx = document.getElementById('downloadsMinuteChart');
|
||
if (downloadsMinuteCtx) {
|
||
const downloadsMinuteData = JSON.parse(downloadsMinuteCtx.getAttribute('data-chart-data') || '[]');
|
||
window.adminCharts.downloadsMinute = new Chart(downloadsMinuteCtx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: downloadsMinuteData.map(d => d.time),
|
||
datasets: [{
|
||
label: 'Downloads',
|
||
data: downloadsMinuteData.map(d => d.count),
|
||
backgroundColor: 'rgba(34, 197, 94, 0.1)',
|
||
borderColor: 'rgba(34, 197, 94, 1)',
|
||
borderWidth: 2,
|
||
fill: true,
|
||
tension: 0.4,
|
||
pointRadius: 2,
|
||
pointHoverRadius: 4,
|
||
pointBackgroundColor: 'rgba(34, 197, 94, 1)',
|
||
pointBorderColor: '#ffffff',
|
||
pointBorderWidth: 1,
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
display: false
|
||
},
|
||
tooltip: {
|
||
backgroundColor: isDarkMode ? '#1f2937' : '#ffffff',
|
||
titleColor: textColor,
|
||
bodyColor: textColor,
|
||
borderColor: gridColor,
|
||
borderWidth: 1,
|
||
padding: 12,
|
||
displayColors: false,
|
||
callbacks: {
|
||
label: function(context) {
|
||
return 'Downloads: ' + context.parsed.y.toLocaleString();
|
||
}
|
||
}
|
||
}
|
||
},
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true,
|
||
ticks: {
|
||
color: textColor,
|
||
precision: 0
|
||
},
|
||
grid: {
|
||
color: gridColor,
|
||
drawBorder: false
|
||
}
|
||
},
|
||
x: {
|
||
ticks: {
|
||
color: textColor,
|
||
maxRotation: 45,
|
||
minRotation: 45,
|
||
maxTicksLimit: 12
|
||
},
|
||
grid: {
|
||
color: gridColor,
|
||
drawBorder: false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// API Hits Per Minute Chart
|
||
const apiHitsMinuteCtx = document.getElementById('apiHitsMinuteChart');
|
||
if (apiHitsMinuteCtx) {
|
||
const apiHitsMinuteData = JSON.parse(apiHitsMinuteCtx.getAttribute('data-chart-data') || '[]');
|
||
window.adminCharts.apiHitsMinute = new Chart(apiHitsMinuteCtx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: apiHitsMinuteData.map(d => d.time),
|
||
datasets: [{
|
||
label: 'API Hits',
|
||
data: apiHitsMinuteData.map(d => d.count),
|
||
backgroundColor: 'rgba(147, 51, 234, 0.1)',
|
||
borderColor: 'rgba(147, 51, 234, 1)',
|
||
borderWidth: 2,
|
||
fill: true,
|
||
tension: 0.4,
|
||
pointRadius: 2,
|
||
pointHoverRadius: 4,
|
||
pointBackgroundColor: 'rgba(147, 51, 234, 1)',
|
||
pointBorderColor: '#ffffff',
|
||
pointBorderWidth: 1,
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
display: false
|
||
},
|
||
tooltip: {
|
||
backgroundColor: isDarkMode ? '#1f2937' : '#ffffff',
|
||
titleColor: textColor,
|
||
bodyColor: textColor,
|
||
borderColor: gridColor,
|
||
borderWidth: 1,
|
||
padding: 12,
|
||
displayColors: false,
|
||
callbacks: {
|
||
label: function(context) {
|
||
return 'API Hits: ' + context.parsed.y.toLocaleString();
|
||
}
|
||
}
|
||
}
|
||
},
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true,
|
||
ticks: {
|
||
color: textColor,
|
||
precision: 0
|
||
},
|
||
grid: {
|
||
color: gridColor,
|
||
drawBorder: false
|
||
}
|
||
},
|
||
x: {
|
||
ticks: {
|
||
color: textColor,
|
||
maxRotation: 45,
|
||
minRotation: 45,
|
||
maxTicksLimit: 12
|
||
},
|
||
grid: {
|
||
color: gridColor,
|
||
drawBorder: false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// CPU Usage 24 Hour Historical Chart (Line)
|
||
const cpuHistory24hCtx = document.getElementById('cpuHistory24hChart');
|
||
if (cpuHistory24hCtx) {
|
||
const cpuHistory = JSON.parse(cpuHistory24hCtx.getAttribute('data-history') || '[]');
|
||
const cpuLabel = cpuHistory24hCtx.getAttribute('data-chart-label') || 'CPU Usage %';
|
||
|
||
window.adminCharts.cpu24h = new Chart(cpuHistory24hCtx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: cpuHistory.map(d => d.time),
|
||
datasets: [{
|
||
label: cpuLabel,
|
||
data: cpuHistory.map(d => d.value),
|
||
backgroundColor: 'rgba(249, 115, 22, 0.1)',
|
||
borderColor: 'rgba(249, 115, 22, 1)',
|
||
borderWidth: 3,
|
||
fill: true,
|
||
tension: 0.4,
|
||
pointRadius: 4,
|
||
pointHoverRadius: 6,
|
||
pointBackgroundColor: 'rgba(249, 115, 22, 1)',
|
||
pointBorderColor: '#ffffff',
|
||
pointBorderWidth: 2,
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
display: false
|
||
},
|
||
tooltip: {
|
||
backgroundColor: isDarkMode ? '#1f2937' : '#ffffff',
|
||
titleColor: textColor,
|
||
bodyColor: textColor,
|
||
borderColor: gridColor,
|
||
borderWidth: 1,
|
||
padding: 12,
|
||
displayColors: false,
|
||
callbacks: {
|
||
label: function(context) {
|
||
return 'CPU: ' + context.parsed.y.toFixed(1) + '%';
|
||
}
|
||
}
|
||
}
|
||
},
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true,
|
||
max: 100,
|
||
ticks: {
|
||
color: textColor,
|
||
callback: function(value) {
|
||
return value + '%';
|
||
}
|
||
},
|
||
grid: {
|
||
color: gridColor,
|
||
drawBorder: false
|
||
}
|
||
},
|
||
x: {
|
||
ticks: {
|
||
color: textColor,
|
||
maxRotation: 45,
|
||
minRotation: 45
|
||
},
|
||
grid: {
|
||
color: gridColor,
|
||
drawBorder: false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// RAM Usage 24 Hour Historical Chart (Line)
|
||
const ramHistory24hCtx = document.getElementById('ramHistory24hChart');
|
||
if (ramHistory24hCtx) {
|
||
const ramHistory = JSON.parse(ramHistory24hCtx.getAttribute('data-history') || '[]');
|
||
const ramLabel = ramHistory24hCtx.getAttribute('data-chart-label') || 'RAM Usage %';
|
||
|
||
window.adminCharts.ram24h = new Chart(ramHistory24hCtx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: ramHistory.map(d => d.time),
|
||
datasets: [{
|
||
label: ramLabel,
|
||
data: ramHistory.map(d => d.value),
|
||
backgroundColor: 'rgba(6, 182, 212, 0.1)',
|
||
borderColor: 'rgba(6, 182, 212, 1)',
|
||
borderWidth: 3,
|
||
fill: true,
|
||
tension: 0.4,
|
||
pointRadius: 4,
|
||
pointHoverRadius: 6,
|
||
pointBackgroundColor: 'rgba(6, 182, 212, 1)',
|
||
pointBorderColor: '#ffffff',
|
||
pointBorderWidth: 2,
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
display: false
|
||
},
|
||
tooltip: {
|
||
backgroundColor: isDarkMode ? '#1f2937' : '#ffffff',
|
||
titleColor: textColor,
|
||
bodyColor: textColor,
|
||
borderColor: gridColor,
|
||
borderWidth: 1,
|
||
padding: 12,
|
||
displayColors: false,
|
||
callbacks: {
|
||
label: function(context) {
|
||
return 'RAM: ' + context.parsed.y.toFixed(1) + '%';
|
||
}
|
||
}
|
||
}
|
||
},
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true,
|
||
max: 100,
|
||
ticks: {
|
||
color: textColor,
|
||
callback: function(value) {
|
||
return value + '%';
|
||
}
|
||
},
|
||
grid: {
|
||
color: gridColor,
|
||
drawBorder: false
|
||
}
|
||
},
|
||
x: {
|
||
ticks: {
|
||
color: textColor,
|
||
maxRotation: 45,
|
||
minRotation: 45
|
||
},
|
||
grid: {
|
||
color: gridColor,
|
||
drawBorder: false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// CPU Usage 30 Day Historical Chart (Line)
|
||
const cpuHistory30dCtx = document.getElementById('cpuHistory30dChart');
|
||
if (cpuHistory30dCtx) {
|
||
const cpuHistory = JSON.parse(cpuHistory30dCtx.getAttribute('data-history') || '[]');
|
||
const cpuLabel = cpuHistory30dCtx.getAttribute('data-chart-label') || 'CPU Usage %';
|
||
|
||
window.adminCharts.cpu30d = new Chart(cpuHistory30dCtx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: cpuHistory.map(d => d.time),
|
||
datasets: [{
|
||
label: cpuLabel,
|
||
data: cpuHistory.map(d => d.value),
|
||
backgroundColor: 'rgba(249, 115, 22, 0.1)',
|
||
borderColor: 'rgba(249, 115, 22, 1)',
|
||
borderWidth: 3,
|
||
fill: true,
|
||
tension: 0.4,
|
||
pointRadius: 3,
|
||
pointHoverRadius: 5,
|
||
pointBackgroundColor: 'rgba(249, 115, 22, 1)',
|
||
pointBorderColor: '#ffffff',
|
||
pointBorderWidth: 2,
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
display: false
|
||
},
|
||
tooltip: {
|
||
backgroundColor: isDarkMode ? '#1f2937' : '#ffffff',
|
||
titleColor: textColor,
|
||
bodyColor: textColor,
|
||
borderColor: gridColor,
|
||
borderWidth: 1,
|
||
padding: 12,
|
||
displayColors: false,
|
||
callbacks: {
|
||
label: function(context) {
|
||
return 'CPU: ' + context.parsed.y.toFixed(1) + '%';
|
||
}
|
||
}
|
||
}
|
||
},
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true,
|
||
max: 100,
|
||
ticks: {
|
||
color: textColor,
|
||
callback: function(value) {
|
||
return value + '%';
|
||
}
|
||
},
|
||
grid: {
|
||
color: gridColor,
|
||
drawBorder: false
|
||
}
|
||
},
|
||
x: {
|
||
ticks: {
|
||
color: textColor,
|
||
maxRotation: 45,
|
||
minRotation: 45
|
||
},
|
||
grid: {
|
||
color: gridColor,
|
||
drawBorder: false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// RAM Usage 30 Day Historical Chart (Line)
|
||
const ramHistory30dCtx = document.getElementById('ramHistory30dChart');
|
||
if (ramHistory30dCtx) {
|
||
const ramHistory = JSON.parse(ramHistory30dCtx.getAttribute('data-history') || '[]');
|
||
const ramLabel = ramHistory30dCtx.getAttribute('data-chart-label') || 'RAM Usage %';
|
||
|
||
window.adminCharts.ram30d = new Chart(ramHistory30dCtx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: ramHistory.map(d => d.time),
|
||
datasets: [{
|
||
label: ramLabel,
|
||
data: ramHistory.map(d => d.value),
|
||
backgroundColor: 'rgba(6, 182, 212, 0.1)',
|
||
borderColor: 'rgba(6, 182, 212, 1)',
|
||
borderWidth: 3,
|
||
fill: true,
|
||
tension: 0.4,
|
||
pointRadius: 3,
|
||
pointHoverRadius: 5,
|
||
pointBackgroundColor: 'rgba(6, 182, 212, 1)',
|
||
pointBorderColor: '#ffffff',
|
||
pointBorderWidth: 2,
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: {
|
||
display: false
|
||
},
|
||
tooltip: {
|
||
backgroundColor: isDarkMode ? '#1f2937' : '#ffffff',
|
||
titleColor: textColor,
|
||
bodyColor: textColor,
|
||
borderColor: gridColor,
|
||
borderWidth: 1,
|
||
padding: 12,
|
||
displayColors: false,
|
||
callbacks: {
|
||
label: function(context) {
|
||
return 'RAM: ' + context.parsed.y.toFixed(1) + '%';
|
||
}
|
||
}
|
||
}
|
||
},
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true,
|
||
max: 100,
|
||
ticks: {
|
||
color: textColor,
|
||
callback: function(value) {
|
||
return value + '%';
|
||
}
|
||
},
|
||
grid: {
|
||
color: gridColor,
|
||
drawBorder: false
|
||
}
|
||
},
|
||
x: {
|
||
ticks: {
|
||
color: textColor,
|
||
maxRotation: 45,
|
||
minRotation: 45
|
||
},
|
||
grid: {
|
||
color: gridColor,
|
||
drawBorder: false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Start auto-refresh for system metrics (every 60 seconds)
|
||
startSystemMetricsAutoRefresh();
|
||
}
|
||
|
||
// Auto-refresh system metrics every minute
|
||
function startSystemMetricsAutoRefresh() {
|
||
// Check if we're on the admin dashboard with system metrics
|
||
if (!document.getElementById('cpuHistory24hChart')) {
|
||
return;
|
||
}
|
||
|
||
// Update current metrics display
|
||
function updateCurrentMetrics() {
|
||
fetch('/admin/api/system-metrics/current')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
// Update CPU current usage
|
||
const cpuCurrentElem = document.querySelector('[data-metric="cpu-current"]');
|
||
if (cpuCurrentElem) {
|
||
cpuCurrentElem.textContent = data.cpu.current.toFixed(1) + '%';
|
||
}
|
||
|
||
// Update CPU load averages
|
||
const load1minElem = document.querySelector('[data-metric="cpu-load-1min"]');
|
||
const load5minElem = document.querySelector('[data-metric="cpu-load-5min"]');
|
||
const load15minElem = document.querySelector('[data-metric="cpu-load-15min"]');
|
||
|
||
if (load1minElem) load1minElem.textContent = data.cpu.load_average['1min'];
|
||
if (load5minElem) load5minElem.textContent = data.cpu.load_average['5min'];
|
||
if (load15minElem) load15minElem.textContent = data.cpu.load_average['15min'];
|
||
|
||
// Update RAM current usage
|
||
const ramCurrentElem = document.querySelector('[data-metric="ram-current"]');
|
||
if (ramCurrentElem) {
|
||
ramCurrentElem.textContent = data.ram.percentage.toFixed(1) + '%';
|
||
}
|
||
|
||
const ramDetailsElem = document.querySelector('[data-metric="ram-details"]');
|
||
if (ramDetailsElem) {
|
||
ramDetailsElem.textContent = `${data.ram.used.toFixed(2)} GB / ${data.ram.total.toFixed(2)} GB`;
|
||
}
|
||
|
||
// Update last updated timestamp
|
||
const timestampElem = document.querySelector('[data-metric="last-updated"]');
|
||
if (timestampElem) {
|
||
const now = new Date();
|
||
timestampElem.textContent = now.toLocaleTimeString();
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error fetching current metrics:', error);
|
||
});
|
||
}
|
||
|
||
// Update historical charts
|
||
function updateHistoricalCharts() {
|
||
fetch('/admin/api/system-metrics/historical')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
// Update CPU 24h chart
|
||
if (window.adminCharts && window.adminCharts.cpu24h) {
|
||
window.adminCharts.cpu24h.data.labels = data.cpu.history_24h.map(d => d.time);
|
||
window.adminCharts.cpu24h.data.datasets[0].data = data.cpu.history_24h.map(d => d.value);
|
||
window.adminCharts.cpu24h.update('none'); // 'none' for no animation
|
||
}
|
||
|
||
// Update RAM 24h chart
|
||
if (window.adminCharts && window.adminCharts.ram24h) {
|
||
window.adminCharts.ram24h.data.labels = data.ram.history_24h.map(d => d.time);
|
||
window.adminCharts.ram24h.data.datasets[0].data = data.ram.history_24h.map(d => d.value);
|
||
window.adminCharts.ram24h.update('none');
|
||
}
|
||
|
||
// Update CPU 30d chart
|
||
if (window.adminCharts && window.adminCharts.cpu30d) {
|
||
window.adminCharts.cpu30d.data.labels = data.cpu.history_30d.map(d => d.time);
|
||
window.adminCharts.cpu30d.data.datasets[0].data = data.cpu.history_30d.map(d => d.value);
|
||
window.adminCharts.cpu30d.update('none');
|
||
}
|
||
|
||
// Update RAM 30d chart
|
||
if (window.adminCharts && window.adminCharts.ram30d) {
|
||
window.adminCharts.ram30d.data.labels = data.ram.history_30d.map(d => d.time);
|
||
window.adminCharts.ram30d.data.datasets[0].data = data.ram.history_30d.map(d => d.value);
|
||
window.adminCharts.ram30d.update('none');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error fetching historical metrics:', error);
|
||
});
|
||
}
|
||
|
||
// Update user activity minute charts
|
||
function updateUserActivityMinutes() {
|
||
fetch('/admin/api/user-activity/minutes')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
// Update Downloads Per Minute chart
|
||
if (window.adminCharts && window.adminCharts.downloadsMinute) {
|
||
window.adminCharts.downloadsMinute.data.labels = data.downloads.map(d => d.time);
|
||
window.adminCharts.downloadsMinute.data.datasets[0].data = data.downloads.map(d => d.count);
|
||
window.adminCharts.downloadsMinute.update('none');
|
||
}
|
||
|
||
// Update API Hits Per Minute chart
|
||
if (window.adminCharts && window.adminCharts.apiHitsMinute) {
|
||
window.adminCharts.apiHitsMinute.data.labels = data.api_hits.map(d => d.time);
|
||
window.adminCharts.apiHitsMinute.data.datasets[0].data = data.api_hits.map(d => d.count);
|
||
window.adminCharts.apiHitsMinute.update('none');
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error fetching user activity minutes:', error);
|
||
});
|
||
}
|
||
|
||
// Initial update
|
||
updateCurrentMetrics();
|
||
|
||
// Update current metrics every 60 seconds (1 minute)
|
||
setInterval(updateCurrentMetrics, 60000);
|
||
|
||
// Update historical charts every 5 minutes (to reduce load)
|
||
setInterval(updateHistoricalCharts, 300000);
|
||
|
||
// Update user activity minute charts every 60 seconds (1 minute)
|
||
if (window.adminCharts && (window.adminCharts.downloadsMinute || window.adminCharts.apiHitsMinute)) {
|
||
setInterval(updateUserActivityMinutes, 60000);
|
||
}
|
||
}
|
||
|
||
// Admin Groups Management
|
||
function initAdminGroups() {
|
||
// Group Edit Form Validation
|
||
const groupEditForm = document.getElementById('groupForm');
|
||
if (groupEditForm) {
|
||
groupEditForm.addEventListener('submit', function(event) {
|
||
const firstRecord = document.getElementById('first_record');
|
||
const lastRecord = document.getElementById('last_record');
|
||
|
||
if (!firstRecord || !lastRecord) return;
|
||
|
||
const firstVal = parseInt(firstRecord.value);
|
||
const lastVal = parseInt(lastRecord.value);
|
||
|
||
if (firstVal > lastVal && lastVal > 0) {
|
||
event.preventDefault();
|
||
alert('First record ID cannot be greater than last record ID');
|
||
return false;
|
||
}
|
||
});
|
||
}
|
||
|
||
// Group Bulk Form Validation
|
||
const groupBulkForm = document.getElementById('groupBulkForm');
|
||
if (groupBulkForm) {
|
||
groupBulkForm.addEventListener('submit', function(event) {
|
||
const groupfilter = document.getElementById('groupfilter');
|
||
if (!groupfilter) return;
|
||
|
||
const filterValue = groupfilter.value.trim();
|
||
|
||
if (filterValue === '') {
|
||
event.preventDefault();
|
||
alert('Please enter a group pattern');
|
||
return false;
|
||
}
|
||
|
||
// Simple regex validation
|
||
try {
|
||
new RegExp(filterValue);
|
||
} catch(e) {
|
||
event.preventDefault();
|
||
alert('Invalid regex pattern: ' + e.message);
|
||
return false;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
function showResetAllModal() {
|
||
const modal = document.getElementById('resetAllModal');
|
||
if (modal) {
|
||
modal.classList.remove('hidden');
|
||
}
|
||
}
|
||
|
||
function hideResetAllModal() {
|
||
const modal = document.getElementById('resetAllModal');
|
||
if (modal) {
|
||
modal.classList.add('hidden');
|
||
}
|
||
}
|
||
|
||
function showPurgeAllModal() {
|
||
const modal = document.getElementById('purgeAllModal');
|
||
if (modal) {
|
||
modal.classList.remove('hidden');
|
||
}
|
||
}
|
||
|
||
function hidePurgeAllModal() {
|
||
const modal = document.getElementById('purgeAllModal');
|
||
if (modal) {
|
||
modal.classList.add('hidden');
|
||
}
|
||
}
|
||
|
||
function ajax_group_status(id, status) {
|
||
const ajaxUrl = document.querySelector('[data-ajax-url]')?.dataset.ajaxUrl;
|
||
const csrfToken = document.querySelector('[data-csrf-token]')?.dataset.csrfToken;
|
||
|
||
if (!ajaxUrl || !csrfToken) return;
|
||
|
||
// Ensure status is an integer
|
||
const statusInt = parseInt(status);
|
||
|
||
fetch(ajaxUrl, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRF-TOKEN': csrfToken
|
||
},
|
||
body: JSON.stringify({
|
||
action: 'toggle_group_active_status',
|
||
group_id: parseInt(id),
|
||
group_status: statusInt
|
||
})
|
||
})
|
||
.then(response => response.text())
|
||
.then(data => {
|
||
// Update succeeded, regenerate the button with the new status
|
||
const groupCell = document.getElementById('group-' + id);
|
||
if (groupCell) {
|
||
// The status parameter is what we're setting it TO (not toggling)
|
||
// status = 1 means we're activating, status = 0 means we're deactivating
|
||
const isActive = statusInt === 1;
|
||
|
||
// Generate new button HTML with proper data attributes
|
||
const buttonHTML = isActive
|
||
? `<button type="button"
|
||
data-action="toggle-group-status"
|
||
data-group-id="${id}"
|
||
data-status="0"
|
||
class="inline-flex items-center px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 hover:bg-green-200">
|
||
<i class="fa fa-check-circle mr-1"></i>Active
|
||
</button>`
|
||
: `<button type="button"
|
||
data-action="toggle-group-status"
|
||
data-group-id="${id}"
|
||
data-status="1"
|
||
class="inline-flex items-center px-3 py-1 text-xs font-semibold rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-200">
|
||
<i class="fa fa-times-circle mr-1"></i>Inactive
|
||
</button>`;
|
||
|
||
groupCell.innerHTML = buttonHTML;
|
||
|
||
// Show success message
|
||
if (typeof showToast === 'function') {
|
||
showToast(isActive ? 'Group activated successfully' : 'Group deactivated successfully', 'success');
|
||
}
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error toggling group status:', error);
|
||
if (typeof showToast === 'function') {
|
||
showToast('Error updating group status', 'error');
|
||
}
|
||
});
|
||
}
|
||
|
||
function ajax_backfill_status(id, status) {
|
||
const ajaxUrl = document.querySelector('[data-ajax-url]')?.dataset.ajaxUrl;
|
||
const csrfToken = document.querySelector('[data-csrf-token]')?.dataset.csrfToken;
|
||
|
||
if (!ajaxUrl || !csrfToken) return;
|
||
|
||
// Ensure status is an integer
|
||
const statusInt = parseInt(status);
|
||
|
||
fetch(ajaxUrl, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRF-TOKEN': csrfToken
|
||
},
|
||
body: JSON.stringify({
|
||
action: 'toggle_group_backfill',
|
||
group_id: parseInt(id),
|
||
backfill: statusInt
|
||
})
|
||
})
|
||
.then(response => response.text())
|
||
.then(data => {
|
||
// Update succeeded, regenerate the button with the new status
|
||
const backfillCell = document.getElementById('backfill-' + id);
|
||
if (backfillCell) {
|
||
// The status parameter is what we're setting it TO (not toggling)
|
||
// status = 1 means we're enabling, status = 0 means we're disabling
|
||
const isEnabled = statusInt === 1;
|
||
|
||
// Generate new button HTML with proper data attributes
|
||
const buttonHTML = isEnabled
|
||
? `<button type="button"
|
||
data-action="toggle-backfill"
|
||
data-group-id="${id}"
|
||
data-status="0"
|
||
class="inline-flex items-center px-3 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800 hover:bg-blue-200">
|
||
<i class="fa fa-check-circle mr-1"></i>Enabled
|
||
</button>`
|
||
: `<button type="button"
|
||
data-action="toggle-backfill"
|
||
data-group-id="${id}"
|
||
data-status="1"
|
||
class="inline-flex items-center px-3 py-1 text-xs font-semibold rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-200">
|
||
<i class="fa fa-times-circle mr-1"></i>Disabled
|
||
</button>`;
|
||
|
||
backfillCell.innerHTML = buttonHTML;
|
||
|
||
// Show success message
|
||
if (typeof showToast === 'function') {
|
||
showToast(isEnabled ? 'Backfill enabled successfully' : 'Backfill disabled successfully', 'success');
|
||
}
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error toggling backfill status:', error);
|
||
if (typeof showToast === 'function') {
|
||
showToast('Error updating backfill status', 'error');
|
||
}
|
||
});
|
||
}
|
||
|
||
function ajax_group_reset(id) {
|
||
if (!confirm('Are you sure you want to reset this group?')) {
|
||
return;
|
||
}
|
||
|
||
const ajaxUrl = document.querySelector('[data-ajax-url]')?.dataset.ajaxUrl;
|
||
const csrfToken = document.querySelector('[data-csrf-token]')?.dataset.csrfToken;
|
||
|
||
if (!ajaxUrl || !csrfToken) return;
|
||
|
||
fetch(ajaxUrl, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRF-TOKEN': csrfToken
|
||
},
|
||
body: JSON.stringify({
|
||
action: 'reset_group',
|
||
group_id: id
|
||
})
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
location.reload();
|
||
}
|
||
})
|
||
.catch(error => console.error('Error resetting group:', error));
|
||
}
|
||
|
||
function confirmGroupDelete(id) {
|
||
if (!confirm('Are you sure you want to delete this group?')) {
|
||
return;
|
||
}
|
||
|
||
const ajaxUrl = document.querySelector('[data-ajax-url]')?.dataset.ajaxUrl;
|
||
const csrfToken = document.querySelector('[data-csrf-token]')?.dataset.csrfToken;
|
||
|
||
if (!ajaxUrl || !csrfToken) return;
|
||
|
||
fetch(ajaxUrl, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRF-TOKEN': csrfToken
|
||
},
|
||
body: JSON.stringify({
|
||
action: 'delete_group',
|
||
group_id: id
|
||
})
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
const row = document.getElementById('grouprow-' + id);
|
||
if (row) {
|
||
row.classList.add('fade-out');
|
||
setTimeout(() => row.remove(), 300);
|
||
}
|
||
}
|
||
})
|
||
.catch(error => console.error('Error deleting group:', error));
|
||
}
|
||
|
||
function confirmGroupPurge(id) {
|
||
if (!confirm('Are you sure you want to purge this group? This will delete all releases and binaries!')) {
|
||
return;
|
||
}
|
||
|
||
const ajaxUrl = document.querySelector('[data-ajax-url]')?.dataset.ajaxUrl;
|
||
const csrfToken = document.querySelector('[data-csrf-token]')?.dataset.csrfToken;
|
||
|
||
if (!ajaxUrl || !csrfToken) return;
|
||
|
||
fetch(ajaxUrl, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRF-TOKEN': csrfToken
|
||
},
|
||
body: JSON.stringify({
|
||
action: 'purge_group',
|
||
group_id: id
|
||
})
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
location.reload();
|
||
}
|
||
})
|
||
.catch(error => console.error('Error purging group:', error));
|
||
}
|
||
|
||
function ajax_group_reset_all() {
|
||
const ajaxUrl = document.querySelector('[data-ajax-url]')?.dataset.ajaxUrl;
|
||
const csrfToken = document.querySelector('[data-csrf-token]')?.dataset.csrfToken;
|
||
|
||
if (!ajaxUrl || !csrfToken) return;
|
||
|
||
fetch(ajaxUrl, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRF-TOKEN': csrfToken
|
||
},
|
||
body: JSON.stringify({
|
||
action: 'reset_all_groups'
|
||
})
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
hideResetAllModal();
|
||
location.reload();
|
||
}
|
||
})
|
||
.catch(error => console.error('Error resetting all groups:', error));
|
||
}
|
||
|
||
function ajax_group_purge_all() {
|
||
const ajaxUrl = document.querySelector('[data-ajax-url]')?.dataset.ajaxUrl;
|
||
const csrfToken = document.querySelector('[data-csrf-token]')?.dataset.csrfToken;
|
||
|
||
if (!ajaxUrl || !csrfToken) return;
|
||
|
||
fetch(ajaxUrl, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRF-TOKEN': csrfToken
|
||
},
|
||
body: JSON.stringify({
|
||
action: 'purge_all_groups'
|
||
})
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
hidePurgeAllModal();
|
||
location.reload();
|
||
}
|
||
})
|
||
.catch(error => console.error('Error purging all groups:', error));
|
||
}
|
||
|
||
// ========================================
|
||
// Admin-specific functions
|
||
// ========================================
|
||
|
||
// Admin Categories - Delete confirmation
|
||
window.confirmDelete = window.confirmDelete || function(id) {
|
||
const modal = document.getElementById('deleteModal');
|
||
const deleteLink = document.getElementById('confirmDeleteLink');
|
||
if (modal && deleteLink) {
|
||
deleteLink.href = window.location.origin + '/admin/category-delete?id=' + id;
|
||
modal.classList.remove('hidden');
|
||
}
|
||
};
|
||
|
||
window.closeDeleteModal = function() {
|
||
const modal = document.getElementById('deleteModal');
|
||
if (modal) {
|
||
modal.classList.add('hidden');
|
||
}
|
||
};
|
||
|
||
// Admin Console/Books - Image preview on file upload
|
||
function initAdminImagePreview() {
|
||
// Console cover preview
|
||
const consoleCoverInput = document.getElementById('cover');
|
||
if (consoleCoverInput) {
|
||
consoleCoverInput.addEventListener('change', function(e) {
|
||
if (e.target.files && e.target.files[0]) {
|
||
const reader = new FileReader();
|
||
reader.onload = function(event) {
|
||
const imgs = document.querySelectorAll('img[alt]');
|
||
imgs.forEach(img => {
|
||
if (img.closest('form')?.contains(consoleCoverInput)) {
|
||
img.src = event.target.result;
|
||
}
|
||
});
|
||
};
|
||
reader.readAsDataURL(e.target.files[0]);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// Admin Users - Verify user modal
|
||
window.showVerifyModal = function(event, form) {
|
||
event.preventDefault();
|
||
window.currentVerifyForm = form;
|
||
const modal = document.getElementById('verifyUserModal');
|
||
if (modal) {
|
||
modal.classList.remove('hidden');
|
||
}
|
||
};
|
||
|
||
window.hideVerifyModal = function() {
|
||
const modal = document.getElementById('verifyUserModal');
|
||
if (modal) {
|
||
modal.classList.add('hidden');
|
||
}
|
||
window.currentVerifyForm = null;
|
||
};
|
||
|
||
window.submitVerifyForm = function() {
|
||
if (window.currentVerifyForm) {
|
||
window.currentVerifyForm.submit();
|
||
}
|
||
};
|
||
|
||
// Admin Invitations - Select all checkboxes
|
||
function initAdminInvitationsSelectAll() {
|
||
const selectAllCheckbox = document.getElementById('select_all');
|
||
if (selectAllCheckbox) {
|
||
selectAllCheckbox.addEventListener('change', function(e) {
|
||
document.querySelectorAll('.invitation-checkbox').forEach(cb => {
|
||
cb.checked = e.target.checked;
|
||
});
|
||
});
|
||
}
|
||
}
|
||
|
||
// Admin Invitations - Copy to clipboard
|
||
window.copyToClipboard = function(text) {
|
||
navigator.clipboard.writeText(text).then(function() {
|
||
if (typeof showToast === 'function') {
|
||
showToast('Link copied to clipboard!', 'success');
|
||
} else {
|
||
alert('Link copied to clipboard!');
|
||
}
|
||
}, function(err) {
|
||
console.error('Could not copy text: ', err);
|
||
alert('Failed to copy to clipboard');
|
||
});
|
||
};
|
||
|
||
// Admin Blacklist - Delete via AJAX
|
||
window.ajax_binaryblacklist_delete = function(id) {
|
||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
|
||
|
||
fetch(window.location.origin + '/admin/binaryblacklist-delete?id=' + id, {
|
||
method: 'GET',
|
||
headers: {
|
||
'X-Requested-With': 'XMLHttpRequest',
|
||
'X-CSRF-TOKEN': csrfToken
|
||
}
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
const row = document.getElementById('row-' + id);
|
||
if (row) {
|
||
row.style.transition = 'opacity 0.3s';
|
||
row.style.opacity = '0';
|
||
setTimeout(() => row.remove(), 300);
|
||
}
|
||
if (typeof showToast === 'function') {
|
||
showToast('Blacklist entry deleted successfully', 'success');
|
||
}
|
||
} else {
|
||
if (typeof showToast === 'function') {
|
||
showToast('Error deleting blacklist entry', 'error');
|
||
}
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error:', error);
|
||
if (typeof showToast === 'function') {
|
||
showToast('Error deleting blacklist entry', 'error');
|
||
}
|
||
});
|
||
};
|
||
|
||
// Admin Comments - Delete modal
|
||
window.openDeleteModal = function(commentId, commentText) {
|
||
const modal = document.getElementById('deleteModal');
|
||
const form = document.getElementById('deleteForm');
|
||
const preview = document.getElementById('deleteCommentPreview');
|
||
|
||
if (modal && form && preview) {
|
||
// Set the form action
|
||
form.action = window.location.origin + '/admin/comments-delete/' + commentId;
|
||
|
||
// Set the comment preview
|
||
preview.textContent = '"' + commentText.substring(0, 100) + (commentText.length >= 100 ? '..."' : '"');
|
||
|
||
// Show the modal
|
||
modal.classList.remove('hidden');
|
||
modal.classList.add('flex');
|
||
|
||
// Prevent body scroll
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
};
|
||
|
||
window.closeDeleteModal = window.closeDeleteModal || function() {
|
||
const modal = document.getElementById('deleteModal');
|
||
if (modal) {
|
||
// Hide the modal
|
||
modal.classList.add('hidden');
|
||
modal.classList.remove('flex');
|
||
|
||
// Restore body scroll
|
||
document.body.style.overflow = '';
|
||
}
|
||
};
|
||
|
||
// Admin Regex Forms - Validation
|
||
function initAdminRegexFormValidation() {
|
||
// Release naming regex form
|
||
const releaseNamingForm = document.getElementById('regexForm');
|
||
if (releaseNamingForm && window.location.pathname.includes('release-naming')) {
|
||
releaseNamingForm.addEventListener('submit', function(event) {
|
||
const groupRegex = document.getElementById('group_regex');
|
||
const regex = document.getElementById('regex');
|
||
const ordinal = document.getElementById('ordinal');
|
||
|
||
if (!groupRegex?.value.trim() || !regex?.value.trim() || !ordinal?.value) {
|
||
event.preventDefault();
|
||
alert('Please fill in all required fields.');
|
||
return false;
|
||
}
|
||
});
|
||
}
|
||
|
||
// Category regex form
|
||
if (releaseNamingForm && window.location.pathname.includes('category')) {
|
||
releaseNamingForm.addEventListener('submit', function(event) {
|
||
const groupRegex = document.getElementById('group_regex');
|
||
const regex = document.getElementById('regex');
|
||
const ordinal = document.getElementById('ordinal');
|
||
|
||
if (!groupRegex?.value.trim() || !regex?.value.trim() || !ordinal?.value) {
|
||
event.preventDefault();
|
||
alert('Please fill in all required fields.');
|
||
return false;
|
||
}
|
||
});
|
||
}
|
||
|
||
// Collection regex form
|
||
if (releaseNamingForm && window.location.pathname.includes('collection')) {
|
||
releaseNamingForm.addEventListener('submit', function(event) {
|
||
const groupRegex = document.getElementById('group_regex');
|
||
const regex = document.getElementById('regex');
|
||
const ordinal = document.getElementById('ordinal');
|
||
|
||
if (!groupRegex?.value.trim() || !regex?.value.trim() || !ordinal?.value) {
|
||
event.preventDefault();
|
||
alert('Please fill in all required fields.');
|
||
return false;
|
||
}
|
||
});
|
||
}
|
||
|
||
// Blacklist form
|
||
const blacklistForm = document.getElementById('blacklistForm');
|
||
if (blacklistForm) {
|
||
blacklistForm.addEventListener('submit', function(event) {
|
||
const groupname = document.getElementById('groupname');
|
||
const regex = document.getElementById('regex');
|
||
|
||
if (!groupname?.value.trim() || !regex?.value.trim()) {
|
||
event.preventDefault();
|
||
alert('Please fill in all required fields.');
|
||
return false;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// Admin Tmux - Select color highlighting
|
||
function initAdminTmuxSelectColors() {
|
||
const tmuxForm = document.getElementById('tmuxForm');
|
||
if (!tmuxForm) return;
|
||
|
||
// Function to update select colors based on value
|
||
function updateSelectColor(select) {
|
||
select.classList.remove('select-yes', 'select-no', 'select-other');
|
||
|
||
const value = select.value.toLowerCase();
|
||
if (value === '1' || value === 'true' || value === 'yes') {
|
||
select.classList.add('select-yes');
|
||
} else if (value === '0' || value === 'false' || value === 'no') {
|
||
select.classList.add('select-no');
|
||
} else {
|
||
select.classList.add('select-other');
|
||
}
|
||
}
|
||
|
||
// Apply to all select elements in the form
|
||
const selects = tmuxForm.querySelectorAll('select');
|
||
selects.forEach(select => {
|
||
// Initial color
|
||
updateSelectColor(select);
|
||
|
||
// Update on change
|
||
select.addEventListener('change', function() {
|
||
updateSelectColor(this);
|
||
});
|
||
});
|
||
}
|
||
|
||
// Initialize all admin-specific features
|
||
function initAdminSpecificFeatures() {
|
||
initAdminImagePreview();
|
||
initAdminInvitationsSelectAll();
|
||
initAdminRegexFormValidation();
|
||
initAdminTmuxSelectColors();
|
||
initAdminDeletedUsers();
|
||
|
||
// Close delete modal when clicking outside
|
||
const deleteModal = document.getElementById('deleteModal');
|
||
if (deleteModal) {
|
||
deleteModal.addEventListener('click', function(e) {
|
||
if (e.target === this) {
|
||
closeDeleteModal();
|
||
}
|
||
});
|
||
}
|
||
|
||
// Close verify modal when clicking outside
|
||
const verifyUserModal = document.getElementById('verifyUserModal');
|
||
if (verifyUserModal) {
|
||
verifyUserModal.addEventListener('click', function(event) {
|
||
if (event.target === this) {
|
||
hideVerifyModal();
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// Admin Deleted Users page functionality
|
||
function initAdminDeletedUsers() {
|
||
// Select all checkbox
|
||
const selectAllCheckbox = document.getElementById('selectAll');
|
||
if (selectAllCheckbox) {
|
||
selectAllCheckbox.addEventListener('change', function() {
|
||
const checkboxes = document.querySelectorAll('.user-checkbox');
|
||
checkboxes.forEach(checkbox => {
|
||
checkbox.checked = this.checked;
|
||
});
|
||
});
|
||
}
|
||
|
||
// Bulk action confirmation
|
||
window.confirmBulkAction = function() {
|
||
const action = document.getElementById('bulkAction')?.value;
|
||
const checkedBoxes = document.querySelectorAll('.user-checkbox:checked');
|
||
const validationError = document.getElementById('validationError');
|
||
const validationErrorMessage = document.getElementById('validationErrorMessage');
|
||
|
||
if (!action) {
|
||
if (validationError && validationErrorMessage) {
|
||
validationErrorMessage.textContent = 'Please select an action from the dropdown.';
|
||
validationError.classList.remove('hidden');
|
||
}
|
||
return false;
|
||
}
|
||
|
||
if (checkedBoxes.length === 0) {
|
||
if (validationError && validationErrorMessage) {
|
||
validationErrorMessage.textContent = 'Please select at least one user.';
|
||
validationError.classList.remove('hidden');
|
||
}
|
||
return false;
|
||
}
|
||
|
||
// Hide validation error if showing
|
||
if (validationError) {
|
||
validationError.classList.add('hidden');
|
||
}
|
||
|
||
const count = checkedBoxes.length;
|
||
const actionText = action === 'restore' ? 'restore' : 'permanently delete';
|
||
|
||
return confirm(`Are you sure you want to ${actionText} ${count} user${count > 1 ? 's' : ''}?`);
|
||
};
|
||
|
||
// Individual action confirmations
|
||
document.querySelectorAll('.inline-form button[data-confirm]').forEach(button => {
|
||
button.addEventListener('click', function(e) {
|
||
const message = this.getAttribute('data-confirm');
|
||
if (!confirm(message)) {
|
||
e.preventDefault();
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// My Movies page functionality
|
||
function initMyMovies() {
|
||
// Confirm before removing movies
|
||
document.querySelectorAll('.confirm_action').forEach(element => {
|
||
element.addEventListener('click', function(e) {
|
||
if (!confirm('Are you sure you want to remove this movie from your watchlist?')) {
|
||
e.preventDefault();
|
||
}
|
||
});
|
||
});
|
||
|
||
// Image fallback for movie covers
|
||
document.querySelectorAll('img[data-fallback-src]').forEach(img => {
|
||
img.addEventListener('error', function() {
|
||
const fallback = this.getAttribute('data-fallback-src');
|
||
if (fallback && this.src !== fallback) {
|
||
this.src = fallback;
|
||
}
|
||
});
|
||
});
|
||
|
||
// Initialize Bootstrap tooltips if they exist
|
||
if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
|
||
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
|
||
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
|
||
}
|
||
}
|
||
|
||
// Auth pages functionality
|
||
function initAuthPages() {
|
||
// Auto-hide success messages after 5 seconds on login page
|
||
if (window.location.pathname.includes('/login')) {
|
||
setTimeout(function() {
|
||
const alerts = document.querySelectorAll('.bg-green-50, .bg-blue-50');
|
||
alerts.forEach(function(alert) {
|
||
alert.style.transition = 'opacity 0.5s ease-out';
|
||
alert.style.opacity = '0';
|
||
setTimeout(() => alert.remove(), 500);
|
||
});
|
||
}, 5000);
|
||
}
|
||
|
||
// 2FA verification - Auto-submit when 6 digits are entered
|
||
const otpInput = document.getElementById('one_time_password');
|
||
if (otpInput) {
|
||
otpInput.addEventListener('input', function(e) {
|
||
// Remove non-numeric characters
|
||
this.value = this.value.replace(/[^0-9]/g, '');
|
||
|
||
// Auto-submit when 6 digits are entered
|
||
if (this.value.length === 6) {
|
||
// Small delay to show the complete code before submitting
|
||
setTimeout(() => {
|
||
this.form.submit();
|
||
}, 300);
|
||
}
|
||
});
|
||
|
||
// Focus on input when page loads
|
||
otpInput.focus();
|
||
}
|
||
}
|
||
|
||
// Profile edit page functionality
|
||
function initProfileEdit() {
|
||
// 2FA Disable Form Toggle
|
||
const toggleBtn = document.getElementById('toggle-disable-2fa-btn');
|
||
const cancelBtn = document.getElementById('cancel-disable-2fa-btn');
|
||
const formContainer = document.getElementById('disable-2fa-form-container');
|
||
|
||
if (toggleBtn && formContainer) {
|
||
toggleBtn.addEventListener('click', function() {
|
||
formContainer.style.display = formContainer.style.display === 'none' ? 'block' : 'none';
|
||
});
|
||
}
|
||
|
||
if (cancelBtn && formContainer) {
|
||
cancelBtn.addEventListener('click', function() {
|
||
formContainer.style.display = 'none';
|
||
// Clear password field
|
||
const passwordInput = document.getElementById('disable_2fa_password');
|
||
if (passwordInput) {
|
||
passwordInput.value = '';
|
||
}
|
||
});
|
||
}
|
||
|
||
// Theme preference instant preview
|
||
const themeRadios = document.querySelectorAll('input[name="theme_preference"]');
|
||
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||
|
||
function applyTheme(themeValue) {
|
||
const html = document.documentElement;
|
||
|
||
if (themeValue === 'system') {
|
||
// Use system preference
|
||
if (mediaQuery.matches) {
|
||
html.classList.add('dark');
|
||
} else {
|
||
html.classList.remove('dark');
|
||
}
|
||
} else if (themeValue === 'dark') {
|
||
html.classList.add('dark');
|
||
} else {
|
||
html.classList.remove('dark');
|
||
}
|
||
}
|
||
|
||
themeRadios.forEach(radio => {
|
||
radio.addEventListener('change', function() {
|
||
applyTheme(this.value);
|
||
});
|
||
});
|
||
|
||
// Listen to system preference changes if 'system' is selected
|
||
mediaQuery.addEventListener('change', function(e) {
|
||
const selectedTheme = document.querySelector('input[name="theme_preference"]:checked')?.value;
|
||
if (selectedTheme === 'system') {
|
||
applyTheme('system');
|
||
}
|
||
});
|
||
}
|
||
|
||
// Details page image modal functionality
|
||
function initDetailsPageImageModal() {
|
||
window.openImageModal = function(imageUrl, title) {
|
||
const modal = document.getElementById('imageModal');
|
||
const modalImage = document.getElementById('imageModalImage');
|
||
const modalTitle = document.getElementById('imageModalTitle');
|
||
|
||
if (modal && modalImage) {
|
||
modalImage.src = imageUrl;
|
||
if (modalTitle) {
|
||
modalTitle.textContent = title || '';
|
||
}
|
||
modal.classList.remove('hidden');
|
||
modal.classList.add('flex');
|
||
|
||
// Prevent body scroll when modal is open
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
};
|
||
|
||
window.closeImageModal = function() {
|
||
const modal = document.getElementById('imageModal');
|
||
if (modal) {
|
||
modal.classList.add('hidden');
|
||
modal.classList.remove('flex');
|
||
|
||
// Restore body scroll
|
||
document.body.style.overflow = '';
|
||
}
|
||
};
|
||
|
||
// Close modal when clicking outside the image
|
||
const imageModal = document.getElementById('imageModal');
|
||
if (imageModal) {
|
||
imageModal.addEventListener('click', function(e) {
|
||
if (e.target === this) {
|
||
closeImageModal();
|
||
}
|
||
});
|
||
}
|
||
|
||
// Close modal with Escape key
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape') {
|
||
const modal = document.getElementById('imageModal');
|
||
if (modal && !modal.classList.contains('hidden')) {
|
||
closeImageModal();
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Add to cart functionality for movie/browse pages
|
||
function initAddToCart() {
|
||
window.addToCart = function(guid) {
|
||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
|
||
const baseUrl = document.querySelector('meta[name="app-url"]')?.content || '';
|
||
|
||
fetch(baseUrl + '/cart/add', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRF-TOKEN': csrfToken,
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
},
|
||
body: JSON.stringify({ id: guid })
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
if (typeof showToast === 'function') {
|
||
showToast('Added to cart successfully!', 'success');
|
||
}
|
||
} else {
|
||
if (typeof showToast === 'function') {
|
||
showToast('Failed to add to cart', 'error');
|
||
}
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error:', error);
|
||
if (typeof showToast === 'function') {
|
||
showToast('An error occurred', 'error');
|
||
}
|
||
});
|
||
};
|
||
}
|
||
|
||
// Note: Main DOMContentLoaded event listener is already defined at the top of the file
|
||
// Just adding the new initializations to the existing initialization list above
|
||
|
||
// Show validation error message for deleted users page
|
||
window.showValidationError = function(message) {
|
||
const errorDiv = document.getElementById('validationError');
|
||
const errorMessage = document.getElementById('validationErrorMessage');
|
||
if (errorDiv && errorMessage) {
|
||
errorMessage.textContent = message;
|
||
errorDiv.classList.remove('hidden');
|
||
|
||
// Scroll to the error message
|
||
errorDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||
|
||
// Auto-hide after 5 seconds
|
||
setTimeout(() => {
|
||
errorDiv.classList.add('hidden');
|
||
}, 5000);
|
||
}
|
||
};
|
||
|
||
// Hide validation error
|
||
window.hideValidationError = function() {
|
||
const errorDiv = document.getElementById('validationError');
|
||
if (errorDiv) {
|
||
errorDiv.classList.add('hidden');
|
||
}
|
||
};
|
||
|
||
// Confirm bulk action for deleted users
|
||
window.confirmBulkAction = function(event) {
|
||
const action = document.getElementById('bulkAction')?.value;
|
||
const checkedBoxes = document.querySelectorAll('.user-checkbox:checked');
|
||
|
||
if (!action) {
|
||
event.preventDefault();
|
||
showValidationError('Please select an action from the dropdown.');
|
||
return false;
|
||
}
|
||
|
||
if (checkedBoxes.length === 0) {
|
||
event.preventDefault();
|
||
showValidationError('Please select at least one user to perform this action.');
|
||
return false;
|
||
}
|
||
|
||
// Show confirmation dialog with appropriate message
|
||
let confirmMessage = '';
|
||
if (action === 'delete') {
|
||
confirmMessage = `Are you sure you want to PERMANENTLY delete ${checkedBoxes.length} user(s)?\n\nThis action cannot be undone!`;
|
||
} else if (action === 'restore') {
|
||
confirmMessage = `Are you sure you want to restore ${checkedBoxes.length} user(s)?`;
|
||
}
|
||
|
||
if (!confirm(confirmMessage)) {
|
||
event.preventDefault();
|
||
return false;
|
||
}
|
||
|
||
return true;
|
||
};
|
||
|
||
// Movies Layout Toggle Functionality
|
||
function initMoviesLayoutToggle() {
|
||
const layoutToggle = document.getElementById('layoutToggle');
|
||
const layoutToggleText = document.getElementById('layoutToggleText');
|
||
const moviesGrid = document.getElementById('moviesGrid');
|
||
|
||
if (!layoutToggle || !layoutToggleText || !moviesGrid) {
|
||
return; // Not on movies page
|
||
}
|
||
|
||
// Get saved layout preference from data attribute (from database)
|
||
// 1 = 1-column, 2 = 2-columns
|
||
let currentLayout = parseInt(moviesGrid.dataset.userLayout) || 2;
|
||
|
||
// Apply the saved layout on page load
|
||
applyLayout(currentLayout);
|
||
|
||
// Toggle layout on button click
|
||
layoutToggle.addEventListener('click', function() {
|
||
if (currentLayout === 2) {
|
||
currentLayout = 1;
|
||
} else {
|
||
currentLayout = 2;
|
||
}
|
||
|
||
// Save preference to database via AJAX
|
||
fetch('/movies/update-layout', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
|
||
},
|
||
body: JSON.stringify({
|
||
layout: currentLayout
|
||
})
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.success) {
|
||
// Apply layout after successful save
|
||
applyLayout(currentLayout);
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error saving layout preference:', error);
|
||
// Still apply layout even if save failed
|
||
applyLayout(currentLayout);
|
||
});
|
||
});
|
||
|
||
function applyLayout(layout) {
|
||
// Get all movie poster images and placeholder divs
|
||
const posterImages = moviesGrid.querySelectorAll('img[alt], .bg-gray-200.dark\\:bg-gray-700');
|
||
|
||
// Get all release card containers
|
||
const releaseCardContainers = moviesGrid.querySelectorAll('.release-card-container');
|
||
|
||
if (layout === 1) {
|
||
// 1-column layout: larger images (w-48 h-72, original size)
|
||
moviesGrid.classList.remove('lg:grid-cols-2');
|
||
moviesGrid.classList.add('grid-cols-1');
|
||
layoutToggleText.textContent = '1 Column';
|
||
layoutToggle.querySelector('i').className = 'fas fa-th-list mr-2';
|
||
|
||
// Update image sizes to larger
|
||
posterImages.forEach(el => {
|
||
el.classList.remove('w-32', 'h-48');
|
||
el.classList.add('w-48', 'h-72');
|
||
});
|
||
|
||
// Update release card layout for 1-column view - side by side on all screens
|
||
releaseCardContainers.forEach(container => {
|
||
// Change container to flex-row with items on sides
|
||
container.classList.remove('space-y-2');
|
||
container.classList.add('flex', 'flex-row', 'items-start', 'justify-between', 'gap-3');
|
||
|
||
// Make info wrapper take available space
|
||
const infoWrapper = container.querySelector('.release-info-wrapper');
|
||
if (infoWrapper) {
|
||
infoWrapper.classList.add('flex-1', 'min-w-0');
|
||
}
|
||
|
||
// Make actions wrapper stay on the right in a horizontal row
|
||
const actionsWrapper = container.querySelector('.release-actions');
|
||
if (actionsWrapper) {
|
||
actionsWrapper.classList.remove('flex-wrap');
|
||
actionsWrapper.classList.add('flex-shrink-0', 'flex-row', 'items-center');
|
||
}
|
||
});
|
||
} else {
|
||
// 2-column layout: smaller images (w-32 h-48)
|
||
moviesGrid.classList.remove('grid-cols-1');
|
||
moviesGrid.classList.add('lg:grid-cols-2');
|
||
layoutToggleText.textContent = '2 Columns';
|
||
layoutToggle.querySelector('i').className = 'fas fa-th-large mr-2';
|
||
|
||
// Update image sizes to smaller
|
||
posterImages.forEach(el => {
|
||
el.classList.remove('w-48', 'h-72');
|
||
el.classList.add('w-32', 'h-48');
|
||
});
|
||
|
||
// Update release card layout for 2-column view - stacked vertically
|
||
releaseCardContainers.forEach(container => {
|
||
// Change back to stacked layout
|
||
container.classList.add('space-y-2');
|
||
container.classList.remove('flex', 'flex-row', 'items-start', 'justify-between', 'gap-3');
|
||
|
||
// Remove special styling from info wrapper
|
||
const infoWrapper = container.querySelector('.release-info-wrapper');
|
||
if (infoWrapper) {
|
||
infoWrapper.classList.remove('flex-1', 'min-w-0');
|
||
}
|
||
|
||
// Restore normal flex-wrap for actions wrapper
|
||
const actionsWrapper = container.querySelector('.release-actions');
|
||
if (actionsWrapper) {
|
||
actionsWrapper.classList.add('flex-wrap', 'items-center');
|
||
actionsWrapper.classList.remove('flex-shrink-0', 'flex-row');
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|