FlightsAPI/resources/js/Pages/UserProfile.vue

<script setup lang="ts">
import MainLayout from "@/Layouts/MainLayout.vue";
import {Head, router} from '@inertiajs/vue3'
import {computed, onMounted, ref, watchEffect} from 'vue'
import axios from 'axios'
import {Flight, ProfileView, User} from "@/Types/types"
import {useFlightStats} from "@/Composables/useFlightStats"
import ProfileViewSwitcher from "@/Components/FlightsGoneBy/ProfileViewSwitcher.vue"
import ProfileLayout from "@/Components/FlightsGoneBy/ProfileLayout.vue"
import DepartureBoard from "@/Components/FlightsGoneBy/DepartureBoard.vue"
import BoardingPasses from "@/Components/FlightsGoneBy/BoardingPasses.vue";
import FlightMapAndCharts from "@/Components/FlightsGoneBy/FlightMapAndCharts.vue";

defineOptions({ layout: MainLayout })

const props = defineProps<{
    user: User
    canEdit: boolean
    selectedFlightId?: number | null
    initialView?: ProfileView
    isFollowing: boolean
    flight_api_url: string
}>()

// ── Flights state ─────────────────────────────────────────────────────────────
const flights = ref<Flight[]>([])
const flightsLoading = ref(true)

onMounted(async () => {
    try {
        const response = await axios.get(props.flight_api_url)

        flights.value = response.data
    } finally {
        flightsLoading.value = false
    }
})

const localSelectedFlightId = ref(props.selectedFlightId ?? null)

// ── Filter state ──────────────────────────────────────────────────────────────
const selectedYears         = ref<number[]>([])
const selectedAirlines      = ref<number[]>([])
const selectedCountries     = ref<string[]>([])
const selectedContinents    = ref<string[]>([])
const selectedFlightClasses = ref<number[]>([])
const selectedCrewTypes     = ref<number[]>([])

function onFiltersChange(filters: {
    years: number[]
    airlines: number[]
    countries: string[]
    continents: string[]
    flightClasses: number[]
    crewTypes: number[]
}) {
    localSelectedFlightId.value = null
    selectedYears.value         = filters.years
    selectedAirlines.value      = filters.airlines
    selectedCountries.value     = filters.countries
    selectedContinents.value    = filters.continents
    selectedFlightClasses.value = filters.flightClasses
    selectedCrewTypes.value     = filters.crewTypes
}

function matchesFilters(f: Flight): boolean {
    const date = new Date(f.departure_date)
    if (selectedYears.value.length && !selectedYears.value.includes(date.getFullYear())) return false
    if (selectedAirlines.value.length && !selectedAirlines.value.includes(f.airline?.id ?? -1)) return false
    if (selectedCountries.value.length) {
        const depCode = f.departure_airport.region?.country?.code
        const arrCode = f.arrival_airport.region?.country?.code
        if (!selectedCountries.value.includes(depCode ?? '') && !selectedCountries.value.includes(arrCode ?? '')) return false
    }
    if (selectedContinents.value.length) {
        const depCode = f.departure_airport.region?.continent?.code
        const arrCode = f.arrival_airport.region?.continent?.code
        if (!selectedContinents.value.includes(depCode ?? '') && !selectedContinents.value.includes(arrCode ?? '')) return false
    }
    if (selectedFlightClasses.value.length && !selectedFlightClasses.value.includes(f.flight_class?.id ?? -1)) return false
    if (selectedCrewTypes.value.length && !selectedCrewTypes.value.includes(f.crew_type?.id ?? -1)) return false

    return true
}

const filteredFlights = computed(() => {
    return flights.value.filter(matchesFilters)
})

const stats = useFlightStats(filteredFlights)

watchEffect(() => {
    console.time('all.charts.input')
    const _ = [
        stats.perYear.value,
        stats.perMonth.value,
        stats.perDay.value,
        stats.topAirlines.value,
        stats.topAirports.value,
        stats.countries.value,
    ]
    console.timeEnd('all.charts.input')
})

// ── View switching ────────────────────────────────────────────────────────────
const activeView = ref<ProfileView>(props.initialView ?? 'board')

const routeNames: Record<Exclude<ProfileView, 'achievements'>, string> = {
    map:    'profile.map',
    board:  'profile.departure-board',
    passes: 'profile.boarding-passes',
} as const

function switchView(view: ProfileView) {
    if (view === 'achievements') {
        router.visit(route('profile.achievements', { user: props.user.name }))
        return
    }

    const flightId = view === 'board' ? localSelectedFlightId.value : null
    localSelectedFlightId.value = null
    activeView.value = view
    window.history.replaceState(
        window.history.state,
        '',
        route(routeNames[view], {
            user: props.user.name,
            ...(flightId ? { flight: flightId } : {})
        })
    )
}
</script>

<template>
    <Head :title="`${user.name}'s Flights`" />
    <ProfileLayout :is-following="isFollowing" :flightCount="flights.length" :user="user" :loading="flightsLoading">
        <ProfileViewSwitcher :user="user" :active-view="activeView" @update:active-view="switchView" />
        <DepartureBoard v-if="activeView === 'board'" :flight-id="localSelectedFlightId"  :flight-stats="stats" :canEdit="canEdit" />
        <BoardingPasses v-if="activeView === 'passes'" :flight-stats="stats" :canEdit="canEdit" />
        <FlightMapAndCharts
            v-if="activeView === 'map'"
            :stats="stats"
            :canEdit="canEdit"
            @filters-change="onFiltersChange"
        />
    </ProfileLayout>
</template>