Bugfixing infinite scrollu u seznamu letu, novy vzhled detailu letu

src/components/flights/FlightHeaderInfo.vue

@@ -0,0 +1,59 @@
+<script setup>
+import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
+
+const props = defineProps({
+  flight: {type: Object, required: true},
+  pilot: {type: Object, required: true},
+  routeDetail: {type: Object, required: true},
+})
+
+</script>
+
+<template>
+  <div class="flight-header-info">
+    <h2 class="text-h4">
+      <router-link :to="routeDetail" v-if="routeDetail">
+        {{ flight.name }}
+      </router-link>
+      <span v-else>{{ flight.name }}</span>
+    </h2>
+
+    <div class="q-my-lg">
+      {{ formatDatetime(flight.takeoffDatetime, FORMAT_DATE) }}
+    </div>
+
+    <div>
+    <span v-for="(turnPoint, i) in flight.turnPoints">
+      {{ turnPoint.pointOfInterest.name }}
+      <span v-if="i < Object.keys(flight.turnPoints).length - 1" class="q-mx-md"> &bull;</span>
+    </span>
+    </div>
+
+    <div class="q-my-lg">
+      <router-link :to="{name: 'publicAircraftDetail', params: {callSign: flight.aircraft.callSign}}">
+        {{ flight.aircraft.callSign }}
+      </router-link>
+    </div>
+
+    <div class="q-my-lg" v-if="flight.description !== ''">
+      <div v-html="flight.description"></div>
+    </div>
+
+    <slot class="q-my-lg" name="default"></slot>
+  </div>
+</template>
+
+
+<style lang="scss">
+.flight-header-info a {
+
+  &, &:visited {
+    color: #e6f5ff;
+    text-decoration: none;
+  }
+
+  &:hover {
+    color: #c2d2dd;
+  }
+}
+</style>

src/components/flights/FlightsList.vue

@@ -3,8 +3,6 @@ import {minutesToHumanReadable} from "src/composables/datetimeUtils";
 import {flightName} from "src/composables/flight";
 import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
 import {useInfiniteScroll} from "src/composables/pagination";
-import {useQuasar} from "quasar";
-import {computed} from "vue";
 
 const props = defineProps({
   items: {
@@ -27,8 +25,6 @@ const routeDetail = (flight) => {
   else
     return {name: "flightDetail", params: {id: flight.id}}
 };
-
-const $q = useQuasar()
 </script>
 
 <template>
@@ -44,8 +40,6 @@ const $q = useQuasar()
         clickable
         :to="routeDetail(flight)"
       >
-
-
         <q-item-section avatar class="gt-xs">
           <AvatarFromPhoto :size="120" v-if="flight.titlePhoto" :src="flight.titlePhoto.thumbnailUrl"/>
           <q-avatar v-else size="120px" icon="flight" text-color="grey-7" color="grey-4"></q-avatar>

src/components/flights/LatestFlightsSlider.vue

@@ -1,7 +1,7 @@
 <script setup>
 import {ref} from "vue";
-import {flightName} from "src/composables/flight";
-import LatestFlightSliderInfo from "components/flights/slider/LatestFlightSliderInfo.vue";
+import FlightHeaderInfo from "components/flights/FlightHeaderInfo.vue";
+import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
 
 const props = defineProps({
   items: {
@@ -37,11 +37,25 @@ const slide = ref(0);
           height="400px"
           v-if="flight.titlePhoto"
         >
-          <div class="absolute-bottom">
-            <LatestFlightSliderInfo :flight="flight"/>
+          <div class="absolute-full">
+            <FlightHeaderInfo
+              :route-detail="{name: 'publicFlightDetailNew', params: {username: flight.pilot.publicUsername, flightSlug: flight.urlSlug}}"
+              :pilot="flight.pilot"
+              :flight="flight"
+            >
+
+              <div class="absolute-bottom-right">
+                <router-link
+                  class="q-pa-lg"
+                  :to="{name: 'publicProfileDetail', params: {username: flight.pilot.publicUsername}}"
+                >
+                  {{ flight.pilot.publicUsername }}
+                </router-link>
+              </div>
+
+            </FlightHeaderInfo>
           </div>
         </q-img>
-        <LatestFlightSliderInfo v-else :flight="flight" text-color="primary"/>
       </q-carousel-slide>
     </q-carousel>
   </div>

src/components/flights/slider/LatestFlightSliderInfo.vue

@@ -1,33 +0,0 @@
-<script setup>
-import {flightName} from "src/composables/flight";
-
-const props = defineProps({
-  flight: {
-    type: Object,
-    required: true
-  },
-  textColor: {
-    type: String,
-    required: false,
-    default: "white"
-  }
-})
-</script>
-
-<template>
-  <div class="text-h4">
-    <router-link
-      :class="`text-${props.textColor}`"
-      :to="{name: 'publicFlightDetail', params: {username: flight.pilot.publicUsername, flightSlug: flight.urlSlug}}"
-    >
-      {{ flightName(flight) }}
-    </router-link>
-  </div>
-
-  <router-link
-    :class="`text-${props.textColor}`"
-    :to="{name: 'publicProfileDetail', params: {username: flight.pilot.publicUsername}}"
-  >
-    @{{ flight.pilot.publicUsername }}
-  </router-link>
-</template>