Update script.js

script.js

@@ -1,42 +1,77 @@
-$(document).ready(function() {
-    // Download Excel button
-    $('#downloadBtn').click(function() {
-        window.location.href = '/download_excel';
-    });
-    
-    // View ticket modal
-    $('.view-btn').click(function() {
-        const ticketId = $(this).data('id');
+document.addEventListener('DOMContentLoaded', function() {
+    // DOM Elements
+    const ticketsBody = document.getElementById('ticketsBody');
+    const refreshBtn = document.getElementById('refreshBtn');
+    const downloadBtn = document.getElementById('downloadBtn');
+    const totalTicketsEl = document.getElementById('total-tickets');
+    const totalCountEl = document.getElementById('total-count');
+    const uniqueCountriesEl = document.getElementById('unique-countries');
+
+    // Load data when page loads
+    fetchData();
+
+    // Event listeners
+    refreshBtn.addEventListener('click', fetchData);
+    downloadBtn.addEventListener('click', downloadCSV);
+
+    // Fetch data from server
+    function fetchData() {
+        fetch('/get_tickets')
+            .then(response => response.json())
+            .then(data => {
+                renderTable(data.tickets);
+                updateStats(data.tickets);
+            })
+            .catch(error => {
+                console.error('Error fetching data:', error);
+                alert('Error fetching data. Please try again.');
+            });
+    }
+
+    // Render table with ticket data
+    function renderTable(tickets) {
+        ticketsBody.innerHTML = '';
         
-        // In a real app, you would fetch the ticket details from the server
-        // For now, we'll just show a sample modal
-        $('#viewTicketModal').modal('show');
-    });
-    
-    // Delete ticket button
-    $('.delete-btn').click(function() {
-        const ticketId = $(this).data('id');
-        if (confirm('Are you sure you want to delete this ticket?')) {
-            // In a real app, you would send a DELETE request to the server
-            alert('Ticket would be deleted here (implementation needed)');
+        if (tickets.length === 0) {
+            ticketsBody.innerHTML = '<tr><td colspan="8" class="no-data">No ticket data available</td></tr>';
+            return;
         }
-    });
-    
-    // Refresh button
-    $('.refresh-btn').click(function() {
-        location.reload();
-    });
-    
-    // Search functionality
-    $('.search-box input').on('keyup', function() {
-        const value = $(this).val().toLowerCase();
-        $('table tbody tr').filter(function() {
-            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
+
+        tickets.forEach(ticket => {
+            const row = document.createElement('tr');
+            row.innerHTML = `
+                <td>${ticket.ticket_number}</td>
+                <td>${ticket.name}</td>
+                <td>${ticket.email}</td>
+                <td>${ticket.phone}</td>
+                <td>${ticket.tickets_count}</td>
+                <td>${ticket.country}</td>
+                <td>${ticket.region}</td>
+                <td>${formatDate(ticket.timestamp)}</td>
+            `;
+            ticketsBody.appendChild(row);
         });
-    });
-    
-    // Simulate loading data
-    setTimeout(function() {
-        $('.table-responsive').addClass('loaded');
-    }, 500);
+    }
+
+    // Update statistics cards
+    function updateStats(tickets) {
+        totalTicketsEl.textContent = tickets.length;
+        
+        const totalCount = tickets.reduce((sum, ticket) => sum + ticket.tickets_count, 0);
+        totalCountEl.textContent = totalCount;
+        
+        const uniqueCountries = new Set(tickets.map(ticket => ticket.country));
+        uniqueCountriesEl.textContent = uniqueCountries.size;
+    }
+
+    // Format date for display
+    function formatDate(dateString) {
+        const options = { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
+        return new Date(dateString).toLocaleDateString('en-US', options);
+    }
+
+    // Download CSV
+    function downloadCSV() {
+        window.location.href = '/download_csv';
+    }
 });