Added Charts
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<FlightMap :flights="mappedFlights" class="profile-map__map" />
|
||||
<FlightMap :page="page.props" :flights="mappedFlights" class="profile-map__map" />
|
||||
|
||||
<div class="profile-map__toolbar">
|
||||
<v-select
|
||||
@@ -88,6 +88,46 @@
|
||||
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedCountries.length - 2 }}</span>
|
||||
</template>
|
||||
</v-select>
|
||||
|
||||
<v-select
|
||||
v-model="selectedContinents"
|
||||
:items="availableContinents"
|
||||
item-title="name"
|
||||
item-value="code"
|
||||
label="Continent"
|
||||
multiple
|
||||
clearable
|
||||
hide-details
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
>
|
||||
<template #selection="{ item, index }">
|
||||
<span v-if="index < 2" class="v-select__selection-text">
|
||||
{{ (item as any).name }}<span v-if="index < Math.min(selectedContinents.length, 2) - 1">, </span>
|
||||
</span>
|
||||
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedContinents.length - 2 }}</span>
|
||||
</template>
|
||||
</v-select>
|
||||
|
||||
<v-select
|
||||
v-model="selectedFlightClasses"
|
||||
:items="availableFlightClasses"
|
||||
item-title="name"
|
||||
item-value="id"
|
||||
label="Flight class"
|
||||
multiple
|
||||
clearable
|
||||
hide-details
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
>
|
||||
<template #selection="{ item, index }">
|
||||
<span v-if="index < 2" class="v-select__selection-text">
|
||||
{{ (item as any).name }}<span v-if="index < Math.min(selectedFlightClasses.length, 2) - 1">, </span>
|
||||
</span>
|
||||
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedFlightClasses.length - 2 }}</span>
|
||||
</template>
|
||||
</v-select>
|
||||
</div>
|
||||
|
||||
<FlightStatsBar :flights="pastFlights" :upcoming-flights="upcomingFlights" />
|
||||
@@ -98,25 +138,22 @@
|
||||
import { computed, ref } from 'vue'
|
||||
import { usePage } from '@inertiajs/vue3'
|
||||
import FlightMap from '@/Components/FlightsGoneBy/FlightMap.vue'
|
||||
import type { Flight } from '@/Types/types'
|
||||
import FlightStatsBar from "@/Components/FlightsGoneBy/FlightStatsBar.vue";
|
||||
import FlightCharts from "@/Components/FlightsGoneBy/FlightCharts.vue";
|
||||
import type { Flight, SharedProps } from '@/Types/types'
|
||||
import FlightStatsBar from '@/Components/FlightsGoneBy/FlightStatsBar.vue'
|
||||
import FlightCharts from '@/Components/FlightsGoneBy/FlightCharts.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
flights: Flight[]
|
||||
}>()
|
||||
|
||||
const mappedFlights = computed(() => [
|
||||
...pastFlights.value,
|
||||
...upcomingFlights.value,
|
||||
])
|
||||
const page = usePage<SharedProps>()
|
||||
const now = new Date()
|
||||
|
||||
const page = usePage()
|
||||
const now = new Date()
|
||||
|
||||
const selectedYears = ref<number[]>([])
|
||||
const selectedAirlines = ref<number[]>([])
|
||||
const selectedCountries = ref<string[]>([])
|
||||
const selectedYears = ref<number[]>([])
|
||||
const selectedAirlines = ref<number[]>([])
|
||||
const selectedCountries = ref<string[]>([])
|
||||
const selectedContinents = ref<string[]>([])
|
||||
const selectedFlightClasses = ref<number[]>([])
|
||||
|
||||
// ── Helpers ───────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -155,49 +192,77 @@ const availableCountries = computed((): { code: string; name: string }[] => {
|
||||
return [...map.values()].sort((a, b) => a.name.localeCompare(b.name))
|
||||
})
|
||||
|
||||
const availableContinents = computed((): { code: string; name: string }[] => {
|
||||
const map = new Map<string, { code: string; name: string }>()
|
||||
props.flights.forEach(f => {
|
||||
const dep = f.departure_airport.region?.continent
|
||||
const arr = f.arrival_airport.region?.continent
|
||||
if (dep) map.set(dep.code, { code: dep.code, name: dep.name })
|
||||
if (arr) map.set(arr.code, { code: arr.code, name: arr.name })
|
||||
})
|
||||
return [...map.values()].sort((a, b) => a.name.localeCompare(b.name))
|
||||
})
|
||||
|
||||
const availableFlightClasses = computed((): { id: number; name: string }[] => {
|
||||
const map = new Map<number, { id: number; name: string }>()
|
||||
props.flights.forEach(f => {
|
||||
if (f.flight_class?.id && f.flight_class?.name) {
|
||||
map.set(f.flight_class.id, { id: f.flight_class.id, name: f.flight_class.name })
|
||||
}
|
||||
})
|
||||
return [...map.values()].sort((a, b) => a.name.localeCompare(b.name))
|
||||
})
|
||||
|
||||
// ── Filter helper ─────────────────────────────────────────────────────────────
|
||||
|
||||
function matchesFilters(f: Flight, date: Date): boolean {
|
||||
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
|
||||
return true
|
||||
}
|
||||
|
||||
// ── Filtered flights ──────────────────────────────────────────────────────────
|
||||
|
||||
const pastFlights = computed(() => {
|
||||
return props.flights.filter(f => {
|
||||
const pastFlights = computed(() =>
|
||||
props.flights.filter(f => {
|
||||
const date = new Date(f.departure_date)
|
||||
if (date > now) return false
|
||||
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
|
||||
}
|
||||
return true
|
||||
return date <= now && matchesFilters(f, date)
|
||||
})
|
||||
})
|
||||
)
|
||||
|
||||
const upcomingFlights = computed(() => {
|
||||
return props.flights.filter(f => {
|
||||
const upcomingFlights = computed(() =>
|
||||
props.flights.filter(f => {
|
||||
const date = new Date(f.departure_date)
|
||||
if (date <= now) return false
|
||||
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
|
||||
}
|
||||
return true
|
||||
return date > now && matchesFilters(f, date)
|
||||
})
|
||||
})
|
||||
)
|
||||
|
||||
// ── Stats ─────────────────────────────────────────────────────────────────────
|
||||
const mappedFlights = computed(() => [
|
||||
...pastFlights.value,
|
||||
...upcomingFlights.value,
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-map__toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.profile-map__toolbar .v-select {
|
||||
flex: 1;
|
||||
flex: 1 1 160px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user