composables, mazani letu, skeletony

src/components/flights/FlightBasicInfo.vue

@@ -0,0 +1,64 @@
+<script setup>
+import {flight} from "src/composables/objects/flight";
+import {formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
+
+const props = defineProps({
+  flight: {
+    type: Object,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <q-list bordered separator>
+    <q-item>
+      <q-item-section avatar>
+        <q-icon name="flight_takeoff"/>
+      </q-item-section>
+      <q-item-section>
+        {{ flight.takeoffAirport.name }}
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-icon name="flight_land"/>
+      </q-item-section>
+      <q-item-section>
+        {{ flight.landingAirport.name }}
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-icon name="event"/>
+      </q-item-section>
+      <q-item-section>
+        {{ formatDatetime(flight.takeoffDatetime) }}
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-icon name="thermostat"/>
+      </q-item-section>
+      <q-item-section>
+        Clouds: few, Wind: 220/12kt, Temp: 12°C
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-icon name="schedule"/>
+      </q-item-section>
+      <q-item-section>
+        {{ minutesToHumanReadable(flight.durationMinCalculated) }}
+      </q-item-section>
+    </q-item>
+    <q-item v-if="!flight.solo">
+      <q-item-section avatar>
+        <q-icon name="people"/>
+      </q-item-section>
+      <q-item-section>
+        {{ flight.copilot.name }}
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>

src/components/flights/FlightEditSkeleton.vue

@@ -0,0 +1,7 @@
+<script setup>
+
+</script>
+
+<template>
+  <em>Flight edit skeleton</em>
+</template>

src/components/flights/FlightsList.vue

@@ -3,6 +3,7 @@ import {formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUt
 import {computed} from "vue";
 import {useQuasar} from "quasar";
 import {useFlightsStore} from "stores/Flights";
+import {flightName} from "../../composables/objects/flight";
 
 const props = defineProps({
   items: {
@@ -11,31 +12,14 @@ const props = defineProps({
   }
 });
 
-
-const $q = useQuasar();
-const deleteFlight = (flightId) => {
-  $q.dialog({
-    title: 'Potvrzení',
-    message: 'Opravdu chceš smazat tento let?',
-    cancel: true,
-    persistent: true
-  }).onOk(() => {
-    useFlightsStore().deleteItem(flightId);
-  })
-}
-
 const totalFlightTime = computed(() => {
   return props.items.reduce((acc, flight) => acc + flight.flightDurationMinutes, 0);
 })
 
-const flightName = (item) => {
-  if (item.name) {
-    return item.name;
-  } else {
-    return `${item.takeoffAirport.name} - ${item.landingAirport.name}`
-  }
+const emit = defineEmits(["delete"]);
+const deleteFlight = (flightId) => {
+  emit("delete", flightId);
 }
-
 </script>
 
 <template>
@@ -70,7 +54,6 @@ const flightName = (item) => {
         <q-separator/>
 
         <q-card-actions align="right">
-          <q-btn flat icon="visibility"></q-btn>
           <q-btn flat icon="edit" :to="{name: 'flightEdit', params:{id: flight.id}}"></q-btn>
           <q-btn flat icon="delete" color="red" @click="deleteFlight(flight.id)"></q-btn>
         </q-card-actions>

src/components/flights/PhotoForm.vue

@@ -7,13 +7,18 @@ 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: ""
+  description: "",
+  pointOfInterestId: null,
+  isFlightCover: false
 });
 
 const setup = (() => {
@@ -29,6 +34,18 @@ const setup = (() => {
       <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>

src/components/flights/form/FlightFormBasic.vue

@@ -14,10 +14,6 @@ const props = defineProps({
       type: Array,
       required: true
     },
-    locations: {
-      type: Array,
-      required: true
-    },
     flight: {
       type: Object,
       required: false