285 lines
11 KiB
Vue
285 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import MainLayout from "@/Layouts/MainLayout.vue"
|
|
import { Head, router } from '@inertiajs/vue3'
|
|
import { computed, ref, watchEffect } from 'vue'
|
|
import { Flight, ProfileView, RegionRange, User, FlightRange, FlightScope } 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"
|
|
import FlightFilter from "@/Components/FlightsGoneBy/FlightFilter.vue"
|
|
import { useFlights } from "@/Composables/useFlights"
|
|
|
|
defineOptions({ layout: MainLayout })
|
|
|
|
const props = defineProps<{
|
|
user: User
|
|
canEdit: boolean
|
|
canView: boolean
|
|
selectedFlightId?: number | null
|
|
initialView?: ProfileView
|
|
followStatus: string
|
|
flight_api_url: string
|
|
flightCount: number
|
|
}>()
|
|
|
|
// ── Flights state ─────────────────────────────────────────────────────────────
|
|
|
|
const { flights, flightsLoading } = useFlights(props.flight_api_url)
|
|
const localSelectedFlightId = ref(props.selectedFlightId ?? null)
|
|
|
|
// ── Filter state ──────────────────────────────────────────────────────────────
|
|
|
|
const filtersOpen = ref(window.innerWidth >= 1024)
|
|
|
|
const selectedYears = ref<number[]>([])
|
|
const selectedAirlines = ref<number[]>([])
|
|
const selectedAlliances = ref<number[]>([])
|
|
const selectedCountries = ref<string[]>([])
|
|
const selectedContinents = ref<string[]>([])
|
|
const selectedFlightClasses = ref<number[]>([])
|
|
const selectedCrewTypes = ref<number[]>([])
|
|
const selectedFlightScopes = ref<FlightScope[]>([])
|
|
const selectedFlightRanges = ref<FlightRange[]>([])
|
|
const selectedRegionRanges = ref<RegionRange[]>([])
|
|
const selectedFlightReasons = ref<number[]>([])
|
|
const selectedSeatTypes = ref<number[]>([])
|
|
const selectedManufacturers = ref<string[]>([])
|
|
const selectedAircraftModels = ref<number[]>([])
|
|
const selectedAirportRegions = ref<number[]>([])
|
|
|
|
const activeFilterCount = computed(() =>
|
|
selectedYears.value.length +
|
|
selectedAirlines.value.length +
|
|
selectedAlliances.value.length +
|
|
selectedCountries.value.length +
|
|
selectedContinents.value.length +
|
|
selectedFlightClasses.value.length +
|
|
selectedCrewTypes.value.length +
|
|
selectedFlightScopes.value.length +
|
|
selectedFlightRanges.value.length +
|
|
selectedRegionRanges.value.length +
|
|
selectedFlightReasons.value.length +
|
|
selectedSeatTypes.value.length +
|
|
selectedManufacturers.value.length +
|
|
selectedAircraftModels.value.length +
|
|
selectedAirportRegions.value.length
|
|
)
|
|
|
|
function onFiltersChange(filters: {
|
|
years: number[]
|
|
airlines: number[]
|
|
alliances: number[]
|
|
countries: string[]
|
|
continents: string[]
|
|
flightClasses: number[]
|
|
crewTypes: number[]
|
|
flightScopes: FlightScope[]
|
|
flightRanges: FlightRange[]
|
|
regionRanges: RegionRange[]
|
|
flightReasons: number[]
|
|
seatTypes: number[]
|
|
manufacturers: string[]
|
|
aircraftModels: number[]
|
|
airportRegions: number[]
|
|
}) {
|
|
localSelectedFlightId.value = null
|
|
selectedYears.value = filters.years
|
|
selectedAirlines.value = filters.airlines
|
|
selectedAlliances.value = filters.alliances
|
|
selectedCountries.value = filters.countries
|
|
selectedContinents.value = filters.continents
|
|
selectedFlightClasses.value = filters.flightClasses
|
|
selectedCrewTypes.value = filters.crewTypes
|
|
selectedFlightScopes.value = filters.flightScopes
|
|
selectedFlightRanges.value = filters.flightRanges
|
|
selectedRegionRanges.value = filters.regionRanges
|
|
selectedFlightReasons.value = filters.flightReasons
|
|
selectedSeatTypes.value = filters.seatTypes
|
|
selectedManufacturers.value = filters.manufacturers
|
|
selectedAircraftModels.value = filters.aircraftModels
|
|
selectedAirportRegions.value = filters.airportRegions
|
|
}
|
|
|
|
// ── Filtering ─────────────────────────────────────────────────────────────────
|
|
|
|
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 (selectedAlliances.value.length && !selectedAlliances.value.includes(f.airline?.alliance?.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
|
|
if (selectedFlightScopes.value.length && !selectedFlightScopes.value.includes(f.scope)) return false
|
|
if (selectedFlightRanges.value.length && !selectedFlightRanges.value.includes(f.range)) return false
|
|
if (selectedRegionRanges.value.length && !selectedRegionRanges.value.includes(f.region_range)) return false
|
|
if (selectedFlightReasons.value.length && !selectedFlightReasons.value.includes(f.flight_reason?.id ?? -1)) return false
|
|
if (selectedSeatTypes.value.length && !selectedSeatTypes.value.includes(f.seat_type?.id ?? -1)) return false
|
|
if (selectedManufacturers.value.length && !selectedManufacturers.value.includes(f.aircraft?.manufacturer_code ?? '')) return false
|
|
if (selectedAircraftModels.value.length && !selectedAircraftModels.value.includes(f.aircraft?.id ?? -1)) return false
|
|
if (selectedAirportRegions.value.length) {
|
|
const depRegion = f.departure_airport.region?.id
|
|
const arrRegion = f.arrival_airport.region?.id
|
|
if (!selectedAirportRegions.value.includes(depRegion ?? -1) &&
|
|
!selectedAirportRegions.value.includes(arrRegion ?? -1)) return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
const filteredFlights = computed(() => flights.value.filter(matchesFilters))
|
|
const stats = useFlightStats(filteredFlights)
|
|
|
|
watchEffect(() => {
|
|
const _ = [
|
|
stats.perYear.value,
|
|
stats.perMonth.value,
|
|
stats.perDay.value,
|
|
stats.topAirlines.value,
|
|
stats.topAirports.value,
|
|
stats.countries.value,
|
|
]
|
|
})
|
|
|
|
// ── 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 toggleFilters(e: MouseEvent) {
|
|
filtersOpen.value = !filtersOpen.value
|
|
;(e.currentTarget as HTMLButtonElement).blur()
|
|
}
|
|
|
|
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>
|
|
<ProfileLayout :title="`${user.name}'s Flights`" :canView="canView" :followStatus="followStatus" :flightCount="flightCount" :user="user" :loading="flightsLoading">
|
|
|
|
<div class="toolbar">
|
|
<ProfileViewSwitcher :user="user" :active-view="activeView" @update:active-view="switchView" />
|
|
<button
|
|
class="filter-toggle"
|
|
:class="{ active: filtersOpen || activeFilterCount > 0 }"
|
|
@click="toggleFilters"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>
|
|
</svg>
|
|
Filters
|
|
<span v-if="activeFilterCount > 0" class="filter-badge">{{ activeFilterCount }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div v-show="filtersOpen" class="filter-panel">
|
|
<FlightFilter :flights="flights" @change="onFiltersChange" />
|
|
</div>
|
|
|
|
<DepartureBoard v-if="activeView === 'board'" :flight-id="localSelectedFlightId" :flight-stats="stats" :canEdit="canEdit" :user="user" />
|
|
<BoardingPasses v-if="activeView === 'passes'" :flight-stats="stats" :canEdit="canEdit" :user="user" />
|
|
<FlightMapAndCharts v-if="activeView === 'map'" :stats="stats" :canEdit="canEdit" />
|
|
|
|
</ProfileLayout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.filter-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: none;
|
|
border: 1px solid #334455;
|
|
border-radius: 6px;
|
|
color: #778899;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
padding: 6px 12px;
|
|
transition: color 0.15s, border-color 0.15s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.filter-toggle:focus {
|
|
outline: none;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.filter-toggle:hover {
|
|
border-color: #4da6ff;
|
|
color: #4da6ff;
|
|
}
|
|
}
|
|
|
|
.filter-toggle.active {
|
|
border-color: #4da6ff;
|
|
color: #4da6ff;
|
|
}
|
|
|
|
.filter-badge {
|
|
background: #4da6ff;
|
|
color: #0a1628;
|
|
border-radius: 10px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
padding: 2px 6px;
|
|
}
|
|
|
|
.filter-panel {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.toolbar {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.filter-toggle {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|