1792 lines
67 KiB
JavaScript
1792 lines
67 KiB
JavaScript
/**
|
|
* 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
|
|
};
|
|
}
|
|
|
|
// 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>';
|
|
}
|
|
showStatus('Failed to load shifts', 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading admin shifts:', error);
|
|
if (list) {
|
|
list.innerHTML = '<p>Error loading shifts</p>';
|
|
}
|
|
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 = 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>${escapeHtml(shift.Title)}</h4>
|
|
<p>📅 ${shiftDate.toLocaleDateString()} | ⏰ ${shift['Start Time']} - ${shift['End Time']}</p>
|
|
<p>📍 ${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();
|
|
}
|
|
|
|
// Fix the setupShiftActionListeners function
|
|
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);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Update the deleteShift function (remove window. prefix)
|
|
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) {
|
|
showStatus('Shift deleted successfully', 'success');
|
|
await loadAdminShifts();
|
|
console.log('Refreshed shifts list after deleting shift');
|
|
} else {
|
|
showStatus(data.error || 'Failed to delete shift', 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error deleting shift:', error);
|
|
showStatus('Failed to delete shift', 'error');
|
|
}
|
|
}
|
|
|
|
// Update editShift function (remove window. prefix)
|
|
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) {
|
|
showStatus('Failed to load shift data', 'error');
|
|
return;
|
|
}
|
|
|
|
const shift = data.shifts.find(s => s.ID === parseInt(shiftId));
|
|
if (!shift) {
|
|
showStatus('Shift not found', 'error');
|
|
return;
|
|
}
|
|
|
|
// Set editing mode
|
|
editingShiftId = shiftId;
|
|
|
|
// Populate the form
|
|
document.getElementById('shift-title').value = shift.Title || '';
|
|
document.getElementById('shift-description').value = shift.Description || '';
|
|
document.getElementById('shift-date').value = shift.Date || '';
|
|
document.getElementById('shift-start').value = shift['Start Time'] || '';
|
|
document.getElementById('shift-end').value = shift['End Time'] || '';
|
|
document.getElementById('shift-location').value = shift.Location || '';
|
|
document.getElementById('shift-max-volunteers').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
|
|
document.getElementById('shift-form').scrollIntoView({ behavior: 'smooth' });
|
|
|
|
showStatus('Editing shift: ' + shift.Title, 'info');
|
|
|
|
} catch (error) {
|
|
console.error('Error loading shift for edit:', error);
|
|
showStatus('Failed to load shift for editing', 'error');
|
|
}
|
|
}
|
|
|
|
// Add function to create shift
|
|
async function createShift(e) {
|
|
e.preventDefault();
|
|
|
|
const title = document.getElementById('shift-title').value;
|
|
const description = document.getElementById('shift-description').value;
|
|
const date = document.getElementById('shift-date').value;
|
|
const startTime = document.getElementById('shift-start').value;
|
|
const endTime = document.getElementById('shift-end').value;
|
|
const location = document.getElementById('shift-location').value;
|
|
const maxVolunteers = document.getElementById('shift-max-volunteers').value;
|
|
|
|
// Get public checkbox value
|
|
const isPublic = document.getElementById('shift-is-public')?.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) {
|
|
showStatus(editingShiftId ? 'Shift updated successfully' : 'Shift created successfully', 'success');
|
|
clearShiftForm();
|
|
await loadAdminShifts();
|
|
console.log('Refreshed shifts list after saving shift');
|
|
} else {
|
|
showStatus(data.error || 'Failed to save shift', 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error saving shift:', error);
|
|
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');
|
|
});
|
|
|
|
showStatus('Form cleared', 'info');
|
|
}
|
|
}
|
|
|
|
// 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';
|
|
}
|
|
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">${escapeHtml(user.email || user.Email || 'N/A')}</td>
|
|
<td data-label="Name">${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="${escapeHtml(user.email || user.Email)}">
|
|
Send Login Details
|
|
</button>
|
|
<button class="btn btn-danger delete-user-btn" data-user-id="${userId}" data-user-email="${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) {
|
|
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);
|
|
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) {
|
|
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);
|
|
showStatus(`Failed to send login details: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
async function createUser(e) {
|
|
e.preventDefault();
|
|
|
|
const email = document.getElementById('user-email').value.trim();
|
|
const password = document.getElementById('user-password').value;
|
|
const name = document.getElementById('user-name').value.trim();
|
|
const userType = document.getElementById('user-type').value;
|
|
const expireDays = userType === 'temp' ?
|
|
parseInt(document.getElementById('user-expire-days').value) : null;
|
|
const admin = document.getElementById('user-is-admin').checked;
|
|
|
|
if (!email || !password) {
|
|
showStatus('Email and password are required', 'error');
|
|
return;
|
|
}
|
|
|
|
if (password.length < 6) {
|
|
showStatus('Password must be at least 6 characters long', 'error');
|
|
return;
|
|
}
|
|
|
|
if (userType === 'temp' && (!expireDays || expireDays < 1 || expireDays > 365)) {
|
|
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) {
|
|
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);
|
|
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;
|
|
}
|
|
|
|
showStatus('User form cleared', 'info');
|
|
}
|
|
}
|
|
|
|
// Email All Users Functions
|
|
let allUsersData = [];
|
|
|
|
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);
|
|
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
|
|
document.getElementById('email-subject').value = '';
|
|
document.getElementById('email-content').innerHTML = '';
|
|
document.getElementById('show-preview').checked = false;
|
|
document.getElementById('email-preview').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 subject = document.getElementById('email-subject').value.trim();
|
|
const content = document.getElementById('email-content').innerHTML.trim();
|
|
|
|
if (!subject) {
|
|
showStatus('Please enter an email subject', 'error');
|
|
return;
|
|
}
|
|
|
|
if (!content || content === '<br>' || content === '') {
|
|
showStatus('Please enter email content', 'error');
|
|
return;
|
|
}
|
|
|
|
if (allUsersData.length === 0) {
|
|
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);
|
|
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');
|
|
|
|
// Show progress container
|
|
progressContainer.classList.add('show');
|
|
|
|
// Reset counters
|
|
pendingCountEl.textContent = totalCount;
|
|
successCountEl.textContent = '0';
|
|
errorCountEl.textContent = '0';
|
|
|
|
// Reset progress bar
|
|
progressBar.style.width = '0%';
|
|
progressBar.classList.remove('complete', 'error');
|
|
progressText.textContent = '0%';
|
|
|
|
// Clear status list
|
|
statusList.innerHTML = '';
|
|
|
|
// Hide close button initially
|
|
closeBtn.style.display = 'none';
|
|
|
|
// Add status items for each user
|
|
allUsersData.forEach(user => {
|
|
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
|
|
successCountEl.textContent = successful.length;
|
|
errorCountEl.textContent = failed.length;
|
|
pendingCountEl.textContent = '0';
|
|
|
|
// Update progress bar
|
|
const percentage = ((successful.length + failed.length) / total * 100).toFixed(1);
|
|
progressBar.style.width = percentage + '%';
|
|
progressText.textContent = percentage + '%';
|
|
|
|
if (failed.length > 0) {
|
|
progressBar.classList.add('error');
|
|
} else {
|
|
progressBar.classList.add('complete');
|
|
}
|
|
|
|
// Update individual status items
|
|
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
|
|
closeBtn.style.display = 'block';
|
|
closeBtn.onclick = () => {
|
|
document.getElementById('email-progress-container').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
|
|
progressContainer.classList.add('show');
|
|
|
|
// Update progress bar to show error
|
|
progressBar.style.width = '100%';
|
|
progressBar.classList.add('error');
|
|
progressText.textContent = 'Error';
|
|
|
|
// Show close button
|
|
closeBtn.style.display = 'block';
|
|
closeBtn.onclick = () => {
|
|
progressContainer.classList.remove('show');
|
|
};
|
|
|
|
showStatus(message, 'error');
|
|
}
|
|
|
|
// 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}`);
|
|
}
|
|
}
|
|
|
|
// Shift User Management Functions
|
|
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
|
|
document.getElementById('modal-shift-title').textContent = shiftData.Title;
|
|
const shiftDate = createLocalDate(shiftData.Date);
|
|
document.getElementById('modal-shift-details').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
|
|
document.getElementById('shift-user-modal').style.display = 'flex';
|
|
}
|
|
|
|
// Display current volunteers in the modal
|
|
function displayCurrentVolunteers(volunteers) {
|
|
const container = document.getElementById('current-volunteers-list');
|
|
|
|
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">${escapeHtml(volunteer['User Name'] || volunteer['User Email'] || 'Unknown')}</div>
|
|
<div class="volunteer-email">${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');
|
|
|
|
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) {
|
|
showStatus('Please select a user to add', 'error');
|
|
return;
|
|
}
|
|
|
|
if (!currentShiftData || !currentShiftData.ID) {
|
|
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) {
|
|
showStatus('User successfully added to shift', 'success');
|
|
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 {
|
|
showStatus(data.error || 'Failed to add user to shift', 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error adding user to shift:', error);
|
|
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) {
|
|
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) {
|
|
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 {
|
|
showStatus(data.error || 'Failed to remove volunteer from shift', 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error removing volunteer from shift:', error);
|
|
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);
|
|
}
|
|
}
|
|
|
|
// New function to 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() {
|
|
document.getElementById('shift-user-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) {
|
|
showStatus('No shift selected', 'error');
|
|
return;
|
|
}
|
|
|
|
// Check if there are volunteers to email
|
|
const volunteers = currentShiftData.signups || [];
|
|
if (volunteers.length === 0) {
|
|
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);
|
|
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');
|
|
|
|
// Show progress container
|
|
progressContainer.classList.add('show');
|
|
|
|
// Reset counters
|
|
pendingCountEl.textContent = totalCount;
|
|
successCountEl.textContent = '0';
|
|
errorCountEl.textContent = '0';
|
|
|
|
// Reset progress bar
|
|
progressBar.style.width = '0%';
|
|
progressBar.classList.remove('complete', 'error');
|
|
progressText.textContent = '0%';
|
|
|
|
// Clear status list
|
|
statusList.innerHTML = '';
|
|
|
|
// Hide close button initially
|
|
closeBtn.style.display = 'none';
|
|
|
|
// Add status items for each volunteer
|
|
const volunteers = currentShiftData.signups || [];
|
|
volunteers.forEach(volunteer => {
|
|
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
|
|
successCountEl.textContent = successful.length;
|
|
errorCountEl.textContent = failed.length;
|
|
pendingCountEl.textContent = '0';
|
|
|
|
// Update progress bar
|
|
const percentage = ((successful.length + failed.length) / total * 100).toFixed(1);
|
|
progressBar.style.width = percentage + '%';
|
|
progressText.textContent = percentage + '%';
|
|
|
|
if (failed.length > 0) {
|
|
progressBar.classList.add('error');
|
|
} else {
|
|
progressBar.classList.add('complete');
|
|
}
|
|
|
|
// Update individual status items
|
|
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
|
|
closeBtn.style.display = 'block';
|
|
closeBtn.onclick = () => {
|
|
document.getElementById('shift-email-progress-container').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
|
|
progressContainer.classList.add('show');
|
|
|
|
// Update progress bar to show error
|
|
progressBar.style.width = '100%';
|
|
progressBar.classList.add('error');
|
|
progressText.textContent = 'Error';
|
|
|
|
// Show close button
|
|
closeBtn.style.display = 'block';
|
|
closeBtn.onclick = () => {
|
|
progressContainer.classList.remove('show');
|
|
};
|
|
|
|
showStatus(message, 'error');
|
|
}
|
|
|
|
// Setup modal event listeners when DOM is loaded
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
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();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// Setup email users modal event listeners when DOM is loaded
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 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();
|
|
});
|
|
|
|
// 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(() => {
|
|
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);
|
|
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);
|
|
}
|
|
}
|
|
|
|
// Call this when the shifts section is shown
|
|
function enhanceShiftsSection() {
|
|
updateShiftFormWithPublicOption();
|
|
}
|
|
|
|
// Update the showSection function to call enhanceShiftsSection when shifts section is shown
|
|
const originalShowSection = window.showSection || showSection;
|
|
window.showSection = function(sectionId) {
|
|
if (originalShowSection) {
|
|
originalShowSection(sectionId);
|
|
}
|
|
|
|
if (sectionId === 'shifts') {
|
|
enhanceShiftsSection();
|
|
}
|
|
};
|