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

Fixed some bugs with menus and updated the build-nocodb to migrate data.

Browse Source
This commit is contained in:
admin
2025-09-10 12:33:55 -06:00
parent 7cc6070063
commit 675d744cfa
14 changed files with 1276 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
map/app/controllers/usersController.js
View File

@@ -56,7 +56,7 @@ class UsersController {
async create(req, res) {
try {
const { email, password, name, isAdmin, userType, expireDays } = req.body;
const { email, password, name, phone, isAdmin, userType, expireDays } = req.body;
if (!email || !password) {
return res.status(400).json({
@@ -98,6 +98,8 @@ class UsersController {
password: password,
Name: name || '',
name: name || '',
Phone: phone || '',
phone: phone || '',
Admin: isAdmin === true,
admin: isAdmin === true,
'User Type': userType || 'user', // Handle space in field name
@@ -121,6 +123,7 @@ class UsersController {
ID: extractId(response),
Email: email,
Name: name,
Phone: phone,
Admin: isAdmin,
'User Type': userType, // Handle space in field name
UserType: userType,
@@ -157,6 +160,7 @@ class UsersController {
id: extractId(response),
email: email,
name: name,
phone: phone,
admin: isAdmin,
userType: userType,
expiresAt: expiresAt

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

@@ -23,10 +23,12 @@
<div id="app">
<!-- Header -->
<header class="header">
<button id="mobile-menu-toggle" class="mobile-menu-toggle">
<span></span>
<span></span>
<span></span>
<button id="mobile-menu-toggle" class="mobile-menu-toggle" aria-label="Toggle menu">
<span class="hamburger-icon">
<span></span>
<span></span>
<span></span>
</span>
</button>
<h1>Admin Panel</h1>
<div class="header-actions">
@@ -590,6 +592,10 @@
<label for="user-name">Name</label>
<input type="text" id="user-name" required>
</div>
<div class="form-group">
<label for="user-phone">Phone Number</label>
<input type="tel" id="user-phone" placeholder="+1 (555) 123-4567">
</div>
<div class="form-group">
<label for="user-password">Password</label>
<input type="password" id="user-password" required>

16
map/app/public/css/admin/cuts-shifts.css
View File

@@ -298,6 +298,22 @@
color: var(--secondary-color);
}
/* Volunteer Names Display */
.volunteer-names {
font-size: 0.85em;
color: var(--primary-color);
font-weight: normal;
opacity: 0.8;
font-style: italic;
}
.volunteer-count {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* Shift Status Colors */
.status-open {
color: var(--success-color);

83
map/app/public/css/admin/layout.css
View File

@@ -154,35 +154,90 @@
/* Mobile Menu Components */
.mobile-menu-toggle {
display: none;
background: none;
border: none;
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 4px;
padding: 8px;
cursor: pointer;
position: relative;
width: 40px;
height: 40px;
width: 44px;
height: 44px;
z-index: 10002;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
flex-shrink: 0;
min-width: 44px;
min-height: 44px;
-webkit-appearance: none;
appearance: none;
outline: none;
isolation: isolate;
transition: all 0.3s ease;
}
.mobile-menu-toggle span {
display: block;
/* Hamburger Icon */
.hamburger-icon {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 24px;
height: 20px;
position: relative;
}
.hamburger-icon span {
display: block;
height: 3px;
background: white;
margin: 5px auto;
transition: var(--transition);
width: 100%;
background-color: white;
border-radius: 2px;
transition: all 0.3s ease;
}
.mobile-menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
/* Active state animation */
.mobile-menu-toggle.active .hamburger-icon span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.mobile-menu-toggle.active span:nth-child(2) {
.mobile-menu-toggle.active .hamburger-icon span:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
.mobile-menu-toggle.active .hamburger-icon span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Hover effect */
.mobile-menu-toggle:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: white;
}
/* Ensure button is visible on mobile */
@media (max-width: 768px) {
.mobile-menu-toggle {
display: flex !important;
align-items: center;
justify-content: center;
margin-right: 10px;
}
/* Make sure header has proper layout on mobile */
.header {
display: flex;
align-items: center;
position: relative;
z-index: 10001;
padding: 10px 15px;
}
.header h1 {
margin-left: 10px;
font-size: 1.5rem;
}
}
/* Sidebar Header & Footer (mobile) */

130
map/app/public/css/admin/responsive.css
View File

@@ -50,7 +50,51 @@
@media (max-width: 768px) {
/* Show mobile menu toggle */
.mobile-menu-toggle {
display: block;
display: flex !important;
}
/* Sidebar as overlay */
.admin-sidebar {
position: fixed !important;
top: var(--header-height, 60px);
left: -300px; /* Changed from -100% to fixed value that's larger than width */
width: 280px !important;
max-width: 80vw !important;
min-width: 250px !important;
height: calc(100vh - var(--header-height, 60px));
height: calc(var(--app-height, 100vh) - var(--header-height, 60px));
z-index: 10000;
transition: left 0.3s ease;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
overflow-y: auto;
transform: translateX(0); /* Ensure no transform issues */
}
.admin-sidebar.active {
left: 0 !important;
transform: translateX(0); /* Ensure it's fully visible */
}
/* Show mobile sidebar elements */
.sidebar-header {
display: flex !important;
}
.sidebar-footer {
display: block !important;
}
/* Prevent body scroll when sidebar is open */
body.sidebar-open {
overflow: hidden;
position: fixed;
width: 100%;
}
/* Admin content takes full width */
.admin-content {
width: 100%;
margin-left: 0;
}
/* Header adjustments */
@@ -84,7 +128,9 @@
height: calc(var(--app-height) - 50px);
}
/* Sidebar as overlay */
/* Remove duplicate sidebar styles - keep only the first one above */
/* DELETE or comment out this duplicate block: */
/*
.admin-sidebar {
position: fixed;
top: 0;
@@ -104,6 +150,7 @@
.admin-sidebar.active {
left: 0;
}
*/
/* Show sidebar header and footer on mobile */
.sidebar-header {
@@ -272,6 +319,19 @@
justify-content: flex-end;
}
/* Volunteer names mobile styling */
.volunteer-count {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.volunteer-names {
font-size: 0.8em;
line-height: 1.2;
word-break: break-word;
}
/* Walk sheet container mobile */
.walk-sheet-container {
display: flex !important;
@@ -363,7 +423,23 @@
width: 100%;
}
.user-actions .btn {
.user-communication-actions {
justify-content: center;
gap: 8px;
}
.user-communication-actions .btn {
min-width: 40px;
padding: 8px 12px;
font-size: 16px;
}
.user-admin-actions {
flex-direction: column;
gap: 6px;
}
.user-admin-actions .btn {
font-size: var(--font-size-xs);
padding: 8px 10px;
width: 100%;
@@ -399,6 +475,24 @@
.volunteer-actions {
align-self: flex-end;
gap: 6px;
}
.volunteer-communication-actions {
justify-content: center;
gap: 8px;
margin-bottom: 6px;
}
.volunteer-communication-actions .btn {
min-width: 40px;
padding: 8px 12px;
font-size: 16px;
}
.volunteer-admin-actions {
flex-direction: column;
gap: 6px;
}
.processing-actions {
@@ -409,11 +503,15 @@
/* Very Small Screens (under 480px) */
@media (max-width: 480px) {
.admin-sidebar {
width: 260px;
left: -260px;
width: 260px !important; /* Added !important to override */
left: -280px !important; /* Increased to ensure complete hiding */
padding: 12px;
}
.admin-sidebar.active {
left: 0 !important;
}
.admin-nav {
gap: 6px;
margin: 15px 0;
@@ -490,8 +588,12 @@
/* Ultra Small Screens (under 360px) */
@media (max-width: 360px) {
.admin-sidebar {
width: 240px;
left: -240px;
width: 240px !important; /* Added !important */
left: -260px !important; /* Increased to ensure complete hiding */
}
.admin-sidebar.active {
left: 0 !important;
}
.admin-nav a {
@@ -681,11 +783,23 @@
.user-actions {
justify-content: flex-end;
margin-top: 8px;
gap: 6px;
}
.user-actions .btn {
.user-communication-actions {
margin-bottom: 6px;
}
.user-communication-actions .btn {
min-width: 32px;
padding: 6px 8px;
}
.user-admin-actions .btn {
width: auto !important;
min-width: 80px;
flex: none;
font-size: 10px;
padding: 6px 8px;
}
}

124
map/app/public/css/admin/user-management.css
View File

@@ -130,9 +130,22 @@
/* User Actions */
.user-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.user-communication-actions {
display: flex;
gap: 4px;
justify-content: center;
}
.user-admin-actions {
display: flex;
gap: 8px;
justify-content: center;
}
.user-actions .btn {
padding: 6px 12px;
font-size: var(--font-size-xs);
@@ -140,6 +153,55 @@
font-weight: 500;
}
.user-communication-actions .btn {
padding: 4px 8px;
font-size: 14px;
min-width: 32px;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.user-communication-actions .btn-outline-primary {
color: var(--primary-color);
border: 1px solid var(--primary-color);
background: white;
}
.user-communication-actions .btn-outline-primary:hover {
background: var(--primary-color);
color: white;
}
.user-communication-actions .btn-outline-secondary {
color: #6c757d;
border: 1px solid #6c757d;
background: white;
}
.user-communication-actions .btn-outline-secondary:hover:not(.disabled) {
background: #6c757d;
color: white;
}
.user-communication-actions .btn-outline-success {
color: var(--success-color);
border: 1px solid var(--success-color);
background: white;
}
.user-communication-actions .btn-outline-success:hover:not(.disabled) {
background: var(--success-color);
color: white;
}
.user-communication-actions .btn.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Users List Header */
.users-list-header {
display: flex;
@@ -191,9 +253,71 @@
.volunteer-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.volunteer-communication-actions {
display: flex;
gap: 4px;
justify-content: center;
}
.volunteer-admin-actions {
display: flex;
gap: 8px;
justify-content: center;
}
.volunteer-communication-actions .btn {
padding: 4px 8px;
font-size: 14px;
min-width: 32px;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.volunteer-communication-actions .btn-outline-primary {
color: var(--primary-color);
border: 1px solid var(--primary-color);
background: white;
}
.volunteer-communication-actions .btn-outline-primary:hover {
background: var(--primary-color);
color: white;
}
.volunteer-communication-actions .btn-outline-secondary {
color: #6c757d;
border: 1px solid #6c757d;
background: white;
}
.volunteer-communication-actions .btn-outline-secondary:hover:not(.disabled) {
background: #6c757d;
color: white;
}
.volunteer-communication-actions .btn-outline-success {
color: var(--success-color);
border: 1px solid var(--success-color);
background: white;
}
.volunteer-communication-actions .btn-outline-success:hover:not(.disabled) {
background: var(--success-color);
color: white;
}
.volunteer-communication-actions .btn.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.no-volunteers {
text-align: center;
color: #666;

137
map/app/public/js/admin-core.js
View File

@@ -43,49 +43,127 @@ function setAdminViewportDimensions() {
// Add mobile menu functionality
function setupMobileMenu() {
console.log('🔧 Setting up mobile menu...');
const menuToggle = document.getElementById('mobile-menu-toggle');
const sidebar = document.getElementById('admin-sidebar');
const closeSidebar = document.getElementById('close-sidebar');
const adminNavLinks = document.querySelectorAll('.admin-nav a');
console.log('📱 Mobile menu elements found:', {
menuToggle: !!menuToggle,
sidebar: !!sidebar,
closeSidebar: !!closeSidebar,
adminNavLinks: adminNavLinks.length
});
if (menuToggle && sidebar) {
// Toggle menu
menuToggle.addEventListener('click', () => {
sidebar.classList.toggle('active');
menuToggle.classList.toggle('active');
document.body.classList.toggle('sidebar-open');
});
console.log('✅ Setting up mobile menu event listeners...');
// Remove any existing listeners to prevent duplicates
const newMenuToggle = menuToggle.cloneNode(true);
menuToggle.parentNode.replaceChild(newMenuToggle, menuToggle);
// Toggle menu function
const toggleMobileMenu = (e) => {
console.log('🔄 Mobile menu toggle triggered!', e.type);
e.preventDefault();
e.stopPropagation();
const sidebar = document.getElementById('admin-sidebar');
const menuToggle = document.getElementById('mobile-menu-toggle');
if (!sidebar || !menuToggle) {
console.error('❌ Sidebar or menu toggle not found during toggle');
return;
}
const isActive = sidebar.classList.contains('active');
console.log('📱 Current menu state:', isActive ? 'open' : 'closed');
if (isActive) {
sidebar.classList.remove('active');
menuToggle.classList.remove('active');
document.body.classList.remove('sidebar-open');
console.log('✅ Menu closed');
} else {
sidebar.classList.add('active');
menuToggle.classList.add('active');
document.body.classList.add('sidebar-open');
console.log('✅ Menu opened');
}
};
// Use pointer events for better mobile support
const toggleButton = document.getElementById('mobile-menu-toggle');
// Add click event for all devices
toggleButton.addEventListener('click', toggleMobileMenu, { passive: false });
// Add pointer events for better mobile support
toggleButton.addEventListener('pointerdown', (e) => {
// Visual feedback
e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
}, { passive: true });
toggleButton.addEventListener('pointerup', (e) => {
// Remove visual feedback
e.currentTarget.style.backgroundColor = '';
}, { passive: true });
// Close sidebar button
if (closeSidebar) {
closeSidebar.addEventListener('click', () => {
sidebar.classList.remove('active');
menuToggle.classList.remove('active');
document.body.classList.remove('sidebar-open');
const sidebar = document.getElementById('admin-sidebar');
const menuToggle = document.getElementById('mobile-menu-toggle');
if (sidebar && menuToggle) {
sidebar.classList.remove('active');
menuToggle.classList.remove('active');
document.body.classList.remove('sidebar-open');
console.log('✅ Sidebar closed via close button');
}
});
}
// Close sidebar when clicking outside
document.addEventListener('click', (e) => {
if (sidebar.classList.contains('active') &&
const sidebar = document.getElementById('admin-sidebar');
const menuToggle = document.getElementById('mobile-menu-toggle');
if (sidebar && menuToggle && sidebar.classList.contains('active') &&
!sidebar.contains(e.target) &&
!menuToggle.contains(e.target)) {
sidebar.classList.remove('active');
menuToggle.classList.remove('active');
document.body.classList.remove('sidebar-open');
console.log('✅ Sidebar closed by clicking outside');
}
});
// Close sidebar when navigation link is clicked on mobile
adminNavLinks.forEach(link => {
const navLinks = document.querySelectorAll('.admin-nav a');
navLinks.forEach(link => {
link.addEventListener('click', () => {
if (window.innerWidth <= 768) {
sidebar.classList.remove('active');
menuToggle.classList.remove('active');
document.body.classList.remove('sidebar-open');
const sidebar = document.getElementById('admin-sidebar');
const menuToggle = document.getElementById('mobile-menu-toggle');
if (sidebar && menuToggle) {
sidebar.classList.remove('active');
menuToggle.classList.remove('active');
document.body.classList.remove('sidebar-open');
console.log('✅ Sidebar closed after navigation');
}
}
});
});
console.log('✅ Mobile menu setup complete!');
} else {
console.error('❌ Mobile menu elements not found:', {
menuToggle: !!menuToggle,
sidebar: !!sidebar
});
}
}
@@ -371,29 +449,42 @@ async function loadDashboardDataFromDashboardModule() {
// Initialize the admin core when DOM is loaded
function initializeAdminCore() {
console.log('🚀 Initializing Admin Core...');
// Set initial viewport dimensions and listen for resize events
setAdminViewportDimensions();
window.addEventListener('resize', setAdminViewportDimensions);
window.addEventListener('orientationchange', () => {
// Add a small delay for orientation change to complete
setTimeout(setAdminViewportDimensions, 100);
});
// Setup navigation first
setupNavigation();
setupMobileMenu();
// Setup mobile menu with a small delay to ensure DOM is ready
setTimeout(() => {
setupMobileMenu();
}, 100);
// Check if URL has a hash to show specific section
const hash = window.location.hash;
if (hash === '#walk-sheet') {
console.log('Direct navigation to walk-sheet section');
showSection('walk-sheet');
} else if (hash === '#convert-data') {
showSection('convert-data');
} else if (hash === '#cuts') {
showSection('cuts');
} else {
// Default to dashboard
showSection('dashboard');
} else if (hash) {
const sectionId = hash.substring(1);
showSection(sectionId);
}
console.log('✅ Admin Core initialized');
}
// Make sure we wait for DOM to be fully loaded
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initializeAdminCore);
} else {
// DOM is already loaded
initializeAdminCore();
}
// Export functions for use by other modules

165
map/app/public/js/admin-shift-volunteers.js
View File

@@ -69,21 +69,13 @@ function populateUserSelect() {
async function showShiftUserModal(shiftId, shiftData) {
currentShiftData = { ...shiftData, ID: shiftId };
// Update modal title and info
const modalTitle = document.getElementById('modal-shift-title');
const modalDetails = document.getElementById('modal-shift-details');
if (modalTitle) modalTitle.textContent = shiftData.Title;
if (modalDetails) {
const shiftDate = safeAdminCore('createLocalDate', shiftData.Date) || new Date(shiftData.Date);
modalDetails.textContent =
`${shiftDate.toLocaleDateString()} | ${shiftData['Start Time']} - ${shiftData['End Time']} | ${shiftData.Location || 'TBD'}`;
}
// Update modal title and info using the new function
updateModalTitle();
// Load users if not already loaded
if (allUsers.length === 0) {
await loadAllUsers();
populateUserSelect();
}
// Display current volunteers
@@ -114,11 +106,32 @@ function displayCurrentVolunteers(volunteers) {
<div class="volunteer-email">${safeAdminCore('escapeHtml', volunteer['User Email']) || 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 class="volunteer-communication-actions">
<a href="mailto:${safeAdminCore('escapeHtml', volunteer['User Email']) || volunteer['User Email'] || ''}"
class="btn btn-sm btn-outline-primary"
title="Email ${safeAdminCore('escapeHtml', volunteer['User Name'] || volunteer['User Email'] || 'Volunteer') || 'Volunteer'}">
📧
</a>
<button class="btn btn-sm btn-outline-secondary sms-volunteer-btn"
data-volunteer-email="${volunteer['User Email']}"
data-volunteer-name="${safeAdminCore('escapeHtml', volunteer['User Name'] || volunteer['User Email'] || 'Volunteer') || 'Volunteer'}"
title="Text ${safeAdminCore('escapeHtml', volunteer['User Name'] || volunteer['User Email'] || 'Volunteer') || 'Volunteer'} (Phone lookup required)">
💬
</button>
<button class="btn btn-sm btn-outline-success call-volunteer-btn"
data-volunteer-email="${volunteer['User Email']}"
data-volunteer-name="${safeAdminCore('escapeHtml', volunteer['User Name'] || volunteer['User Email'] || 'Volunteer') || 'Volunteer'}"
title="Call ${safeAdminCore('escapeHtml', volunteer['User Name'] || volunteer['User Email'] || 'Volunteer') || 'Volunteer'} (Phone lookup required)">
📞
</button>
</div>
<div class="volunteer-admin-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>
</div>
`).join('');
@@ -137,6 +150,14 @@ function setupVolunteerActionListeners() {
const volunteerId = e.target.getAttribute('data-volunteer-id');
const volunteerEmail = e.target.getAttribute('data-volunteer-email');
removeVolunteerFromShift(volunteerId, volunteerEmail);
} else if (e.target.classList.contains('sms-volunteer-btn')) {
const volunteerEmail = e.target.getAttribute('data-volunteer-email');
const volunteerName = e.target.getAttribute('data-volunteer-name');
openVolunteerSMS(volunteerEmail, volunteerName);
} else if (e.target.classList.contains('call-volunteer-btn')) {
const volunteerEmail = e.target.getAttribute('data-volunteer-email');
const volunteerName = e.target.getAttribute('data-volunteer-name');
callVolunteer(volunteerEmail, volunteerName);
}
});
}
@@ -177,6 +198,9 @@ async function addUserToShift() {
try {
await refreshCurrentShiftData();
console.log('Refreshed shift data after adding user');
// Also update the modal title to reflect new volunteer count
updateModalTitle();
} catch (refreshError) {
console.error('Error during refresh after adding user:', refreshError);
// Still show success since the add operation worked
@@ -216,6 +240,9 @@ async function removeVolunteerFromShift(volunteerId, volunteerEmail) {
try {
await refreshCurrentShiftData();
console.log('Refreshed shift data after removing volunteer');
// Also update the modal title to reflect new volunteer count
updateModalTitle();
} catch (refreshError) {
console.error('Error during refresh after removing volunteer:', refreshError);
// Still show success since the remove operation worked
@@ -272,13 +299,27 @@ function updateShiftInList(updatedShift) {
if (shiftItem) {
const signupCount = updatedShift.signups ? updatedShift.signups.length : 0;
// Generate list of first names for volunteers (same logic as displayAdminShifts)
const firstNames = updatedShift.signups ? updatedShift.signups.map(volunteer => {
const fullName = volunteer['User Name'] || volunteer['User Email'] || 'Unknown';
// Extract first name (everything before first space, or email username if no space)
const firstName = fullName.includes(' ') ? fullName.split(' ')[0] :
fullName.includes('@') ? fullName.split('@')[0] : fullName;
return safeAdminCore('escapeHtml', firstName) || firstName;
}).slice(0, 8) : []; // Limit to first 8 names to avoid overflow
const namesDisplay = firstNames.length > 0 ?
`<span class="volunteer-names">(${firstNames.join(', ')}${firstNames.length === 8 && signupCount > 8 ? '...' : ''})</span>` :
'';
// Find the volunteer count paragraph (contains 👥)
const volunteerCountElement = Array.from(shiftItem.querySelectorAll('p')).find(p =>
p.textContent.includes('👥')
p.textContent.includes('👥') || p.classList.contains('volunteer-count')
);
if (volunteerCountElement) {
volunteerCountElement.textContent = `👥 ${signupCount}/${updatedShift['Max Volunteers']} volunteers`;
volunteerCountElement.innerHTML = `👥 ${signupCount}/${updatedShift['Max Volunteers']} volunteers ${namesDisplay}`;
volunteerCountElement.className = 'volunteer-count'; // Ensure class is set
}
// Update the data attribute with new shift data
@@ -290,6 +331,32 @@ function updateShiftInList(updatedShift) {
}
}
// Update modal title with current volunteer count
function updateModalTitle() {
if (!currentShiftData) return;
const modalTitle = document.getElementById('modal-shift-title');
const modalDetails = document.getElementById('modal-shift-details');
if (modalTitle) {
const signupCount = currentShiftData.signups ? currentShiftData.signups.length : 0;
modalTitle.textContent = `Manage Volunteers - ${currentShiftData.Title} (${signupCount}/${currentShiftData['Max Volunteers']})`;
}
if (modalDetails) {
const shiftDate = safeAdminCore('createLocalDate', currentShiftData.Date);
const dateStr = shiftDate ? shiftDate.toLocaleDateString() : currentShiftData.Date;
const signupCount = currentShiftData.signups ? currentShiftData.signups.length : 0;
modalDetails.innerHTML = `
<p><strong>Date:</strong> ${dateStr}</p>
<p><strong>Time:</strong> ${currentShiftData['Start Time']} - ${currentShiftData['End Time']}</p>
<p><strong>Location:</strong> ${safeAdminCore('escapeHtml', currentShiftData.Location || 'TBD') || currentShiftData.Location || 'TBD'}</p>
<p><strong>Current Signups:</strong> ${signupCount} / ${currentShiftData['Max Volunteers']}</p>
`;
}
}
// Close modal
function closeShiftUserModal() {
const modal = document.getElementById('shift-user-modal');
@@ -303,6 +370,61 @@ function closeShiftUserModal() {
console.log('Modal closed - shifts list should already be current');
}
// Communication functions for individual volunteers
async function openVolunteerSMS(volunteerEmail, volunteerName) {
try {
// Look up the volunteer's phone number from the users database
const user = await getUserByEmail(volunteerEmail);
if (user && (user.phone || user.Phone)) {
const phoneNumber = user.phone || user.Phone;
const smsUrl = `sms:${phoneNumber}`;
window.open(smsUrl, '_self');
} else {
safeAdminCore('showStatus', `No phone number found for ${volunteerName}`, 'warning');
}
} catch (error) {
console.error('Error looking up volunteer phone number:', error);
safeAdminCore('showStatus', 'Failed to lookup volunteer phone number', 'error');
}
}
async function callVolunteer(volunteerEmail, volunteerName) {
try {
// Look up the volunteer's phone number from the users database
const user = await getUserByEmail(volunteerEmail);
if (user && (user.phone || user.Phone)) {
const phoneNumber = user.phone || user.Phone;
const telUrl = `tel:${phoneNumber}`;
window.open(telUrl, '_self');
} else {
safeAdminCore('showStatus', `No phone number found for ${volunteerName}`, 'warning');
}
} catch (error) {
console.error('Error looking up volunteer phone number:', error);
safeAdminCore('showStatus', 'Failed to lookup volunteer phone number', 'error');
}
}
// Helper function to get user details by email
async function getUserByEmail(email) {
try {
const response = await fetch('/api/users');
const data = await response.json();
if (data.success && data.users) {
return data.users.find(user =>
(user.email === email || user.Email === email)
);
}
return null;
} catch (error) {
console.error('Error fetching users:', error);
return null;
}
}
// Email shift details to all volunteers
async function emailShiftDetails() {
if (!currentShiftData) {
@@ -589,10 +711,15 @@ try {
emailShiftDetails,
setupVolunteerModalEventListeners,
loadAllUsers,
openVolunteerSMS,
callVolunteer,
getUserByEmail,
updateModalTitle,
updateShiftInList,
getCurrentShiftData: () => currentShiftData,
getAllUsers: () => allUsers,
// Add module info for debugging
moduleVersion: '1.0',
moduleVersion: '1.2',
loadedAt: new Date().toISOString()
};

17
map/app/public/js/admin-shifts.js
View File

@@ -59,13 +59,26 @@ function displayAdminShifts(shifts) {
console.log(`Shift "${shift.Title}" (ID: ${shift.ID}) has ${signupCount} volunteers:`, shift.signups?.map(s => s['User Email']) || []);
// Generate list of first names for volunteers
const firstNames = shift.signups ? shift.signups.map(volunteer => {
const fullName = volunteer['User Name'] || volunteer['User Email'] || 'Unknown';
// Extract first name (everything before first space, or email username if no space)
const firstName = fullName.includes(' ') ? fullName.split(' ')[0] :
fullName.includes('@') ? fullName.split('@')[0] : fullName;
return window.adminCore.escapeHtml(firstName);
}).slice(0, 8) : []; // Limit to first 8 names to avoid overflow
const namesDisplay = firstNames.length > 0 ?
`<span class="volunteer-names">(${firstNames.join(', ')}${firstNames.length === 8 && signupCount > 8 ? '...' : ''})</span>` :
'';
return `
<div class="shift-admin-item">
<div class="shift-admin-item" data-shift-id="${shift.ID}">
<div>
<h4>${window.adminCore.escapeHtml(shift.Title)}</h4>
<p>📅 ${shiftDate.toLocaleDateString()} | ⏰ ${shift['Start Time']} - ${shift['End Time']}</p>
<p>📍 ${window.adminCore.escapeHtml(shift.Location || 'TBD')}</p>
<p>👥 ${signupCount}/${shift['Max Volunteers']} volunteers</p>
<p class="volunteer-count">👥 ${signupCount}/${shift['Max Volunteers']} volunteers ${namesDisplay}</p>
<p class="status-${(shift.Status || 'open').toLowerCase()}">${shift.Status || 'Open'}</p>
<p class="${isPublic ? 'public-shift' : 'private-shift'}">${isPublic ? '🌐 Public' : '🔒 Private'}</p>
${isPublic ? `

36
map/app/public/js/admin-users.js
View File

@@ -72,6 +72,7 @@ function displayUsers(users) {
<tr>
<th>Email</th>
<th>Name</th>
<th>Phone</th>
<th>Role</th>
<th>Created</th>
<th>Actions</th>
@@ -105,6 +106,7 @@ function displayUsers(users) {
<tr ${user.ExpiresAt && new Date(user.ExpiresAt) < new Date() ? 'class="expired"' : (user.ExpiresAt && new Date(user.ExpiresAt) - new Date() < 3 * 24 * 60 * 60 * 1000 ? 'class="expires-soon"' : '')}>
<td data-label="Email">${window.adminCore.escapeHtml(user.email || user.Email || 'N/A')}</td>
<td data-label="Name">${window.adminCore.escapeHtml(user.name || user.Name || 'N/A')}</td>
<td data-label="Phone">${window.adminCore.escapeHtml(user.phone || user.Phone || 'N/A')}</td>
<td data-label="Role">
<span class="user-role ${userType}">
${userType.charAt(0).toUpperCase() + userType.slice(1)}
@@ -114,12 +116,31 @@ function displayUsers(users) {
<td data-label="Created">${formattedDate}</td>
<td data-label="Actions">
<div class="user-actions">
<button class="btn btn-secondary send-login-btn" data-user-id="${userId}" data-user-email="${window.adminCore.escapeHtml(user.email || user.Email)}">
Send Login Details
</button>
<button class="btn btn-danger delete-user-btn" data-user-id="${userId}" data-user-email="${window.adminCore.escapeHtml(user.email || user.Email)}">
Delete
</button>
<div class="user-communication-actions">
<a href="mailto:${window.adminCore.escapeHtml(user.email || user.Email)}"
class="btn btn-sm btn-outline-primary"
title="Email ${window.adminCore.escapeHtml(user.name || user.Name || 'User')}">
📧
</a>
<a href="sms:${window.adminCore.escapeHtml(user.phone || user.Phone || '')}"
class="btn btn-sm btn-outline-secondary ${!(user.phone || user.Phone) ? 'disabled' : ''}"
title="Text ${window.adminCore.escapeHtml(user.name || user.Name || 'User')}${!(user.phone || user.Phone) ? ' (No phone number)' : ''}">
💬
</a>
<a href="tel:${window.adminCore.escapeHtml(user.phone || user.Phone || '')}"
class="btn btn-sm btn-outline-success ${!(user.phone || user.Phone) ? 'disabled' : ''}"
title="Call ${window.adminCore.escapeHtml(user.name || user.Name || 'User')}${!(user.phone || user.Phone) ? ' (No phone number)' : ''}">
📞
</a>
</div>
<div class="user-admin-actions">
<button class="btn btn-secondary btn-sm send-login-btn" data-user-id="${userId}" data-user-email="${window.adminCore.escapeHtml(user.email || user.Email)}">
Send Login Details
</button>
<button class="btn btn-danger btn-sm delete-user-btn" data-user-id="${userId}" data-user-email="${window.adminCore.escapeHtml(user.email || user.Email)}">
Delete
</button>
</div>
</div>
</td>
</tr>
@@ -222,6 +243,7 @@ async function createUser(e) {
const emailInput = document.getElementById('user-email');
const passwordInput = document.getElementById('user-password');
const nameInput = document.getElementById('user-name');
const phoneInput = document.getElementById('user-phone');
const userTypeSelect = document.getElementById('user-type');
const expireDaysInput = document.getElementById('user-expire-days');
const adminCheckbox = document.getElementById('user-is-admin');
@@ -229,6 +251,7 @@ async function createUser(e) {
const email = emailInput?.value.trim();
const password = passwordInput?.value;
const name = nameInput?.value.trim();
const phone = phoneInput?.value.trim();
const userType = userTypeSelect?.value;
const expireDays = userType === 'temp' ?
parseInt(expireDaysInput?.value) : null;
@@ -254,6 +277,7 @@ async function createUser(e) {
email,
password,
name: name || '',
phone: phone || '',
isAdmin: userType === 'admin' || admin,
userType,
expireDays