new maps admin feature

map/app/public/admin.html

@@ -32,7 +32,7 @@
                 <h2>Settings</h2>
                 <nav class="admin-nav">
                     <a href="#start-location" class="active">Start Location</a>
-                    <!-- Future menu items can go here -->
+                    <a href="#walk-sheet">Walk Sheet</a>
                 </nav>
             </div>
 
@@ -76,6 +76,104 @@
                         </div>
                     </div>
                 </section>
+
+                <!-- Walk Sheet Section -->
+                <section id="walk-sheet" class="admin-section" style="display: none;">
+                    <h2>Walk Sheet Configuration</h2>
+                    <p>Design and configure printable walk sheets for door-to-door canvassing.</p>
+                    
+                    <div class="walk-sheet-container">
+                        <div class="walk-sheet-config">
+                            <h3>Sheet Information</h3>
+                            
+                            <div class="form-group">
+                                <label for="walk-sheet-title">Sheet Title</label>
+                                <input type="text" id="walk-sheet-title" placeholder="Campaign Walk Sheet">
+                            </div>
+                            
+                            <div class="form-group">
+                                <label for="walk-sheet-subtitle">Subtitle</label>
+                                <input type="text" id="walk-sheet-subtitle" placeholder="Door-to-Door Canvassing Form">
+                            </div>
+                            
+                            <div class="form-group">
+                                <label for="walk-sheet-footer">Footer Text</label>
+                                <textarea id="walk-sheet-footer" rows="3" placeholder="Contact info, legal text, etc."></textarea>
+                            </div>
+                            
+                            <h3>QR Codes</h3>
+                            <p class="help-text-inline">Add up to 3 QR codes for quick access to digital resources.</p>
+                            
+                            <!-- QR Code 1 -->
+                            <div class="qr-code-group">
+                                <h4>QR Code 1</h4>
+                                <div class="form-row">
+                                    <div class="form-group">
+                                        <label for="qr-code-1-url">URL</label>
+                                        <input type="url" id="qr-code-1-url" placeholder="https://example.com/signup">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="qr-code-1-label">Label</label>
+                                        <input type="text" id="qr-code-1-label" placeholder="Sign Up">
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <!-- QR Code 2 -->
+                            <div class="qr-code-group">
+                                <h4>QR Code 2</h4>
+                                <div class="form-row">
+                                    <div class="form-group">
+                                        <label for="qr-code-2-url">URL</label>
+                                        <input type="url" id="qr-code-2-url" placeholder="https://example.com/donate">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="qr-code-2-label">Label</label>
+                                        <input type="text" id="qr-code-2-label" placeholder="Donate">
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <!-- QR Code 3 -->
+                            <div class="qr-code-group">
+                                <h4>QR Code 3</h4>
+                                <div class="form-row">
+                                    <div class="form-group">
+                                        <label for="qr-code-3-url">URL</label>
+                                        <input type="url" id="qr-code-3-url" placeholder="https://example.com/volunteer">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="qr-code-3-label">Label</label>
+                                        <input type="text" id="qr-code-3-label" placeholder="Volunteer">
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="form-actions">
+                                <button id="save-walk-sheet" class="btn btn-primary">
+                                    Save Configuration
+                                </button>
+                                <button id="preview-walk-sheet" class="btn btn-secondary">
+                                    Preview Sheet
+                                </button>
+                                <button id="print-walk-sheet" class="btn btn-secondary">
+                                    🖨️ Print Sheet
+                                </button>
+                            </div>
+                        </div>
+                        
+                        <div class="walk-sheet-preview">
+                            <h3>Preview</h3>
+                            <div class="preview-controls">
+                                <button id="refresh-preview" class="btn btn-sm btn-secondary">Refresh</button>
+                                <span class="preview-info">8.5" x 11" format</span>
+                            </div>
+                            <div id="walk-sheet-preview-content" class="walk-sheet-page">
+                                <!-- Preview content will be generated here -->
+                            </div>
+                        </div>
+                    </div>
+                </section>
             </div>
         </div>
 
@@ -88,6 +186,9 @@
             integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" 
             crossorigin=""></script>
     
+    <!-- QR Code Library -->
+    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
+    
     <!-- Admin JavaScript -->
     <script src="js/admin.js"></script>
 </body>

map/app/public/css/admin.css

@@ -228,7 +228,271 @@
     }
 }
 
+/* Walk Sheet Styles */
+.walk-sheet-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+    margin-top: 20px;
+}
+
+.walk-sheet-config {
+    background-color: #f9f9f9;
+    padding: 20px;
+    border-radius: var(--border-radius);
+}
+
+.walk-sheet-config h3 {
+    font-size: 16px;
+    margin-bottom: 15px;
+    color: var(--dark-color);
+}
+
+.qr-code-group {
+    background-color: white;
+    padding: 15px;
+    border-radius: var(--border-radius);
+    margin-bottom: 15px;
+    border: 1px solid #e0e0e0;
+    position: relative;
+}
+
+.qr-code-group h4 {
+    font-size: 14px;
+    margin-bottom: 10px;
+    color: #666;
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 10px;
+}
+
+.help-text-inline {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 15px;
+}
+
+/* Walk Sheet Preview */
+.walk-sheet-preview {
+    background-color: #f5f5f5;
+    padding: 20px;
+    border-radius: var(--border-radius);
+}
+
+.walk-sheet-preview h3 {
+    font-size: 16px;
+    margin-bottom: 10px;
+    color: var(--dark-color);
+}
+
+.preview-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.preview-info {
+    font-size: 12px;
+    color: #666;
+}
+
+/* Walk Sheet Page (8.5 x 11 preview) */
+.walk-sheet-page {
+    width: 100%;
+    max-width: 425px; /* Half of 8.5 inches at 100dpi */
+    aspect-ratio: 8.5 / 11;
+    background: white;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    padding: 20px;
+    margin: 0 auto;
+    overflow: auto;
+    font-size: 10px;
+    line-height: 1.4;
+    position: relative;
+}
+
+/* Walk Sheet Print Styles */
+@media print {
+    body * {
+        visibility: hidden;
+    }
+    
+    .walk-sheet-page, .walk-sheet-page * {
+        visibility: visible;
+    }
+    
+    .walk-sheet-page {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 8.5in;
+        height: 11in;
+        max-width: none;
+        padding: 0.5in;
+        margin: 0;
+        box-shadow: none;
+        font-size: 12pt;
+    }
+}
+
+/* Walk Sheet Content Styles */
+.ws-header {
+    text-align: center;
+    margin-bottom: 20px;
+    border-bottom: 2px solid #333;
+    padding-bottom: 10px;
+}
+
+.ws-title {
+    font-size: 18px;
+    font-weight: bold;
+    margin: 0;
+}
+
+.ws-subtitle {
+    font-size: 14px;
+    color: #666;
+    margin: 5px 0 0 0;
+}
+
+.ws-qr-section {
+    display: flex;
+    justify-content: space-around;
+    margin: 20px 0;
+    padding: 15px;
+    background-color: #f9f9f9;
+    border-radius: 5px;
+}
+
+.ws-qr-item {
+    text-align: center;
+}
+
+.ws-qr-code {
+    margin-bottom: 5px;
+}
+
+.ws-qr-code img {
+    display: block;
+    margin: 0 auto;
+    image-rendering: crisp-edges;
+    image-rendering: -webkit-crisp-edges;
+    image-rendering: pixelated;
+    image-rendering: -moz-crisp-edges;
+}
+
+.ws-qr-label {
+    font-size: 10px;
+    font-weight: bold;
+}
+
+.ws-form-section {
+    margin-top: 20px;
+}
+
+.ws-form-row {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    margin-bottom: 10px;
+}
+
+.ws-form-group {
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 5px;
+}
+
+.ws-form-label {
+    font-size: 9px;
+    color: #666;
+    display: block;
+    margin-bottom: 2px;
+}
+
+.ws-form-field {
+    height: 20px;
+    background-color: #f9f9f9;
+}
+
+.ws-notes-section {
+    margin-top: 20px;
+}
+
+.ws-notes-label {
+    font-size: 10px;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.ws-notes-area {
+    width: 100%;
+    height: 60px;
+    border: 1px solid #ccc;
+    background-color: #f9f9f9;
+}
+
+.ws-footer {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    right: 20px;
+    text-align: center;
+    font-size: 9px;
+    color: #666;
+    padding-top: 10px;
+    border-top: 1px solid #ccc;
+}
+
+/* QR Code Generation Status */
+.qr-code-group.generating::after {
+    content: 'Generating QR Code...';
+    position: absolute;
+    top: 0;
+    right: 0;
+    font-size: 12px;
+    color: var(--primary-color);
+    background: white;
+    padding: 2px 8px;
+    border-radius: 3px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+/* Loading state for save button */
+.btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+/* QR code stored indicator */
+.qr-status {
+    font-size: 12px;
+    color: var(--success-color);
+    margin-top: 5px;
+}
+
+.qr-status.stored {
+    color: var(--success-color);
+}
+
+.qr-status.pending {
+    color: var(--warning-color);
+}
+
 /* Responsive */
+@media (max-width: 1200px) {
+    .walk-sheet-container {
+        grid-template-columns: 1fr;
+    }
+    
+    .walk-sheet-preview {
+        order: -1;
+    }
+}
+
 @media (max-width: 768px) {
     .admin-container {
         flex-direction: column;
@@ -255,6 +519,15 @@
     .admin-section {
         padding: 20px;
     }
+    
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+    
+    .walk-sheet-page {
+        font-size: 8px;
+        padding: 15px;
+    }
 }
 
 /* CSS Variables (define these in style.css if not already defined) */

map/app/public/js/admin.js

@@ -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);
+    };
+}