Upload files to "static/js/pages"

static/js/pages/history.js

@@ -5,16 +5,66 @@ document.addEventListener('DOMContentLoaded', function () {
     let currentRange = '24h';
 
     const timeRangeButtons = document.querySelectorAll('.btn-group .btn');
+    const customRangeBtn = document.getElementById('customRangeBtn');
+    const startDateInput = document.getElementById('startDate');
+    const endDateInput = document.getElementById('endDate');
+
+    function formatDateForInput(date) {
+        const pad = (num) => num.toString().padStart(2, '0');
+        const year = date.getFullYear();
+        const month = pad(date.getMonth() + 1);
+        const day = pad(date.getDate());
+        const hours = pad(date.getHours());
+        const minutes = pad(date.getMinutes());
+        return `${year}-${month}-${day}T${hours}:${minutes}`;
+    }
+
+    function updateDateInputs(range) {
+        const endDate = new Date();
+        let startDate = new Date();
+        
+        switch (range) {
+            case '24h':
+                startDate.setHours(startDate.getHours() - 24);
+                break;
+            case '7d':
+                startDate.setDate(startDate.getDate() - 7);
+                break;
+            case '30d':
+                startDate.setDate(startDate.getDate() - 30);
+                break;
+            case '90d':
+                startDate.setDate(startDate.getDate() - 90);
+                break;
+        }
+
+        startDateInput.value = formatDateForInput(startDate);
+        endDateInput.value = formatDateForInput(endDate);
+    }
     
     timeRangeButtons.forEach(button => {
         button.addEventListener('click', () => {
             currentRange = button.getAttribute('data-range');
             timeRangeButtons.forEach(btn => btn.classList.remove('active'));
             button.classList.add('active');
-            fetchDataAndRenderCharts(currentRange);
+            
+            updateDateInputs(currentRange);
+            fetchDataAndRenderCharts({ range: currentRange });
         });
     });
 
+    customRangeBtn.addEventListener('click', () => {
+        const startDate = startDateInput.value;
+        const endDate = endDateInput.value;
+
+        if (startDate && endDate) {
+            timeRangeButtons.forEach(btn => btn.classList.remove('active'));
+            fetchDataAndRenderCharts({ startDate, endDate });
+        } else {
+            alert('Please select both a start and end date.');
+        }
+    });
+
     function updateChartScale(chartInstance) {
         const dataset = chartInstance.data.datasets[0];
         const validData = (dataset.data || []).filter(val => typeof val === 'number');
@@ -38,9 +88,16 @@ document.addEventListener('DOMContentLoaded', function () {
         chartInstance.update();
     }
 
-    async function fetchDataAndRenderCharts(range) {
+    async function fetchDataAndRenderCharts(params) {
+        let url = '/history/api/total-routes';
+        if (params.range) {
+            url += `?range=${params.range}`;
+        } else if (params.startDate && params.endDate) {
+            url += `?start_date=${params.startDate}&end_date=${params.endDate}`;
+        }
+
         try {
-            const response = await fetch(`/history/api/total-routes?range=${range}`);
+            const response = await fetch(url);
             if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
             const data = await response.json();
             renderCharts(data);
@@ -167,5 +224,6 @@ document.addEventListener('DOMContentLoaded', function () {
         updateChartScale(ipv6Chart);
     }
 
-    fetchDataAndRenderCharts(currentRange);
+    updateDateInputs(currentRange);
+    fetchDataAndRenderCharts({ range: currentRange });
 });