Prace s mapu, zobrazeni GPX, editace kopilota, skeletony

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>