110 lines
3.9 KiB
Vue
110 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import {computed, ref} from "vue";
|
|
import {Flight, SharedProps, User} from "@/Types/types";
|
|
import {router, usePage} from "@inertiajs/vue3";
|
|
import { copyToClipboard } from "@/Composables/useClipboard";
|
|
|
|
const loggedInUser = usePage<SharedProps>().props.auth.user?.id
|
|
|
|
defineProps<{
|
|
profileUser: User
|
|
flight: Flight
|
|
canEdit: boolean
|
|
referrer?: "departure-board" | "boarding-passes"
|
|
}>()
|
|
|
|
const deleting = ref(false)
|
|
function editRoute(id: number) {
|
|
return route('flights.edit', { flight: id })
|
|
}
|
|
|
|
const flightToDelete = ref<Flight | null>(null)
|
|
const showDeleteDialog = computed({
|
|
get: () => flightToDelete.value !== null,
|
|
set: (val) => { if (!val) flightToDelete.value = null }
|
|
})
|
|
|
|
function copyFlightToClipboard(flight: Flight) {
|
|
const dep = `${flight.departure_airport.display_code} (${flight.departure_airport.municipality})`
|
|
const arr = `${flight.arrival_airport.display_code} (${flight.arrival_airport.municipality})`
|
|
const dayDiff = flight.arrival_day_difference !== 0
|
|
? `(${flight.arrival_day_difference > 0 ? '+' : ''}${flight.arrival_day_difference})`
|
|
: ''
|
|
const times = `${flight.departure_time_display} → ${flight.arrival_time_display} ${dayDiff}`
|
|
const airline = flight.airline?.display_name
|
|
const aircraft = flight.aircraft?.display_name
|
|
const reg = flight.aircraft_registration ? `· (${flight.aircraft_registration})` : ''
|
|
const text = `${flight.departure_date_display} | ${flight.flight_number} | ${airline} | ${dep} → ${arr} | ${times} | ${aircraft} ${reg}`
|
|
copyToClipboard(text)
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<v-menu>
|
|
<template #activator="{ props: menuProps }">
|
|
<v-btn
|
|
v-bind="menuProps"
|
|
icon="mdi-dots-horizontal"
|
|
variant="text"
|
|
size="small"
|
|
density="compact"
|
|
/>
|
|
</template>
|
|
<v-list density="compact" bg-color="#1a1e2e">
|
|
<v-list-item
|
|
prepend-icon="mdi-magnify"
|
|
title="View Details"
|
|
:href="route('profile.flight', { userFlight: flight.id, user: profileUser.name })"
|
|
/>
|
|
<v-list-item
|
|
v-if="loggedInUser && loggedInUser !== profileUser.id"
|
|
prepend-icon="mdi-plus"
|
|
title="Log Flight for Myself"
|
|
:href="route('flights.copy', { flight: flight.id })"
|
|
/>
|
|
<v-list-item
|
|
prepend-icon="mdi-content-copy"
|
|
title="Copy to Clipboard"
|
|
@click="copyFlightToClipboard(flight)"
|
|
/>
|
|
<v-list-item v-if="canEdit"
|
|
prepend-icon="mdi-pencil-outline"
|
|
title="Edit"
|
|
:href="editRoute(flight.id)"
|
|
/>
|
|
<v-list-item v-if="canEdit"
|
|
prepend-icon="mdi-trash-can-outline"
|
|
title="Delete"
|
|
@click="flightToDelete = flight"
|
|
/>
|
|
|
|
|
|
</v-list>
|
|
</v-menu>
|
|
<v-dialog v-if="canEdit" v-model="showDeleteDialog" max-width="400">
|
|
<v-card title="Delete Flight">
|
|
<v-card-text>Are you sure you want to delete this flight?</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn v-if="!deleting" @click="flightToDelete = null">Cancel</v-btn>
|
|
<v-btn
|
|
color="error"
|
|
:loading="deleting"
|
|
@click="deleting = true; router.delete(
|
|
route('flights.delete', { flight: flightToDelete!.id , referrer: referrer ?? 'departure-board'}),
|
|
{ onFinish: () => { deleting = false; flightToDelete = null } }
|
|
)"
|
|
>
|
|
Delete
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|