update pages

py_app/app/static/script.js

@@ -284,4 +284,156 @@ document.addEventListener('DOMContentLoaded', () => {
             draggingField.style.top = `${e.clientY - rect.top}px`;
         });
     }
+
+    // Calendar functionality for date selection
+    const selectDayReportBtn = document.getElementById('select-day-report');
+    const calendarModal = document.getElementById('calendar-modal');
+    const closeModal = document.querySelector('.close-modal');
+    const cancelDate = document.getElementById('cancel-date');
+    const confirmDate = document.getElementById('confirm-date');
+    const calendarDays = document.getElementById('calendar-days');
+    const calendarMonthYear = document.getElementById('calendar-month-year');
+    const prevMonth = document.getElementById('prev-month');
+    const nextMonth = document.getElementById('next-month');
+
+    let currentDate = new Date();
+    let selectedDate = null;
+
+    // Show calendar modal
+    if (selectDayReportBtn) {
+        selectDayReportBtn.addEventListener('click', () => {
+            calendarModal.style.display = 'block';
+            generateCalendar(currentDate);
+        });
+    }
+
+    // Close modal events
+    if (closeModal) {
+        closeModal.addEventListener('click', closeCalendarModal);
+    }
+    if (cancelDate) {
+        cancelDate.addEventListener('click', closeCalendarModal);
+    }
+
+    // Click outside modal to close
+    window.addEventListener('click', (e) => {
+        if (e.target === calendarModal) {
+            closeCalendarModal();
+        }
+    });
+
+    // Navigation buttons
+    if (prevMonth) {
+        prevMonth.addEventListener('click', () => {
+            currentDate.setMonth(currentDate.getMonth() - 1);
+            generateCalendar(currentDate);
+        });
+    }
+
+    if (nextMonth) {
+        nextMonth.addEventListener('click', () => {
+            currentDate.setMonth(currentDate.getMonth() + 1);
+            generateCalendar(currentDate);
+        });
+    }
+
+    // Confirm date selection
+    if (confirmDate) {
+        confirmDate.addEventListener('click', () => {
+            if (selectedDate) {
+                // Format date as YYYY-MM-DD
+                const formattedDate = selectedDate.toISOString().split('T')[0];
+                closeCalendarModal();
+                
+                // Fetch report data for the selected date
+                fetchCustomDateReport(formattedDate);
+            }
+        });
+    }
+
+    function closeCalendarModal() {
+        calendarModal.style.display = 'none';
+        selectedDate = null;
+        confirmDate.disabled = true;
+        
+        // Remove selected class from all days
+        const selectedDays = document.querySelectorAll('.calendar-day.selected');
+        selectedDays.forEach(day => day.classList.remove('selected'));
+    }
+
+    function generateCalendar(date) {
+        const year = date.getFullYear();
+        const month = date.getMonth();
+        
+        // Update header
+        const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
+            'July', 'August', 'September', 'October', 'November', 'December'];
+        calendarMonthYear.textContent = `${monthNames[month]} ${year}`;
+        
+        // Clear previous days
+        calendarDays.innerHTML = '';
+        
+        // Get first day of month and number of days
+        const firstDay = new Date(year, month, 1).getDay();
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const today = new Date();
+        
+        // Add empty cells for days before month starts
+        for (let i = 0; i < firstDay; i++) {
+            const emptyDay = document.createElement('div');
+            emptyDay.classList.add('calendar-day', 'other-month');
+            calendarDays.appendChild(emptyDay);
+        }
+        
+        // Add days of the month
+        for (let day = 1; day <= daysInMonth; day++) {
+            const dayElement = document.createElement('div');
+            dayElement.classList.add('calendar-day');
+            dayElement.textContent = day;
+            
+            const dayDate = new Date(year, month, day);
+            
+            // Highlight today
+            if (dayDate.toDateString() === today.toDateString()) {
+                dayElement.classList.add('today');
+            }
+            
+            // Add click event
+            dayElement.addEventListener('click', () => {
+                // Remove previous selection
+                const previousSelected = document.querySelector('.calendar-day.selected');
+                if (previousSelected) {
+                    previousSelected.classList.remove('selected');
+                }
+                
+                // Select this day
+                dayElement.classList.add('selected');
+                selectedDate = new Date(year, month, day);
+                confirmDate.disabled = false;
+            });
+            
+            calendarDays.appendChild(dayElement);
+        }
+    }
+
+    function fetchCustomDateReport(dateString) {
+        reportTitle.textContent = `Loading report for ${dateString}...`;
+        
+        fetch(`/generate_report?report=6&date=${dateString}`)
+            .then(response => response.json())
+            .then(data => {
+                if (data.error) {
+                    reportTitle.textContent = `Error: ${data.error}`;
+                    populateTable({ headers: [], rows: [] });
+                } else {
+                    reportTitle.textContent = `Daily Report for ${dateString}`;
+                    populateTable(data);
+                }
+            })
+            .catch(error => {
+                console.error('Error fetching custom date report:', error);
+                reportTitle.textContent = 'Error loading report';
+                populateTable({ headers: [], rows: [] });
+            });
+    }
 });