60 lines
1.8 KiB
Vue
60 lines
1.8 KiB
Vue
<script setup>
|
|
import {onMounted} from "vue";
|
|
import {useRoute} from "vue-router";
|
|
import POIDetailSkeleton from "components/poi/POIDetailSkeleton.vue";
|
|
import FAB from "components/FAB.vue";
|
|
import {fetchPoi, loading, poi} from "src/composables/objects/poi";
|
|
import PhotosList from "components/photos/PhotosList.vue";
|
|
import {useAppStore} from "stores/App";
|
|
import EmbeddedMap from "components/map/EmbeddedMap.vue";
|
|
import {useUserStore} from "stores/User";
|
|
import {storeToRefs} from "pinia";
|
|
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
|
|
import FlightsList from "components/flights/FlightsList.vue";
|
|
|
|
const loggedUser = storeToRefs(useUserStore()).user;
|
|
|
|
onMounted(() => {
|
|
fetchPoi(useRoute().params.id).then(() => {
|
|
useAppStore().setPageTitle(`${poi.value.name}`);
|
|
useAppStore().setBreadcrumbs([
|
|
{to: {name: "poi"}, label: "Zajímavá místa"},
|
|
{label: poi.value.name},
|
|
])
|
|
});
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<POIDetailSkeleton v-if="loading || !poi"/>
|
|
|
|
<template v-else>
|
|
<article v-html="poi.description" class="q-my-lg" />
|
|
|
|
<EmbeddedMap
|
|
v-if="poi.gpsLatitude && poi.gpsLongitude"
|
|
:gps-latitude="poi.gpsLatitude"
|
|
:gps-longitude="poi.gpsLongitude"
|
|
:zoom="13"
|
|
/>
|
|
<BasicInfoBanner v-else>
|
|
Tento bod nemá nastavenou polohu. Po nastavení polohy tu bude zobrazena mapa.
|
|
</BasicInfoBanner>
|
|
|
|
<PhotosList
|
|
:photos="poi.photos"
|
|
:show-actions="false"
|
|
v-if="poi.photos.length > 0"
|
|
/>
|
|
|
|
<BasicInfoBanner v-else>
|
|
Pokud přidáš toto místo k nějaké fotce, zobrazí se tu.
|
|
</BasicInfoBanner>
|
|
|
|
<FlightsList :items="poi.flights" v-if="poi.flights.length > 0 && loggedUser.id === poi.createdById"/>
|
|
|
|
<FAB v-if="poi.createdById === loggedUser.id" :router-link="{name: 'poiEdit', params:{id: poi.id}}" mode="edit"/>
|
|
</template>
|
|
|
|
</template>
|