1060 lines
43 KiB
JavaScript
1060 lines
43 KiB
JavaScript
// Admin Panel JavaScript
|
|
class AdminPanel {
|
|
constructor() {
|
|
this.currentCampaign = null;
|
|
this.campaigns = [];
|
|
this.users = [];
|
|
this.authManager = null;
|
|
}
|
|
|
|
async init() {
|
|
// Check authentication first
|
|
if (typeof authManager !== 'undefined') {
|
|
this.authManager = authManager;
|
|
const isAuth = await this.authManager.checkSession();
|
|
if (!isAuth || !this.authManager.user?.isAdmin) {
|
|
window.location.href = '/login.html';
|
|
return;
|
|
}
|
|
this.setupUserInterface();
|
|
} else {
|
|
// Fallback if authManager not loaded
|
|
window.location.href = '/login.html';
|
|
return;
|
|
}
|
|
|
|
this.setupEventListeners();
|
|
this.setupFormInteractions();
|
|
this.loadCampaigns();
|
|
}
|
|
|
|
setupUserInterface() {
|
|
// Add user info to header
|
|
const adminHeader = document.querySelector('.admin-header .admin-container');
|
|
if (adminHeader && this.authManager.user) {
|
|
const userInfo = document.createElement('div');
|
|
userInfo.style.cssText = 'position: absolute; top: 1rem; right: 2rem; color: white; font-size: 0.9rem;';
|
|
userInfo.innerHTML = `
|
|
Welcome, ${this.authManager.user.name || this.authManager.user.email}
|
|
<button id="logout-btn" style="margin-left: 1rem; padding: 0.5rem 1rem; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: white; border-radius: 4px; cursor: pointer;">Logout</button>
|
|
`;
|
|
adminHeader.style.position = 'relative';
|
|
adminHeader.appendChild(userInfo);
|
|
|
|
// Add logout event listener
|
|
document.getElementById('logout-btn').addEventListener('click', () => {
|
|
this.authManager.logout();
|
|
});
|
|
}
|
|
}
|
|
|
|
setupEventListeners() {
|
|
// Tab navigation
|
|
document.querySelectorAll('.nav-btn').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
const tab = e.target.dataset.tab;
|
|
this.switchTab(tab);
|
|
});
|
|
});
|
|
|
|
// Form submissions
|
|
document.getElementById('create-campaign-form').addEventListener('submit', (e) => {
|
|
this.handleCreateCampaign(e);
|
|
});
|
|
|
|
document.getElementById('edit-campaign-form').addEventListener('submit', (e) => {
|
|
this.handleUpdateCampaign(e);
|
|
});
|
|
|
|
document.getElementById('user-form').addEventListener('submit', (e) => {
|
|
this.handleCreateUser(e);
|
|
});
|
|
|
|
document.getElementById('email-form').addEventListener('submit', (e) => {
|
|
this.handleEmailAllUsers(e);
|
|
});
|
|
|
|
// Cancel buttons - using event delegation for proper handling
|
|
document.addEventListener('click', (e) => {
|
|
if (e.target.matches('[data-action="cancel-create"]')) {
|
|
this.switchTab('campaigns');
|
|
}
|
|
if (e.target.matches('[data-action="cancel-edit"]')) {
|
|
this.switchTab('campaigns');
|
|
}
|
|
if (e.target.matches('[data-action="create-user"]')) {
|
|
this.showUserModal();
|
|
}
|
|
if (e.target.matches('[data-action="close-user-modal"]')) {
|
|
this.hideUserModal();
|
|
}
|
|
if (e.target.matches('[data-action="close-email-modal"]')) {
|
|
this.hideEmailModal();
|
|
}
|
|
if (e.target.matches('[data-action="delete-user"]')) {
|
|
this.deleteUser(e.target.dataset.userId);
|
|
}
|
|
if (e.target.matches('[data-action="send-login-details"]')) {
|
|
this.sendLoginDetails(e.target.dataset.userId);
|
|
}
|
|
if (e.target.matches('[data-action="email-all-users"]')) {
|
|
this.showEmailModal();
|
|
}
|
|
});
|
|
|
|
// User type change handler
|
|
const userTypeSelect = document.getElementById('user-type');
|
|
if (userTypeSelect) {
|
|
userTypeSelect.addEventListener('change', (e) => {
|
|
this.handleUserTypeChange(e.target.value);
|
|
});
|
|
}
|
|
}
|
|
|
|
setupFormInteractions() {
|
|
// Create campaign button
|
|
const createBtn = document.querySelector('[data-action="create-campaign"]');
|
|
if (createBtn) {
|
|
createBtn.addEventListener('click', () => this.switchTab('create'));
|
|
}
|
|
|
|
// Cancel buttons
|
|
const cancelCreateBtn = document.querySelector('[data-action="cancel-create"]');
|
|
if (cancelCreateBtn) {
|
|
cancelCreateBtn.addEventListener('click', () => this.switchTab('campaigns'));
|
|
}
|
|
|
|
const cancelEditBtn = document.querySelector('[data-action="cancel-edit"]');
|
|
if (cancelEditBtn) {
|
|
cancelEditBtn.addEventListener('click', () => this.switchTab('campaigns'));
|
|
}
|
|
|
|
// Handle checkbox changes for government levels
|
|
document.querySelectorAll('input[name="target_government_levels"]').forEach(checkbox => {
|
|
checkbox.addEventListener('change', () => {
|
|
this.updateGovernmentLevelsPreview();
|
|
});
|
|
});
|
|
|
|
// Handle settings toggles
|
|
document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
|
|
checkbox.addEventListener('change', () => {
|
|
this.handleSettingsChange(checkbox);
|
|
});
|
|
});
|
|
|
|
// Setup campaign selector dropdowns
|
|
this.setupCampaignSelectors();
|
|
}
|
|
|
|
setupCampaignSelectors() {
|
|
// Setup Create Campaign Selector
|
|
const createSelector = document.getElementById('create-campaign-selector');
|
|
const createDropdown = document.getElementById('create-dropdown-menu');
|
|
if (createSelector && createDropdown) {
|
|
this.setupDropdown(createSelector, createDropdown, 'create');
|
|
}
|
|
|
|
// Setup Edit Campaign Selector
|
|
const editSelector = document.getElementById('edit-campaign-selector');
|
|
const editDropdown = document.getElementById('edit-dropdown-menu');
|
|
if (editSelector && editDropdown) {
|
|
this.setupDropdown(editSelector, editDropdown, 'edit');
|
|
}
|
|
}
|
|
|
|
setupDropdown(input, dropdown, type) {
|
|
// Show dropdown on focus
|
|
input.addEventListener('focus', () => {
|
|
this.populateDropdown(dropdown, type);
|
|
dropdown.classList.add('show');
|
|
});
|
|
|
|
// Hide dropdown when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
if (!input.contains(e.target) && !dropdown.contains(e.target)) {
|
|
dropdown.classList.remove('show');
|
|
}
|
|
});
|
|
|
|
// Filter campaigns on input
|
|
input.addEventListener('input', () => {
|
|
this.filterDropdown(input, dropdown, type);
|
|
});
|
|
|
|
// Handle dropdown item selection
|
|
dropdown.addEventListener('click', (e) => {
|
|
if (e.target.classList.contains('dropdown-item')) {
|
|
const campaignId = e.target.dataset.campaignId;
|
|
const campaignTitle = e.target.textContent;
|
|
|
|
console.log('Dropdown item selected:', { campaignId, campaignTitle, type });
|
|
|
|
input.value = campaignTitle;
|
|
dropdown.classList.remove('show');
|
|
|
|
if (type === 'create' && campaignId !== 'new') {
|
|
console.log('Calling populateCreateFormFromCampaign with ID:', campaignId);
|
|
this.populateCreateFormFromCampaign(campaignId);
|
|
} else if (type === 'edit' && campaignId) {
|
|
this.loadCampaignForEdit(campaignId);
|
|
} else if (type === 'create' && campaignId === 'new') {
|
|
this.clearCreateForm();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
populateDropdown(dropdown, type) {
|
|
console.log('populateDropdown called:', { type, campaignsCount: this.campaigns?.length });
|
|
|
|
dropdown.innerHTML = '';
|
|
|
|
if (type === 'create') {
|
|
dropdown.innerHTML = '<div class="dropdown-item" data-campaign-id="new">Create New Campaign</div>';
|
|
} else {
|
|
dropdown.innerHTML = '<div class="dropdown-item" data-campaign-id="">Select a campaign to edit...</div>';
|
|
}
|
|
|
|
if (this.campaigns && this.campaigns.length > 0) {
|
|
console.log('Adding campaigns to dropdown:', this.campaigns.map(c => ({ id: c.id, title: c.title })));
|
|
|
|
// Admin can edit all campaigns
|
|
this.campaigns.forEach(campaign => {
|
|
const item = document.createElement('div');
|
|
item.className = 'dropdown-item';
|
|
item.dataset.campaignId = campaign.id;
|
|
item.textContent = `${campaign.title} (${campaign.status})`;
|
|
dropdown.appendChild(item);
|
|
});
|
|
} else {
|
|
console.log('No campaigns available for dropdown');
|
|
const noResults = document.createElement('div');
|
|
noResults.className = 'dropdown-item no-results';
|
|
noResults.textContent = 'No campaigns found';
|
|
dropdown.appendChild(noResults);
|
|
}
|
|
}
|
|
|
|
filterDropdown(input, dropdown, type) {
|
|
const searchTerm = input.value.toLowerCase();
|
|
|
|
// Re-populate the dropdown to ensure we have the right campaigns
|
|
this.populateDropdown(dropdown, type);
|
|
|
|
const items = dropdown.querySelectorAll('.dropdown-item:not(.no-results)');
|
|
let hasVisibleItems = false;
|
|
|
|
items.forEach(item => {
|
|
if (item.dataset.campaignId === 'new' || item.dataset.campaignId === '') {
|
|
// Always show default items
|
|
item.style.display = 'block';
|
|
hasVisibleItems = true;
|
|
} else {
|
|
const text = item.textContent.toLowerCase();
|
|
if (text.includes(searchTerm)) {
|
|
item.style.display = 'block';
|
|
hasVisibleItems = true;
|
|
} else {
|
|
item.style.display = 'none';
|
|
}
|
|
}
|
|
});
|
|
|
|
// Show/hide no results message
|
|
let noResultsItem = dropdown.querySelector('.no-results');
|
|
if (!hasVisibleItems && searchTerm) {
|
|
if (!noResultsItem) {
|
|
noResultsItem = document.createElement('div');
|
|
noResultsItem.className = 'dropdown-item no-results';
|
|
dropdown.appendChild(noResultsItem);
|
|
}
|
|
noResultsItem.textContent = 'No campaigns found';
|
|
noResultsItem.style.display = 'block';
|
|
} else if (noResultsItem && searchTerm) {
|
|
noResultsItem.style.display = 'none';
|
|
}
|
|
|
|
dropdown.classList.add('show');
|
|
}
|
|
|
|
refreshDropdowns() {
|
|
// Refresh create dropdown if it exists
|
|
const createDropdown = document.getElementById('create-dropdown-menu');
|
|
if (createDropdown) {
|
|
this.populateDropdown(createDropdown, 'create');
|
|
}
|
|
|
|
// Refresh edit dropdown if it exists
|
|
const editDropdown = document.getElementById('edit-dropdown-menu');
|
|
if (editDropdown) {
|
|
this.populateDropdown(editDropdown, 'edit');
|
|
}
|
|
}
|
|
|
|
populateCreateFormFromCampaign(campaignId) {
|
|
console.log('populateCreateFormFromCampaign called with ID:', campaignId);
|
|
console.log('Available campaigns:', this.campaigns);
|
|
|
|
const campaign = this.campaigns.find(c => String(c.id) === String(campaignId));
|
|
console.log('Found campaign:', campaign);
|
|
|
|
if (!campaign) {
|
|
console.error('Campaign not found for ID:', campaignId);
|
|
console.error('Available campaign IDs:', this.campaigns?.map(c => c.id));
|
|
return;
|
|
}
|
|
|
|
// Populate form fields with campaign data as template
|
|
document.getElementById('create-title').value = `Copy of ${campaign.title}`;
|
|
document.getElementById('create-description').value = campaign.description || '';
|
|
document.getElementById('create-email-subject').value = campaign.email_subject || '';
|
|
document.getElementById('create-email-body').value = campaign.email_body || '';
|
|
document.getElementById('create-call-to-action').value = campaign.call_to_action || '';
|
|
document.getElementById('create-status').value = 'draft'; // Always set to draft for new campaigns
|
|
|
|
// Set checkboxes
|
|
document.getElementById('create-allow-smtp').checked = campaign.allow_smtp_email !== false;
|
|
document.getElementById('create-allow-mailto').checked = campaign.allow_mailto_link !== false;
|
|
document.getElementById('create-collect-info').checked = campaign.collect_user_info !== false;
|
|
document.getElementById('create-show-count').checked = campaign.show_email_count !== false;
|
|
document.getElementById('create-allow-editing').checked = campaign.allow_email_editing === true;
|
|
|
|
// Set government levels
|
|
const targetLevels = campaign.target_government_levels || [];
|
|
document.querySelectorAll('input[name="target_government_levels"]').forEach(checkbox => {
|
|
checkbox.checked = targetLevels.includes(checkbox.value);
|
|
});
|
|
|
|
console.log('Form populated successfully with campaign:', campaign.title);
|
|
}
|
|
|
|
clearCreateForm() {
|
|
// Clear all form fields
|
|
document.getElementById('create-title').value = '';
|
|
document.getElementById('create-description').value = '';
|
|
document.getElementById('create-email-subject').value = '';
|
|
document.getElementById('create-email-body').value = '';
|
|
document.getElementById('create-call-to-action').value = '';
|
|
document.getElementById('create-status').value = 'draft';
|
|
|
|
// Reset checkboxes to defaults
|
|
document.getElementById('create-allow-smtp').checked = true;
|
|
document.getElementById('create-allow-mailto').checked = true;
|
|
document.getElementById('create-collect-info').checked = true;
|
|
document.getElementById('create-show-count').checked = true;
|
|
document.getElementById('create-allow-editing').checked = false;
|
|
|
|
// Reset government levels to defaults
|
|
document.querySelectorAll('input[name="target_government_levels"]').forEach(checkbox => {
|
|
checkbox.checked = ['Federal', 'Provincial', 'Municipal'].includes(checkbox.value);
|
|
});
|
|
}
|
|
|
|
async loadCampaignForEdit(campaignId) {
|
|
try {
|
|
const response = await window.apiClient.get(`/admin/campaigns/${campaignId}`);
|
|
|
|
if (response.success) {
|
|
this.currentCampaign = response.campaign;
|
|
this.populateEditForm();
|
|
this.switchTab('edit');
|
|
} else {
|
|
throw new Error(response.error || 'Failed to load campaign');
|
|
}
|
|
} catch (error) {
|
|
console.error('Load campaign error:', error);
|
|
this.showMessage('Failed to load campaign: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
switchTab(tabName) {
|
|
// Hide all tabs
|
|
document.querySelectorAll('.tab-content').forEach(tab => {
|
|
tab.classList.remove('active');
|
|
});
|
|
|
|
// Remove active class from nav buttons
|
|
document.querySelectorAll('.nav-btn').forEach(btn => {
|
|
btn.classList.remove('active');
|
|
});
|
|
|
|
// Show selected tab
|
|
const targetTab = document.getElementById(`${tabName}-tab`);
|
|
if (targetTab) {
|
|
targetTab.classList.add('active');
|
|
}
|
|
|
|
// Update nav button
|
|
const targetNavBtn = document.querySelector(`[data-tab="${tabName}"]`);
|
|
if (targetNavBtn) {
|
|
targetNavBtn.classList.add('active');
|
|
}
|
|
|
|
// Special handling for different tabs
|
|
if (tabName === 'campaigns') {
|
|
this.loadCampaigns();
|
|
} else if (tabName === 'create') {
|
|
// Ensure campaigns are loaded for template selection
|
|
if (!this.campaigns || this.campaigns.length === 0) {
|
|
this.loadCampaigns();
|
|
}
|
|
} else if (tabName === 'edit') {
|
|
// Ensure campaigns are loaded for editing
|
|
if (!this.campaigns || this.campaigns.length === 0) {
|
|
this.loadCampaigns();
|
|
}
|
|
if (this.currentCampaign) {
|
|
this.populateEditForm();
|
|
}
|
|
} else if (tabName === 'users') {
|
|
this.loadUsers();
|
|
}
|
|
|
|
// Refresh dropdowns when switching to create or edit tabs
|
|
if (tabName === 'create' || tabName === 'edit') {
|
|
setTimeout(() => {
|
|
const createDropdown = document.getElementById('create-dropdown-menu');
|
|
const editDropdown = document.getElementById('edit-dropdown-menu');
|
|
|
|
if (tabName === 'create' && createDropdown) {
|
|
this.populateDropdown(createDropdown, 'create');
|
|
}
|
|
if (tabName === 'edit' && editDropdown) {
|
|
this.populateDropdown(editDropdown, 'edit');
|
|
}
|
|
}, 100);
|
|
}
|
|
}
|
|
|
|
async loadCampaigns() {
|
|
const loadingDiv = document.getElementById('campaigns-loading');
|
|
const listDiv = document.getElementById('campaigns-list');
|
|
|
|
loadingDiv.classList.remove('hidden');
|
|
listDiv.innerHTML = '';
|
|
|
|
try {
|
|
const response = await window.apiClient.get('/admin/campaigns');
|
|
|
|
if (response.success) {
|
|
this.campaigns = response.campaigns;
|
|
this.renderCampaignList();
|
|
this.refreshDropdowns(); // Refresh dropdowns when campaigns are loaded
|
|
} else {
|
|
throw new Error(response.error || 'Failed to load campaigns');
|
|
}
|
|
} catch (error) {
|
|
console.error('Load campaigns error:', error);
|
|
this.showMessage('Failed to load campaigns: ' + error.message, 'error');
|
|
} finally {
|
|
loadingDiv.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
renderCampaignList() {
|
|
const listDiv = document.getElementById('campaigns-list');
|
|
|
|
if (this.campaigns.length === 0) {
|
|
listDiv.innerHTML = `
|
|
<div class="empty-state">
|
|
<h3>No campaigns yet</h3>
|
|
<p>Create your first campaign to get started.</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
listDiv.innerHTML = this.campaigns.map(campaign => `
|
|
<div class="campaign-card" data-campaign-id="${campaign.id}">
|
|
${campaign.cover_photo ? `
|
|
<div class="campaign-card-cover" style="background-image: url('/uploads/${campaign.cover_photo}');">
|
|
<div class="campaign-card-cover-overlay">
|
|
<h3>${this.escapeHtml(campaign.title)}</h3>
|
|
<span class="status-badge status-${campaign.status}">${campaign.status}</span>
|
|
</div>
|
|
</div>
|
|
` : `
|
|
<div class="campaign-header">
|
|
<h3>${this.escapeHtml(campaign.title)}</h3>
|
|
<span class="status-badge status-${campaign.status}">${campaign.status}</span>
|
|
</div>
|
|
`}
|
|
|
|
<div class="campaign-meta">
|
|
<p><strong>Slug:</strong> <code>/campaign/${campaign.slug}</code></p>
|
|
<p><strong>Email Count:</strong> ${campaign.emailCount || 0}</p>
|
|
<p><strong>Created:</strong> ${this.formatDate(campaign.created_at)}</p>
|
|
${campaign.created_by_user_name || campaign.created_by_user_email ?
|
|
`<p><strong>Created By:</strong> ${this.escapeHtml(campaign.created_by_user_name || campaign.created_by_user_email)}</p>` : ''}
|
|
</div>
|
|
|
|
<div class="campaign-actions">
|
|
<button class="btn btn-secondary" data-action="edit-campaign" data-campaign-id="${campaign.id}">
|
|
Edit
|
|
</button>
|
|
<button class="btn btn-secondary" data-action="view-analytics" data-campaign-id="${campaign.id}">
|
|
Analytics
|
|
</button>
|
|
<a href="/campaign/${campaign.slug}" target="_blank" class="btn btn-secondary">
|
|
View Public Page
|
|
</a>
|
|
<button class="btn btn-danger" data-action="delete-campaign" data-campaign-id="${campaign.id}">
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
|
|
// Attach event listeners to campaign actions
|
|
this.attachCampaignActionListeners();
|
|
}
|
|
|
|
attachCampaignActionListeners() {
|
|
// Edit campaign buttons
|
|
document.querySelectorAll('[data-action="edit-campaign"]').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
const campaignId = parseInt(e.target.dataset.campaignId);
|
|
this.editCampaign(campaignId);
|
|
});
|
|
});
|
|
|
|
// Delete campaign buttons
|
|
document.querySelectorAll('[data-action="delete-campaign"]').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
const campaignId = parseInt(e.target.dataset.campaignId);
|
|
this.deleteCampaign(campaignId);
|
|
});
|
|
});
|
|
|
|
// Analytics buttons
|
|
document.querySelectorAll('[data-action="view-analytics"]').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
const campaignId = parseInt(e.target.dataset.campaignId);
|
|
this.viewAnalytics(campaignId);
|
|
});
|
|
});
|
|
}
|
|
|
|
async handleCreateCampaign(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(e.target);
|
|
|
|
// Convert checkboxes to boolean values
|
|
const campaignFormData = new FormData();
|
|
campaignFormData.append('title', formData.get('title'));
|
|
campaignFormData.append('description', formData.get('description') || '');
|
|
campaignFormData.append('email_subject', formData.get('email_subject'));
|
|
campaignFormData.append('email_body', formData.get('email_body'));
|
|
campaignFormData.append('call_to_action', formData.get('call_to_action') || '');
|
|
campaignFormData.append('status', formData.get('status'));
|
|
campaignFormData.append('allow_smtp_email', formData.get('allow_smtp_email') === 'on');
|
|
campaignFormData.append('allow_mailto_link', formData.get('allow_mailto_link') === 'on');
|
|
campaignFormData.append('collect_user_info', formData.get('collect_user_info') === 'on');
|
|
campaignFormData.append('show_email_count', formData.get('show_email_count') === 'on');
|
|
campaignFormData.append('allow_email_editing', formData.get('allow_email_editing') === 'on');
|
|
|
|
// Handle target_government_levels array
|
|
const targetLevels = Array.from(formData.getAll('target_government_levels'));
|
|
targetLevels.forEach(level => {
|
|
campaignFormData.append('target_government_levels', level);
|
|
});
|
|
|
|
// Handle cover photo file upload
|
|
const coverPhotoFile = formData.get('cover_photo');
|
|
if (coverPhotoFile && coverPhotoFile.size > 0) {
|
|
campaignFormData.append('cover_photo', coverPhotoFile);
|
|
}
|
|
|
|
try {
|
|
const response = await window.apiClient.postFormData('/admin/campaigns', campaignFormData);
|
|
|
|
if (response.success) {
|
|
this.showMessage('Campaign created successfully!', 'success');
|
|
e.target.reset();
|
|
this.switchTab('campaigns');
|
|
} else {
|
|
throw new Error(response.error || 'Failed to create campaign');
|
|
}
|
|
} catch (error) {
|
|
console.error('Create campaign error:', error);
|
|
this.showMessage('Failed to create campaign: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
editCampaign(campaignId) {
|
|
this.currentCampaign = this.campaigns.find(c => c.id === campaignId);
|
|
if (this.currentCampaign) {
|
|
this.switchTab('edit');
|
|
}
|
|
}
|
|
|
|
populateEditForm() {
|
|
if (!this.currentCampaign) return;
|
|
|
|
const form = document.getElementById('edit-campaign-form');
|
|
const campaign = this.currentCampaign;
|
|
|
|
// Populate form fields
|
|
form.querySelector('[name="title"]').value = campaign.title || '';
|
|
form.querySelector('[name="description"]').value = campaign.description || '';
|
|
form.querySelector('[name="email_subject"]').value = campaign.email_subject || '';
|
|
form.querySelector('[name="email_body"]').value = campaign.email_body || '';
|
|
form.querySelector('[name="call_to_action"]').value = campaign.call_to_action || '';
|
|
|
|
// Status select
|
|
form.querySelector('[name="status"]').value = campaign.status || 'draft';
|
|
|
|
// Show current cover photo if exists
|
|
const currentCoverDiv = document.getElementById('current-cover-photo');
|
|
if (campaign.cover_photo) {
|
|
currentCoverDiv.innerHTML = `
|
|
<div style="margin-bottom: 0.5rem;">
|
|
<small style="color: #666;">Current cover photo:</small><br>
|
|
<img src="/uploads/${campaign.cover_photo}" alt="Current cover" style="max-width: 200px; max-height: 150px; border-radius: 4px; margin-top: 0.25rem;">
|
|
</div>
|
|
`;
|
|
} else {
|
|
currentCoverDiv.innerHTML = '<small style="color: #999;">No cover photo uploaded</small>';
|
|
}
|
|
|
|
// Checkboxes
|
|
form.querySelector('[name="allow_smtp_email"]').checked = campaign.allow_smtp_email;
|
|
form.querySelector('[name="allow_mailto_link"]').checked = campaign.allow_mailto_link;
|
|
form.querySelector('[name="collect_user_info"]').checked = campaign.collect_user_info;
|
|
form.querySelector('[name="show_email_count"]').checked = campaign.show_email_count;
|
|
form.querySelector('[name="allow_email_editing"]').checked = campaign.allow_email_editing;
|
|
|
|
// Government levels
|
|
let targetLevels = [];
|
|
if (campaign.target_government_levels) {
|
|
if (Array.isArray(campaign.target_government_levels)) {
|
|
targetLevels = campaign.target_government_levels;
|
|
} else if (typeof campaign.target_government_levels === 'string') {
|
|
targetLevels = campaign.target_government_levels.split(',').map(l => l.trim());
|
|
}
|
|
}
|
|
|
|
form.querySelectorAll('[name="target_government_levels"]').forEach(checkbox => {
|
|
checkbox.checked = targetLevels.includes(checkbox.value);
|
|
});
|
|
}
|
|
|
|
async handleUpdateCampaign(e) {
|
|
e.preventDefault();
|
|
|
|
if (!this.currentCampaign) return;
|
|
|
|
const formData = new FormData(e.target);
|
|
|
|
// Convert checkboxes to boolean values and build FormData for upload
|
|
const updateFormData = new FormData();
|
|
updateFormData.append('title', formData.get('title'));
|
|
updateFormData.append('description', formData.get('description') || '');
|
|
updateFormData.append('email_subject', formData.get('email_subject'));
|
|
updateFormData.append('email_body', formData.get('email_body'));
|
|
updateFormData.append('call_to_action', formData.get('call_to_action') || '');
|
|
updateFormData.append('status', formData.get('status'));
|
|
updateFormData.append('allow_smtp_email', formData.get('allow_smtp_email') === 'on');
|
|
updateFormData.append('allow_mailto_link', formData.get('allow_mailto_link') === 'on');
|
|
updateFormData.append('collect_user_info', formData.get('collect_user_info') === 'on');
|
|
updateFormData.append('show_email_count', formData.get('show_email_count') === 'on');
|
|
updateFormData.append('allow_email_editing', formData.get('allow_email_editing') === 'on');
|
|
|
|
// Handle target_government_levels array
|
|
const targetLevels = Array.from(formData.getAll('target_government_levels'));
|
|
targetLevels.forEach(level => {
|
|
updateFormData.append('target_government_levels', level);
|
|
});
|
|
|
|
// Handle cover photo file upload if a new one is selected
|
|
const coverPhotoFile = formData.get('cover_photo');
|
|
if (coverPhotoFile && coverPhotoFile.size > 0) {
|
|
updateFormData.append('cover_photo', coverPhotoFile);
|
|
}
|
|
|
|
try {
|
|
const response = await window.apiClient.putFormData(`/admin/campaigns/${this.currentCampaign.id}`, updateFormData);
|
|
|
|
if (response.success) {
|
|
this.showMessage('Campaign updated successfully!', 'success');
|
|
this.switchTab('campaigns');
|
|
} else {
|
|
throw new Error(response.error || 'Failed to update campaign');
|
|
}
|
|
} catch (error) {
|
|
console.error('Update campaign error:', error);
|
|
this.showMessage('Failed to update campaign: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
async deleteCampaign(campaignId) {
|
|
const campaign = this.campaigns.find(c => c.id === campaignId);
|
|
if (!campaign) return;
|
|
|
|
if (!confirm(`Are you sure you want to delete the campaign "${campaign.title}"? This action cannot be undone.`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await window.apiClient.makeRequest(`/admin/campaigns/${campaignId}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (response.success) {
|
|
this.showMessage('Campaign deleted successfully!', 'success');
|
|
this.loadCampaigns();
|
|
} else {
|
|
throw new Error(response.error || 'Failed to delete campaign');
|
|
}
|
|
} catch (error) {
|
|
console.error('Delete campaign error:', error);
|
|
this.showMessage('Failed to delete campaign: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
async viewAnalytics(campaignId) {
|
|
try {
|
|
const response = await window.apiClient.get(`/admin/campaigns/${campaignId}/analytics`);
|
|
|
|
if (response.success) {
|
|
this.showAnalyticsModal(response.analytics);
|
|
} else {
|
|
throw new Error(response.error || 'Failed to load analytics');
|
|
}
|
|
} catch (error) {
|
|
console.error('Analytics error:', error);
|
|
this.showMessage('Failed to load analytics: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
showAnalyticsModal(analytics) {
|
|
// Create a simple analytics modal
|
|
const modal = document.createElement('div');
|
|
modal.className = 'modal-overlay';
|
|
modal.innerHTML = `
|
|
<div class="modal-content" style="max-width: 800px;">
|
|
<div class="modal-header">
|
|
<h2>Campaign Analytics</h2>
|
|
<button class="modal-close">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="analytics-grid">
|
|
<div class="analytics-stat">
|
|
<h3>${analytics.totalEmails}</h3>
|
|
<p>Total Emails</p>
|
|
</div>
|
|
<div class="analytics-stat">
|
|
<h3>${analytics.smtpEmails}</h3>
|
|
<p>SMTP Emails</p>
|
|
</div>
|
|
<div class="analytics-stat">
|
|
<h3>${analytics.mailtoClicks}</h3>
|
|
<p>Mailto Clicks</p>
|
|
</div>
|
|
<div class="analytics-stat">
|
|
<h3>${analytics.successfulEmails}</h3>
|
|
<p>Successful</p>
|
|
</div>
|
|
</div>
|
|
${Object.keys(analytics.byLevel).length > 0 ? `
|
|
<h3>By Government Level</h3>
|
|
<div class="level-stats">
|
|
${Object.entries(analytics.byLevel).map(([level, count]) =>
|
|
`<div class="level-stat"><strong>${level}:</strong> ${count}</div>`
|
|
).join('')}
|
|
</div>
|
|
` : ''}
|
|
${analytics.recentEmails.length > 0 ? `
|
|
<h3>Recent Activity</h3>
|
|
<div class="recent-activity">
|
|
${analytics.recentEmails.slice(0, 5).map(email => `
|
|
<div class="activity-item">
|
|
<strong>${email.user_name || 'Anonymous'}</strong>
|
|
→ ${email.recipient_name} (${email.recipient_level})
|
|
<span class="timestamp">${this.formatDate(email.timestamp)}</span>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(modal);
|
|
|
|
// Close modal handlers
|
|
modal.querySelector('.modal-close').addEventListener('click', () => {
|
|
document.body.removeChild(modal);
|
|
});
|
|
|
|
modal.addEventListener('click', (e) => {
|
|
if (e.target === modal) {
|
|
document.body.removeChild(modal);
|
|
}
|
|
});
|
|
}
|
|
|
|
updateGovernmentLevelsPreview() {
|
|
const checkboxes = document.querySelectorAll('input[name="target_government_levels"]:checked');
|
|
const levels = Array.from(checkboxes).map(cb => cb.value);
|
|
|
|
// Could update a preview somewhere if needed
|
|
console.log('Selected government levels:', levels);
|
|
}
|
|
|
|
handleSettingsChange(checkbox) {
|
|
// Handle real-time settings changes if needed
|
|
console.log(`Setting ${checkbox.name} changed to:`, checkbox.checked);
|
|
}
|
|
|
|
showMessage(message, type = 'info') {
|
|
const container = document.getElementById('message-container');
|
|
container.className = `message-${type}`;
|
|
container.textContent = message;
|
|
container.classList.remove('hidden');
|
|
|
|
setTimeout(() => {
|
|
container.classList.add('hidden');
|
|
}, 5000);
|
|
}
|
|
|
|
escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
formatDate(dateString) {
|
|
if (!dateString) return 'N/A';
|
|
|
|
try {
|
|
return new Date(dateString).toLocaleDateString('en-CA', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
} catch (error) {
|
|
return dateString;
|
|
}
|
|
}
|
|
|
|
// User Management Methods
|
|
async loadUsers() {
|
|
const loadingDiv = document.getElementById('users-loading');
|
|
const listDiv = document.getElementById('users-list');
|
|
|
|
loadingDiv.classList.remove('hidden');
|
|
listDiv.innerHTML = '';
|
|
|
|
try {
|
|
const response = await window.apiClient.get('/admin/users');
|
|
|
|
if (response.success) {
|
|
this.users = response.users;
|
|
this.renderUserList();
|
|
} else {
|
|
throw new Error(response.error || 'Failed to load users');
|
|
}
|
|
} catch (error) {
|
|
console.error('Load users error:', error);
|
|
this.showMessage('Failed to load users: ' + error.message, 'error');
|
|
} finally {
|
|
loadingDiv.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
renderUserList() {
|
|
const listDiv = document.getElementById('users-list');
|
|
|
|
if (this.users.length === 0) {
|
|
listDiv.innerHTML = `
|
|
<div class="empty-state">
|
|
<h3>No users yet</h3>
|
|
<p>Create your first user to get started.</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
// Add email all users button at the top
|
|
listDiv.innerHTML = `
|
|
<div style="margin-bottom: 2rem; text-align: center;">
|
|
<button class="btn btn-secondary" data-action="email-all-users">📧 Email All Users</button>
|
|
</div>
|
|
`;
|
|
|
|
const userCards = this.users.map(user => {
|
|
const isExpired = user.userType === 'temp' && user.ExpiresAt && new Date(user.ExpiresAt) < new Date();
|
|
const userTypeClass = isExpired ? 'expired' : (user.userType || 'user');
|
|
|
|
return `
|
|
<div class="user-card" data-user-id="${user.Id || user.id}">
|
|
<div class="user-header">
|
|
<div class="user-info">
|
|
<h4>${this.escapeHtml(user.Name || user.name || 'No Name')}</h4>
|
|
<p>${this.escapeHtml(user.Email || user.email)}</p>
|
|
${user.Phone || user.phone ? `<p>📞 ${this.escapeHtml(user.Phone || user.phone)}</p>` : ''}
|
|
${user.ExpiresAt ? `<p>⏰ Expires: ${this.formatDate(user.ExpiresAt)}</p>` : ''}
|
|
${user['Last Login'] ? `<p>🕒 Last Login: ${this.formatDate(user['Last Login'])}</p>` : ''}
|
|
</div>
|
|
<div class="user-badges">
|
|
<span class="user-badge ${userTypeClass}">
|
|
${isExpired ? 'EXPIRED' : (user.Admin || user.admin ? 'ADMIN' : userTypeClass.toUpperCase())}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="user-actions">
|
|
<button class="btn btn-secondary btn-small" data-action="send-login-details" data-user-id="${user.Id || user.id}">
|
|
📧 Send Login Details
|
|
</button>
|
|
${user.Id !== this.authManager?.user?.id ? `
|
|
<button class="btn btn-danger btn-small" data-action="delete-user" data-user-id="${user.Id || user.id}">
|
|
🗑️ Delete
|
|
</button>
|
|
` : '<span class="btn btn-secondary btn-small" style="opacity: 0.5;">Current User</span>'}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
listDiv.innerHTML += userCards;
|
|
}
|
|
|
|
showUserModal() {
|
|
const modal = document.getElementById('user-modal');
|
|
const form = document.getElementById('user-form');
|
|
|
|
form.reset();
|
|
document.getElementById('user-modal-title').textContent = 'Add New User';
|
|
modal.classList.remove('hidden');
|
|
}
|
|
|
|
hideUserModal() {
|
|
const modal = document.getElementById('user-modal');
|
|
modal.classList.add('hidden');
|
|
}
|
|
|
|
showEmailModal() {
|
|
const modal = document.getElementById('email-modal');
|
|
const form = document.getElementById('email-form');
|
|
|
|
form.reset();
|
|
modal.classList.remove('hidden');
|
|
}
|
|
|
|
hideEmailModal() {
|
|
const modal = document.getElementById('email-modal');
|
|
modal.classList.add('hidden');
|
|
}
|
|
|
|
handleUserTypeChange(userType) {
|
|
const tempOptions = document.getElementById('temp-user-options');
|
|
if (tempOptions) {
|
|
tempOptions.style.display = userType === 'temp' ? 'block' : 'none';
|
|
}
|
|
}
|
|
|
|
async handleCreateUser(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(e.target);
|
|
const userData = {
|
|
email: formData.get('email'),
|
|
password: formData.get('password'),
|
|
name: formData.get('name'),
|
|
phone: formData.get('phone'),
|
|
userType: formData.get('userType'),
|
|
isAdmin: formData.get('isAdmin') === 'on' || formData.get('userType') === 'admin',
|
|
expireDays: formData.get('userType') === 'temp' ? parseInt(formData.get('expireDays')) : undefined
|
|
};
|
|
|
|
try {
|
|
const response = await window.apiClient.post('/admin/users', userData);
|
|
|
|
if (response.success) {
|
|
this.showMessage('User created successfully!', 'success');
|
|
this.hideUserModal();
|
|
this.loadUsers();
|
|
} else {
|
|
throw new Error(response.error || 'Failed to create user');
|
|
}
|
|
} catch (error) {
|
|
console.error('Create user error:', error);
|
|
this.showMessage('Failed to create user: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
async deleteUser(userId) {
|
|
const user = this.users.find(u => (u.Id || u.id) == userId);
|
|
if (!user) return;
|
|
|
|
if (!confirm(`Are you sure you want to delete the user "${user.Email || user.email}"? This action cannot be undone.`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await window.apiClient.makeRequest(`/admin/users/${userId}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (response.success) {
|
|
this.showMessage('User deleted successfully!', 'success');
|
|
this.loadUsers();
|
|
} else {
|
|
throw new Error(response.error || 'Failed to delete user');
|
|
}
|
|
} catch (error) {
|
|
console.error('Delete user error:', error);
|
|
this.showMessage('Failed to delete user: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
async sendLoginDetails(userId) {
|
|
try {
|
|
const response = await window.apiClient.post(`/admin/users/${userId}/send-login-details`);
|
|
|
|
if (response.success) {
|
|
this.showMessage('Login details sent successfully!', 'success');
|
|
} else {
|
|
throw new Error(response.error || 'Failed to send login details');
|
|
}
|
|
} catch (error) {
|
|
console.error('Send login details error:', error);
|
|
this.showMessage('Failed to send login details: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
async handleEmailAllUsers(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(e.target);
|
|
const emailData = {
|
|
subject: formData.get('subject'),
|
|
content: formData.get('content')
|
|
};
|
|
|
|
try {
|
|
const response = await window.apiClient.post('/admin/users/email-all', emailData);
|
|
|
|
if (response.success) {
|
|
this.showMessage(`Email sent successfully! ${response.results.successful.length} sent, ${response.results.failed.length} failed.`, 'success');
|
|
this.hideEmailModal();
|
|
} else {
|
|
throw new Error(response.error || 'Failed to send emails');
|
|
}
|
|
} catch (error) {
|
|
console.error('Email all users error:', error);
|
|
this.showMessage('Failed to send emails: ' + error.message, 'error');
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initialize admin panel when DOM is loaded
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
window.adminPanel = new AdminPanel();
|
|
await window.adminPanel.init();
|
|
}); |