poletani.cz/app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Bugfixing infinite scrollu u seznamu letu, novy vzhled detailu letu

Browse Source
This commit is contained in:
Michal Kváček
2026-01-26 16:24:15 +01:00
parent 348025afee
commit 65ea19664c
16 changed files with 202 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/flights/FlightHeaderInfo.vue
+59
View File
@@ -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
-6
View File
@@ -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/slider/LatestFlightsSlider.vue → src/components/flights/LatestFlightsSlider.vue
+19 -5
View File
@@ -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
-33
View File
@@ -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>
src/components/photos/PhotoGallery.vue
+1 -1
View File
@@ -75,7 +75,7 @@ watch(() => [openedPhoto.value, $lightbox.value], () => {
<div
v-for="photo in photos" :key="photo.id"
style="min-height: 100px"
class="col-6 col-sm-4 col-md-4 col-lg-3 q-pa-sm"
class="col-6 col-sm-4 col-md-4 col-lg-2 q-pa-sm"
>
<a
:data-pswp-src="photo.url"
src/composables/meta.js
+1 -1
View File
@@ -13,7 +13,7 @@ export const commonKeywords = [
export const aircraftKeywords = (aircraft) => {
return [aircraft.organization?.name, aircraft.callSign, aircraft.manufacturer, aircraft.model]
return ["letadlo", "letoun", aircraft.organization?.name, aircraft.callSign, aircraft.manufacturer, aircraft.model]
};
export const flightEventKeywords = (event) => {
src/composables/pagination.js
+16 -15
View File
@@ -11,33 +11,36 @@ export const usePagination = ({fetchFunction, itemsPerPage = 10}) => {
const filters = ref({});
const hasMoreData = ref(true)
const isQueryRunning = ref(false)
const loadFirstPage = () => {
paginationOffset.value = 0
isQueryRunning.value = true
return fetchFunction({
...filters.value,
limit: paginationLimit.value,
offset: 0,
appendItems: false
...filters.value, limit: paginationLimit.value, offset: 0, appendItems: false
}).then((data) => {
console.log("first page", data, data.length, paginationLimit.value)
paginationOffset.value += paginationLimit.value;
hasMoreData.value = data.length === paginationLimit.value;
})
.finally(() => {
isQueryRunning.value = false
})
}
const loadPage = (index, done) => {
return fetchFunction({
...filters.value,
appendItems: true,
limit: paginationLimit.value,
offset: paginationOffset.value,
}).then((data) => {
console.log("load page", data, data.length, paginationOffset.value, paginationLimit.value)
if (isQueryRunning.value) return
isQueryRunning.value = true
return fetchFunction({
...filters.value, appendItems: true, limit: paginationLimit.value, offset: paginationOffset.value,
}).then((data) => {
paginationOffset.value += paginationLimit.value;
hasMoreData.value = data.length === paginationLimit.value;
if (done) done()
})
.finally(() => {
isQueryRunning.value = false
})
}
const handleFiltersChanged = (newFilters) => {
@@ -65,9 +68,7 @@ export const useInfiniteScroll = (emits, props) => {
const emitsDef = ["load-more"]
const propsDef = {
hasMoreData: {
type: Boolean,
required: false,
default: true
type: Boolean, required: false, default: true
}
}
src/graphql/fragments/aircraft_basic.js
+8 -8
View File
@@ -1,14 +1,14 @@
import gql from "graphql-tag";
export const FRAGMENT_AIRCRAFT_BASIC_INFO = gql`
fragment aircraftBasicInfo on Aircraft {
id
callSign
manufacturer
organization {
fragment aircraftBasicInfo on Aircraft {
id
name
callSign
manufacturer
organization {
id
name
}
}
}
`;
src/graphql/fragments/airport.js
+12
View File
@@ -1,5 +1,17 @@
import gql from "graphql-tag";
export const FRAGMENT_AIRPORT_LIST_INFO = gql`
fragment airportListInfo on Airport {
id
name
icaoCode
gpsLatitude
gpsLongitude
elevation
iconUrl
}
`;
export const FRAGMENT_AIRPORT_INFO = gql`
fragment airportInfo on Airport {
id
src/graphql/fragments/flight_list.js
+4 -4
View File
@@ -1,5 +1,5 @@
import gql from "graphql-tag";
import {FRAGMENT_AIRPORT_INFO} from "src/graphql/fragments/airport";
import {FRAGMENT_AIRPORT_LIST_INFO} from "src/graphql/fragments/airport";
import {FRAGMENT_AIRCRAFT_BASIC_INFO} from "src/graphql/fragments/aircraft_basic";
export const FRAGMENT_FLIGHT_LIST_INFO = gql`
@@ -33,11 +33,11 @@ fragment flightListInfo on Flight {
}
takeoffAirport {
...airportInfo
...airportListInfo
}
landingAirport {
...airportInfo
...airportListInfo
}
aircraft {
@@ -45,7 +45,7 @@ fragment flightListInfo on Flight {
}
}
${FRAGMENT_AIRPORT_INFO}
${FRAGMENT_AIRPORT_LIST_INFO}
${FRAGMENT_AIRCRAFT_BASIC_INFO}
`;
src/pages/public/IndexPage.vue
+1 -1
View File
@@ -2,7 +2,7 @@
import {useMeta} from "quasar";
import {metaData} from "src/composables/meta";
import AppFooter from "components/AppFooter.vue";
import LatestFlightsSlider from "components/flights/slider/LatestFlightsSlider.vue";
import LatestFlightsSlider from "components/flights/LatestFlightsSlider.vue";
import {onMounted} from "vue";
import {useFlightsStore} from "stores/Flights";
import {storeToRefs} from "pinia";
src/pages/public/aircraft/AircraftDetailPage.vue
+7 -11
View File
@@ -28,27 +28,24 @@ import {homepageBreadcrumbs} from "src/composables/breadcrumbs";
const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
useAppStore().setPageTitle(aircraft.value.callSign);
useMeta(() => metaData({
title: aircraft.value.callSign,
image: aircraft.value.titleImage?.url,
keywords: [
"letadlo", ...aircraftKeywords(aircraft.value)
],
keywords: aircraftKeywords(aircraft.value),
description: aircraft.value.description || `Detail letadla ${aircraft.value.callSign}.`
}));
useAppStore().setBreadcrumbs([
...homepageBreadcrumbs(),
...homepageBreadcrumbs(),
{label: "Letadla"},
{label: aircraft.value.callSign}
]);
const {filters, loadPage, paginationLimit} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
filters.value = {aircraftId: aircraft.value.id};
const {handleFiltersChanged, hasMoreData, loadPage} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
onMounted(() => {
loadPage(false);
handleFiltersChanged({aircraftId: aircraft.value.id})
usePhotosStore().fetchPublic({aircraftId: aircraft.value.id});
});
</script>
@@ -74,10 +71,9 @@ onMounted(() => {
<FlightsList
v-else
:items="flights"
:total-items-count="totalItemsCount"
:is-query-running="areFlightsLoading"
:items-per-page="paginationLimit"
@load-more="loadPage(true)"
:has-more-data="hasMoreData"
@load-more="loadPage($event.index, $event.done)"
:public="true"
/>
</q-card-section>
src/pages/public/pilotProfile/EventDetailPage.vue
+23 -28
View File
@@ -39,46 +39,41 @@ useMeta(() => metaData({
description: event.value.description
}))
const {filters, loadPage, paginationLimit} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
filters.value = {username: props.pilot.publicUsername, eventId: event.value.id};
const {loadPage, hasMoreData, handleFiltersChanged} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
onMounted(() => {
loadPage(false);
handleFiltersChanged({username: props.pilot.publicUsername, eventId: event.value.id})
})
const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
</script>
<template>
<div>
<EventDetailSkeleton v-if="isQueryRunning || !event"/>
<EventDetailSkeleton v-if="isQueryRunning || !event"/>
<template v-else>
<EventBasicInfo :event="event"/>
<template v-else>
<EventBasicInfo :event="event"/>
<article class="q-my-lg" v-html="event.description"/>
<article class="q-my-lg" v-html="event.description"/>
<q-no-ssr>
<EventFlightsMap :event-url-slug="event.urlSlug" :only-public="true"/>
</q-no-ssr>
<q-no-ssr>
<!-- <EventFlightsMap :event-url-slug="event.urlSlug" :only-public="true"/>-->
</q-no-ssr>
<h3>Lety</h3>
<h3>Lety</h3>
<q-banner v-if="event.flights.length === 0" class="bg-light-blue text-white">
Zatím tu nemáš uložené žádné lety.
</q-banner>
<q-banner v-if="flights.length === 0" class="bg-light-blue text-white">
Zatím tu nemáš uložené žádné lety.
</q-banner>
<FlightsListSkeleton :items="paginationLimit" v-if="areFlightsLoading && flights?.length === 0"/>
<FlightsListSkeleton v-if="areFlightsLoading && flights?.length === 0"/>
<FlightsList
v-else
:items="flights"
:total-items-count="totalItemsCount"
:is-query-running="areFlightsLoading"
:items-per-page="paginationLimit"
:public="true"
@load-more="loadPage(true)"
/>
</template>
</div>
<FlightsList
v-else
:items="flights"
:public="true"
:has-more-data="hasMoreData"
@load-more="loadPage($event.index, $event.done)"
/>
</template>
</template>
src/pages/public/pilotProfile/FlightDetailPage.vue
+42 -42
View File
@@ -35,6 +35,8 @@ import {useAirportsStore} from "stores/Airports";
import {useFlightPlansStore} from "stores/FlightPlans";
import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
import BreadcrumbsNavigation from "components/navigation/BreadcrumbsNavigation.vue";
import {publicFlightBreadcrumbs} from "src/composables/breadcrumbs";
const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
@@ -58,7 +60,9 @@ const flightNameFormatted = flightName(flight.value);
const event = computed(() => flight.value.event);
useAppStore().setPageTitle(flightNameFormatted);
useAppStore().setBreadcrumbs([])//publicFlightBreadcrumbs(pilot.value, flight.value, event.value, false));
useAppStore().setBreadcrumbs(publicFlightBreadcrumbs(pilot.value, flight.value, event.value, false));
const {breadcrumbs} = storeToRefs(useAppStore());
useMeta(() => metaData({
title: `${flightNameFormatted} - ${pilot.value.name}`,
@@ -74,62 +78,58 @@ useMeta(() => metaData({
));
const contentTabs = ref()
const titleImageBottomAnchor = ref()
const scrollToContent = () => {
contentTabs.value.$el.scrollIntoView({behavior: "smooth"});
console.log(titleImageBottomAnchor.value)
if (!titleImageBottomAnchor.value) {
console.log("nemam anchor")
return
}
titleImageBottomAnchor.value.scrollIntoView({behavior: "smooth"});
}
const tab = ref("photos")
</script>
<template>
<q-img :src="flight.titlePhoto.url" style="height: 85vh" fit="cover">
<div class="absolute-full flex flex-center text-center">
<div>
<h2 class="text-h4">{{ flight.name }}</h2>
<div class="q-my-lg">
{{ formatDatetime(flight.takeoffDatetime, FORMAT_DATE) }}
</div>
<q-img :src="flight.titlePhoto.url" style="height: 100vh" fit="cover">
<div class="absolute-full">
<div style="height: 20vh; opacity: 0.4">
<BreadcrumbsNavigation :items="breadcrumbs || []"/>
</div>
<div class="flex flex-center text-center">
<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 v-if="flight.description !== ''">
{{ flight.description }}
</div>
<div>
<q-btn dense text icon="arrow_downward" size="lg" class="q-my-lg" @click="scrollToContent">Detail letu</q-btn>
</div>
<div class="absolute-bottom-right">
<q-btn class="q-ma-md" :to="{name: 'publicProfileDetail', params: {username: pilot.publicUsername}}">
<AvatarFromPhoto :size="32" class="q-mr-sm" :src="pilot.avatarImageUrl"/>
{{ pilot.name }}
</q-btn>
<FlightHeaderInfo :pilot="pilot" :flight="flight">
<div class="absolute-bottom">
<div class="row">
<div class="offset-2 col-grow">
<q-tabs
v-model="tab"
>
<q-tab @click="scrollToContent" class="q-px-xl" :ripple="false" name="photos" icon="image" label="Fotky" v-if="flightPhotos.length > 0"/>
<q-tab @click="scrollToContent" class="q-px-xl" :ripple="false" name="info" icon="alarm" label="Info"/>
<q-tab @click="scrollToContent" class="q-px-xl" :ripple="false" name="track" icon="route" label="Trasa" v-if="flightPlan || flight.track"/>
</q-tabs>
</div>
<div class="col-2">
<q-btn class="q-ma-md" :to="{name: 'publicFlightDetail', params: {username: pilot.publicUsername}}">
<AvatarFromPhoto :size="32" class="q-mr-sm" :src="pilot.avatarImageUrl"/>
{{ pilot.name }}
</q-btn>
</div>
</div>
</div>
</FlightHeaderInfo>
</div>
</div>
<div class="absolute-bottom" ref="titleImageBottomAnchor"></div>
</div>
</q-img>
<q-tabs
ref="contentTabs"
v-model="tab"
align="justify"
class="q-mt-md"
>
<q-tab :ripple="false" name="photos" icon="image" label="Fotky" v-if="flightPhotos.length > 0"/>
<q-tab :ripple="false" name="info" icon="alarm" label="Info"/>
<q-tab :ripple="false" name="track" icon="route" label="Trasa" v-if="flightPlan || flight.track"/>
</q-tabs>
<q-tab-panels v-model="tab" style="min-height: 80vh">
<q-tab-panel name="photos">
<q-inner-loading v-if="arePhotosLoading"/>
src/pages/public/pilotProfile/FlightsListPage.vue
+4 -8
View File
@@ -28,19 +28,18 @@ useMeta(() => metaData({
useAppStore().setPageTitle(props.pilot.publicUsername);
useAppStore().setBreadcrumbs(publicProfileBreadcrumbs(props.pilot, false))
const {filters, loadPage, paginationLimit} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
filters.value = {username: props.pilot.publicUsername};
const {loadPage, handleFiltersChanged} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
onMounted(() => {
loadPage(false);
handleFiltersChanged({username: props.pilot.publicUsername})
});
const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
</script>
<template>
<PublicFlightEventSwitcher :username="pilot?.publicUsername"/>
<FlightsListSkeleton :items="paginationLimit" v-if="areFlightsLoading && flights?.length === 0"/>
<FlightsListSkeleton v-if="areFlightsLoading && flights?.length === 0"/>
<q-banner class="bg-primary text-white" v-else-if="!areFlightsLoading && flights.length === 0">
Tento pilot zatím nepublikoval žádný let.
@@ -49,9 +48,6 @@ const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRef
<FlightsList
v-else
:items="flights"
:total-items-count="totalItemsCount"
:is-query-running="areFlightsLoading"
:items-per-page="paginationLimit"
:public="true"
@load-more="loadPage(true)"
/>
src/pages/public/poi/PointOfInterestDetailPage.vue
+5 -4
View File
@@ -41,11 +41,11 @@ useAppStore().setBreadcrumbs([
{label: pointOfInterest.value.name}
]);
const {filters, loadPage, paginationLimit} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
filters.value = {pointOfInterestId: pointOfInterest.value.id};
const {loadPage, handleFiltersChanged, hasMoreData} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
onMounted(() => {
usePhotosStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
loadPage(false);
handleFiltersChanged({pointOfInterestId: pointOfInterest.value.id});
});
</script>
@@ -79,7 +79,8 @@ onMounted(() => {
:is-query-running="areFlightsLoading"
:items-per-page="paginationLimit"
:public="true"
@load-more="loadPage(true)"
:has-more-data="hasMoreData"
@load-more="loadPage($event.index, $event.done)"
/>
</q-card-section>
</template>