472 lines
18 KiB
JavaScript
472 lines
18 KiB
JavaScript
/**
|
|
* Admin Walk Sheet Module
|
|
* Handles walk sheet configuration, preview generation, QR codes, and printing
|
|
*/
|
|
|
|
// Walk sheet state
|
|
let storedQRCodes = {};
|
|
|
|
// 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 || ''
|
|
};
|
|
|
|
console.log('Saving walk sheet config:', config);
|
|
|
|
// Show loading state
|
|
const saveButton = document.getElementById('save-walk-sheet');
|
|
if (!saveButton) {
|
|
window.adminCore.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();
|
|
console.log('Save response:', data);
|
|
|
|
if (data.success) {
|
|
window.adminCore.showStatus('Walk sheet configuration saved successfully!', 'success');
|
|
console.log('Configuration saved successfully');
|
|
// Don't reload config here - the form already has the latest values
|
|
// Just regenerate the preview
|
|
generateWalkSheetPreview();
|
|
} else {
|
|
throw new Error(data.error || 'Failed to save');
|
|
}
|
|
} catch (error) {
|
|
console.error('Save error:', error);
|
|
window.adminCore.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">${window.adminCore.escapeHtml(title)}</h1>
|
|
<p class="ws-subtitle">${window.adminCore.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">${window.adminCore.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</label>
|
|
<div class="ws-form-field circles">
|
|
<span class="ws-circle-option"><span class="ws-circle">1</span></span>
|
|
<span class="ws-circle-option"><span class="ws-circle">2</span></span>
|
|
<span class="ws-circle-option"><span class="ws-circle">3</span></span>
|
|
<span class="ws-circle-option"><span class="ws-circle">4</span></span>
|
|
</div>
|
|
</div>
|
|
<div class="ws-form-group">
|
|
<label class="ws-form-label">Sign Request</label>
|
|
<div class="ws-form-field circles">
|
|
<span class="ws-circle-option"><span class="ws-circle">Y</span> Yes</span>
|
|
<span class="ws-circle-option"><span class="ws-circle">N</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 circles">
|
|
<span class="ws-circle-option"><span class="ws-circle">R</span></span>
|
|
<span class="ws-circle-option"><span class="ws-circle">L</span></span>
|
|
<span class="ws-circle-option"><span class="ws-circle">U</span></span>
|
|
</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">
|
|
${window.adminCore.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 with size matching display
|
|
const qrImageUrl = `/api/qr?text=${encodeURIComponent(url)}&size=200`; // Generate at higher res
|
|
qrContainer.innerHTML = `<img src="${qrImageUrl}" alt="QR Code ${i}" style="width: 120px; height: 120px;">`; // Display smaller
|
|
} catch (error) {
|
|
console.error(`Failed to display QR code ${i}:`, error);
|
|
qrContainer.innerHTML = '<div style="width: 120px; height: 120px; border: 2px dashed #ccc; display: flex; align-items: center; justify-content: center; font-size: 14px; 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(() => {
|
|
const previewContent = document.getElementById('walk-sheet-preview-content');
|
|
if (!previewContent) return;
|
|
|
|
const clonedContent = previewContent.cloneNode(true);
|
|
|
|
// Convert canvas elements to images for printing
|
|
const canvases = previewContent.querySelectorAll('canvas');
|
|
const clonedCanvases = clonedContent.querySelectorAll('canvas');
|
|
|
|
canvases.forEach((canvas, index) => {
|
|
if (canvas && clonedCanvases[index]) {
|
|
const img = document.createElement('img');
|
|
img.src = canvas.toDataURL('image/png');
|
|
img.width = canvas.width;
|
|
img.height = canvas.height;
|
|
img.style.width = canvas.style.width || `${canvas.width}px`;
|
|
img.style.height = canvas.style.height || `${canvas.height}px`;
|
|
clonedCanvases[index].parentNode.replaceChild(img, clonedCanvases[index]);
|
|
}
|
|
});
|
|
|
|
// Create a print-specific window
|
|
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;
|
|
transform: none !important;
|
|
}
|
|
.ws-qr-code img {
|
|
width: 100px !important;
|
|
height: 100px !important;
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
}
|
|
@media screen {
|
|
body {
|
|
margin: 20px;
|
|
background: #f0f0f0;
|
|
}
|
|
.walk-sheet-page {
|
|
width: 8.5in;
|
|
height: 11in;
|
|
padding: 0.5in;
|
|
margin: 0 auto;
|
|
background: white;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="walk-sheet-page">
|
|
${clonedContent.innerHTML}
|
|
</div>
|
|
</body>
|
|
</html>
|
|
`);
|
|
|
|
printWindow.document.close();
|
|
|
|
printWindow.onload = function() {
|
|
setTimeout(() => {
|
|
printWindow.print();
|
|
// User can close manually after printing
|
|
}, 500);
|
|
};
|
|
}, 1000); // Give QR codes time to generate
|
|
}
|
|
|
|
// Load walk sheet configuration
|
|
async function loadWalkSheetConfig() {
|
|
try {
|
|
console.log('Loading walk sheet config...');
|
|
const response = await fetch('/api/admin/walk-sheet-config');
|
|
const data = await response.json();
|
|
|
|
console.log('Loaded walk sheet config:', data);
|
|
|
|
if (data.success) {
|
|
// The config object contains the actual configuration
|
|
const config = data.config || {};
|
|
|
|
console.log('Config object:', config);
|
|
|
|
// Populate form fields - use the exact field names from the backend
|
|
const titleInput = document.getElementById('walk-sheet-title');
|
|
const subtitleInput = document.getElementById('walk-sheet-subtitle');
|
|
const footerInput = document.getElementById('walk-sheet-footer');
|
|
|
|
console.log('Found form elements:', {
|
|
title: !!titleInput,
|
|
subtitle: !!subtitleInput,
|
|
footer: !!footerInput
|
|
});
|
|
|
|
if (titleInput) {
|
|
titleInput.value = config.walk_sheet_title || 'Campaign Walk Sheet';
|
|
console.log('Set title to:', titleInput.value);
|
|
}
|
|
if (subtitleInput) {
|
|
subtitleInput.value = config.walk_sheet_subtitle || 'Door-to-Door Canvassing Form';
|
|
console.log('Set subtitle to:', subtitleInput.value);
|
|
}
|
|
if (footerInput) {
|
|
footerInput.value = config.walk_sheet_footer || 'Thank you for your support!';
|
|
console.log('Set footer to:', footerInput.value);
|
|
}
|
|
|
|
// Populate QR code fields
|
|
for (let i = 1; i <= 3; i++) {
|
|
const urlField = document.getElementById(`qr-code-${i}-url`);
|
|
const labelField = document.getElementById(`qr-code-${i}-label`);
|
|
|
|
console.log(`QR ${i} fields found:`, {
|
|
url: !!urlField,
|
|
label: !!labelField
|
|
});
|
|
|
|
if (urlField) {
|
|
urlField.value = config[`qr_code_${i}_url`] || '';
|
|
console.log(`Set QR ${i} URL to:`, urlField.value);
|
|
}
|
|
if (labelField) {
|
|
labelField.value = config[`qr_code_${i}_label`] || '';
|
|
console.log(`Set QR ${i} label to:`, labelField.value);
|
|
}
|
|
}
|
|
|
|
return true;
|
|
} else {
|
|
console.error('Failed to load config:', data.error);
|
|
window.adminCore.showStatus('Failed to load walk sheet configuration', 'error');
|
|
return false;
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Failed to load walk sheet config:', error);
|
|
window.adminCore.showStatus('Failed to load walk sheet configuration', 'error');
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// Check if walk sheet section is visible and load config if needed
|
|
function checkAndLoadWalkSheetConfig() {
|
|
const walkSheetSection = document.getElementById('walk-sheet');
|
|
if (walkSheetSection && walkSheetSection.style.display !== 'none') {
|
|
console.log('Walk sheet section is visible, loading config...');
|
|
loadWalkSheetConfig().then((success) => {
|
|
if (success) {
|
|
generateWalkSheetPreview();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// Setup walk sheet event listeners
|
|
function setupWalkSheetEventListeners() {
|
|
// 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', window.adminCore.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', () => {
|
|
const currentUrl = urlInput.value;
|
|
if (currentUrl !== previousUrl) {
|
|
console.log(`QR Code ${i} URL changed from "${previousUrl}" to "${currentUrl}"`);
|
|
// Remove stored QR code so it gets regenerated
|
|
delete storedQRCodes[currentUrl];
|
|
previousUrl = currentUrl;
|
|
generateWalkSheetPreview();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// Export walk sheet functions
|
|
window.adminWalkSheet = {
|
|
saveWalkSheetConfig,
|
|
generateWalkSheetPreview,
|
|
printWalkSheet,
|
|
loadWalkSheetConfig,
|
|
checkAndLoadWalkSheetConfig,
|
|
setupWalkSheetEventListeners
|
|
};
|