50 lines
1.6 KiB
Vue
50 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { usePage } from '@inertiajs/vue3'
|
|
import { SharedProps } from '@/Types/types'
|
|
import { ref, onMounted, nextTick } from 'vue'
|
|
|
|
import { FlightStats } from '@/Composables/useFlightStats'
|
|
import FlightMap from "@/Components/FlightsGoneBy/FlightMap.vue";
|
|
import FlightFilter from "@/Components/FlightsGoneBy/FlightFilter.vue";
|
|
import FlightStatsBar from "@/Components/FlightsGoneBy/FlightStatsBar.vue";
|
|
import FlightCharts from "@/Components/FlightsGoneBy/FlightCharts.vue";
|
|
import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue";
|
|
const props = defineProps<{
|
|
stats: FlightStats
|
|
canEdit: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
filtersChange: [filters: {
|
|
years: number[]
|
|
airlines: number[]
|
|
countries: string[]
|
|
continents: string[]
|
|
flightClasses: number[]
|
|
}]
|
|
}>()
|
|
|
|
const chartsVisible = ref(false)
|
|
onMounted(async () => {
|
|
setTimeout(() => { chartsVisible.value = true }, 1)
|
|
})
|
|
|
|
const mappedFlights = computed(() => [
|
|
...props.stats.pastFlights.value,
|
|
...props.stats.upcomingFlights.value,
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<FlightMap :flights="mappedFlights" />
|
|
<FlightFilter :flights="mappedFlights" @change="$emit('filtersChange', $event)" />
|
|
<FlightStatsBar :flights="stats.pastFlights.value" :upcoming-flights="stats.upcomingFlights.value" />
|
|
<FlightCharts v-if="chartsVisible" :stats="stats" :flight-stats="stats"/>
|
|
<div v-else style="width:100%; display:flex; align-items: center;justify-content: center">
|
|
<PlaneLoader />
|
|
</div>
|
|
</div>
|
|
</template>
|