Refactor of admin.js into readable files. Big refactor
This commit is contained in:
87
map/app/public/js/admin-auth.js
Normal file
87
map/app/public/js/admin-auth.js
Normal file
@@ -0,0 +1,87 @@
|
||||
/**
|
||||
* Admin Authentication Module
|
||||
* Handles user authentication, session management, and admin authorization
|
||||
*/
|
||||
|
||||
// Check if user is authenticated as admin
|
||||
async function checkAdminAuth() {
|
||||
try {
|
||||
const response = await fetch('/api/auth/check');
|
||||
const data = await response.json();
|
||||
|
||||
console.log('Admin auth check result:', data);
|
||||
|
||||
if (!data.authenticated || !data.user?.isAdmin) {
|
||||
console.log('Redirecting to login - not authenticated or not admin');
|
||||
window.location.href = '/login.html';
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('User is authenticated as admin:', data.user);
|
||||
|
||||
// Display admin info (desktop)
|
||||
const adminInfoEl = document.getElementById('admin-info');
|
||||
if (adminInfoEl) {
|
||||
adminInfoEl.innerHTML = `
|
||||
<span>👤 ${window.adminCore.escapeHtml(data.user.email)}</span>
|
||||
<button id="logout-btn" class="btn btn-secondary btn-sm">Logout</button>
|
||||
`;
|
||||
|
||||
// Add logout event listener
|
||||
const logoutBtn = document.getElementById('logout-btn');
|
||||
if (logoutBtn) {
|
||||
logoutBtn.addEventListener('click', handleLogout);
|
||||
}
|
||||
}
|
||||
|
||||
// Display admin info (mobile)
|
||||
const mobileAdminInfo = document.getElementById('mobile-admin-info');
|
||||
if (mobileAdminInfo) {
|
||||
mobileAdminInfo.innerHTML = `
|
||||
<div>👤 ${window.adminCore.escapeHtml(data.user.email)}</div>
|
||||
<button id="mobile-logout-btn" class="btn btn-secondary btn-sm" style="margin-top: 10px; width: 100%;">Logout</button>
|
||||
`;
|
||||
|
||||
// Add logout listener for mobile button
|
||||
const mobileLogoutBtn = document.getElementById('mobile-logout-btn');
|
||||
if (mobileLogoutBtn) {
|
||||
mobileLogoutBtn.addEventListener('click', handleLogout);
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Auth check failed:', error);
|
||||
window.location.href = '/login.html';
|
||||
}
|
||||
}
|
||||
|
||||
// Handle logout
|
||||
async function handleLogout() {
|
||||
if (!confirm('Are you sure you want to logout?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/auth/logout', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
window.location.href = '/login.html';
|
||||
} else {
|
||||
window.adminCore.showStatus('Logout failed. Please try again.', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Logout error:', error);
|
||||
window.adminCore.showStatus('Logout failed. Please try again.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Export authentication functions
|
||||
window.adminAuth = {
|
||||
checkAdminAuth,
|
||||
handleLogout
|
||||
};
|
||||
324
map/app/public/js/admin-core.js
Normal file
324
map/app/public/js/admin-core.js
Normal file
@@ -0,0 +1,324 @@
|
||||
/**
|
||||
* Admin Core Module
|
||||
* Contains core utilities, navigation, viewport management, and initialization coordination
|
||||
*/
|
||||
|
||||
// Global admin state
|
||||
let adminAppState = {
|
||||
currentSection: 'dashboard'
|
||||
};
|
||||
|
||||
// Utility function to create a local date from YYYY-MM-DD string
|
||||
// This prevents timezone issues when displaying dates
|
||||
function createLocalDate(dateString) {
|
||||
if (!dateString) return null;
|
||||
const parts = dateString.split('-');
|
||||
if (parts.length !== 3) return new Date(dateString); // fallback to original behavior
|
||||
// Create date using local timezone (year, month-1, day)
|
||||
return new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]));
|
||||
}
|
||||
|
||||
// A function to set viewport dimensions for admin page
|
||||
function setAdminViewportDimensions() {
|
||||
const doc = document.documentElement;
|
||||
|
||||
// Set height and width
|
||||
doc.style.setProperty('--app-height', `${window.innerHeight}px`);
|
||||
doc.style.setProperty('--app-width', `${window.innerWidth}px`);
|
||||
|
||||
// Handle safe area insets for devices with notches or home indicators
|
||||
if (CSS.supports('padding: env(safe-area-inset-top)')) {
|
||||
doc.style.setProperty('--safe-area-top', 'env(safe-area-inset-top)');
|
||||
doc.style.setProperty('--safe-area-bottom', 'env(safe-area-inset-bottom)');
|
||||
doc.style.setProperty('--safe-area-left', 'env(safe-area-inset-left)');
|
||||
doc.style.setProperty('--safe-area-right', 'env(safe-area-inset-right)');
|
||||
} else {
|
||||
doc.style.setProperty('--safe-area-top', '0px');
|
||||
doc.style.setProperty('--safe-area-bottom', '0px');
|
||||
doc.style.setProperty('--safe-area-left', '0px');
|
||||
doc.style.setProperty('--safe-area-right', '0px');
|
||||
}
|
||||
}
|
||||
|
||||
// Add mobile menu functionality
|
||||
function setupMobileMenu() {
|
||||
const menuToggle = document.getElementById('mobile-menu-toggle');
|
||||
const sidebar = document.getElementById('admin-sidebar');
|
||||
const closeSidebar = document.getElementById('close-sidebar');
|
||||
const adminNavLinks = document.querySelectorAll('.admin-nav a');
|
||||
|
||||
if (menuToggle && sidebar) {
|
||||
// Toggle menu
|
||||
menuToggle.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('active');
|
||||
menuToggle.classList.toggle('active');
|
||||
document.body.classList.toggle('sidebar-open');
|
||||
});
|
||||
|
||||
// Close sidebar button
|
||||
if (closeSidebar) {
|
||||
closeSidebar.addEventListener('click', () => {
|
||||
sidebar.classList.remove('active');
|
||||
menuToggle.classList.remove('active');
|
||||
document.body.classList.remove('sidebar-open');
|
||||
});
|
||||
}
|
||||
|
||||
// Close sidebar when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (sidebar.classList.contains('active') &&
|
||||
!sidebar.contains(e.target) &&
|
||||
!menuToggle.contains(e.target)) {
|
||||
sidebar.classList.remove('active');
|
||||
menuToggle.classList.remove('active');
|
||||
document.body.classList.remove('sidebar-open');
|
||||
}
|
||||
});
|
||||
|
||||
// Close sidebar when navigation link is clicked on mobile
|
||||
adminNavLinks.forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
if (window.innerWidth <= 768) {
|
||||
sidebar.classList.remove('active');
|
||||
menuToggle.classList.remove('active');
|
||||
document.body.classList.remove('sidebar-open');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Setup navigation between admin sections
|
||||
function setupNavigation() {
|
||||
const navLinks = document.querySelectorAll('.admin-nav a');
|
||||
const sections = document.querySelectorAll('.admin-section');
|
||||
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const targetId = link.getAttribute('href').substring(1);
|
||||
|
||||
// Update active nav
|
||||
navLinks.forEach(l => l.classList.remove('active'));
|
||||
link.classList.add('active');
|
||||
|
||||
// Show target section
|
||||
sections.forEach(section => {
|
||||
section.style.display = section.id === targetId ? 'block' : 'none';
|
||||
});
|
||||
|
||||
// Update URL hash and app state
|
||||
window.location.hash = targetId;
|
||||
adminAppState.currentSection = targetId;
|
||||
|
||||
// Load section-specific data
|
||||
loadSectionData(targetId);
|
||||
|
||||
// Close mobile menu if open
|
||||
const sidebar = document.getElementById('admin-sidebar');
|
||||
if (sidebar && sidebar.classList.contains('open')) {
|
||||
sidebar.classList.remove('open');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Set initial active state based on current hash or default
|
||||
const currentHash = window.location.hash || '#dashboard';
|
||||
const activeLink = document.querySelector(`.admin-nav a[href="${currentHash}"]`);
|
||||
if (activeLink) {
|
||||
activeLink.classList.add('active');
|
||||
}
|
||||
|
||||
// Check for initial hash routing
|
||||
const hash = window.location.hash;
|
||||
if (hash) {
|
||||
const sectionId = hash.substring(1);
|
||||
adminAppState.currentSection = sectionId;
|
||||
if (sectionId === 'shifts') {
|
||||
showSection('shifts');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Helper function to show a specific section
|
||||
function showSection(sectionId) {
|
||||
const sections = document.querySelectorAll('.admin-section');
|
||||
const navLinks = document.querySelectorAll('.admin-nav a');
|
||||
|
||||
// Hide all sections
|
||||
sections.forEach(section => {
|
||||
section.style.display = section.id === sectionId ? 'block' : 'none';
|
||||
});
|
||||
|
||||
// Update active nav
|
||||
navLinks.forEach(link => {
|
||||
const linkTarget = link.getAttribute('href').substring(1);
|
||||
link.classList.toggle('active', linkTarget === sectionId);
|
||||
});
|
||||
|
||||
// Update app state
|
||||
adminAppState.currentSection = sectionId;
|
||||
|
||||
// Load section-specific data
|
||||
loadSectionData(sectionId);
|
||||
}
|
||||
|
||||
// Load section-specific data based on current section
|
||||
function loadSectionData(sectionId) {
|
||||
switch(sectionId) {
|
||||
case 'walk-sheet':
|
||||
if (typeof checkAndLoadWalkSheetConfig === 'function') {
|
||||
checkAndLoadWalkSheetConfig();
|
||||
}
|
||||
break;
|
||||
case 'dashboard':
|
||||
if (typeof loadDashboardData === 'function') {
|
||||
loadDashboardData();
|
||||
}
|
||||
break;
|
||||
case 'shifts':
|
||||
if (typeof loadAdminShifts === 'function') {
|
||||
console.log('Loading shifts for admin panel...');
|
||||
loadAdminShifts();
|
||||
}
|
||||
break;
|
||||
case 'users':
|
||||
if (typeof loadUsers === 'function') {
|
||||
loadUsers();
|
||||
}
|
||||
break;
|
||||
case 'convert-data':
|
||||
// Initialize data convert event listeners when section is shown
|
||||
setTimeout(() => {
|
||||
if (typeof window.setupDataConvertEventListeners === 'function') {
|
||||
console.log('Setting up data convert event listeners...');
|
||||
window.setupDataConvertEventListeners();
|
||||
} else {
|
||||
console.error('setupDataConvertEventListeners not found');
|
||||
}
|
||||
}, 100);
|
||||
break;
|
||||
case 'cuts':
|
||||
// Initialize admin cuts manager when section is shown
|
||||
setTimeout(() => {
|
||||
if (typeof window.adminCutsManager === 'object' && window.adminCutsManager.initialize) {
|
||||
if (!window.adminCutsManager.isInitialized) {
|
||||
console.log('Initializing admin cuts manager from showSection...');
|
||||
window.adminCutsManager.initialize().catch(error => {
|
||||
console.error('Failed to initialize cuts manager:', error);
|
||||
});
|
||||
} else {
|
||||
console.log('Admin cuts manager already initialized');
|
||||
}
|
||||
} else {
|
||||
console.error('adminCutsManager not found in showSection');
|
||||
}
|
||||
}, 100);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Show status message
|
||||
function showStatus(message, type = 'info') {
|
||||
let container = document.getElementById('status-container');
|
||||
|
||||
// Create container if it doesn't exist
|
||||
if (!container) {
|
||||
container = document.createElement('div');
|
||||
container.id = 'status-container';
|
||||
container.className = 'status-container';
|
||||
// Ensure proper z-index even if CSS hasn't loaded
|
||||
container.style.zIndex = '12300';
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.className = `status-message ${type}`;
|
||||
messageDiv.textContent = message;
|
||||
|
||||
// Add click to dismiss functionality
|
||||
messageDiv.addEventListener('click', () => {
|
||||
messageDiv.remove();
|
||||
});
|
||||
|
||||
// Add a small close button for better UX
|
||||
const closeBtn = document.createElement('span');
|
||||
closeBtn.innerHTML = ' ×';
|
||||
closeBtn.style.float = 'right';
|
||||
closeBtn.style.fontWeight = 'bold';
|
||||
closeBtn.style.marginLeft = '10px';
|
||||
closeBtn.style.cursor = 'pointer';
|
||||
closeBtn.setAttribute('title', 'Click to dismiss');
|
||||
messageDiv.appendChild(closeBtn);
|
||||
|
||||
container.appendChild(messageDiv);
|
||||
|
||||
// Auto-remove after 5 seconds
|
||||
setTimeout(() => {
|
||||
if (messageDiv.parentNode) {
|
||||
messageDiv.remove();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Escape HTML
|
||||
function escapeHtml(text) {
|
||||
if (text === null || text === undefined) {
|
||||
return '';
|
||||
}
|
||||
const div = document.createElement('div');
|
||||
div.textContent = String(text);
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// Debounce function for input events
|
||||
function debounce(func, wait) {
|
||||
let timeout;
|
||||
return function executedFunction(...args) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout);
|
||||
func(...args);
|
||||
};
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
}
|
||||
|
||||
// Initialize the admin core when DOM is loaded
|
||||
function initializeAdminCore() {
|
||||
// Set initial viewport dimensions and listen for resize events
|
||||
setAdminViewportDimensions();
|
||||
window.addEventListener('resize', setAdminViewportDimensions);
|
||||
window.addEventListener('orientationchange', () => {
|
||||
// Add a small delay for orientation change to complete
|
||||
setTimeout(setAdminViewportDimensions, 100);
|
||||
});
|
||||
|
||||
setupNavigation();
|
||||
setupMobileMenu();
|
||||
|
||||
// Check if URL has a hash to show specific section
|
||||
const hash = window.location.hash;
|
||||
if (hash === '#walk-sheet') {
|
||||
showSection('walk-sheet');
|
||||
} else if (hash === '#convert-data') {
|
||||
showSection('convert-data');
|
||||
} else if (hash === '#cuts') {
|
||||
showSection('cuts');
|
||||
} else {
|
||||
// Default to dashboard
|
||||
showSection('dashboard');
|
||||
}
|
||||
}
|
||||
|
||||
// Export functions for use by other modules
|
||||
window.adminCore = {
|
||||
showSection,
|
||||
showStatus,
|
||||
escapeHtml,
|
||||
debounce,
|
||||
createLocalDate,
|
||||
initializeAdminCore,
|
||||
adminAppState
|
||||
};
|
||||
394
map/app/public/js/admin-email.js
Normal file
394
map/app/public/js/admin-email.js
Normal file
@@ -0,0 +1,394 @@
|
||||
/**
|
||||
* Admin Email Broadcasting Module
|
||||
* Handles email composition, broadcasting to all users, and progress tracking
|
||||
*/
|
||||
|
||||
// Email state
|
||||
let allUsersData = [];
|
||||
|
||||
// Email All Users Functions
|
||||
async function showEmailUsersModal() {
|
||||
// Load current users data
|
||||
try {
|
||||
const response = await fetch('/api/users');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success && data.users) {
|
||||
allUsersData = data.users;
|
||||
|
||||
// Update recipients count
|
||||
const recipientsCount = document.getElementById('recipients-count');
|
||||
if (recipientsCount) {
|
||||
recipientsCount.textContent = `${allUsersData.length}`;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading users for email:', error);
|
||||
window.adminCore.showStatus('Failed to load user data', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Show modal
|
||||
const modal = document.getElementById('email-users-modal');
|
||||
if (modal) {
|
||||
modal.style.display = 'flex';
|
||||
|
||||
// Clear previous content
|
||||
const subjectInput = document.getElementById('email-subject');
|
||||
const contentEditor = document.getElementById('email-content');
|
||||
const previewCheckbox = document.getElementById('show-preview');
|
||||
const previewDiv = document.getElementById('email-preview');
|
||||
|
||||
if (subjectInput) subjectInput.value = '';
|
||||
if (contentEditor) contentEditor.innerHTML = '';
|
||||
if (previewCheckbox) previewCheckbox.checked = false;
|
||||
if (previewDiv) previewDiv.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function closeEmailUsersModal() {
|
||||
const modal = document.getElementById('email-users-modal');
|
||||
if (modal) {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function setupRichTextEditor() {
|
||||
const toolbar = document.querySelector('.rich-text-toolbar');
|
||||
const editor = document.getElementById('email-content');
|
||||
|
||||
if (!toolbar || !editor) return;
|
||||
|
||||
// Handle toolbar button clicks
|
||||
toolbar.addEventListener('click', (e) => {
|
||||
if (e.target.classList.contains('toolbar-btn')) {
|
||||
e.preventDefault();
|
||||
const command = e.target.getAttribute('data-command');
|
||||
|
||||
if (command === 'createLink') {
|
||||
const url = prompt('Enter the URL:');
|
||||
if (url) {
|
||||
document.execCommand(command, false, url);
|
||||
}
|
||||
} else {
|
||||
document.execCommand(command, false, null);
|
||||
}
|
||||
|
||||
// Update preview if visible
|
||||
updateEmailPreview();
|
||||
}
|
||||
});
|
||||
|
||||
// Update preview on content change
|
||||
editor.addEventListener('input', updateEmailPreview);
|
||||
|
||||
// Handle preview toggle
|
||||
const showPreviewCheckbox = document.getElementById('show-preview');
|
||||
if (showPreviewCheckbox) {
|
||||
showPreviewCheckbox.addEventListener('change', togglePreview);
|
||||
}
|
||||
|
||||
// Update preview when subject changes
|
||||
const subjectInput = document.getElementById('email-subject');
|
||||
if (subjectInput) {
|
||||
subjectInput.addEventListener('input', updateEmailPreview);
|
||||
}
|
||||
}
|
||||
|
||||
function togglePreview() {
|
||||
const preview = document.getElementById('email-preview');
|
||||
const checkbox = document.getElementById('show-preview');
|
||||
|
||||
if (preview && checkbox) {
|
||||
if (checkbox.checked) {
|
||||
preview.style.display = 'block';
|
||||
updateEmailPreview();
|
||||
} else {
|
||||
preview.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateEmailPreview() {
|
||||
const previewSubject = document.getElementById('preview-subject');
|
||||
const previewBody = document.getElementById('preview-body');
|
||||
const subjectInput = document.getElementById('email-subject');
|
||||
const contentEditor = document.getElementById('email-content');
|
||||
|
||||
if (previewSubject && subjectInput) {
|
||||
previewSubject.textContent = subjectInput.value || 'Your subject will appear here';
|
||||
}
|
||||
|
||||
if (previewBody && contentEditor) {
|
||||
const content = contentEditor.innerHTML || 'Your message will appear here';
|
||||
previewBody.innerHTML = content;
|
||||
}
|
||||
}
|
||||
|
||||
async function sendEmailToAllUsers(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const subjectInput = document.getElementById('email-subject');
|
||||
const contentEditor = document.getElementById('email-content');
|
||||
|
||||
const subject = subjectInput?.value.trim();
|
||||
const content = contentEditor?.innerHTML.trim();
|
||||
|
||||
if (!subject) {
|
||||
window.adminCore.showStatus('Please enter an email subject', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!content || content === '<br>' || content === '') {
|
||||
window.adminCore.showStatus('Please enter email content', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (allUsersData.length === 0) {
|
||||
window.adminCore.showStatus('No users found to email', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const confirmMessage = `Send this email to all ${allUsersData.length} users?`;
|
||||
if (!confirm(confirmMessage)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize progress tracking
|
||||
initializeEmailProgress(allUsersData.length);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/users/email-all', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
subject: subject,
|
||||
content: content
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
// Display detailed results
|
||||
updateEmailProgress(data.results);
|
||||
window.adminCore.showStatus(data.message, 'success');
|
||||
console.log('Email results:', data.results);
|
||||
} else {
|
||||
showEmailError(data.error || 'Failed to send emails');
|
||||
if (data.details) {
|
||||
console.error('Failed email details:', data.details);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error sending emails to all users:', error);
|
||||
showEmailError('Failed to send emails - Network error');
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize email progress display
|
||||
function initializeEmailProgress(totalCount) {
|
||||
const progressContainer = document.getElementById('email-progress-container');
|
||||
const statusList = document.getElementById('email-status-list');
|
||||
const pendingCountEl = document.getElementById('pending-count');
|
||||
const successCountEl = document.getElementById('success-count');
|
||||
const errorCountEl = document.getElementById('error-count');
|
||||
const progressBar = document.getElementById('email-progress-bar');
|
||||
const progressText = document.getElementById('progress-text');
|
||||
const closeBtn = document.getElementById('close-progress-btn');
|
||||
|
||||
if (!progressContainer) return;
|
||||
|
||||
// Show progress container
|
||||
progressContainer.classList.add('show');
|
||||
|
||||
// Reset counters
|
||||
if (pendingCountEl) pendingCountEl.textContent = totalCount;
|
||||
if (successCountEl) successCountEl.textContent = '0';
|
||||
if (errorCountEl) errorCountEl.textContent = '0';
|
||||
|
||||
// Reset progress bar
|
||||
if (progressBar) {
|
||||
progressBar.style.width = '0%';
|
||||
progressBar.classList.remove('complete', 'error');
|
||||
}
|
||||
if (progressText) progressText.textContent = '0%';
|
||||
|
||||
// Clear status list
|
||||
if (statusList) statusList.innerHTML = '';
|
||||
|
||||
// Hide close button initially
|
||||
if (closeBtn) closeBtn.style.display = 'none';
|
||||
|
||||
// Add status items for each user
|
||||
allUsersData.forEach(user => {
|
||||
if (statusList) {
|
||||
const statusItem = document.createElement('div');
|
||||
statusItem.className = 'email-status-item';
|
||||
statusItem.innerHTML = `
|
||||
<div class="email-status-recipient">${user.Name || user.Email}</div>
|
||||
<div class="email-status-result pending">
|
||||
<div class="progress-spinner"></div>
|
||||
<span>Sending...</span>
|
||||
</div>
|
||||
`;
|
||||
statusList.appendChild(statusItem);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Update progress with results
|
||||
function updateEmailProgress(results) {
|
||||
const statusList = document.getElementById('email-status-list');
|
||||
const pendingCountEl = document.getElementById('pending-count');
|
||||
const successCountEl = document.getElementById('success-count');
|
||||
const errorCountEl = document.getElementById('error-count');
|
||||
const progressBar = document.getElementById('email-progress-bar');
|
||||
const progressText = document.getElementById('progress-text');
|
||||
const closeBtn = document.getElementById('close-progress-btn');
|
||||
|
||||
const successful = results.successful || [];
|
||||
const failed = results.failed || [];
|
||||
const total = results.total || (successful.length + failed.length);
|
||||
|
||||
// Update counters
|
||||
if (successCountEl) successCountEl.textContent = successful.length;
|
||||
if (errorCountEl) errorCountEl.textContent = failed.length;
|
||||
if (pendingCountEl) pendingCountEl.textContent = '0';
|
||||
|
||||
// Update progress bar
|
||||
const percentage = ((successful.length + failed.length) / total * 100).toFixed(1);
|
||||
if (progressBar && progressText) {
|
||||
progressBar.style.width = percentage + '%';
|
||||
progressText.textContent = percentage + '%';
|
||||
|
||||
if (failed.length > 0) {
|
||||
progressBar.classList.add('error');
|
||||
} else {
|
||||
progressBar.classList.add('complete');
|
||||
}
|
||||
}
|
||||
|
||||
// Update individual status items
|
||||
if (statusList) {
|
||||
const statusItems = statusList.children;
|
||||
|
||||
// Update successful emails
|
||||
successful.forEach(result => {
|
||||
const statusItem = Array.from(statusItems).find(item =>
|
||||
item.querySelector('.email-status-recipient').textContent.includes(result.email) ||
|
||||
item.querySelector('.email-status-recipient').textContent.includes(result.name)
|
||||
);
|
||||
if (statusItem) {
|
||||
statusItem.querySelector('.email-status-result').innerHTML = `
|
||||
<span class="email-status-result success">✓ Sent</span>
|
||||
`;
|
||||
}
|
||||
});
|
||||
|
||||
// Update failed emails
|
||||
failed.forEach(result => {
|
||||
const statusItem = Array.from(statusItems).find(item =>
|
||||
item.querySelector('.email-status-recipient').textContent.includes(result.email) ||
|
||||
item.querySelector('.email-status-recipient').textContent.includes(result.name)
|
||||
);
|
||||
if (statusItem) {
|
||||
statusItem.querySelector('.email-status-result').innerHTML = `
|
||||
<span class="email-status-result error" title="${result.error || 'Unknown error'}">✗ Failed</span>
|
||||
`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Show close button
|
||||
if (closeBtn) {
|
||||
closeBtn.style.display = 'block';
|
||||
closeBtn.onclick = () => {
|
||||
const progressContainer = document.getElementById('email-progress-container');
|
||||
if (progressContainer) {
|
||||
progressContainer.classList.remove('show');
|
||||
}
|
||||
closeEmailUsersModal();
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Show email error
|
||||
function showEmailError(message) {
|
||||
const progressContainer = document.getElementById('email-progress-container');
|
||||
const progressBar = document.getElementById('email-progress-bar');
|
||||
const progressText = document.getElementById('progress-text');
|
||||
const closeBtn = document.getElementById('close-progress-btn');
|
||||
|
||||
// Show progress container if not visible
|
||||
if (progressContainer) {
|
||||
progressContainer.classList.add('show');
|
||||
}
|
||||
|
||||
// Update progress bar to show error
|
||||
if (progressBar && progressText) {
|
||||
progressBar.style.width = '100%';
|
||||
progressBar.classList.add('error');
|
||||
progressText.textContent = 'Error';
|
||||
}
|
||||
|
||||
// Show close button
|
||||
if (closeBtn) {
|
||||
closeBtn.style.display = 'block';
|
||||
closeBtn.onclick = () => {
|
||||
if (progressContainer) {
|
||||
progressContainer.classList.remove('show');
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
window.adminCore.showStatus(message, 'error');
|
||||
}
|
||||
|
||||
// Setup email modal event listeners
|
||||
function setupEmailModalEventListeners() {
|
||||
// Email all users functionality
|
||||
const closeEmailModalBtn = document.getElementById('close-email-modal');
|
||||
const cancelEmailBtn = document.getElementById('cancel-email-btn');
|
||||
const emailUsersForm = document.getElementById('email-users-form');
|
||||
const emailModal = document.getElementById('email-users-modal');
|
||||
|
||||
if (closeEmailModalBtn) {
|
||||
closeEmailModalBtn.addEventListener('click', closeEmailUsersModal);
|
||||
}
|
||||
|
||||
if (cancelEmailBtn) {
|
||||
cancelEmailBtn.addEventListener('click', closeEmailUsersModal);
|
||||
}
|
||||
|
||||
if (emailUsersForm) {
|
||||
emailUsersForm.addEventListener('submit', sendEmailToAllUsers);
|
||||
}
|
||||
|
||||
// Close modal when clicking outside
|
||||
if (emailModal) {
|
||||
emailModal.addEventListener('click', function(e) {
|
||||
if (e.target === emailModal) {
|
||||
closeEmailUsersModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Setup rich text editor functionality
|
||||
setupRichTextEditor();
|
||||
}
|
||||
|
||||
// Export email broadcasting functions
|
||||
window.adminEmail = {
|
||||
showEmailUsersModal,
|
||||
closeEmailUsersModal,
|
||||
setupRichTextEditor,
|
||||
togglePreview,
|
||||
updateEmailPreview,
|
||||
sendEmailToAllUsers,
|
||||
setupEmailModalEventListeners,
|
||||
getAllUsersData: () => allUsersData,
|
||||
setAllUsersData: (data) => { allUsersData = data; }
|
||||
};
|
||||
189
map/app/public/js/admin-integration.js
Normal file
189
map/app/public/js/admin-integration.js
Normal file
@@ -0,0 +1,189 @@
|
||||
/**
|
||||
* Admin Integration Module
|
||||
* Handles external service integrations (NocoDB and Listmonk)
|
||||
*/
|
||||
|
||||
// Initialize NocoDB links in admin panel
|
||||
async function initializeNocodbLinks() {
|
||||
console.log('Starting NocoDB links initialization...');
|
||||
|
||||
try {
|
||||
// Since we're in the admin panel, the user is already verified as admin
|
||||
// by the requireAdmin middleware. Let's get the URLs from the server directly.
|
||||
console.log('Fetching NocoDB URLs for admin panel...');
|
||||
const configResponse = await fetch('/api/admin/nocodb-urls');
|
||||
|
||||
if (!configResponse.ok) {
|
||||
throw new Error(`NocoDB URLs fetch failed: ${configResponse.status} ${configResponse.statusText}`);
|
||||
}
|
||||
|
||||
const config = await configResponse.json();
|
||||
console.log('NocoDB URLs received:', config);
|
||||
|
||||
if (config.success && config.nocodbUrls) {
|
||||
console.log('Setting up NocoDB links with URLs:', config.nocodbUrls);
|
||||
|
||||
// Set up admin dashboard NocoDB links
|
||||
setAdminNocodbLink('admin-nocodb-view-link', config.nocodbUrls.viewUrl);
|
||||
setAdminNocodbLink('admin-nocodb-login-link', config.nocodbUrls.loginSheet);
|
||||
setAdminNocodbLink('admin-nocodb-settings-link', config.nocodbUrls.settingsSheet);
|
||||
setAdminNocodbLink('admin-nocodb-shifts-link', config.nocodbUrls.shiftsSheet);
|
||||
setAdminNocodbLink('admin-nocodb-signups-link', config.nocodbUrls.shiftSignupsSheet);
|
||||
|
||||
console.log('NocoDB links initialized in admin panel');
|
||||
} else {
|
||||
console.warn('No NocoDB URLs found in admin config response');
|
||||
// Hide the NocoDB section if no URLs are available
|
||||
const nocodbSection = document.getElementById('nocodb-links');
|
||||
const nocodbNav = document.querySelector('.admin-nav a[href="#nocodb-links"]');
|
||||
if (nocodbSection) {
|
||||
nocodbSection.style.display = 'none';
|
||||
console.log('Hidden NocoDB section');
|
||||
}
|
||||
if (nocodbNav) {
|
||||
nocodbNav.style.display = 'none';
|
||||
console.log('Hidden NocoDB nav link');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error initializing NocoDB links in admin panel:', error);
|
||||
// Hide the NocoDB section on error
|
||||
const nocodbSection = document.getElementById('nocodb-links');
|
||||
const nocodbNav = document.querySelector('.admin-nav a[href="#nocodb-links"]');
|
||||
if (nocodbSection) {
|
||||
nocodbSection.style.display = 'none';
|
||||
console.log('Hidden NocoDB section due to error');
|
||||
}
|
||||
if (nocodbNav) {
|
||||
nocodbNav.style.display = 'none';
|
||||
console.log('Hidden NocoDB nav link due to error');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Helper function to set admin NocoDB link href
|
||||
function setAdminNocodbLink(elementId, url) {
|
||||
console.log(`Setting up NocoDB link: ${elementId} = ${url}`);
|
||||
const element = document.getElementById(elementId);
|
||||
|
||||
if (element && url) {
|
||||
element.href = url;
|
||||
element.style.display = 'inline-flex';
|
||||
// Remove any disabled state
|
||||
element.classList.remove('btn-disabled');
|
||||
element.removeAttribute('disabled');
|
||||
console.log(`✓ Successfully set up ${elementId}`);
|
||||
} else if (element) {
|
||||
element.style.display = 'none';
|
||||
// Add disabled state if no URL
|
||||
element.classList.add('btn-disabled');
|
||||
element.setAttribute('disabled', 'disabled');
|
||||
element.href = '#';
|
||||
console.log(`⚠ Disabled ${elementId} - no URL provided`);
|
||||
} else {
|
||||
console.error(`✗ Element not found: ${elementId}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize Listmonk links in admin panel
|
||||
async function initializeListmonkLinks() {
|
||||
console.log('Starting Listmonk links initialization...');
|
||||
|
||||
try {
|
||||
// Since we're in the admin panel, the user is already verified as admin
|
||||
// by the requireAdmin middleware. Let's get the URLs from the server directly.
|
||||
console.log('Fetching Listmonk URLs for admin panel...');
|
||||
const configResponse = await fetch('/api/admin/listmonk-urls');
|
||||
|
||||
if (!configResponse.ok) {
|
||||
throw new Error(`Listmonk URLs fetch failed: ${configResponse.status} ${configResponse.statusText}`);
|
||||
}
|
||||
|
||||
const config = await configResponse.json();
|
||||
console.log('Listmonk URLs received:', config);
|
||||
|
||||
if (config.success && config.listmonkUrls) {
|
||||
console.log('Setting up Listmonk links with URLs:', config.listmonkUrls);
|
||||
|
||||
// Set up admin dashboard Listmonk links
|
||||
setAdminListmonkLink('admin-listmonk-admin-link', config.listmonkUrls.adminUrl);
|
||||
setAdminListmonkLink('admin-listmonk-lists-link', config.listmonkUrls.listsUrl);
|
||||
setAdminListmonkLink('admin-listmonk-campaigns-link', config.listmonkUrls.campaignsUrl);
|
||||
setAdminListmonkLink('admin-listmonk-subscribers-link', config.listmonkUrls.subscribersUrl);
|
||||
setAdminListmonkLink('admin-listmonk-settings-link', config.listmonkUrls.settingsUrl);
|
||||
|
||||
console.log('Listmonk links initialized in admin panel');
|
||||
} else {
|
||||
console.warn('No Listmonk URLs found in admin config response');
|
||||
// Hide the Listmonk section if no URLs are available
|
||||
const listmonkSection = document.getElementById('listmonk-links');
|
||||
const listmonkNav = document.querySelector('.admin-nav a[href="#listmonk-links"]');
|
||||
if (listmonkSection) {
|
||||
listmonkSection.style.display = 'none';
|
||||
console.log('Hidden Listmonk section');
|
||||
}
|
||||
if (listmonkNav) {
|
||||
listmonkNav.style.display = 'none';
|
||||
console.log('Hidden Listmonk nav link');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error initializing Listmonk links in admin panel:', error);
|
||||
// Hide the Listmonk section on error
|
||||
const listmonkSection = document.getElementById('listmonk-links');
|
||||
const listmonkNav = document.querySelector('.admin-nav a[href="#listmonk-links"]');
|
||||
if (listmonkSection) {
|
||||
listmonkSection.style.display = 'none';
|
||||
console.log('Hidden Listmonk section due to error');
|
||||
}
|
||||
if (listmonkNav) {
|
||||
listmonkNav.style.display = 'none';
|
||||
console.log('Hidden Listmonk nav link due to error');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Helper function to set admin Listmonk link href
|
||||
function setAdminListmonkLink(elementId, url) {
|
||||
console.log(`Setting up Listmonk link: ${elementId} = ${url}`);
|
||||
const element = document.getElementById(elementId);
|
||||
|
||||
if (element && url) {
|
||||
element.href = url;
|
||||
element.style.display = 'inline-flex';
|
||||
// Remove any disabled state
|
||||
element.classList.remove('btn-disabled');
|
||||
element.removeAttribute('disabled');
|
||||
console.log(`✓ Successfully set up ${elementId}`);
|
||||
} else if (element) {
|
||||
element.style.display = 'none';
|
||||
// Add disabled state if no URL
|
||||
element.classList.add('btn-disabled');
|
||||
element.setAttribute('disabled', 'disabled');
|
||||
element.href = '#';
|
||||
console.log(`⚠ Disabled ${elementId} - no URL provided`);
|
||||
} else {
|
||||
console.error(`✗ Element not found: ${elementId}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize all integrations
|
||||
async function initializeAllIntegrations() {
|
||||
try {
|
||||
// Initialize both integrations with a small delay to ensure DOM is ready
|
||||
await initializeNocodbLinks();
|
||||
await initializeListmonkLinks();
|
||||
console.log('All integrations initialized successfully');
|
||||
} catch (error) {
|
||||
console.error('Error initializing integrations:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Export integration functions
|
||||
window.adminIntegration = {
|
||||
initializeNocodbLinks,
|
||||
initializeListmonkLinks,
|
||||
initializeAllIntegrations,
|
||||
setAdminNocodbLink,
|
||||
setAdminListmonkLink
|
||||
};
|
||||
249
map/app/public/js/admin-map.js
Normal file
249
map/app/public/js/admin-map.js
Normal file
@@ -0,0 +1,249 @@
|
||||
/**
|
||||
* Admin Map Management Module
|
||||
* Handles map initialization, start location management, and coordinate operations
|
||||
*/
|
||||
|
||||
// Map state
|
||||
let adminMap = null;
|
||||
let startMarker = null;
|
||||
|
||||
// Initialize the admin map
|
||||
function initializeAdminMap() {
|
||||
adminMap = L.map('admin-map').setView([53.5461, -113.4938], 11);
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||||
maxZoom: 19,
|
||||
minZoom: 2
|
||||
}).addTo(adminMap);
|
||||
|
||||
// Add crosshair to center of map
|
||||
const crosshairIcon = L.divIcon({
|
||||
className: 'crosshair',
|
||||
iconSize: [20, 20],
|
||||
html: '<div style="width: 20px; height: 20px; position: relative;"><div style="position: absolute; top: 9px; left: 0; width: 20px; height: 2px; background: #333; box-shadow: 0 0 3px rgba(255,255,255,0.8);"></div><div style="position: absolute; top: 0; left: 9px; width: 2px; height: 20px; background: #333; box-shadow: 0 0 3px rgba(255,255,255,0.8);"></div></div>'
|
||||
});
|
||||
|
||||
const crosshair = L.marker(adminMap.getCenter(), {
|
||||
icon: crosshairIcon,
|
||||
interactive: false,
|
||||
zIndexOffset: 1000
|
||||
}).addTo(adminMap);
|
||||
|
||||
// Update crosshair position when map moves
|
||||
adminMap.on('move', function() {
|
||||
crosshair.setLatLng(adminMap.getCenter());
|
||||
});
|
||||
|
||||
// Add click handler to set location
|
||||
adminMap.on('click', handleMapClick);
|
||||
|
||||
// Update coordinates when map moves
|
||||
adminMap.on('moveend', updateCoordinatesFromMap);
|
||||
}
|
||||
|
||||
// Load current start location
|
||||
async function loadCurrentStartLocation() {
|
||||
try {
|
||||
const response = await fetch('/api/admin/start-location');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
const { latitude, longitude, zoom } = data.location;
|
||||
|
||||
// Update form fields
|
||||
const latInput = document.getElementById('start-lat');
|
||||
const lngInput = document.getElementById('start-lng');
|
||||
const zoomInput = document.getElementById('start-zoom');
|
||||
|
||||
if (latInput) latInput.value = latitude;
|
||||
if (lngInput) lngInput.value = longitude;
|
||||
if (zoomInput) zoomInput.value = zoom;
|
||||
|
||||
// Update map
|
||||
if (adminMap) {
|
||||
adminMap.setView([latitude, longitude], zoom);
|
||||
updateStartMarker(latitude, longitude);
|
||||
}
|
||||
|
||||
// Show source info
|
||||
if (data.source) {
|
||||
const sourceText = data.source === 'database' ? 'Loaded from database' :
|
||||
data.source === 'environment' ? 'Using environment defaults' :
|
||||
'Using system defaults';
|
||||
window.adminCore.showStatus(sourceText, 'info');
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to load start location:', error);
|
||||
window.adminCore.showStatus('Failed to load current start location', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Handle map click
|
||||
function handleMapClick(e) {
|
||||
const { lat, lng } = e.latlng;
|
||||
|
||||
const latInput = document.getElementById('start-lat');
|
||||
const lngInput = document.getElementById('start-lng');
|
||||
|
||||
if (latInput) latInput.value = lat.toFixed(6);
|
||||
if (lngInput) lngInput.value = lng.toFixed(6);
|
||||
|
||||
updateStartMarker(lat, lng);
|
||||
}
|
||||
|
||||
// Update marker position
|
||||
function updateStartMarker(lat, lng) {
|
||||
if (startMarker) {
|
||||
startMarker.setLatLng([lat, lng]);
|
||||
} else {
|
||||
startMarker = L.marker([lat, lng], {
|
||||
draggable: true,
|
||||
title: 'Start Location'
|
||||
}).addTo(adminMap);
|
||||
|
||||
// Update coordinates when marker is dragged
|
||||
startMarker.on('dragend', (e) => {
|
||||
const position = e.target.getLatLng();
|
||||
const latInput = document.getElementById('start-lat');
|
||||
const lngInput = document.getElementById('start-lng');
|
||||
|
||||
if (latInput) latInput.value = position.lat.toFixed(6);
|
||||
if (lngInput) lngInput.value = position.lng.toFixed(6);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Update coordinates from current map view
|
||||
function updateCoordinatesFromMap() {
|
||||
const center = adminMap.getCenter();
|
||||
const zoom = adminMap.getZoom();
|
||||
|
||||
const zoomInput = document.getElementById('start-zoom');
|
||||
if (zoomInput) {
|
||||
zoomInput.value = zoom;
|
||||
}
|
||||
}
|
||||
|
||||
// Update map from input fields
|
||||
function updateMapFromInputs() {
|
||||
const latInput = document.getElementById('start-lat');
|
||||
const lngInput = document.getElementById('start-lng');
|
||||
const zoomInput = document.getElementById('start-zoom');
|
||||
|
||||
const lat = parseFloat(latInput?.value);
|
||||
const lng = parseFloat(lngInput?.value);
|
||||
const zoom = parseInt(zoomInput?.value);
|
||||
|
||||
if (!isNaN(lat) && !isNaN(lng) && !isNaN(zoom) && adminMap) {
|
||||
adminMap.setView([lat, lng], zoom);
|
||||
updateStartMarker(lat, lng);
|
||||
}
|
||||
}
|
||||
|
||||
// Save start location
|
||||
async function saveStartLocation() {
|
||||
const latInput = document.getElementById('start-lat');
|
||||
const lngInput = document.getElementById('start-lng');
|
||||
const zoomInput = document.getElementById('start-zoom');
|
||||
|
||||
const lat = parseFloat(latInput?.value);
|
||||
const lng = parseFloat(lngInput?.value);
|
||||
const zoom = parseInt(zoomInput?.value);
|
||||
|
||||
// Validate
|
||||
if (isNaN(lat) || isNaN(lng) || isNaN(zoom)) {
|
||||
window.adminCore.showStatus('Please enter valid coordinates and zoom level', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (lat < -90 || lat > 90 || lng < -180 || lng > 180) {
|
||||
window.adminCore.showStatus('Coordinates out of valid range', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (zoom < 2 || zoom > 19) {
|
||||
window.adminCore.showStatus('Zoom level must be between 2 and 19', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/admin/start-location', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
latitude: lat,
|
||||
longitude: lng,
|
||||
zoom: zoom
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
window.adminCore.showStatus('Start location saved successfully!', 'success');
|
||||
} else {
|
||||
throw new Error(data.error || 'Failed to save');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Save error:', error);
|
||||
window.adminCore.showStatus(error.message || 'Failed to save start location', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Setup map-related event listeners
|
||||
function setupMapEventListeners() {
|
||||
// Use current view button
|
||||
const useCurrentViewBtn = document.getElementById('use-current-view');
|
||||
if (useCurrentViewBtn) {
|
||||
useCurrentViewBtn.addEventListener('click', () => {
|
||||
if (!adminMap) return;
|
||||
|
||||
const center = adminMap.getCenter();
|
||||
const zoom = adminMap.getZoom();
|
||||
|
||||
const latInput = document.getElementById('start-lat');
|
||||
const lngInput = document.getElementById('start-lng');
|
||||
const zoomInput = document.getElementById('start-zoom');
|
||||
|
||||
if (latInput) latInput.value = center.lat.toFixed(6);
|
||||
if (lngInput) lngInput.value = center.lng.toFixed(6);
|
||||
if (zoomInput) zoomInput.value = zoom;
|
||||
|
||||
updateStartMarker(center.lat, center.lng);
|
||||
window.adminCore.showStatus('Captured current map view', 'success');
|
||||
});
|
||||
}
|
||||
|
||||
// Save button
|
||||
const saveLocationBtn = document.getElementById('save-start-location');
|
||||
if (saveLocationBtn) {
|
||||
saveLocationBtn.addEventListener('click', saveStartLocation);
|
||||
}
|
||||
|
||||
// Coordinate input changes
|
||||
const startLatInput = document.getElementById('start-lat');
|
||||
const startLngInput = document.getElementById('start-lng');
|
||||
const startZoomInput = document.getElementById('start-zoom');
|
||||
|
||||
if (startLatInput) startLatInput.addEventListener('change', updateMapFromInputs);
|
||||
if (startLngInput) startLngInput.addEventListener('change', updateMapFromInputs);
|
||||
if (startZoomInput) startZoomInput.addEventListener('change', updateMapFromInputs);
|
||||
}
|
||||
|
||||
// Export map management functions
|
||||
window.adminMap = {
|
||||
initializeAdminMap,
|
||||
loadCurrentStartLocation,
|
||||
setupMapEventListeners,
|
||||
saveStartLocation,
|
||||
updateMapFromInputs,
|
||||
handleMapClick,
|
||||
updateStartMarker,
|
||||
getAdminMap: () => adminMap
|
||||
};
|
||||
143
map/app/public/js/admin-new.js
Normal file
143
map/app/public/js/admin-new.js
Normal file
@@ -0,0 +1,143 @@
|
||||
/**
|
||||
* Main Admin Panel Coordinator
|
||||
* This refactored admin.js coordinates all admin modules while maintaining functionality
|
||||
* Modules: core, auth, map, walksheet, shifts, shift-volunteers, users, email, integration
|
||||
*/
|
||||
|
||||
/**
|
||||
* Main Event Listener Setup
|
||||
* Coordinates event listeners across all modules
|
||||
*/
|
||||
function setupAllEventListeners() {
|
||||
// Setup authentication listeners
|
||||
if (window.adminAuth && typeof window.adminAuth.setupAuthEventListeners === 'function') {
|
||||
window.adminAuth.setupAuthEventListeners();
|
||||
}
|
||||
|
||||
// Setup map listeners
|
||||
if (window.adminMap && typeof window.adminMap.setupMapEventListeners === 'function') {
|
||||
window.adminMap.setupMapEventListeners();
|
||||
}
|
||||
|
||||
// Setup walk sheet listeners
|
||||
if (window.adminWalkSheet && typeof window.adminWalkSheet.setupWalkSheetEventListeners === 'function') {
|
||||
window.adminWalkSheet.setupWalkSheetEventListeners();
|
||||
}
|
||||
|
||||
// Setup shift listeners
|
||||
if (window.adminShifts && typeof window.adminShifts.setupShiftEventListeners === 'function') {
|
||||
window.adminShifts.setupShiftEventListeners();
|
||||
}
|
||||
|
||||
// Setup shift volunteer listeners
|
||||
if (window.adminShiftVolunteers && typeof window.adminShiftVolunteers.setupShiftVolunteerEventListeners === 'function') {
|
||||
window.adminShiftVolunteers.setupShiftVolunteerEventListeners();
|
||||
}
|
||||
|
||||
// Setup user listeners
|
||||
if (window.adminUsers && typeof window.adminUsers.setupUserEventListeners === 'function') {
|
||||
window.adminUsers.setupUserEventListeners();
|
||||
}
|
||||
|
||||
// Setup email listeners
|
||||
if (window.adminEmail && typeof window.adminEmail.setupEmailEventListeners === 'function') {
|
||||
window.adminEmail.setupEmailEventListeners();
|
||||
}
|
||||
}
|
||||
|
||||
// Main admin initialization when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Initialize core functionality
|
||||
if (window.adminCore && typeof window.adminCore.initializeAdminCore === 'function') {
|
||||
window.adminCore.initializeAdminCore();
|
||||
}
|
||||
|
||||
// Initialize authentication
|
||||
if (window.adminAuth && typeof window.adminAuth.checkAdminAuth === 'function') {
|
||||
window.adminAuth.checkAdminAuth();
|
||||
}
|
||||
|
||||
// Initialize admin map
|
||||
if (window.adminMap && typeof window.adminMap.initializeAdminMap === 'function') {
|
||||
window.adminMap.initializeAdminMap();
|
||||
}
|
||||
|
||||
// Load current start location
|
||||
if (window.adminMap && typeof window.adminMap.loadCurrentStartLocation === 'function') {
|
||||
window.adminMap.loadCurrentStartLocation();
|
||||
}
|
||||
|
||||
// Setup all event listeners
|
||||
setupAllEventListeners();
|
||||
|
||||
// Initialize integrations with a small delay to ensure DOM is ready
|
||||
setTimeout(() => {
|
||||
if (window.adminWalkSheet && typeof window.adminWalkSheet.loadWalkSheetConfig === 'function') {
|
||||
window.adminWalkSheet.loadWalkSheetConfig();
|
||||
}
|
||||
if (window.adminIntegration && typeof window.adminIntegration.initializeAllIntegrations === 'function') {
|
||||
window.adminIntegration.initializeAllIntegrations();
|
||||
}
|
||||
}, 100);
|
||||
|
||||
// Check if URL has a hash to show specific section
|
||||
const hash = window.location.hash;
|
||||
if (hash === '#walk-sheet') {
|
||||
if (window.adminCore && typeof window.adminCore.showSection === 'function') {
|
||||
window.adminCore.showSection('walk-sheet');
|
||||
}
|
||||
if (window.adminWalkSheet && typeof window.adminWalkSheet.checkAndLoadWalkSheetConfig === 'function') {
|
||||
window.adminWalkSheet.checkAndLoadWalkSheetConfig();
|
||||
}
|
||||
} else if (hash === '#convert-data') {
|
||||
if (window.adminCore && typeof window.adminCore.showSection === 'function') {
|
||||
window.adminCore.showSection('convert-data');
|
||||
}
|
||||
} else if (hash === '#cuts') {
|
||||
if (window.adminCore && typeof window.adminCore.showSection === 'function') {
|
||||
window.adminCore.showSection('cuts');
|
||||
}
|
||||
} else {
|
||||
// Default to dashboard
|
||||
if (window.adminCore && typeof window.adminCore.showSection === 'function') {
|
||||
window.adminCore.showSection('dashboard');
|
||||
}
|
||||
// Load dashboard data on initial page load
|
||||
if (typeof loadDashboardData === 'function') {
|
||||
loadDashboardData();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Dashboard Functions
|
||||
* Loads dashboard data and displays summary statistics
|
||||
*/
|
||||
async function loadDashboardData() {
|
||||
try {
|
||||
const response = await fetch('/api/admin/dashboard');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
document.getElementById('total-users').textContent = data.stats.totalUsers;
|
||||
document.getElementById('total-shifts').textContent = data.stats.totalShifts;
|
||||
document.getElementById('total-signups').textContent = data.stats.totalSignups;
|
||||
document.getElementById('this-month-users').textContent = data.stats.thisMonthUsers;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load dashboard data:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Legacy function redirects for backward compatibility
|
||||
* These ensure existing functionality continues to work
|
||||
*/
|
||||
window.loadDashboardData = loadDashboardData;
|
||||
|
||||
// Export dashboard function for module coordination
|
||||
if (typeof window.adminDashboard === 'undefined') {
|
||||
window.adminDashboard = {
|
||||
loadDashboardData: loadDashboardData
|
||||
};
|
||||
}
|
||||
1791
map/app/public/js/admin-old.js
Normal file
1791
map/app/public/js/admin-old.js
Normal file
File diff suppressed because it is too large
Load Diff
530
map/app/public/js/admin-shift-volunteers.js
Normal file
530
map/app/public/js/admin-shift-volunteers.js
Normal file
@@ -0,0 +1,530 @@
|
||||
/**
|
||||
* Admin Shift Volunteers Module
|
||||
* Handles volunteer management modals and shift email functionality
|
||||
*/
|
||||
|
||||
// Volunteer management state
|
||||
let currentShiftData = null;
|
||||
let allUsers = [];
|
||||
|
||||
// Load all users for the dropdown
|
||||
async function loadAllUsers() {
|
||||
try {
|
||||
const response = await fetch('/api/users');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
allUsers = data.users;
|
||||
populateUserSelect();
|
||||
} else {
|
||||
console.error('Failed to load users:', data.error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading users:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Populate user select dropdown
|
||||
function populateUserSelect() {
|
||||
const select = document.getElementById('user-select');
|
||||
if (!select) return;
|
||||
|
||||
// Clear existing options except the first one
|
||||
select.innerHTML = '<option value="">Select a user...</option>';
|
||||
|
||||
allUsers.forEach(user => {
|
||||
const option = document.createElement('option');
|
||||
option.value = user.email || user.Email;
|
||||
option.textContent = `${user.name || user.Name || ''} (${user.email || user.Email})`;
|
||||
select.appendChild(option);
|
||||
});
|
||||
}
|
||||
|
||||
// Show the shift user management modal
|
||||
async function showShiftUserModal(shiftId, shiftData) {
|
||||
currentShiftData = { ...shiftData, ID: shiftId };
|
||||
|
||||
// Update modal title and info
|
||||
const modalTitle = document.getElementById('modal-shift-title');
|
||||
const modalDetails = document.getElementById('modal-shift-details');
|
||||
|
||||
if (modalTitle) modalTitle.textContent = shiftData.Title;
|
||||
|
||||
if (modalDetails) {
|
||||
const shiftDate = window.adminCore.createLocalDate(shiftData.Date);
|
||||
modalDetails.textContent =
|
||||
`${shiftDate.toLocaleDateString()} | ${shiftData['Start Time']} - ${shiftData['End Time']} | ${shiftData.Location || 'TBD'}`;
|
||||
}
|
||||
|
||||
// Load users if not already loaded
|
||||
if (allUsers.length === 0) {
|
||||
await loadAllUsers();
|
||||
}
|
||||
|
||||
// Display current volunteers
|
||||
displayCurrentVolunteers(shiftData.signups || []);
|
||||
|
||||
// Show modal
|
||||
const modal = document.getElementById('shift-user-modal');
|
||||
if (modal) {
|
||||
modal.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
|
||||
// Display current volunteers in the modal
|
||||
function displayCurrentVolunteers(volunteers) {
|
||||
const container = document.getElementById('current-volunteers-list');
|
||||
|
||||
if (!container) return;
|
||||
|
||||
if (!volunteers || volunteers.length === 0) {
|
||||
container.innerHTML = '<div class="no-volunteers">No volunteers signed up yet.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = volunteers.map(volunteer => `
|
||||
<div class="volunteer-item">
|
||||
<div class="volunteer-info">
|
||||
<div class="volunteer-name">${window.adminCore.escapeHtml(volunteer['User Name'] || volunteer['User Email'] || 'Unknown')}</div>
|
||||
<div class="volunteer-email">${window.adminCore.escapeHtml(volunteer['User Email'])}</div>
|
||||
</div>
|
||||
<div class="volunteer-actions">
|
||||
<button class="btn btn-danger btn-sm remove-volunteer-btn"
|
||||
data-volunteer-id="${volunteer.ID || volunteer.id}"
|
||||
data-volunteer-email="${volunteer['User Email']}">
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
// Add event listeners for remove buttons
|
||||
setupVolunteerActionListeners();
|
||||
}
|
||||
|
||||
// Setup event listeners for volunteer actions
|
||||
function setupVolunteerActionListeners() {
|
||||
const container = document.getElementById('current-volunteers-list');
|
||||
|
||||
if (container) {
|
||||
container.addEventListener('click', function(e) {
|
||||
if (e.target.classList.contains('remove-volunteer-btn')) {
|
||||
const volunteerId = e.target.getAttribute('data-volunteer-id');
|
||||
const volunteerEmail = e.target.getAttribute('data-volunteer-email');
|
||||
removeVolunteerFromShift(volunteerId, volunteerEmail);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Add user to shift
|
||||
async function addUserToShift() {
|
||||
const userSelect = document.getElementById('user-select');
|
||||
const userEmail = userSelect?.value;
|
||||
|
||||
if (!userEmail) {
|
||||
window.adminCore.showStatus('Please select a user to add', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!currentShiftData || !currentShiftData.ID) {
|
||||
window.adminCore.showStatus('No shift selected or invalid shift data', 'error');
|
||||
console.error('Invalid currentShiftData:', currentShiftData);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/shifts/admin/${currentShiftData.ID}/add-user`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ userEmail })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
window.adminCore.showStatus('User successfully added to shift', 'success');
|
||||
if (userSelect) userSelect.value = ''; // Clear selection
|
||||
|
||||
// Refresh the shift data and reload volunteers with better error handling
|
||||
try {
|
||||
await refreshCurrentShiftData();
|
||||
console.log('Refreshed shift data after adding user');
|
||||
} catch (refreshError) {
|
||||
console.error('Error during refresh after adding user:', refreshError);
|
||||
// Still show success since the add operation worked
|
||||
}
|
||||
} else {
|
||||
window.adminCore.showStatus(data.error || 'Failed to add user to shift', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error adding user to shift:', error);
|
||||
window.adminCore.showStatus('Failed to add user to shift', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Remove volunteer from shift
|
||||
async function removeVolunteerFromShift(volunteerId, volunteerEmail) {
|
||||
if (!confirm(`Are you sure you want to remove ${volunteerEmail} from this shift?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!currentShiftData || !currentShiftData.ID) {
|
||||
window.adminCore.showStatus('No shift selected or invalid shift data', 'error');
|
||||
console.error('Invalid currentShiftData:', currentShiftData);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/shifts/admin/${currentShiftData.ID}/remove-user/${volunteerId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
window.adminCore.showStatus('Volunteer successfully removed from shift', 'success');
|
||||
|
||||
// Refresh the shift data and reload volunteers with better error handling
|
||||
try {
|
||||
await refreshCurrentShiftData();
|
||||
console.log('Refreshed shift data after removing volunteer');
|
||||
} catch (refreshError) {
|
||||
console.error('Error during refresh after removing volunteer:', refreshError);
|
||||
// Still show success since the remove operation worked
|
||||
}
|
||||
} else {
|
||||
window.adminCore.showStatus(data.error || 'Failed to remove volunteer from shift', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error removing volunteer from shift:', error);
|
||||
window.adminCore.showStatus('Failed to remove volunteer from shift', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Refresh current shift data
|
||||
async function refreshCurrentShiftData() {
|
||||
if (!currentShiftData || !currentShiftData.ID) {
|
||||
console.warn('No current shift data or missing ID, skipping refresh');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log('Refreshing shift data for shift ID:', currentShiftData.ID);
|
||||
|
||||
// Instead of reloading ALL admin shifts, just get this specific shift's signups
|
||||
// This prevents the expensive backend call and reduces the refresh cascade
|
||||
const response = await fetch(`/api/shifts/admin`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success && data.shifts && Array.isArray(data.shifts)) {
|
||||
const updatedShift = data.shifts.find(s => s && s.ID === currentShiftData.ID);
|
||||
if (updatedShift) {
|
||||
console.log('Found updated shift with', updatedShift.signups?.length || 0, 'volunteers');
|
||||
currentShiftData = updatedShift;
|
||||
displayCurrentVolunteers(updatedShift.signups || []);
|
||||
|
||||
// Only update the specific shift in the main list, don't refresh everything
|
||||
updateShiftInList(updatedShift);
|
||||
} else {
|
||||
console.warn('Could not find updated shift with ID:', currentShiftData.ID);
|
||||
}
|
||||
} else {
|
||||
console.error('Failed to refresh shift data:', data.error || 'Invalid response format');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error refreshing shift data:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Update a single shift in the list without full refresh
|
||||
function updateShiftInList(updatedShift) {
|
||||
const shiftElement = document.querySelector(`[data-shift-id="${updatedShift.ID}"]`);
|
||||
if (shiftElement) {
|
||||
const shiftItem = shiftElement.closest('.shift-admin-item');
|
||||
if (shiftItem) {
|
||||
const signupCount = updatedShift.signups ? updatedShift.signups.length : 0;
|
||||
|
||||
// Find the volunteer count paragraph (contains 👥)
|
||||
const volunteerCountElement = Array.from(shiftItem.querySelectorAll('p')).find(p =>
|
||||
p.textContent.includes('👥')
|
||||
);
|
||||
|
||||
if (volunteerCountElement) {
|
||||
volunteerCountElement.textContent = `👥 ${signupCount}/${updatedShift['Max Volunteers']} volunteers`;
|
||||
}
|
||||
|
||||
// Update the data attribute with new shift data
|
||||
const manageBtn = shiftItem.querySelector('.manage-volunteers-btn');
|
||||
if (manageBtn) {
|
||||
manageBtn.setAttribute('data-shift', JSON.stringify(updatedShift).replace(/'/g, "'"));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Close modal
|
||||
function closeShiftUserModal() {
|
||||
const modal = document.getElementById('shift-user-modal');
|
||||
if (modal) {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
currentShiftData = null;
|
||||
|
||||
// Don't refresh the entire shifts list when closing modal
|
||||
// The shifts list should already be up to date from the individual updates
|
||||
console.log('Modal closed - shifts list should already be current');
|
||||
}
|
||||
|
||||
// Email shift details to all volunteers
|
||||
async function emailShiftDetails() {
|
||||
if (!currentShiftData) {
|
||||
window.adminCore.showStatus('No shift selected', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if there are volunteers to email
|
||||
const volunteers = currentShiftData.signups || [];
|
||||
if (volunteers.length === 0) {
|
||||
window.adminCore.showStatus('No volunteers signed up for this shift', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Confirm action
|
||||
const confirmMessage = `Send shift details email to ${volunteers.length} volunteer${volunteers.length !== 1 ? 's' : ''}?`;
|
||||
if (!confirm(confirmMessage)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize progress tracking for shift emails
|
||||
initializeShiftEmailProgress(volunteers.length);
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/shifts/admin/${currentShiftData.ID}/email-details`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
// Display detailed results
|
||||
updateShiftEmailProgress(data.results);
|
||||
window.adminCore.showStatus(data.message, 'success');
|
||||
console.log('Email results:', data.results);
|
||||
} else {
|
||||
showShiftEmailError(data.error || 'Failed to send emails');
|
||||
if (data.details) {
|
||||
console.error('Failed email details:', data.details);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error sending shift details emails:', error);
|
||||
showShiftEmailError('Failed to send emails - Network error');
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize shift email progress display
|
||||
function initializeShiftEmailProgress(totalCount) {
|
||||
const progressContainer = document.getElementById('shift-email-progress-container');
|
||||
const statusList = document.getElementById('shift-email-status-list');
|
||||
const pendingCountEl = document.getElementById('shift-pending-count');
|
||||
const successCountEl = document.getElementById('shift-success-count');
|
||||
const errorCountEl = document.getElementById('shift-error-count');
|
||||
const progressBar = document.getElementById('shift-email-progress-bar');
|
||||
const progressText = document.getElementById('shift-progress-text');
|
||||
const closeBtn = document.getElementById('close-shift-progress-btn');
|
||||
|
||||
if (!progressContainer) return;
|
||||
|
||||
// Show progress container
|
||||
progressContainer.classList.add('show');
|
||||
|
||||
// Reset counters
|
||||
if (pendingCountEl) pendingCountEl.textContent = totalCount;
|
||||
if (successCountEl) successCountEl.textContent = '0';
|
||||
if (errorCountEl) errorCountEl.textContent = '0';
|
||||
|
||||
// Reset progress bar
|
||||
if (progressBar) {
|
||||
progressBar.style.width = '0%';
|
||||
progressBar.classList.remove('complete', 'error');
|
||||
}
|
||||
if (progressText) progressText.textContent = '0%';
|
||||
|
||||
// Clear status list
|
||||
if (statusList) statusList.innerHTML = '';
|
||||
|
||||
// Hide close button initially
|
||||
if (closeBtn) closeBtn.style.display = 'none';
|
||||
|
||||
// Add status items for each volunteer
|
||||
const volunteers = currentShiftData.signups || [];
|
||||
volunteers.forEach(volunteer => {
|
||||
if (statusList) {
|
||||
const statusItem = document.createElement('div');
|
||||
statusItem.className = 'email-status-item';
|
||||
statusItem.innerHTML = `
|
||||
<div class="email-status-recipient">${volunteer['User Name'] || volunteer['User Email']}</div>
|
||||
<div class="email-status-result pending">
|
||||
<div class="progress-spinner"></div>
|
||||
<span>Sending...</span>
|
||||
</div>
|
||||
`;
|
||||
statusList.appendChild(statusItem);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Update shift email progress with results
|
||||
function updateShiftEmailProgress(results) {
|
||||
const statusList = document.getElementById('shift-email-status-list');
|
||||
const pendingCountEl = document.getElementById('shift-pending-count');
|
||||
const successCountEl = document.getElementById('shift-success-count');
|
||||
const errorCountEl = document.getElementById('shift-error-count');
|
||||
const progressBar = document.getElementById('shift-email-progress-bar');
|
||||
const progressText = document.getElementById('shift-progress-text');
|
||||
const closeBtn = document.getElementById('close-shift-progress-btn');
|
||||
|
||||
const successful = results.successful || [];
|
||||
const failed = results.failed || [];
|
||||
const total = results.total || (successful.length + failed.length);
|
||||
|
||||
// Update counters
|
||||
if (successCountEl) successCountEl.textContent = successful.length;
|
||||
if (errorCountEl) errorCountEl.textContent = failed.length;
|
||||
if (pendingCountEl) pendingCountEl.textContent = '0';
|
||||
|
||||
// Update progress bar
|
||||
const percentage = ((successful.length + failed.length) / total * 100).toFixed(1);
|
||||
if (progressBar) {
|
||||
progressBar.style.width = percentage + '%';
|
||||
progressText.textContent = percentage + '%';
|
||||
|
||||
if (failed.length > 0) {
|
||||
progressBar.classList.add('error');
|
||||
} else {
|
||||
progressBar.classList.add('complete');
|
||||
}
|
||||
}
|
||||
|
||||
// Update individual status items
|
||||
if (statusList) {
|
||||
const statusItems = statusList.children;
|
||||
|
||||
// Update successful emails
|
||||
successful.forEach(result => {
|
||||
const statusItem = Array.from(statusItems).find(item =>
|
||||
item.querySelector('.email-status-recipient').textContent.includes(result.email) ||
|
||||
item.querySelector('.email-status-recipient').textContent.includes(result.name)
|
||||
);
|
||||
if (statusItem) {
|
||||
statusItem.querySelector('.email-status-result').innerHTML = `
|
||||
<span class="email-status-result success">✓ Sent</span>
|
||||
`;
|
||||
}
|
||||
});
|
||||
|
||||
// Update failed emails
|
||||
failed.forEach(result => {
|
||||
const statusItem = Array.from(statusItems).find(item =>
|
||||
item.querySelector('.email-status-recipient').textContent.includes(result.email) ||
|
||||
item.querySelector('.email-status-recipient').textContent.includes(result.name)
|
||||
);
|
||||
if (statusItem) {
|
||||
statusItem.querySelector('.email-status-result').innerHTML = `
|
||||
<span class="email-status-result error" title="${result.error || 'Unknown error'}">✗ Failed</span>
|
||||
`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Show close button
|
||||
if (closeBtn) {
|
||||
closeBtn.style.display = 'block';
|
||||
closeBtn.onclick = () => {
|
||||
const progressContainer = document.getElementById('shift-email-progress-container');
|
||||
if (progressContainer) {
|
||||
progressContainer.classList.remove('show');
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Show shift email error
|
||||
function showShiftEmailError(message) {
|
||||
const progressContainer = document.getElementById('shift-email-progress-container');
|
||||
const progressBar = document.getElementById('shift-email-progress-bar');
|
||||
const progressText = document.getElementById('shift-progress-text');
|
||||
const closeBtn = document.getElementById('close-shift-progress-btn');
|
||||
|
||||
// Show progress container if not visible
|
||||
if (progressContainer) {
|
||||
progressContainer.classList.add('show');
|
||||
}
|
||||
|
||||
// Update progress bar to show error
|
||||
if (progressBar) {
|
||||
progressBar.style.width = '100%';
|
||||
progressBar.classList.add('error');
|
||||
}
|
||||
if (progressText) progressText.textContent = 'Error';
|
||||
|
||||
// Show close button
|
||||
if (closeBtn) {
|
||||
closeBtn.style.display = 'block';
|
||||
closeBtn.onclick = () => {
|
||||
if (progressContainer) {
|
||||
progressContainer.classList.remove('show');
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
window.adminCore.showStatus(message, 'error');
|
||||
}
|
||||
|
||||
// Setup volunteer modal event listeners
|
||||
function setupVolunteerModalEventListeners() {
|
||||
const closeModalBtn = document.getElementById('close-user-modal');
|
||||
const addUserBtn = document.getElementById('add-user-btn');
|
||||
const emailShiftDetailsBtn = document.getElementById('email-shift-details-btn');
|
||||
const modal = document.getElementById('shift-user-modal');
|
||||
|
||||
if (closeModalBtn) {
|
||||
closeModalBtn.addEventListener('click', closeShiftUserModal);
|
||||
}
|
||||
|
||||
if (addUserBtn) {
|
||||
addUserBtn.addEventListener('click', addUserToShift);
|
||||
}
|
||||
|
||||
if (emailShiftDetailsBtn) {
|
||||
emailShiftDetailsBtn.addEventListener('click', emailShiftDetails);
|
||||
}
|
||||
|
||||
// Close modal when clicking outside
|
||||
if (modal) {
|
||||
modal.addEventListener('click', function(e) {
|
||||
if (e.target === modal) {
|
||||
closeShiftUserModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Export shift volunteer functions
|
||||
window.adminShiftVolunteers = {
|
||||
showShiftUserModal,
|
||||
closeShiftUserModal,
|
||||
addUserToShift,
|
||||
removeVolunteerFromShift,
|
||||
emailShiftDetails,
|
||||
setupVolunteerModalEventListeners,
|
||||
loadAllUsers,
|
||||
getCurrentShiftData: () => currentShiftData,
|
||||
getAllUsers: () => allUsers
|
||||
};
|
||||
419
map/app/public/js/admin-shifts.js
Normal file
419
map/app/public/js/admin-shifts.js
Normal file
@@ -0,0 +1,419 @@
|
||||
/**
|
||||
* Admin Shifts Management Module
|
||||
* Handles shift CRUD operations, volunteer management, and email functionality
|
||||
*/
|
||||
|
||||
// Shift state
|
||||
let editingShiftId = null;
|
||||
let currentShiftData = null;
|
||||
let allUsers = [];
|
||||
|
||||
// Add shift management functions
|
||||
async function loadAdminShifts() {
|
||||
const list = document.getElementById('admin-shifts-list');
|
||||
if (list) {
|
||||
list.innerHTML = '<p>Loading shifts...</p>';
|
||||
}
|
||||
|
||||
try {
|
||||
console.log('Loading admin shifts...');
|
||||
const response = await fetch('/api/shifts/admin');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
console.log('Successfully loaded', data.shifts.length, 'shifts');
|
||||
displayAdminShifts(data.shifts);
|
||||
} else {
|
||||
console.error('Failed to load shifts:', data.error);
|
||||
if (list) {
|
||||
list.innerHTML = '<p>Failed to load shifts</p>';
|
||||
}
|
||||
window.adminCore.showStatus('Failed to load shifts', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading admin shifts:', error);
|
||||
if (list) {
|
||||
list.innerHTML = '<p>Error loading shifts</p>';
|
||||
}
|
||||
window.adminCore.showStatus('Failed to load shifts', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function displayAdminShifts(shifts) {
|
||||
const list = document.getElementById('admin-shifts-list');
|
||||
|
||||
if (!list) {
|
||||
console.error('Admin shifts list element not found');
|
||||
return;
|
||||
}
|
||||
|
||||
if (shifts.length === 0) {
|
||||
list.innerHTML = '<p>No shifts created yet.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
list.innerHTML = shifts.map(shift => {
|
||||
const shiftDate = window.adminCore.createLocalDate(shift.Date);
|
||||
const signupCount = shift.signups ? shift.signups.length : 0;
|
||||
const isPublic = shift['Is Public'] !== false;
|
||||
|
||||
console.log(`Shift "${shift.Title}" (ID: ${shift.ID}) has ${signupCount} volunteers:`, shift.signups?.map(s => s['User Email']) || []);
|
||||
|
||||
return `
|
||||
<div class="shift-admin-item">
|
||||
<div>
|
||||
<h4>${window.adminCore.escapeHtml(shift.Title)}</h4>
|
||||
<p>📅 ${shiftDate.toLocaleDateString()} | ⏰ ${shift['Start Time']} - ${shift['End Time']}</p>
|
||||
<p>📍 ${window.adminCore.escapeHtml(shift.Location || 'TBD')}</p>
|
||||
<p>👥 ${signupCount}/${shift['Max Volunteers']} volunteers</p>
|
||||
<p class="status-${(shift.Status || 'open').toLowerCase()}">${shift.Status || 'Open'}</p>
|
||||
<p class="${isPublic ? 'public-shift' : 'private-shift'}">${isPublic ? '🌐 Public' : '🔒 Private'}</p>
|
||||
${isPublic ? `
|
||||
<div class="public-link-section">
|
||||
<label>Public Link:</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="public-link-input" value="${generateShiftPublicLink(shift.ID)}" readonly />
|
||||
<button type="button" class="btn btn-secondary btn-sm copy-shift-link-btn" data-shift-id="${shift.ID}">📋</button>
|
||||
<button type="button" class="btn btn-info btn-sm open-shift-link-btn" data-shift-id="${shift.ID}">🔗</button>
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
<div class="shift-actions">
|
||||
<button class="btn btn-primary btn-sm manage-volunteers-btn" data-shift-id="${shift.ID}" data-shift='${JSON.stringify(shift).replace(/'/g, "'")}'>Manage Volunteers</button>
|
||||
<button class="btn btn-secondary btn-sm edit-shift-btn" data-shift-id="${shift.ID}">Edit</button>
|
||||
<button class="btn btn-danger btn-sm delete-shift-btn" data-shift-id="${shift.ID}">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
// Add event listeners using delegation
|
||||
setupShiftActionListeners();
|
||||
}
|
||||
|
||||
// Setup shift action listeners
|
||||
function setupShiftActionListeners() {
|
||||
const list = document.getElementById('admin-shifts-list');
|
||||
if (!list) return;
|
||||
|
||||
// Remove any existing listeners to avoid duplicates
|
||||
const newList = list.cloneNode(true);
|
||||
list.parentNode.replaceChild(newList, list);
|
||||
|
||||
// Get the updated reference
|
||||
const updatedList = document.getElementById('admin-shifts-list');
|
||||
|
||||
updatedList.addEventListener('click', function(e) {
|
||||
if (e.target.classList.contains('delete-shift-btn')) {
|
||||
const shiftId = e.target.getAttribute('data-shift-id');
|
||||
console.log('Delete button clicked for shift:', shiftId);
|
||||
deleteShift(shiftId);
|
||||
} else if (e.target.classList.contains('edit-shift-btn')) {
|
||||
const shiftId = e.target.getAttribute('data-shift-id');
|
||||
console.log('Edit button clicked for shift:', shiftId);
|
||||
editShift(shiftId);
|
||||
} else if (e.target.classList.contains('manage-volunteers-btn')) {
|
||||
const shiftId = e.target.getAttribute('data-shift-id');
|
||||
const shiftData = JSON.parse(e.target.getAttribute('data-shift').replace(/'/g, "'"));
|
||||
console.log('Manage volunteers clicked for shift:', shiftId);
|
||||
showShiftUserModal(shiftId, shiftData);
|
||||
} else if (e.target.classList.contains('copy-shift-link-btn')) {
|
||||
const shiftId = e.target.getAttribute('data-shift-id');
|
||||
console.log('Copy link button clicked for shift:', shiftId);
|
||||
copyShiftLink(shiftId);
|
||||
} else if (e.target.classList.contains('open-shift-link-btn')) {
|
||||
const shiftId = e.target.getAttribute('data-shift-id');
|
||||
console.log('Open link button clicked for shift:', shiftId);
|
||||
openShiftLink(shiftId);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Delete shift
|
||||
async function deleteShift(shiftId) {
|
||||
if (!confirm('Are you sure you want to delete this shift? All signups will be cancelled.')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/shifts/admin/${shiftId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
window.adminCore.showStatus('Shift deleted successfully', 'success');
|
||||
await loadAdminShifts();
|
||||
console.log('Refreshed shifts list after deleting shift');
|
||||
} else {
|
||||
window.adminCore.showStatus(data.error || 'Failed to delete shift', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error deleting shift:', error);
|
||||
window.adminCore.showStatus('Failed to delete shift', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Edit shift
|
||||
async function editShift(shiftId) {
|
||||
try {
|
||||
// Find the shift in the current data
|
||||
const response = await fetch('/api/shifts/admin');
|
||||
const data = await response.json();
|
||||
|
||||
if (!data.success) {
|
||||
window.adminCore.showStatus('Failed to load shift data', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const shift = data.shifts.find(s => s.ID === parseInt(shiftId));
|
||||
if (!shift) {
|
||||
window.adminCore.showStatus('Shift not found', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Set editing mode
|
||||
editingShiftId = shiftId;
|
||||
|
||||
// Populate the form
|
||||
const titleInput = document.getElementById('shift-title');
|
||||
const descInput = document.getElementById('shift-description');
|
||||
const dateInput = document.getElementById('shift-date');
|
||||
const startInput = document.getElementById('shift-start');
|
||||
const endInput = document.getElementById('shift-end');
|
||||
const locationInput = document.getElementById('shift-location');
|
||||
const maxVolInput = document.getElementById('shift-max-volunteers');
|
||||
|
||||
if (titleInput) titleInput.value = shift.Title || '';
|
||||
if (descInput) descInput.value = shift.Description || '';
|
||||
if (dateInput) dateInput.value = shift.Date || '';
|
||||
if (startInput) startInput.value = shift['Start Time'] || '';
|
||||
if (endInput) endInput.value = shift['End Time'] || '';
|
||||
if (locationInput) locationInput.value = shift.Location || '';
|
||||
if (maxVolInput) maxVolInput.value = shift['Max Volunteers'] || '';
|
||||
|
||||
// Update public checkbox if it exists
|
||||
const publicCheckbox = document.getElementById('shift-is-public');
|
||||
if (publicCheckbox) {
|
||||
publicCheckbox.checked = shift['Is Public'] !== false;
|
||||
}
|
||||
|
||||
// Change submit button text
|
||||
const submitBtn = document.querySelector('#shift-form button[type="submit"]');
|
||||
if (submitBtn) {
|
||||
submitBtn.textContent = 'Update Shift';
|
||||
}
|
||||
|
||||
// Remove editing class from any previous item
|
||||
document.querySelectorAll('.shift-admin-item.editing').forEach(el => {
|
||||
el.classList.remove('editing');
|
||||
});
|
||||
|
||||
// Add editing class to current item
|
||||
const shiftElement = document.querySelector(`[data-shift-id="${shiftId}"]`);
|
||||
if (shiftElement) {
|
||||
const shiftItem = shiftElement.closest('.shift-admin-item');
|
||||
if (shiftItem) {
|
||||
shiftItem.classList.add('editing');
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll to form
|
||||
const form = document.getElementById('shift-form');
|
||||
if (form) {
|
||||
form.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
|
||||
window.adminCore.showStatus('Editing shift: ' + shift.Title, 'info');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading shift for edit:', error);
|
||||
window.adminCore.showStatus('Failed to load shift for editing', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Create or update shift
|
||||
async function createShift(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const titleInput = document.getElementById('shift-title');
|
||||
const descInput = document.getElementById('shift-description');
|
||||
const dateInput = document.getElementById('shift-date');
|
||||
const startInput = document.getElementById('shift-start');
|
||||
const endInput = document.getElementById('shift-end');
|
||||
const locationInput = document.getElementById('shift-location');
|
||||
const maxVolInput = document.getElementById('shift-max-volunteers');
|
||||
|
||||
const title = titleInput?.value;
|
||||
const description = descInput?.value;
|
||||
const date = dateInput?.value;
|
||||
const startTime = startInput?.value;
|
||||
const endTime = endInput?.value;
|
||||
const location = locationInput?.value;
|
||||
const maxVolunteers = maxVolInput?.value;
|
||||
|
||||
// Get public checkbox value
|
||||
const publicCheckbox = document.getElementById('shift-is-public');
|
||||
const isPublic = publicCheckbox?.checked ?? true;
|
||||
|
||||
const shiftData = {
|
||||
title,
|
||||
description,
|
||||
date,
|
||||
startTime,
|
||||
endTime,
|
||||
location,
|
||||
maxVolunteers: parseInt(maxVolunteers),
|
||||
isPublic
|
||||
};
|
||||
|
||||
try {
|
||||
let response;
|
||||
if (editingShiftId) {
|
||||
// Update existing shift
|
||||
response = await fetch(`/api/shifts/admin/${editingShiftId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(shiftData)
|
||||
});
|
||||
} else {
|
||||
// Create new shift
|
||||
response = await fetch('/api/shifts/admin', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(shiftData)
|
||||
});
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
window.adminCore.showStatus(editingShiftId ? 'Shift updated successfully' : 'Shift created successfully', 'success');
|
||||
clearShiftForm();
|
||||
await loadAdminShifts();
|
||||
console.log('Refreshed shifts list after saving shift');
|
||||
} else {
|
||||
window.adminCore.showStatus(data.error || 'Failed to save shift', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error saving shift:', error);
|
||||
window.adminCore.showStatus('Failed to save shift', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function clearShiftForm() {
|
||||
const form = document.getElementById('shift-form');
|
||||
if (form) {
|
||||
form.reset();
|
||||
|
||||
// Reset editing state
|
||||
editingShiftId = null;
|
||||
|
||||
// Reset submit button text
|
||||
const submitBtn = document.querySelector('#shift-form button[type="submit"]');
|
||||
if (submitBtn) {
|
||||
submitBtn.textContent = 'Create Shift';
|
||||
}
|
||||
|
||||
// Remove editing class from any shift items
|
||||
document.querySelectorAll('.shift-admin-item.editing').forEach(el => {
|
||||
el.classList.remove('editing');
|
||||
});
|
||||
|
||||
window.adminCore.showStatus('Form cleared', 'info');
|
||||
}
|
||||
}
|
||||
|
||||
// Public Shifts Functions
|
||||
function generateShiftPublicLink(shiftId) {
|
||||
const baseUrl = window.location.origin;
|
||||
return `${baseUrl}/public-shifts.html#shift-${shiftId}`;
|
||||
}
|
||||
|
||||
function copyShiftLink(shiftId) {
|
||||
const link = generateShiftPublicLink(shiftId);
|
||||
navigator.clipboard.writeText(link).then(() => {
|
||||
window.adminCore.showStatus('Public shift link copied to clipboard!', 'success');
|
||||
}).catch(() => {
|
||||
// Fallback for older browsers
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = link;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textArea);
|
||||
window.adminCore.showStatus('Public shift link copied to clipboard!', 'success');
|
||||
});
|
||||
}
|
||||
|
||||
function openShiftLink(shiftId) {
|
||||
const link = generateShiftPublicLink(shiftId);
|
||||
window.open(link, '_blank');
|
||||
}
|
||||
|
||||
// Update the shift form to include Is Public checkbox
|
||||
function updateShiftFormWithPublicOption() {
|
||||
const form = document.getElementById('shift-form');
|
||||
if (!form) return;
|
||||
|
||||
// Check if public checkbox already exists
|
||||
if (document.getElementById('shift-is-public')) return;
|
||||
|
||||
const maxVolunteersGroup = form.querySelector('.form-group:has(#shift-max-volunteers)');
|
||||
if (maxVolunteersGroup) {
|
||||
const publicGroup = document.createElement('div');
|
||||
publicGroup.className = 'form-group';
|
||||
publicGroup.innerHTML = `
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="shift-is-public" checked />
|
||||
<span>Show on public signup page</span>
|
||||
</label>
|
||||
`;
|
||||
maxVolunteersGroup.insertAdjacentElement('afterend', publicGroup);
|
||||
}
|
||||
}
|
||||
|
||||
// Setup shift event listeners
|
||||
function setupShiftEventListeners() {
|
||||
// Shift form submission
|
||||
const shiftForm = document.getElementById('shift-form');
|
||||
if (shiftForm) {
|
||||
shiftForm.addEventListener('submit', createShift);
|
||||
}
|
||||
|
||||
// Clear shift form button
|
||||
const clearShiftBtn = document.getElementById('clear-shift-form');
|
||||
if (clearShiftBtn) {
|
||||
clearShiftBtn.addEventListener('click', function() {
|
||||
const wasEditing = editingShiftId !== null;
|
||||
clearShiftForm();
|
||||
if (wasEditing) {
|
||||
window.adminCore.showStatus('Edit cancelled', 'info');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Export shift management functions
|
||||
window.adminShifts = {
|
||||
loadAdminShifts,
|
||||
displayAdminShifts,
|
||||
deleteShift,
|
||||
editShift,
|
||||
createShift,
|
||||
clearShiftForm,
|
||||
generateShiftPublicLink,
|
||||
copyShiftLink,
|
||||
openShiftLink,
|
||||
updateShiftFormWithPublicOption,
|
||||
setupShiftEventListeners,
|
||||
getEditingShiftId: () => editingShiftId,
|
||||
getCurrentShiftData: () => currentShiftData,
|
||||
getAllUsers: () => allUsers
|
||||
};
|
||||
365
map/app/public/js/admin-users.js
Normal file
365
map/app/public/js/admin-users.js
Normal file
@@ -0,0 +1,365 @@
|
||||
/**
|
||||
* Admin Users Management Module
|
||||
* Handles user CRUD operations, email broadcasting, and user administration
|
||||
*/
|
||||
|
||||
// User management state
|
||||
let allUsersData = [];
|
||||
|
||||
// User Management Functions
|
||||
async function loadUsers() {
|
||||
const loadingEl = document.getElementById('users-loading');
|
||||
const emptyEl = document.getElementById('users-empty');
|
||||
const tableBody = document.getElementById('users-table-body');
|
||||
|
||||
if (loadingEl) loadingEl.style.display = 'block';
|
||||
if (emptyEl) emptyEl.style.display = 'none';
|
||||
if (tableBody) tableBody.innerHTML = '';
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/users');
|
||||
const data = await response.json();
|
||||
|
||||
if (loadingEl) loadingEl.style.display = 'none';
|
||||
|
||||
if (data.success && data.users) {
|
||||
displayUsers(data.users);
|
||||
} else {
|
||||
throw new Error(data.error || 'Failed to load users');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading users:', error);
|
||||
if (loadingEl) loadingEl.style.display = 'none';
|
||||
if (emptyEl) {
|
||||
emptyEl.textContent = 'Failed to load users';
|
||||
emptyEl.style.display = 'block';
|
||||
}
|
||||
window.adminCore.showStatus('Failed to load users', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function displayUsers(users) {
|
||||
const container = document.querySelector('.users-list');
|
||||
if (!container) return;
|
||||
|
||||
// Find or create the users table container, preserving the header
|
||||
let usersTableContainer = container.querySelector('.users-table-container');
|
||||
if (!usersTableContainer) {
|
||||
// If container doesn't exist, create it after the header
|
||||
const header = container.querySelector('.users-list-header');
|
||||
usersTableContainer = document.createElement('div');
|
||||
usersTableContainer.className = 'users-table-container';
|
||||
|
||||
if (header && header.nextSibling) {
|
||||
container.insertBefore(usersTableContainer, header.nextSibling);
|
||||
} else if (header) {
|
||||
container.appendChild(usersTableContainer);
|
||||
} else {
|
||||
container.appendChild(usersTableContainer);
|
||||
}
|
||||
}
|
||||
|
||||
if (!users || users.length === 0) {
|
||||
usersTableContainer.innerHTML = '<p class="empty-message">No users found.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const tableHtml = `
|
||||
<div class="users-table-wrapper">
|
||||
<table class="users-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Email</th>
|
||||
<th>Name</th>
|
||||
<th>Role</th>
|
||||
<th>Created</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="users-table-body">
|
||||
${users.map(user => {
|
||||
const createdDate = user.created_at || user['Created At'] || user.createdAt;
|
||||
const formattedDate = createdDate ? new Date(createdDate).toLocaleDateString() : 'N/A';
|
||||
const isAdmin = user.admin || user.Admin || false;
|
||||
const userType = user.UserType || user.userType || (isAdmin ? 'admin' : 'user');
|
||||
const userId = user.Id || user.id || user.ID;
|
||||
|
||||
// Handle expiration info
|
||||
let expirationInfo = '';
|
||||
if (user.ExpiresAt) {
|
||||
const expirationDate = new Date(user.ExpiresAt);
|
||||
const now = new Date();
|
||||
const daysUntilExpiration = Math.floor((expirationDate - now) / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (daysUntilExpiration < 0) {
|
||||
expirationInfo = `<span class="expiration-info expiration-warning">Expired ${Math.abs(daysUntilExpiration)} days ago</span>`;
|
||||
} else if (daysUntilExpiration <= 3) {
|
||||
expirationInfo = `<span class="expiration-info expiration-warning">Expires in ${daysUntilExpiration} day${daysUntilExpiration !== 1 ? 's' : ''}</span>`;
|
||||
} else {
|
||||
expirationInfo = `<span class="expiration-info">Expires: ${expirationDate.toLocaleDateString()}</span>`;
|
||||
}
|
||||
}
|
||||
|
||||
return `
|
||||
<tr ${user.ExpiresAt && new Date(user.ExpiresAt) < new Date() ? 'class="expired"' : (user.ExpiresAt && new Date(user.ExpiresAt) - new Date() < 3 * 24 * 60 * 60 * 1000 ? 'class="expires-soon"' : '')}>
|
||||
<td data-label="Email">${window.adminCore.escapeHtml(user.email || user.Email || 'N/A')}</td>
|
||||
<td data-label="Name">${window.adminCore.escapeHtml(user.name || user.Name || 'N/A')}</td>
|
||||
<td data-label="Role">
|
||||
<span class="user-role ${userType}">
|
||||
${userType.charAt(0).toUpperCase() + userType.slice(1)}
|
||||
</span>
|
||||
${expirationInfo}
|
||||
</td>
|
||||
<td data-label="Created">${formattedDate}</td>
|
||||
<td data-label="Actions">
|
||||
<div class="user-actions">
|
||||
<button class="btn btn-secondary send-login-btn" data-user-id="${userId}" data-user-email="${window.adminCore.escapeHtml(user.email || user.Email)}">
|
||||
Send Login Details
|
||||
</button>
|
||||
<button class="btn btn-danger delete-user-btn" data-user-id="${userId}" data-user-email="${window.adminCore.escapeHtml(user.email || user.Email)}">
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p id="users-loading" class="loading-message" style="display: none;">Loading...</p>
|
||||
`;
|
||||
|
||||
usersTableContainer.innerHTML = tableHtml;
|
||||
setupUserActionListeners();
|
||||
}
|
||||
|
||||
function setupUserActionListeners() {
|
||||
const container = document.querySelector('.users-list');
|
||||
if (!container) return;
|
||||
|
||||
// Remove existing event listeners by cloning the container
|
||||
const newContainer = container.cloneNode(true);
|
||||
container.parentNode.replaceChild(newContainer, container);
|
||||
|
||||
// Get the updated reference
|
||||
const updatedContainer = document.querySelector('.users-list');
|
||||
|
||||
updatedContainer.addEventListener('click', function(e) {
|
||||
if (e.target.classList.contains('delete-user-btn')) {
|
||||
const userId = e.target.getAttribute('data-user-id');
|
||||
const userEmail = e.target.getAttribute('data-user-email');
|
||||
console.log('Delete button clicked for user:', userId);
|
||||
deleteUser(userId, userEmail);
|
||||
} else if (e.target.classList.contains('send-login-btn')) {
|
||||
const userId = e.target.getAttribute('data-user-id');
|
||||
const userEmail = e.target.getAttribute('data-user-email');
|
||||
console.log('Send login details button clicked for user:', userId);
|
||||
sendLoginDetailsToUser(userId, userEmail);
|
||||
} else if (e.target.id === 'email-all-users-btn') {
|
||||
console.log('Email All Users button clicked');
|
||||
showEmailUsersModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function deleteUser(userId, userEmail) {
|
||||
if (!confirm(`Are you sure you want to delete user "${userEmail}"? This action cannot be undone.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/users/${userId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
window.adminCore.showStatus(`User "${userEmail}" deleted successfully`, 'success');
|
||||
loadUsers(); // Reload the users list
|
||||
} else {
|
||||
throw new Error(data.error || 'Failed to delete user');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error deleting user:', error);
|
||||
window.adminCore.showStatus(`Failed to delete user: ${error.message}`, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function sendLoginDetailsToUser(userId, userEmail) {
|
||||
if (!confirm(`Send login details to "${userEmail}"?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/users/${userId}/send-login-details`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
window.adminCore.showStatus(`Login details sent to "${userEmail}" successfully`, 'success');
|
||||
} else {
|
||||
throw new Error(data.error || 'Failed to send login details');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error sending login details:', error);
|
||||
window.adminCore.showStatus(`Failed to send login details: ${error.message}`, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function createUser(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const emailInput = document.getElementById('user-email');
|
||||
const passwordInput = document.getElementById('user-password');
|
||||
const nameInput = document.getElementById('user-name');
|
||||
const userTypeSelect = document.getElementById('user-type');
|
||||
const expireDaysInput = document.getElementById('user-expire-days');
|
||||
const adminCheckbox = document.getElementById('user-is-admin');
|
||||
|
||||
const email = emailInput?.value.trim();
|
||||
const password = passwordInput?.value;
|
||||
const name = nameInput?.value.trim();
|
||||
const userType = userTypeSelect?.value;
|
||||
const expireDays = userType === 'temp' ?
|
||||
parseInt(expireDaysInput?.value) : null;
|
||||
const admin = adminCheckbox?.checked;
|
||||
|
||||
if (!email || !password) {
|
||||
window.adminCore.showStatus('Email and password are required', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (password.length < 6) {
|
||||
window.adminCore.showStatus('Password must be at least 6 characters long', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (userType === 'temp' && (!expireDays || expireDays < 1 || expireDays > 365)) {
|
||||
window.adminCore.showStatus('Expiration days must be between 1 and 365 for temporary users', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const userData = {
|
||||
email,
|
||||
password,
|
||||
name: name || '',
|
||||
isAdmin: userType === 'admin' || admin,
|
||||
userType,
|
||||
expireDays
|
||||
};
|
||||
|
||||
const response = await fetch('/api/users', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
window.adminCore.showStatus('User created successfully', 'success');
|
||||
clearUserForm();
|
||||
loadUsers(); // Reload the users list
|
||||
} else {
|
||||
throw new Error(data.error || 'Failed to create user');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error creating user:', error);
|
||||
window.adminCore.showStatus(`Failed to create user: ${error.message}`, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function clearUserForm() {
|
||||
const form = document.getElementById('create-user-form');
|
||||
if (form) {
|
||||
form.reset();
|
||||
|
||||
// Reset user type to default
|
||||
const userTypeSelect = document.getElementById('user-type');
|
||||
if (userTypeSelect) {
|
||||
userTypeSelect.value = 'user';
|
||||
}
|
||||
|
||||
// Hide expiration group
|
||||
const expirationGroup = document.getElementById('expiration-group');
|
||||
if (expirationGroup) {
|
||||
expirationGroup.style.display = 'none';
|
||||
}
|
||||
|
||||
// Re-enable admin checkbox
|
||||
const isAdminCheckbox = document.getElementById('user-is-admin');
|
||||
if (isAdminCheckbox) {
|
||||
isAdminCheckbox.disabled = false;
|
||||
}
|
||||
|
||||
window.adminCore.showStatus('User form cleared', 'info');
|
||||
}
|
||||
}
|
||||
|
||||
// Setup user-related event listeners
|
||||
function setupUserEventListeners() {
|
||||
// User form submission
|
||||
const userForm = document.getElementById('create-user-form');
|
||||
if (userForm) {
|
||||
userForm.addEventListener('submit', createUser);
|
||||
}
|
||||
|
||||
// Clear user form button
|
||||
const clearUserBtn = document.getElementById('clear-user-form');
|
||||
if (clearUserBtn) {
|
||||
clearUserBtn.addEventListener('click', clearUserForm);
|
||||
}
|
||||
|
||||
// User type change listener
|
||||
const userTypeSelect = document.getElementById('user-type');
|
||||
if (userTypeSelect) {
|
||||
userTypeSelect.addEventListener('change', (e) => {
|
||||
const expirationGroup = document.getElementById('expiration-group');
|
||||
const isAdminCheckbox = document.getElementById('user-is-admin');
|
||||
|
||||
if (e.target.value === 'temp') {
|
||||
if (expirationGroup) expirationGroup.style.display = 'block';
|
||||
if (isAdminCheckbox) {
|
||||
isAdminCheckbox.checked = false;
|
||||
isAdminCheckbox.disabled = true;
|
||||
}
|
||||
} else {
|
||||
if (expirationGroup) expirationGroup.style.display = 'none';
|
||||
if (isAdminCheckbox) isAdminCheckbox.disabled = false;
|
||||
|
||||
if (e.target.value === 'admin') {
|
||||
if (isAdminCheckbox) isAdminCheckbox.checked = true;
|
||||
} else {
|
||||
if (isAdminCheckbox) isAdminCheckbox.checked = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Export user management functions
|
||||
window.adminUsers = {
|
||||
loadUsers,
|
||||
displayUsers,
|
||||
deleteUser,
|
||||
sendLoginDetailsToUser,
|
||||
createUser,
|
||||
clearUserForm,
|
||||
setupUserEventListeners,
|
||||
getAllUsersData: () => allUsersData,
|
||||
setAllUsersData: (data) => { allUsersData = data; }
|
||||
};
|
||||
471
map/app/public/js/admin-walksheet.js
Normal file
471
map/app/public/js/admin-walksheet.js
Normal file
@@ -0,0 +1,471 @@
|
||||
/**
|
||||
* Admin Walk Sheet Module
|
||||
* Handles walk sheet configuration, preview generation, QR codes, and printing
|
||||
*/
|
||||
|
||||
// Walk sheet state
|
||||
let storedQRCodes = {};
|
||||
|
||||
// Save walk sheet configuration
|
||||
async function saveWalkSheetConfig() {
|
||||
const config = {
|
||||
walk_sheet_title: document.getElementById('walk-sheet-title')?.value || '',
|
||||
walk_sheet_subtitle: document.getElementById('walk-sheet-subtitle')?.value || '',
|
||||
walk_sheet_footer: document.getElementById('walk-sheet-footer')?.value || '',
|
||||
qr_code_1_url: document.getElementById('qr-code-1-url')?.value || '',
|
||||
qr_code_1_label: document.getElementById('qr-code-1-label')?.value || '',
|
||||
qr_code_2_url: document.getElementById('qr-code-2-url')?.value || '',
|
||||
qr_code_2_label: document.getElementById('qr-code-2-label')?.value || '',
|
||||
qr_code_3_url: document.getElementById('qr-code-3-url')?.value || '',
|
||||
qr_code_3_label: document.getElementById('qr-code-3-label')?.value || ''
|
||||
};
|
||||
|
||||
console.log('Saving walk sheet config:', config);
|
||||
|
||||
// Show loading state
|
||||
const saveButton = document.getElementById('save-walk-sheet');
|
||||
if (!saveButton) {
|
||||
window.adminCore.showStatus('Save button not found', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const originalText = saveButton.textContent;
|
||||
saveButton.textContent = 'Saving...';
|
||||
saveButton.disabled = true;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/admin/walk-sheet-config', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(config)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
console.log('Save response:', data);
|
||||
|
||||
if (data.success) {
|
||||
window.adminCore.showStatus('Walk sheet configuration saved successfully!', 'success');
|
||||
console.log('Configuration saved successfully');
|
||||
// Don't reload config here - the form already has the latest values
|
||||
// Just regenerate the preview
|
||||
generateWalkSheetPreview();
|
||||
} else {
|
||||
throw new Error(data.error || 'Failed to save');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Save error:', error);
|
||||
window.adminCore.showStatus(error.message || 'Failed to save walk sheet configuration', 'error');
|
||||
} finally {
|
||||
saveButton.textContent = originalText;
|
||||
saveButton.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Generate walk sheet preview
|
||||
function generateWalkSheetPreview() {
|
||||
const title = document.getElementById('walk-sheet-title')?.value || 'Campaign Walk Sheet';
|
||||
const subtitle = document.getElementById('walk-sheet-subtitle')?.value || 'Door-to-Door Canvassing Form';
|
||||
const footer = document.getElementById('walk-sheet-footer')?.value || 'Thank you for your support!';
|
||||
|
||||
let previewHTML = `
|
||||
<div class="ws-header">
|
||||
<h1 class="ws-title">${window.adminCore.escapeHtml(title)}</h1>
|
||||
<p class="ws-subtitle">${window.adminCore.escapeHtml(subtitle)}</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add QR codes section
|
||||
const qrCodesHTML = [];
|
||||
for (let i = 1; i <= 3; i++) {
|
||||
const urlInput = document.getElementById(`qr-code-${i}-url`);
|
||||
const labelInput = document.getElementById(`qr-code-${i}-label`);
|
||||
|
||||
const url = urlInput?.value || '';
|
||||
const label = labelInput?.value || '';
|
||||
|
||||
if (url) {
|
||||
qrCodesHTML.push(`
|
||||
<div class="ws-qr-item">
|
||||
<div class="ws-qr-code" id="preview-qr-${i}">
|
||||
<!-- QR code will be inserted here -->
|
||||
</div>
|
||||
<div class="ws-qr-label">${window.adminCore.escapeHtml(label || `QR Code ${i}`)}</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
}
|
||||
|
||||
if (qrCodesHTML.length > 0) {
|
||||
previewHTML += `
|
||||
<div class="ws-qr-section">
|
||||
${qrCodesHTML.join('')}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Add form fields based on the main map form
|
||||
previewHTML += `
|
||||
<div class="ws-form-section">
|
||||
<div class="ws-form-row">
|
||||
<div class="ws-form-group">
|
||||
<label class="ws-form-label">First Name</label>
|
||||
<div class="ws-form-field"></div>
|
||||
</div>
|
||||
<div class="ws-form-group">
|
||||
<label class="ws-form-label">Last Name</label>
|
||||
<div class="ws-form-field"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ws-form-row">
|
||||
<div class="ws-form-group">
|
||||
<label class="ws-form-label">Email</label>
|
||||
<div class="ws-form-field"></div>
|
||||
</div>
|
||||
<div class="ws-form-group">
|
||||
<label class="ws-form-label">Phone</label>
|
||||
<div class="ws-form-field"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ws-form-row">
|
||||
<div class="ws-form-group">
|
||||
<label class="ws-form-label">Address</label>
|
||||
<div class="ws-form-field"></div>
|
||||
</div>
|
||||
<div class="ws-form-group">
|
||||
<label class="ws-form-label">Unit Number</label>
|
||||
<div class="ws-form-field"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ws-form-row">
|
||||
<div class="ws-form-group">
|
||||
<label class="ws-form-label">Support Level</label>
|
||||
<div class="ws-form-field circles">
|
||||
<span class="ws-circle-option"><span class="ws-circle">1</span></span>
|
||||
<span class="ws-circle-option"><span class="ws-circle">2</span></span>
|
||||
<span class="ws-circle-option"><span class="ws-circle">3</span></span>
|
||||
<span class="ws-circle-option"><span class="ws-circle">4</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ws-form-group">
|
||||
<label class="ws-form-label">Sign Request</label>
|
||||
<div class="ws-form-field circles">
|
||||
<span class="ws-circle-option"><span class="ws-circle">Y</span> Yes</span>
|
||||
<span class="ws-circle-option"><span class="ws-circle">N</span> No</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ws-form-row">
|
||||
<div class="ws-form-group">
|
||||
<label class="ws-form-label">Sign Size</label>
|
||||
<div class="ws-form-field circles">
|
||||
<span class="ws-circle-option"><span class="ws-circle">R</span></span>
|
||||
<span class="ws-circle-option"><span class="ws-circle">L</span></span>
|
||||
<span class="ws-circle-option"><span class="ws-circle">U</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ws-form-group">
|
||||
<label class="ws-form-label">Visited Date</label>
|
||||
<div class="ws-form-field"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ws-notes-section">
|
||||
<div class="ws-notes-label">Notes & Comments</div>
|
||||
<div class="ws-notes-area"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add footer
|
||||
if (footer) {
|
||||
previewHTML += `
|
||||
<div class="ws-footer">
|
||||
${window.adminCore.escapeHtml(footer)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Update preview
|
||||
const previewContent = document.getElementById('walk-sheet-preview-content');
|
||||
if (previewContent) {
|
||||
previewContent.innerHTML = previewHTML;
|
||||
|
||||
// Generate QR codes after DOM is updated
|
||||
setTimeout(() => {
|
||||
generatePreviewQRCodes();
|
||||
}, 100);
|
||||
} else {
|
||||
console.warn('Walk sheet preview content container not found');
|
||||
}
|
||||
}
|
||||
|
||||
// Generate QR codes for preview
|
||||
async function generatePreviewQRCodes() {
|
||||
for (let i = 1; i <= 3; i++) {
|
||||
const urlInput = document.getElementById(`qr-code-${i}-url`);
|
||||
const url = urlInput?.value || '';
|
||||
const qrContainer = document.getElementById(`preview-qr-${i}`);
|
||||
|
||||
if (url && qrContainer) {
|
||||
try {
|
||||
// Use our local QR code generation endpoint with size matching display
|
||||
const qrImageUrl = `/api/qr?text=${encodeURIComponent(url)}&size=200`; // Generate at higher res
|
||||
qrContainer.innerHTML = `<img src="${qrImageUrl}" alt="QR Code ${i}" style="width: 120px; height: 120px;">`; // Display smaller
|
||||
} catch (error) {
|
||||
console.error(`Failed to display QR code ${i}:`, error);
|
||||
qrContainer.innerHTML = '<div style="width: 120px; height: 120px; border: 2px dashed #ccc; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #999;">QR Error</div>';
|
||||
}
|
||||
} else if (qrContainer) {
|
||||
// Clear empty QR containers
|
||||
qrContainer.innerHTML = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Print walk sheet
|
||||
function printWalkSheet() {
|
||||
// First generate fresh preview to ensure QR codes are generated
|
||||
generateWalkSheetPreview();
|
||||
|
||||
// Wait for QR codes to generate, then print
|
||||
setTimeout(() => {
|
||||
const previewContent = document.getElementById('walk-sheet-preview-content');
|
||||
if (!previewContent) return;
|
||||
|
||||
const clonedContent = previewContent.cloneNode(true);
|
||||
|
||||
// Convert canvas elements to images for printing
|
||||
const canvases = previewContent.querySelectorAll('canvas');
|
||||
const clonedCanvases = clonedContent.querySelectorAll('canvas');
|
||||
|
||||
canvases.forEach((canvas, index) => {
|
||||
if (canvas && clonedCanvases[index]) {
|
||||
const img = document.createElement('img');
|
||||
img.src = canvas.toDataURL('image/png');
|
||||
img.width = canvas.width;
|
||||
img.height = canvas.height;
|
||||
img.style.width = canvas.style.width || `${canvas.width}px`;
|
||||
img.style.height = canvas.style.height || `${canvas.height}px`;
|
||||
clonedCanvases[index].parentNode.replaceChild(img, clonedCanvases[index]);
|
||||
}
|
||||
});
|
||||
|
||||
// Create a print-specific window
|
||||
const printWindow = window.open('', '_blank');
|
||||
|
||||
printWindow.document.write(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Walk Sheet - Print</title>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<link rel="stylesheet" href="/css/admin.css">
|
||||
<style>
|
||||
@media print {
|
||||
@page {
|
||||
size: letter;
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.walk-sheet-page {
|
||||
width: 8.5in !important;
|
||||
height: 11in !important;
|
||||
padding: 0.5in !important;
|
||||
margin: 0 !important;
|
||||
box-shadow: none !important;
|
||||
page-break-after: avoid !important;
|
||||
transform: none !important;
|
||||
}
|
||||
.ws-qr-code img {
|
||||
width: 100px !important;
|
||||
height: 100px !important;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
}
|
||||
@media screen {
|
||||
body {
|
||||
margin: 20px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
.walk-sheet-page {
|
||||
width: 8.5in;
|
||||
height: 11in;
|
||||
padding: 0.5in;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="walk-sheet-page">
|
||||
${clonedContent.innerHTML}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
|
||||
printWindow.document.close();
|
||||
|
||||
printWindow.onload = function() {
|
||||
setTimeout(() => {
|
||||
printWindow.print();
|
||||
// User can close manually after printing
|
||||
}, 500);
|
||||
};
|
||||
}, 1000); // Give QR codes time to generate
|
||||
}
|
||||
|
||||
// Load walk sheet configuration
|
||||
async function loadWalkSheetConfig() {
|
||||
try {
|
||||
console.log('Loading walk sheet config...');
|
||||
const response = await fetch('/api/admin/walk-sheet-config');
|
||||
const data = await response.json();
|
||||
|
||||
console.log('Loaded walk sheet config:', data);
|
||||
|
||||
if (data.success) {
|
||||
// The config object contains the actual configuration
|
||||
const config = data.config || {};
|
||||
|
||||
console.log('Config object:', config);
|
||||
|
||||
// Populate form fields - use the exact field names from the backend
|
||||
const titleInput = document.getElementById('walk-sheet-title');
|
||||
const subtitleInput = document.getElementById('walk-sheet-subtitle');
|
||||
const footerInput = document.getElementById('walk-sheet-footer');
|
||||
|
||||
console.log('Found form elements:', {
|
||||
title: !!titleInput,
|
||||
subtitle: !!subtitleInput,
|
||||
footer: !!footerInput
|
||||
});
|
||||
|
||||
if (titleInput) {
|
||||
titleInput.value = config.walk_sheet_title || 'Campaign Walk Sheet';
|
||||
console.log('Set title to:', titleInput.value);
|
||||
}
|
||||
if (subtitleInput) {
|
||||
subtitleInput.value = config.walk_sheet_subtitle || 'Door-to-Door Canvassing Form';
|
||||
console.log('Set subtitle to:', subtitleInput.value);
|
||||
}
|
||||
if (footerInput) {
|
||||
footerInput.value = config.walk_sheet_footer || 'Thank you for your support!';
|
||||
console.log('Set footer to:', footerInput.value);
|
||||
}
|
||||
|
||||
// Populate QR code fields
|
||||
for (let i = 1; i <= 3; i++) {
|
||||
const urlField = document.getElementById(`qr-code-${i}-url`);
|
||||
const labelField = document.getElementById(`qr-code-${i}-label`);
|
||||
|
||||
console.log(`QR ${i} fields found:`, {
|
||||
url: !!urlField,
|
||||
label: !!labelField
|
||||
});
|
||||
|
||||
if (urlField) {
|
||||
urlField.value = config[`qr_code_${i}_url`] || '';
|
||||
console.log(`Set QR ${i} URL to:`, urlField.value);
|
||||
}
|
||||
if (labelField) {
|
||||
labelField.value = config[`qr_code_${i}_label`] || '';
|
||||
console.log(`Set QR ${i} label to:`, labelField.value);
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
} else {
|
||||
console.error('Failed to load config:', data.error);
|
||||
window.adminCore.showStatus('Failed to load walk sheet configuration', 'error');
|
||||
return false;
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to load walk sheet config:', error);
|
||||
window.adminCore.showStatus('Failed to load walk sheet configuration', 'error');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Check if walk sheet section is visible and load config if needed
|
||||
function checkAndLoadWalkSheetConfig() {
|
||||
const walkSheetSection = document.getElementById('walk-sheet');
|
||||
if (walkSheetSection && walkSheetSection.style.display !== 'none') {
|
||||
console.log('Walk sheet section is visible, loading config...');
|
||||
loadWalkSheetConfig().then((success) => {
|
||||
if (success) {
|
||||
generateWalkSheetPreview();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Setup walk sheet event listeners
|
||||
function setupWalkSheetEventListeners() {
|
||||
// Walk Sheet buttons
|
||||
const saveWalkSheetBtn = document.getElementById('save-walk-sheet');
|
||||
const previewWalkSheetBtn = document.getElementById('preview-walk-sheet');
|
||||
const printWalkSheetBtn = document.getElementById('print-walk-sheet');
|
||||
const refreshPreviewBtn = document.getElementById('refresh-preview');
|
||||
|
||||
if (saveWalkSheetBtn) saveWalkSheetBtn.addEventListener('click', saveWalkSheetConfig);
|
||||
if (previewWalkSheetBtn) previewWalkSheetBtn.addEventListener('click', generateWalkSheetPreview);
|
||||
if (printWalkSheetBtn) printWalkSheetBtn.addEventListener('click', printWalkSheet);
|
||||
if (refreshPreviewBtn) refreshPreviewBtn.addEventListener('click', generateWalkSheetPreview);
|
||||
|
||||
// Auto-update preview on input change
|
||||
const walkSheetInputs = document.querySelectorAll(
|
||||
'#walk-sheet-title, #walk-sheet-subtitle, #walk-sheet-footer, ' +
|
||||
'[id^="qr-code-"][id$="-url"], [id^="qr-code-"][id$="-label"]'
|
||||
);
|
||||
|
||||
walkSheetInputs.forEach(input => {
|
||||
if (input) {
|
||||
input.addEventListener('input', window.adminCore.debounce(() => {
|
||||
generateWalkSheetPreview();
|
||||
}, 500));
|
||||
}
|
||||
});
|
||||
|
||||
// Add URL change listeners to detect when QR codes need regeneration
|
||||
for (let i = 1; i <= 3; i++) {
|
||||
const urlInput = document.getElementById(`qr-code-${i}-url`);
|
||||
if (urlInput) {
|
||||
let previousUrl = urlInput.value;
|
||||
|
||||
urlInput.addEventListener('change', () => {
|
||||
const currentUrl = urlInput.value;
|
||||
if (currentUrl !== previousUrl) {
|
||||
console.log(`QR Code ${i} URL changed from "${previousUrl}" to "${currentUrl}"`);
|
||||
// Remove stored QR code so it gets regenerated
|
||||
delete storedQRCodes[currentUrl];
|
||||
previousUrl = currentUrl;
|
||||
generateWalkSheetPreview();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Export walk sheet functions
|
||||
window.adminWalkSheet = {
|
||||
saveWalkSheetConfig,
|
||||
generateWalkSheetPreview,
|
||||
printWalkSheet,
|
||||
loadWalkSheetConfig,
|
||||
checkAndLoadWalkSheetConfig,
|
||||
setupWalkSheetEventListeners
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user