admin/changemaker.lite
1
0
Fork 0
Code Issues Packages Projects Releases 35 Wiki Activity

Shifts manager

Browse Source
This commit is contained in:
admin
2025-07-10 16:07:17 -06:00
parent 728a0bb6a9
commit cee9af7e49
14 changed files with 1707 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
map/app/public/admin.html
View File

@@ -33,10 +33,11 @@
<!-- Main Content -->
<div class="admin-container">
<div class="admin-sidebar">
<h2>Settings</h2>
<h2>Admin Panel</h2>
<nav class="admin-nav">
<a href="#start-location" class="active">Start Location</a>
<a href="#walk-sheet">Walk Sheet</a>
<a href="#shifts">Shifts</a>
</nav>
</div>
@@ -174,6 +175,70 @@
</div>
</div>
</section>
<!-- Shifts Section -->
<section id="shifts" class="admin-section" style="display: none;">
<h2>Shift Management</h2>
<p>Create and manage volunteer shifts.</p>
<div class="shifts-admin-container">
<div class="shift-form">
<h3>Create New Shift</h3>
<form id="shift-form">
<div class="form-group">
<label for="shift-title">Title</label>
<input type="text" id="shift-title" required>
</div>
<div class="form-group">
<label for="shift-description">Description</label>
<textarea id="shift-description" rows="3"></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label for="shift-date">Date</label>
<input type="date" id="shift-date" required>
</div>
<div class="form-group">
<label for="shift-start">Start Time</label>
<input type="time" id="shift-start" required>
</div>
<div class="form-group">
<label for="shift-end">End Time</label>
<input type="time" id="shift-end" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="shift-location">Location</label>
<input type="text" id="shift-location">
</div>
<div class="form-group">
<label for="shift-max-volunteers">Max Volunteers</label>
<input type="number" id="shift-max-volunteers" min="1" required>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Create Shift</button>
<button type="button" class="btn btn-secondary" id="clear-shift-form">Clear</button>
</div>
</form>
</div>
<div class="shifts-list">
<h3>Existing Shifts</h3>
<div id="admin-shifts-list">
<!-- Shifts will be loaded here -->
</div>
</div>
</div>
</section>
</div>
</div>

66
map/app/public/css/admin.css
View File

@@ -747,3 +747,69 @@
.admin-map .leaflet-container {
cursor: crosshair;
}
/* Shifts Admin Styles */
.shifts-admin-container {
display: grid;
grid-template-columns: 400px 1fr;
gap: 30px;
}
.shift-form {
background: white;
padding: 20px;
border-radius: var(--border-radius);
border: 1px solid #e0e0e0;
}
.shifts-list {
background: white;
padding: 20px;
border-radius: var(--border-radius);
border: 1px solid #e0e0e0;
}
.shift-admin-item {
border: 1px solid #e0e0e0;
border-radius: var(--border-radius);
padding: 15px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.shift-admin-item h4 {
margin: 0 0 10px 0;
}
.shift-admin-item p {
margin: 5px 0;
color: var(--secondary-color);
}
.status-open {
color: var(--success-color);
font-weight: bold;
}
.status-full {
color: var(--warning-color);
font-weight: bold;
}
.status-cancelled {
color: var(--danger-color);
font-weight: bold;
}
.shift-actions {
display: flex;
gap: 10px;
}
@media (max-width: 768px) {
.shifts-admin-container {
grid-template-columns: 1fr;
}
}

161
map/app/public/css/shifts.css Normal file
View File

@@ -0,0 +1,161 @@
.shifts-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* My Signups section - now at the top */
.my-signups {
margin-bottom: 40px;
padding-bottom: 30px;
border-bottom: 1px solid #e0e0e0;
}
.my-signups h2 {
margin-bottom: 20px;
color: var(--dark-color);
}
.signup-item {
background: white;
border: 1px solid #e0e0e0;
border-radius: var(--border-radius);
padding: 15px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.signup-item h4 {
margin: 0 0 5px 0;
}
.signup-item p {
margin: 0;
color: var(--secondary-color);
}
/* Filters section */
.shifts-filters {
margin-bottom: 30px;
}
.shifts-filters h2 {
margin-bottom: 15px;
color: var(--dark-color);
}
.filter-group {
display: flex;
gap: 10px;
align-items: center;
margin-top: 10px;
}
.filter-group input {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: var(--border-radius);
}
/* Desktop: 3 columns layout */
.shifts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 40px;
}
.shift-card {
background: white;
border: 1px solid #e0e0e0;
border-radius: var(--border-radius);
padding: 20px;
transition: var(--transition);
}
.shift-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.shift-card.full {
opacity: 0.7;
}
.shift-card.signed-up {
border-color: var(--success-color);
background-color: #f0f9ff;
}
.shift-card h3 {
margin: 0 0 15px 0;
color: var(--dark-color);
}
.shift-details {
margin-bottom: 15px;
}
.shift-details p {
margin: 5px 0;
color: var(--secondary-color);
}
.shift-description {
margin: 15px 0;
color: var(--dark-color);
}
.shift-actions {
margin-top: 15px;
}
.no-shifts {
text-align: center;
color: var(--secondary-color);
padding: 40px;
grid-column: 1 / -1; /* Span all columns */
}
/* Tablet: 2 columns */
@media (max-width: 1024px) and (min-width: 769px) {
.shifts-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobile: 1 column */
@media (max-width: 768px) {
.shifts-container {
padding: 15px;
}
.shifts-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.signup-item {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.shift-card {
padding: 15px;
}
.my-signups {
margin-bottom: 30px;
padding-bottom: 20px;
}
.shifts-filters {
margin-bottom: 20px;
}
.filter-group {
flex-wrap: wrap;
}
}

66
map/app/public/css/style.css
View File

@@ -743,6 +743,39 @@ body {
transform: scale(0.95);
}
/* Desktop styles - show normal layout */
@media (min-width: 769px) {
.mobile-dropdown {
display: none;
}
.mobile-sidebar {
display: none;
}
.header-actions {
display: flex;
}
.user-info,
.location-count {
display: flex;
}
.map-controls {
display: flex;
}
/* Show shifts button on desktop */
.header-actions a[href="/shifts.html"] {
display: inline-flex !important;
}
.btn span.btn-icon {
margin-right: 5px;
}
}
/* Hide desktop elements on mobile */
@media (max-width: 768px) {
.header h1 {
@@ -753,6 +786,11 @@ body {
display: none;
}
/* Hide any floating shifts button on mobile - but NOT the one in dropdown */
.header-actions a[href="/shifts.html"] {
display: none !important;
}
.mobile-dropdown {
display: block;
}
@@ -791,34 +829,6 @@ body {
}
}
/* Desktop styles - show normal layout */
@media (min-width: 769px) {
.mobile-dropdown {
display: none;
}
.mobile-sidebar {
display: none;
}
.header-actions {
display: flex;
}
.user-info,
.location-count {
display: flex;
}
.map-controls {
display: flex;
}
.btn span.btn-icon {
margin-right: 5px;
}
}
/* Fullscreen styles */
.fullscreen #map-container {
position: fixed;

7
map/app/public/index.html
View File

@@ -20,6 +20,10 @@
<header class="header">
<h1>Map for CM-lite</h1>
<div class="header-actions">
<a href="/shifts.html" class="btn btn-secondary">
<span class="btn-icon">📅</span>
<span class="btn-text">View Shifts</span>
</a>
<div class="user-info">
<span class="user-email" id="user-email">Loading...</span>
</div>
@@ -32,6 +36,9 @@
<span>☰</span>
</button>
<div class="mobile-dropdown-content" id="mobile-dropdown-content">
<div class="mobile-dropdown-item">
<a href="/shifts.html" style="color: inherit; text-decoration: none;">📅 View Shifts</a>
</div>
<!-- Admin link will be added here dynamically if user is admin -->
<div class="mobile-dropdown-item location-info">
<span id="mobile-location-count">0 locations</span>

354
map/app/public/js/admin.js
View File

@@ -237,14 +237,29 @@ function setupEventListeners() {
let previousUrl = urlInput.value;
urlInput.addEventListener('change', () => {
if (urlInput.value !== previousUrl) {
// URL changed, clear stored QR code
delete storedQRCodes[i];
previousUrl = urlInput.value;
const currentUrl = urlInput.value;
if (currentUrl !== previousUrl) {
console.log(`QR Code ${i} URL changed from "${previousUrl}" to "${currentUrl}"`);
// Remove stored QR code so it gets regenerated
delete storedQRCodes[currentUrl];
previousUrl = currentUrl;
generateWalkSheetPreview();
}
});
}
}
// Shift form submission
const shiftForm = document.getElementById('shift-form');
if (shiftForm) {
shiftForm.addEventListener('submit', createShift);
}
// Clear shift form button
const clearShiftBtn = document.getElementById('clear-shift-form');
if (clearShiftBtn) {
clearShiftBtn.addEventListener('click', clearShiftForm);
}
}
// Setup navigation between admin sections
@@ -276,19 +291,31 @@ function setupNavigation() {
});
link.classList.add('active');
// If switching to walk sheet, load config first then generate preview
// If switching to shifts section, load shifts
if (targetId === 'shifts') {
console.log('Loading admin shifts...');
loadAdminShifts();
}
// If switching to walk sheet section, load config
if (targetId === 'walk-sheet') {
console.log('Switching to walk sheet section, loading config...');
// Always load the latest config when switching to walk sheet
loadWalkSheetConfig().then((success) => {
if (success) {
console.log('Config loaded, generating preview...');
generateWalkSheetPreview();
}
});
}
});
});
// Also check if we're already on the shifts page (via hash)
const hash = window.location.hash;
if (hash === '#shifts') {
const shiftsLink = document.querySelector('.admin-nav a[href="#shifts"]');
if (shiftsLink) {
shiftsLink.click();
}
}
}
// Update map from input fields
@@ -872,3 +899,314 @@ function debounce(func, wait) {
timeout = setTimeout(later, wait);
};
}
// Add shift management functions
async function loadAdminShifts() {
try {
const response = await fetch('/api/shifts/admin');
const data = await response.json();
if (data.success) {
displayAdminShifts(data.shifts);
} else {
showStatus('Failed to load shifts', 'error');
}
} catch (error) {
console.error('Error loading admin shifts:', error);
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 = new Date(shift.Date);
const signupCount = shift.signups ? shift.signups.length : 0;
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>
</div>
<div class="shift-actions">
<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 setupNavigation function to properly load shifts when switching to shifts section
function setupNavigation() {
const navLinks = document.querySelectorAll('.admin-nav a');
const sections = document.querySelectorAll('.admin-section');
navLinks.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
// Get target section ID
const targetId = link.getAttribute('href').substring(1);
// Hide all sections
sections.forEach(section => {
section.style.display = 'none';
});
// Show target section
const targetSection = document.getElementById(targetId);
if (targetSection) {
targetSection.style.display = 'block';
}
// Update active nav link
navLinks.forEach(navLink => {
navLink.classList.remove('active');
});
link.classList.add('active');
// If switching to shifts section, load shifts
if (targetId === 'shifts') {
console.log('Loading admin shifts...');
loadAdminShifts();
}
// If switching to walk sheet section, load config
if (targetId === 'walk-sheet') {
loadWalkSheetConfig().then((success) => {
if (success) {
generateWalkSheetPreview();
}
});
}
});
});
// Also check if we're already on the shifts page (via hash)
const hash = window.location.hash;
if (hash === '#shifts') {
const shiftsLink = document.querySelector('.admin-nav a[href="#shifts"]');
if (shiftsLink) {
shiftsLink.click();
}
}
}
// 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);
}
});
}
// 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();
} 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)
function editShift(shiftId) {
showStatus('Edit functionality coming soon', 'info');
}
// Add function to create shift
async function createShift(e) {
e.preventDefault();
const formData = {
title: document.getElementById('shift-title').value,
description: document.getElementById('shift-description').value,
date: document.getElementById('shift-date').value,
startTime: document.getElementById('shift-start').value,
endTime: document.getElementById('shift-end').value,
location: document.getElementById('shift-location').value,
maxVolunteers: document.getElementById('shift-max-volunteers').value
};
try {
const response = await fetch('/api/shifts/admin', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
});
const data = await response.json();
if (data.success) {
showStatus('Shift created successfully', 'success');
document.getElementById('shift-form').reset();
await loadAdminShifts();
} else {
showStatus(data.error || 'Failed to create shift', 'error');
}
} catch (error) {
console.error('Error creating shift:', error);
showStatus('Failed to create shift', 'error');
}
}
function clearShiftForm() {
const form = document.getElementById('shift-form');
if (form) {
form.reset();
showStatus('Form cleared', 'info');
}
}
// Update setupEventListeners to include shift form and clear button
function setupEventListeners() {
// Use current view button
const useCurrentViewBtn = document.getElementById('use-current-view');
if (useCurrentViewBtn) {
useCurrentViewBtn.addEventListener('click', () => {
const center = adminMap.getCenter();
const zoom = adminMap.getZoom();
document.getElementById('start-lat').value = center.lat.toFixed(6);
document.getElementById('start-lng').value = center.lng.toFixed(6);
document.getElementById('start-zoom').value = zoom;
updateStartMarker(center.lat, center.lng);
showStatus('Captured current map view', 'success');
});
}
// Save button
const saveLocationBtn = document.getElementById('save-start-location');
if (saveLocationBtn) {
saveLocationBtn.addEventListener('click', saveStartLocation);
}
// Coordinate input changes
const startLatInput = document.getElementById('start-lat');
const startLngInput = document.getElementById('start-lng');
const startZoomInput = document.getElementById('start-zoom');
if (startLatInput) startLatInput.addEventListener('change', updateMapFromInputs);
if (startLngInput) startLngInput.addEventListener('change', updateMapFromInputs);
if (startZoomInput) startZoomInput.addEventListener('change', updateMapFromInputs);
// Walk Sheet buttons
const saveWalkSheetBtn = document.getElementById('save-walk-sheet');
const previewWalkSheetBtn = document.getElementById('preview-walk-sheet');
const printWalkSheetBtn = document.getElementById('print-walk-sheet');
const refreshPreviewBtn = document.getElementById('refresh-preview');
if (saveWalkSheetBtn) saveWalkSheetBtn.addEventListener('click', saveWalkSheetConfig);
if (previewWalkSheetBtn) previewWalkSheetBtn.addEventListener('click', generateWalkSheetPreview);
if (printWalkSheetBtn) printWalkSheetBtn.addEventListener('click', printWalkSheet);
if (refreshPreviewBtn) refreshPreviewBtn.addEventListener('click', generateWalkSheetPreview);
// Auto-update preview on input change
const walkSheetInputs = document.querySelectorAll(
'#walk-sheet-title, #walk-sheet-subtitle, #walk-sheet-footer, ' +
'[id^="qr-code-"][id$="-url"], [id^="qr-code-"][id$="-label"]'
);
walkSheetInputs.forEach(input => {
if (input) {
input.addEventListener('input', debounce(() => {
generateWalkSheetPreview();
}, 500));
}
});
// Add URL change listeners to detect when QR codes need regeneration
for (let i = 1; i <= 3; i++) {
const urlInput = document.getElementById(`qr-code-${i}-url`);
if (urlInput) {
let previousUrl = urlInput.value;
urlInput.addEventListener('change', () => {
const currentUrl = urlInput.value;
if (currentUrl !== previousUrl) {
console.log(`QR Code ${i} URL changed from "${previousUrl}" to "${currentUrl}"`);
// Remove stored QR code so it gets regenerated
delete storedQRCodes[currentUrl];
previousUrl = currentUrl;
generateWalkSheetPreview();
}
});
}
}
// Shift form submission
const shiftForm = document.getElementById('shift-form');
if (shiftForm) {
shiftForm.addEventListener('submit', createShift);
}
// Clear shift form button
const clearShiftBtn = document.getElementById('clear-shift-form');
if (clearShiftBtn) {
clearShiftBtn.addEventListener('click', clearShiftForm);
}
}
// Add the missing clearShiftForm function
function clearShiftForm() {
const form = document.getElementById('shift-form');
if (form) {
form.reset();
showStatus('Form cleared', 'info');
}
}

4
map/app/public/js/map-manager.js
View File

@@ -9,8 +9,8 @@ export let isStartLocationVisible = true;
export async function initializeMap() {
try {
// Get start location from server
const response = await fetch('/api/admin/start-location');
// Get start location from PUBLIC endpoint (not admin endpoint)
const response = await fetch('/api/config/start-location');
const data = await response.json();
let startLat = CONFIG.DEFAULT_LAT;

293
map/app/public/js/shifts.js Normal file
View File

@@ -0,0 +1,293 @@
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>`
: 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
const signupsWithDetails = mySignups.map(signup => {
const shift = allShifts.find(s => s.ID === signup.shift_id);
return { ...signup, shift };
}).filter(s => s.shift);
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>
</div>
<button class="btn btn-danger btn-sm cancel-signup-btn" data-shift-id="${signup.shift.ID}">Cancel</button>
</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 signup buttons
newGrid.addEventListener('click', async (e) => {
if (e.target.classList.contains('signup-btn')) {
const shiftId = e.target.getAttribute('data-shift-id');
await signupForShift(shiftId);
} else if (e.target.classList.contains('cancel-signup-btn')) {
const shiftId = e.target.getAttribute('data-shift-id');
await cancelSignup(shiftId);
}
});
}
// 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 cancel buttons
newList.addEventListener('click', async (e) => {
if (e.target.classList.contains('cancel-signup-btn')) {
const shiftId = e.target.getAttribute('data-shift-id');
await cancelSignup(shiftId);
}
});
}
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;
}

52
map/app/public/shifts.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Volunteer Shifts - BNKops Map</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/shifts.css">
</head>
<body>
<div id="app">
<header class="header">
<h1>Volunteer Shifts</h1>
<div class="header-actions">
<a href="/" class="btn btn-secondary">← Back to Map</a>
<span id="user-info" class="user-info">
<span class="user-email" id="user-email"></span>
</span>
</div>
</header>
<div class="shifts-container">
<!-- Move My Signups to the top -->
<div class="my-signups">
<h2>My Shifts</h2>
<div id="my-signups-list">
<!-- User's signups will be loaded here -->
</div>
</div>
<div class="shifts-filters">
<h2>Available Shifts</h2>
<div class="filter-group">
<label for="date-filter">Filter by Date:</label>
<input type="date" id="date-filter" />
<button class="btn btn-secondary btn-sm" id="clear-filters-btn">Clear</button>
</div>
</div>
<div class="shifts-grid" id="shifts-grid">
<!-- Shifts will be loaded here -->
</div>
</div>
<div id="status-container" class="status-container"></div>
</div>
<script src="js/shifts.js"></script>
</body>
</html>