admin/changemaker.lite
1
0
Fork 0
Code Issues Packages Projects Releases 35 Wiki Activity

new maps admin feature

Browse Source
This commit is contained in:
admin
2025-07-05 16:01:39 -06:00
parent b47e44bdeb
commit 153498f0fe
9 changed files with 1529 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

318
map/app/public/js/admin.js
View File

@@ -1,6 +1,7 @@
// Admin panel JavaScript
let adminMap = null;
let startMarker = null;
let storedQRCodes = {};
// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
@@ -8,6 +9,8 @@ document.addEventListener('DOMContentLoaded', () => {
initializeAdminMap();
loadCurrentStartLocation();
setupEventListeners();
setupNavigation();
loadWalkSheetConfig();
});
// Check if user is authenticated as admin
@@ -144,6 +147,38 @@ function setupEventListeners() {
document.getElementById('start-lat').addEventListener('change', updateMapFromInputs);
document.getElementById('start-lng').addEventListener('change', updateMapFromInputs);
document.getElementById('start-zoom').addEventListener('change', updateMapFromInputs);
// Walk Sheet buttons
document.getElementById('save-walk-sheet').addEventListener('click', saveWalkSheetConfig);
document.getElementById('preview-walk-sheet').addEventListener('click', generateWalkSheetPreview);
document.getElementById('print-walk-sheet').addEventListener('click', printWalkSheet);
document.getElementById('refresh-preview').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 => {
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`);
let previousUrl = urlInput.value;
urlInput.addEventListener('change', () => {
if (urlInput.value !== previousUrl) {
// URL changed, clear stored QR code
delete storedQRCodes[i];
previousUrl = urlInput.value;
}
});
}
}
// Update map from input fields
@@ -207,6 +242,276 @@ async function saveStartLocation() {
}
}
// 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');
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[i] = 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 url = document.getElementById(`qr-code-${i}-url`).value;
const label = document.getElementById(`qr-code-${i}-label`).value;
if (url) {
// Check if we have a stored QR code image
if (storedQRCodes[i] && storedQRCodes[i].url) {
// Use stored QR code image
qrCodesHTML.push(`
<div class="ws-qr-item">
<div class="ws-qr-code">
<img src="${storedQRCodes[i].url}" alt="QR Code ${i}" style="width: 80px; height: 80px;">
</div>
<div class="ws-qr-label">${escapeHtml(label) || `QR Code ${i}`}</div>
</div>
`);
} else {
// Generate QR code client-side as fallback
qrCodesHTML.push(`
<div class="ws-qr-item">
<div class="ws-qr-code" id="preview-qr-${i}"></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 ☐ Yes ☐ No</label>
<div class="ws-form-field"></div>
</div>
</div>
<div class="ws-form-row">
<div class="ws-form-group">
<label class="ws-form-label">Category</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>
`;
// Update preview
const previewContent = document.getElementById('walk-sheet-preview-content');
previewContent.innerHTML = previewHTML;
// Add footer (positioned absolutely in CSS)
if (footer) {
const footerDiv = document.createElement('div');
footerDiv.className = 'ws-footer';
footerDiv.innerHTML = escapeHtml(footer);
previewContent.appendChild(footerDiv);
}
// Generate client-side QR codes for items without stored images
setTimeout(() => {
for (let i = 1; i <= 3; i++) {
const url = document.getElementById(`qr-code-${i}-url`).value;
if (url && !storedQRCodes[i]) {
const qrContainer = document.getElementById(`preview-qr-${i}`);
if (qrContainer && typeof QRCode !== 'undefined') {
qrContainer.innerHTML = '';
new QRCode(qrContainer, {
text: url,
width: 80,
height: 80,
correctLevel: QRCode.CorrectLevel.M
});
}
}
}
}, 100);
}
// Print walk sheet
function printWalkSheet() {
// First generate fresh preview
generateWalkSheetPreview();
// Wait for QR codes to generate
setTimeout(() => {
window.print();
}, 500);
}
// Setup navigation between 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();
const targetId = link.getAttribute('href').substring(1);
// Update active states
navLinks.forEach(l => l.classList.remove('active'));
link.classList.add('active');
// Show/hide sections
sections.forEach(section => {
section.style.display = section.id === targetId ? 'block' : 'none';
});
});
});
}
// 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.config) {
// Populate form fields
document.getElementById('walk-sheet-title').value = data.config.walk_sheet_title || '';
document.getElementById('walk-sheet-subtitle').value = data.config.walk_sheet_subtitle || '';
document.getElementById('walk-sheet-footer').value = data.config.walk_sheet_footer || '';
// QR codes
for (let i = 1; i <= 3; i++) {
document.getElementById(`qr-code-${i}-url`).value = data.config[`qr_code_${i}_url`] || '';
document.getElementById(`qr-code-${i}-label`).value = data.config[`qr_code_${i}_label`] || '';
// Store QR code image data if available
if (data.config[`qr_code_${i}_image`]) {
storedQRCodes[i] = data.config[`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?')) {
@@ -257,3 +562,16 @@ function escapeHtml(text) {
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);
};
}