56 lines
1.9 KiB
Vue
56 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import MainLayout from "@/Layouts/MainLayout.vue";
|
|
import { Head } from '@inertiajs/vue3';
|
|
import { ref, defineAsyncComponent } from 'vue'
|
|
import {Flight, ProfileView, User} from "@/Types/types";
|
|
import { router } from '@inertiajs/vue3'
|
|
import ProfileViewSwitcher from "@/Components/FlightsGoneBy/ProfileViewSwitcher.vue";
|
|
import ProfileLayout from "@/Components/FlightsGoneBy/ProfileLayout.vue";
|
|
import DepartureBoard from "@/Components/FlightsGoneBy/DepartureBoard.vue";
|
|
import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue";
|
|
|
|
const FlightMapAndCharts = defineAsyncComponent(
|
|
() => import('@/Components/FlightsGoneBy/FlightMapAndCharts.vue')
|
|
)
|
|
const BoardingPasses = defineAsyncComponent(
|
|
() => import('@/Components/FlightsGoneBy/BoardingPasses.vue')
|
|
)
|
|
|
|
defineOptions({ layout: MainLayout })
|
|
|
|
const props = defineProps<{
|
|
user: User
|
|
flights: Flight[]
|
|
canEdit: boolean
|
|
initialView?: ProfileView
|
|
}>()
|
|
|
|
|
|
const activeView = ref<ProfileView>(props.initialView ?? 'board')
|
|
|
|
const routeNames = {
|
|
map: 'profile.map',
|
|
board: 'profile.departure-board',
|
|
passes: 'profile.boarding-passes',
|
|
} as const
|
|
|
|
function switchView(view: 'map' | 'board' | 'passes') {
|
|
activeView.value = view
|
|
window.history.replaceState(
|
|
window.history.state,
|
|
'',
|
|
route(routeNames[view], { username: props.user.name })
|
|
)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Head :title="`${user.name}'s Flights`" />
|
|
<ProfileLayout :flights="flights" :user="user">
|
|
<ProfileViewSwitcher :active-view="activeView" @update:active-view="switchView" />
|
|
<DepartureBoard v-if="activeView === 'board'" :flights="flights" :canEdit="canEdit" />
|
|
<BoardingPasses v-else-if="activeView === 'passes'" :flights="flights" :canEdit="canEdit" />
|
|
<FlightMapAndCharts v-else-if="activeView === 'map'" :flights="flights" :canEdit="canEdit" />
|
|
</ProfileLayout>
|
|
</template>
|