Prace s mapu, zobrazeni GPX, editace kopilota, skeletony

2023-08-07 23:22:28 +02:00
parent 09d2f25523
commit c4603cf090
55 changed files with 891 additions and 408 deletions
@@ -0,0 +1,105 @@
+<script setup>
+import EmbeddedMap from "components/map/EmbeddedMap.vue";
+import {computed, onMounted, ref} from "vue";
+import {formatDatetime} from "src/composables/datetimeUtils";
+
+const props = defineProps({
+  photos: {
+    type: Array,
+    required: false,
+    default: () => []
+  },
+  openedIndex: {
+    type: Number,
+    required: false,
+  },
+  modelValue: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+});
+
+const emit = defineEmits(["update:modelValue"])
+
+
+const open = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newVal) {
+    emit("update:modelValue", newVal);
+  }
+})
+
+const photoIndex = ref(null);
+onMounted(() => {
+  photoIndex.value = props.openedIndex
+});
+
+const photo = computed(() => props.photos[photoIndex.value]);
+
+const nextPhoto = () => {
+  if (photoIndex.value < props.photos.length - 1)
+    photoIndex.value++
+}
+
+const prevPhoto = () => {
+  if (photoIndex.value > 0) photoIndex.value--;
+}
+
+</script>
+
+<template>
+  <q-dialog v-model="open" full-width  @keyup.left="prevPhoto" @keyup.right="nextPhoto">
+    <q-card>
+      <q-card-section>
+        <div class="row">
+          <div class="col-12 col-sm-12 col-md-9">
+            <q-img :src="photo.url"/>
+            <strong v-if="photo.name !== ''">{{ photo.name }}</strong>
+
+            <p v-if="photo.description !== ''">{{ photo.description }}</p>
+
+            <div class="text-center q-my-sm">
+              <q-btn @click="prevPhoto" v-if="photoIndex > 0" icon="chevron_left" flat rounded>Předchozí</q-btn>
+              <q-btn @click="nextPhoto" v-if="photoIndex < photos.length - 1" icon-right="chevron_right" flat rounded>Další</q-btn>
+            </div>
+
+          </div>
+          <div class="col-12 col-sm-12 col-md-3">
+            <EmbeddedMap class="q-mx-sm" v-if="photo.gpsLatitude && photo.gpsLongitude" :gps-latitude="photo.gpsLatitude" :gps-longitude="photo.gpsLongitude"/>
+
+            <q-list>
+              <q-item v-if="photo.pointOfInterest">
+                <q-item-section avatar>
+                  <q-avatar icon="marker"></q-avatar>
+                </q-item-section>
+                <q-item-section>
+                  {{ formatDatetime(photo.exposedAt) }}
+                </q-item-section>
+              </q-item>
+              <q-item v-if="photo.exposedAt">
+                <q-item-section avatar>
+                  <q-avatar icon="photo_camera"></q-avatar>
+                </q-item-section>
+                <q-item-section>
+                  {{ formatDatetime(photo.exposedAt) }}
+                </q-item-section>
+              </q-item>
+
+              <q-item v-if="photo.gpsAltitude">
+                <q-item-section avatar>
+                  <q-avatar icon="height"/>
+                </q-item-section>
+                <q-item-section>
+                  {{ photo.gpsAltitude }} m
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>