ottocran/ticketmaster-magic-wand

1// API Configuration2const API_BASE_URL = 'https://api.example.com';3const AUTH_TOKEN = localStorage.getItem('authToken');4const PAYMENT_TIME_LIMIT = 900; // 15 minutes in seconds (will be fetched from API)5 6// DOM Elements7const unpaidTicketsContainer = document.getElementById('unpaid-tickets');8const upcomingTicketsContainer = document.getElementById('upcoming-tickets');9const pastTicketsContainer = document.getElementById('past-tickets');10 11// Ticket statuses12const STATUS_UNPAID = 'unpaid';13const STATUS_PAID = 'paid';14const STATUS_PAST = 'past';15 16// Fetch all tickets for the user17async function fetchUserTickets() {18    try {19        const response = await fetch(`${API_BASE_URL}/me/bookings`, {20            headers: {21                'Authorization': `Bearer ${AUTH_TOKEN}`,22                'Content-Type': 'application/json'23            }24        });25 26        if (!response.ok) {27            throw new Error('Failed to fetch tickets');28        }29 30        const tickets = await response.json();31        return tickets;32    } catch (error) {33        console.error('Error fetching tickets:', error);34        return [];35    }36}37 38// Categorize tickets into unpaid, upcoming, and past39function categorizeTickets(tickets) {40    const now = new Date();41    const unpaid = [];42    const upcoming = [];43    const past = [];44 45    tickets.forEach(ticket => {46        const eventDate = new Date(ticket.eventDate);47        48        if (!ticket.isPaid) {49            unpaid.push(ticket);50        } else if (eventDate > now) {51            upcoming.push(ticket);52        } else {53            past.push(ticket);54        }55    });56 57    return { unpaid, upcoming, past };58}59 60// Render tickets in their respective sections61function renderTickets(tickets) {62    // Clear existing content63    unpaidTicketsContainer.innerHTML = '';64    upcomingTicketsContainer.innerHTML = '';65    pastTicketsContainer.innerHTML = '';66 67    // Handle empty states68    if (tickets.unpaid.length === 0) {69        unpaidTicketsContainer.innerHTML = `70            <div class="text-center py-8 text-gray-500">71                <i data-feather="clock" class="w-12 h-12 mx-auto mb-4"></i>72                <p>No unpaid tickets found</p>73            </div>74        `;75    }76 77    if (tickets.upcoming.length === 0) {78        upcomingTicketsContainer.innerHTML = `79            <div class="text-center py-8 text-gray-500">80                <i data-feather="calendar" class="w-12 h-12 mx-auto mb-4"></i>81                <p>No upcoming events</p>82            </div>83        `;84    }85 86    if (tickets.past.length === 0) {87        pastTicketsContainer.innerHTML = `88            <div class="text-center py-8 text-gray-500">89                <i data-feather="archive" class="w-12 h-12 mx-auto mb-4"></i>90                <p>No past events</p>91            </div>92        `;93    }94 95    // Render unpaid tickets96    tickets.unpaid.forEach(ticket => {97        const ticketElement = document.createElement('custom-ticket-card');98        ticketElement.setAttribute('ticket-data', JSON.stringify(ticket));99        ticketElement.setAttribute('status', STATUS_UNPAID);100        unpaidTicketsContainer.appendChild(ticketElement);101    });102 103    // Render upcoming tickets104    tickets.upcoming.forEach(ticket => {105        const ticketElement = document.createElement('custom-ticket-card');106        ticketElement.setAttribute('ticket-data', JSON.stringify(ticket));107        ticketElement.setAttribute('status', STATUS_PAID);108        upcomingTicketsContainer.appendChild(ticketElement);109    });110 111    // Render past tickets112    tickets.past.forEach(ticket => {113        const ticketElement = document.createElement('custom-ticket-card');114        ticketElement.setAttribute('ticket-data', JSON.stringify(ticket));115        ticketElement.setAttribute('status', STATUS_PAST);116        pastTicketsContainer.appendChild(ticketElement);117    });118 119    feather.replace();120}121 122// Initialize the page123async function init() {124    const tickets = await fetchUserTickets();125    const categorizedTickets = categorizeTickets(tickets);126    renderTickets(categorizedTickets);127}128 129// Start the app130document.addEventListener('DOMContentLoaded', init);