diff --git a/src/components/photos/PhotoCarousel.vue b/src/components/photos/PhotoCarousel.vue index 30e5775..78e08e8 100644 --- a/src/components/photos/PhotoCarousel.vue +++ b/src/components/photos/PhotoCarousel.vue @@ -22,22 +22,24 @@ const props = defineProps({ } }) +const $route = useRoute(); +const photoId = parseInt($route.query.photo); + const displayedPhoto = ref(null); -const openPhotoDetail = ref(false); -const photoData = ref(null); -const openDetail = ({photo, idx, allPhotos}) => { - openPhotoDetail.value = true; - photoData.value = {photo, idx, allPhotos}; -} + +const emits = defineEmits(["open-detail"]); watch(() => props.photos, (newVal) => { if (newVal.length === 0) return; displayedPhoto.value = props.coverPhotoUrl || newVal[0].url; }, {immediate: true}); -const $route = useRoute(); + +const openDetail = ({photo, idx, allPhotos}) => { + emits("open-detail", {photo, idx, allPhotos}); +} + onMounted(() => { - const photoId = parseInt($route.query.photo); const idx = props.photos.findIndex(p => p.id === photoId); if (idx >= 0) { const photo = props.photos[idx]; @@ -75,13 +77,4 @@ onMounted(() => { - - diff --git a/src/components/photos/PhotoDetail.vue b/src/components/photos/PhotoDetail.vue index d1e3547..fcecc3b 100644 --- a/src/components/photos/PhotoDetail.vue +++ b/src/components/photos/PhotoDetail.vue @@ -182,7 +182,6 @@ const showExtraInfo = () => { :class='{"shadow-5": true, "active-thumbnail": idx === displayedPhotoIndex}' /> -
diff --git a/src/components/photos/PhotosList.vue b/src/components/photos/PhotosList.vue index ec1ead9..c267597 100644 --- a/src/components/photos/PhotosList.vue +++ b/src/components/photos/PhotosList.vue @@ -23,7 +23,7 @@ onMounted(() => { } }); -const emits = defineEmits(["edit", "delete", "batch-edit", "batch-rotate"]) +const emits = defineEmits(["edit", "delete", "batch-edit", "batch-rotate", "photo-click"]) const openEdit = (photo) => { emits("edit", photo); @@ -33,25 +33,27 @@ const $q = useQuasar(); const confirmPhotoDelete = (id) => { $q.dialog(confirmObject("Opravdu chces smazat tuto fotku?")) - .onOk(() => { - emits("delete", id); - }); + .onOk(() => { + emits("delete", id); + }); } const confirmBatchPhotoDelete = () => { $q.dialog(confirmObject("Opravdu chces smazat vybrané fotky?")) - .onOk(() => { - for (const id in batchEdit.value) { - if (!batchEdit.value[id]) continue; - emits("delete", parseInt(id)); - batchEdit.value[id] = false; - } - }); + .onOk(() => { + for (const id in batchEdit.value) { + if (!batchEdit.value[id]) continue; + emits("delete", parseInt(id)); + batchEdit.value[id] = false; + } + }); } const handleImageClick = (photo, idx) => { if (props.showActions) { batchEdit.value[photo.id] = !batchEdit.value[photo.id]; + } else { + emits("photo-click", {photo, idx}); } } @@ -120,7 +122,7 @@ const batchOptionsProps = computed(() => ({
- +
{{ photo.name }} @@ -139,9 +141,9 @@ const batchOptionsProps = computed(() => ({
- - - + + +
diff --git a/src/composables/photos/photo.js b/src/composables/photos/photo.js new file mode 100644 index 0000000..5392a1c --- /dev/null +++ b/src/composables/photos/photo.js @@ -0,0 +1,12 @@ +import {ref} from "vue"; +import {flight} from "src/composables/objects/flight"; + +export const openPhotoDetail = ref(false); +export const photoData = ref(null); +export const openDetail = ({photo, idx, allPhotos}) => { + openPhotoDetail.value = true; + photoData.value = {photo, idx, allPhotos}; +} +export const openPhotoFromList = ({photo, idx}) => { + openDetail({photo, idx, allPhotos: flight.value.photos}); +} diff --git a/src/pages/profile/flight/FlightDetailPage.vue b/src/pages/profile/flight/FlightDetailPage.vue index bf87d67..8ceadd3 100644 --- a/src/pages/profile/flight/FlightDetailPage.vue +++ b/src/pages/profile/flight/FlightDetailPage.vue @@ -12,6 +12,10 @@ import PhotoCarousel from "components/photos/PhotoCarousel.vue"; import FlightTrackMap from "components/flights/FlightTrackMap.vue"; import {useUserStore} from "stores/User"; import {storeToRefs} from "pinia"; +import PhotosList from "components/photos/PhotosList.vue"; +import {openDetail, openPhotoDetail, openPhotoFromList, photoData} from "src/composables/photos/photo"; +import PhotoDetail from "components/photos/PhotoDetail.vue"; +import BasicInfoBanner from "components/banners/BasicInfoBanner.vue"; const $q = useQuasar(); const $router = useRouter(); @@ -44,11 +48,11 @@ const handleDeleteAndRedirect = () => { const togglePublicVisibility = () => { const newVisibility = !flight.value.isPublic; useFlightsStore() - .update(flightId, {isPublic: newVisibility}) - .then((updatedFlight) => { - flight.value = updatedFlight; - $q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto")); - }); + .update(flightId, {isPublic: newVisibility}) + .then((updatedFlight) => { + flight.value = updatedFlight; + $q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto")); + }); }; const copyLinkToClipboard = () => { @@ -69,46 +73,94 @@ const copyLinkToClipboard = () => {
+
+ Upravit informace +
+
+ Upravit text +
- + + +
+ Upravit fotky +
+ + U tohoto letu nemáš nahrané žádné fotografie. + + + + + +
+ Upravit trasu +
+ + Nemáš nastavenou žádnou trasu. + + + + diff --git a/src/pages/public/pilotProfile/FlightDetailPage.vue b/src/pages/public/pilotProfile/FlightDetailPage.vue index 5f1bb8c..22c4341 100644 --- a/src/pages/public/pilotProfile/FlightDetailPage.vue +++ b/src/pages/public/pilotProfile/FlightDetailPage.vue @@ -10,6 +10,9 @@ import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue"; import {fetchUser, loading as pilotLoading, user as pilot} from "src/composables/objects/user"; import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue"; import PilotProfileCard from "components/profile/PilotProfileCard.vue"; +import PhotosList from "components/photos/PhotosList.vue"; +import PhotoDetail from "components/photos/PhotoDetail.vue"; +import {openDetail, openPhotoDetail, openPhotoFromList, photoData} from "src/composables/photos/photo"; const routeParams = useRoute().params; onMounted(() => { @@ -26,7 +29,6 @@ watch(flight, (newVal) => { {label: flightNameFormatted} ]); }); - + + +