Added web front end
This commit is contained in:
James Pattinson
219
web/static/js/api.js
Normal file
219
web/static/js/api.js
Normal file
@@ -0,0 +1,219 @@
|
||||
/**
|
||||
* API Client for Mailing List Manager
|
||||
* Handles all communication with the FastAPI backend
|
||||
*/
|
||||
|
||||
class APIClient {
|
||||
constructor() {
|
||||
this.baseURL = this.getBaseURL();
|
||||
this.token = null;
|
||||
this.headers = {
|
||||
'Content-Type': 'application/json'
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the base URL for API calls
|
||||
* Automatically detects if running in container or development
|
||||
*/
|
||||
getBaseURL() {
|
||||
const protocol = window.location.protocol;
|
||||
const hostname = window.location.hostname;
|
||||
|
||||
// If running on localhost, assume development mode
|
||||
if (hostname === 'localhost' || hostname === '127.0.0.1') {
|
||||
return `${protocol}//${hostname}:8000`;
|
||||
}
|
||||
|
||||
// If running in production, assume API is on port 8000
|
||||
return `${protocol}//${hostname}:8000`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set authentication token
|
||||
*/
|
||||
setToken(token) {
|
||||
this.token = token;
|
||||
this.headers['Authorization'] = `Bearer ${token}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear authentication token
|
||||
*/
|
||||
clearToken() {
|
||||
this.token = null;
|
||||
delete this.headers['Authorization'];
|
||||
}
|
||||
|
||||
/**
|
||||
* Make HTTP request to API
|
||||
*/
|
||||
async request(endpoint, options = {}) {
|
||||
const url = `${this.baseURL}${endpoint}`;
|
||||
const config = {
|
||||
headers: { ...this.headers },
|
||||
...options
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(url, config);
|
||||
|
||||
// Handle different response types
|
||||
if (response.status === 204) {
|
||||
return null; // No content
|
||||
}
|
||||
|
||||
const contentType = response.headers.get('content-type');
|
||||
let data;
|
||||
|
||||
if (contentType && contentType.includes('application/json')) {
|
||||
data = await response.json();
|
||||
} else {
|
||||
data = await response.text();
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new APIError(
|
||||
data.detail || data || `HTTP ${response.status}`,
|
||||
response.status,
|
||||
data
|
||||
);
|
||||
}
|
||||
|
||||
return data;
|
||||
} catch (error) {
|
||||
if (error instanceof APIError) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
// Network or other errors
|
||||
throw new APIError(
|
||||
'Network error or API unavailable',
|
||||
0,
|
||||
{ originalError: error.message }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Health and authentication methods
|
||||
async checkHealth() {
|
||||
return this.request('/health');
|
||||
}
|
||||
|
||||
async testAuth() {
|
||||
return this.request('/');
|
||||
}
|
||||
|
||||
// Mailing Lists API
|
||||
async getLists() {
|
||||
return this.request('/lists');
|
||||
}
|
||||
|
||||
async getList(listId) {
|
||||
return this.request(`/lists/${listId}`);
|
||||
}
|
||||
|
||||
async createList(listData) {
|
||||
return this.request('/lists', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(listData)
|
||||
});
|
||||
}
|
||||
|
||||
async updateList(listId, listData) {
|
||||
return this.request(`/lists/${listId}`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify(listData)
|
||||
});
|
||||
}
|
||||
|
||||
async deleteList(listId) {
|
||||
return this.request(`/lists/${listId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
}
|
||||
|
||||
// Members API
|
||||
async getMembers() {
|
||||
return this.request('/members');
|
||||
}
|
||||
|
||||
async getMember(memberId) {
|
||||
return this.request(`/members/${memberId}`);
|
||||
}
|
||||
|
||||
async createMember(memberData) {
|
||||
return this.request('/members', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(memberData)
|
||||
});
|
||||
}
|
||||
|
||||
async updateMember(memberId, memberData) {
|
||||
return this.request(`/members/${memberId}`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify(memberData)
|
||||
});
|
||||
}
|
||||
|
||||
async deleteMember(memberId) {
|
||||
return this.request(`/members/${memberId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
}
|
||||
|
||||
// Subscriptions API
|
||||
async getListMembers(listId) {
|
||||
return this.request(`/lists/${listId}/members`);
|
||||
}
|
||||
|
||||
async createSubscription(subscriptionData) {
|
||||
return this.request('/subscriptions', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(subscriptionData)
|
||||
});
|
||||
}
|
||||
|
||||
async deleteSubscription(listEmail, memberEmail) {
|
||||
const params = new URLSearchParams({
|
||||
list_email: listEmail,
|
||||
member_email: memberEmail
|
||||
});
|
||||
|
||||
return this.request(`/subscriptions?${params}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom API Error class
|
||||
*/
|
||||
class APIError extends Error {
|
||||
constructor(message, status = 0, details = null) {
|
||||
super(message);
|
||||
this.name = 'APIError';
|
||||
this.status = status;
|
||||
this.details = details;
|
||||
}
|
||||
|
||||
isAuthError() {
|
||||
return this.status === 401;
|
||||
}
|
||||
|
||||
isNotFound() {
|
||||
return this.status === 404;
|
||||
}
|
||||
|
||||
isBadRequest() {
|
||||
return this.status === 400;
|
||||
}
|
||||
|
||||
isServerError() {
|
||||
return this.status >= 500;
|
||||
}
|
||||
}
|
||||
|
||||
// Create global API client instance
|
||||
window.apiClient = new APIClient();
|
||||
window.APIError = APIError;
|
||||
477
web/static/js/app.js
Normal file
477
web/static/js/app.js
Normal file
@@ -0,0 +1,477 @@
|
||||
/**
|
||||
* Main Application Controller
|
||||
* Handles authentication, data loading, and view rendering
|
||||
*/
|
||||
|
||||
class MailingListApp {
|
||||
constructor() {
|
||||
this.isAuthenticated = false;
|
||||
this.lists = [];
|
||||
this.members = [];
|
||||
this.subscriptions = new Map(); // list_id -> members[]
|
||||
|
||||
this.initializeApp();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the application
|
||||
*/
|
||||
async initializeApp() {
|
||||
this.setupEventListeners();
|
||||
|
||||
// Check for saved token
|
||||
const savedToken = localStorage.getItem('apiToken');
|
||||
if (savedToken) {
|
||||
await this.login(savedToken, false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup event listeners
|
||||
*/
|
||||
setupEventListeners() {
|
||||
// Login/logout
|
||||
document.getElementById('loginBtn').addEventListener('click', () => {
|
||||
this.handleLogin();
|
||||
});
|
||||
|
||||
document.getElementById('logoutBtn').addEventListener('click', () => {
|
||||
this.logout();
|
||||
});
|
||||
|
||||
// Enter key in token input
|
||||
document.getElementById('apiToken').addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
this.handleLogin();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle login button click
|
||||
*/
|
||||
async handleLogin() {
|
||||
const tokenInput = document.getElementById('apiToken');
|
||||
const token = tokenInput.value.trim();
|
||||
|
||||
if (!token) {
|
||||
uiManager.showNotification('Please enter an API token', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
await this.login(token, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Authenticate with API
|
||||
*/
|
||||
async login(token, saveToken = true) {
|
||||
try {
|
||||
uiManager.setLoading(true);
|
||||
|
||||
// Set token and test authentication
|
||||
apiClient.setToken(token);
|
||||
await apiClient.testAuth();
|
||||
|
||||
// Authentication successful
|
||||
this.isAuthenticated = true;
|
||||
|
||||
if (saveToken) {
|
||||
localStorage.setItem('apiToken', token);
|
||||
}
|
||||
|
||||
this.showAuthenticatedUI();
|
||||
await this.loadData();
|
||||
|
||||
uiManager.showNotification('Successfully connected to API', 'success');
|
||||
} catch (error) {
|
||||
this.isAuthenticated = false;
|
||||
apiClient.clearToken();
|
||||
|
||||
if (saveToken) {
|
||||
localStorage.removeItem('apiToken');
|
||||
}
|
||||
|
||||
uiManager.handleError(error, 'Authentication failed');
|
||||
} finally {
|
||||
uiManager.setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Logout
|
||||
*/
|
||||
logout() {
|
||||
this.isAuthenticated = false;
|
||||
apiClient.clearToken();
|
||||
localStorage.removeItem('apiToken');
|
||||
|
||||
this.showUnauthenticatedUI();
|
||||
uiManager.showNotification('Logged out successfully', 'info');
|
||||
}
|
||||
|
||||
/**
|
||||
* Show authenticated UI
|
||||
*/
|
||||
showAuthenticatedUI() {
|
||||
document.getElementById('authControls').style.display = 'none';
|
||||
document.getElementById('userInfo').style.display = 'flex';
|
||||
document.getElementById('mainContent').style.display = 'block';
|
||||
|
||||
// Clear token input
|
||||
document.getElementById('apiToken').value = '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Show unauthenticated UI
|
||||
*/
|
||||
showUnauthenticatedUI() {
|
||||
document.getElementById('authControls').style.display = 'flex';
|
||||
document.getElementById('userInfo').style.display = 'none';
|
||||
document.getElementById('mainContent').style.display = 'none';
|
||||
}
|
||||
|
||||
/**
|
||||
* Load all data from API
|
||||
*/
|
||||
async loadData() {
|
||||
if (!this.isAuthenticated) return;
|
||||
|
||||
try {
|
||||
uiManager.setLoading(true);
|
||||
|
||||
// Load lists and members in parallel
|
||||
const [lists, members] = await Promise.all([
|
||||
apiClient.getLists(),
|
||||
apiClient.getMembers()
|
||||
]);
|
||||
|
||||
this.lists = lists;
|
||||
this.members = members;
|
||||
|
||||
// Load subscriptions for each list
|
||||
await this.loadSubscriptions();
|
||||
|
||||
// Render all views
|
||||
this.renderLists();
|
||||
this.renderMembers();
|
||||
this.renderSubscriptions();
|
||||
|
||||
} catch (error) {
|
||||
uiManager.handleError(error, 'Failed to load data');
|
||||
} finally {
|
||||
uiManager.setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load subscription data for all lists
|
||||
*/
|
||||
async loadSubscriptions() {
|
||||
this.subscriptions.clear();
|
||||
|
||||
const subscriptionPromises = this.lists.map(async (list) => {
|
||||
try {
|
||||
const members = await apiClient.getListMembers(list.list_id);
|
||||
this.subscriptions.set(list.list_id, members);
|
||||
} catch (error) {
|
||||
console.warn(`Failed to load members for list ${list.list_id}:`, error);
|
||||
this.subscriptions.set(list.list_id, []);
|
||||
}
|
||||
});
|
||||
|
||||
await Promise.all(subscriptionPromises);
|
||||
}
|
||||
|
||||
/**
|
||||
* Render mailing lists table
|
||||
*/
|
||||
renderLists() {
|
||||
const tbody = document.getElementById('listsTableBody');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
if (this.lists.length === 0) {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="6" class="text-center text-muted">
|
||||
No mailing lists found. <a href="#" id="createFirstList">Create your first list</a>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
|
||||
document.getElementById('createFirstList').addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
uiManager.showListModal();
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.lists.forEach(list => {
|
||||
const row = document.createElement('tr');
|
||||
const memberCount = this.subscriptions.get(list.list_id)?.length || 0;
|
||||
|
||||
row.innerHTML = `
|
||||
<td>
|
||||
<div class="font-medium">${uiManager.escapeHtml(list.list_name)}</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="mailto:${list.list_email}" style="color: var(--primary-color)">
|
||||
${uiManager.escapeHtml(list.list_email)}
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-sm text-muted">
|
||||
${list.description ? uiManager.escapeHtml(list.description) : '<em>No description</em>'}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="font-medium">${memberCount}</span>
|
||||
${memberCount === 1 ? 'member' : 'members'}
|
||||
</td>
|
||||
<td></td>
|
||||
<td>
|
||||
<div class="action-buttons"></div>
|
||||
</td>
|
||||
`;
|
||||
|
||||
// Add status badge
|
||||
const statusCell = row.cells[4];
|
||||
statusCell.appendChild(uiManager.createStatusBadge(list.active));
|
||||
|
||||
// Add action buttons
|
||||
const actionsCell = row.cells[5].querySelector('.action-buttons');
|
||||
|
||||
const editBtn = uiManager.createActionButton('Edit', 'edit', 'btn-secondary', () => {
|
||||
uiManager.showListModal(list);
|
||||
});
|
||||
|
||||
const deleteBtn = uiManager.createActionButton('Delete', 'trash', 'btn-danger', () => {
|
||||
uiManager.showConfirmation(
|
||||
`Are you sure you want to delete the mailing list "${list.list_name}"? This action cannot be undone.`,
|
||||
async () => {
|
||||
await this.deleteList(list.list_id);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
actionsCell.appendChild(editBtn);
|
||||
actionsCell.appendChild(deleteBtn);
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Render members table
|
||||
*/
|
||||
renderMembers() {
|
||||
const tbody = document.getElementById('membersTableBody');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
if (this.members.length === 0) {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="5" class="text-center text-muted">
|
||||
No members found. <a href="#" id="createFirstMember">Add your first member</a>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
|
||||
document.getElementById('createFirstMember').addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
uiManager.showMemberModal();
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.members.forEach(member => {
|
||||
const row = document.createElement('tr');
|
||||
|
||||
// Find lists this member belongs to
|
||||
const memberLists = [];
|
||||
this.subscriptions.forEach((members, listId) => {
|
||||
if (members.some(m => m.member_id === member.member_id)) {
|
||||
const list = this.lists.find(l => l.list_id === listId);
|
||||
if (list) {
|
||||
memberLists.push(list.list_name);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
row.innerHTML = `
|
||||
<td>
|
||||
<div class="font-medium">${uiManager.escapeHtml(member.name)}</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="mailto:${member.email}" style="color: var(--primary-color)">
|
||||
${uiManager.escapeHtml(member.email)}
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-sm">
|
||||
${memberLists.length > 0
|
||||
? memberLists.map(name => `<span class="text-muted">${uiManager.escapeHtml(name)}</span>`).join(', ')
|
||||
: '<em class="text-muted">No subscriptions</em>'
|
||||
}
|
||||
</div>
|
||||
</td>
|
||||
<td></td>
|
||||
<td>
|
||||
<div class="action-buttons"></div>
|
||||
</td>
|
||||
`;
|
||||
|
||||
// Add status badge
|
||||
const statusCell = row.cells[3];
|
||||
statusCell.appendChild(uiManager.createStatusBadge(member.active));
|
||||
|
||||
// Add action buttons
|
||||
const actionsCell = row.cells[4].querySelector('.action-buttons');
|
||||
|
||||
const editBtn = uiManager.createActionButton('Edit', 'edit', 'btn-secondary', () => {
|
||||
uiManager.showMemberModal(member);
|
||||
});
|
||||
|
||||
const deleteBtn = uiManager.createActionButton('Delete', 'trash', 'btn-danger', () => {
|
||||
uiManager.showConfirmation(
|
||||
`Are you sure you want to delete the member "${member.name}"? This will remove them from all mailing lists.`,
|
||||
async () => {
|
||||
await this.deleteMember(member.member_id);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
actionsCell.appendChild(editBtn);
|
||||
actionsCell.appendChild(deleteBtn);
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Render subscriptions view
|
||||
*/
|
||||
renderSubscriptions() {
|
||||
const container = document.getElementById('subscriptionsGrid');
|
||||
container.innerHTML = '';
|
||||
|
||||
if (this.lists.length === 0) {
|
||||
container.innerHTML = `
|
||||
<div class="text-center text-muted">
|
||||
<p>No mailing lists available.</p>
|
||||
<button class="btn btn-primary mt-4" onclick="uiManager.switchTab('lists')">
|
||||
<i class="fas fa-plus"></i> Create Mailing List
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
this.lists.forEach(list => {
|
||||
const members = this.subscriptions.get(list.list_id) || [];
|
||||
const listCard = document.createElement('div');
|
||||
listCard.className = 'subscription-list';
|
||||
|
||||
listCard.innerHTML = `
|
||||
<div class="subscription-header">
|
||||
<h3>${uiManager.escapeHtml(list.list_name)}</h3>
|
||||
<p>${uiManager.escapeHtml(list.list_email)}</p>
|
||||
</div>
|
||||
<div class="subscription-members">
|
||||
<div class="members-list"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const membersList = listCard.querySelector('.members-list');
|
||||
|
||||
if (members.length === 0) {
|
||||
membersList.innerHTML = `
|
||||
<div class="text-center text-muted">
|
||||
<p>No members subscribed to this list.</p>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
members.forEach(member => {
|
||||
const memberItem = document.createElement('div');
|
||||
memberItem.className = 'member-item';
|
||||
|
||||
memberItem.innerHTML = `
|
||||
<div class="member-info">
|
||||
<div class="member-name">${uiManager.escapeHtml(member.name)}</div>
|
||||
<div class="member-email">${uiManager.escapeHtml(member.email)}</div>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-danger" title="Unsubscribe">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
`;
|
||||
|
||||
// Add unsubscribe functionality
|
||||
const unsubscribeBtn = memberItem.querySelector('.btn-danger');
|
||||
unsubscribeBtn.addEventListener('click', () => {
|
||||
uiManager.showConfirmation(
|
||||
`Unsubscribe ${member.name} from ${list.list_name}?`,
|
||||
async () => {
|
||||
await this.unsubscribeMember(list.list_email, member.email);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
membersList.appendChild(memberItem);
|
||||
});
|
||||
}
|
||||
|
||||
container.appendChild(listCard);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a mailing list
|
||||
*/
|
||||
async deleteList(listId) {
|
||||
try {
|
||||
uiManager.setLoading(true);
|
||||
await apiClient.deleteList(listId);
|
||||
uiManager.showNotification('Mailing list deleted successfully', 'success');
|
||||
await this.loadData();
|
||||
} catch (error) {
|
||||
uiManager.handleError(error, 'Failed to delete mailing list');
|
||||
} finally {
|
||||
uiManager.setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a member
|
||||
*/
|
||||
async deleteMember(memberId) {
|
||||
try {
|
||||
uiManager.setLoading(true);
|
||||
await apiClient.deleteMember(memberId);
|
||||
uiManager.showNotification('Member deleted successfully', 'success');
|
||||
await this.loadData();
|
||||
} catch (error) {
|
||||
uiManager.handleError(error, 'Failed to delete member');
|
||||
} finally {
|
||||
uiManager.setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Unsubscribe member from list
|
||||
*/
|
||||
async unsubscribeMember(listEmail, memberEmail) {
|
||||
try {
|
||||
uiManager.setLoading(true);
|
||||
await apiClient.deleteSubscription(listEmail, memberEmail);
|
||||
uiManager.showNotification('Member unsubscribed successfully', 'success');
|
||||
await this.loadData();
|
||||
} catch (error) {
|
||||
uiManager.handleError(error, 'Failed to unsubscribe member');
|
||||
} finally {
|
||||
uiManager.setLoading(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize the application when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
window.app = new MailingListApp();
|
||||
});
|
||||
462
web/static/js/ui.js
Normal file
462
web/static/js/ui.js
Normal file
@@ -0,0 +1,462 @@
|
||||
/**
|
||||
* UI Helper Functions and Components
|
||||
* Handles DOM manipulation, notifications, modals, and UI state
|
||||
*/
|
||||
|
||||
class UIManager {
|
||||
constructor() {
|
||||
this.currentTab = 'lists';
|
||||
this.currentEditingItem = null;
|
||||
this.isLoading = false;
|
||||
this.confirmCallback = null;
|
||||
|
||||
this.initializeEventListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize all event listeners
|
||||
*/
|
||||
initializeEventListeners() {
|
||||
// Tab navigation
|
||||
document.querySelectorAll('.tab-btn').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
this.switchTab(e.target.dataset.tab);
|
||||
});
|
||||
});
|
||||
|
||||
// Modal close buttons
|
||||
document.querySelectorAll('.modal-close, .modal .btn-secondary').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
this.closeModal(e.target.closest('.modal'));
|
||||
});
|
||||
});
|
||||
|
||||
// Click outside modal to close
|
||||
document.querySelectorAll('.modal').forEach(modal => {
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target === modal) {
|
||||
this.closeModal(modal);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Notification close
|
||||
document.getElementById('notificationClose').addEventListener('click', () => {
|
||||
this.hideNotification();
|
||||
});
|
||||
|
||||
// Add buttons
|
||||
document.getElementById('addListBtn').addEventListener('click', () => {
|
||||
this.showListModal();
|
||||
});
|
||||
|
||||
document.getElementById('addMemberBtn').addEventListener('click', () => {
|
||||
this.showMemberModal();
|
||||
});
|
||||
|
||||
document.getElementById('addSubscriptionBtn').addEventListener('click', () => {
|
||||
this.showSubscriptionModal();
|
||||
});
|
||||
|
||||
// Form submissions
|
||||
document.getElementById('listForm').addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
this.handleListFormSubmit();
|
||||
});
|
||||
|
||||
document.getElementById('memberForm').addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
this.handleMemberFormSubmit();
|
||||
});
|
||||
|
||||
document.getElementById('subscriptionForm').addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
this.handleSubscriptionFormSubmit();
|
||||
});
|
||||
|
||||
// Confirmation modal
|
||||
document.getElementById('confirmOkBtn').addEventListener('click', () => {
|
||||
if (this.confirmCallback) {
|
||||
this.confirmCallback();
|
||||
this.confirmCallback = null;
|
||||
}
|
||||
this.closeModal(document.getElementById('confirmModal'));
|
||||
});
|
||||
|
||||
document.getElementById('confirmCancelBtn').addEventListener('click', () => {
|
||||
this.confirmCallback = null;
|
||||
this.closeModal(document.getElementById('confirmModal'));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Show/hide loading overlay
|
||||
*/
|
||||
setLoading(loading) {
|
||||
this.isLoading = loading;
|
||||
const overlay = document.getElementById('loadingOverlay');
|
||||
if (loading) {
|
||||
overlay.style.display = 'flex';
|
||||
} else {
|
||||
overlay.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show notification
|
||||
*/
|
||||
showNotification(message, type = 'info') {
|
||||
const notification = document.getElementById('notification');
|
||||
const messageEl = document.getElementById('notificationMessage');
|
||||
|
||||
notification.className = `notification ${type}`;
|
||||
messageEl.textContent = message;
|
||||
notification.style.display = 'flex';
|
||||
|
||||
// Auto-hide after 5 seconds
|
||||
setTimeout(() => {
|
||||
this.hideNotification();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide notification
|
||||
*/
|
||||
hideNotification() {
|
||||
document.getElementById('notification').style.display = 'none';
|
||||
}
|
||||
|
||||
/**
|
||||
* Show confirmation dialog
|
||||
*/
|
||||
showConfirmation(message, callback) {
|
||||
document.getElementById('confirmMessage').textContent = message;
|
||||
this.confirmCallback = callback;
|
||||
this.showModal(document.getElementById('confirmModal'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Switch between tabs
|
||||
*/
|
||||
switchTab(tabName) {
|
||||
this.currentTab = tabName;
|
||||
|
||||
// Update tab buttons
|
||||
document.querySelectorAll('.tab-btn').forEach(btn => {
|
||||
btn.classList.toggle('active', btn.dataset.tab === tabName);
|
||||
});
|
||||
|
||||
// Update tab content
|
||||
document.querySelectorAll('.tab-content').forEach(content => {
|
||||
content.classList.toggle('active', content.id === `${tabName}-tab`);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Show modal
|
||||
*/
|
||||
showModal(modal) {
|
||||
modal.classList.add('active');
|
||||
// Focus first input
|
||||
const firstInput = modal.querySelector('input, select, textarea');
|
||||
if (firstInput) {
|
||||
setTimeout(() => firstInput.focus(), 100);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Close modal
|
||||
*/
|
||||
closeModal(modal) {
|
||||
modal.classList.remove('active');
|
||||
this.currentEditingItem = null;
|
||||
|
||||
// Reset forms
|
||||
const form = modal.querySelector('form');
|
||||
if (form) {
|
||||
form.reset();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show list modal (add/edit)
|
||||
*/
|
||||
showListModal(listData = null) {
|
||||
const modal = document.getElementById('listModal');
|
||||
const title = document.getElementById('listModalTitle');
|
||||
const form = document.getElementById('listForm');
|
||||
|
||||
if (listData) {
|
||||
// Edit mode
|
||||
title.textContent = 'Edit Mailing List';
|
||||
document.getElementById('listName').value = listData.list_name;
|
||||
document.getElementById('listEmail').value = listData.list_email;
|
||||
document.getElementById('listDescription').value = listData.description || '';
|
||||
document.getElementById('listActive').checked = listData.active;
|
||||
this.currentEditingItem = listData;
|
||||
} else {
|
||||
// Add mode
|
||||
title.textContent = 'Add Mailing List';
|
||||
form.reset();
|
||||
document.getElementById('listActive').checked = true;
|
||||
this.currentEditingItem = null;
|
||||
}
|
||||
|
||||
this.showModal(modal);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show member modal (add/edit)
|
||||
*/
|
||||
showMemberModal(memberData = null) {
|
||||
const modal = document.getElementById('memberModal');
|
||||
const title = document.getElementById('memberModalTitle');
|
||||
const form = document.getElementById('memberForm');
|
||||
|
||||
if (memberData) {
|
||||
// Edit mode
|
||||
title.textContent = 'Edit Member';
|
||||
document.getElementById('memberName').value = memberData.name;
|
||||
document.getElementById('memberEmail').value = memberData.email;
|
||||
document.getElementById('memberActive').checked = memberData.active;
|
||||
this.currentEditingItem = memberData;
|
||||
} else {
|
||||
// Add mode
|
||||
title.textContent = 'Add Member';
|
||||
form.reset();
|
||||
document.getElementById('memberActive').checked = true;
|
||||
this.currentEditingItem = null;
|
||||
}
|
||||
|
||||
this.showModal(modal);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show subscription modal
|
||||
*/
|
||||
async showSubscriptionModal() {
|
||||
const modal = document.getElementById('subscriptionModal');
|
||||
|
||||
try {
|
||||
// Populate dropdowns
|
||||
await this.populateSubscriptionDropdowns();
|
||||
this.showModal(modal);
|
||||
} catch (error) {
|
||||
this.showNotification('Failed to load subscription data', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Populate subscription modal dropdowns
|
||||
*/
|
||||
async populateSubscriptionDropdowns() {
|
||||
const listSelect = document.getElementById('subscriptionList');
|
||||
const memberSelect = document.getElementById('subscriptionMember');
|
||||
|
||||
// Clear existing options
|
||||
listSelect.innerHTML = '<option value="">Select a list...</option>';
|
||||
memberSelect.innerHTML = '<option value="">Select a member...</option>';
|
||||
|
||||
try {
|
||||
const [lists, members] = await Promise.all([
|
||||
apiClient.getLists(),
|
||||
apiClient.getMembers()
|
||||
]);
|
||||
|
||||
// Populate lists
|
||||
lists.forEach(list => {
|
||||
if (list.active) {
|
||||
const option = document.createElement('option');
|
||||
option.value = list.list_email;
|
||||
option.textContent = `${list.list_name} (${list.list_email})`;
|
||||
listSelect.appendChild(option);
|
||||
}
|
||||
});
|
||||
|
||||
// Populate members
|
||||
members.forEach(member => {
|
||||
if (member.active) {
|
||||
const option = document.createElement('option');
|
||||
option.value = member.email;
|
||||
option.textContent = `${member.name} (${member.email})`;
|
||||
memberSelect.appendChild(option);
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle list form submission
|
||||
*/
|
||||
async handleListFormSubmit() {
|
||||
const form = document.getElementById('listForm');
|
||||
const formData = new FormData(form);
|
||||
|
||||
const listData = {
|
||||
list_name: formData.get('listName'),
|
||||
list_email: formData.get('listEmail'),
|
||||
description: formData.get('listDescription') || null,
|
||||
active: formData.get('listActive') === 'on'
|
||||
};
|
||||
|
||||
try {
|
||||
this.setLoading(true);
|
||||
|
||||
if (this.currentEditingItem) {
|
||||
// Update existing list
|
||||
await apiClient.updateList(this.currentEditingItem.list_id, listData);
|
||||
this.showNotification('Mailing list updated successfully', 'success');
|
||||
} else {
|
||||
// Create new list
|
||||
await apiClient.createList(listData);
|
||||
this.showNotification('Mailing list created successfully', 'success');
|
||||
}
|
||||
|
||||
this.closeModal(document.getElementById('listModal'));
|
||||
await window.app.loadData();
|
||||
} catch (error) {
|
||||
this.handleError(error, 'Failed to save mailing list');
|
||||
} finally {
|
||||
this.setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle member form submission
|
||||
*/
|
||||
async handleMemberFormSubmit() {
|
||||
const form = document.getElementById('memberForm');
|
||||
const formData = new FormData(form);
|
||||
|
||||
const memberData = {
|
||||
name: formData.get('memberName'),
|
||||
email: formData.get('memberEmail'),
|
||||
active: formData.get('memberActive') === 'on'
|
||||
};
|
||||
|
||||
try {
|
||||
this.setLoading(true);
|
||||
|
||||
if (this.currentEditingItem) {
|
||||
// Update existing member
|
||||
await apiClient.updateMember(this.currentEditingItem.member_id, memberData);
|
||||
this.showNotification('Member updated successfully', 'success');
|
||||
} else {
|
||||
// Create new member
|
||||
await apiClient.createMember(memberData);
|
||||
this.showNotification('Member created successfully', 'success');
|
||||
}
|
||||
|
||||
this.closeModal(document.getElementById('memberModal'));
|
||||
await window.app.loadData();
|
||||
} catch (error) {
|
||||
this.handleError(error, 'Failed to save member');
|
||||
} finally {
|
||||
this.setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle subscription form submission
|
||||
*/
|
||||
async handleSubscriptionFormSubmit() {
|
||||
const form = document.getElementById('subscriptionForm');
|
||||
const formData = new FormData(form);
|
||||
|
||||
const subscriptionData = {
|
||||
list_email: formData.get('subscriptionList'),
|
||||
member_email: formData.get('subscriptionMember'),
|
||||
active: true
|
||||
};
|
||||
|
||||
try {
|
||||
this.setLoading(true);
|
||||
|
||||
await apiClient.createSubscription(subscriptionData);
|
||||
this.showNotification('Subscription created successfully', 'success');
|
||||
|
||||
this.closeModal(document.getElementById('subscriptionModal'));
|
||||
await window.app.loadData();
|
||||
} catch (error) {
|
||||
this.handleError(error, 'Failed to create subscription');
|
||||
} finally {
|
||||
this.setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle API errors
|
||||
*/
|
||||
handleError(error, defaultMessage = 'An error occurred') {
|
||||
let message = defaultMessage;
|
||||
|
||||
if (error instanceof APIError) {
|
||||
if (error.isAuthError()) {
|
||||
message = 'Authentication failed. Please check your API token.';
|
||||
window.app.logout();
|
||||
} else if (error.isBadRequest()) {
|
||||
message = error.message || 'Invalid request data';
|
||||
} else if (error.isNotFound()) {
|
||||
message = 'Resource not found';
|
||||
} else if (error.isServerError()) {
|
||||
message = 'Server error. Please try again later.';
|
||||
} else {
|
||||
message = error.message || defaultMessage;
|
||||
}
|
||||
} else {
|
||||
message = error.message || defaultMessage;
|
||||
}
|
||||
|
||||
this.showNotification(message, 'error');
|
||||
console.error('Error:', error);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create action button
|
||||
*/
|
||||
createActionButton(text, icon, className, onClick) {
|
||||
const button = document.createElement('button');
|
||||
button.className = `btn btn-sm ${className}`;
|
||||
button.innerHTML = `<i class="fas fa-${icon}"></i> ${text}`;
|
||||
button.addEventListener('click', onClick);
|
||||
return button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create status badge
|
||||
*/
|
||||
createStatusBadge(active) {
|
||||
const badge = document.createElement('span');
|
||||
badge.className = `status-badge ${active ? 'active' : 'inactive'}`;
|
||||
badge.innerHTML = `
|
||||
<i class="fas fa-${active ? 'check' : 'times'}"></i>
|
||||
${active ? 'Active' : 'Inactive'}
|
||||
`;
|
||||
return badge;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format email as mailto link
|
||||
*/
|
||||
createEmailLink(email) {
|
||||
const link = document.createElement('a');
|
||||
link.href = `mailto:${email}`;
|
||||
link.textContent = email;
|
||||
link.style.color = 'var(--primary-color)';
|
||||
return link;
|
||||
}
|
||||
|
||||
/**
|
||||
* Escape HTML to prevent XSS
|
||||
*/
|
||||
escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
// Create global UI manager instance
|
||||
window.uiManager = new UIManager();
|
||||
Reference in New Issue
Block a user