Fotogalerie se zoomem, uprava verejnych avataru

src/components/flights/FlightBasicInfo.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {flight} from "src/composables/objects/flight";
-import {formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
+import {FORMAT_DATE, FORMAT_TIME, formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
 import WeatherInfo from "components/weather/WeatherInfo.vue";
 
 const props = defineProps({
@@ -14,7 +14,15 @@ const props = defineProps({
 <template>
   <q-list bordered separator>
     <q-item>
+      <q-item-section avatar>
+        <q-icon name="event"/>
+      </q-item-section>
+      <q-item-section>
+        {{ formatDatetime(flight.takeoffDatetime, FORMAT_DATE) }}
+      </q-item-section>
+    </q-item>
 
+    <q-item>
       <q-list>
         <q-item>
           <q-item-section avatar>
@@ -22,7 +30,8 @@ const props = defineProps({
           </q-item-section>
           <q-item-section>
             <div>
-              {{ flight.takeoffAirport.name }}
+              <strong>{{ flight.takeoffAirport.name }}</strong>,
+              čas vzletu: {{ formatDatetime(flight.takeoffDatetime, FORMAT_TIME) }}
 
               <WeatherInfo class="q-mx-sm" v-if="flight.takeoffWeatherInfo" :weather="flight.takeoffWeatherInfo"/>
             </div>
@@ -44,7 +53,8 @@ const props = defineProps({
           </q-item-section>
           <q-item-section>
             <div>
-              {{ flight.landingAirport.name }}
+              <strong>{{ flight.landingAirport.name }}</strong>,
+              čas přistání: {{ formatDatetime(flight.landingDatetime, FORMAT_TIME) }}
               <WeatherInfo class="q-mx-sm" v-if="flight.landingWeatherInfo" :weather="flight.landingWeatherInfo"/>
             </div>
           </q-item-section>
@@ -52,15 +62,6 @@ const props = defineProps({
       </q-list>
     </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="schedule"/>
@@ -74,6 +75,7 @@ const props = defineProps({
         <q-icon name="people"/>
       </q-item-section>
       <q-item-section>
+        Link jen pro prihlasene!
         <router-link :to="{name: 'copilotDetail', params: {id: flight.copilot.id}}">
           {{ flight.copilot.name }}
         </router-link>

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