Lepsi podpora elevace terenu
This commit is contained in:
Michal Kváček
@@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import EmbeddedMap from "components/map/EmbeddedMap.vue";
|
||||
import {computed, onMounted, ref, watch} from "vue";
|
||||
import {computed, onMounted, ref} from "vue";
|
||||
import {formatDatetime} from "src/composables/datetimeUtils";
|
||||
import 'vue-inner-image-zoom/lib/vue-inner-image-zoom.css'
|
||||
import {useQuasar} from "quasar";
|
||||
@@ -28,8 +28,7 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits(["update:modelValue"])
|
||||
|
||||
|
||||
const open = computed({
|
||||
const isDetailOpened = computed({
|
||||
get() {
|
||||
return props.modelValue;
|
||||
},
|
||||
@@ -61,16 +60,6 @@ const showDetail = (idx) => {
|
||||
photoIndex.value = idx;
|
||||
}
|
||||
|
||||
const thumbnailsRef = ref(null);
|
||||
watch(photoIndex, (newVal) => {
|
||||
if (!thumbnailsRef.value) return;
|
||||
const thumbnailWidth = 200;
|
||||
const thumbnailBarWidth = thumbnailsRef.value.$el.clientWidth;
|
||||
const thumbnailPosition = newVal * thumbnailWidth;
|
||||
const scrollTo = Math.max(0, thumbnailPosition - thumbnailBarWidth/2);
|
||||
thumbnailsRef.value.setScrollPosition("horizontal", scrollTo, 500)
|
||||
});
|
||||
|
||||
const showExtra = ref(false);
|
||||
|
||||
const $q = useQuasar();
|
||||
@@ -80,94 +69,91 @@ const imageFullscreen = ref(false);
|
||||
|
||||
<template>
|
||||
<q-dialog
|
||||
v-model="open"
|
||||
full-width
|
||||
:maximized="isMaximized"
|
||||
v-model="isDetailOpened"
|
||||
full-width
|
||||
:maximized="isMaximized"
|
||||
>
|
||||
<q-card
|
||||
v-touch-swipe.mouse.left="prevPhoto"
|
||||
v-touch-swipe.mouse.right="nextPhoto"
|
||||
@keyup.left="prevPhoto"
|
||||
@keyup.right="nextPhoto"
|
||||
>
|
||||
<q-card>
|
||||
<q-card-section class="bg-black text-white" v-if="isMaximized">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<strong>{{ photo.name || defaultTitle }}</strong>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<q-btn round text-color="white" size="sm" icon="close" @click="open = false"/>
|
||||
<div class="col-1 text-right">
|
||||
<q-btn round text-color="white" size="sm" icon="close" @click="isDetailOpened = false"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section :class="{'q-pa-none': isMaximized}">
|
||||
<div :class="{'relative-position': true, 'image-full-height': imageFullscreen}">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="text-center"
|
||||
v-touch-swipe.mouse.right="prevPhoto"
|
||||
v-touch-swipe.mouse.left="nextPhoto"
|
||||
@keyup.left="prevPhoto"
|
||||
@keyup.right="nextPhoto">
|
||||
<inner-image-zoom
|
||||
:move-type="isMaximized ? 'drag' : 'pan'"
|
||||
:zoomScale="0.75"
|
||||
:hide-hint="true"
|
||||
:after-zoom-in="() => imageFullscreen = true"
|
||||
:after-zoom-out="() => imageFullscreen = false"
|
||||
:src="photo.url"
|
||||
:move-type="isMaximized ? 'drag' : 'pan'"
|
||||
:zoomScale="0.75"
|
||||
:hide-hint="true"
|
||||
:after-zoom-in="() => imageFullscreen = true"
|
||||
:after-zoom-out="() => imageFullscreen = false"
|
||||
:src="photo.url"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<template v-if="!imageFullscreen">
|
||||
<q-btn
|
||||
class="absolute all-pointer-events"
|
||||
round
|
||||
flat
|
||||
icon="info"
|
||||
:text-color="showExtra ? 'primary' : 'white'"
|
||||
style="background: rgba(0, 0, 0, 0.25); bottom: 16px; left: 8px"
|
||||
@click="showExtra = !showExtra"
|
||||
class="absolute all-pointer-events"
|
||||
round
|
||||
flat
|
||||
icon="info"
|
||||
:text-color="showExtra ? 'primary' : 'white'"
|
||||
style="background: rgba(0, 0, 0, 0.25); bottom: 16px; left: 8px"
|
||||
@click="showExtra = !showExtra"
|
||||
/>
|
||||
<q-btn
|
||||
class="absolute all-pointer-events"
|
||||
style="background: rgba(0, 0, 0, 0.25); top: 50%; left: 8px;"
|
||||
@click="prevPhoto"
|
||||
v-if="photoIndex > 0 && !isMaximized"
|
||||
icon="chevron_left"
|
||||
text-color="white"
|
||||
flat
|
||||
rounded
|
||||
class="absolute all-pointer-events"
|
||||
style="background: rgba(0, 0, 0, 0.25); top: 50%; left: 8px;"
|
||||
@click="prevPhoto"
|
||||
v-if="photoIndex > 0 && !isMaximized"
|
||||
icon="chevron_left"
|
||||
text-color="white"
|
||||
flat
|
||||
rounded
|
||||
/>
|
||||
<q-btn
|
||||
class="absolute all-pointer-events"
|
||||
style="background: rgba(0, 0, 0, 0.25); top: 50%; right: 8px;"
|
||||
@click="nextPhoto"
|
||||
v-if="photoIndex < photos.length - 1 && !isMaximized"
|
||||
icon-right="chevron_right"
|
||||
text-color="white"
|
||||
flat
|
||||
rounded
|
||||
class="absolute all-pointer-events"
|
||||
style="background: rgba(0, 0, 0, 0.25); top: 50%; right: 8px;"
|
||||
@click="nextPhoto"
|
||||
v-if="photoIndex < photos.length - 1 && !isMaximized"
|
||||
icon-right="chevron_right"
|
||||
text-color="white"
|
||||
flat
|
||||
rounded
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<q-scroll-area ref="thumbnailsRef" style="height: 170px; width: 100%;" v-show="!imageFullscreen">
|
||||
<div class="row no-wrap flex-center">
|
||||
<div class="row" v-show="!imageFullscreen">
|
||||
<div class="col-4 col-md-1 q-pa-sm" v-for="(thumb, idx) in photos" :key="thumb.thumbnailUrl">
|
||||
<q-img
|
||||
v-for="(thumb, idx) in photos"
|
||||
:key="thumb.thumbnailUrl"
|
||||
:src="thumb.thumbnailUrl"
|
||||
@click="showDetail(idx)"
|
||||
:style="`width: 150px; ${idx === photoIndex ? 'outline: solid 2px' : ''}`"
|
||||
class="q-ma-sm shadow-5"
|
||||
:src="thumb.thumbnailUrl"
|
||||
@click="showDetail(idx)"
|
||||
:class='{"shadow-5": true, "active-thumbnail": idx === photoIndex}'
|
||||
/>
|
||||
</div>
|
||||
</q-scroll-area>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 q-my-md" v-if="showExtra">
|
||||
<EmbeddedMap
|
||||
v-if="photo.gpsLatitude && photo.gpsLongitude"
|
||||
class="q-mx-sm"
|
||||
:gps-latitude="photo.gpsLatitude"
|
||||
:gps-longitude="photo.gpsLongitude"
|
||||
v-if="photo.gpsLatitude && photo.gpsLongitude"
|
||||
class="q-mx-sm"
|
||||
:gps-latitude="photo.gpsLatitude"
|
||||
:gps-longitude="photo.gpsLongitude"
|
||||
/>
|
||||
|
||||
<strong v-if="photo.name !== '' && !isMaximized">{{ photo.name }}</strong>
|
||||
@@ -179,7 +165,7 @@ const imageFullscreen = ref(false);
|
||||
<q-avatar icon="marker"></q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{ formatDatetime(photo.exposedAt) }}
|
||||
{{ photo.pointOfInterest.name }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item v-if="photo.exposedAt">
|
||||
@@ -196,7 +182,13 @@ const imageFullscreen = ref(false);
|
||||
<q-avatar icon="height"/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{ photo.gpsAltitude }} m
|
||||
Nadmořská výška: {{ photo.gpsAltitude }} m
|
||||
<br>
|
||||
<template v-if="photo.terrainElevation">
|
||||
Výška terénu: {{ photo.terrainElevation }} m
|
||||
<br>
|
||||
Výška nad zemí: {{ photo.gpsAltitude - photo.terrainElevation }} m
|
||||
</template>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
@@ -208,6 +200,10 @@ const imageFullscreen = ref(false);
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.active-thumbnail {
|
||||
outline: solid 2px
|
||||
}
|
||||
|
||||
.iiz {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -30,9 +30,7 @@ const setup = (() => {
|
||||
|
||||
<template>
|
||||
<DialogWrapper :formData="formData" :object-id="photoId" @show="setup">
|
||||
{{ formData }}
|
||||
<q-img :src="photo.thumbnailUrl"/>
|
||||
|
||||
<q-card-section>
|
||||
<FormWrapper :save-button="false">
|
||||
<q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
|
||||
|
||||
Reference in New Issue
Block a user