poletani.cz/app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Lepsi verejna cast, ssr, lepsi prace s fotkamaa

Browse Source
This commit is contained in:
Michal Kváček
2023-12-04 22:46:23 +01:00
parent 11cc6ad107
commit 3bd4d7ba52
62 changed files with 1331 additions and 619 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/profile/aircraft/AircraftDetailPage.vue
+48 -25
View File
@@ -1,28 +1,33 @@
<script setup>
import {onMounted, watch} from "vue";
import {useAircraftsStore} from "stores/Aircrafts";
import {useRoute, useRouter} from "vue-router";
import {useQuasar} from "quasar";
import {useMeta, useQuasar} from "quasar";
import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
import {successObject} from "src/composables/dialog";
import {confirmObject, successObject} from "src/composables/dialog";
import {useAppStore} from "stores/App";
import FlightsList from "components/flights/FlightsList.vue";
import AircraftDetailCard from "components/aircrafts/AircraftDetailCard.vue";
import AircraftDetailCard from "components/aircrafts/AircraftInfo.vue";
import {storeToRefs} from "pinia";
import {useAircraftsStore} from "stores/Aircrafts";
import {computed, watch} from "vue";
import {metaData} from "src/composables/meta";
import PhotoGallery from "components/photos/PhotoGallery.vue";
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";
const $q = useQuasar();
const $router = useRouter();
const aircraftId = parseInt(useRoute().params.id);
onMounted(() => {
useAircraftsStore().fetchDetail(aircraftId);
})
useAircraftsStore().fetchDetail(aircraftId);
const loggedUser = storeToRefs(useUserStore()).user;
const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
watch(() => aircraft.value, (newVal) => {
if (!newVal) return;
useAppStore().setPageTitle(newVal.callSign);
useMeta(() => metaData({title: newVal.callSign}));
useAppStore().setBreadcrumbs([
{label: "Letadla", to: {name: "aircrafts"}},
{label: newVal.callSign}
@@ -30,29 +35,47 @@ watch(() => aircraft.value, (newVal) => {
});
const deleteAircraft = (id) => {
useAircraftsStore().destroy(id).then(() => {
$router.push({name: "aircrafts"});
$q.notify(successObject("Letadlo úspěšně odstraněno"));
});
}
$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"));
});
});
};
</script>
<template>
<AircraftDetailSkeleton v-if="isQueryRunning || !aircraft"/>
<template v-else>
<AircraftDetailCard
:aircraft="aircraft"
@delete="deleteAircraft"
/>
<ContentCard :title-photo="aircraft.titlePhoto" :title="aircraft.callSign">
<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"
/>
</div>
<q-btn @click="deleteAircraft(aircraft.id)" icon="delete" flat text-color="red" label="Smazat"/>
</template>
<template #content>
<q-card-section>
<AircraftInfo :aircraft="aircraft"/>
<PhotoGallery :photos="aircraft.photos"/>
<h3>Lety</h3>
<q-banner v-if="aircraft.flights.length === 0" class="bg-light-blue text-white">
Zatím žádné lety.
</q-banner>
<FlightsList :items="aircraft.flights" :public="false" v-else/>
</q-card-section>
</template>
</ContentCard>
<q-card class="flight-detail-card" flat>
<h3>Lety</h3>
<q-banner v-if="aircraft.flights.length === 0" class="bg-light-blue text-white">
Zatím žádné lety.
</q-banner>
<FlightsList :items="aircraft.flights" v-else/>
</q-card>
</template>
src/pages/profile/aircraft/EditAircraftPage.vue
+56 -13
View File
@@ -3,13 +3,17 @@ import AircraftForm from "components/aircrafts/AircraftForm.vue";
import {useAircraftsStore} from "stores/Aircrafts";
import {useRoute, useRouter} from "vue-router";
import {useQuasar} from "quasar";
import {onMounted} from "vue";
import {computed, onMounted} from "vue";
import AircraftEditSkeleton from "components/aircrafts/AircraftEditSkeleton.vue";
import {successObject} from "src/composables/dialog";
import {useAppStore} from "stores/App";
import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
import {storeToRefs} from "pinia";
import {useUserStore} from "stores/User";
import POIForm from "components/poi/POIForm.vue";
import POIEditSkeleton from "components/poi/POIEditSkeleton.vue";
import PhotosEditorList from "components/photos/PhotosEditorList.vue";
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
const $router = useRouter();
@@ -36,25 +40,64 @@ onMounted(() => {
});
});
const setTitlePhoto = (titlePhoto) => {
useAircraftsStore().update(aircraftId, {titlePhotoId: titlePhoto.id}).then(() => {
$q.notify(successObject("Úvodní fotka nastavena"));
})
}
const formStep = computed(() => useRoute().params.step || "basic");
</script>
<template>
<AircraftEditSkeleton v-if="isQueryRunning || !aircraft"/>
<AccessDeniedBanner
v-else-if="aircraft.createdById !== loggedUser.id"
:route-back="{name: 'aircraftDetail', params: {id: aircraftId}}"
v-else-if="aircraft.createdById !== loggedUser.id"
:route-back="{name: 'aircraftDetail', params: {id: aircraftId}}"
/>
<q-card v-else class="q-mx-md">
<q-card-section>
<AircraftForm
@save="handleSave"
:default-values="aircraft"
:organizations="loggedUser.organizations"
:is-request-pending="isMutationRunning"
<template v-else>
<q-tabs active-color="primary" class="q-mb-lg" v-if="aircraft.photos.length > 0">
<q-route-tab
icon="edit"
label="Informace"
replace
:to="{name: 'aircraftEdit', params: {id: aircraft?.id, step: 'basic'}}"
exact
/>
</q-card-section>
</q-card>
<q-route-tab
icon="add_a_photo"
label="Fotky"
replace
:to="{name: 'aircraftEdit', params: {id: aircraft?.id, step: 'photo'}}"
exact
/>
</q-tabs>
<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>
</template>
<template v-else-if="formStep === 'photo'">
<q-spinner v-if="isQueryRunning || !aircraft"/>
<PhotosEditorList
v-else
:photos="aircraft.photos"
:title-photo="aircraft.titlePhoto"
:show-actions="false"
@set-title-photo="setTitlePhoto"
/>
</template>
</template>
</template>
src/pages/profile/copilot/CopilotDetailPage.vue
+41 -7
View File
@@ -1,12 +1,15 @@
<script setup>
import {useRoute} from "vue-router";
import {onMounted} from "vue";
import {computed, onMounted} from "vue";
import CopilotDetailSkeleton from "components/copilots/CopilotDetailSkeleton.vue";
import {useAppStore} from "stores/App";
import FAB from "components/FAB.vue";
import FlightsList from "components/flights/FlightsList.vue";
import {useCopilotsStore} from "stores/Copilots";
import {storeToRefs} from "pinia";
import PhotoGallery from "components/photos/PhotoGallery.vue";
import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
import ContentCard from "components/ContentCard.vue";
const copilotId = parseInt(useRoute().params.id);
onMounted(() => {
@@ -20,20 +23,51 @@ onMounted(() => {
});
const {isQueryRunning, copilot} = storeToRefs(useCopilotsStore());
const copilotTitlePhoto = computed(() => {
if (!copilot.value || copilot.value.photos.length === 0) return null;
return copilot.value.photos[0];
});
</script>
<template>
<CopilotDetailSkeleton v-if="isQueryRunning || !copilot"/>
<template v-else>
<h3>Společné lety</h3>
<q-banner v-if="copilot.flights.length === 0" class="bg-light-blue text-white">
Zatím tu nemáš uložené žádné společné lety.
</q-banner>
<ContentCard :title-photo="copilotTitlePhoto" :title="copilot.name">
<template #actions>
<div class="col-grow">
<q-btn
flat
:to="{name: 'copilotEdit', params: {id: copilotId}}"
icon="edit"
text-color="primary"
label="Upravit"
/>
</div>
</template>
<template #content>
<q-card-section>
<PhotoGallery :photos="copilot.photos" v-if="copilot.photos.length > 0"/>
<q-banner v-else class="bg-light-blue text-white">
Zatím tu nemáš žádné společné fotky. Po nahrání fotky můžeš označit tuto osobu a takto označené
fotografie se zobrazí v galerii.
</q-banner>
<FlightsList :items="copilot.flights" v-else/>
<h3>Společné lety</h3>
<q-banner v-if="copilot.flights.length === 0" class="bg-light-blue text-white">
Zatím tu nemáš uložené žádné společné lety.
</q-banner>
<FlightsList :items="copilot.flights" :public="false" v-else/>
</q-card-section>
</template>
</ContentCard>
<FAB mode="edit" :router-link="{name: 'copilotEdit', params: {id: copilotId}}"/>
</template>
</template>
src/pages/profile/event/EventDetailPage.vue
+1 -1
View File
@@ -49,7 +49,7 @@ const {isQueryRunning, event} = storeToRefs(useEventsStore());
Zatím tu nemáš uložené žádné lety.
</q-banner>
<FlightsList :items="event.flights" v-else/>
<FlightsList :items="event.flights" :public="false" v-else/>
<FAB mode="edit" :router-link="{name: 'eventEdit', params: {id: eventId}}"/>
</template>
src/pages/profile/flight/EditFlightPage.vue
+57 -41
View File
@@ -1,6 +1,6 @@
<script setup>
import FlightFormSteps from "components/flights/form/FlightFormSteps.vue";
import {onMounted, ref, watch} from "vue";
import {computed, onMounted, ref, watch} from "vue";
import {useRoute} from "vue-router";
import {useFlightsStore} from "stores/Flights";
import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
@@ -14,8 +14,8 @@ import FlightFormCopilot from "components/flights/form/FlightFormCopilot.vue";
import {useCopilotsStore} from "stores/Copilots";
import FlightFormNotes from "components/flights/form/FlightFormNotes.vue";
import FlightFormPhotos from "components/flights/form/FlightFormPhotos.vue";
import {usePhotosStore} from "stores/Photo";
import PhotosList from "components/photos/PhotosEditorList.vue";
import {usePhotosStore} from "stores/Photos";
import PhotosEditorList from "components/photos/PhotosEditorList.vue";
import {errorObject, successObject, warningObject} from "src/composables/dialog";
import PhotoFormDialog from "components/photos/PhotoFormDialog.vue";
import FlightFormTrack from "components/flights/form/FlightFormTrack.vue";
@@ -67,7 +67,6 @@ const handleFlightEdit = (data) => {
const isRequestPending = storeToRefs(useFlightsStore()).isMutationRunning;
const uploadInProgress = ref(false);
const handlePhotosUpload = (data) => {
// todo udelat batch napr. po 5 requestech
// TODO: udelat batch i pro rotace a davkove upravy (info)
@@ -101,6 +100,12 @@ const deletePhoto = (id) => {
});
}
const setTitlePhoto = (photo) => {
useFlightsStore().update(flight.value.id, {titlePhotoId: photo.id}).then(f => {
$q.notify(successObject("Úvodní fotografie úspěšně nastavena"));
});
}
const rotatePhotos = ({photos, direction}) => {
const promises = [];
for (const photo of photos) {
@@ -123,11 +128,15 @@ const rotatePhotos = ({photos, direction}) => {
});
}
const updateSinglePhoto = (id, formData) => usePhotosStore().update(id, formData).then((data) => {
const idx = _findPhotoIndex(data.id);
flight.value.photos[idx] = data;
usePointsOfInterestStore().fetch();
});
const updateSinglePhoto = (id, formData) => {
formData.copilots = formData.copilots.map(c => ({id: c.id, name: c.name}));
return usePhotosStore().update(id, formData).then((data) => {
const idx = _findPhotoIndex(data.id);
flight.value.photos[idx] = data;
usePointsOfInterestStore().fetch();
});
}
const handlePhotoUpdate = (flightId, formData) => {
const photoId = formData.id;
@@ -170,13 +179,14 @@ const handleBatchPhotoEdit = async (flightId, data) => {
const promises = [];
for (const id of photoIds) {
const updateData = {};
const updateData = {
isAircraft: data.isAircraft,
copilots: data.copilots.map(c => ({id: c.id, name: c.name}))
};
if (data.name !== '') updateData.name = data.name;
if (data.description !== '') updateData.description = data.description;
if (data.pointOfInterest) updateData.pointOfInterest = data.pointOfInterest;
if (Object.keys(updateData).length === 0) continue;
promises.push(updateSinglePhoto(id, data));
}
@@ -191,7 +201,6 @@ const handleBatchPhotoEdit = async (flightId, data) => {
if (error > 0) $q.notify(errorObject(`Nepovedlo se uložit ${error} fotografií`))
});
}
</script>
<template>
@@ -203,11 +212,11 @@ const handleBatchPhotoEdit = async (flightId, data) => {
<q-tab-panels v-model="formStep">
<q-tab-panel name="basic">
<FlightFormBasic
@save="handleFlightEdit"
:flight="flight"
:locations="pointsOfInterest"
:airports="airports"
:aircrafts="aircrafts"
@save="handleFlightEdit"
:flight="flight"
:locations="pointsOfInterest"
:airports="airports"
:aircrafts="aircrafts"
/>
</q-tab-panel>
@@ -217,43 +226,50 @@ const handleBatchPhotoEdit = async (flightId, data) => {
<q-tab-panel name="track">
<FlightFormTrack
v-if="pointsOfInterest"
:flight="flight"
:locations="pointsOfInterest"
:airports="airports"
@save="handleFlightEdit"
v-if="pointsOfInterest"
:flight="flight"
:locations="pointsOfInterest"
:airports="airports"
@save="handleFlightEdit"
/>
</q-tab-panel>
<q-tab-panel name="photos">
<FlightFormPhotos
:flight="flight"
:is-request-pending="isRequestPending || uploadInProgress"
@save="handlePhotosUpload"
:flight="flight"
:is-request-pending="isRequestPending || uploadInProgress"
@save="handlePhotosUpload"
/>
<PhotosList
:photos="flight.photos"
@edit="openPhotoEdit"
@batch-edit="openBatchPhotoForm"
@batch-rotate="rotatePhotos"
@delete="deletePhoto"
<PhotosEditorList
:title-photo="flight.titlePhoto"
:photos="flight.photos"
:show-actions="true"
@edit="openPhotoEdit"
@batch-edit="openBatchPhotoForm"
@batch-rotate="rotatePhotos"
@delete="deletePhoto"
@set-title-photo="setTitlePhoto"
/>
<!-- Dialogs for photo edit -->
<PhotoFormDialog
v-model="openEdit"
:locations="pointsOfInterest"
:photo="editPhoto"
@save="handlePhotoUpdate(flightId, $event)"
v-model="openEdit"
:copilots="flight.copilots"
:aircraft="flight.aircraft"
:locations="pointsOfInterest"
:photo="editPhoto"
@save="handlePhotoUpdate(flightId, $event)"
/>
<BatchPhotoFormDialog
v-model="openBatchEdit"
:locations="pointsOfInterest"
:photos="editBatchPhotos"
@save="handleBatchPhotoEdit(flightId, $event)"
@delete="deletePhoto"
v-model="openBatchEdit"
:locations="pointsOfInterest"
:photos="editBatchPhotos"
:copilots="flight.copilots"
:aircraft="flight.aircraft"
@save="handleBatchPhotoEdit(flightId, $event)"
@delete="deletePhoto"
/>
</q-tab-panel>
src/pages/profile/flight/FlightDetailPage.vue
+54 -53
View File
@@ -13,13 +13,15 @@ import {useUserStore} from "stores/User";
import {storeToRefs} from "pinia";
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";
const $q = useQuasar();
const $router = useRouter();
const flightId = parseInt(useRoute().params.id);
const loggedUser = storeToRefs(useUserStore()).user;
onMounted(() => {flight.value
onMounted(() => {
useFlightsStore().fetchDetail(flightId).then(f => {
const flightNameFormatted = flightName(f);
useAppStore().setPageTitle(flightNameFormatted);
@@ -40,7 +42,6 @@ const handleDeleteAndRedirect = () => {
});
}
const togglePublicVisibility = () => {
const newVisibility = !flight.value.isPublic;
useFlightsStore()
@@ -67,19 +68,14 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
<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>
<ContentCard :title-photo="flight.titlePhoto" :title="flightName(flight)" v-else>
<q-card-actions class="q-my-md">
<template #actions>
<div class="col-grow">
<q-btn
@click="togglePublicVisibility"
:icon="flight.isPublic ? 'visibility_off' : 'visibility'"
:disable="!loggedUser.publicUsername"
:disable="!loggedUser?.publicUsername"
flat
:label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
/>
@@ -93,53 +89,58 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
/>
</div>
<q-btn @click="handleDeleteAndRedirect" icon="delete" flat text-color="red" label="Smazat"/>
</q-card-actions>
</template>
<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'}"
/>
<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>
<FlightBasicInfo
: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>
<article class="q-my-lg" v-html="flight.description"/>
<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/>
<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"
/>
<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/>
<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"
:photos="flight.photos"
/>
</q-card-section>
</template>
</ContentCard>
<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>
src/pages/profile/flight/FlightsPage.vue
+1 -1
View File
@@ -32,7 +32,7 @@ const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
Nemáš zaznamenaný žádný let.
</BasicInfoBanner>
<FlightsList v-else :items="flights"/>
<FlightsList v-else :items="flights" :public="false" />
<FAB mode="add" :router-link="{name: 'addFlight'}"/>
</template>
src/pages/profile/flight/PhotoEditorPage.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<script setup>
import {useRoute} from "vue-router";
import {onMounted, ref, watch} from "vue";
import {usePhotosStore} from "stores/Photo";
import {usePhotosStore} from "stores/Photos";
import {useAppStore} from "stores/App";
import {flightName} from "src/composables/flight";
import VuePictureCropper from 'vue-picture-cropper';
src/pages/profile/poi/EditPointOfInterestPage.vue
+48 -5
View File
@@ -1,6 +1,6 @@
<script setup>
import POIEditSkeleton from "components/poi/POIEditSkeleton.vue";
import {onMounted} from "vue";
import {computed, onMounted} from "vue";
import {useRoute, useRouter} from "vue-router";
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
import {useAppStore} from "stores/App";
@@ -11,6 +11,8 @@ import {storeToRefs} from "pinia";
import POIForm from "components/poi/POIForm.vue";
import {useUserStore} from "stores/User";
import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
import PhotoEditorSkeleton from "components/photos/PhotoEditorSkeleton.vue";
import PhotosEditorList from "components/photos/PhotosEditorList.vue";
const poiId = parseInt(useRoute().params.id);
@@ -27,7 +29,7 @@ onMounted(() => {
usePointsOfInterestTypeStore().fetch();
})
const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).items;
const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).types;
const loggedUser = storeToRefs(useUserStore()).user;
const {isQueryRunning, pointOfInterest, isMutationRunning} = storeToRefs(usePointsOfInterestStore());
@@ -39,13 +41,54 @@ const handleSave = (data) => {
router.push({name: "poiDetail", params: {id: poiId}});
});
}
const setTitlePhoto = (titlePhoto) => {
usePointsOfInterestStore().update(poiId, {titlePhotoId: titlePhoto.id}).then(() => {
$q.notify(successObject("Úvodní fotka nastavena"));
})
}
const formStep = computed(() => useRoute().params.step || "basic");
</script>
<template>
<POIEditSkeleton v-if="isQueryRunning"/>
<AccessDeniedBanner
v-else-if="pointOfInterest.createdById !== loggedUser.id"
v-if="pointOfInterest && !isQueryRunning && pointOfInterest.createdById !== loggedUser?.id"
:route-back="{name: 'poiDetail', params: {id: poiId}}"
/>
<POIForm :poi="pointOfInterest" :types="poiTypes" v-else @save="handleSave"/>
<q-tabs active-color="primary" class="q-mb-lg">
<q-route-tab
icon="edit"
label="Informace"
replace
:to="{name: 'poiEdit', params: {id: pointOfInterest?.id, step: 'basic'}}"
exact
/>
<q-route-tab
icon="add_a_photo"
label="Fotky"
replace
:to="{name: 'poiEdit', params: {id: pointOfInterest?.id, step: 'photo'}}"
exact
/>
</q-tabs>
<template v-if="formStep === 'basic'">
<POIEditSkeleton v-if="isQueryRunning || !pointOfInterest"/>
<POIForm :poi="pointOfInterest" :types="poiTypes" v-else @save="handleSave"/>
</template>
<template v-else-if="formStep === 'photo'">
<q-spinner v-if="isQueryRunning || !pointOfInterest"/>
<PhotosEditorList
v-else
:photos="pointOfInterest.photos"
:title-photo="pointOfInterest.titlePhoto"
:show-actions="false"
@set-title-photo="setTitlePhoto"
/>
</template>
</template>
src/pages/profile/poi/PointOfInterestDetailPage.vue
+48 -21
View File
@@ -1,5 +1,5 @@
<script setup>
import {onMounted} from "vue";
import {computed, onMounted} from "vue";
import {useRoute} from "vue-router";
import POIDetailSkeleton from "components/poi/POIDetailSkeleton.vue";
import FAB from "components/FAB.vue";
@@ -11,6 +11,8 @@ 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";
const loggedUser = storeToRefs(useUserStore()).user;
@@ -25,36 +27,61 @@ onMounted(() => {
});
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];
});
</script>
<template>
<POIDetailSkeleton v-if="isQueryRunning || !pointOfInterest"/>
<template v-else>
<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"
/>
<BasicInfoBanner v-else>
Tento bod nemá nastavenou polohu. Po nastavení polohy tu bude zobrazena mapa.
</BasicInfoBanner>
<ContentCard :title-photo="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"
/>
</div>
</template>
<PhotoGallery
:photos="pointOfInterest.photos"
v-if="pointOfInterest.photos.length > 0"
/>
<template #content>
<q-card-section>
<article v-html="pointOfInterest.description" class="q-my-lg"/>
<BasicInfoBanner v-else>
Pokud přidáš toto místo k nějaké fotce, zobrazí se tu.
</BasicInfoBanner>
<EmbeddedMap
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>
<FlightsList :items="pointOfInterest.flights" v-if="pointOfInterest.flights.length > 0 && loggedUser.id === pointOfInterest.createdById"/>
<PhotoGallery
: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>
<FAB v-if="pointOfInterest.createdById === loggedUser.id" :router-link="{name: 'poiEdit', params:{id: pointOfInterest.id}}" mode="edit"/>
<FlightsList
:items="pointOfInterest.flights"
:public="false"
v-if="pointOfInterest.flights.length > 0 && loggedUser.id === pointOfInterest.createdById"
/>
</q-card-section>
</template>
</ContentCard>
</template>
</template>