A couple more fast email buttons

This commit is contained in:
2025-08-08 17:47:26 -06:00
parent b76906d366
commit 10ee5f1626
14 changed files with 2399 additions and 60 deletions

View File

@@ -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 -->