72 lines
1.9 KiB
Vue
72 lines
1.9 KiB
Vue
<script setup>
|
|
import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
|
|
import {useAppStore} from "stores/App";
|
|
import {onMounted, ref} from "vue";
|
|
import {useUserStore} from "stores/User";
|
|
import {useRoute} from "vue-router";
|
|
import {useFlightsStore} from "stores/Flights";
|
|
import {storeToRefs} from "pinia";
|
|
import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
|
|
import FlightsList from "components/flights/FlightsList.vue";
|
|
import AvatarFromPhoto from "components/AvatarFromPhoto.vue";
|
|
|
|
const props = defineProps({
|
|
loggedUser: {
|
|
type: Object,
|
|
required: false
|
|
}
|
|
})
|
|
|
|
const username = useRoute().params.username;
|
|
const pilot = ref(null)
|
|
const loading = ref(true);
|
|
|
|
onMounted(() => {
|
|
loading.value = true;
|
|
useUserStore().fetchDetail(username).then((user) => {
|
|
pilot.value = user;
|
|
useAppStore().setPageTitle(pilot.value.name);
|
|
}).finally(() => {
|
|
loading.value = false
|
|
});
|
|
|
|
useFlightsStore().fetch(username);
|
|
})
|
|
|
|
const flights = storeToRefs(useFlightsStore()).items;
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<FlightsListSkeleton v-if="loading || !pilot"/>
|
|
<div class="row" v-else>
|
|
<div class="col">
|
|
<q-banner class="bg-primary text-white" v-if="flights.length === 0">
|
|
Tento pilot zatím nepublikoval žádný let.
|
|
</q-banner>
|
|
|
|
<template v-else>
|
|
<FlightsList
|
|
:items="flights"
|
|
:displayVisibilityInfo="loggedUser.id === pilot.id"
|
|
:route-detail="{name: 'publicFlightDetail', params: {username: username}}"
|
|
/>
|
|
</template>
|
|
|
|
</div>
|
|
<div class="col-4 sm-hide">
|
|
<div class="text-center">
|
|
<AvatarFromPhoto :size="150" :src="pilot.avatarImageUrl"/>
|
|
</div>
|
|
|
|
<h3>{{ pilot.name }}</h3>
|
|
<div class="text-subtitle1">
|
|
Registrován: {{ formatDatetime(pilot.createdAt, FORMAT_DATE) }}
|
|
</div>
|
|
|
|
<div class="q-my-lg" v-html="pilot.description"/>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|