636 lines
25 KiB
Plaintext
636 lines
25 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Campaign Admin Panel - Alberta Influence Tool</title>
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
<style>
|
|
/* Admin-specific styles */
|
|
.admin-header {
|
|
background: #2c3e50;
|
|
color: white;
|
|
padding: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.admin-nav {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.admin-nav button {
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
background: #34495e;
|
|
color: white;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.admin-nav button.active {
|
|
background: #3498db;
|
|
}
|
|
|
|
.campaign-list {
|
|
display: grid;
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.campaign-card {
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
background: #f9f9f9;
|
|
}
|
|
|
|
.campaign-card h3 {
|
|
margin: 0 0 0.5rem 0;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.campaign-status {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 12px;
|
|
font-size: 0.8rem;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.status-active { background: #d4edda; color: #155724; }
|
|
.status-draft { background: #fff3cd; color: #856404; }
|
|
.status-paused { background: #f8d7da; color: #721c24; }
|
|
.status-archived { background: #e2e3e5; color: #383d41; }
|
|
|
|
.campaign-actions {
|
|
margin-top: 1rem;
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.campaign-actions button {
|
|
padding: 0.25rem 0.5rem;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.btn-edit { background: #3498db; color: white; }
|
|
.btn-view { background: #95a5a6; color: white; }
|
|
.btn-analytics { background: #f39c12; color: white; }
|
|
.btn-delete { background: #e74c3c; color: white; }
|
|
|
|
.campaign-form {
|
|
background: white;
|
|
padding: 2rem;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.form-row {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.form-row .form-group {
|
|
flex: 1;
|
|
}
|
|
|
|
.checkbox-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.checkbox-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.analytics-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.analytics-card {
|
|
background: white;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.analytics-number {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: #3498db;
|
|
}
|
|
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.modal-content {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: white;
|
|
padding: 2rem;
|
|
border-radius: 8px;
|
|
max-width: 90%;
|
|
max-height: 90%;
|
|
overflow-y: auto;
|
|
width: 600px;
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="admin-header">
|
|
<h1>Campaign Admin Panel</h1>
|
|
<p>Manage your influence campaigns and track engagement</p>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<nav class="admin-nav">
|
|
<button class="nav-btn active" data-tab="campaigns">Campaigns</button>
|
|
<button class="nav-btn" data-tab="create">Create Campaign</button>
|
|
<button class="nav-btn" data-tab="analytics">Analytics</button>
|
|
</nav>
|
|
|
|
<!-- Success/Error Messages -->
|
|
<div id="message-container" class="hidden"></div>
|
|
|
|
<!-- Campaigns Tab -->
|
|
<div id="campaigns-tab" class="tab-content active">
|
|
<div class="form-row" style="align-items: center; margin-bottom: 2rem;">
|
|
<h2 style="margin: 0;">Active Campaigns</h2>
|
|
<button class="btn btn-primary" data-action="create-campaign">Create New Campaign</button>
|
|
</div>
|
|
|
|
<div id="campaigns-loading" class="loading hidden">
|
|
<div class="spinner"></div>
|
|
<p>Loading campaigns...</p>
|
|
</div>
|
|
|
|
<div id="campaigns-list" class="campaign-list">
|
|
<!-- Campaigns will be loaded here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create Campaign Tab -->
|
|
<div id="create-tab" class="tab-content">
|
|
<h2 id="form-title">Create New Campaign</h2>
|
|
|
|
<form id="campaign-form" class="campaign-form">
|
|
<input type="hidden" id="campaign-id" name="id">
|
|
|
|
<div class="form-group">
|
|
<label for="title">Campaign Title *</label>
|
|
<input type="text" id="title" name="title" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="description">Description</label>
|
|
<textarea id="description" name="description" rows="3" placeholder="Brief description of the campaign purpose"></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="call_to_action">Call to Action</label>
|
|
<textarea id="call_to_action" name="call_to_action" rows="2" placeholder="Motivational text to encourage participation"></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email_subject">Email Subject *</label>
|
|
<input type="text" id="email_subject" name="email_subject" required placeholder="Subject line for the email to representatives">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email_body">Email Body *</label>
|
|
<textarea id="email_body" name="email_body" rows="8" required placeholder="The message that will be sent to representatives"></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Target Government Levels</label>
|
|
<div class="checkbox-group">
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="federal" name="target_government_levels" value="Federal" checked>
|
|
<label for="federal">Federal MPs</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="provincial" name="target_government_levels" value="Provincial" checked>
|
|
<label for="provincial">Provincial MLAs</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="municipal" name="target_government_levels" value="Municipal" checked>
|
|
<label for="municipal">Municipal Officials</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="school" name="target_government_levels" value="School Board">
|
|
<label for="school">School Board</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Campaign Settings</label>
|
|
<div class="checkbox-group">
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="allow_smtp_email" name="allow_smtp_email" checked>
|
|
<label for="allow_smtp_email">Allow SMTP Email Sending</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="allow_mailto_link" name="allow_mailto_link" checked>
|
|
<label for="allow_mailto_link">Allow Mailto Links</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="collect_user_info" name="collect_user_info" checked>
|
|
<label for="collect_user_info">Collect User Information</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="show_email_count" name="show_email_count" checked>
|
|
<label for="show_email_count">Show Email Count on Campaign Page</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="status">Status</label>
|
|
<select id="status" name="status">
|
|
<option value="draft">Draft</option>
|
|
<option value="active">Active</option>
|
|
<option value="paused">Paused</option>
|
|
<option value="archived">Archived</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary">Save Campaign</button>
|
|
<button type="button" class="btn btn-secondary" onclick="resetForm()">Reset</button>
|
|
<button type="button" class="btn btn-secondary" onclick="switchTab('campaigns')">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Analytics Tab -->
|
|
<div id="analytics-tab" class="tab-content">
|
|
<h2>Campaign Analytics</h2>
|
|
|
|
<div id="analytics-loading" class="loading hidden">
|
|
<div class="spinner"></div>
|
|
<p>Loading analytics...</p>
|
|
</div>
|
|
|
|
<div id="analytics-content">
|
|
<!-- Analytics will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Campaign Analytics Modal -->
|
|
<div id="analytics-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
|
|
<h2 id="analytics-modal-title">Campaign Analytics</h2>
|
|
<button onclick="closeAnalyticsModal()" style="background: none; border: none; font-size: 1.5rem; cursor: pointer;">×</button>
|
|
</div>
|
|
<div id="analytics-modal-content">
|
|
<!-- Analytics content will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/api-client.js"></script>
|
|
<script src="js/admin.js"></script>
|
|
</body>
|
|
</html>
|
|
constructor() {
|
|
this.currentCampaign = null;
|
|
this.campaigns = [];
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
// Tab navigation
|
|
document.querySelectorAll('.nav-btn').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
const tab = e.target.dataset.tab;
|
|
this.switchTab(tab);
|
|
});
|
|
});
|
|
|
|
// Form submission
|
|
document.getElementById('campaign-form').addEventListener('submit', (e) => {
|
|
this.handleFormSubmit(e);
|
|
});
|
|
|
|
// Load campaigns on init
|
|
this.loadCampaigns();
|
|
}
|
|
|
|
switchTab(tab) {
|
|
// Update nav buttons
|
|
document.querySelectorAll('.nav-btn').forEach(btn => {
|
|
btn.classList.remove('active');
|
|
});
|
|
document.querySelector(`[data-tab="${tab}"]`).classList.add('active');
|
|
|
|
// Show/hide tab content
|
|
document.querySelectorAll('.tab-content').forEach(content => {
|
|
content.classList.remove('active');
|
|
});
|
|
document.getElementById(`${tab}-tab`).classList.add('active');
|
|
|
|
// Load data for specific tabs
|
|
if (tab === 'campaigns') {
|
|
this.loadCampaigns();
|
|
} else if (tab === 'analytics') {
|
|
this.loadOverallAnalytics();
|
|
}
|
|
}
|
|
|
|
async loadCampaigns() {
|
|
const loading = document.getElementById('campaigns-loading');
|
|
const list = document.getElementById('campaigns-list');
|
|
|
|
loading.classList.remove('hidden');
|
|
|
|
try {
|
|
const response = await window.apiClient.get('/admin/campaigns');
|
|
this.campaigns = response.campaigns || [];
|
|
this.renderCampaigns();
|
|
} catch (error) {
|
|
this.showMessage('Failed to load campaigns: ' + error.message, 'error');
|
|
} finally {
|
|
loading.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
renderCampaigns() {
|
|
const list = document.getElementById('campaigns-list');
|
|
|
|
if (this.campaigns.length === 0) {
|
|
list.innerHTML = '<p>No campaigns found. <a href="#" onclick="adminPanel.switchTab(\'create\')">Create your first campaign</a></p>';
|
|
return;
|
|
}
|
|
|
|
list.innerHTML = this.campaigns.map(campaign => `
|
|
<div class="campaign-card">
|
|
<div style="display: flex; justify-content: space-between; align-items: start;">
|
|
<div>
|
|
<h3>${campaign.title}</h3>
|
|
<p>${campaign.description || 'No description'}</p>
|
|
<div style="margin: 0.5rem 0;">
|
|
<span class="campaign-status status-${campaign.status}">${campaign.status}</span>
|
|
<span style="margin-left: 1rem; color: #666;">
|
|
📧 ${campaign.emailCount || 0} emails sent
|
|
</span>
|
|
</div>
|
|
<p style="color: #666; font-size: 0.9rem;">
|
|
Campaign URL: <code>/campaign/${campaign.slug}</code>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="campaign-actions">
|
|
<button class="btn-edit" onclick="adminPanel.editCampaign(${campaign.id})">Edit</button>
|
|
<button class="btn-view" onclick="window.open('/campaign/${campaign.slug}', '_blank')">View</button>
|
|
<button class="btn-analytics" onclick="adminPanel.showCampaignAnalytics(${campaign.id})">Analytics</button>
|
|
<button class="btn-delete" onclick="adminPanel.deleteCampaign(${campaign.id})">Delete</button>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
async editCampaign(id) {
|
|
try {
|
|
const response = await window.apiClient.get(`/admin/campaigns/${id}`);
|
|
const campaign = response.campaign;
|
|
|
|
this.currentCampaign = campaign;
|
|
this.populateForm(campaign);
|
|
this.switchTab('create');
|
|
document.getElementById('form-title').textContent = 'Edit Campaign';
|
|
} catch (error) {
|
|
this.showMessage('Failed to load campaign: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
populateForm(campaign) {
|
|
document.getElementById('campaign-id').value = campaign.id;
|
|
document.getElementById('title').value = campaign.title;
|
|
document.getElementById('description').value = campaign.description || '';
|
|
document.getElementById('call_to_action').value = campaign.call_to_action || '';
|
|
document.getElementById('email_subject').value = campaign.email_subject;
|
|
document.getElementById('email_body').value = campaign.email_body;
|
|
document.getElementById('status').value = campaign.status;
|
|
|
|
// Handle checkboxes
|
|
document.getElementById('allow_smtp_email').checked = campaign.allow_smtp_email;
|
|
document.getElementById('allow_mailto_link').checked = campaign.allow_mailto_link;
|
|
document.getElementById('collect_user_info').checked = campaign.collect_user_info;
|
|
document.getElementById('show_email_count').checked = campaign.show_email_count;
|
|
|
|
// Handle target levels
|
|
document.querySelectorAll('input[name="target_government_levels"]').forEach(cb => cb.checked = false);
|
|
if (campaign.target_government_levels) {
|
|
const levels = campaign.target_government_levels.split(',');
|
|
levels.forEach(level => {
|
|
const checkbox = document.querySelector(`input[name="target_government_levels"][value="${level.trim()}"]`);
|
|
if (checkbox) checkbox.checked = true;
|
|
});
|
|
}
|
|
}
|
|
|
|
async handleFormSubmit(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(e.target);
|
|
const data = {};
|
|
|
|
// Handle regular fields
|
|
for (let [key, value] of formData.entries()) {
|
|
if (key !== 'target_government_levels') {
|
|
data[key] = value;
|
|
}
|
|
}
|
|
|
|
// Handle checkboxes
|
|
data.allow_smtp_email = document.getElementById('allow_smtp_email').checked;
|
|
data.allow_mailto_link = document.getElementById('allow_mailto_link').checked;
|
|
data.collect_user_info = document.getElementById('collect_user_info').checked;
|
|
data.show_email_count = document.getElementById('show_email_count').checked;
|
|
|
|
// Handle target government levels
|
|
const selectedLevels = [];
|
|
document.querySelectorAll('input[name="target_government_levels"]:checked').forEach(cb => {
|
|
selectedLevels.push(cb.value);
|
|
});
|
|
data.target_government_levels = selectedLevels;
|
|
|
|
try {
|
|
const campaignId = document.getElementById('campaign-id').value;
|
|
let response;
|
|
|
|
if (campaignId) {
|
|
// Update existing campaign
|
|
response = await window.apiClient.makeRequest(`/api/admin/campaigns/${campaignId}`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify(data)
|
|
});
|
|
} else {
|
|
// Create new campaign
|
|
response = await window.apiClient.post('/admin/campaigns', data);
|
|
}
|
|
|
|
this.showMessage('Campaign saved successfully!', 'success');
|
|
this.resetForm();
|
|
this.switchTab('campaigns');
|
|
} catch (error) {
|
|
this.showMessage('Failed to save campaign: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
resetForm() {
|
|
document.getElementById('campaign-form').reset();
|
|
document.getElementById('campaign-id').value = '';
|
|
document.getElementById('form-title').textContent = 'Create New Campaign';
|
|
this.currentCampaign = null;
|
|
}
|
|
|
|
async deleteCampaign(id) {
|
|
if (!confirm('Are you sure you want to delete this campaign? This action cannot be undone.')) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await window.apiClient.makeRequest(`/api/admin/campaigns/${id}`, {
|
|
method: 'DELETE'
|
|
});
|
|
this.showMessage('Campaign deleted successfully!', 'success');
|
|
this.loadCampaigns();
|
|
} catch (error) {
|
|
this.showMessage('Failed to delete campaign: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
async showCampaignAnalytics(id) {
|
|
try {
|
|
const response = await window.apiClient.get(`/admin/campaigns/${id}/analytics`);
|
|
const analytics = response.analytics;
|
|
const campaign = this.campaigns.find(c => c.id === id);
|
|
|
|
document.getElementById('analytics-modal-title').textContent = `Analytics: ${campaign.title}`;
|
|
document.getElementById('analytics-modal-content').innerHTML = this.renderAnalytics(analytics);
|
|
document.getElementById('analytics-modal').style.display = 'block';
|
|
} catch (error) {
|
|
this.showMessage('Failed to load analytics: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
renderAnalytics(analytics) {
|
|
return `
|
|
<div class="analytics-grid">
|
|
<div class="analytics-card">
|
|
<div class="analytics-number">${analytics.totalEmails}</div>
|
|
<div>Total Emails</div>
|
|
</div>
|
|
<div class="analytics-card">
|
|
<div class="analytics-number">${analytics.smtpEmails}</div>
|
|
<div>SMTP Sent</div>
|
|
</div>
|
|
<div class="analytics-card">
|
|
<div class="analytics-number">${analytics.mailtoClicks}</div>
|
|
<div>Mailto Clicks</div>
|
|
</div>
|
|
<div class="analytics-card">
|
|
<div class="analytics-number">${analytics.successfulEmails}</div>
|
|
<div>Successful</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>By Government Level</h3>
|
|
<div class="analytics-grid">
|
|
${Object.entries(analytics.byLevel).map(([level, count]) => `
|
|
<div class="analytics-card">
|
|
<div class="analytics-number">${count}</div>
|
|
<div>${level}</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
|
|
<h3>Recent Activity</h3>
|
|
<div style="max-height: 300px; overflow-y: auto;">
|
|
${analytics.recentEmails.map(email => `
|
|
<div style="border-bottom: 1px solid #eee; padding: 0.5rem 0;">
|
|
<strong>${email.user_name || 'Anonymous'}</strong> →
|
|
<strong>${email.recipient_name}</strong> (${email.recipient_level})
|
|
<br>
|
|
<small>${email.timestamp} • ${email.email_method} • ${email.status}</small>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
showMessage(message, type) {
|
|
const container = document.getElementById('message-container');
|
|
container.innerHTML = `<div class="${type}-message">${message}</div>`;
|
|
container.classList.remove('hidden');
|
|
|
|
setTimeout(() => {
|
|
container.classList.add('hidden');
|
|
}, 5000);
|
|
}
|
|
}
|
|
|
|
// Global functions
|
|
function switchTab(tab) {
|
|
window.adminPanel.switchTab(tab);
|
|
}
|
|
|
|
function resetForm() {
|
|
window.adminPanel.resetForm();
|
|
}
|
|
|
|
function closeAnalyticsModal() {
|
|
document.getElementById('analytics-modal').style.display = 'none';
|
|
}
|
|
|
|
// Initialize admin panel
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
window.adminPanel = new AdminPanel();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |