127 lines
4.7 KiB
Vue
127 lines
4.7 KiB
Vue
<script setup>
|
|
import {useRoute} from "vue-router";
|
|
import POIDetailSkeleton from "components/poi/skeletons/POIDetailSkeleton.vue";
|
|
import {useAppStore} from "stores/App";
|
|
import EmbeddedMap from "components/map/EmbeddedMap.vue";
|
|
import {useLoggedUserStore} from "stores/LoggedUser";
|
|
import {storeToRefs} from "pinia";
|
|
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 ContentCard from "components/ContentCard.vue";
|
|
import {toggleVisibility} from "src/composables/form/formHandling";
|
|
import { useQuasar} from "quasar";
|
|
import ContentCardEditButton from "components/ContentCardEditButton.vue";
|
|
import {useFlightsStore} from "stores/Flights";
|
|
import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
|
|
import {usePagination} from "src/composables/pagination";
|
|
import PublishButton from "components/inputs/PublishButton.vue";
|
|
import CopyLinkButton from "components/inputs/CopyLinkButton.vue";
|
|
|
|
const loggedUser = storeToRefs(useLoggedUserStore()).user;
|
|
const poiId = parseInt(useRoute().params.id);
|
|
|
|
usePointsOfInterestStore().fetchDetail(poiId).then((p) => {
|
|
if (!p) return;
|
|
|
|
useAppStore().setPageTitle(`${p.name}`);
|
|
useAppStore().setBreadcrumbs([
|
|
{to: {name: "poi"}, label: "Zajímavá místa"},
|
|
{label: p.name},
|
|
])
|
|
});
|
|
|
|
|
|
const $q = useQuasar();
|
|
const togglePublicVisibility = (variables) => toggleVisibility({
|
|
$q, store: usePointsOfInterestStore(), object: pointOfInterest.value, variables
|
|
});
|
|
|
|
const {filters, loadPage, paginationLimit} = usePagination();
|
|
filters.value = {pointOfInterestId: poiId};
|
|
const loadNextFlightsPage = (appendItems) => loadPage({
|
|
fetchFunc: useFlightsStore().fetch,
|
|
appendItems
|
|
});
|
|
loadNextFlightsPage(false);
|
|
const {isQueryRunning: areFlightsLoading, totalItemsCount, flights} = storeToRefs(useFlightsStore());
|
|
const {isQueryRunning, pointOfInterest} = storeToRefs(usePointsOfInterestStore());
|
|
</script>
|
|
|
|
<template>
|
|
<POIDetailSkeleton v-if="isQueryRunning || !pointOfInterest"/>
|
|
|
|
<template v-else>
|
|
|
|
<ContentCard :title-photo="pointOfInterest.titlePhoto" :title="pointOfInterest.name">
|
|
<template #actions v-if="pointOfInterest.createdById === loggedUser.id">
|
|
<div class="col-grow">
|
|
<PublishButton
|
|
url-prefix="/mista/"
|
|
:is-public="pointOfInterest.isPublic"
|
|
:require-url-slug="pointOfInterest.urlSlug === ''"
|
|
@change-visibility="togglePublicVisibility"
|
|
/>
|
|
<CopyLinkButton
|
|
v-if="pointOfInterest.isPublic"
|
|
:route="{name: 'publicPOIDetail', params: {slug: pointOfInterest.urlSlug}}"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<template #content>
|
|
<q-card-section>
|
|
|
|
<ContentCardEditButton
|
|
v-if="pointOfInterest.createdById === loggedUser?.id"
|
|
: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"
|
|
/>
|
|
<BasicInfoBanner v-else>
|
|
Tento bod nemá nastavenou polohu. Po nastavení polohy tu bude zobrazena mapa.
|
|
</BasicInfoBanner>
|
|
|
|
<ContentCardEditButton
|
|
v-if="pointOfInterest.createdById === loggedUser?.id"
|
|
:to="{name: 'poiEdit', params:{id: pointOfInterest.id, step: 'photo'}}"
|
|
label="Úvodní fotografie"
|
|
/>
|
|
<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>
|
|
|
|
|
|
<h3>Tvoje lety do místa {{ pointOfInterest.name }}</h3>
|
|
|
|
<FlightsListSkeleton v-if="areFlightsLoading && !flights.length"/>
|
|
<FlightsList
|
|
v-else-if="flights.length > 0"
|
|
:public="false"
|
|
:items="flights"
|
|
:total-items-count="totalItemsCount"
|
|
:is-query-running="areFlightsLoading"
|
|
:items-per-page="paginationLimit"
|
|
@load-more="loadNextFlightsPage(true)"
|
|
/>
|
|
<BasicInfoBanner v-else>
|
|
Na tomto místě jsi zatím nebyl/a.
|
|
</BasicInfoBanner>
|
|
</q-card-section>
|
|
</template>
|
|
</ContentCard>
|
|
</template>
|
|
</template>
|