feat: Add report templates API for CRUD operations and implement SLM settings modal

- Implemented a new API router for managing report templates, including endpoints for listing, creating, retrieving, updating, and deleting templates.
- Added a new HTML partial for a unified SLM settings modal, allowing users to configure SLM settings with dynamic modem selection and FTP credentials.
- Created a report preview page with an editable data table using jspreadsheet, enabling users to modify report details and download the report as an Excel file.

templates/rnd_viewer.html

@@ -454,42 +454,227 @@ function escapeHtml(str) {
 }
 
 // Report Generation Modal Functions
+let reportTemplates = [];
+
+async function loadTemplates() {
+    try {
+        const response = await fetch('/api/report-templates?project_id={{ project_id }}');
+        if (response.ok) {
+            reportTemplates = await response.json();
+            populateTemplateDropdown();
+        }
+    } catch (error) {
+        console.error('Error loading templates:', error);
+    }
+}
+
+function populateTemplateDropdown() {
+    const select = document.getElementById('template-select');
+    if (!select) return;
+
+    select.innerHTML = '<option value="">-- Select a template --</option>';
+    reportTemplates.forEach(template => {
+        const option = document.createElement('option');
+        option.value = template.id;
+        option.textContent = template.name;
+        option.dataset.config = JSON.stringify(template);
+        select.appendChild(option);
+    });
+}
+
+function applyTemplate() {
+    const select = document.getElementById('template-select');
+    const selectedOption = select.options[select.selectedIndex];
+
+    if (!selectedOption.value) return;
+
+    const template = JSON.parse(selectedOption.dataset.config);
+
+    if (template.report_title) {
+        document.getElementById('report-title').value = template.report_title;
+    }
+    if (template.start_time) {
+        document.getElementById('start-time').value = template.start_time;
+    }
+    if (template.end_time) {
+        document.getElementById('end-time').value = template.end_time;
+    }
+    if (template.start_date) {
+        document.getElementById('start-date').value = template.start_date;
+    }
+    if (template.end_date) {
+        document.getElementById('end-date').value = template.end_date;
+    }
+
+    // Update preset buttons
+    updatePresetButtons();
+}
+
+function setTimePreset(preset) {
+    const startTimeInput = document.getElementById('start-time');
+    const endTimeInput = document.getElementById('end-time');
+
+    // Remove active state from all preset buttons
+    document.querySelectorAll('.preset-btn').forEach(btn => {
+        btn.classList.remove('bg-emerald-600', 'text-white');
+        btn.classList.add('bg-gray-200', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300');
+    });
+
+    // Set time values based on preset
+    switch(preset) {
+        case 'night':
+            startTimeInput.value = '19:00';
+            endTimeInput.value = '07:00';
+            break;
+        case 'day':
+            startTimeInput.value = '07:00';
+            endTimeInput.value = '19:00';
+            break;
+        case 'all':
+            startTimeInput.value = '';
+            endTimeInput.value = '';
+            break;
+        case 'custom':
+            // Just enable custom input, don't change values
+            break;
+    }
+
+    // Highlight active preset
+    const activeBtn = document.querySelector(`[data-preset="${preset}"]`);
+    if (activeBtn) {
+        activeBtn.classList.remove('bg-gray-200', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300');
+        activeBtn.classList.add('bg-emerald-600', 'text-white');
+    }
+}
+
+function updatePresetButtons() {
+    const startTime = document.getElementById('start-time').value;
+    const endTime = document.getElementById('end-time').value;
+
+    // Remove active state from all
+    document.querySelectorAll('.preset-btn').forEach(btn => {
+        btn.classList.remove('bg-emerald-600', 'text-white');
+        btn.classList.add('bg-gray-200', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300');
+    });
+
+    // Check which preset matches
+    let preset = 'custom';
+    if (startTime === '19:00' && endTime === '07:00') preset = 'night';
+    else if (startTime === '07:00' && endTime === '19:00') preset = 'day';
+    else if (!startTime && !endTime) preset = 'all';
+
+    const activeBtn = document.querySelector(`[data-preset="${preset}"]`);
+    if (activeBtn) {
+        activeBtn.classList.remove('bg-gray-200', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300');
+        activeBtn.classList.add('bg-emerald-600', 'text-white');
+    }
+}
+
 function openReportModal() {
     document.getElementById('report-modal').classList.remove('hidden');
-    // Pre-fill location name if available
+    loadTemplates();
+
+    // Pre-fill fields if available
     const locationInput = document.getElementById('report-location');
     if (locationInput && !locationInput.value) {
         locationInput.value = '{{ location.name if location else "" }}';
     }
+    const projectInput = document.getElementById('report-project');
+    if (projectInput && !projectInput.value) {
+        projectInput.value = '{{ project.name if project else "" }}';
+    }
+    const clientInput = document.getElementById('report-client');
+    if (clientInput && !clientInput.value) {
+        clientInput.value = '{{ project.client_name if project and project.client_name else "" }}';
+    }
+
+    // Set default to "All Day"
+    setTimePreset('all');
 }
 
 function closeReportModal() {
     document.getElementById('report-modal').classList.add('hidden');
 }
 
-function generateReport() {
+function generateReport(preview = false) {
     const reportTitle = document.getElementById('report-title').value || 'Background Noise Study';
+    const projectName = document.getElementById('report-project').value || '';
+    const clientName = document.getElementById('report-client').value || '';
     const locationName = document.getElementById('report-location').value || '';
+    const startTime = document.getElementById('start-time').value || '';
+    const endTime = document.getElementById('end-time').value || '';
+    const startDate = document.getElementById('start-date').value || '';
+    const endDate = document.getElementById('end-date').value || '';
 
     // Build the URL with query parameters
     const params = new URLSearchParams({
         report_title: reportTitle,
-        location_name: locationName
+        project_name: projectName,
+        client_name: clientName,
+        location_name: locationName,
+        start_time: startTime,
+        end_time: endTime,
+        start_date: startDate,
+        end_date: endDate
     });
 
-    // Trigger download
-    window.location.href = `/api/projects/{{ project_id }}/files/{{ file_id }}/generate-report?${params.toString()}`;
+    if (preview) {
+        // Open preview page
+        window.location.href = `/api/projects/{{ project_id }}/files/{{ file_id }}/preview-report?${params.toString()}`;
+    } else {
+        // Direct download
+        window.location.href = `/api/projects/{{ project_id }}/files/{{ file_id }}/generate-report?${params.toString()}`;
+    }
 
-    // Close modal
     closeReportModal();
 }
 
+async function saveAsTemplate() {
+    const name = prompt('Enter a name for this template:');
+    if (!name) return;
+
+    const templateData = {
+        name: name,
+        project_id: '{{ project_id }}',
+        report_title: document.getElementById('report-title').value || 'Background Noise Study',
+        start_time: document.getElementById('start-time').value || null,
+        end_time: document.getElementById('end-time').value || null,
+        start_date: document.getElementById('start-date').value || null,
+        end_date: document.getElementById('end-date').value || null
+    };
+
+    try {
+        const response = await fetch('/api/report-templates', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(templateData)
+        });
+
+        if (response.ok) {
+            alert('Template saved successfully!');
+            loadTemplates();
+        } else {
+            alert('Failed to save template');
+        }
+    } catch (error) {
+        alert('Error saving template: ' + error.message);
+    }
+}
+
 // Close modal on escape key
 document.addEventListener('keydown', function(e) {
     if (e.key === 'Escape') {
         closeReportModal();
     }
 });
+
+// Update preset buttons when time inputs change
+document.addEventListener('DOMContentLoaded', function() {
+    const startTimeInput = document.getElementById('start-time');
+    const endTimeInput = document.getElementById('end-time');
+    if (startTimeInput) startTimeInput.addEventListener('change', updatePresetButtons);
+    if (endTimeInput) endTimeInput.addEventListener('change', updatePresetButtons);
+});
 </script>
 
 <!-- Report Generation Modal -->
@@ -499,7 +684,7 @@ document.addEventListener('keydown', function(e) {
         <div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75 transition-opacity" onclick="closeReportModal()"></div>
 
         <!-- Modal panel -->
-        <div class="inline-block align-bottom bg-white dark:bg-slate-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+        <div class="inline-block align-bottom bg-white dark:bg-slate-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
             <div class="bg-white dark:bg-slate-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                 <div class="sm:flex sm:items-start">
                     <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-emerald-100 dark:bg-emerald-900/30 sm:mx-0 sm:h-10 sm:w-10">
@@ -511,15 +696,53 @@ document.addEventListener('keydown', function(e) {
                         <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="modal-title">
                             Generate Excel Report
                         </h3>
+
                         <div class="mt-4 space-y-4">
+                            <!-- Template Selection -->
+                            <div class="flex items-center gap-2">
+                                <div class="flex-1">
+                                    <label for="template-select" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                                        Load Template
+                                    </label>
+                                    <select id="template-select" onchange="applyTemplate()"
+                                            class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
+                                        <option value="">-- Select a template --</option>
+                                    </select>
+                                </div>
+                                <button type="button" onclick="saveAsTemplate()"
+                                        class="mt-6 px-3 py-2 text-sm bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600"
+                                        title="Save current settings as template">
+                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"></path>
+                                    </svg>
+                                </button>
+                            </div>
+
                             <!-- Report Title -->
                             <div>
                                 <label for="report-title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                     Report Title
                                 </label>
                                 <input type="text" id="report-title" value="Background Noise Study"
-                                       class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm"
-                                       placeholder="e.g., Background Noise Study - Commercial Street Bridge">
+                                       class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
+                            </div>
+
+                            <!-- Project and Client in a row -->
+                            <div class="grid grid-cols-2 gap-3">
+                                <div>
+                                    <label for="report-project" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                                        Project Name
+                                    </label>
+                                    <input type="text" id="report-project" value=""
+                                           class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
+                                </div>
+                                <div>
+                                    <label for="report-client" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                                        Client Name
+                                    </label>
+                                    <input type="text" id="report-client" value=""
+                                           class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
+                                </div>
                             </div>
 
                             <!-- Location Name -->
@@ -528,8 +751,67 @@ document.addEventListener('keydown', function(e) {
                                     Location Name
                                 </label>
                                 <input type="text" id="report-location" value=""
-                                       class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm"
-                                       placeholder="e.g., NRL 1 - West Side">
+                                       class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
+                            </div>
+
+                            <!-- Time Filter Section -->
+                            <div class="border-t border-gray-200 dark:border-gray-700 pt-4">
+                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                    Time Filter
+                                </label>
+
+                                <!-- Preset Buttons -->
+                                <div class="flex gap-2 mb-3">
+                                    <button type="button" onclick="setTimePreset('night')" data-preset="night"
+                                            class="preset-btn px-3 py-1.5 text-sm rounded-md bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
+                                        7PM - 7AM
+                                    </button>
+                                    <button type="button" onclick="setTimePreset('day')" data-preset="day"
+                                            class="preset-btn px-3 py-1.5 text-sm rounded-md bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
+                                        7AM - 7PM
+                                    </button>
+                                    <button type="button" onclick="setTimePreset('all')" data-preset="all"
+                                            class="preset-btn px-3 py-1.5 text-sm rounded-md bg-emerald-600 text-white hover:bg-emerald-700 transition-colors">
+                                        All Day
+                                    </button>
+                                    <button type="button" onclick="setTimePreset('custom')" data-preset="custom"
+                                            class="preset-btn px-3 py-1.5 text-sm rounded-md bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
+                                        Custom
+                                    </button>
+                                </div>
+
+                                <!-- Custom Time Inputs -->
+                                <div class="grid grid-cols-2 gap-3">
+                                    <div>
+                                        <label for="start-time" class="block text-xs text-gray-500 dark:text-gray-400">Start Time</label>
+                                        <input type="time" id="start-time" value=""
+                                               class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
+                                    </div>
+                                    <div>
+                                        <label for="end-time" class="block text-xs text-gray-500 dark:text-gray-400">End Time</label>
+                                        <input type="time" id="end-time" value=""
+                                               class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Date Range (Optional) -->
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                                    Date Range <span class="text-gray-400 font-normal">(optional)</span>
+                                </label>
+                                <div class="grid grid-cols-2 gap-3">
+                                    <div>
+                                        <label for="start-date" class="block text-xs text-gray-500 dark:text-gray-400">From</label>
+                                        <input type="date" id="start-date" value=""
+                                               class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
+                                    </div>
+                                    <div>
+                                        <label for="end-date" class="block text-xs text-gray-500 dark:text-gray-400">To</label>
+                                        <input type="date" id="end-date" value=""
+                                               class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm">
+                                    </div>
+                                </div>
                             </div>
 
                             <!-- Info about what's included -->
@@ -547,16 +829,24 @@ document.addEventListener('keydown', function(e) {
                     </div>
                 </div>
             </div>
-            <div class="bg-gray-50 dark:bg-gray-900/50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
-                <button type="button" onclick="generateReport()"
+            <div class="bg-gray-50 dark:bg-gray-900/50 px-4 py-3 sm:px-6 flex flex-col sm:flex-row-reverse gap-2">
+                <button type="button" onclick="generateReport(false)"
                         class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-emerald-600 text-base font-medium text-white hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 sm:w-auto sm:text-sm">
                     <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                     </svg>
-                    Generate & Download
+                    Download Excel
+                </button>
+                <button type="button" onclick="generateReport(true)"
+                        class="w-full inline-flex justify-center rounded-md border border-emerald-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-emerald-600 dark:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 sm:w-auto sm:text-sm">
+                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                    </svg>
+                    Preview & Edit
                 </button>
                 <button type="button" onclick="closeReportModal()"
-                        class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 sm:mt-0 sm:w-auto sm:text-sm">
+                        class="w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 sm:w-auto sm:text-sm">
                     Cancel
                 </button>
             </div>