Lepsi podpora elevace terenu

src/components/photos/PhotoDetail.vue

@@ -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%;
 }