A couple more fast email buttons
This commit is contained in:
@@ -403,6 +403,86 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shift User Management Modal -->
|
||||
<div id="shift-user-modal" class="modal" style="display: none;">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>Manage Volunteers</h3>
|
||||
<button class="btn btn-secondary btn-sm" id="close-user-modal">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="shift-info">
|
||||
<h4 id="modal-shift-title"></h4>
|
||||
<p id="modal-shift-details"></p>
|
||||
</div>
|
||||
|
||||
<div class="add-user-section">
|
||||
<h4>Add Volunteer</h4>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="user-select">Select User:</label>
|
||||
<select id="user-select" style="width: 100%;">
|
||||
<option value="">Select a user...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="button" class="btn btn-primary" id="add-user-btn">Add User</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="current-volunteers-section">
|
||||
<h4>Current Volunteers</h4>
|
||||
<div class="volunteer-actions-header">
|
||||
<button type="button" class="btn btn-primary btn-sm" id="email-shift-details-btn">
|
||||
📧 Email Shift Details
|
||||
</button>
|
||||
</div>
|
||||
<div id="current-volunteers-list">
|
||||
<!-- Current volunteers will be loaded here -->
|
||||
</div>
|
||||
|
||||
<!-- Shift Email Progress Container -->
|
||||
<div id="shift-email-progress-container" class="email-progress-container">
|
||||
<div class="progress-header">
|
||||
<div class="progress-title">Sending Shift Details...</div>
|
||||
<div class="progress-stats">
|
||||
<div class="progress-stat success">
|
||||
<span>✓</span>
|
||||
<span id="shift-success-count">0</span> sent
|
||||
</div>
|
||||
<div class="progress-stat error">
|
||||
<span>✗</span>
|
||||
<span id="shift-error-count">0</span> failed
|
||||
</div>
|
||||
<div class="progress-stat pending">
|
||||
<span>⏳</span>
|
||||
<span id="shift-pending-count">0</span> pending
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" id="shift-email-progress-bar">
|
||||
<div class="progress-text" id="shift-progress-text">0%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="email-status-list" id="shift-email-status-list">
|
||||
<!-- Status items will be added dynamically -->
|
||||
</div>
|
||||
|
||||
<div class="progress-actions">
|
||||
<button type="button" class="progress-close-btn" id="close-shift-progress-btn" style="display: none;">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Users Section -->
|
||||
@@ -453,10 +533,136 @@
|
||||
</div>
|
||||
|
||||
<div class="users-list">
|
||||
<div class="users-list-header">
|
||||
<h3>All Users</h3>
|
||||
<button type="button" class="btn btn-primary btn-sm" id="email-all-users-btn">
|
||||
📧 Email All Users
|
||||
</button>
|
||||
</div>
|
||||
<!-- User table will be dynamically inserted here -->
|
||||
<p id="users-loading" class="loading-message">Loading users...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email All Users Modal -->
|
||||
<div id="email-users-modal" class="modal" style="display: none;">
|
||||
<div class="modal-content modal-large">
|
||||
<div class="modal-header">
|
||||
<h3>Email All Users</h3>
|
||||
<button class="btn btn-secondary btn-sm" id="close-email-modal">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="email-form">
|
||||
<form id="email-users-form">
|
||||
<div class="form-group">
|
||||
<label for="email-subject">Subject</label>
|
||||
<input type="text" id="email-subject" required placeholder="Enter email subject">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email-content">Message</label>
|
||||
<div class="rich-text-toolbar">
|
||||
<button type="button" class="toolbar-btn" data-command="bold" title="Bold">
|
||||
<strong>B</strong>
|
||||
</button>
|
||||
<button type="button" class="toolbar-btn" data-command="italic" title="Italic">
|
||||
<em>I</em>
|
||||
</button>
|
||||
<button type="button" class="toolbar-btn" data-command="underline" title="Underline">
|
||||
<u>U</u>
|
||||
</button>
|
||||
<button type="button" class="toolbar-btn" data-command="insertUnorderedList" title="Bullet List">
|
||||
• List
|
||||
</button>
|
||||
<button type="button" class="toolbar-btn" data-command="insertOrderedList" title="Numbered List">
|
||||
1. List
|
||||
</button>
|
||||
<button type="button" class="toolbar-btn" data-command="createLink" title="Insert Link">
|
||||
🔗 Link
|
||||
</button>
|
||||
</div>
|
||||
<div id="email-content" class="rich-text-editor" contenteditable="true"
|
||||
placeholder="Type your message here..."
|
||||
style="min-height: 200px; border: 1px solid #ddd; padding: 15px; border-radius: 4px; background: white;">
|
||||
</div>
|
||||
<small class="help-text">Use the toolbar above to format your message</small>
|
||||
</div>
|
||||
|
||||
<div class="email-preview-section">
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input type="checkbox" id="show-preview" />
|
||||
Show email preview
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="email-preview" class="email-preview" style="display: none;">
|
||||
<h4>Email Preview:</h4>
|
||||
<div class="email-preview-content">
|
||||
<div class="preview-header">
|
||||
<strong>Subject:</strong> <span id="preview-subject">Your subject will appear here</span>
|
||||
</div>
|
||||
<div class="preview-body" id="preview-body">
|
||||
Your message will appear here
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="email-recipients-info">
|
||||
<p><strong>Recipients:</strong> <span id="recipients-count">Loading...</span> users will receive this email</p>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary" id="send-email-btn">
|
||||
📧 Send Email to All Users
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" id="cancel-email-btn">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Email Progress Container -->
|
||||
<div id="email-progress-container" class="email-progress-container">
|
||||
<div class="progress-header">
|
||||
<div class="progress-title">Sending Emails...</div>
|
||||
<div class="progress-stats">
|
||||
<div class="progress-stat success">
|
||||
<span>✓</span>
|
||||
<span id="success-count">0</span> sent
|
||||
</div>
|
||||
<div class="progress-stat error">
|
||||
<span>✗</span>
|
||||
<span id="error-count">0</span> failed
|
||||
</div>
|
||||
<div class="progress-stat pending">
|
||||
<span>⏳</span>
|
||||
<span id="pending-count">0</span> pending
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" id="email-progress-bar">
|
||||
<div class="progress-text" id="progress-text">0%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="email-status-list" id="email-status-list">
|
||||
<!-- Status items will be added dynamically -->
|
||||
</div>
|
||||
|
||||
<div class="progress-actions">
|
||||
<button type="button" class="progress-close-btn" id="close-progress-btn" style="display: none;">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Map Cuts Section -->
|
||||
|
||||
@@ -2539,3 +2539,472 @@
|
||||
border-color: #ddd;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Shift User Management Modal */
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: white;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 0;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
max-height: 80vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 25px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 25px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.shift-info {
|
||||
background-color: #f8f9fa;
|
||||
padding: 15px;
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.shift-info h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.shift-info p {
|
||||
margin: 0;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.add-user-section {
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.add-user-section h4 {
|
||||
margin: 0 0 15px 0;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.current-volunteers-section h4 {
|
||||
margin: 0 0 15px 0;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.volunteer-actions-header {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* Users list header styling */
|
||||
.users-list-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #eee;
|
||||
}
|
||||
|
||||
.users-list-header h3 {
|
||||
margin: 0;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
/* Email modal styling */
|
||||
.modal-large {
|
||||
max-width: 800px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.email-form {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.rich-text-toolbar {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px 4px 0 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ccc;
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.toolbar-btn:hover {
|
||||
background: #e9ecef;
|
||||
border-color: #adb5bd;
|
||||
}
|
||||
|
||||
.toolbar-btn:active, .toolbar-btn.active {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
.rich-text-editor {
|
||||
min-height: 200px;
|
||||
border: 1px solid #ddd;
|
||||
padding: 15px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
background: white;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.rich-text-editor:focus {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px rgba(160, 44, 141, 0.2);
|
||||
}
|
||||
|
||||
.rich-text-editor:empty:before {
|
||||
content: attr(placeholder);
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.email-preview {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.email-preview-content {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.preview-header {
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.preview-body {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.email-recipients-info {
|
||||
background: #e3f2fd;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin: 20px 0;
|
||||
border-left: 4px solid #2196f3;
|
||||
}
|
||||
|
||||
.email-recipients-info p {
|
||||
margin: 0;
|
||||
color: #1565c0;
|
||||
}
|
||||
|
||||
.volunteer-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 15px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.volunteer-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.volunteer-name {
|
||||
font-weight: bold;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.volunteer-email {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.volunteer-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.no-volunteers {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
padding: 20px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
/* Enhance existing shift admin items */
|
||||
.shift-admin-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.manage-volunteers-btn {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* User select dropdown */
|
||||
#user-select {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 14px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#user-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
|
||||
}
|
||||
|
||||
/* Responsive modal */
|
||||
@media (max-width: 768px) {
|
||||
.modal-content {
|
||||
width: 95%;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.volunteer-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.volunteer-actions {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
/* Email Progress Indicators */
|
||||
.email-progress-container {
|
||||
display: none;
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: var(--border-radius);
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.email-progress-container.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.progress-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.progress-title {
|
||||
font-weight: 600;
|
||||
color: var(--dark-color);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.progress-stats {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.progress-stat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.progress-stat.success {
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.progress-stat.error {
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
||||
.progress-stat.pending {
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
background-color: #e9ecef;
|
||||
border-radius: 10px;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--primary-color) 0%, #28a745 100%);
|
||||
width: 0%;
|
||||
transition: width 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-bar.complete {
|
||||
background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
|
||||
}
|
||||
|
||||
.progress-bar.error {
|
||||
background: linear-gradient(90deg, #dc3545 0%, #e74c3c 100%);
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.email-status-list {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.email-status-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 15px;
|
||||
border-bottom: 1px solid #f8f9fa;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.email-status-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.email-status-recipient {
|
||||
font-weight: 500;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.email-status-result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.email-status-result.success {
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.email-status-result.error {
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
||||
.email-status-result.pending {
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.progress-spinner {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 2px solid #f3f3f3;
|
||||
border-top: 2px solid #6c757d;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.progress-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.progress-close-btn {
|
||||
background: var(--secondary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.progress-close-btn:hover {
|
||||
background: #5a6268;
|
||||
}
|
||||
|
||||
@@ -500,6 +500,12 @@ function showSection(sectionId) {
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// Special handling for shifts section
|
||||
if (sectionId === 'shifts') {
|
||||
console.log('Loading shifts for admin panel...');
|
||||
loadAdminShifts();
|
||||
}
|
||||
}
|
||||
|
||||
// Update map from input fields
|
||||
@@ -1113,17 +1119,31 @@ function debounce(func, wait) {
|
||||
|
||||
// Add shift management functions
|
||||
async function loadAdminShifts() {
|
||||
const list = document.getElementById('admin-shifts-list');
|
||||
if (list) {
|
||||
list.innerHTML = '<p>Loading shifts...</p>';
|
||||
}
|
||||
|
||||
try {
|
||||
console.log('Loading admin shifts...');
|
||||
const response = await fetch('/api/shifts/admin');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
console.log('Successfully loaded', data.shifts.length, 'shifts');
|
||||
displayAdminShifts(data.shifts);
|
||||
} else {
|
||||
console.error('Failed to load shifts:', data.error);
|
||||
if (list) {
|
||||
list.innerHTML = '<p>Failed to load shifts</p>';
|
||||
}
|
||||
showStatus('Failed to load shifts', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading admin shifts:', error);
|
||||
if (list) {
|
||||
list.innerHTML = '<p>Error loading shifts</p>';
|
||||
}
|
||||
showStatus('Failed to load shifts', 'error');
|
||||
}
|
||||
}
|
||||
@@ -1145,6 +1165,8 @@ function displayAdminShifts(shifts) {
|
||||
const shiftDate = new Date(shift.Date);
|
||||
const signupCount = shift.signups ? shift.signups.length : 0;
|
||||
|
||||
console.log(`Shift "${shift.Title}" (ID: ${shift.ID}) has ${signupCount} volunteers:`, shift.signups?.map(s => s['User Email']) || []);
|
||||
|
||||
return `
|
||||
<div class="shift-admin-item">
|
||||
<div>
|
||||
@@ -1155,6 +1177,7 @@ function displayAdminShifts(shifts) {
|
||||
<p class="status-${(shift.Status || 'open').toLowerCase()}">${shift.Status || 'Open'}</p>
|
||||
</div>
|
||||
<div class="shift-actions">
|
||||
<button class="btn btn-primary btn-sm manage-volunteers-btn" data-shift-id="${shift.ID}" data-shift='${JSON.stringify(shift).replace(/'/g, "'")}'>Manage Volunteers</button>
|
||||
<button class="btn btn-secondary btn-sm edit-shift-btn" data-shift-id="${shift.ID}">Edit</button>
|
||||
<button class="btn btn-danger btn-sm delete-shift-btn" data-shift-id="${shift.ID}">Delete</button>
|
||||
</div>
|
||||
@@ -1187,6 +1210,11 @@ function setupShiftActionListeners() {
|
||||
const shiftId = e.target.getAttribute('data-shift-id');
|
||||
console.log('Edit button clicked for shift:', shiftId);
|
||||
editShift(shiftId);
|
||||
} else if (e.target.classList.contains('manage-volunteers-btn')) {
|
||||
const shiftId = e.target.getAttribute('data-shift-id');
|
||||
const shiftData = JSON.parse(e.target.getAttribute('data-shift').replace(/'/g, "'"));
|
||||
console.log('Manage volunteers clicked for shift:', shiftId);
|
||||
showShiftUserModal(shiftId, shiftData);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1207,6 +1235,7 @@ async function deleteShift(shiftId) {
|
||||
if (data.success) {
|
||||
showStatus('Shift deleted successfully', 'success');
|
||||
await loadAdminShifts();
|
||||
console.log('Refreshed shifts list after deleting shift');
|
||||
} else {
|
||||
showStatus(data.error || 'Failed to delete shift', 'error');
|
||||
}
|
||||
@@ -1250,6 +1279,7 @@ async function createShift(e) {
|
||||
showStatus('Shift created successfully', 'success');
|
||||
document.getElementById('shift-form').reset();
|
||||
await loadAdminShifts();
|
||||
console.log('Refreshed shifts list after creating new shift');
|
||||
} else {
|
||||
showStatus(data.error || 'Failed to create shift', 'error');
|
||||
}
|
||||
@@ -1304,13 +1334,29 @@ function displayUsers(users) {
|
||||
const container = document.querySelector('.users-list');
|
||||
if (!container) return;
|
||||
|
||||
// Find or create the users table container, preserving the header
|
||||
let usersTableContainer = container.querySelector('.users-table-container');
|
||||
if (!usersTableContainer) {
|
||||
// If container doesn't exist, create it after the header
|
||||
const header = container.querySelector('.users-list-header');
|
||||
usersTableContainer = document.createElement('div');
|
||||
usersTableContainer.className = 'users-table-container';
|
||||
|
||||
if (header && header.nextSibling) {
|
||||
container.insertBefore(usersTableContainer, header.nextSibling);
|
||||
} else if (header) {
|
||||
container.appendChild(usersTableContainer);
|
||||
} else {
|
||||
container.appendChild(usersTableContainer);
|
||||
}
|
||||
}
|
||||
|
||||
if (!users || users.length === 0) {
|
||||
container.innerHTML = '<h3>Existing Users</h3><p class="empty-message">No users found.</p>';
|
||||
usersTableContainer.innerHTML = '<p class="empty-message">No users found.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const tableHtml = `
|
||||
<h3>Existing Users</h3>
|
||||
<div class="users-table-wrapper">
|
||||
<table class="users-table">
|
||||
<thead>
|
||||
@@ -1322,7 +1368,7 @@ function displayUsers(users) {
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tbody id="users-table-body">
|
||||
${users.map(user => {
|
||||
const createdDate = user.created_at || user['Created At'] || user.createdAt;
|
||||
const formattedDate = createdDate ? new Date(createdDate).toLocaleDateString() : 'N/A';
|
||||
@@ -1376,7 +1422,7 @@ function displayUsers(users) {
|
||||
<p id="users-loading" class="loading-message" style="display: none;">Loading...</p>
|
||||
`;
|
||||
|
||||
container.innerHTML = tableHtml;
|
||||
usersTableContainer.innerHTML = tableHtml;
|
||||
setupUserActionListeners();
|
||||
}
|
||||
|
||||
@@ -1402,6 +1448,9 @@ function setupUserActionListeners() {
|
||||
const userEmail = e.target.getAttribute('data-user-email');
|
||||
console.log('Send login details button clicked for user:', userId);
|
||||
sendLoginDetailsToUser(userId, userEmail);
|
||||
} else if (e.target.id === 'email-all-users-btn') {
|
||||
console.log('Email All Users button clicked');
|
||||
showEmailUsersModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1545,6 +1594,318 @@ function clearUserForm() {
|
||||
}
|
||||
}
|
||||
|
||||
// Email All Users Functions
|
||||
let allUsersData = [];
|
||||
|
||||
async function showEmailUsersModal() {
|
||||
// Load current users data
|
||||
try {
|
||||
const response = await fetch('/api/users');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success && data.users) {
|
||||
allUsersData = data.users;
|
||||
|
||||
// Update recipients count
|
||||
const recipientsCount = document.getElementById('recipients-count');
|
||||
if (recipientsCount) {
|
||||
recipientsCount.textContent = `${allUsersData.length}`;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading users for email:', error);
|
||||
showStatus('Failed to load user data', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Show modal
|
||||
const modal = document.getElementById('email-users-modal');
|
||||
if (modal) {
|
||||
modal.style.display = 'flex';
|
||||
|
||||
// Clear previous content
|
||||
document.getElementById('email-subject').value = '';
|
||||
document.getElementById('email-content').innerHTML = '';
|
||||
document.getElementById('show-preview').checked = false;
|
||||
document.getElementById('email-preview').style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function closeEmailUsersModal() {
|
||||
const modal = document.getElementById('email-users-modal');
|
||||
if (modal) {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function setupRichTextEditor() {
|
||||
const toolbar = document.querySelector('.rich-text-toolbar');
|
||||
const editor = document.getElementById('email-content');
|
||||
|
||||
if (!toolbar || !editor) return;
|
||||
|
||||
// Handle toolbar button clicks
|
||||
toolbar.addEventListener('click', (e) => {
|
||||
if (e.target.classList.contains('toolbar-btn')) {
|
||||
e.preventDefault();
|
||||
const command = e.target.getAttribute('data-command');
|
||||
|
||||
if (command === 'createLink') {
|
||||
const url = prompt('Enter the URL:');
|
||||
if (url) {
|
||||
document.execCommand(command, false, url);
|
||||
}
|
||||
} else {
|
||||
document.execCommand(command, false, null);
|
||||
}
|
||||
|
||||
// Update preview if visible
|
||||
updateEmailPreview();
|
||||
}
|
||||
});
|
||||
|
||||
// Update preview on content change
|
||||
editor.addEventListener('input', updateEmailPreview);
|
||||
|
||||
// Handle preview toggle
|
||||
const showPreviewCheckbox = document.getElementById('show-preview');
|
||||
if (showPreviewCheckbox) {
|
||||
showPreviewCheckbox.addEventListener('change', togglePreview);
|
||||
}
|
||||
|
||||
// Update preview when subject changes
|
||||
const subjectInput = document.getElementById('email-subject');
|
||||
if (subjectInput) {
|
||||
subjectInput.addEventListener('input', updateEmailPreview);
|
||||
}
|
||||
}
|
||||
|
||||
function togglePreview() {
|
||||
const preview = document.getElementById('email-preview');
|
||||
const checkbox = document.getElementById('show-preview');
|
||||
|
||||
if (preview && checkbox) {
|
||||
if (checkbox.checked) {
|
||||
preview.style.display = 'block';
|
||||
updateEmailPreview();
|
||||
} else {
|
||||
preview.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateEmailPreview() {
|
||||
const previewSubject = document.getElementById('preview-subject');
|
||||
const previewBody = document.getElementById('preview-body');
|
||||
const subjectInput = document.getElementById('email-subject');
|
||||
const contentEditor = document.getElementById('email-content');
|
||||
|
||||
if (previewSubject && subjectInput) {
|
||||
previewSubject.textContent = subjectInput.value || 'Your subject will appear here';
|
||||
}
|
||||
|
||||
if (previewBody && contentEditor) {
|
||||
const content = contentEditor.innerHTML || 'Your message will appear here';
|
||||
previewBody.innerHTML = content;
|
||||
}
|
||||
}
|
||||
|
||||
async function sendEmailToAllUsers(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const subject = document.getElementById('email-subject').value.trim();
|
||||
const content = document.getElementById('email-content').innerHTML.trim();
|
||||
|
||||
if (!subject) {
|
||||
showStatus('Please enter an email subject', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!content || content === '<br>' || content === '') {
|
||||
showStatus('Please enter email content', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (allUsersData.length === 0) {
|
||||
showStatus('No users found to email', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const confirmMessage = `Send this email to all ${allUsersData.length} users?`;
|
||||
if (!confirm(confirmMessage)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize progress tracking
|
||||
initializeEmailProgress(allUsersData.length);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/users/email-all', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
subject: subject,
|
||||
content: content
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
// Display detailed results
|
||||
updateEmailProgress(data.results);
|
||||
showStatus(data.message, 'success');
|
||||
console.log('Email results:', data.results);
|
||||
} else {
|
||||
showEmailError(data.error || 'Failed to send emails');
|
||||
if (data.details) {
|
||||
console.error('Failed email details:', data.details);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error sending emails to all users:', error);
|
||||
showEmailError('Failed to send emails - Network error');
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize email progress display
|
||||
function initializeEmailProgress(totalCount) {
|
||||
const progressContainer = document.getElementById('email-progress-container');
|
||||
const statusList = document.getElementById('email-status-list');
|
||||
const pendingCountEl = document.getElementById('pending-count');
|
||||
const successCountEl = document.getElementById('success-count');
|
||||
const errorCountEl = document.getElementById('error-count');
|
||||
const progressBar = document.getElementById('email-progress-bar');
|
||||
const progressText = document.getElementById('progress-text');
|
||||
const closeBtn = document.getElementById('close-progress-btn');
|
||||
|
||||
// Show progress container
|
||||
progressContainer.classList.add('show');
|
||||
|
||||
// Reset counters
|
||||
pendingCountEl.textContent = totalCount;
|
||||
successCountEl.textContent = '0';
|
||||
errorCountEl.textContent = '0';
|
||||
|
||||
// Reset progress bar
|
||||
progressBar.style.width = '0%';
|
||||
progressBar.classList.remove('complete', 'error');
|
||||
progressText.textContent = '0%';
|
||||
|
||||
// Clear status list
|
||||
statusList.innerHTML = '';
|
||||
|
||||
// Hide close button initially
|
||||
closeBtn.style.display = 'none';
|
||||
|
||||
// Add status items for each user
|
||||
allUsersData.forEach(user => {
|
||||
const statusItem = document.createElement('div');
|
||||
statusItem.className = 'email-status-item';
|
||||
statusItem.innerHTML = `
|
||||
<div class="email-status-recipient">${user.Name || user.Email}</div>
|
||||
<div class="email-status-result pending">
|
||||
<div class="progress-spinner"></div>
|
||||
<span>Sending...</span>
|
||||
</div>
|
||||
`;
|
||||
statusList.appendChild(statusItem);
|
||||
});
|
||||
}
|
||||
|
||||
// Update progress with results
|
||||
function updateEmailProgress(results) {
|
||||
const statusList = document.getElementById('email-status-list');
|
||||
const pendingCountEl = document.getElementById('pending-count');
|
||||
const successCountEl = document.getElementById('success-count');
|
||||
const errorCountEl = document.getElementById('error-count');
|
||||
const progressBar = document.getElementById('email-progress-bar');
|
||||
const progressText = document.getElementById('progress-text');
|
||||
const closeBtn = document.getElementById('close-progress-btn');
|
||||
|
||||
const successful = results.successful || [];
|
||||
const failed = results.failed || [];
|
||||
const total = results.total || (successful.length + failed.length);
|
||||
|
||||
// Update counters
|
||||
successCountEl.textContent = successful.length;
|
||||
errorCountEl.textContent = failed.length;
|
||||
pendingCountEl.textContent = '0';
|
||||
|
||||
// Update progress bar
|
||||
const percentage = ((successful.length + failed.length) / total * 100).toFixed(1);
|
||||
progressBar.style.width = percentage + '%';
|
||||
progressText.textContent = percentage + '%';
|
||||
|
||||
if (failed.length > 0) {
|
||||
progressBar.classList.add('error');
|
||||
} else {
|
||||
progressBar.classList.add('complete');
|
||||
}
|
||||
|
||||
// Update individual status items
|
||||
const statusItems = statusList.children;
|
||||
|
||||
// Update successful emails
|
||||
successful.forEach(result => {
|
||||
const statusItem = Array.from(statusItems).find(item =>
|
||||
item.querySelector('.email-status-recipient').textContent.includes(result.email) ||
|
||||
item.querySelector('.email-status-recipient').textContent.includes(result.name)
|
||||
);
|
||||
if (statusItem) {
|
||||
statusItem.querySelector('.email-status-result').innerHTML = `
|
||||
<span class="email-status-result success">✓ Sent</span>
|
||||
`;
|
||||
}
|
||||
});
|
||||
|
||||
// Update failed emails
|
||||
failed.forEach(result => {
|
||||
const statusItem = Array.from(statusItems).find(item =>
|
||||
item.querySelector('.email-status-recipient').textContent.includes(result.email) ||
|
||||
item.querySelector('.email-status-recipient').textContent.includes(result.name)
|
||||
);
|
||||
if (statusItem) {
|
||||
statusItem.querySelector('.email-status-result').innerHTML = `
|
||||
<span class="email-status-result error" title="${result.error || 'Unknown error'}">✗ Failed</span>
|
||||
`;
|
||||
}
|
||||
});
|
||||
|
||||
// Show close button
|
||||
closeBtn.style.display = 'block';
|
||||
closeBtn.onclick = () => {
|
||||
document.getElementById('email-progress-container').classList.remove('show');
|
||||
closeEmailUsersModal();
|
||||
};
|
||||
}
|
||||
|
||||
// Show email error
|
||||
function showEmailError(message) {
|
||||
const progressContainer = document.getElementById('email-progress-container');
|
||||
const progressBar = document.getElementById('email-progress-bar');
|
||||
const progressText = document.getElementById('progress-text');
|
||||
const closeBtn = document.getElementById('close-progress-btn');
|
||||
|
||||
// Show progress container if not visible
|
||||
progressContainer.classList.add('show');
|
||||
|
||||
// Update progress bar to show error
|
||||
progressBar.style.width = '100%';
|
||||
progressBar.classList.add('error');
|
||||
progressText.textContent = 'Error';
|
||||
|
||||
// Show close button
|
||||
closeBtn.style.display = 'block';
|
||||
closeBtn.onclick = () => {
|
||||
progressContainer.classList.remove('show');
|
||||
};
|
||||
|
||||
showStatus(message, 'error');
|
||||
}
|
||||
|
||||
// Initialize NocoDB links in admin panel
|
||||
async function initializeNocodbLinks() {
|
||||
console.log('Starting NocoDB links initialization...');
|
||||
@@ -1626,3 +1987,470 @@ function setAdminNocodbLink(elementId, url) {
|
||||
console.error(`✗ Element not found: ${elementId}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Shift User Management Functions
|
||||
let currentShiftData = null;
|
||||
let allUsers = [];
|
||||
|
||||
// Load all users for the dropdown
|
||||
async function loadAllUsers() {
|
||||
try {
|
||||
const response = await fetch('/api/users');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
allUsers = data.users;
|
||||
populateUserSelect();
|
||||
} else {
|
||||
console.error('Failed to load users:', data.error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading users:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Populate user select dropdown
|
||||
function populateUserSelect() {
|
||||
const select = document.getElementById('user-select');
|
||||
if (!select) return;
|
||||
|
||||
// Clear existing options except the first one
|
||||
select.innerHTML = '<option value="">Select a user...</option>';
|
||||
|
||||
allUsers.forEach(user => {
|
||||
const option = document.createElement('option');
|
||||
option.value = user.email || user.Email;
|
||||
option.textContent = `${user.name || user.Name || ''} (${user.email || user.Email})`;
|
||||
select.appendChild(option);
|
||||
});
|
||||
}
|
||||
|
||||
// Show the shift user management modal
|
||||
async function showShiftUserModal(shiftId, shiftData) {
|
||||
currentShiftData = { ...shiftData, ID: shiftId };
|
||||
|
||||
// Update modal title and info
|
||||
document.getElementById('modal-shift-title').textContent = shiftData.Title;
|
||||
const shiftDate = new Date(shiftData.Date);
|
||||
document.getElementById('modal-shift-details').textContent =
|
||||
`${shiftDate.toLocaleDateString()} | ${shiftData['Start Time']} - ${shiftData['End Time']} | ${shiftData.Location || 'TBD'}`;
|
||||
|
||||
// Load users if not already loaded
|
||||
if (allUsers.length === 0) {
|
||||
await loadAllUsers();
|
||||
}
|
||||
|
||||
// Display current volunteers
|
||||
displayCurrentVolunteers(shiftData.signups || []);
|
||||
|
||||
// Show modal
|
||||
document.getElementById('shift-user-modal').style.display = 'flex';
|
||||
}
|
||||
|
||||
// Display current volunteers in the modal
|
||||
function displayCurrentVolunteers(volunteers) {
|
||||
const container = document.getElementById('current-volunteers-list');
|
||||
|
||||
if (!volunteers || volunteers.length === 0) {
|
||||
container.innerHTML = '<div class="no-volunteers">No volunteers signed up yet.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = volunteers.map(volunteer => `
|
||||
<div class="volunteer-item">
|
||||
<div class="volunteer-info">
|
||||
<div class="volunteer-name">${escapeHtml(volunteer['User Name'] || volunteer['User Email'] || 'Unknown')}</div>
|
||||
<div class="volunteer-email">${escapeHtml(volunteer['User Email'])}</div>
|
||||
</div>
|
||||
<div class="volunteer-actions">
|
||||
<button class="btn btn-danger btn-sm remove-volunteer-btn"
|
||||
data-volunteer-id="${volunteer.ID || volunteer.id}"
|
||||
data-volunteer-email="${volunteer['User Email']}">
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
// Add event listeners for remove buttons
|
||||
setupVolunteerActionListeners();
|
||||
}
|
||||
|
||||
// Setup event listeners for volunteer actions
|
||||
function setupVolunteerActionListeners() {
|
||||
const container = document.getElementById('current-volunteers-list');
|
||||
|
||||
container.addEventListener('click', function(e) {
|
||||
if (e.target.classList.contains('remove-volunteer-btn')) {
|
||||
const volunteerId = e.target.getAttribute('data-volunteer-id');
|
||||
const volunteerEmail = e.target.getAttribute('data-volunteer-email');
|
||||
removeVolunteerFromShift(volunteerId, volunteerEmail);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add user to shift
|
||||
async function addUserToShift() {
|
||||
const userSelect = document.getElementById('user-select');
|
||||
const userEmail = userSelect.value;
|
||||
|
||||
if (!userEmail) {
|
||||
showStatus('Please select a user to add', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!currentShiftData) {
|
||||
showStatus('No shift selected', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/shifts/admin/${currentShiftData.ID}/add-user`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ userEmail })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showStatus('User successfully added to shift', 'success');
|
||||
userSelect.value = ''; // Clear selection
|
||||
|
||||
// Refresh the shift data and reload volunteers
|
||||
await refreshCurrentShiftData();
|
||||
console.log('Refreshed shift data after adding user');
|
||||
} else {
|
||||
showStatus(data.error || 'Failed to add user to shift', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error adding user to shift:', error);
|
||||
showStatus('Failed to add user to shift', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Remove volunteer from shift
|
||||
async function removeVolunteerFromShift(volunteerId, volunteerEmail) {
|
||||
if (!confirm(`Are you sure you want to remove ${volunteerEmail} from this shift?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!currentShiftData) {
|
||||
showStatus('No shift selected', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/shifts/admin/${currentShiftData.ID}/remove-user/${volunteerId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showStatus('Volunteer successfully removed from shift', 'success');
|
||||
|
||||
// Refresh the shift data and reload volunteers
|
||||
await refreshCurrentShiftData();
|
||||
console.log('Refreshed shift data after removing volunteer');
|
||||
} else {
|
||||
showStatus(data.error || 'Failed to remove volunteer from shift', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error removing volunteer from shift:', error);
|
||||
showStatus('Failed to remove volunteer from shift', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Refresh current shift data
|
||||
async function refreshCurrentShiftData() {
|
||||
if (!currentShiftData) return;
|
||||
|
||||
try {
|
||||
console.log('Refreshing shift data for shift ID:', currentShiftData.ID);
|
||||
|
||||
// Reload admin shifts to get updated data
|
||||
const response = await fetch('/api/shifts/admin');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
const updatedShift = data.shifts.find(s => s.ID === currentShiftData.ID);
|
||||
if (updatedShift) {
|
||||
console.log('Found updated shift with', updatedShift.signups?.length || 0, 'volunteers');
|
||||
currentShiftData = updatedShift;
|
||||
displayCurrentVolunteers(updatedShift.signups || []);
|
||||
|
||||
// Immediately refresh the main shifts list to show updated counts
|
||||
console.log('Refreshing main shifts list with', data.shifts.length, 'shifts');
|
||||
displayAdminShifts(data.shifts);
|
||||
} else {
|
||||
console.warn('Could not find updated shift with ID:', currentShiftData.ID);
|
||||
}
|
||||
} else {
|
||||
console.error('Failed to refresh shift data:', data.error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error refreshing shift data:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Close modal
|
||||
function closeShiftUserModal() {
|
||||
document.getElementById('shift-user-modal').style.display = 'none';
|
||||
currentShiftData = null;
|
||||
|
||||
// Refresh the main shifts list one more time when closing the modal
|
||||
// to ensure any changes are reflected
|
||||
console.log('Refreshing shifts list on modal close');
|
||||
loadAdminShifts();
|
||||
}
|
||||
|
||||
// Email shift details to all volunteers
|
||||
async function emailShiftDetails() {
|
||||
if (!currentShiftData) {
|
||||
showStatus('No shift selected', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if there are volunteers to email
|
||||
const volunteers = currentShiftData.signups || [];
|
||||
if (volunteers.length === 0) {
|
||||
showStatus('No volunteers signed up for this shift', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Confirm action
|
||||
const confirmMessage = `Send shift details email to ${volunteers.length} volunteer${volunteers.length !== 1 ? 's' : ''}?`;
|
||||
if (!confirm(confirmMessage)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize progress tracking for shift emails
|
||||
initializeShiftEmailProgress(volunteers.length);
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/shifts/admin/${currentShiftData.ID}/email-details`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
// Display detailed results
|
||||
updateShiftEmailProgress(data.results);
|
||||
showStatus(data.message, 'success');
|
||||
console.log('Email results:', data.results);
|
||||
} else {
|
||||
showShiftEmailError(data.error || 'Failed to send emails');
|
||||
if (data.details) {
|
||||
console.error('Failed email details:', data.details);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error sending shift details emails:', error);
|
||||
showShiftEmailError('Failed to send emails - Network error');
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize shift email progress display
|
||||
function initializeShiftEmailProgress(totalCount) {
|
||||
const progressContainer = document.getElementById('shift-email-progress-container');
|
||||
const statusList = document.getElementById('shift-email-status-list');
|
||||
const pendingCountEl = document.getElementById('shift-pending-count');
|
||||
const successCountEl = document.getElementById('shift-success-count');
|
||||
const errorCountEl = document.getElementById('shift-error-count');
|
||||
const progressBar = document.getElementById('shift-email-progress-bar');
|
||||
const progressText = document.getElementById('shift-progress-text');
|
||||
const closeBtn = document.getElementById('close-shift-progress-btn');
|
||||
|
||||
// Show progress container
|
||||
progressContainer.classList.add('show');
|
||||
|
||||
// Reset counters
|
||||
pendingCountEl.textContent = totalCount;
|
||||
successCountEl.textContent = '0';
|
||||
errorCountEl.textContent = '0';
|
||||
|
||||
// Reset progress bar
|
||||
progressBar.style.width = '0%';
|
||||
progressBar.classList.remove('complete', 'error');
|
||||
progressText.textContent = '0%';
|
||||
|
||||
// Clear status list
|
||||
statusList.innerHTML = '';
|
||||
|
||||
// Hide close button initially
|
||||
closeBtn.style.display = 'none';
|
||||
|
||||
// Add status items for each volunteer
|
||||
const volunteers = currentShiftData.signups || [];
|
||||
volunteers.forEach(volunteer => {
|
||||
const statusItem = document.createElement('div');
|
||||
statusItem.className = 'email-status-item';
|
||||
statusItem.innerHTML = `
|
||||
<div class="email-status-recipient">${volunteer['User Name'] || volunteer['User Email']}</div>
|
||||
<div class="email-status-result pending">
|
||||
<div class="progress-spinner"></div>
|
||||
<span>Sending...</span>
|
||||
</div>
|
||||
`;
|
||||
statusList.appendChild(statusItem);
|
||||
});
|
||||
}
|
||||
|
||||
// Update shift email progress with results
|
||||
function updateShiftEmailProgress(results) {
|
||||
const statusList = document.getElementById('shift-email-status-list');
|
||||
const pendingCountEl = document.getElementById('shift-pending-count');
|
||||
const successCountEl = document.getElementById('shift-success-count');
|
||||
const errorCountEl = document.getElementById('shift-error-count');
|
||||
const progressBar = document.getElementById('shift-email-progress-bar');
|
||||
const progressText = document.getElementById('shift-progress-text');
|
||||
const closeBtn = document.getElementById('close-shift-progress-btn');
|
||||
|
||||
const successful = results.successful || [];
|
||||
const failed = results.failed || [];
|
||||
const total = results.total || (successful.length + failed.length);
|
||||
|
||||
// Update counters
|
||||
successCountEl.textContent = successful.length;
|
||||
errorCountEl.textContent = failed.length;
|
||||
pendingCountEl.textContent = '0';
|
||||
|
||||
// Update progress bar
|
||||
const percentage = ((successful.length + failed.length) / total * 100).toFixed(1);
|
||||
progressBar.style.width = percentage + '%';
|
||||
progressText.textContent = percentage + '%';
|
||||
|
||||
if (failed.length > 0) {
|
||||
progressBar.classList.add('error');
|
||||
} else {
|
||||
progressBar.classList.add('complete');
|
||||
}
|
||||
|
||||
// Update individual status items
|
||||
const statusItems = statusList.children;
|
||||
|
||||
// Update successful emails
|
||||
successful.forEach(result => {
|
||||
const statusItem = Array.from(statusItems).find(item =>
|
||||
item.querySelector('.email-status-recipient').textContent.includes(result.email) ||
|
||||
item.querySelector('.email-status-recipient').textContent.includes(result.name)
|
||||
);
|
||||
if (statusItem) {
|
||||
statusItem.querySelector('.email-status-result').innerHTML = `
|
||||
<span class="email-status-result success">✓ Sent</span>
|
||||
`;
|
||||
}
|
||||
});
|
||||
|
||||
// Update failed emails
|
||||
failed.forEach(result => {
|
||||
const statusItem = Array.from(statusItems).find(item =>
|
||||
item.querySelector('.email-status-recipient').textContent.includes(result.email) ||
|
||||
item.querySelector('.email-status-recipient').textContent.includes(result.name)
|
||||
);
|
||||
if (statusItem) {
|
||||
statusItem.querySelector('.email-status-result').innerHTML = `
|
||||
<span class="email-status-result error" title="${result.error || 'Unknown error'}">✗ Failed</span>
|
||||
`;
|
||||
}
|
||||
});
|
||||
|
||||
// Show close button
|
||||
closeBtn.style.display = 'block';
|
||||
closeBtn.onclick = () => {
|
||||
document.getElementById('shift-email-progress-container').classList.remove('show');
|
||||
};
|
||||
}
|
||||
|
||||
// Show shift email error
|
||||
function showShiftEmailError(message) {
|
||||
const progressContainer = document.getElementById('shift-email-progress-container');
|
||||
const progressBar = document.getElementById('shift-email-progress-bar');
|
||||
const progressText = document.getElementById('shift-progress-text');
|
||||
const closeBtn = document.getElementById('close-shift-progress-btn');
|
||||
|
||||
// Show progress container if not visible
|
||||
progressContainer.classList.add('show');
|
||||
|
||||
// Update progress bar to show error
|
||||
progressBar.style.width = '100%';
|
||||
progressBar.classList.add('error');
|
||||
progressText.textContent = 'Error';
|
||||
|
||||
// Show close button
|
||||
closeBtn.style.display = 'block';
|
||||
closeBtn.onclick = () => {
|
||||
progressContainer.classList.remove('show');
|
||||
};
|
||||
|
||||
showStatus(message, 'error');
|
||||
}
|
||||
|
||||
// Setup modal event listeners when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const closeModalBtn = document.getElementById('close-user-modal');
|
||||
const addUserBtn = document.getElementById('add-user-btn');
|
||||
const emailShiftDetailsBtn = document.getElementById('email-shift-details-btn');
|
||||
const modal = document.getElementById('shift-user-modal');
|
||||
|
||||
if (closeModalBtn) {
|
||||
closeModalBtn.addEventListener('click', closeShiftUserModal);
|
||||
}
|
||||
|
||||
if (addUserBtn) {
|
||||
addUserBtn.addEventListener('click', addUserToShift);
|
||||
}
|
||||
|
||||
if (emailShiftDetailsBtn) {
|
||||
emailShiftDetailsBtn.addEventListener('click', emailShiftDetails);
|
||||
}
|
||||
|
||||
// Close modal when clicking outside
|
||||
if (modal) {
|
||||
modal.addEventListener('click', function(e) {
|
||||
if (e.target === modal) {
|
||||
closeShiftUserModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Setup email users modal event listeners when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Email all users functionality
|
||||
const closeEmailModalBtn = document.getElementById('close-email-modal');
|
||||
const cancelEmailBtn = document.getElementById('cancel-email-btn');
|
||||
const emailUsersForm = document.getElementById('email-users-form');
|
||||
const emailModal = document.getElementById('email-users-modal');
|
||||
|
||||
if (closeEmailModalBtn) {
|
||||
closeEmailModalBtn.addEventListener('click', closeEmailUsersModal);
|
||||
}
|
||||
|
||||
if (cancelEmailBtn) {
|
||||
cancelEmailBtn.addEventListener('click', closeEmailUsersModal);
|
||||
}
|
||||
|
||||
if (emailUsersForm) {
|
||||
emailUsersForm.addEventListener('submit', sendEmailToAllUsers);
|
||||
}
|
||||
|
||||
// Close modal when clicking outside
|
||||
if (emailModal) {
|
||||
emailModal.addEventListener('click', function(e) {
|
||||
if (e.target === emailModal) {
|
||||
closeEmailUsersModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Setup rich text editor functionality
|
||||
setupRichTextEditor();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user