Prace s mapu, zobrazeni GPX, editace kopilota, skeletony

src/components/photos/PhotoDetail.vue

@@ -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>

src/components/photos/PhotoForm.vue

@@ -0,0 +1,52 @@
+<script setup>
+import {computed, ref} from "vue";
+import {setDefaultData} from "src/composables/form/formHandling";
+import DialogWrapper from "components/DialogWrapper.vue";
+import FormWrapper from "components/FormWrapper.vue";
+
+const props = defineProps({
+  photo: {
+    type: Object
+  },
+  locations: {
+    type: Array
+  }
+});
+
+const photoId = computed(() => props.photo?.id || null);
+const formData = ref({
+  name: "",
+  description: "",
+  pointOfInterestId: null,
+  isFlightCover: false
+});
+
+const setup = (() => {
+  setDefaultData(formData.value, props.photo || {});
+})
+</script>
+
+<template>
+  <DialogWrapper :formData="formData" :object-id="photoId" @show="setup">
+    <q-img :src="photo.thumbnailUrl"/>
+
+    <q-card-section>
+      <FormWrapper :save-button="false">
+        <q-input v-model="formData.name" label="Název"/>
+        <q-input type="textarea" v-model="formData.description" label="Popis"/>
+
+        <q-select
+          :options="locations"
+          option-label="name"
+          option-value="id"
+          emit-value
+          map-options
+          v-model="formData.pointOfInterestId"
+          label="POI"
+        />
+
+        <q-checkbox v-model="formData.isFlightCover" label="Úvodní fotografie k letu?" />
+      </FormWrapper>
+    </q-card-section>
+  </DialogWrapper>
+</template>

src/components/photos/PhotosList.vue

@@ -10,7 +10,7 @@ const props = defineProps({
   }
 });
 
-const emits = defineEmits(["edit", "delete", "detail"])
+const emits = defineEmits(["edit", "delete", "openDetail"])
 
 const openEdit = (photo) => {
   emits("edit", photo);
@@ -20,16 +20,16 @@ const deletePhoto = (id) => {
   emits("delete", id);
 };
 
-const openDetail = (photo) => {
-  emits("detail", photo);
+const openDetail = (photo, idx) => {
+  emits("openDetail", {photo, idx, allPhotos: props.photos});
 }
 </script>
 
 <template>
   <div class="row">
-    <div class="col-12 col-md-4 col-lg-3" v-for="photo in photos" :key="photo.id">
+    <div class="col-12 col-sm-4 col-md-4 col-lg-3" v-for="(photo, idx) in photos" :key="photo.id">
       <q-card class="q-my-sm q-mx-sm">
-        <q-img :src="photo.thumbnailUrl" @click="openDetail">
+        <q-img :src="photo.thumbnailUrl" @click="openDetail(photo, idx)">
           <div class="absolute-bottom">
             <div class="text-h6" v-if="photo.name !== ''">
               {{ photo.name }}
@@ -40,8 +40,14 @@ const openDetail = (photo) => {
           </div>
         </q-img>
 
-        <q-card-actions v-if="showActions">
-          {{ photo.isFlightCover ? 'ano' : 'ne' }}
+        <q-card-actions v-if="showActions" align="right">
+          <div class="col-grow">
+            <q-icon name="star" v-if="photo.isFlightCover" color="red"/>
+            <q-icon name="place" v-if="photo.pointOfInterestId" />
+            <q-icon name="gps_fixed" v-if="photo.gpsLatitude && photo.gpsLongitude" />
+            <q-icon name="gps_off" v-else />
+          </div>
+
           <q-btn flat icon="edit" color="blue" @click="openEdit(photo)"></q-btn>
           <q-btn flat icon="delete" color="red" @click="deletePhoto(photo.id)"></q-btn>
         </q-card-actions>