703 lines
24 KiB
JavaScript
703 lines
24 KiB
JavaScript
// Admin panel JavaScript
|
|
let adminMap = null;
|
|
let startMarker = null;
|
|
let storedQRCodes = {};
|
|
|
|
// Initialize when DOM is loaded
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
checkAdminAuth();
|
|
initializeAdminMap();
|
|
loadCurrentStartLocation();
|
|
setupEventListeners();
|
|
setupNavigation();
|
|
loadWalkSheetConfig();
|
|
});
|
|
|
|
// Check if user is authenticated as admin
|
|
async function checkAdminAuth() {
|
|
try {
|
|
const response = await fetch('/api/auth/check');
|
|
const data = await response.json();
|
|
|
|
if (!data.authenticated || !data.user?.isAdmin) {
|
|
window.location.href = '/login.html';
|
|
return;
|
|
}
|
|
|
|
// Display admin info
|
|
document.getElementById('admin-info').innerHTML = `
|
|
<span>👤 ${escapeHtml(data.user.email)}</span>
|
|
<button id="logout-btn" class="btn btn-secondary btn-sm">Logout</button>
|
|
`;
|
|
|
|
document.getElementById('logout-btn').addEventListener('click', handleLogout);
|
|
|
|
} catch (error) {
|
|
console.error('Auth check failed:', error);
|
|
window.location.href = '/login.html';
|
|
}
|
|
}
|
|
|
|
// Initialize the admin map
|
|
function initializeAdminMap() {
|
|
adminMap = L.map('admin-map').setView([53.5461, -113.4938], 11);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
maxZoom: 19,
|
|
minZoom: 2
|
|
}).addTo(adminMap);
|
|
|
|
// Add crosshair to center of map
|
|
const crosshairIcon = L.divIcon({
|
|
className: 'crosshair',
|
|
iconSize: [20, 20],
|
|
html: '<div style="width: 20px; height: 20px; position: relative;"><div style="position: absolute; top: 9px; left: 0; width: 20px; height: 2px; background: #333; box-shadow: 0 0 3px rgba(255,255,255,0.8);"></div><div style="position: absolute; top: 0; left: 9px; width: 2px; height: 20px; background: #333; box-shadow: 0 0 3px rgba(255,255,255,0.8);"></div></div>'
|
|
});
|
|
|
|
const crosshair = L.marker(adminMap.getCenter(), {
|
|
icon: crosshairIcon,
|
|
interactive: false,
|
|
zIndexOffset: 1000
|
|
}).addTo(adminMap);
|
|
|
|
// Update crosshair position when map moves
|
|
adminMap.on('move', function() {
|
|
crosshair.setLatLng(adminMap.getCenter());
|
|
});
|
|
|
|
// Add click handler to set location
|
|
adminMap.on('click', handleMapClick);
|
|
|
|
// Update coordinates when map moves
|
|
adminMap.on('moveend', updateCoordinatesFromMap);
|
|
}
|
|
|
|
// Load current start location
|
|
async function loadCurrentStartLocation() {
|
|
try {
|
|
const response = await fetch('/api/admin/start-location');
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
const { latitude, longitude, zoom } = data.location;
|
|
|
|
// Update form fields
|
|
document.getElementById('start-lat').value = latitude;
|
|
document.getElementById('start-lng').value = longitude;
|
|
document.getElementById('start-zoom').value = zoom;
|
|
|
|
// Update map
|
|
adminMap.setView([latitude, longitude], zoom);
|
|
updateStartMarker(latitude, longitude);
|
|
|
|
// Show source info
|
|
if (data.source) {
|
|
const sourceText = data.source === 'database' ? 'Loaded from database' :
|
|
data.source === 'environment' ? 'Using environment defaults' :
|
|
'Using system defaults';
|
|
showStatus(sourceText, 'info');
|
|
}
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Failed to load start location:', error);
|
|
showStatus('Failed to load current start location', 'error');
|
|
}
|
|
}
|
|
|
|
// Handle map click
|
|
function handleMapClick(e) {
|
|
const { lat, lng } = e.latlng;
|
|
|
|
document.getElementById('start-lat').value = lat.toFixed(6);
|
|
document.getElementById('start-lng').value = lng.toFixed(6);
|
|
|
|
updateStartMarker(lat, lng);
|
|
}
|
|
|
|
// Update marker position
|
|
function updateStartMarker(lat, lng) {
|
|
if (startMarker) {
|
|
startMarker.setLatLng([lat, lng]);
|
|
} else {
|
|
startMarker = L.marker([lat, lng], {
|
|
draggable: true,
|
|
title: 'Start Location'
|
|
}).addTo(adminMap);
|
|
|
|
// Update coordinates when marker is dragged
|
|
startMarker.on('dragend', (e) => {
|
|
const position = e.target.getLatLng();
|
|
document.getElementById('start-lat').value = position.lat.toFixed(6);
|
|
document.getElementById('start-lng').value = position.lng.toFixed(6);
|
|
});
|
|
}
|
|
}
|
|
|
|
// Update coordinates from current map view
|
|
function updateCoordinatesFromMap() {
|
|
const center = adminMap.getCenter();
|
|
const zoom = adminMap.getZoom();
|
|
|
|
document.getElementById('start-zoom').value = zoom;
|
|
}
|
|
|
|
// Setup event listeners
|
|
function setupEventListeners() {
|
|
// Use current view button
|
|
const useCurrentViewBtn = document.getElementById('use-current-view');
|
|
if (useCurrentViewBtn) {
|
|
useCurrentViewBtn.addEventListener('click', () => {
|
|
const center = adminMap.getCenter();
|
|
const zoom = adminMap.getZoom();
|
|
|
|
document.getElementById('start-lat').value = center.lat.toFixed(6);
|
|
document.getElementById('start-lng').value = center.lng.toFixed(6);
|
|
document.getElementById('start-zoom').value = zoom;
|
|
|
|
updateStartMarker(center.lat, center.lng);
|
|
showStatus('Captured current map view', 'success');
|
|
});
|
|
}
|
|
|
|
// Save button
|
|
const saveLocationBtn = document.getElementById('save-start-location');
|
|
if (saveLocationBtn) {
|
|
saveLocationBtn.addEventListener('click', saveStartLocation);
|
|
}
|
|
|
|
// Coordinate input changes
|
|
const startLatInput = document.getElementById('start-lat');
|
|
const startLngInput = document.getElementById('start-lng');
|
|
const startZoomInput = document.getElementById('start-zoom');
|
|
|
|
if (startLatInput) startLatInput.addEventListener('change', updateMapFromInputs);
|
|
if (startLngInput) startLngInput.addEventListener('change', updateMapFromInputs);
|
|
if (startZoomInput) startZoomInput.addEventListener('change', updateMapFromInputs);
|
|
|
|
// Walk Sheet buttons
|
|
const saveWalkSheetBtn = document.getElementById('save-walk-sheet');
|
|
const previewWalkSheetBtn = document.getElementById('preview-walk-sheet');
|
|
const printWalkSheetBtn = document.getElementById('print-walk-sheet');
|
|
const refreshPreviewBtn = document.getElementById('refresh-preview');
|
|
|
|
if (saveWalkSheetBtn) saveWalkSheetBtn.addEventListener('click', saveWalkSheetConfig);
|
|
if (previewWalkSheetBtn) previewWalkSheetBtn.addEventListener('click', generateWalkSheetPreview);
|
|
if (printWalkSheetBtn) printWalkSheetBtn.addEventListener('click', printWalkSheet);
|
|
if (refreshPreviewBtn) refreshPreviewBtn.addEventListener('click', generateWalkSheetPreview);
|
|
|
|
// Auto-update preview on input change
|
|
const walkSheetInputs = document.querySelectorAll(
|
|
'#walk-sheet-title, #walk-sheet-subtitle, #walk-sheet-footer, ' +
|
|
'[id^="qr-code-"][id$="-url"], [id^="qr-code-"][id$="-label"]'
|
|
);
|
|
|
|
walkSheetInputs.forEach(input => {
|
|
if (input) {
|
|
input.addEventListener('input', debounce(() => {
|
|
generateWalkSheetPreview();
|
|
}, 500));
|
|
}
|
|
});
|
|
|
|
// Add URL change listeners to detect when QR codes need regeneration
|
|
for (let i = 1; i <= 3; i++) {
|
|
const urlInput = document.getElementById(`qr-code-${i}-url`);
|
|
if (urlInput) {
|
|
let previousUrl = urlInput.value;
|
|
|
|
urlInput.addEventListener('change', () => {
|
|
if (urlInput.value !== previousUrl) {
|
|
// URL changed, clear stored QR code
|
|
delete storedQRCodes[i];
|
|
previousUrl = urlInput.value;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// Setup navigation between admin sections
|
|
function setupNavigation() {
|
|
const navLinks = document.querySelectorAll('.admin-nav a');
|
|
const sections = document.querySelectorAll('.admin-section');
|
|
|
|
navLinks.forEach(link => {
|
|
link.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
|
|
// Get target section ID
|
|
const targetId = link.getAttribute('href').substring(1);
|
|
|
|
// Hide all sections
|
|
sections.forEach(section => {
|
|
section.style.display = 'none';
|
|
});
|
|
|
|
// Show target section
|
|
const targetSection = document.getElementById(targetId);
|
|
if (targetSection) {
|
|
targetSection.style.display = 'block';
|
|
}
|
|
|
|
// Update active nav link
|
|
navLinks.forEach(navLink => {
|
|
navLink.classList.remove('active');
|
|
});
|
|
link.classList.add('active');
|
|
|
|
// If switching to walk sheet, generate preview
|
|
if (targetId === 'walk-sheet') {
|
|
generateWalkSheetPreview();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Update map from input fields
|
|
function updateMapFromInputs() {
|
|
const lat = parseFloat(document.getElementById('start-lat').value);
|
|
const lng = parseFloat(document.getElementById('start-lng').value);
|
|
const zoom = parseInt(document.getElementById('start-zoom').value);
|
|
|
|
if (!isNaN(lat) && !isNaN(lng) && !isNaN(zoom)) {
|
|
adminMap.setView([lat, lng], zoom);
|
|
updateStartMarker(lat, lng);
|
|
}
|
|
}
|
|
|
|
// Save start location
|
|
async function saveStartLocation() {
|
|
const lat = parseFloat(document.getElementById('start-lat').value);
|
|
const lng = parseFloat(document.getElementById('start-lng').value);
|
|
const zoom = parseInt(document.getElementById('start-zoom').value);
|
|
|
|
// Validate
|
|
if (isNaN(lat) || isNaN(lng) || isNaN(zoom)) {
|
|
showStatus('Please enter valid coordinates and zoom level', 'error');
|
|
return;
|
|
}
|
|
|
|
if (lat < -90 || lat > 90 || lng < -180 || lng > 180) {
|
|
showStatus('Coordinates out of valid range', 'error');
|
|
return;
|
|
}
|
|
|
|
if (zoom < 2 || zoom > 19) {
|
|
showStatus('Zoom level must be between 2 and 19', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/admin/start-location', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
latitude: lat,
|
|
longitude: lng,
|
|
zoom: zoom
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
showStatus('Start location saved successfully!', 'success');
|
|
} else {
|
|
throw new Error(data.error || 'Failed to save');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Save error:', error);
|
|
showStatus(error.message || 'Failed to save start location', 'error');
|
|
}
|
|
}
|
|
|
|
// Save walk sheet configuration
|
|
async function saveWalkSheetConfig() {
|
|
const config = {
|
|
walk_sheet_title: document.getElementById('walk-sheet-title')?.value || '',
|
|
walk_sheet_subtitle: document.getElementById('walk-sheet-subtitle')?.value || '',
|
|
walk_sheet_footer: document.getElementById('walk-sheet-footer')?.value || '',
|
|
qr_code_1_url: document.getElementById('qr-code-1-url')?.value || '',
|
|
qr_code_1_label: document.getElementById('qr-code-1-label')?.value || '',
|
|
qr_code_2_url: document.getElementById('qr-code-2-url')?.value || '',
|
|
qr_code_2_label: document.getElementById('qr-code-2-label')?.value || '',
|
|
qr_code_3_url: document.getElementById('qr-code-3-url')?.value || '',
|
|
qr_code_3_label: document.getElementById('qr-code-3-label')?.value || ''
|
|
};
|
|
|
|
// Show loading state
|
|
const saveButton = document.getElementById('save-walk-sheet');
|
|
if (!saveButton) {
|
|
showStatus('Save button not found', 'error');
|
|
return;
|
|
}
|
|
|
|
const originalText = saveButton.textContent;
|
|
saveButton.textContent = 'Saving...';
|
|
saveButton.disabled = true;
|
|
|
|
try {
|
|
const response = await fetch('/api/admin/walk-sheet-config', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(config)
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
showStatus('Walk sheet configuration saved successfully!', 'success');
|
|
|
|
// Update stored QR codes if new ones were generated
|
|
if (data.qrCodes) {
|
|
for (let i = 1; i <= 3; i++) {
|
|
if (data.qrCodes[`qr_code_${i}_image`]) {
|
|
storedQRCodes[`qr_code_${i}_image`] = data.qrCodes[`qr_code_${i}_image`];
|
|
}
|
|
}
|
|
}
|
|
|
|
// Refresh preview with new QR codes
|
|
generateWalkSheetPreview();
|
|
} else {
|
|
throw new Error(data.error || 'Failed to save');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Save error:', error);
|
|
showStatus(error.message || 'Failed to save walk sheet configuration', 'error');
|
|
} finally {
|
|
saveButton.textContent = originalText;
|
|
saveButton.disabled = false;
|
|
}
|
|
}
|
|
|
|
// Generate walk sheet preview
|
|
function generateWalkSheetPreview() {
|
|
const title = document.getElementById('walk-sheet-title')?.value || 'Campaign Walk Sheet';
|
|
const subtitle = document.getElementById('walk-sheet-subtitle')?.value || 'Door-to-Door Canvassing Form';
|
|
const footer = document.getElementById('walk-sheet-footer')?.value || 'Thank you for your support!';
|
|
|
|
let previewHTML = `
|
|
<div class="ws-header">
|
|
<h1 class="ws-title">${escapeHtml(title)}</h1>
|
|
<p class="ws-subtitle">${escapeHtml(subtitle)}</p>
|
|
</div>
|
|
`;
|
|
|
|
// Add QR codes section
|
|
const qrCodesHTML = [];
|
|
for (let i = 1; i <= 3; i++) {
|
|
const urlInput = document.getElementById(`qr-code-${i}-url`);
|
|
const labelInput = document.getElementById(`qr-code-${i}-label`);
|
|
|
|
const url = urlInput?.value || '';
|
|
const label = labelInput?.value || '';
|
|
|
|
if (url) {
|
|
qrCodesHTML.push(`
|
|
<div class="ws-qr-item">
|
|
<div class="ws-qr-code" id="preview-qr-${i}">
|
|
<!-- QR code will be inserted here -->
|
|
</div>
|
|
<div class="ws-qr-label">${escapeHtml(label || `QR Code ${i}`)}</div>
|
|
</div>
|
|
`);
|
|
}
|
|
}
|
|
|
|
if (qrCodesHTML.length > 0) {
|
|
previewHTML += `
|
|
<div class="ws-qr-section">
|
|
${qrCodesHTML.join('')}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Add form fields based on the main map form
|
|
previewHTML += `
|
|
<div class="ws-form-section">
|
|
<div class="ws-form-row">
|
|
<div class="ws-form-group">
|
|
<label class="ws-form-label">First Name</label>
|
|
<div class="ws-form-field"></div>
|
|
</div>
|
|
<div class="ws-form-group">
|
|
<label class="ws-form-label">Last Name</label>
|
|
<div class="ws-form-field"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ws-form-row">
|
|
<div class="ws-form-group">
|
|
<label class="ws-form-label">Email</label>
|
|
<div class="ws-form-field"></div>
|
|
</div>
|
|
<div class="ws-form-group">
|
|
<label class="ws-form-label">Phone</label>
|
|
<div class="ws-form-field"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ws-form-row">
|
|
<div class="ws-form-group">
|
|
<label class="ws-form-label">Address</label>
|
|
<div class="ws-form-field"></div>
|
|
</div>
|
|
<div class="ws-form-group">
|
|
<label class="ws-form-label">Unit Number</label>
|
|
<div class="ws-form-field"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ws-form-row">
|
|
<div class="ws-form-group">
|
|
<label class="ws-form-label">Support Level (1-4)</label>
|
|
<div class="ws-form-field"></div>
|
|
</div>
|
|
<div class="ws-form-group">
|
|
<label class="ws-form-label">Sign Request</label>
|
|
<div class="ws-form-field" style="display: flex; gap: 20px;">
|
|
<span>☐ Yes</span>
|
|
<span>☐ No</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ws-form-row">
|
|
<div class="ws-form-group">
|
|
<label class="ws-form-label">Sign Size</label>
|
|
<div class="ws-form-field"></div>
|
|
</div>
|
|
<div class="ws-form-group">
|
|
<label class="ws-form-label">Visited Date</label>
|
|
<div class="ws-form-field"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ws-notes-section">
|
|
<div class="ws-notes-label">Notes & Comments</div>
|
|
<div class="ws-notes-area"></div>
|
|
</div>
|
|
`;
|
|
|
|
// Add footer
|
|
if (footer) {
|
|
previewHTML += `
|
|
<div class="ws-footer">
|
|
${escapeHtml(footer)}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Update preview
|
|
const previewContent = document.getElementById('walk-sheet-preview-content');
|
|
if (previewContent) {
|
|
previewContent.innerHTML = previewHTML;
|
|
|
|
// Generate QR codes after DOM is updated
|
|
setTimeout(() => {
|
|
generatePreviewQRCodes();
|
|
}, 100);
|
|
} else {
|
|
console.warn('Walk sheet preview content container not found');
|
|
}
|
|
}
|
|
|
|
// Generate QR codes for preview
|
|
async function generatePreviewQRCodes() {
|
|
for (let i = 1; i <= 3; i++) {
|
|
const urlInput = document.getElementById(`qr-code-${i}-url`);
|
|
const url = urlInput?.value || '';
|
|
const qrContainer = document.getElementById(`preview-qr-${i}`);
|
|
|
|
if (url && qrContainer) {
|
|
try {
|
|
// Use our local QR code generation endpoint
|
|
const qrImageUrl = `/api/qr?text=${encodeURIComponent(url)}&size=100`;
|
|
qrContainer.innerHTML = `<img src="${qrImageUrl}" alt="QR Code ${i}" style="width: 100px; height: 100px;">`;
|
|
} catch (error) {
|
|
console.error(`Failed to display QR code ${i}:`, error);
|
|
qrContainer.innerHTML = '<div style="width: 100px; height: 100px; border: 1px dashed #ccc; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #999;">QR Error</div>';
|
|
}
|
|
} else if (qrContainer) {
|
|
// Clear empty QR containers
|
|
qrContainer.innerHTML = '';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Print walk sheet
|
|
function printWalkSheet() {
|
|
// First generate fresh preview to ensure QR codes are generated
|
|
generateWalkSheetPreview();
|
|
|
|
// Wait for QR codes to generate, then print
|
|
setTimeout(() => {
|
|
// Create a print-specific window
|
|
const printContent = document.getElementById('walk-sheet-preview-content').innerHTML;
|
|
const printWindow = window.open('', '_blank');
|
|
|
|
printWindow.document.write(`
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Walk Sheet - Print</title>
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
<link rel="stylesheet" href="/css/admin.css">
|
|
<style>
|
|
@media print {
|
|
@page {
|
|
size: letter;
|
|
margin: 0;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.walk-sheet-page {
|
|
width: 8.5in !important;
|
|
height: 11in !important;
|
|
padding: 0.5in !important;
|
|
margin: 0 !important;
|
|
box-shadow: none !important;
|
|
page-break-after: avoid !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="walk-sheet-page">
|
|
${printContent}
|
|
</div>
|
|
</body>
|
|
</html>
|
|
`);
|
|
|
|
printWindow.document.close();
|
|
|
|
// Wait for images to load
|
|
printWindow.onload = function() {
|
|
setTimeout(() => {
|
|
printWindow.print();
|
|
printWindow.close();
|
|
}, 250);
|
|
};
|
|
}, 500);
|
|
}
|
|
|
|
// Load walk sheet configuration
|
|
async function loadWalkSheetConfig() {
|
|
try {
|
|
const response = await fetch('/api/admin/walk-sheet-config');
|
|
const data = await response.json();
|
|
|
|
if (data.success && data.data) {
|
|
// Populate form fields
|
|
const titleInput = document.getElementById('walk-sheet-title');
|
|
const subtitleInput = document.getElementById('walk-sheet-subtitle');
|
|
const footerInput = document.getElementById('walk-sheet-footer');
|
|
|
|
if (titleInput) titleInput.value = data.data.walk_sheet_title || '';
|
|
if (subtitleInput) subtitleInput.value = data.data.walk_sheet_subtitle || '';
|
|
if (footerInput) footerInput.value = data.data.walk_sheet_footer || '';
|
|
|
|
// Store QR code images if they exist
|
|
for (let i = 1; i <= 3; i++) {
|
|
const urlField = document.getElementById(`qr-code-${i}-url`);
|
|
const labelField = document.getElementById(`qr-code-${i}-label`);
|
|
|
|
if (urlField && data.data[`qr_code_${i}_url`]) {
|
|
urlField.value = data.data[`qr_code_${i}_url`];
|
|
}
|
|
if (labelField && data.data[`qr_code_${i}_label`]) {
|
|
labelField.value = data.data[`qr_code_${i}_label`];
|
|
}
|
|
|
|
// Store the QR code image URL if it exists
|
|
if (data.data[`qr_code_${i}_image`]) {
|
|
storedQRCodes[`qr_code_${i}_image`] = data.data[`qr_code_${i}_image`];
|
|
}
|
|
}
|
|
|
|
// Generate preview
|
|
generateWalkSheetPreview();
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Failed to load walk sheet config:', error);
|
|
}
|
|
}
|
|
|
|
// Handle logout
|
|
async function handleLogout() {
|
|
if (!confirm('Are you sure you want to logout?')) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/auth/logout', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
window.location.href = '/login.html';
|
|
} else {
|
|
showStatus('Logout failed. Please try again.', 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Logout error:', error);
|
|
showStatus('Logout failed. Please try again.', 'error');
|
|
}
|
|
}
|
|
|
|
// Show status message
|
|
function showStatus(message, type = 'info') {
|
|
const container = document.getElementById('status-container');
|
|
|
|
const messageDiv = document.createElement('div');
|
|
messageDiv.className = `status-message ${type}`;
|
|
messageDiv.textContent = message;
|
|
|
|
container.appendChild(messageDiv);
|
|
|
|
// Auto-remove after 5 seconds
|
|
setTimeout(() => {
|
|
messageDiv.remove();
|
|
}, 5000);
|
|
}
|
|
|
|
// Escape HTML
|
|
function escapeHtml(text) {
|
|
if (text === null || text === undefined) {
|
|
return '';
|
|
}
|
|
const div = document.createElement('div');
|
|
div.textContent = String(text);
|
|
return div.innerHTML;
|
|
}
|
|
|
|
// Debounce function for input events
|
|
function debounce(func, wait) {
|
|
let timeout;
|
|
return function executedFunction(...args) {
|
|
const later = () => {
|
|
clearTimeout(timeout);
|
|
func(...args);
|
|
};
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(later, wait);
|
|
};
|
|
}
|