555 lines
21 KiB
JavaScript
555 lines
21 KiB
JavaScript
let currentUser = null;
|
|
let allShifts = [];
|
|
let mySignups = [];
|
|
|
|
// Initialize when DOM is loaded
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
await checkAuth();
|
|
await loadShifts();
|
|
await loadMySignups();
|
|
setupEventListeners();
|
|
|
|
// Add clear filters button handler
|
|
const clearBtn = document.getElementById('clear-filters-btn');
|
|
if (clearBtn) {
|
|
clearBtn.addEventListener('click', clearFilters);
|
|
}
|
|
});
|
|
|
|
async function checkAuth() {
|
|
try {
|
|
const response = await fetch('/api/auth/check');
|
|
const data = await response.json();
|
|
|
|
if (!data.authenticated) {
|
|
window.location.href = '/login.html';
|
|
return;
|
|
}
|
|
|
|
currentUser = data.user;
|
|
document.getElementById('user-email').textContent = currentUser.email;
|
|
|
|
// Add admin link if user is admin
|
|
if (currentUser.isAdmin) {
|
|
const headerActions = document.querySelector('.header-actions');
|
|
const adminLink = document.createElement('a');
|
|
adminLink.href = '/admin.html#shifts';
|
|
adminLink.className = 'btn btn-secondary';
|
|
adminLink.textContent = '⚙️ Manage Shifts';
|
|
headerActions.insertBefore(adminLink, headerActions.firstChild);
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Auth check failed:', error);
|
|
window.location.href = '/login.html';
|
|
}
|
|
}
|
|
|
|
async function loadShifts() {
|
|
try {
|
|
const response = await fetch('/api/shifts');
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
allShifts = data.shifts;
|
|
displayShifts(allShifts);
|
|
}
|
|
} catch (error) {
|
|
showStatus('Failed to load shifts', 'error');
|
|
}
|
|
}
|
|
|
|
async function loadMySignups() {
|
|
try {
|
|
const response = await fetch('/api/shifts/my-signups');
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
mySignups = data.signups;
|
|
displayMySignups();
|
|
} else {
|
|
// Still display empty signups if the endpoint fails
|
|
mySignups = [];
|
|
displayMySignups();
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load signups:', error);
|
|
// Don't show error to user, just display empty signups
|
|
mySignups = [];
|
|
displayMySignups();
|
|
}
|
|
}
|
|
|
|
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>';
|
|
return;
|
|
}
|
|
|
|
grid.innerHTML = shifts.map(shift => {
|
|
const shiftDate = new Date(shift.Date);
|
|
const isSignedUp = mySignups.some(s => s.shift_id === shift.ID);
|
|
const isFull = shift['Current Volunteers'] >= shift['Max Volunteers'];
|
|
|
|
return `
|
|
<div class="shift-card ${isFull ? 'full' : ''} ${isSignedUp ? 'signed-up' : ''}">
|
|
<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 ? `<div class="shift-description">${escapeHtml(shift.Description)}</div>` : ''}
|
|
<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('');
|
|
|
|
// Add event listeners after rendering
|
|
setupShiftCardListeners();
|
|
}
|
|
|
|
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>';
|
|
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')
|
|
};
|
|
}).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.displayTitle)}</h4>
|
|
<p>📅 ${shiftDate.toLocaleDateString()} ⏰ ${signup.shift['Start Time']} - ${signup.shift['End Time']}</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>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
// Add event listeners after rendering
|
|
setupMySignupsListeners();
|
|
}
|
|
|
|
// New function to setup listeners for shift cards
|
|
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';
|
|
}
|
|
});
|
|
}
|
|
|
|
// New function to setup listeners for my signups
|
|
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);
|
|
|
|
// 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?')) {
|
|
return;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
// Add these calendar URL generation functions after the existing functions
|
|
function generateCalendarUrls(shift) {
|
|
const shiftDate = new Date(shift.Date);
|
|
|
|
// Parse start and end times
|
|
const [startHour, startMinute] = shift['Start Time'].split(':').map(n => parseInt(n));
|
|
const [endHour, endMinute] = shift['End Time'].split(':').map(n => parseInt(n));
|
|
|
|
// Create start and end datetime objects
|
|
const startDate = new Date(shiftDate);
|
|
startDate.setHours(startHour, startMinute, 0, 0);
|
|
|
|
const endDate = new Date(shiftDate);
|
|
endDate.setHours(endHour, endMinute, 0, 0);
|
|
|
|
// Format dates for different calendar formats
|
|
const formatGoogleDate = (date) => {
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
return `${year}${month}${day}T${hours}${minutes}00`;
|
|
};
|
|
|
|
const formatISODate = (date) => {
|
|
return date.toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '');
|
|
};
|
|
|
|
// Event details
|
|
const title = shift.Title;
|
|
const description = shift.Description || 'Volunteer shift';
|
|
const location = shift.Location || '';
|
|
|
|
// Google Calendar URL
|
|
const googleStartStr = formatGoogleDate(startDate);
|
|
const googleEndStr = formatGoogleDate(endDate);
|
|
const googleParams = new URLSearchParams({
|
|
action: 'TEMPLATE',
|
|
text: title,
|
|
dates: `${googleStartStr}/${googleEndStr}`,
|
|
details: description,
|
|
location: location
|
|
});
|
|
const googleUrl = `https://calendar.google.com/calendar/render?${googleParams.toString()}`;
|
|
|
|
// Outlook Web Calendar URL
|
|
const outlookStartStr = startDate.toISOString();
|
|
const outlookEndStr = endDate.toISOString();
|
|
const outlookParams = new URLSearchParams({
|
|
path: '/calendar/action/compose',
|
|
rru: 'addevent',
|
|
subject: title,
|
|
startdt: outlookStartStr,
|
|
enddt: outlookEndStr,
|
|
body: description,
|
|
location: location
|
|
});
|
|
const outlookUrl = `https://outlook.live.com/calendar/0/deeplink/compose?${outlookParams.toString()}`;
|
|
|
|
// Apple Calendar (.ics file) - we'll generate this dynamically
|
|
const icsContent = [
|
|
'BEGIN:VCALENDAR',
|
|
'VERSION:2.0',
|
|
'PRODID:-//BNKops//Volunteer Shifts//EN',
|
|
'BEGIN:VEVENT',
|
|
`UID:${shift.ID}-${Date.now()}@bnkops.com`,
|
|
`DTSTART:${formatISODate(startDate)}`,
|
|
`DTEND:${formatISODate(endDate)}`,
|
|
`SUMMARY:${title}`,
|
|
`DESCRIPTION:${description.replace(/\n/g, '\\n')}`,
|
|
`LOCATION:${location}`,
|
|
'STATUS:CONFIRMED',
|
|
'END:VEVENT',
|
|
'END:VCALENDAR'
|
|
].join('\r\n');
|
|
|
|
// Create a data URL for the .ics file
|
|
const icsDataUrl = 'data:text/calendar;charset=utf-8,' + encodeURIComponent(icsContent);
|
|
|
|
return {
|
|
google: googleUrl,
|
|
outlook: outlookUrl,
|
|
apple: icsDataUrl,
|
|
icsFilename: `${title.replace(/[^a-z0-9]/gi, '_')}_${shift.ID}.ics`
|
|
};
|
|
}
|
|
|
|
// Update calendar dropdown HTML generator (remove onclick handlers)
|
|
function generateCalendarDropdown(shift) {
|
|
const urls = generateCalendarUrls(shift);
|
|
return `
|
|
<div class="calendar-dropdown">
|
|
<button class="btn btn-secondary btn-sm calendar-toggle" data-shift-id="${shift.ID}">
|
|
📅 Add to Calendar ▼
|
|
</button>
|
|
<div class="calendar-options" style="display: none;">
|
|
<a href="${urls.google}" target="_blank" class="calendar-option" data-calendar-type="google">
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1zbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjUgMkgxMy41QzE0LjMyODQgMiAxNSAyLjY3MTU3IDE1IDMuNVYxMi41QzE1IDEzLjMyODQgMTQuMzI4NCAxNCAxMy41IDE0SDIuNUMxLjY3MTU3IDE0IDEgMTMuMzI4NCAxIDEyLjVWMy41QzEgMi42NzE1NyAxLjY3MTU3IDIgMi41IDJIMy41IiBzdHJva2U9IiM0Mjg1RjQiIHN0cm9rZS13aWR0aD0iMS41Ii8+CjxwYXRoIGQ9Ik00IDFWM00xMiAxVjMiIHN0cm9rZT0iIzQyODVGNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8cGF0aCBkPSJNMSA1SDE1IiBzdHJva2U9IiM0Mjg1RjQiIHN0cm9rZS13aWR0aD0iMS41Ii8+Cjwvc3ZnPg==" alt="Google"> Google Calendar
|
|
</a>
|
|
<a href="${urls.outlook}" target="_blank" class="calendar-option" data-calendar-type="outlook">
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1zbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0IDJIMlYxNEgxNFYyWiIgZmlsbD0iIzAwNzhENCIvPgo8cGF0aCBkPSJNOCA4VjE0SDE0VjhIOFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik04IDJWOEgxNFYySDhaIiBmaWxsPSIjMDA3OEQ0Ii8+Cjwvc3ZnPg==" alt="Outlook"> Outlook
|
|
</a>
|
|
<a href="${urls.apple}" download="${urls.icsFilename}" class="calendar-option" data-calendar-type="apple">
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1zbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzIDJIMy41QzIuNjcxNTcgMiAyIDIuNjcxNTcgMiAzLjVWMTIuNUMyIDEzLjMyODQgMi42NzE1NyAxNCAzLjUgMTRIMTIuNUMxMy4zMjg0IDE0IDE0IDEzLjMyODQgMTQgMTIuNVYzQzE0IDIuNDQ3NzIgMTMuNTUyMyAyIDEzIDJaIiBmaWxsPSIjRkY1NzMzIi8+CjxwYXRoIGQ9Ik00IDFWM00xMiAxVjMiIHN0cm9rZT0iI0ZGNTczMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPHBhdGggZD0iTTIgNUgxNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPHRleHQgeD0iOCIgeT0iMTEiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSI2IiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+MzE8L3RleHQ+Cjwvc3ZnPg==" alt="Apple"> Apple Calendar
|
|
</a>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Update setupShiftCardListeners to handle calendar dropdowns
|
|
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';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Update setupMySignupsListeners 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);
|
|
|
|
// 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';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Keep the document click handler to close dropdowns when clicking outside
|
|
document.addEventListener('click', function() {
|
|
document.querySelectorAll('.calendar-options').forEach(opt => {
|
|
opt.style.display = 'none';
|
|
});
|
|
}); |