146 lines
4.8 KiB
Vue
146 lines
4.8 KiB
Vue
<script setup>
|
|
import {useRoute, useRouter} from "vue-router";
|
|
import {computed, onMounted, ref, watch} from "vue";
|
|
import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
|
|
import {flightName} from "src/composables/flight";
|
|
import {useAppStore} from "stores/App";
|
|
import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
|
|
import {copyToClipboard, useQuasar} from "quasar";
|
|
import {confirmObject, successObject} from "src/composables/dialog";
|
|
import {useFlightsStore} from "stores/Flights";
|
|
import FlightTrackMap from "components/flights/FlightTrackMap.vue";
|
|
import {useUserStore} from "stores/User";
|
|
import {storeToRefs} from "pinia";
|
|
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
|
|
import PhotoGallery from "components/photos/PhotoGallery.vue";
|
|
|
|
const $q = useQuasar();
|
|
const $router = useRouter();
|
|
const flightId = parseInt(useRoute().params.id);
|
|
const loggedUser = storeToRefs(useUserStore()).user;
|
|
|
|
onMounted(() => {flight.value
|
|
useFlightsStore().fetchDetail(flightId).then(f => {
|
|
const flightNameFormatted = flightName(f);
|
|
useAppStore().setPageTitle(flightNameFormatted);
|
|
useAppStore().setBreadcrumbs([
|
|
{to: {name: "myFlights"}, label: "Moje lety"},
|
|
{label: flightNameFormatted}
|
|
]);
|
|
})
|
|
})
|
|
|
|
const handleDeleteAndRedirect = () => {
|
|
$q.dialog(confirmObject("Opravdu chceš smazat tento let?"))
|
|
.onOk(() => {
|
|
useFlightsStore().destroy(flightId).then(() => {
|
|
$router.push({name: "myFlights"});
|
|
$q.notify(successObject(`Úspěšně smazáno`));
|
|
});
|
|
});
|
|
}
|
|
|
|
|
|
const togglePublicVisibility = () => {
|
|
const newVisibility = !flight.value.isPublic;
|
|
useFlightsStore()
|
|
.update(flightId, {isPublic: newVisibility})
|
|
.then(() => {
|
|
$q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto"));
|
|
});
|
|
};
|
|
|
|
const copyLinkToClipboard = () => {
|
|
const loggedUser = useUserStore().user;
|
|
const url = $router.resolve({
|
|
name: "publicFlightDetail",
|
|
params: {id: flightId, username: loggedUser.publicUsername}
|
|
});
|
|
copyToClipboard(window.location.origin + url.href).then(() => {
|
|
$q.notify(successObject("Odkaz zkopírován"))
|
|
});
|
|
};
|
|
|
|
const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
|
|
</script>
|
|
|
|
<template>
|
|
<FlightDetailSkeleton v-if="isQueryRunning || !flight"/>
|
|
|
|
<q-card class="flight-detail-card" v-else>
|
|
<q-img :src="flight.coverPhoto.url" v-if="flight.coverPhoto">
|
|
<div class="absolute-bottom custom-caption">
|
|
<div class="text-h5"> {{ flightName(flight) }}</div>
|
|
</div>
|
|
</q-img>
|
|
|
|
<q-card-actions class="q-my-md">
|
|
<div class="col-grow">
|
|
<q-btn
|
|
@click="togglePublicVisibility"
|
|
:icon="flight.isPublic ? 'visibility_off' : 'visibility'"
|
|
:disable="!loggedUser.publicUsername"
|
|
flat
|
|
:label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
|
|
/>
|
|
|
|
<q-btn
|
|
icon="link"
|
|
@click="copyLinkToClipboard()"
|
|
flat
|
|
v-if="flight.isPublic"
|
|
label="Získat odkaz"
|
|
/>
|
|
</div>
|
|
<q-btn @click="handleDeleteAndRedirect" icon="delete" flat text-color="red" label="Smazat"/>
|
|
</q-card-actions>
|
|
|
|
<q-card-section>
|
|
<div class="text-right">
|
|
<q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}" icon="edit" color="primary">Upravit informace</q-btn>
|
|
</div>
|
|
<FlightBasicInfo
|
|
:flight="flight"
|
|
:copilot-detail-route="{name: 'copilotDetail'}"
|
|
/>
|
|
|
|
<div class="text-right">
|
|
<q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'notes'}}" icon="edit" color="primary">Upravit text</q-btn>
|
|
</div>
|
|
<article class="q-my-lg" v-html="flight.description"/>
|
|
|
|
<q-separator/>
|
|
|
|
<div class="text-right">
|
|
<q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}" icon="edit" color="primary">Upravit fotky</q-btn>
|
|
</div>
|
|
<BasicInfoBanner
|
|
v-if="flight.photos.length === 0"
|
|
:route-add="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
|
|
>
|
|
U tohoto letu nemáš nahrané žádné fotografie.
|
|
</BasicInfoBanner>
|
|
<PhotoGallery
|
|
v-else
|
|
:photos="flight.photos"
|
|
/>
|
|
|
|
<q-separator/>
|
|
|
|
<div class="text-right">
|
|
<q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
|
|
</div>
|
|
<BasicInfoBanner
|
|
v-if="flight.track.length === 0 && !flight.gpxTrack"
|
|
:route-add="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
|
|
>
|
|
Nemáš nastavenou žádnou trasu.
|
|
</BasicInfoBanner>
|
|
<FlightTrackMap
|
|
v-else
|
|
:flight="flight"
|
|
/>
|
|
</q-card-section>
|
|
</q-card>
|
|
</template>
|