New site frontend updates, search, and general bug fixes
This commit is contained in:
@@ -209,6 +209,7 @@
|
||||
.calendar-dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
z-index: 100; /* Lower than popup but above other content */
|
||||
}
|
||||
|
||||
.calendar-toggle {
|
||||
@@ -227,6 +228,7 @@
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
z-index: 1000;
|
||||
margin-top: 4px;
|
||||
display: none; /* Hidden by default */
|
||||
}
|
||||
|
||||
.calendar-option {
|
||||
@@ -428,13 +430,13 @@
|
||||
|
||||
/* Calendar shift popup/tooltip */
|
||||
.shift-popup {
|
||||
position: absolute;
|
||||
position: fixed; /* Changed from absolute to fixed */
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 15px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
z-index: 1000;
|
||||
z-index: 10000; /* High z-index to appear above header */
|
||||
min-width: 250px;
|
||||
max-width: 300px;
|
||||
}
|
||||
@@ -455,6 +457,153 @@
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* Custom Confirmation Modal */
|
||||
.confirm-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 20000; /* Even higher than shift popup */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.confirm-modal-backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
animation: fadeInBackdrop 0.2s ease-out;
|
||||
}
|
||||
|
||||
.confirm-modal-content {
|
||||
background: white;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
animation: slideInModal 0.3s ease-out;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.confirm-modal-content h3 {
|
||||
margin: 0 0 15px 0;
|
||||
color: var(--dark-color);
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.confirm-modal-content p {
|
||||
margin: 0 0 25px 0;
|
||||
color: var(--secondary-color);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.confirm-modal-actions {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.confirm-modal-actions .btn {
|
||||
padding: 10px 20px;
|
||||
font-weight: 500;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInBackdrop {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInModal {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -60%) scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Position the modal content in the center */
|
||||
.confirm-modal-content {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* Mobile adjustments for confirm modal */
|
||||
@media (max-width: 768px) {
|
||||
.confirm-modal-backdrop {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.confirm-modal-content {
|
||||
padding: 25px 20px;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.confirm-modal-content h3 {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.confirm-modal-actions {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.confirm-modal-actions .btn {
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.confirm-modal-content {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.confirm-modal-content h3 {
|
||||
font-size: 1em;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.confirm-modal-content p {
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix for mobile popup positioning */
|
||||
@media (max-width: 768px) {
|
||||
.shift-popup {
|
||||
max-width: 90%;
|
||||
left: 5% !important;
|
||||
right: 5% !important;
|
||||
width: auto;
|
||||
position: fixed;
|
||||
top: 50% !important;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile adjustments */
|
||||
@media (max-width: 768px) {
|
||||
/* Ensure proper scrolling on mobile */
|
||||
|
||||
@@ -101,17 +101,17 @@ function displayShifts(shifts) {
|
||||
const grid = document.getElementById('shifts-grid');
|
||||
|
||||
if (shifts.length === 0) {
|
||||
grid.innerHTML = '<p class="no-shifts">No shifts available at this time.</p>';
|
||||
grid.innerHTML = '<div class="no-shifts">No shifts available for the selected criteria.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
grid.innerHTML = shifts.map(shift => {
|
||||
const shiftDate = new Date(shift.Date);
|
||||
const isSignedUp = mySignups.some(s => s.shift_id === shift.ID);
|
||||
const isSignedUp = mySignups.some(signup => signup.shift_id === shift.ID);
|
||||
const isFull = shift['Current Volunteers'] >= shift['Max Volunteers'];
|
||||
const shiftDate = new Date(shift.Date);
|
||||
|
||||
return `
|
||||
<div class="shift-card ${isFull ? 'full' : ''} ${isSignedUp ? 'signed-up' : ''}">
|
||||
<div class="shift-card ${isSignedUp ? 'signed-up' : ''} ${isFull && !isSignedUp ? 'full' : ''}">
|
||||
<h3>${escapeHtml(shift.Title)}</h3>
|
||||
<div class="shift-details">
|
||||
<p>📅 ${shiftDate.toLocaleDateString()}</p>
|
||||
@@ -119,7 +119,7 @@ function displayShifts(shifts) {
|
||||
<p>📍 ${escapeHtml(shift.Location || 'TBD')}</p>
|
||||
<p>👥 ${shift['Current Volunteers']}/${shift['Max Volunteers']} volunteers</p>
|
||||
</div>
|
||||
${shift.Description ? `<div class="shift-description">${escapeHtml(shift.Description)}</div>` : ''}
|
||||
${shift.Description ? `<p class="shift-description">${escapeHtml(shift.Description)}</p>` : ''}
|
||||
<div class="shift-actions">
|
||||
${isSignedUp
|
||||
? `<button class="btn btn-danger btn-sm cancel-signup-btn" data-shift-id="${shift.ID}">Cancel Signup</button>
|
||||
@@ -133,7 +133,7 @@ function displayShifts(shifts) {
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
// Add event listeners after rendering
|
||||
// Set up event listeners using delegation
|
||||
setupShiftCardListeners();
|
||||
|
||||
// Update calendar view if it's currently active
|
||||
@@ -146,19 +146,14 @@ function displayMySignups() {
|
||||
const list = document.getElementById('my-signups-list');
|
||||
|
||||
if (mySignups.length === 0) {
|
||||
list.innerHTML = '<p>You haven\'t signed up for any shifts yet.</p>';
|
||||
list.innerHTML = '<p class="no-shifts">You haven\'t signed up for any shifts yet.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Need to match signups with shift details for date/time info
|
||||
const signupsWithDetails = mySignups.map(signup => {
|
||||
const shift = allShifts.find(s => s.ID === signup.shift_id);
|
||||
return {
|
||||
...signup,
|
||||
shift,
|
||||
// Use title from signup record if available, otherwise from shift
|
||||
displayTitle: signup.shift_title || (shift ? shift.Title : 'Unknown Shift')
|
||||
};
|
||||
return { ...signup, shift };
|
||||
}).filter(s => s.shift); // Only show signups where we can find the shift details
|
||||
|
||||
list.innerHTML = signupsWithDetails.map(signup => {
|
||||
@@ -166,18 +161,19 @@ function displayMySignups() {
|
||||
return `
|
||||
<div class="signup-item">
|
||||
<div>
|
||||
<h4>${escapeHtml(signup.displayTitle)}</h4>
|
||||
<h4>${escapeHtml(signup.shift.Title)}</h4>
|
||||
<p>📅 ${shiftDate.toLocaleDateString()} ⏰ ${signup.shift['Start Time']} - ${signup.shift['End Time']}</p>
|
||||
<p>📍 ${escapeHtml(signup.shift.Location || 'TBD')}</p>
|
||||
</div>
|
||||
<div class="signup-actions">
|
||||
${generateCalendarDropdown(signup.shift)}
|
||||
<button class="btn btn-danger btn-sm cancel-signup-btn" data-shift-id="${signup.shift.ID}">Cancel</button>
|
||||
<button class="btn btn-danger btn-sm cancel-signup-btn" data-shift-id="${signup.shift_id}">Cancel Signup</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
// Add event listeners after rendering
|
||||
// Set up event listeners using delegation
|
||||
setupMySignupsListeners();
|
||||
|
||||
// Update calendar view if it's currently active
|
||||
@@ -191,45 +187,55 @@ function setupShiftCardListeners() {
|
||||
const grid = document.getElementById('shifts-grid');
|
||||
if (!grid) return;
|
||||
|
||||
// Remove any existing listeners by cloning
|
||||
const newGrid = grid.cloneNode(true);
|
||||
grid.parentNode.replaceChild(newGrid, grid);
|
||||
// Use event delegation on the grid itself, not cloning
|
||||
grid.removeEventListener('click', handleShiftCardClick); // Remove if exists
|
||||
grid.addEventListener('click', handleShiftCardClick);
|
||||
}
|
||||
|
||||
// Create a separate handler function
|
||||
function handleShiftCardClick(e) {
|
||||
const target = e.target;
|
||||
|
||||
// Add click listener for all buttons
|
||||
newGrid.addEventListener('click', async (e) => {
|
||||
// Handle signup buttons
|
||||
if (e.target.classList.contains('signup-btn')) {
|
||||
const shiftId = e.target.getAttribute('data-shift-id');
|
||||
await signupForShift(shiftId);
|
||||
}
|
||||
// Handle cancel buttons
|
||||
else if (e.target.classList.contains('cancel-signup-btn')) {
|
||||
const shiftId = e.target.getAttribute('data-shift-id');
|
||||
await cancelSignup(shiftId);
|
||||
}
|
||||
// Handle calendar toggle buttons
|
||||
else if (e.target.classList.contains('calendar-toggle')) {
|
||||
e.stopPropagation();
|
||||
const dropdown = e.target.closest('.calendar-dropdown');
|
||||
const options = dropdown.querySelector('.calendar-options');
|
||||
const isOpen = options.style.display !== 'none';
|
||||
|
||||
// Close all other dropdowns
|
||||
document.querySelectorAll('.calendar-options').forEach(opt => {
|
||||
opt.style.display = 'none';
|
||||
});
|
||||
|
||||
// Toggle this dropdown
|
||||
options.style.display = isOpen ? 'none' : 'block';
|
||||
}
|
||||
// Handle calendar option clicks
|
||||
else if (e.target.closest('.calendar-option')) {
|
||||
e.stopPropagation();
|
||||
const dropdown = e.target.closest('.calendar-dropdown');
|
||||
const options = dropdown.querySelector('.calendar-options');
|
||||
options.style.display = 'none';
|
||||
}
|
||||
});
|
||||
// Handle signup button
|
||||
if (target.classList.contains('signup-btn')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const shiftId = target.getAttribute('data-shift-id');
|
||||
if (shiftId) signupForShift(shiftId);
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle cancel button
|
||||
if (target.classList.contains('cancel-signup-btn')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const shiftId = target.getAttribute('data-shift-id');
|
||||
if (shiftId) cancelSignup(shiftId);
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle calendar toggle
|
||||
if (target.classList.contains('calendar-toggle')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const dropdown = target.nextElementSibling;
|
||||
|
||||
// Close all other dropdowns
|
||||
document.querySelectorAll('.calendar-options').forEach(opt => {
|
||||
if (opt !== dropdown) opt.style.display = 'none';
|
||||
});
|
||||
|
||||
// Toggle this dropdown
|
||||
dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle calendar option clicks
|
||||
if (target.classList.contains('calendar-option')) {
|
||||
e.stopPropagation();
|
||||
// Let the link work naturally
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// New function to setup listeners for my signups
|
||||
@@ -237,146 +243,42 @@ function setupMySignupsListeners() {
|
||||
const list = document.getElementById('my-signups-list');
|
||||
if (!list) return;
|
||||
|
||||
// Remove any existing listeners by cloning
|
||||
const newList = list.cloneNode(true);
|
||||
list.parentNode.replaceChild(newList, list);
|
||||
// Use event delegation
|
||||
list.removeEventListener('click', handleMySignupsClick); // Remove if exists
|
||||
list.addEventListener('click', handleMySignupsClick);
|
||||
}
|
||||
|
||||
// Create a separate handler for my signups
|
||||
function handleMySignupsClick(e) {
|
||||
const target = e.target;
|
||||
|
||||
// Add click listener for all interactions
|
||||
newList.addEventListener('click', async (e) => {
|
||||
// Handle cancel buttons
|
||||
if (e.target.classList.contains('cancel-signup-btn')) {
|
||||
const shiftId = e.target.getAttribute('data-shift-id');
|
||||
await cancelSignup(shiftId);
|
||||
}
|
||||
// Handle calendar toggle buttons
|
||||
else if (e.target.classList.contains('calendar-toggle')) {
|
||||
e.stopPropagation();
|
||||
const dropdown = e.target.closest('.calendar-dropdown');
|
||||
const options = dropdown.querySelector('.calendar-options');
|
||||
const isOpen = options.style.display !== 'none';
|
||||
|
||||
// Close all other dropdowns
|
||||
document.querySelectorAll('.calendar-options').forEach(opt => {
|
||||
opt.style.display = 'none';
|
||||
});
|
||||
|
||||
// Toggle this dropdown
|
||||
options.style.display = isOpen ? 'none' : 'block';
|
||||
}
|
||||
// Handle calendar option clicks
|
||||
else if (e.target.closest('.calendar-option')) {
|
||||
e.stopPropagation();
|
||||
const dropdown = e.target.closest('.calendar-dropdown');
|
||||
const options = dropdown.querySelector('.calendar-options');
|
||||
options.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function signupForShift(shiftId) {
|
||||
try {
|
||||
const response = await fetch(`/api/shifts/${shiftId}/signup`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showStatus('Successfully signed up for shift!', 'success');
|
||||
await loadShifts();
|
||||
await loadMySignups();
|
||||
} else {
|
||||
showStatus(data.error || 'Failed to sign up', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error signing up:', error);
|
||||
showStatus('Failed to sign up for shift', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function cancelSignup(shiftId) {
|
||||
if (!confirm('Are you sure you want to cancel your signup for this shift?')) {
|
||||
// Handle cancel button
|
||||
if (target.classList.contains('cancel-signup-btn')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const shiftId = target.getAttribute('data-shift-id');
|
||||
if (shiftId) cancelSignup(shiftId);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/shifts/${shiftId}/cancel`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
// Handle calendar toggle
|
||||
if (target.classList.contains('calendar-toggle')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const dropdown = target.nextElementSibling;
|
||||
|
||||
// Close all other dropdowns
|
||||
document.querySelectorAll('.calendar-options').forEach(opt => {
|
||||
if (opt !== dropdown) opt.style.display = 'none';
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showStatus('Signup cancelled', 'success');
|
||||
await loadShifts();
|
||||
await loadMySignups();
|
||||
} else {
|
||||
showStatus(data.error || 'Failed to cancel signup', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error cancelling signup:', error);
|
||||
showStatus('Failed to cancel signup', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function setupEventListeners() {
|
||||
const dateFilter = document.getElementById('date-filter');
|
||||
if (dateFilter) {
|
||||
dateFilter.addEventListener('change', filterShifts);
|
||||
}
|
||||
}
|
||||
|
||||
function filterShifts() {
|
||||
const dateFilter = document.getElementById('date-filter').value;
|
||||
|
||||
if (!dateFilter) {
|
||||
displayShifts(allShifts);
|
||||
// Toggle this dropdown
|
||||
dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
const filtered = allShifts.filter(shift => {
|
||||
return shift.Date === dateFilter; // Changed from shift.date to shift.Date
|
||||
});
|
||||
|
||||
displayShifts(filtered);
|
||||
}
|
||||
|
||||
function clearFilters() {
|
||||
document.getElementById('date-filter').value = '';
|
||||
loadShifts(); // Reload shifts without filters
|
||||
}
|
||||
|
||||
function showStatus(message, type = 'info') {
|
||||
const container = document.getElementById('status-container');
|
||||
if (!container) return;
|
||||
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.className = `status-message ${type}`;
|
||||
messageDiv.textContent = message;
|
||||
|
||||
container.appendChild(messageDiv);
|
||||
|
||||
setTimeout(() => {
|
||||
messageDiv.remove();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
if (text === null || text === undefined) {
|
||||
return '';
|
||||
}
|
||||
const div = document.createElement('div');
|
||||
div.textContent = String(text);
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// Add these calendar URL generation functions after the existing functions
|
||||
// New function to generate calendar URLs
|
||||
function generateCalendarUrls(shift) {
|
||||
const shiftDate = new Date(shift.Date);
|
||||
|
||||
@@ -492,86 +394,466 @@ function setupShiftCardListeners() {
|
||||
const grid = document.getElementById('shifts-grid');
|
||||
if (!grid) return;
|
||||
|
||||
// Remove any existing listeners by cloning
|
||||
const newGrid = grid.cloneNode(true);
|
||||
grid.parentNode.replaceChild(newGrid, grid);
|
||||
|
||||
// Add click listener for all buttons
|
||||
newGrid.addEventListener('click', async (e) => {
|
||||
// Handle signup buttons
|
||||
if (e.target.classList.contains('signup-btn')) {
|
||||
const shiftId = e.target.getAttribute('data-shift-id');
|
||||
await signupForShift(shiftId);
|
||||
}
|
||||
// Handle cancel buttons
|
||||
else if (e.target.classList.contains('cancel-signup-btn')) {
|
||||
const shiftId = e.target.getAttribute('data-shift-id');
|
||||
await cancelSignup(shiftId);
|
||||
}
|
||||
// Handle calendar toggle buttons
|
||||
else if (e.target.classList.contains('calendar-toggle')) {
|
||||
e.stopPropagation();
|
||||
const dropdown = e.target.closest('.calendar-dropdown');
|
||||
const options = dropdown.querySelector('.calendar-options');
|
||||
const isOpen = options.style.display !== 'none';
|
||||
|
||||
// Close all other dropdowns
|
||||
document.querySelectorAll('.calendar-options').forEach(opt => {
|
||||
opt.style.display = 'none';
|
||||
});
|
||||
|
||||
// Toggle this dropdown
|
||||
options.style.display = isOpen ? 'none' : 'block';
|
||||
}
|
||||
// Handle calendar option clicks
|
||||
else if (e.target.closest('.calendar-option')) {
|
||||
e.stopPropagation();
|
||||
const dropdown = e.target.closest('.calendar-dropdown');
|
||||
const options = dropdown.querySelector('.calendar-options');
|
||||
options.style.display = 'none';
|
||||
}
|
||||
});
|
||||
// Use event delegation on the grid itself, not cloning
|
||||
grid.removeEventListener('click', handleShiftCardClick); // Remove if exists
|
||||
grid.addEventListener('click', handleShiftCardClick);
|
||||
}
|
||||
|
||||
// Update setupMySignupsListeners similarly
|
||||
// Create a separate handler function
|
||||
function handleShiftCardClick(e) {
|
||||
const target = e.target;
|
||||
|
||||
// Handle signup button
|
||||
if (target.classList.contains('signup-btn')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const shiftId = target.getAttribute('data-shift-id');
|
||||
if (shiftId) signupForShift(shiftId);
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle cancel button
|
||||
if (target.classList.contains('cancel-signup-btn')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const shiftId = target.getAttribute('data-shift-id');
|
||||
if (shiftId) cancelSignup(shiftId);
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle calendar toggle
|
||||
if (target.classList.contains('calendar-toggle')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const dropdown = target.nextElementSibling;
|
||||
|
||||
// Close all other dropdowns
|
||||
document.querySelectorAll('.calendar-options').forEach(opt => {
|
||||
if (opt !== dropdown) opt.style.display = 'none';
|
||||
});
|
||||
|
||||
// Toggle this dropdown
|
||||
dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle calendar option clicks
|
||||
if (target.classList.contains('calendar-option')) {
|
||||
e.stopPropagation();
|
||||
// Let the link work naturally
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Fix the setupMySignupsListeners function similarly
|
||||
function setupMySignupsListeners() {
|
||||
const list = document.getElementById('my-signups-list');
|
||||
if (!list) return;
|
||||
|
||||
// Remove any existing listeners by cloning
|
||||
const newList = list.cloneNode(true);
|
||||
list.parentNode.replaceChild(newList, list);
|
||||
// Use event delegation
|
||||
list.removeEventListener('click', handleMySignupsClick); // Remove if exists
|
||||
list.addEventListener('click', handleMySignupsClick);
|
||||
}
|
||||
|
||||
// Create a separate handler for my signups
|
||||
function handleMySignupsClick(e) {
|
||||
const target = e.target;
|
||||
|
||||
// Add click listener for all interactions
|
||||
newList.addEventListener('click', async (e) => {
|
||||
// Handle cancel buttons
|
||||
if (e.target.classList.contains('cancel-signup-btn')) {
|
||||
const shiftId = e.target.getAttribute('data-shift-id');
|
||||
await cancelSignup(shiftId);
|
||||
}
|
||||
// Handle calendar toggle buttons
|
||||
else if (e.target.classList.contains('calendar-toggle')) {
|
||||
// Handle cancel button
|
||||
if (target.classList.contains('cancel-signup-btn')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const shiftId = target.getAttribute('data-shift-id');
|
||||
if (shiftId) cancelSignup(shiftId);
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle calendar toggle
|
||||
if (target.classList.contains('calendar-toggle')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const dropdown = target.nextElementSibling;
|
||||
|
||||
// Close all other dropdowns
|
||||
document.querySelectorAll('.calendar-options').forEach(opt => {
|
||||
if (opt !== dropdown) opt.style.display = 'none';
|
||||
});
|
||||
|
||||
// Toggle this dropdown
|
||||
dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Update the displayShifts function to properly show calendar dropdowns
|
||||
function displayShifts(shifts) {
|
||||
const grid = document.getElementById('shifts-grid');
|
||||
|
||||
if (shifts.length === 0) {
|
||||
grid.innerHTML = '<div class="no-shifts">No shifts available for the selected criteria.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
grid.innerHTML = shifts.map(shift => {
|
||||
const isSignedUp = mySignups.some(signup => signup.shift_id === shift.ID);
|
||||
const isFull = shift['Current Volunteers'] >= shift['Max Volunteers'];
|
||||
const shiftDate = new Date(shift.Date);
|
||||
|
||||
return `
|
||||
<div class="shift-card ${isSignedUp ? 'signed-up' : ''} ${isFull && !isSignedUp ? 'full' : ''}">
|
||||
<h3>${escapeHtml(shift.Title)}</h3>
|
||||
<div class="shift-details">
|
||||
<p>📅 ${shiftDate.toLocaleDateString()}</p>
|
||||
<p>⏰ ${shift['Start Time']} - ${shift['End Time']}</p>
|
||||
<p>📍 ${escapeHtml(shift.Location || 'TBD')}</p>
|
||||
<p>👥 ${shift['Current Volunteers']}/${shift['Max Volunteers']} volunteers</p>
|
||||
</div>
|
||||
${shift.Description ? `<p class="shift-description">${escapeHtml(shift.Description)}</p>` : ''}
|
||||
<div class="shift-actions">
|
||||
${isSignedUp
|
||||
? `<button class="btn btn-danger btn-sm cancel-signup-btn" data-shift-id="${shift.ID}">Cancel Signup</button>
|
||||
${generateCalendarDropdown(shift)}`
|
||||
: isFull
|
||||
? '<button class="btn btn-secondary btn-sm" disabled>Shift Full</button>'
|
||||
: `<button class="btn btn-primary btn-sm signup-btn" data-shift-id="${shift.ID}">Sign Up</button>`
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
// Set up event listeners using delegation
|
||||
setupShiftCardListeners();
|
||||
|
||||
// Update calendar view if it's currently active
|
||||
if (currentView === 'calendar') {
|
||||
renderCalendar();
|
||||
}
|
||||
}
|
||||
|
||||
// Update the displayMySignups function to always show calendar dropdowns
|
||||
function displayMySignups() {
|
||||
const list = document.getElementById('my-signups-list');
|
||||
|
||||
if (mySignups.length === 0) {
|
||||
list.innerHTML = '<p class="no-shifts">You haven\'t signed up for any shifts yet.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Need to match signups with shift details for date/time info
|
||||
const signupsWithDetails = mySignups.map(signup => {
|
||||
const shift = allShifts.find(s => s.ID === signup.shift_id);
|
||||
return { ...signup, shift };
|
||||
}).filter(s => s.shift); // Only show signups where we can find the shift details
|
||||
|
||||
list.innerHTML = signupsWithDetails.map(signup => {
|
||||
const shiftDate = new Date(signup.shift.Date);
|
||||
return `
|
||||
<div class="signup-item">
|
||||
<div>
|
||||
<h4>${escapeHtml(signup.shift.Title)}</h4>
|
||||
<p>📅 ${shiftDate.toLocaleDateString()} ⏰ ${signup.shift['Start Time']} - ${signup.shift['End Time']}</p>
|
||||
<p>📍 ${escapeHtml(signup.shift.Location || 'TBD')}</p>
|
||||
</div>
|
||||
<div class="signup-actions">
|
||||
${generateCalendarDropdown(signup.shift)}
|
||||
<button class="btn btn-danger btn-sm cancel-signup-btn" data-shift-id="${signup.shift_id}">Cancel Signup</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
// Set up event listeners using delegation
|
||||
setupMySignupsListeners();
|
||||
|
||||
// Update calendar view if it's currently active
|
||||
if (currentView === 'calendar') {
|
||||
renderCalendar();
|
||||
}
|
||||
}
|
||||
|
||||
// Add a global variable to track popup cleanup
|
||||
let currentPopup = null;
|
||||
|
||||
// Update the showShiftPopup function to handle z-index and cleanup
|
||||
function showShiftPopup(shift, targetElement) {
|
||||
// Remove any existing popup
|
||||
if (currentPopup) {
|
||||
currentPopup.remove();
|
||||
currentPopup = null;
|
||||
}
|
||||
|
||||
const existingPopup = document.querySelector('.shift-popup');
|
||||
if (existingPopup) {
|
||||
existingPopup.remove();
|
||||
}
|
||||
|
||||
const popup = document.createElement('div');
|
||||
popup.className = 'shift-popup';
|
||||
|
||||
const isSignedUp = mySignups.some(signup => signup.shift_id === shift.ID);
|
||||
const isFull = shift['Current Volunteers'] >= shift['Max Volunteers'];
|
||||
const shiftDate = new Date(shift.Date);
|
||||
|
||||
popup.innerHTML = `
|
||||
<h4>${escapeHtml(shift.Title)}</h4>
|
||||
<p>📅 ${shiftDate.toLocaleDateString()}</p>
|
||||
<p>⏰ ${shift['Start Time']} - ${shift['End Time']}</p>
|
||||
<p>📍 ${escapeHtml(shift.Location || 'TBD')}</p>
|
||||
<p>👥 ${shift['Current Volunteers']}/${shift['Max Volunteers']} volunteers</p>
|
||||
${shift.Description ? `<p>${escapeHtml(shift.Description)}</p>` : ''}
|
||||
<div class="shift-actions">
|
||||
${isSignedUp
|
||||
? `<button class="btn btn-danger btn-sm cancel-signup-btn" data-shift-id="${shift.ID}">Cancel Signup</button>`
|
||||
: isFull
|
||||
? '<button class="btn btn-secondary btn-sm" disabled>Shift Full</button>'
|
||||
: `<button class="btn btn-primary btn-sm signup-btn" data-shift-id="${shift.ID}">Sign Up</button>`
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Position popup
|
||||
document.body.appendChild(popup);
|
||||
currentPopup = popup; // Track the current popup
|
||||
|
||||
const rect = targetElement.getBoundingClientRect();
|
||||
const popupRect = popup.getBoundingClientRect();
|
||||
|
||||
let left = rect.left + (rect.width / 2) - (popupRect.width / 2);
|
||||
let top = rect.bottom + 10;
|
||||
|
||||
// Adjust if popup goes off screen
|
||||
if (left < 10) left = 10;
|
||||
if (left + popupRect.width > window.innerWidth - 10) {
|
||||
left = window.innerWidth - popupRect.width - 10;
|
||||
}
|
||||
if (top + popupRect.height > window.innerHeight - 10) {
|
||||
top = rect.top - popupRect.height - 10;
|
||||
}
|
||||
|
||||
popup.style.left = `${left}px`;
|
||||
popup.style.top = `${top}px`;
|
||||
|
||||
// Add event listeners for buttons in popup
|
||||
const signupBtn = popup.querySelector('.signup-btn');
|
||||
const cancelBtn = popup.querySelector('.cancel-signup-btn');
|
||||
|
||||
if (signupBtn) {
|
||||
signupBtn.addEventListener('click', async (e) => {
|
||||
e.stopPropagation();
|
||||
const dropdown = e.target.closest('.calendar-dropdown');
|
||||
const options = dropdown.querySelector('.calendar-options');
|
||||
const isOpen = options.style.display !== 'none';
|
||||
|
||||
// Close all other dropdowns
|
||||
document.querySelectorAll('.calendar-options').forEach(opt => {
|
||||
opt.style.display = 'none';
|
||||
});
|
||||
|
||||
// Toggle this dropdown
|
||||
options.style.display = isOpen ? 'none' : 'block';
|
||||
}
|
||||
// Handle calendar option clicks
|
||||
else if (e.target.closest('.calendar-option')) {
|
||||
await signupForShift(shift.ID);
|
||||
popup.remove();
|
||||
currentPopup = null;
|
||||
});
|
||||
}
|
||||
|
||||
if (cancelBtn) {
|
||||
cancelBtn.addEventListener('click', async (e) => {
|
||||
e.stopPropagation();
|
||||
const dropdown = e.target.closest('.calendar-dropdown');
|
||||
const options = dropdown.querySelector('.calendar-options');
|
||||
options.style.display = 'none';
|
||||
await cancelSignup(shift.ID);
|
||||
popup.remove();
|
||||
currentPopup = null;
|
||||
});
|
||||
}
|
||||
|
||||
// Close popup when clicking outside
|
||||
const closePopup = (e) => {
|
||||
if (!popup.contains(e.target) && e.target !== targetElement) {
|
||||
popup.remove();
|
||||
currentPopup = null;
|
||||
document.removeEventListener('click', closePopup);
|
||||
}
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
document.addEventListener('click', closePopup);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// Close calendar dropdowns when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
// Don't close if clicking on a toggle or option
|
||||
if (!e.target.classList.contains('calendar-toggle') &&
|
||||
!e.target.classList.contains('calendar-option') &&
|
||||
!e.target.closest('.calendar-dropdown')) {
|
||||
document.querySelectorAll('.calendar-options').forEach(opt => {
|
||||
opt.style.display = 'none';
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
async function signupForShift(shiftId) {
|
||||
try {
|
||||
const response = await fetch(`/api/shifts/${shiftId}/signup`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showStatus('Successfully signed up for shift!', 'success');
|
||||
await loadShifts();
|
||||
await loadMySignups();
|
||||
} else {
|
||||
showStatus(data.error || 'Failed to sign up', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error signing up:', error);
|
||||
showStatus('Failed to sign up for shift', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Add a custom confirmation modal function
|
||||
function showConfirmModal(message, onConfirm, onCancel = null) {
|
||||
// Remove any existing modal
|
||||
const existingModal = document.querySelector('.confirm-modal');
|
||||
if (existingModal) {
|
||||
existingModal.remove();
|
||||
}
|
||||
|
||||
// Create modal
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'confirm-modal';
|
||||
modal.innerHTML = `
|
||||
<div class="confirm-modal-backdrop">
|
||||
<div class="confirm-modal-content">
|
||||
<h3>Confirm Action</h3>
|
||||
<p>${message}</p>
|
||||
<div class="confirm-modal-actions">
|
||||
<button class="btn btn-secondary confirm-cancel">Cancel</button>
|
||||
<button class="btn btn-danger confirm-ok">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(modal);
|
||||
|
||||
// Add event listeners
|
||||
const cancelBtn = modal.querySelector('.confirm-cancel');
|
||||
const confirmBtn = modal.querySelector('.confirm-ok');
|
||||
const backdrop = modal.querySelector('.confirm-modal-backdrop');
|
||||
|
||||
const cleanup = () => {
|
||||
modal.remove();
|
||||
};
|
||||
|
||||
cancelBtn.addEventListener('click', () => {
|
||||
cleanup();
|
||||
if (onCancel) onCancel();
|
||||
});
|
||||
|
||||
confirmBtn.addEventListener('click', () => {
|
||||
cleanup();
|
||||
onConfirm();
|
||||
});
|
||||
|
||||
// Close on backdrop click
|
||||
backdrop.addEventListener('click', (e) => {
|
||||
if (e.target === backdrop) {
|
||||
cleanup();
|
||||
if (onCancel) onCancel();
|
||||
}
|
||||
});
|
||||
|
||||
// Close on escape key
|
||||
const handleEscape = (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
cleanup();
|
||||
document.removeEventListener('keydown', handleEscape);
|
||||
if (onCancel) onCancel();
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', handleEscape);
|
||||
|
||||
// Focus the confirm button for keyboard navigation
|
||||
setTimeout(() => {
|
||||
confirmBtn.focus();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// Update the cancelSignup function to use the custom modal
|
||||
async function cancelSignup(shiftId) {
|
||||
showConfirmModal(
|
||||
'Are you sure you want to cancel your signup for this shift?',
|
||||
async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/shifts/${shiftId}/cancel`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showStatus('Signup cancelled', 'success');
|
||||
await loadShifts();
|
||||
await loadMySignups();
|
||||
} else {
|
||||
showStatus(data.error || 'Failed to cancel signup', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error cancelling signup:', error);
|
||||
showStatus('Failed to cancel signup', 'error');
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function setupEventListeners() {
|
||||
const dateFilter = document.getElementById('date-filter');
|
||||
if (dateFilter) {
|
||||
dateFilter.addEventListener('change', filterShifts);
|
||||
}
|
||||
}
|
||||
|
||||
function filterShifts() {
|
||||
const dateFilter = document.getElementById('date-filter').value;
|
||||
|
||||
if (!dateFilter) {
|
||||
displayShifts(allShifts);
|
||||
return;
|
||||
}
|
||||
|
||||
const filtered = allShifts.filter(shift => {
|
||||
return shift.Date === dateFilter; // Changed from shift.date to shift.Date
|
||||
});
|
||||
|
||||
displayShifts(filtered);
|
||||
}
|
||||
|
||||
function clearFilters() {
|
||||
document.getElementById('date-filter').value = '';
|
||||
loadShifts(); // Reload shifts without filters
|
||||
}
|
||||
|
||||
function showStatus(message, type = 'info') {
|
||||
const container = document.getElementById('status-container');
|
||||
if (!container) return;
|
||||
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.className = `status-message ${type}`;
|
||||
messageDiv.textContent = message;
|
||||
|
||||
container.appendChild(messageDiv);
|
||||
|
||||
setTimeout(() => {
|
||||
messageDiv.remove();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
if (text === null || text === undefined) {
|
||||
return '';
|
||||
}
|
||||
const div = document.createElement('div');
|
||||
div.textContent = String(text);
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// Calendar View Functions
|
||||
@@ -755,6 +1037,11 @@ function createCalendarShift(shift) {
|
||||
|
||||
function showShiftPopup(shift, targetElement) {
|
||||
// Remove any existing popup
|
||||
if (currentPopup) {
|
||||
currentPopup.remove();
|
||||
currentPopup = null;
|
||||
}
|
||||
|
||||
const existingPopup = document.querySelector('.shift-popup');
|
||||
if (existingPopup) {
|
||||
existingPopup.remove();
|
||||
@@ -786,6 +1073,7 @@ function showShiftPopup(shift, targetElement) {
|
||||
|
||||
// Position popup
|
||||
document.body.appendChild(popup);
|
||||
currentPopup = popup; // Track the current popup
|
||||
|
||||
const rect = targetElement.getBoundingClientRect();
|
||||
const popupRect = popup.getBoundingClientRect();
|
||||
@@ -810,23 +1098,28 @@ function showShiftPopup(shift, targetElement) {
|
||||
const cancelBtn = popup.querySelector('.cancel-signup-btn');
|
||||
|
||||
if (signupBtn) {
|
||||
signupBtn.addEventListener('click', async () => {
|
||||
signupBtn.addEventListener('click', async (e) => {
|
||||
e.stopPropagation();
|
||||
await signupForShift(shift.ID);
|
||||
popup.remove();
|
||||
currentPopup = null;
|
||||
});
|
||||
}
|
||||
|
||||
if (cancelBtn) {
|
||||
cancelBtn.addEventListener('click', async () => {
|
||||
cancelBtn.addEventListener('click', async (e) => {
|
||||
e.stopPropagation();
|
||||
await cancelSignup(shift.ID);
|
||||
popup.remove();
|
||||
currentPopup = null;
|
||||
});
|
||||
}
|
||||
|
||||
// Close popup when clicking outside
|
||||
const closePopup = (e) => {
|
||||
if (!popup.contains(e.target)) {
|
||||
if (!popup.contains(e.target) && e.target !== targetElement) {
|
||||
popup.remove();
|
||||
currentPopup = null;
|
||||
document.removeEventListener('click', closePopup);
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user