Fotogalerie se zoomem, uprava verejnych avataru

src/components/flights/FlightsList.vue

@@ -1,9 +1,10 @@
 <script setup>
-import {formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
+import {FORMAT_DATE, formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
 import {computed} from "vue";
 import {useQuasar} from "quasar";
 import {useFlightsStore} from "stores/Flights";
 import {flightName} from "../../composables/objects/flight";
+import AvatarFromPhoto from "components/AvatarFromPhoto.vue";
 
 const props = defineProps({
   items: {
@@ -33,15 +34,13 @@ const props = defineProps({
       :to="{name: routeDetail.name, params:{...routeDetail.params, id: flight.id}}"
     >
       <q-item-section avatar>
-        <q-avatar size="150px">
-          <div v-if="flight.coverPhoto" :style="`width: 150px; height: 150px; background-image: url('${flight.coverPhoto.thumbnailUrl}'); background-size: cover`"></div>
-        </q-avatar>
+        <AvatarFromPhoto :size="120" v-if="flight.coverPhoto" :src="flight.coverPhoto.thumbnailUrl" />
       </q-item-section>
       <q-item-section>
-        <h5>{{ flightName(flight) }}</h5>
-        <div class="text-secondary">
+        <div class="text-h5">{{ flightName(flight) }}</div>
+        <div class="text-secondary q-mt-md">
           <q-icon name="flight_takeoff"/>
-          {{ formatDatetime(flight.takeoffDatetime) }}
+          {{ formatDatetime(flight.takeoffDatetime, FORMAT_DATE) }}
         </div>
         <div class="text-secondary">
           <q-icon name="schedule"/>
@@ -52,6 +51,12 @@ const props = defineProps({
           <q-icon name="flight"/>
           {{ flight.aircraft.callSign }}
         </div>
+
+        <div class="text-secondary" v-if="flight.copilot">
+          <q-icon name="person" />
+          {{ flight.copilot.name }}
+        </div>
+
       </q-item-section>
 
       <q-item-section side top v-if="flight.isPublic && displayVisibilityInfo">