1338 lines
56 KiB
JavaScript
1338 lines
56 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);
|
|
});
|
|
}
|
|
|
|
// Response status filter
|
|
const responseStatusSelect = document.getElementById('admin-response-status');
|
|
if (responseStatusSelect) {
|
|
responseStatusSelect.addEventListener('change', () => {
|
|
this.loadAdminResponses();
|
|
});
|
|
}
|
|
|
|
// Response campaign filter
|
|
const responseCampaignFilter = document.getElementById('admin-campaign-filter');
|
|
if (responseCampaignFilter) {
|
|
responseCampaignFilter.addEventListener('change', () => {
|
|
this.loadAdminResponses();
|
|
});
|
|
}
|
|
}
|
|
|
|
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 === 'responses') {
|
|
this.loadAdminResponses();
|
|
} 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');
|
|
campaignFormData.append('show_response_wall', formData.get('show_response_wall') === '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;
|
|
form.querySelector('[name="show_response_wall"]').checked = campaign.show_response_wall;
|
|
|
|
// 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');
|
|
updateFormData.append('show_response_wall', formData.get('show_response_wall') === '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');
|
|
}
|
|
}
|
|
|
|
// Response Moderation Functions
|
|
async loadAdminResponses() {
|
|
const status = document.getElementById('admin-response-status').value;
|
|
const campaignSlug = document.getElementById('admin-campaign-filter')?.value || '';
|
|
const container = document.getElementById('admin-responses-container');
|
|
const loading = document.getElementById('responses-loading');
|
|
|
|
// Populate campaign filter if not already done
|
|
await this.populateAdminCampaignFilter();
|
|
|
|
loading.classList.remove('hidden');
|
|
container.innerHTML = '';
|
|
|
|
try {
|
|
const params = new URLSearchParams({ status, limit: 100 });
|
|
|
|
if (campaignSlug) {
|
|
params.append('campaign_slug', campaignSlug);
|
|
}
|
|
|
|
const response = await window.apiClient.get(`/admin/responses?${params}`);
|
|
|
|
loading.classList.add('hidden');
|
|
|
|
if (response.success && response.responses.length > 0) {
|
|
this.renderAdminResponses(response.responses);
|
|
} else {
|
|
container.innerHTML = '<p style="text-align: center; color: #7f8c8d; padding: 2rem;">No responses found.</p>';
|
|
}
|
|
} catch (error) {
|
|
loading.classList.add('hidden');
|
|
console.error('Error loading responses:', error);
|
|
this.showMessage('Failed to load responses', 'error');
|
|
}
|
|
}
|
|
|
|
async populateAdminCampaignFilter() {
|
|
const filterSelect = document.getElementById('admin-campaign-filter');
|
|
if (!filterSelect || filterSelect.dataset.populated === 'true') return;
|
|
|
|
// Use already loaded campaigns or fetch them
|
|
if (this.campaigns.length === 0) {
|
|
await this.loadCampaigns();
|
|
}
|
|
|
|
// Clear existing options except the first one
|
|
filterSelect.innerHTML = '<option value="">All Campaigns</option>';
|
|
|
|
// Add campaign options
|
|
this.campaigns.forEach(campaign => {
|
|
const option = document.createElement('option');
|
|
option.value = campaign.slug;
|
|
option.textContent = campaign.title;
|
|
filterSelect.appendChild(option);
|
|
});
|
|
|
|
filterSelect.dataset.populated = 'true';
|
|
}
|
|
|
|
renderAdminResponses(responses) {
|
|
const container = document.getElementById('admin-responses-container');
|
|
|
|
console.log('Rendering admin responses:', responses.length, 'responses');
|
|
if (responses.length > 0) {
|
|
console.log('First response sample:', responses[0]);
|
|
}
|
|
|
|
container.innerHTML = responses.map(response => {
|
|
const createdDate = new Date(response.created_at).toLocaleString();
|
|
const statusClass = {
|
|
'pending': 'warning',
|
|
'approved': 'success',
|
|
'rejected': 'danger'
|
|
}[response.status] || 'secondary';
|
|
|
|
return `
|
|
<div class="response-admin-card" style="background: white; border: 1px solid #ddd; border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem;">
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
|
|
<div>
|
|
<h4 style="margin: 0 0 0.5rem 0;">${this.escapeHtml(response.representative_name)}</h4>
|
|
<div style="color: #7f8c8d; font-size: 0.9rem;">
|
|
<span>${this.escapeHtml(response.representative_level)}</span> •
|
|
<span>${this.escapeHtml(response.response_type)}</span> •
|
|
<span>${createdDate}</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span class="badge badge-${statusClass}" style="padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.85rem;">
|
|
${response.status.toUpperCase()}
|
|
</span>
|
|
${response.is_verified ? '<span class="badge badge-success" style="padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.85rem; margin-left: 0.5rem;">✓ VERIFIED</span>' : ''}
|
|
</div>
|
|
</div>
|
|
|
|
<div style="background: #f8f9fa; padding: 1rem; border-left: 4px solid #3498db; border-radius: 4px; margin-bottom: 1rem;">
|
|
<strong>Response:</strong>
|
|
<p style="margin: 0.5rem 0 0 0; white-space: pre-wrap;">${this.escapeHtml(response.response_text)}</p>
|
|
</div>
|
|
|
|
${response.user_comment ? `
|
|
<div style="background: #fff3cd; padding: 0.75rem; border-left: 4px solid #ffc107; border-radius: 4px; margin-bottom: 1rem;">
|
|
<strong>User Comment:</strong>
|
|
<p style="margin: 0.5rem 0 0 0;">${this.escapeHtml(response.user_comment)}</p>
|
|
</div>
|
|
` : ''}
|
|
|
|
${response.screenshot_url ? `
|
|
<div style="margin-bottom: 1rem;">
|
|
<img src="${this.escapeHtml(response.screenshot_url)}" style="max-width: 300px; border-radius: 4px; border: 1px solid #ddd;" alt="Screenshot">
|
|
</div>
|
|
` : ''}
|
|
|
|
<div style="color: #7f8c8d; font-size: 0.9rem; margin-bottom: 1rem;">
|
|
<strong>Submitted by:</strong> ${response.is_anonymous ? 'Anonymous' : (this.escapeHtml(response.submitted_by_name) || this.escapeHtml(response.submitted_by_email) || 'Unknown')} •
|
|
<strong>Campaign:</strong> ${this.escapeHtml(response.campaign_slug)} •
|
|
<strong>Upvotes:</strong> ${response.upvote_count || 0}
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
|
${response.status === 'pending' ? `
|
|
<button class="btn btn-success btn-sm" data-action="approve-response" data-response-id="${response.id}">✓ Approve</button>
|
|
<button class="btn btn-danger btn-sm" data-action="reject-response" data-response-id="${response.id}">✗ Reject</button>
|
|
` : ''}
|
|
${response.status === 'approved' && !response.is_verified ? `
|
|
<button class="btn btn-primary btn-sm" data-action="verify-response" data-response-id="${response.id}" data-verified="true">Mark as Verified</button>
|
|
` : ''}
|
|
${response.status === 'approved' && response.is_verified ? `
|
|
<button class="btn btn-secondary btn-sm" data-action="verify-response" data-response-id="${response.id}" data-verified="false">Remove Verification</button>
|
|
` : ''}
|
|
${response.status === 'rejected' ? `
|
|
<button class="btn btn-success btn-sm" data-action="approve-response" data-response-id="${response.id}">✓ Approve</button>
|
|
` : ''}
|
|
${response.status === 'approved' ? `
|
|
<button class="btn btn-warning btn-sm" data-action="reject-response" data-response-id="${response.id}">Unpublish</button>
|
|
` : ''}
|
|
<button class="btn btn-danger btn-sm" data-action="delete-response" data-response-id="${response.id}">🗑 Delete</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
// Add event delegation for response actions
|
|
this.setupResponseActionListeners();
|
|
}
|
|
|
|
async approveResponse(id) {
|
|
await this.updateResponseStatus(id, 'approved');
|
|
}
|
|
|
|
async rejectResponse(id) {
|
|
await this.updateResponseStatus(id, 'rejected');
|
|
}
|
|
|
|
async updateResponseStatus(id, status) {
|
|
try {
|
|
const response = await window.apiClient.patch(`/admin/responses/${id}/status`, { status });
|
|
|
|
if (response.success) {
|
|
this.showMessage(`Response ${status} successfully!`, 'success');
|
|
this.loadAdminResponses();
|
|
} else {
|
|
throw new Error(response.error || 'Failed to update response status');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error updating response status:', error);
|
|
this.showMessage('Failed to update response status: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
async toggleVerified(id, isVerified) {
|
|
try {
|
|
const response = await window.apiClient.patch(`/admin/responses/${id}`, {
|
|
is_verified: isVerified
|
|
});
|
|
|
|
if (response.success) {
|
|
this.showMessage(isVerified ? 'Response marked as verified!' : 'Verification removed!', 'success');
|
|
this.loadAdminResponses();
|
|
} else {
|
|
throw new Error(response.error || 'Failed to update verification status');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error updating verification:', error);
|
|
this.showMessage('Failed to update verification: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
async deleteResponse(id) {
|
|
if (!confirm('Are you sure you want to delete this response? This action cannot be undone.')) return;
|
|
|
|
try {
|
|
const response = await window.apiClient.delete(`/admin/responses/${id}`);
|
|
|
|
if (response.success) {
|
|
this.showMessage('Response deleted successfully!', 'success');
|
|
this.loadAdminResponses();
|
|
} else {
|
|
throw new Error(response.error || 'Failed to delete response');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error deleting response:', error);
|
|
this.showMessage('Failed to delete response: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
setupResponseActionListeners() {
|
|
const container = document.getElementById('admin-responses-container');
|
|
if (!container) return;
|
|
|
|
// Remove old listener if exists to avoid duplicates
|
|
const oldListener = container._responseActionListener;
|
|
if (oldListener) {
|
|
container.removeEventListener('click', oldListener);
|
|
}
|
|
|
|
// Create new listener
|
|
const listener = (e) => {
|
|
const target = e.target;
|
|
const action = target.dataset.action;
|
|
const responseId = target.dataset.responseId;
|
|
|
|
console.log('Response action clicked:', { action, responseId, target });
|
|
|
|
if (!action || !responseId) {
|
|
console.log('Missing action or responseId, ignoring click');
|
|
return;
|
|
}
|
|
|
|
switch (action) {
|
|
case 'approve-response':
|
|
this.approveResponse(parseInt(responseId));
|
|
break;
|
|
case 'reject-response':
|
|
this.rejectResponse(parseInt(responseId));
|
|
break;
|
|
case 'verify-response':
|
|
const isVerified = target.dataset.verified === 'true';
|
|
this.toggleVerified(parseInt(responseId), isVerified);
|
|
break;
|
|
case 'delete-response':
|
|
this.deleteResponse(parseInt(responseId));
|
|
break;
|
|
}
|
|
};
|
|
|
|
// Store listener reference and add it
|
|
container._responseActionListener = listener;
|
|
container.addEventListener('click', listener);
|
|
}
|
|
|
|
escapeHtml(text) {
|
|
if (!text) return '';
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
}
|
|
|
|
// Initialize admin panel when DOM is loaded
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
window.adminPanel = new AdminPanel();
|
|
await window.adminPanel.init();
|
|
}); |