Bugfixing, dotazeni uprav s uvodni fotkou
This commit is contained in:
Michal Kváček
@@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
import {useMeta, useQuasar} from "quasar";
|
||||
import {copyToClipboard, useMeta, useQuasar} from "quasar";
|
||||
import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
|
||||
import {confirmObject, successObject} from "src/composables/dialog";
|
||||
import {useAppStore} from "stores/App";
|
||||
@@ -15,6 +15,9 @@ import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
|
||||
import ContentCard from "components/ContentCard.vue";
|
||||
import AircraftInfo from "components/aircrafts/AircraftInfo.vue";
|
||||
import {useUserStore} from "stores/User";
|
||||
import {useFlightsStore} from "stores/Flights";
|
||||
import {toggleVisibility} from "src/composables/form/formHandling";
|
||||
import ContentCardEditButton from "components/ContentCardEditButton.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const $router = useRouter();
|
||||
@@ -36,12 +39,28 @@ watch(() => aircraft.value, (newVal) => {
|
||||
|
||||
const deleteAircraft = (id) => {
|
||||
$q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
|
||||
.onOk(() => {
|
||||
useAircraftsStore().destroy(id).then(() => {
|
||||
$router.push({name: "aircrafts"});
|
||||
$q.notify(successObject("Letadlo úspěšně odstraněno"));
|
||||
.onOk(() => {
|
||||
useAircraftsStore().destroy(id).then(() => {
|
||||
$router.push({name: "aircrafts"});
|
||||
$q.notify(successObject("Letadlo úspěšně odstraněno"));
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const togglePublicVisibility = () => toggleVisibility({
|
||||
$q,
|
||||
store: useAircraftsStore(),
|
||||
object: aircraft.value
|
||||
});
|
||||
|
||||
const copyLinkToClipboard = () => {
|
||||
const url = $router.resolve({
|
||||
name: "publicAircraftDetail",
|
||||
params: {id: aircraftId}
|
||||
});
|
||||
copyToClipboard(window.location.origin + url.href).then(() => {
|
||||
$q.notify(successObject("Odkaz zkopírován"))
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -53,19 +72,34 @@ const deleteAircraft = (id) => {
|
||||
<template #actions v-if="aircraft.createdById === loggedUser?.id">
|
||||
<div class="col-grow">
|
||||
<q-btn
|
||||
flat
|
||||
:to='{name: "aircraftEdit", params: {id: aircraft.id}}'
|
||||
icon="edit"
|
||||
text-color="primary"
|
||||
label="Upravit"
|
||||
@click="togglePublicVisibility"
|
||||
:icon="aircraft.isPublic ? 'visibility_off' : 'visibility'"
|
||||
flat
|
||||
:label="aircraft.isPublic ? 'Skrýt' : 'Zveřejnit'"
|
||||
/>
|
||||
<q-btn
|
||||
icon="link"
|
||||
@click="copyLinkToClipboard()"
|
||||
flat
|
||||
v-if="aircraft.isPublic"
|
||||
label="Získat odkaz"
|
||||
/>
|
||||
</div>
|
||||
<q-btn @click="deleteAircraft(aircraft.id)" icon="delete" flat text-color="red" label="Smazat"/>
|
||||
</template>
|
||||
<template #content>
|
||||
<q-card-section>
|
||||
|
||||
<ContentCardEditButton
|
||||
:to='{name: "aircraftEdit", params: {id: aircraft.id, step: "info"}}'
|
||||
label="Upravit informace"
|
||||
/>
|
||||
<AircraftInfo :aircraft="aircraft"/>
|
||||
|
||||
<ContentCardEditButton
|
||||
:to='{name: "aircraftEdit", params: {id: aircraft.id, step: "photo"}}'
|
||||
label="Titulní fotografie"
|
||||
/>
|
||||
<PhotoGallery :photos="aircraft.photos"/>
|
||||
<h3>Lety</h3>
|
||||
<q-banner v-if="aircraft.flights.length === 0" class="bg-light-blue text-white">
|
||||
@@ -75,8 +109,5 @@ const deleteAircraft = (id) => {
|
||||
</q-card-section>
|
||||
</template>
|
||||
</ContentCard>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
@@ -76,15 +76,15 @@ const formStep = computed(() => useRoute().params.step || "basic");
|
||||
|
||||
<template v-if="formStep === 'basic'">
|
||||
<q-card class="q-mx-md">
|
||||
<q-card-section>
|
||||
<AircraftForm
|
||||
@save="handleSave"
|
||||
:default-values="aircraft"
|
||||
:organizations="loggedUser.organizations"
|
||||
:is-request-pending="isMutationRunning"
|
||||
/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
<q-card-section>
|
||||
<AircraftForm
|
||||
@save="handleSave"
|
||||
:default-values="aircraft"
|
||||
:organizations="loggedUser.organizations"
|
||||
:is-request-pending="isMutationRunning"
|
||||
/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</template>
|
||||
<template v-else-if="formStep === 'photo'">
|
||||
|
||||
|
||||
@@ -15,41 +15,40 @@ import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
|
||||
import PhotoGallery from "components/photos/PhotoGallery.vue";
|
||||
import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
|
||||
import ContentCard from "components/ContentCard.vue";
|
||||
import ContentCardEditButton from "components/ContentCardEditButton.vue";
|
||||
import {toggleVisibility} from "src/composables/form/formHandling";
|
||||
|
||||
const $q = useQuasar();
|
||||
const $router = useRouter();
|
||||
const flightId = parseInt(useRoute().params.id);
|
||||
const loggedUser = storeToRefs(useUserStore()).user;
|
||||
|
||||
onMounted(() => {
|
||||
useFlightsStore().fetchDetail(flightId).then(f => {
|
||||
const flightNameFormatted = flightName(f);
|
||||
useAppStore().setPageTitle(flightNameFormatted);
|
||||
useAppStore().setBreadcrumbs([
|
||||
{to: {name: "myFlights"}, label: "Moje lety"},
|
||||
{label: flightNameFormatted}
|
||||
]);
|
||||
})
|
||||
})
|
||||
useFlightsStore().fetchDetail(flightId).then(f => {
|
||||
if (!f) return;
|
||||
|
||||
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`));
|
||||
.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 togglePublicVisibility = () => toggleVisibility({
|
||||
$q,
|
||||
store: useFlightsStore(),
|
||||
object: flight.value
|
||||
});
|
||||
|
||||
const copyLinkToClipboard = () => {
|
||||
const loggedUser = useUserStore().user;
|
||||
@@ -73,19 +72,19 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
|
||||
<template #actions>
|
||||
<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'"
|
||||
@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"
|
||||
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"/>
|
||||
@@ -93,54 +92,58 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
|
||||
|
||||
<template #content>
|
||||
<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>
|
||||
<ContentCardEditButton
|
||||
:to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}"
|
||||
label="Upravit informace"
|
||||
/>
|
||||
<FlightBasicInfo
|
||||
:flight="flight"
|
||||
:aircraft-detail-route="{name: 'aircraftDetail'}"
|
||||
:copilot-detail-route="{name: 'copilotDetail'}"
|
||||
:flight="flight"
|
||||
:aircraft-detail-route="{name: 'aircraftDetail'}"
|
||||
: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>
|
||||
<ContentCardEditButton
|
||||
:to="{name: 'flightEdit', params: {id: flightId, step: 'notes'}}"
|
||||
label="Upravit text"
|
||||
/>
|
||||
<article class="q-my-lg" v-html="flight.description"/>
|
||||
<BasicInfoBanner v-if="flight.description === ''">Popiš, jaký byl let.</BasicInfoBanner>
|
||||
|
||||
<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>
|
||||
<ContentCardEditButton
|
||||
:to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
|
||||
label="Upravit fotografie"
|
||||
/>
|
||||
<BasicInfoBanner
|
||||
v-if="flight.photos.length === 0"
|
||||
:route-add="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
|
||||
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"
|
||||
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>
|
||||
<ContentCardEditButton
|
||||
:to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
|
||||
label="Upravit trasu"
|
||||
/>
|
||||
<BasicInfoBanner
|
||||
v-if="flight.track.length === 0 && !flight.gpxTrack"
|
||||
:route-add="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
|
||||
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"
|
||||
:photos="flight.photos"
|
||||
v-else
|
||||
:flight="flight"
|
||||
:photos="flight.photos"
|
||||
/>
|
||||
</q-card-section>
|
||||
</template>
|
||||
</ContentCard>
|
||||
|
||||
</template>
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
<script setup>
|
||||
import {computed, onMounted} from "vue";
|
||||
import {useRoute} from "vue-router";
|
||||
import POIDetailSkeleton from "components/poi/POIDetailSkeleton.vue";
|
||||
import FAB from "components/FAB.vue";
|
||||
import {useAppStore} from "stores/App";
|
||||
import EmbeddedMap from "components/map/EmbeddedMap.vue";
|
||||
import {useUserStore} from "stores/User";
|
||||
@@ -11,28 +9,40 @@ import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
|
||||
import FlightsList from "components/flights/FlightsList.vue";
|
||||
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
|
||||
import PhotoGallery from "components/photos/PhotoGallery.vue";
|
||||
import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
|
||||
import ContentCard from "components/ContentCard.vue";
|
||||
import {toggleVisibility} from "src/composables/form/formHandling";
|
||||
import {copyToClipboard, useQuasar} from "quasar";
|
||||
import {successObject} from "src/composables/dialog";
|
||||
import ContentCardEditButton from "components/ContentCardEditButton.vue";
|
||||
|
||||
const loggedUser = storeToRefs(useUserStore()).user;
|
||||
|
||||
onMounted(() => {
|
||||
usePointsOfInterestStore().fetchDetail(useRoute().params.id).then((p) => {
|
||||
useAppStore().setPageTitle(`${p.name}`);
|
||||
useAppStore().setBreadcrumbs([
|
||||
{to: {name: "poi"}, label: "Zajímavá místa"},
|
||||
{label: p.name},
|
||||
])
|
||||
});
|
||||
usePointsOfInterestStore().fetchDetail(useRoute().params.id).then((p) => {
|
||||
useAppStore().setPageTitle(`${p.name}`);
|
||||
useAppStore().setBreadcrumbs([
|
||||
{to: {name: "poi"}, label: "Zajímavá místa"},
|
||||
{label: p.name},
|
||||
])
|
||||
});
|
||||
|
||||
const {isQueryRunning, pointOfInterest} = storeToRefs(usePointsOfInterestStore());
|
||||
|
||||
const titlePhoto = computed(() => {
|
||||
if (!pointOfInterest.value || pointOfInterest.value.photos.length === 0) return null;
|
||||
|
||||
return pointOfInterest.value.titlePhoto || pointOfInterest.value.photos[0];
|
||||
const $q = useQuasar();
|
||||
const togglePublicVisibility = () => toggleVisibility({
|
||||
$q,
|
||||
store: usePointsOfInterestStore(),
|
||||
object: pointOfInterest.value
|
||||
});
|
||||
|
||||
const copyLinkToClipboard = () => {
|
||||
const url = $router.resolve({
|
||||
name: "publicPOIDetail",
|
||||
params: {id: pointOfInterest.value.id}
|
||||
});
|
||||
copyToClipboard(window.location.origin + url.href).then(() => {
|
||||
$q.notify(successObject("Odkaz zkopírován"))
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -40,45 +50,63 @@ const titlePhoto = computed(() => {
|
||||
|
||||
<template v-else>
|
||||
|
||||
<ContentCard :title-photo="titlePhoto" :title="pointOfInterest.name">
|
||||
<ContentCard :title-photo="pointOfInterest.titlePhoto" :title="pointOfInterest.name">
|
||||
<template #actions v-if="pointOfInterest.createdById === loggedUser.id">
|
||||
<div class="col-grow">
|
||||
<q-btn
|
||||
flat
|
||||
:to="{name: 'poiEdit', params:{id: pointOfInterest.id}}"
|
||||
icon="edit"
|
||||
text-color="primary"
|
||||
label="Upravit"
|
||||
@click="togglePublicVisibility"
|
||||
:icon="pointOfInterest.isPublic ? 'visibility_off' : 'visibility'"
|
||||
flat
|
||||
:label="pointOfInterest.isPublic ? 'Skrýt' : 'Zveřejnit'"
|
||||
/>
|
||||
<q-btn
|
||||
icon="link"
|
||||
@click="copyLinkToClipboard()"
|
||||
flat
|
||||
v-if="pointOfInterest.isPublic"
|
||||
label="Získat odkaz"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<q-card-section>
|
||||
|
||||
<ContentCardEditButton
|
||||
:to="{name: 'poiEdit', params:{id: pointOfInterest.id, step: 'info'}}"
|
||||
label="Upravit informace"
|
||||
/>
|
||||
<article v-html="pointOfInterest.description" class="q-my-lg"/>
|
||||
|
||||
<EmbeddedMap
|
||||
v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
|
||||
:gps-latitude="pointOfInterest.gpsLatitude"
|
||||
:gps-longitude="pointOfInterest.gpsLongitude"
|
||||
:zoom="13"
|
||||
v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
|
||||
:gps-latitude="pointOfInterest.gpsLatitude"
|
||||
:gps-longitude="pointOfInterest.gpsLongitude"
|
||||
:zoom="13"
|
||||
/>
|
||||
<BasicInfoBanner v-else>
|
||||
Tento bod nemá nastavenou polohu. Po nastavení polohy tu bude zobrazena mapa.
|
||||
</BasicInfoBanner>
|
||||
|
||||
<ContentCardEditButton
|
||||
:to="{name: 'poiEdit', params:{id: pointOfInterest.id, step: 'photo'}}"
|
||||
label="Úvodní fotografie"
|
||||
/>
|
||||
<PhotoGallery
|
||||
:photos="pointOfInterest.photos"
|
||||
v-if="pointOfInterest.photos.length > 0"
|
||||
:photos="pointOfInterest.photos"
|
||||
v-if="pointOfInterest.photos.length > 0"
|
||||
/>
|
||||
<BasicInfoBanner v-else>
|
||||
Pokud přidáš toto místo k nějaké fotce, zobrazí se tu.
|
||||
</BasicInfoBanner>
|
||||
|
||||
|
||||
<h3>Tvoje lety do místa {{ pointOfInterest.name }}</h3>
|
||||
|
||||
<FlightsList
|
||||
:items="pointOfInterest.flights"
|
||||
:public="false"
|
||||
v-if="pointOfInterest.flights.length > 0 && loggedUser.id === pointOfInterest.createdById"
|
||||
:items="pointOfInterest.flights"
|
||||
:public="false"
|
||||
v-if="pointOfInterest.flights.length > 0 && loggedUser.id === pointOfInterest.createdById"
|
||||
/>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user