72 lines
2.1 KiB
Vue
72 lines
2.1 KiB
Vue
<script setup>
|
|
import {useRoute, useRouter} from "vue-router";
|
|
import {onMounted, watch} from "vue";
|
|
import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
|
|
import {fetchFlight, flight, flightName, handleDeleteFlight, loading} from "src/composables/objects/flight";
|
|
import {useAppStore} from "stores/App";
|
|
import PhotosList from "components/photos/PhotosList.vue";
|
|
import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
|
|
import {useQuasar} from "quasar";
|
|
import {successObject} from "src/composables/dialog";
|
|
|
|
const $q = useQuasar();
|
|
const $router = useRouter();
|
|
|
|
onMounted(() => {
|
|
fetchFlight(useRoute().params.id)
|
|
})
|
|
|
|
watch(flight, (newVal) => {
|
|
const flightNameFormatted = flightName(newVal);
|
|
useAppStore().setPageTitle(flightNameFormatted);
|
|
useAppStore().setBreadcrumbs([
|
|
{to: {name: "myFlights"}, label: "Moje lety"},
|
|
{label: flightNameFormatted}
|
|
]);
|
|
});
|
|
|
|
const handleDeleteAndRedirect = () => {
|
|
const flightId = flight.value.id;
|
|
|
|
handleDeleteFlight($q, flightId, (flight) => {
|
|
$router.push({name: "myFlights"});
|
|
$q.notify(successObject(`Úspěšně smazáno`));
|
|
})
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<FlightDetailSkeleton v-if="loading || !flight"/>
|
|
|
|
<template v-else>
|
|
<q-card class="q-mx-md q-my-md">
|
|
<q-parallax
|
|
:src="flight.coverPhoto.url"
|
|
v-if="flight.coverPhoto"
|
|
:height="450"
|
|
/>
|
|
|
|
<q-card-section>
|
|
<FlightBasicInfo :flight="flight"/>
|
|
|
|
<article v-html="flight.description"/>
|
|
|
|
<ul>
|
|
<li v-for="poi in flight.track" :key="poi.pointOfInterest.id">
|
|
{{ poi.pointOfInterest.name }}
|
|
</li>
|
|
</ul>
|
|
|
|
<PhotosList :photos="flight.photos" :show-actions="false"/>
|
|
</q-card-section>
|
|
|
|
<q-card-actions align="right">
|
|
<q-btn @click="handleDeleteAndRedirect" icon="delete" rounded flat text-color="red"/>
|
|
<q-btn :to="{name: 'flightEdit', params:{id: flight.id}}" icon="edit" rounded flat text-color="primary"/>
|
|
</q-card-actions>
|
|
</q-card>
|
|
<!-- <FAB mode="edit" :router-link=""/>-->
|
|
</template>
|
|
</template>
|