Merge branch 'master' of kvacek.cz:poletani.cz/app into map_elevation

src/components/FormWrapper.vue

@@ -7,11 +7,6 @@ const props = defineProps({
   modelValue: {
     type: Object,
   },
-  resetAfterSubmit: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
   isRequestPending,
   saveButton: {
     type: [Object, Boolean],
@@ -27,10 +22,6 @@ const props = defineProps({
 const emits = defineEmits(["save"]);
 const saveForm = () => {
   emits("save", props.modelValue);
-
-  if (props.resetAfterSubmit) {
-    console.error("Not implemented")
-  }
 }
 
 const $q = useQuasar();
@@ -47,7 +38,7 @@ const fullwidthBtn = computed(() => $q.screen.width <= $q.screen.sizes.md);
         color="primary"
         type="submit"
         size="lg"
-        :class="{'q-my-lg': true, 'q-mx-lg': !fullwidthBtn, 'btn--fullwidth': fullwidthBtn}"
+        :class="{'q-my-lg': true, 'btn--fullwidth': fullwidthBtn}"
         v-if="saveButton"
         :icon="props.saveButton.icon"
         :loading="props.isRequestPending"

src/components/aircrafts/AircraftDetailCard.vue

@@ -0,0 +1,59 @@
+<script setup>
+import {aircraft} from "src/composables/objects/aircraft";
+import {confirmObject} from "src/composables/dialog";
+import {useQuasar} from "quasar";
+
+const props = defineProps({
+  aircraft: {
+    type: Object,
+    required: true
+  }
+});
+
+const emits = defineEmits(["delete"]);
+
+const $q = useQuasar();
+
+const confirmDelete = (aircraftId) => {
+  $q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
+    .onOk(() => {
+      emits("delete", aircraftId);
+    });
+};
+</script>
+
+<template>
+  <q-card class="q-mx-md q-my-md flight-detail-card">
+    <q-img :src="aircraft.photoUrl" v-if="aircraft.photoUrl"/>
+
+    <q-card-actions class="q-my-md">
+      <div class="col-grow">
+        <q-btn
+          flat
+          :to='{name: "aircraftEdit", params: {id: aircraft.id}}'
+          icon="edit"
+          text-color="primary"
+          label="Upravit"
+        />
+      </div>
+      <q-btn @click="confirmDelete(aircraft.id)" icon="delete" flat text-color="red" label="Smazat"/>
+    </q-card-actions>
+
+    <q-card-section>
+      <q-list>
+        <q-item v-if="aircraft.manufacturer">
+          Výrobce: {{ aircraft.manufacturer }}
+        </q-item>
+        <q-item v-if="aircraft.model">
+          Model: {{ aircraft.model }}
+        </q-item>
+        <q-item v-if="aircraft.seats">
+          Počet míst: {{ aircraft.seats }}
+        </q-item>
+      </q-list>
+    </q-card-section>
+    <q-card-section>
+      <article v-html="aircraft.description" class="q-my-md"/>
+    </q-card-section>
+  </q-card>
+</template>

src/components/aircrafts/AircraftDetailSkeleton.vue

@@ -1,5 +1,23 @@
-<script setup></script>
+<script setup>
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+import {randomInt} from "src/composables/random";
+import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
+</script>
 
 <template>
-  <q-skeleton></q-skeleton>
+  <q-card class="flight-detail-card">
+    <q-skeleton type="rect" height="400px"/>
+
+    <q-card-section>
+      <q-skeleton type="text" v-for="i in 3" :key="i" :width="randomInt(30, 50)+'%'"/>
+    </q-card-section>
+
+    <q-card-section class="q-my-md">
+      <BasicTextSkeleton :paragraphs="1" :lines="randomInt(1, 3)"/>
+    </q-card-section>
+  </q-card>
+
+  <q-card class="flight-detail-card" flat>
+    <BasicListSkeleton :items-count-min="1" :items-count-max="4"/>
+  </q-card>
 </template>

src/components/aircrafts/AircraftEditSkeleton.vue

@@ -1,5 +1,22 @@
-<script setup></script>
+<script setup>
+
+import {randomInt} from "src/composables/random";
+import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+</script>
 
 <template>
-  <em>Aircraft edit skeleton</em>
+  <q-card class="flight-detail-card">
+    <q-skeleton type="rect" height="400px"/>
+
+    <q-card-section>
+      <q-skeleton type="QInput" v-for="i in 3" :key="i" class="q-my-lg" />
+      <q-skeleton type="QInput" height="200px" class="q-my-lg" />
+    </q-card-section>
+    <q-card-actions>
+<!--      TODO: posunout vpravo, zvetsit a na mobilu udelat fullwidth-->
+      <q-skeleton type="QBtn" />
+    </q-card-actions>
+
+  </q-card>
 </template>

src/components/copilots/CopilotDetailSkeleton.vue

@@ -1,5 +1,9 @@
-<script setup></script>
+<script setup>
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+</script>
 
 <template>
-  <em>Copilot skeleton</em>
+  <q-card class="flight-detail-card">
+    <BasicListSkeleton :items-count-min="1" :items-count-max="5"/>
+  </q-card>
 </template>

src/components/copilots/CopilotForm.vue

@@ -4,17 +4,24 @@ import {onMounted, reactive} from "vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import FormWrapper from "components/FormWrapper.vue";
 import {commonProps} from "src/composables/inputs";
+import {isRequestPending} from "src/composables/form/props";
+import {isRequired} from "src/composables/form/rules";
 
 const props = defineProps({
   copilot: {
     type: Object
-  }
+  },
+  isRequestPending
 })
 
 const formData = reactive({
   name: null,
 });
 
+const rules = {
+  name: [isRequired]
+}
+
 onMounted(() => {
   if (props.copilot) {
     setDefaultData(formData, props.copilot);
@@ -24,7 +31,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <FormWrapper v-model="formData">
-    <q-input v-bind="commonProps" label="Jméno" v-model="formData.name" />
+  <FormWrapper v-model="formData" :is-request-pending="props.isRequestPending">
+    <q-input
+      v-bind="commonProps"
+      label="Jméno"
+      :rules="rules.name"
+      v-model="formData.name"
+    />
   </FormWrapper>
 </template>

src/components/flights/FlightBasicInfo.vue

@@ -44,7 +44,7 @@ const props = defineProps({
           </q-item-section>
           <q-item-section>
             <div>
-              <strong>{{ flight.takeoffAirport.name }}</strong>,
+              <strong>{{flight.takeoffAirport.icaoCode}}</strong> ({{ flight.takeoffAirport.name }}),
               čas vzletu: {{ formatDatetime(flight.takeoffDatetime, FORMAT_TIME) }}
 
               <WeatherInfo class="q-mx-sm" v-if="flight.takeoffWeatherInfo" :weather="flight.takeoffWeatherInfo"/>
@@ -67,7 +67,7 @@ const props = defineProps({
           </q-item-section>
           <q-item-section>
             <div>
-              <strong>{{ flight.landingAirport.name }}</strong>,
+              <strong>{{ flight.landingAirport.icaoCode }}</strong> ({{ flight.landingAirport.name }}),
               čas přistání: {{ formatDatetime(flight.landingDatetime, FORMAT_TIME) }}
               <WeatherInfo class="q-mx-sm" v-if="flight.landingWeatherInfo" :weather="flight.landingWeatherInfo"/>
             </div>

src/components/flights/FlightDetailSkeleton.vue

@@ -16,7 +16,7 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
 
         <q-item>
           <q-list>
-            <ListItemSkeleton v-for="i in randomInt(2, 5)" :key="i"/>
+            <ListItemSkeleton v-for="i in randomInt(1, 3)" :key="i"/>
           </q-list>
         </q-item>
 
@@ -26,7 +26,7 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
       </q-list>
 
       <article class="q-my-lg">
-        <BasicTextSkeleton :lines="randomInt(5, 10)" :paragraphs="randomInt(1, 3)" />
+        <BasicTextSkeleton :lines="randomInt(2, 5)" :paragraphs="randomInt(1, 2)" />
       </article>
 
       <q-skeleton height="400px" square class="q-mt-lg"/>

src/components/flights/FlightEditSkeleton.vue

@@ -1,7 +1,20 @@
 <script setup>
 
+import {randomInt} from "src/composables/random";
+import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 </script>
 
 <template>
-  <em>Flight edit skeleton</em>
-</template>
+  <q-card class="flight-detail-card">
+    <q-skeleton type="rect" height="400px"/>
+
+    <q-card-section>
+      <q-skeleton type="QInput" v-for="i in 3" :key="i" />
+    </q-card-section>
+
+  </q-card>
+
+  <q-card class="flight-detail-card" flat>
+    <BasicListSkeleton :items-count-min="1" :items-count-max="4"/>
+  </q-card></template>

src/components/flights/FlightTrackMap.vue

@@ -36,7 +36,7 @@ const pointsOfInterests = computed(() => {
   }
 
   path.push({
-    label: flight.value.takeoffAirport.name,
+    label: flight.value.landingAirport.name,
     position: {
       lat: flight.value.landingAirport.gpsLatitude,
       lng: flight.value.landingAirport.gpsLongitude

src/components/flights/PhotoCarousel.vue

@@ -10,6 +10,10 @@ const props = defineProps({
   coverPhotoUrl: {
     type: String,
     required: false
+  },
+  defaultTitle: {
+    type: String,
+    required: false
   }
 })
 
@@ -36,6 +40,7 @@ watch(() => props.photos, (newVal) => {
     swipeable
     height="auto"
     infinite
+    v-bind="$attrs"
   >
     <q-carousel-slide style="padding: 0" v-for="(photo, idx) in photos" :key="photo.url" :name="photo.url">
       <q-img :src="photo.url" @click="openDetail({photo, idx, allPhotos: photos})"/>
@@ -45,6 +50,7 @@ watch(() => props.photos, (newVal) => {
   <PhotoDetail
     v-if="photoData"
     v-model="openPhotoDetail"
+    :default-title="defaultTitle"
     :photo="photoData.photo"
     :photos="photoData.allPhotos"
     :opened-index="photoData.idx"

src/components/flights/form/FlightFormBasic.vue

@@ -6,22 +6,23 @@ import DatetimePicker from "components/inputs/DatetimePicker.vue";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
 import {commonProps} from "src/composables/inputs";
 import {isRequired} from "src/composables/form/rules";
+import {isRequestPending} from "src/composables/form/props";
 
 const props = defineProps({
-    aircrafts: {
-      type: Array,
-      required: true
-    },
-    airports: {
-      type: Array,
-      required: true
-    },
-    flight: {
-      type: Object,
-      required: false
-    }
-  }
-)
+  aircrafts: {
+    type: Array,
+    required: true
+  },
+  airports: {
+    type: Array,
+    required: true
+  },
+  flight: {
+    type: Object,
+    required: false
+  },
+  isRequestPending,
+});
 
 const formData = reactive({
   aircraft: null,
@@ -69,7 +70,7 @@ watch(() => formData.takeoffAirport, () => {
 </script>
 
 <template>
-  <FormWrapper v-model="formData">
+  <FormWrapper v-model="formData" :is-request-pending="props.isRequestPending">
     <div class="row">
       <div class="col">
         <q-card class="q-mx-md q-my-md">
@@ -140,8 +141,6 @@ watch(() => formData.takeoffAirport, () => {
             />
           </q-card-section>
         </q-card>
-
-
       </div>
     </div>
   </FormWrapper>

src/components/flights/form/FlightFormPhotos.vue

@@ -25,6 +25,7 @@ const formData = reactive({
       icon: "upload",
       align: "left"
     }'>
+
     <q-file
       class="q-my-lg"
       outlined

src/components/inputs/ComboboxInput.vue

@@ -28,7 +28,7 @@ const props = defineProps({
     type: String,
     required: false,
     default: "id"
-  }
+  },
 })
 
 const model = ref({});

src/components/photos/BatchPhotoFormDialog.vue

@@ -0,0 +1,57 @@
+<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";
+import {commonProps} from "src/composables/inputs";
+import ComboboxInput from "components/inputs/ComboboxInput.vue";
+
+const props = defineProps({
+  photos: {
+    type: Array
+  },
+  locations: {
+    type: Array
+  }
+});
+
+const formData = ref({
+  name: "",
+  description: "",
+  pointOfInterest: null,
+  photoIds: []
+});
+
+const setup = () => {
+  formData.value.photoIds = props.photos.map(p => p.id);
+  formData.value.name = "";
+  formData.value.description = "";
+  formData.value.pointOfInterest = null;
+}
+
+</script>
+
+<template>
+  <DialogWrapper :formData="formData" @show="setup()">
+    <q-card-section class="text-center">
+<!--      <q-scroll-area style="min-height: 80px; max-height: 150px">-->
+        <q-img :src="photo.thumbnailUrl" width="80px" class="q-ma-sm" v-for="photo in photos" :key="photo.thumbnailUrl"/>
+<!--        {{ photos }}-->
+<!--      </q-scroll-area>-->
+    </q-card-section>
+    <q-card-section>
+      <FormWrapper :save-button="false">
+        <q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
+        <q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
+
+        <ComboboxInput
+            :options="locations"
+            v-bind="commonProps"
+            v-model="formData.pointOfInterest"
+            :enable-new-values="false"
+            label="POI"
+        />
+      </FormWrapper>
+    </q-card-section>
+  </DialogWrapper>
+</template>

src/components/photos/PhotoDetail.vue

@@ -1,8 +1,9 @@
 <script setup>
 import EmbeddedMap from "components/map/EmbeddedMap.vue";
-import {computed, onMounted, ref} from "vue";
+import {computed, onMounted, ref, watch} from "vue";
 import {formatDatetime} from "src/composables/datetimeUtils";
 import 'vue-inner-image-zoom/lib/vue-inner-image-zoom.css'
+import {useQuasar} from "quasar";
 
 const props = defineProps({
   photos: {
@@ -18,6 +19,10 @@ const props = defineProps({
     type: Boolean,
     required: false,
     default: false
+  },
+  defaultTitle: {
+    type: String,
+    required: false
   }
 });
 
@@ -41,79 +46,133 @@ onMounted(() => {
 const photo = computed(() => props.photos[photoIndex.value]);
 
 const nextPhoto = () => {
+  if (imageFullscreen.value) return;
+
   if (photoIndex.value < props.photos.length - 1)
     photoIndex.value++
 }
 
 const prevPhoto = () => {
+  if (imageFullscreen.value) return;
   if (photoIndex.value > 0) photoIndex.value--;
 }
 
+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();
+const isMaximized = computed(() => $q.screen.width <= $q.screen.sizes.sm);
+const imageFullscreen = ref(false);
 </script>
 
 <template>
   <q-dialog
-    v-model="open"
-    full-width
+      v-model="open"
+      full-width
+      :maximized="isMaximized"
   >
     <q-card
-      v-touch-swipe.mouse.left="prevPhoto"
-      v-touch-swipe.mouse.right="nextPhoto"
-      @keyup.left="prevPhoto"
-      @keyup.right="nextPhoto"
+        v-touch-swipe.mouse.left="prevPhoto"
+        v-touch-swipe.mouse.right="nextPhoto"
+        @keyup.left="prevPhoto"
+        @keyup.right="nextPhoto"
     >
-      <q-card-section>
-        <div class="relative-position">
-          <div class="text-center">
-            <inner-image-zoom move-type="pan" :zoomScale="0.75" :hide-hint="true" :src="photo.url"/>
+      <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>
-
-          <q-btn
-            class="absolute all-pointer-events"
-            round
-            flat
-            icon="info"
-            :text-color="showExtra ? 'primary' : 'white'"
-            style="background: rgba(0, 0, 0, 0.25); top: 8px; right: 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"
-            icon="chevron_left"
-            text-color="white"
-            flat
-            rounded
-          >
-          </q-btn>
-          <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"
-            icon-right="chevron_right"
-            text-color="white"
-            flat
-            rounded
-          >
-          </q-btn>
-          <strong v-if="photo.name !== ''">{{ photo.name }}</strong>
-          <p v-if="photo.description !== ''">{{ photo.description }}</p>
         </div>
 
-        <div class="row">
+      </q-card-section>
 
+      <q-card-section :class="{'q-pa-none': isMaximized}">
+        <div :class="{'relative-position': true, 'image-full-height': imageFullscreen}">
+          <div class="text-center">
+            <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"
+            />
+          </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"
+            />
+            <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
+            />
+            <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
+            />
+          </template>
+        </div>
+
+        <q-scroll-area ref="thumbnailsRef" style="height: 170px; width: 100%;" v-show="!imageFullscreen">
+          <div class="row no-wrap flex-center">
+            <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"
+            />
+          </div>
+        </q-scroll-area>
+
+        <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>
+            <p v-if="photo.description !== ''">{{ photo.description }}</p>
+
             <q-list dense>
               <q-item v-if="photo.pointOfInterest">
                 <q-item-section avatar>
@@ -153,8 +212,20 @@ const showExtra = ref(false);
   width: 100%;
 }
 
+.image-full-height .iiz {
+  height: calc(95vh - 65px) !important;
+}
+
 .iiz__img {
   max-height: 90vh !important;
   margin: 0 auto;
 }
+
+.iiz__img--hidden {
+  height: 100vh;
+}
+
+.iiz__zoom-img--visible {
+//height: 125vh !important
+}
 </style>

src/components/photos/PhotoFormDialog.vue

@@ -4,6 +4,7 @@ import {setDefaultData} from "src/composables/form/formHandling";
 import DialogWrapper from "components/DialogWrapper.vue";
 import FormWrapper from "components/FormWrapper.vue";
 import {commonProps} from "src/composables/inputs";
+import ComboboxInput from "components/inputs/ComboboxInput.vue";
 
 const props = defineProps({
   photo: {
@@ -18,7 +19,7 @@ const photoId = computed(() => props.photo?.id || null);
 const formData = ref({
   name: "",
   description: "",
-  pointOfInterestId: null,
+  pointOfInterest: null,
   isFlightCover: false
 });
 
@@ -29,6 +30,7 @@ const setup = (() => {
 
 <template>
   <DialogWrapper :formData="formData" :object-id="photoId" @show="setup">
+    {{ formData }}
     <q-img :src="photo.thumbnailUrl"/>
 
     <q-card-section>
@@ -36,16 +38,10 @@ const setup = (() => {
         <q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
         <q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
 
-        {{ locations }}
-
-        <q-select
+        <ComboboxInput
           :options="locations"
-          option-label="name"
-          option-value="id"
-          emit-value
-          map-options
           v-bind="commonProps"
-          v-model="formData.pointOfInterestId"
+          v-model="formData.pointOfInterest"
           label="POI"
         />
 

src/components/photos/PhotosList.vue

@@ -1,4 +1,8 @@
 <script setup>
+import {computed, onMounted, ref} from "vue";
+import {useQuasar} from "quasar";
+import {confirmObject} from "src/composables/dialog";
+
 const props = defineProps({
   photos: {
     type: Array
@@ -10,26 +14,73 @@ const props = defineProps({
   }
 });
 
-const emits = defineEmits(["edit", "delete", "openDetail"])
+const batchEdit = ref({});
+
+
+onMounted(() => {
+  for (const photo of props.photos) {
+    batchEdit.value[photo.id] = false;
+  }
+});
+
+const emits = defineEmits(["edit", "delete", "batch-edit"])
 
 const openEdit = (photo) => {
   emits("edit", photo);
 };
 
-const deletePhoto = (id) => {
-  emits("delete", id);
-};
+const $q = useQuasar();
 
-const openDetail = (photo, idx) => {
-  emits("openDetail", {photo, idx, allPhotos: props.photos});
+const confirmPhotoDelete = (id) => {
+  $q.dialog(confirmObject("Opravdu chces smazat tuto fotku?"))
+      .onOk(() => {
+        emits("delete", id);
+      });
 }
+
+const confirmBatchPhotoDelete = () => {
+  $q.dialog(confirmObject("Opravdu chces smazat vybrané fotky?" + JSON.stringify(batchEdit.value)))
+      .onOk(() => {
+        for (const id in batchEdit.value) {
+          if (!batchEdit.value[id]) continue;
+          emits("delete", parseInt(id));
+          batchEdit.value[id] = false;
+        }
+      });
+}
+
+const handleImageClick = (photo, idx) => {
+  if (props.showActions) {
+    batchEdit.value[photo.id] = !batchEdit.value[photo.id];
+  }
+}
+
+
+const openBatchEdit = () => {
+  const photos = [];
+  for (const i in batchEdit.value) {
+    const photo = props.photos.find(p => p.id === parseInt(i));
+    if (photo && batchEdit.value[i]) photos.push(photo);
+    batchEdit.value[i] = false;
+  }
+  emits('batch-edit', photos);
+}
+
+const isBatchEditAllowed = computed(() => Object.values(batchEdit.value).filter(v => v).length > 0);
 </script>
 
 <template>
+  <div class="row q-my-md">
+    <div class="col text-right">
+      <q-btn round flat icon="edit" :color="isBatchEditAllowed ? 'primary' : 'grey'" :disable="!isBatchEditAllowed" @click="openBatchEdit" v-if="showActions"/>
+      <q-btn round flat icon="delete" :color="isBatchEditAllowed ? 'red' : 'grey'" :disable="!isBatchEditAllowed" @click="confirmBatchPhotoDelete" v-if="showActions"/>
+    </div>
+  </div>
+
   <div class="row">
     <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(photo, idx)">
+      <q-card :class='{"q-ma-sm": true, "shadow-1": !batchEdit[photo.id], "shadow-10": batchEdit[photo.id]}'>
+        <q-img :src="photo.thumbnailUrl" @click="handleImageClick(photo, idx)">
           <div class="absolute-bottom" v-if="photo.name !== '' || photo.description !== ''">
             <div class="text-h6" v-if="photo.name !== ''">
               {{ photo.name }}
@@ -40,16 +91,17 @@ const openDetail = (photo, idx) => {
           </div>
         </q-img>
 
-        <q-card-actions v-if="showActions" align="right">
+        <q-card-actions v-if="showActions" align="right" :class="{'bg-primary': batchEdit[photo.id], 'text-white': batchEdit[photo.id]}">
           <div class="col-grow">
+            <q-checkbox v-model="batchEdit[photo.id]"/>
             <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 />
+            <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-btn flat icon="delete" color="red" @click="confirmPhotoDelete(photo.id)"></q-btn>
         </q-card-actions>
       </q-card>
     </div>