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

Lepsi verejna cast, ssr, lepsi prace s fotkamaa

Browse Source
This commit is contained in:
Michal Kváček
2023-12-04 22:46:23 +01:00
parent 11cc6ad107
commit 3bd4d7ba52
62 changed files with 1331 additions and 619 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/boot/apollo.js
+1 -1
View File
@@ -7,7 +7,7 @@ import {Notify} from "quasar";
import {errorObject, warningObject} from "src/composables/dialog";
const handleRefreshToken = (store, forward, operation) => {
if (!operation._refreshUnauthorizedUser) return;
if (!operation.query?._refreshUnauthorizedUser) return;
return fromPromise(useUserStore(store).refreshAccessToken()
.catch((error) => {
src/components/ContentCard.vue
+32
View File
@@ -0,0 +1,32 @@
<script setup>
import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
const props = defineProps({
titlePhoto: {
type: Object,
required: false
},
title: {
type: String,
required: false
}
})
</script>
<template>
<q-card class="flight-detail-card q-mb-lg">
<TitlePhotoWithGallery
v-if="titlePhoto"
:photo="titlePhoto"
:title="title"
/>
<q-card-actions>
<slot name="actions" />
</q-card-actions>
<slot name="content"/>
</q-card>
</template>
src/components/aircrafts/AircraftDetailCard.vue
-66
View File
@@ -1,66 +0,0 @@
<script setup>
import {confirmObject} from "src/composables/dialog";
import {useQuasar} from "quasar";
import {storeToRefs} from "pinia";
import {useUserStore} from "stores/User";
const props = defineProps({
aircraft: {
type: Object,
required: true
}
});
const emits = defineEmits(["delete"]);
const $q = useQuasar();
const loggedUser = storeToRefs(useUserStore()).user;
const confirmDelete = (aircraftId) => {
$q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
.onOk(() => {
emits("delete", aircraftId);
});
};
</script>
<template>
<q-card class="q-mx-md q-my-md flight-detail-card">
<q-img :src="aircraft.photoUrl" v-if="aircraft.photoUrl"/>
<q-card-actions class="q-my-md" v-if="aircraft.createdById === loggedUser.id">
<div class="col-grow">
<q-btn
flat
:to='{name: "aircraftEdit", params: {id: aircraft.id}}'
icon="edit"
text-color="primary"
label="Upravit"
/>
</div>
<q-btn @click="confirmDelete(aircraft.id)" icon="delete" flat text-color="red" label="Smazat"/>
</q-card-actions>
<q-card-section>
<q-list>
<q-item v-if="aircraft.organization">
Provozovatel: {{ aircraft.organization.name }}
</q-item>
<q-item v-if="aircraft.manufacturer">
Výrobce: {{ aircraft.manufacturer }}
</q-item>
<q-item v-if="aircraft.model">
Model: {{ aircraft.model }}
</q-item>
<q-item v-if="aircraft.seats">
Počet míst: {{ aircraft.seats }}
</q-item>
</q-list>
</q-card-section>
<q-card-section>
<article v-html="aircraft.description" class="q-my-md"/>
</q-card-section>
</q-card>
</template>
src/components/aircrafts/AircraftDetailSkeleton.vue
+3 -3
View File
@@ -15,9 +15,9 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
<q-card-section class="q-my-md">
<BasicTextSkeleton :paragraphs="1" :lines="2"/>
</q-card-section>
</q-card>
<q-card class="flight-detail-card" flat>
<BasicListSkeleton :items-count-min="1" :items-count-max="4"/>
<h3>Lety</h3>
<BasicListSkeleton :items="5" />
</q-card>
</template>
src/components/aircrafts/AircraftForm.vue
+4 -9
View File
@@ -14,8 +14,8 @@ const formData = reactive({
seats: null,
manufacturer: "",
description: "",
photo: null,
organization: null
organization: null,
isPublic: false
});
const props = defineProps({
@@ -84,8 +84,6 @@ onMounted(() => {
v-bind="commonProps"
/>
<q-input
type="textarea"
v-model="formData.description"
@@ -93,10 +91,7 @@ onMounted(() => {
v-bind="commonProps"
/>
<q-file v-model="formData.photo" label="Fotografie" v-bind="commonProps">
<template #prepend>
<q-icon name="upload"/>
</template>
</q-file>
<q-checkbox v-model="formData.isPublic" label="Veřejné?" v-bind="commonProps"/>
</FormWrapper>
</template>
src/components/aircrafts/AircraftInfo.vue
+30
View File
@@ -0,0 +1,30 @@
<script setup>
import {useQuasar} from "quasar";
const props = defineProps({
aircraft: {
type: Object,
required: true
}
});
</script>
<template>
<q-list>
<q-item v-if="aircraft.organization">
Provozovatel: {{ aircraft.organization.name }}
</q-item>
<q-item v-if="aircraft.manufacturer">
Výrobce: {{ aircraft.manufacturer }}
</q-item>
<q-item v-if="aircraft.model">
Model: {{ aircraft.model }}
</q-item>
<q-item v-if="aircraft.seats">
Počet míst: {{ aircraft.seats }}
</q-item>
</q-list>
<article v-html="aircraft.description" class="q-my-md"/>
</template>
src/components/aircrafts/AircraftsList.vue
+2 -2
View File
@@ -21,8 +21,8 @@ useAppStore().setPageTitle("Letadla");
v-for="aircraft of props.items" :key="aircraft"
>
<q-item-section avatar>
<q-avatar v-if="aircraft.photoUrl">
<img :src="aircraft.photoUrl" alt=""/>
<q-avatar v-if="aircraft.titlePhoto">
<img :src="aircraft.titlePhoto.url" alt=""/>
</q-avatar>
<q-avatar color="teal" text-color="white" icon="flight" v-else/>
</q-item-section>
src/components/copilots/CopilotDetailSkeleton.vue
+1 -1
View File
@@ -4,5 +4,5 @@ import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
<template>
<q-skeleton type="rect" class="q-my-lg" style="width: 200px; height: 40px" />
<BasicListSkeleton :items-count-min="1" :items-count-max="5"/>
<BasicListSkeleton :items="4"/>
</template>
src/components/flights/FlightBasicInfo.vue
+31 -6
View File
@@ -11,7 +11,18 @@ const props = defineProps({
type: Object,
required: false,
default: null
},
aircraftDetailRoute: {
type: Object,
required: false,
default: null
},
poiDetailRoute: {
type: Object,
required: false,
default: null
}
})
</script>
@@ -22,7 +33,15 @@ const props = defineProps({
<q-icon name="flight"/>
</q-item-section>
<q-item-section>
{{ flight.aircraft.callSign }}
<router-link
:to="{...aircraftDetailRoute, params: {...aircraftDetailRoute.params, id: flight.aircraft.id}}"
v-if="aircraftDetailRoute"
>
{{ flight.aircraft.callSign }}
</router-link>
<template v-else>
{{ flight.aircraft.callSign }}
</template>
</q-item-section>
</q-item>
@@ -53,12 +72,18 @@ const props = defineProps({
<q-item v-for="poi in flight.track" :key="poi.id">
<q-item-section avatar>
<q-icon name="place" v-if="poi.pointOfInterest" />
<q-icon name="local_airport" v-if="poi.airport" />
<q-icon name="place" v-if="poi.pointOfInterest"/>
<q-icon name="local_airport" v-if="poi.airport"/>
</q-item-section>
<q-item-section>
<template v-if="poi.pointOfInterest">
{{ poi.pointOfInterest.name }}
<router-link
:to="{name: poiDetailRoute.name, params: {...poiDetailRoute.params, id: poi.pointOfInterest.id}}"
v-if="poi.pointOfInterest.isPublic"
>
{{ poi.pointOfInterest.name }}
</router-link>
<template v-else>{{ poi.pointOfInterest.name }}</template>
</template>
<span v-if="poi.airport">
<strong>{{ poi.airport.icaoCode }}</strong> ({{ poi.airport.name }}),
@@ -98,8 +123,8 @@ const props = defineProps({
</q-item-section>
<q-item-section>
<router-link
v-if="copilotDetailRoute"
:to="{name: copilotDetailRoute.name, params: {...copilotDetailRoute.params, id: copilot.id}}"
v-if="copilotDetailRoute"
:to="{name: copilotDetailRoute.name, params: {...copilotDetailRoute.params, id: copilot.id}}"
>
{{ copilot.name }}
</router-link>
src/components/flights/FlightTrackMap.vue
+5 -1
View File
@@ -7,11 +7,15 @@ const props = defineProps({
flight: {
type: Object,
required: true
},
photos: {
type: Array,
required: false,
}
})
const mapPhotos = computed(() => props.flight.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude));
const mapPhotos = computed(() => props.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude));
const poisWithGPS = computed(() => props.flight.track.map(poi => poi.pointOfInterest || poi.airport));
const mapMarkers = [props.flight.takeoffAirport].concat(poisWithGPS.value).concat([props.flight.landingAirport]);
src/components/flights/FlightsList.vue
+20 -13
View File
@@ -8,18 +8,18 @@ const props = defineProps({
type: Array,
required: true
},
routeDetail: {
type: Object,
required: false,
default: () => ({name: 'flightDetail', params: {}})
},
displayVisibilityInfo: {
public: {
type: Boolean,
required: false,
default: true
}
required: true
},
});
const routeDetail = (flight) => {
if (props.public)
return {name: "publicFlightDetail", params: {username: flight.pilot.publicUsername, id: flight.id}}
else
return {name: "flightDetail", params: {id: flight.id}}
};
</script>
<template>
@@ -28,16 +28,22 @@ const props = defineProps({
v-for="flight of items" :key="flight"
ripple
clickable
:to="{name: routeDetail.name, params: {...routeDetail.params, id: flight.id}}"
:to="routeDetail(flight)"
>
<q-item-section avatar>
<AvatarFromPhoto :size="120" v-if="flight.coverPhoto" :src="flight.coverPhoto.thumbnailUrl"/>
<AvatarFromPhoto :size="120" v-if="flight.titlePhoto" :src="flight.titlePhoto.thumbnailUrl"/>
</q-item-section>
<q-item-section>
<div class="text-h5 q-mb-md">{{ flightName(flight) }}</div>
<div class="text-secondary" v-if="props.public">
<q-icon name="support_agent"/>
@{{flight.pilot.publicUsername}}
</div>
<div class="text-secondary" v-if="flight.copilot">
<q-icon name="person"/>
{{ flight.pilot.name }}
{{ flight.copilot.name }}
</div>
@@ -51,12 +57,13 @@ const props = defineProps({
</div>
<div class="text-secondary" v-if="flight.event">
<q-icon name="event" />
<q-icon name="event"/>
{{ flight.event.name }}
</div>
</q-item-section>
<q-item-section side top v-if="flight.isPublic && displayVisibilityInfo">
<q-item-section side top v-if="flight.isPublic && !props.public">
<!-- Zobraz jen v adminu -->
<q-icon name="visibility"></q-icon>
</q-item-section>
</q-item>
src/components/photos/BatchPhotoFormDialog.vue
+26 -8
View File
@@ -12,13 +12,21 @@ const props = defineProps({
},
locations: {
type: Array
}
},
aircraft: {
type: Object
},
copilots: {
type: Array
},
});
const formData = ref({
name: "",
description: "",
pointOfInterest: null,
copilots: [],
isAircraft: false,
photoIds: []
});
@@ -34,23 +42,33 @@ const setup = () => {
<template>
<DialogWrapper :formData="formData" @show="setup()">
<q-card-section class="text-center">
<!-- <q-scroll-area style="min-height: 80px; max-height: 150px">-->
<q-img :src="photo.thumbnailUrl" width="80px" class="q-ma-sm" v-for="photo in photos" :key="photo.thumbnailUrl"/>
<!-- {{ photos }}-->
<!-- </q-scroll-area>-->
</q-card-section>
<q-card-section>
<FormWrapper :save-button="false">
<q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
<q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
<ComboboxInput
:options="locations"
v-bind="commonProps"
v-model="formData.pointOfInterest"
:enable-new-values="false"
label="POI"
label="Místo"
/>
<q-select
v-if="copilots.length > 0"
:options="copilots"
v-model="formData.copilots"
v-bind="commonProps"
label="Kopiloti"
option-label="name"
option-value="id"
multiple
/>
<q-checkbox v-model="formData.isAircraft" :label="`Letadlo (${aircraft.callSign})`"/>
<q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
<q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
</FormWrapper>
</q-card-section>
</DialogWrapper>
src/components/photos/PhotoFormDialog.vue
+23 -6
View File
@@ -12,6 +12,12 @@ const props = defineProps({
},
locations: {
type: Array
},
aircraft: {
type: Object
},
copilots: {
type: Array
}
});
@@ -20,7 +26,8 @@ const formData = ref({
name: "",
description: "",
pointOfInterest: null,
isFlightCover: false
copilots: [],
isAircraft: false,
});
const setup = (() => {
@@ -33,17 +40,27 @@ const setup = (() => {
<q-img :src="photo.thumbnailUrl"/>
<q-card-section>
<FormWrapper :save-button="false">
<q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
<q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
<ComboboxInput
:options="locations"
v-bind="commonProps"
v-model="formData.pointOfInterest"
label="POI"
label="Místo"
/>
<q-checkbox v-model="formData.isFlightCover" label="Úvodní fotografie k letu?"/>
<q-select
v-if="copilots.length > 0"
:options="copilots"
v-model="formData.copilots"
v-bind="commonProps"
label="Kopiloti"
option-label="name"
option-value="id"
multiple
/>
<q-checkbox v-model="formData.isAircraft" :label="`Letadlo (${aircraft.callSign})`"/>
<q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
<q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
</FormWrapper>
</q-card-section>
</DialogWrapper>
src/components/photos/PhotoGallery.vue
+62 -27
View File
@@ -1,17 +1,19 @@
<script setup>
import {onMounted, onUnmounted} from "vue";
import {computed, onMounted, onUnmounted, ref, watch} from "vue";
import 'photoswipe/style.css';
import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css";
import PhotoSwipeDynamicCaption from "../../../node_modules/photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.esm";
import PhotoCaption from "components/photos/PhotoCaption.vue";
import PhotoSwipeLightbox from "../../../node_modules/photoswipe/dist/photoswipe-lightbox.esm"
import PhotoSwipe from "../../../node_modules/photoswipe/dist/photoswipe.esm"
import {useRoute, useRouter} from "vue-router";
import {usePhotosStore} from "stores/Photos";
const props = defineProps({
galleryId: {
type: String,
required: false,
default: () => "randomGalleryId"
default: () => "photogallery"
},
photos: {
type: Array,
@@ -19,46 +21,79 @@ const props = defineProps({
}
})
let $lightbox = null;
const route = useRoute();
const $router = useRouter();
let $lightbox = ref(null);
const initLightbox = () => {
if ($lightbox.value && $lightbox.value.pswp) {
// lightbox already initialized
return
}
$lightbox.value = new PhotoSwipeLightbox({
gallery: '#' + props.galleryId,
children: 'a',
pswpModule: () => PhotoSwipe,
});
let captionPlugin = new PhotoSwipeDynamicCaption($lightbox.value, {
type: 'auto',
});
$lightbox.value.init();
}
onMounted(() => {
if (!$lightbox) {
$lightbox = new PhotoSwipeLightbox({
gallery: '#' + props.galleryId,
children: 'a',
pswpModule: () => import('photoswipe'),
});
initLightbox();
let captionPlugin = new PhotoSwipeDynamicCaption($lightbox, {
type: 'auto',
});
// todo: tohle nefunguje, sice se galerie zavre, ale i tak se user presmeruje na predchozi stranku
window.onpopstate = function (e) {
if (!$lightbox.value || !$lightbox.value.pswp) {
initLightbox();
}
$lightbox.init();
}
if ($lightbox.value && $lightbox.value.pswp)
$lightbox.value.pswp.close();
};
});
onUnmounted(() => {
if ($lightbox) {
$lightbox.destroy();
$lightbox = null;
if ($lightbox.value) {
$lightbox.value.destroy();
$lightbox.value = null;
}
});
const openedPhoto = computed(() => usePhotosStore().openedPhoto);
watch(() => [openedPhoto.value, $lightbox.value], () => {
if (!$lightbox.value || !openedPhoto.value) return;
const idx = props.photos.findIndex(p => p.id === openedPhoto.value.id);
if (idx >= 0) {
$lightbox.value.loadAndOpen(idx);
usePhotosStore().setOpenedPhoto(null);
}
}, {immediate: true})
</script>
<template>
<div :id="galleryId" class="row">
<div class="col-6 col-sm-4 col-md-4 col-lg-3 q-pa-sm" v-for="photo in photos" :key="photo.id">
<a
:href="photo.url"
:data-pswp-width="photo.width"
:data-pswp-height="photo.height"
target="_blank"
rel="noreferrer"
:href="photo.url"
:data-pswp-width="photo.width"
:data-pswp-height="photo.height"
target="_blank"
rel="noreferrer"
>
<q-img
spinner-color="primary"
class="rounded-borders"
:src="photo.thumbnailUrl"
alt=""
spinner-color="primary"
class="rounded-borders"
:src="photo.thumbnailUrl"
alt=""
>
<div class="absolute-bottom" v-if="photo.name !== ''">
{{ photo.name }}
src/components/photos/PhotosEditorList.vue
+47 -27
View File
@@ -3,24 +3,29 @@ import {computed, onMounted, reactive, ref, watch} from "vue";
import {useQuasar} from "quasar";
import {confirmObject} from "src/composables/dialog";
const $q = useQuasar();
const props = defineProps({
photos: {
type: Array
},
});
const batchEdit = ref({});
onMounted(() => {
for (const photo of props.photos) {
batchEdit.value[photo.id] = false;
titlePhoto: {
type: Object,
},
showActions: {
type: Boolean,
required: false,
default: true
}
});
const emits = defineEmits(["edit", "delete", "batch-edit", "batch-rotate"])
const $q = useQuasar();
const batchEdit = ref({});
for (const photo of props.photos) {
batchEdit.value[photo.id] = false;
}
const emits = defineEmits(["edit", "delete", "set-title-photo", "batch-edit", "batch-rotate"])
const openEdit = (photo) => {
emits("edit", photo);
@@ -29,20 +34,20 @@ const openEdit = (photo) => {
const confirmPhotoDelete = (id) => {
$q.dialog(confirmObject("Opravdu chces smazat tuto fotku?"))
.onOk(() => {
emits("delete", id);
});
.onOk(() => {
emits("delete", id);
});
}
const confirmBatchPhotoDelete = () => {
$q.dialog(confirmObject("Opravdu chces smazat vybrané fotky?"))
.onOk(() => {
for (const id in batchEdit.value) {
if (!batchEdit.value[id]) continue;
emits("delete", parseInt(id));
batchEdit.value[id] = false;
}
});
.onOk(() => {
for (const id in batchEdit.value) {
if (!batchEdit.value[id]) continue;
emits("delete", parseInt(id));
batchEdit.value[id] = false;
}
});
}
const handleImageClick = (photo, idx) => {
@@ -108,6 +113,10 @@ const batchOptionsProps = computed(() => ({
class: "q-ml-lg",
disable: !isBatchEditAllowed.value
}));
const setFlightCover = (titlePhoto) => {
emits("set-title-photo", titlePhoto);
}
</script>
<template>
@@ -115,6 +124,15 @@ const batchOptionsProps = computed(() => ({
<div class="col-6 col-sm-4 col-md-4 col-lg-3" v-for="(photo, idx) in photos" :key="photo.id">
<q-card :class='{"q-ma-sm": true, "shadow-1": !batchEdit[photo.id], "shadow-10": batchEdit[photo.id]}'>
<q-img :src="photo.thumbnailUrl" @click="handleImageClick(photo, idx)" style="cursor: pointer">
<div class="absolute-top bg-transparent text-right">
<q-btn
icon="star"
:color="titlePhoto?.id === photo.id ? 'amber-9' : 'grey-6'"
round
@click.stop.prevent="setFlightCover(photo)"
/>
</div>
<div class="absolute-bottom" v-if="photo.name !== '' || photo.description !== ''">
<div class="text-h6" v-if="photo.name !== ''">
{{ photo.name }}
@@ -125,24 +143,26 @@ const batchOptionsProps = computed(() => ({
</div>
</q-img>
<q-card-actions align="right" :class="{'bg-primary': batchEdit[photo.id], 'text-white': batchEdit[photo.id]}">
<q-card-actions align="right" :class="{'bg-primary': batchEdit[photo.id], 'text-white': batchEdit[photo.id]}" v-if="showActions">
<div class="col-grow">
<q-checkbox v-model="batchEdit[photo.id]"/>
<q-icon name="star" v-if="photo.isFlightCover" color="red"/>
<q-icon name="flight" v-if="photo.isAircraft" size="xs" color="grey-5" />
<q-icon name="person" v-if="photo.copilots.length > 0" size="xs" color="grey-5" />
</div>
<q-btn flat icon="edit" color="black" :to="{name: 'photoEditor', params: {id: photo.id}}"/>
<q-btn flat icon="info" color="blue" @click="openEdit(photo)"/>
<q-btn flat icon="edit" color="blue" @click="openEdit(photo)"/>
<q-btn flat icon="tune" color="black" :to="{name: 'photoEditor', params: {id: photo.id}}"/>
<q-btn flat icon="delete" color="red" @click="confirmPhotoDelete(photo.id)"/>
</q-card-actions>
</q-card>
</div>
</div>
<q-page-sticky :offset="[50, 50]" position="bottom" v-if="photos.length > 0">
<q-page-sticky :offset="[50, 50]" position="bottom" v-if="photos.length > 0 && showActions">
<q-card>
<q-card-actions>
<q-checkbox v-model="checkAll" label="Vybrat vše"/>
<q-btn v-bind="batchOptionsProps" icon="info" :color="isBatchEditAllowed ? 'primary' : 'grey'" @click="openBatchEdit"/>
<q-btn v-bind="batchOptionsProps" icon="edit" :color="isBatchEditAllowed ? 'primary' : 'grey'" @click="openBatchEdit"/>
<q-btn v-bind="batchOptionsProps" icon="rotate_90_degrees_ccw" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate('counterClockwise')"/>
<q-btn v-bind="batchOptionsProps" icon="rotate_90_degrees_cw" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate('clockwise')"/>
<q-btn v-bind="batchOptionsProps" icon="delete" :color="isBatchEditAllowed ? 'red' : 'grey'" @click="confirmBatchPhotoDelete"/>
src/components/photos/TitlePhotoWithGallery.vue
+31
View File
@@ -0,0 +1,31 @@
<script setup>
import {useRoute, useRouter} from "vue-router";
import {usePhotosStore} from "stores/Photos";
const props = defineProps({
photo: {
type: Object,
required: true
},
title: {
type: String,
required: false
}
});
const route = useRoute();
const $router = useRouter();
const openGallery = (photo) => {
usePhotosStore().setOpenedPhoto(photo);
}
</script>
<template>
<q-img :src="photo.url" fit="cover" :ratio="4/3" @click="openGallery(photo)" class="cursor-pointer" v-if="photo">
<div class="absolute-bottom custom-caption" v-if="title && title !== ''">
<div class="text-h5">
{{ title }}
</div>
</div>
</q-img>
</template>
src/css/quasar.variables.scss
+1 -1
View File
@@ -12,7 +12,7 @@
// to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website.
$primary : #87c8ec; //#1976D2;
$primary : #469ccc; //#1976D2;
$secondary : #26A69A;
$accent : #9C27B0;
src/graphql/fragments/aircraft.js
+27 -10
View File
@@ -1,4 +1,6 @@
import gql from "graphql-tag";
import {FRAGMENT_PHOTO_FULL_INFO} from "src/graphql/fragments/photo";
import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
export const FRAGMENT_AIRCRAFT_FULL_INFO = gql`
fragment aircraftFullInfo on Aircraft {
@@ -7,9 +9,15 @@ fragment aircraftFullInfo on Aircraft {
model
description
manufacturer
photoUrl
seats
createdById
isPublic
titlePhoto {
id
url
}
organization {
id
@@ -18,15 +26,24 @@ fragment aircraftFullInfo on Aircraft {
}
`;
export const FRAGMENT_AIRCRAFT_BASIC_INFO = gql`
fragment aircraftBasicInfo on Aircraft {
id
callSign
manufacturer
export const FRAGMENT_AIRCRAFT_FULL_PRIVATE_INFO = gql`
fragment aircraftFullPrivateInfo on Aircraft {
...aircraftFullInfo
photos {
...photoFullInfo
organization {
id
name
}
copilots {
id
name
}
}
flights {
...flightListInfo
}
}
${FRAGMENT_AIRCRAFT_FULL_INFO}
${FRAGMENT_PHOTO_FULL_INFO}
${FRAGMENT_FLIGHT_LIST_INFO}
`;
src/graphql/fragments/aircraft_basic.js
+14
View File
@@ -0,0 +1,14 @@
import gql from "graphql-tag";
export const FRAGMENT_AIRCRAFT_BASIC_INFO = gql`
fragment aircraftBasicInfo on Aircraft {
id
callSign
manufacturer
organization {
id
name
}
}
`;
src/graphql/fragments/copilot.js
+5
View File
@@ -11,5 +11,10 @@ export const FRAGMENT_COPILOT_FULL_INFO = gql`
fragment copilotFullInfo on Copilot {
id
name
titlePhoto {
id
url
}
}
`;
src/graphql/fragments/flight.js
+32 -19
View File
@@ -28,15 +28,28 @@ fragment flightFullInfo on Flight {
durationMinCalculated
isPublic
coverPhoto {
titlePhoto {
thumbnailUrl
url
id
}
takeoffAirport {
...airportInfo
}
landingAirport {
...airportInfo
}
landingWeatherInfo {
...weatherFullInfo
}
takeoffWeatherInfo {
...weatherFullInfo
}
copilots {
id
name
@@ -73,30 +86,30 @@ fragment flightFullInfo on Flight {
landingDuration
}
landingAirport {
...airportInfo
}
landingWeatherInfo {
...weatherFullInfo
}
takeoffWeatherInfo {
...weatherFullInfo
}
aircraft {
...aircraftFullInfo
}
photos {
...photoFullInfo
}
}
${FRAGMENT_PHOTO_FULL_INFO}
${FRAGMENT_AIRCRAFT_FULL_INFO}
${FRAGMENT_AIRPORT_INFO}
${FRAGMENT_POI_FULL_INFO}
${FRAGMENT_WEATHER_FULL_INFO}
`;
export const FRAGMENT_FLIGHT_FULL_PRIVATE_INFO = gql`
fragment flightFullPrivateInfo on Flight {
...flightFullInfo
photos {
...photoFullInfo
copilots {
id
name
}
}
}
${FRAGMENT_FLIGHT_FULL_INFO}
${FRAGMENT_PHOTO_FULL_INFO}
`;
src/graphql/fragments/flight_list.js
+4 -2
View File
@@ -1,6 +1,6 @@
import gql from "graphql-tag";
import {FRAGMENT_AIRPORT_INFO} from "src/graphql/fragments/airport";
import {FRAGMENT_AIRCRAFT_BASIC_INFO} from "src/graphql/fragments/aircraft";
import {FRAGMENT_AIRCRAFT_BASIC_INFO} from "src/graphql/fragments/aircraft_basic";
export const FRAGMENT_FLIGHT_LIST_INFO = gql`
fragment flightListInfo on Flight {
@@ -11,13 +11,15 @@ fragment flightListInfo on Flight {
durationMinCalculated
isPublic
coverPhoto {
titlePhoto {
thumbnailUrl
}
track {
pointOfInterest {
id
name
isPublic
}
airport {
icaoCode
src/graphql/fragments/organization.js
+1 -1
View File
@@ -1,5 +1,5 @@
import gql from "graphql-tag";
import {FRAGMENT_AIRCRAFT_BASIC_INFO} from "src/graphql/fragments/aircraft";
import {FRAGMENT_AIRCRAFT_BASIC_INFO} from "src/graphql/fragments/aircraft_basic";
export const FRAGMENT_ORGANIZATION_LIST_INFO = gql`
fragment organizationListInfo on Organization {
src/graphql/fragments/photo.js
+5 -4
View File
@@ -9,10 +9,7 @@ export const FRAGMENT_PHOTO_FULL_INFO = gql`
name
description
flightId
pointOfInterest {
id
name
}
isAircraft
width
height
isFlightCover
@@ -21,4 +18,8 @@ export const FRAGMENT_PHOTO_FULL_INFO = gql`
gpsAltitude
terrainElevation
exposedAt
copilots {
id
name
}
}`;
src/graphql/fragments/poi.js
+28 -9
View File
@@ -1,6 +1,8 @@
import gql from "graphql-tag";
import {FRAGMENT_PHOTO_FULL_INFO} from "src/graphql/fragments/photo";
import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
export const FRAGMENT_POI_LIST_INFO = gql`
fragment pointOfInterestListInfo on PointOfInterest {
id
@@ -22,20 +24,37 @@ fragment pointOfInterestFullInfo on PointOfInterest {
gpsLatitude
gpsLongitude
createdById
titlePhoto {
id
url
}
type {
id
name
}
flights {
...flightListInfo
}
photos {
thumbnailUrl
url
name
description
}
}
`;
export const FRAGMENT_POI_FULL_PRIVATE_INFO = gql`
fragment pointOfInterestFullPrivateInfo on PointOfInterest {
...pointOfInterestFullInfo
flights {
...flightListInfo
}
photos {
...photoFullInfo
copilots {
id
name
}
}
}
${FRAGMENT_POI_FULL_INFO}
${FRAGMENT_PHOTO_FULL_INFO}
${FRAGMENT_FLIGHT_LIST_INFO}
`;
src/graphql/mutations/aircrafts.js
+5 -5
View File
@@ -1,24 +1,24 @@
import gql from "graphql-tag";
import {FRAGMENT_AIRCRAFT_FULL_INFO} from "src/graphql/fragments/aircraft";
import {FRAGMENT_AIRCRAFT_FULL_PRIVATE_INFO} from "src/graphql/fragments/aircraft";
export const CREATE_AIRCRAFT = gql`
mutation createAircraft($input: CreateAircraftInput!) {
createAircraft(input: $input) {
...aircraftFullInfo
...aircraftFullPrivateInfo
}
}
${FRAGMENT_AIRCRAFT_FULL_INFO}
${FRAGMENT_AIRCRAFT_FULL_PRIVATE_INFO}
`;
export const EDIT_AIRCRAFT = gql`
mutation editAircraft($id: Int!, $input: EditAircraftInput!) {
editAircraft(id: $id, input: $input) {
...aircraftFullInfo
...aircraftFullPrivateInfo
}
}
${FRAGMENT_AIRCRAFT_FULL_INFO}
${FRAGMENT_AIRCRAFT_FULL_PRIVATE_INFO}
`;
export const DELETE_AIRCRAFT = gql`
mutation deleteAircraft($id: Int!) {
src/graphql/mutations/flight.js
+5 -5
View File
@@ -1,23 +1,23 @@
import gql from "graphql-tag";
import {FRAGMENT_FLIGHT_FULL_INFO} from "src/graphql/fragments/flight";
import {FRAGMENT_FLIGHT_FULL_PRIVATE_INFO} from "src/graphql/fragments/flight";
export const CREATE_FLIGHT = gql`
mutation createFlight($input: CreateFlightInput!) {
createFlight(input: $input) {
...flightFullInfo
...flightFullPrivateInfo
}
}
${FRAGMENT_FLIGHT_FULL_INFO}
${FRAGMENT_FLIGHT_FULL_PRIVATE_INFO}
`;
export const EDIT_FLIGHT = gql`
mutation editFlight($id: Int!, $input: EditFlightInput!) {
editFlight(id: $id, input: $input) {
...flightFullInfo
...flightFullPrivateInfo
}
}
${FRAGMENT_FLIGHT_FULL_INFO}
${FRAGMENT_FLIGHT_FULL_PRIVATE_INFO}
`;
src/graphql/mutations/poi.js
+5 -5
View File
@@ -1,22 +1,22 @@
import gql from "graphql-tag";
import {FRAGMENT_POI_FULL_INFO, FRAGMENT_POI_LIST_INFO} from "src/graphql/fragments/poi";
import {FRAGMENT_POI_FULL_PRIVATE_INFO} from "src/graphql/fragments/poi";
export const CREATE_POI = gql`
mutation createPointOfInterest($input: CreatePointOfInterestInput!) {
createPointOfInterest(input: $input) {
...pointOfInterestFullInfo
...pointOfInterestFullPrivateInfo
}
}
${FRAGMENT_POI_FULL_INFO}
${FRAGMENT_POI_FULL_PRIVATE_INFO}
`;
export const EDIT_POI = gql`
mutation editPointOfInterest($id: Int!, $input: EditPointOfInterestInput!) {
editPointOfInterest(id: $id, input: $input) {
...pointOfInterestFullInfo
...pointOfInterestFullPrivateInfo
}
}
${FRAGMENT_POI_FULL_INFO}
${FRAGMENT_POI_FULL_PRIVATE_INFO}
`;
src/graphql/queries/aircrafts.js
+10 -8
View File
@@ -1,6 +1,5 @@
import gql from "graphql-tag";
import {FRAGMENT_AIRCRAFT_FULL_INFO} from "src/graphql/fragments/aircraft";
import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
import {FRAGMENT_AIRCRAFT_FULL_INFO, FRAGMENT_AIRCRAFT_FULL_PRIVATE_INFO} from "src/graphql/fragments/aircraft";
export const AIRCRAFTS_LIST = gql`
query AircraftsList {
@@ -16,14 +15,17 @@ ${FRAGMENT_AIRCRAFT_FULL_INFO}
export const AIRCRAFT_DETAIL = gql`
query AircraftDetail($id: Int!) {
aircraft(id: $id) {
...aircraftFullPrivateInfo
}
}
${FRAGMENT_AIRCRAFT_FULL_PRIVATE_INFO}
`;
export const AIRCRAFT_PUBLIC_DETAIL = gql`
query AircraftDetail($id: Int!) {
aircraft(id: $id, public: true) {
...aircraftFullInfo
flights {
...flightListInfo
}
}
}
${FRAGMENT_AIRCRAFT_FULL_INFO}
${FRAGMENT_FLIGHT_LIST_INFO}
`;
src/graphql/queries/copilots.js
+16
View File
@@ -1,6 +1,7 @@
import gql from "graphql-tag";
import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
import {FRAGMENT_COPILOT_FULL_INFO, FRAGMENT_COPILOT_LIST_INFO} from "src/graphql/fragments/copilot";
import {FRAGMENT_PHOTO_FULL_INFO} from "src/graphql/fragments/photo";
export const COPILOTS_LIST = gql`
query copilotsList {
@@ -17,12 +18,27 @@ query copilot($id: Int!, $pilotUsername: String) {
copilot(id: $id, pilotUsername: $pilotUsername) {
...copilotFullInfo
photos {
...photoFullInfo
}
flights {
...flightListInfo
}
}
}
${FRAGMENT_PHOTO_FULL_INFO}
${FRAGMENT_COPILOT_FULL_INFO}
${FRAGMENT_FLIGHT_LIST_INFO}
`;
export const COPILOT_PUBLIC_DETAIL = gql`
query copilot($id: Int!, $pilotUsername: String) {
copilot(id: $id, pilotUsername: $pilotUsername) {
...copilotFullInfo
}
}
${FRAGMENT_COPILOT_FULL_INFO}
`;
src/graphql/queries/event.js
+1 -1
View File
@@ -8,7 +8,7 @@ query eventsList($username: String) {
...eventListInfo
flights {
coverPhoto {
titlePhoto {
thumbnailUrl
}
}
src/graphql/queries/flights.js
+28 -3
View File
@@ -1,19 +1,44 @@
import gql from "graphql-tag";
import {FRAGMENT_FLIGHT_FULL_INFO} from "src/graphql/fragments/flight";
import {FRAGMENT_FLIGHT_FULL_INFO, FRAGMENT_FLIGHT_FULL_PRIVATE_INFO} from "src/graphql/fragments/flight";
import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
import {FRAGMENT_PHOTO_FULL_INFO} from "src/graphql/fragments/photo";
export const FLIGHTS_LIST = gql`
query FlightsList($username: String) {
flights(username: $username) {
query FlightsList {
flights {
...flightListInfo
}
}
${FRAGMENT_FLIGHT_LIST_INFO}
`;
export const FLIGHTS_PUBLIC_LIST = gql`
query FlightsPublicList($username: String, $aircraftId: Int, $copilotId: Int, $pointOfInterestId: Int) {
flights(username: $username, aircraftId: $aircraftId, copilotId: $copilotId, pointOfInterestId: $pointOfInterestId, public: true) {
...flightListInfo
pilot {
id
publicUsername
}
}
}
${FRAGMENT_FLIGHT_LIST_INFO}
`;
export const FLIGHT_DETAIL = gql`
query FlightDetail($id: Int!, $username: String) {
flight(id: $id, username: $username) {
...flightFullPrivateInfo
}
}
${FRAGMENT_FLIGHT_FULL_PRIVATE_INFO}
`;
export const FLIGHT_PUBLIC_DETAIL = gql`
query FlightPublicDetail($id: Int!, $username: String) {
flight(id: $id, username: $username, public: true) {
...flightFullInfo
}
}
src/graphql/queries/photo.js
+20
View File
@@ -7,6 +7,15 @@ query photo($id: Int!) {
photo(id: $id) {
...photoFullInfo
pointOfInterest {
id
name
}
copilots {
id
name
}
adjustment {
contrast
saturation
@@ -28,3 +37,14 @@ query photo($id: Int!) {
${FRAGMENT_PHOTO_FULL_INFO}
${FRAGMENT_FLIGHT_LIST_INFO}
`;
export const PHOTOS_PUBLIC_LIST = gql`
query photos($flightId: Int, $pointOfInterestId: Int, $aircraftId: Int, $copilotId: Int) {
photos(public: true, flightId: $flightId, pointOfInterestId: $pointOfInterestId, aircraftId: $aircraftId, copilotId: $copilotId) {
...photoFullInfo
}
}
${FRAGMENT_PHOTO_FULL_INFO}
`;
src/graphql/queries/poi.js
+21 -1
View File
@@ -1,5 +1,5 @@
import gql from "graphql-tag";
import {FRAGMENT_POI_FULL_INFO, FRAGMENT_POI_LIST_INFO} from "src/graphql/fragments/poi";
import {FRAGMENT_POI_FULL_INFO, FRAGMENT_POI_FULL_PRIVATE_INFO, FRAGMENT_POI_LIST_INFO} from "src/graphql/fragments/poi";
export const POI_LIST = gql`
query poiList {
@@ -11,9 +11,29 @@ query poiList {
${FRAGMENT_POI_LIST_INFO}
`;
export const POI_PUBLIC_LIST = gql`
query poiList {
pointsOfInterest(public: true) {
...pointOfInterestListInfo
}
}
${FRAGMENT_POI_LIST_INFO}
`;
export const POI_DETAIL = gql`
query poiDetail($id: Int!) {
pointOfInterest(id: $id) {
...pointOfInterestFullPrivateInfo
}
}
${FRAGMENT_POI_FULL_PRIVATE_INFO}
`;
export const POI_PUBLIC_DETAIL = gql`
query poiDetail($id: Int!) {
pointOfInterest(id: $id, public: true) {
...pointOfInterestFullInfo
}
}
src/layouts/ProfileLayout.vue
+6 -1
View File
@@ -48,11 +48,12 @@ import {useUserStore} from "stores/User";
import {storeToRefs} from "pinia";
import BreadcrumbsNavigation from "components/navigation/BreadcrumbsNavigation.vue";
import {useAppStore} from "stores/App";
import {useQuasar} from "quasar";
import {useMeta, useQuasar} from "quasar";
import {useRouter} from "vue-router";
import {successObject} from "src/composables/dialog";
import SidebarNavigation from "components/navigation/SidebarNavigation.vue";
import TopMenuButton from "components/navigation/TopMenuButton.vue";
import {metaData} from "src/composables/meta";
const $q = useQuasar();
const $router = useRouter();
@@ -69,6 +70,10 @@ onMounted(() => {
})
const {isQueryRunning, user} = storeToRefs(useUserStore());
useMeta(() => metaData({
title: pageTitle.value
}));
const logout = () => {
useUserStore().logout().then(() => {
$q.notify(successObject("Odhlášení bylo úspěšné"));
src/pages/profile/aircraft/AircraftDetailPage.vue
+48 -25
View File
@@ -1,28 +1,33 @@
<script setup>
import {onMounted, watch} from "vue";
import {useAircraftsStore} from "stores/Aircrafts";
import {useRoute, useRouter} from "vue-router";
import {useQuasar} from "quasar";
import {useMeta, useQuasar} from "quasar";
import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
import {successObject} from "src/composables/dialog";
import {confirmObject, successObject} from "src/composables/dialog";
import {useAppStore} from "stores/App";
import FlightsList from "components/flights/FlightsList.vue";
import AircraftDetailCard from "components/aircrafts/AircraftDetailCard.vue";
import AircraftDetailCard from "components/aircrafts/AircraftInfo.vue";
import {storeToRefs} from "pinia";
import {useAircraftsStore} from "stores/Aircrafts";
import {computed, watch} from "vue";
import {metaData} from "src/composables/meta";
import PhotoGallery from "components/photos/PhotoGallery.vue";
import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
import ContentCard from "components/ContentCard.vue";
import AircraftInfo from "components/aircrafts/AircraftInfo.vue";
import {useUserStore} from "stores/User";
const $q = useQuasar();
const $router = useRouter();
const aircraftId = parseInt(useRoute().params.id);
onMounted(() => {
useAircraftsStore().fetchDetail(aircraftId);
})
useAircraftsStore().fetchDetail(aircraftId);
const loggedUser = storeToRefs(useUserStore()).user;
const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
watch(() => aircraft.value, (newVal) => {
if (!newVal) return;
useAppStore().setPageTitle(newVal.callSign);
useMeta(() => metaData({title: newVal.callSign}));
useAppStore().setBreadcrumbs([
{label: "Letadla", to: {name: "aircrafts"}},
{label: newVal.callSign}
@@ -30,29 +35,47 @@ watch(() => aircraft.value, (newVal) => {
});
const deleteAircraft = (id) => {
useAircraftsStore().destroy(id).then(() => {
$router.push({name: "aircrafts"});
$q.notify(successObject("Letadlo úspěšně odstraněno"));
});
}
$q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
.onOk(() => {
useAircraftsStore().destroy(id).then(() => {
$router.push({name: "aircrafts"});
$q.notify(successObject("Letadlo úspěšně odstraněno"));
});
});
};
</script>
<template>
<AircraftDetailSkeleton v-if="isQueryRunning || !aircraft"/>
<template v-else>
<AircraftDetailCard
:aircraft="aircraft"
@delete="deleteAircraft"
/>
<ContentCard :title-photo="aircraft.titlePhoto" :title="aircraft.callSign">
<template #actions v-if="aircraft.createdById === loggedUser?.id">
<div class="col-grow">
<q-btn
flat
:to='{name: "aircraftEdit", params: {id: aircraft.id}}'
icon="edit"
text-color="primary"
label="Upravit"
/>
</div>
<q-btn @click="deleteAircraft(aircraft.id)" icon="delete" flat text-color="red" label="Smazat"/>
</template>
<template #content>
<q-card-section>
<AircraftInfo :aircraft="aircraft"/>
<PhotoGallery :photos="aircraft.photos"/>
<h3>Lety</h3>
<q-banner v-if="aircraft.flights.length === 0" class="bg-light-blue text-white">
Zatím žádné lety.
</q-banner>
<FlightsList :items="aircraft.flights" :public="false" v-else/>
</q-card-section>
</template>
</ContentCard>
<q-card class="flight-detail-card" flat>
<h3>Lety</h3>
<q-banner v-if="aircraft.flights.length === 0" class="bg-light-blue text-white">
Zatím žádné lety.
</q-banner>
<FlightsList :items="aircraft.flights" v-else/>
</q-card>
</template>
src/pages/profile/aircraft/EditAircraftPage.vue
+56 -13
View File
@@ -3,13 +3,17 @@ import AircraftForm from "components/aircrafts/AircraftForm.vue";
import {useAircraftsStore} from "stores/Aircrafts";
import {useRoute, useRouter} from "vue-router";
import {useQuasar} from "quasar";
import {onMounted} from "vue";
import {computed, onMounted} from "vue";
import AircraftEditSkeleton from "components/aircrafts/AircraftEditSkeleton.vue";
import {successObject} from "src/composables/dialog";
import {useAppStore} from "stores/App";
import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
import {storeToRefs} from "pinia";
import {useUserStore} from "stores/User";
import POIForm from "components/poi/POIForm.vue";
import POIEditSkeleton from "components/poi/POIEditSkeleton.vue";
import PhotosEditorList from "components/photos/PhotosEditorList.vue";
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
const $router = useRouter();
@@ -36,25 +40,64 @@ onMounted(() => {
});
});
const setTitlePhoto = (titlePhoto) => {
useAircraftsStore().update(aircraftId, {titlePhotoId: titlePhoto.id}).then(() => {
$q.notify(successObject("Úvodní fotka nastavena"));
})
}
const formStep = computed(() => useRoute().params.step || "basic");
</script>
<template>
<AircraftEditSkeleton v-if="isQueryRunning || !aircraft"/>
<AccessDeniedBanner
v-else-if="aircraft.createdById !== loggedUser.id"
:route-back="{name: 'aircraftDetail', params: {id: aircraftId}}"
v-else-if="aircraft.createdById !== loggedUser.id"
:route-back="{name: 'aircraftDetail', params: {id: aircraftId}}"
/>
<q-card v-else class="q-mx-md">
<q-card-section>
<AircraftForm
@save="handleSave"
:default-values="aircraft"
:organizations="loggedUser.organizations"
:is-request-pending="isMutationRunning"
<template v-else>
<q-tabs active-color="primary" class="q-mb-lg" v-if="aircraft.photos.length > 0">
<q-route-tab
icon="edit"
label="Informace"
replace
:to="{name: 'aircraftEdit', params: {id: aircraft?.id, step: 'basic'}}"
exact
/>
</q-card-section>
</q-card>
<q-route-tab
icon="add_a_photo"
label="Fotky"
replace
:to="{name: 'aircraftEdit', params: {id: aircraft?.id, step: 'photo'}}"
exact
/>
</q-tabs>
<template v-if="formStep === 'basic'">
<q-card class="q-mx-md">
<q-card-section>
<AircraftForm
@save="handleSave"
:default-values="aircraft"
:organizations="loggedUser.organizations"
:is-request-pending="isMutationRunning"
/>
</q-card-section>
</q-card>
</template>
<template v-else-if="formStep === 'photo'">
<q-spinner v-if="isQueryRunning || !aircraft"/>
<PhotosEditorList
v-else
:photos="aircraft.photos"
:title-photo="aircraft.titlePhoto"
:show-actions="false"
@set-title-photo="setTitlePhoto"
/>
</template>
</template>
</template>
src/pages/profile/copilot/CopilotDetailPage.vue
+41 -7
View File
@@ -1,12 +1,15 @@
<script setup>
import {useRoute} from "vue-router";
import {onMounted} from "vue";
import {computed, onMounted} from "vue";
import CopilotDetailSkeleton from "components/copilots/CopilotDetailSkeleton.vue";
import {useAppStore} from "stores/App";
import FAB from "components/FAB.vue";
import FlightsList from "components/flights/FlightsList.vue";
import {useCopilotsStore} from "stores/Copilots";
import {storeToRefs} from "pinia";
import PhotoGallery from "components/photos/PhotoGallery.vue";
import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
import ContentCard from "components/ContentCard.vue";
const copilotId = parseInt(useRoute().params.id);
onMounted(() => {
@@ -20,20 +23,51 @@ onMounted(() => {
});
const {isQueryRunning, copilot} = storeToRefs(useCopilotsStore());
const copilotTitlePhoto = computed(() => {
if (!copilot.value || copilot.value.photos.length === 0) return null;
return copilot.value.photos[0];
});
</script>
<template>
<CopilotDetailSkeleton v-if="isQueryRunning || !copilot"/>
<template v-else>
<h3>Společné lety</h3>
<q-banner v-if="copilot.flights.length === 0" class="bg-light-blue text-white">
Zatím tu nemáš uložené žádné společné lety.
</q-banner>
<ContentCard :title-photo="copilotTitlePhoto" :title="copilot.name">
<template #actions>
<div class="col-grow">
<q-btn
flat
:to="{name: 'copilotEdit', params: {id: copilotId}}"
icon="edit"
text-color="primary"
label="Upravit"
/>
</div>
</template>
<template #content>
<q-card-section>
<PhotoGallery :photos="copilot.photos" v-if="copilot.photos.length > 0"/>
<q-banner v-else class="bg-light-blue text-white">
Zatím tu nemáš žádné společné fotky. Po nahrání fotky můžeš označit tuto osobu a takto označené
fotografie se zobrazí v galerii.
</q-banner>
<FlightsList :items="copilot.flights" v-else/>
<h3>Společné lety</h3>
<q-banner v-if="copilot.flights.length === 0" class="bg-light-blue text-white">
Zatím tu nemáš uložené žádné společné lety.
</q-banner>
<FlightsList :items="copilot.flights" :public="false" v-else/>
</q-card-section>
</template>
</ContentCard>
<FAB mode="edit" :router-link="{name: 'copilotEdit', params: {id: copilotId}}"/>
</template>
</template>
src/pages/profile/event/EventDetailPage.vue
+1 -1
View File
@@ -49,7 +49,7 @@ const {isQueryRunning, event} = storeToRefs(useEventsStore());
Zatím tu nemáš uložené žádné lety.
</q-banner>
<FlightsList :items="event.flights" v-else/>
<FlightsList :items="event.flights" :public="false" v-else/>
<FAB mode="edit" :router-link="{name: 'eventEdit', params: {id: eventId}}"/>
</template>
src/pages/profile/flight/EditFlightPage.vue
+57 -41
View File
@@ -1,6 +1,6 @@
<script setup>
import FlightFormSteps from "components/flights/form/FlightFormSteps.vue";
import {onMounted, ref, watch} from "vue";
import {computed, onMounted, ref, watch} from "vue";
import {useRoute} from "vue-router";
import {useFlightsStore} from "stores/Flights";
import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
@@ -14,8 +14,8 @@ import FlightFormCopilot from "components/flights/form/FlightFormCopilot.vue";
import {useCopilotsStore} from "stores/Copilots";
import FlightFormNotes from "components/flights/form/FlightFormNotes.vue";
import FlightFormPhotos from "components/flights/form/FlightFormPhotos.vue";
import {usePhotosStore} from "stores/Photo";
import PhotosList from "components/photos/PhotosEditorList.vue";
import {usePhotosStore} from "stores/Photos";
import PhotosEditorList from "components/photos/PhotosEditorList.vue";
import {errorObject, successObject, warningObject} from "src/composables/dialog";
import PhotoFormDialog from "components/photos/PhotoFormDialog.vue";
import FlightFormTrack from "components/flights/form/FlightFormTrack.vue";
@@ -67,7 +67,6 @@ const handleFlightEdit = (data) => {
const isRequestPending = storeToRefs(useFlightsStore()).isMutationRunning;
const uploadInProgress = ref(false);
const handlePhotosUpload = (data) => {
// todo udelat batch napr. po 5 requestech
// TODO: udelat batch i pro rotace a davkove upravy (info)
@@ -101,6 +100,12 @@ const deletePhoto = (id) => {
});
}
const setTitlePhoto = (photo) => {
useFlightsStore().update(flight.value.id, {titlePhotoId: photo.id}).then(f => {
$q.notify(successObject("Úvodní fotografie úspěšně nastavena"));
});
}
const rotatePhotos = ({photos, direction}) => {
const promises = [];
for (const photo of photos) {
@@ -123,11 +128,15 @@ const rotatePhotos = ({photos, direction}) => {
});
}
const updateSinglePhoto = (id, formData) => usePhotosStore().update(id, formData).then((data) => {
const idx = _findPhotoIndex(data.id);
flight.value.photos[idx] = data;
usePointsOfInterestStore().fetch();
});
const updateSinglePhoto = (id, formData) => {
formData.copilots = formData.copilots.map(c => ({id: c.id, name: c.name}));
return usePhotosStore().update(id, formData).then((data) => {
const idx = _findPhotoIndex(data.id);
flight.value.photos[idx] = data;
usePointsOfInterestStore().fetch();
});
}
const handlePhotoUpdate = (flightId, formData) => {
const photoId = formData.id;
@@ -170,13 +179,14 @@ const handleBatchPhotoEdit = async (flightId, data) => {
const promises = [];
for (const id of photoIds) {
const updateData = {};
const updateData = {
isAircraft: data.isAircraft,
copilots: data.copilots.map(c => ({id: c.id, name: c.name}))
};
if (data.name !== '') updateData.name = data.name;
if (data.description !== '') updateData.description = data.description;
if (data.pointOfInterest) updateData.pointOfInterest = data.pointOfInterest;
if (Object.keys(updateData).length === 0) continue;
promises.push(updateSinglePhoto(id, data));
}
@@ -191,7 +201,6 @@ const handleBatchPhotoEdit = async (flightId, data) => {
if (error > 0) $q.notify(errorObject(`Nepovedlo se uložit ${error} fotografií`))
});
}
</script>
<template>
@@ -203,11 +212,11 @@ const handleBatchPhotoEdit = async (flightId, data) => {
<q-tab-panels v-model="formStep">
<q-tab-panel name="basic">
<FlightFormBasic
@save="handleFlightEdit"
:flight="flight"
:locations="pointsOfInterest"
:airports="airports"
:aircrafts="aircrafts"
@save="handleFlightEdit"
:flight="flight"
:locations="pointsOfInterest"
:airports="airports"
:aircrafts="aircrafts"
/>
</q-tab-panel>
@@ -217,43 +226,50 @@ const handleBatchPhotoEdit = async (flightId, data) => {
<q-tab-panel name="track">
<FlightFormTrack
v-if="pointsOfInterest"
:flight="flight"
:locations="pointsOfInterest"
:airports="airports"
@save="handleFlightEdit"
v-if="pointsOfInterest"
:flight="flight"
:locations="pointsOfInterest"
:airports="airports"
@save="handleFlightEdit"
/>
</q-tab-panel>
<q-tab-panel name="photos">
<FlightFormPhotos
:flight="flight"
:is-request-pending="isRequestPending || uploadInProgress"
@save="handlePhotosUpload"
:flight="flight"
:is-request-pending="isRequestPending || uploadInProgress"
@save="handlePhotosUpload"
/>
<PhotosList
:photos="flight.photos"
@edit="openPhotoEdit"
@batch-edit="openBatchPhotoForm"
@batch-rotate="rotatePhotos"
@delete="deletePhoto"
<PhotosEditorList
:title-photo="flight.titlePhoto"
:photos="flight.photos"
:show-actions="true"
@edit="openPhotoEdit"
@batch-edit="openBatchPhotoForm"
@batch-rotate="rotatePhotos"
@delete="deletePhoto"
@set-title-photo="setTitlePhoto"
/>
<!-- Dialogs for photo edit -->
<PhotoFormDialog
v-model="openEdit"
:locations="pointsOfInterest"
:photo="editPhoto"
@save="handlePhotoUpdate(flightId, $event)"
v-model="openEdit"
:copilots="flight.copilots"
:aircraft="flight.aircraft"
:locations="pointsOfInterest"
:photo="editPhoto"
@save="handlePhotoUpdate(flightId, $event)"
/>
<BatchPhotoFormDialog
v-model="openBatchEdit"
:locations="pointsOfInterest"
:photos="editBatchPhotos"
@save="handleBatchPhotoEdit(flightId, $event)"
@delete="deletePhoto"
v-model="openBatchEdit"
:locations="pointsOfInterest"
:photos="editBatchPhotos"
:copilots="flight.copilots"
:aircraft="flight.aircraft"
@save="handleBatchPhotoEdit(flightId, $event)"
@delete="deletePhoto"
/>
</q-tab-panel>
src/pages/profile/flight/FlightDetailPage.vue
+54 -53
View File
@@ -13,13 +13,15 @@ import {useUserStore} from "stores/User";
import {storeToRefs} from "pinia";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import PhotoGallery from "components/photos/PhotoGallery.vue";
import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
import ContentCard from "components/ContentCard.vue";
const $q = useQuasar();
const $router = useRouter();
const flightId = parseInt(useRoute().params.id);
const loggedUser = storeToRefs(useUserStore()).user;
onMounted(() => {flight.value
onMounted(() => {
useFlightsStore().fetchDetail(flightId).then(f => {
const flightNameFormatted = flightName(f);
useAppStore().setPageTitle(flightNameFormatted);
@@ -40,7 +42,6 @@ const handleDeleteAndRedirect = () => {
});
}
const togglePublicVisibility = () => {
const newVisibility = !flight.value.isPublic;
useFlightsStore()
@@ -67,19 +68,14 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
<template>
<FlightDetailSkeleton v-if="isQueryRunning || !flight"/>
<q-card class="flight-detail-card" v-else>
<q-img :src="flight.coverPhoto.url" v-if="flight.coverPhoto">
<div class="absolute-bottom custom-caption">
<div class="text-h5"> {{ flightName(flight) }}</div>
</div>
</q-img>
<ContentCard :title-photo="flight.titlePhoto" :title="flightName(flight)" v-else>
<q-card-actions class="q-my-md">
<template #actions>
<div class="col-grow">
<q-btn
@click="togglePublicVisibility"
:icon="flight.isPublic ? 'visibility_off' : 'visibility'"
:disable="!loggedUser.publicUsername"
:disable="!loggedUser?.publicUsername"
flat
:label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
/>
@@ -93,53 +89,58 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
/>
</div>
<q-btn @click="handleDeleteAndRedirect" icon="delete" flat text-color="red" label="Smazat"/>
</q-card-actions>
</template>
<q-card-section>
<div class="text-right">
<q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}" icon="edit" color="primary">Upravit informace</q-btn>
</div>
<FlightBasicInfo
:flight="flight"
:copilot-detail-route="{name: 'copilotDetail'}"
/>
<template #content>
<q-card-section>
<div class="text-right">
<q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}" icon="edit" color="primary">Upravit informace</q-btn>
</div>
<FlightBasicInfo
:flight="flight"
:aircraft-detail-route="{name: 'aircraftDetail'}"
:copilot-detail-route="{name: 'copilotDetail'}"
/>
<div class="text-right">
<q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'notes'}}" icon="edit" color="primary">Upravit text</q-btn>
</div>
<article class="q-my-lg" v-html="flight.description"/>
<div class="text-right">
<q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'notes'}}" icon="edit" color="primary">Upravit text</q-btn>
</div>
<article class="q-my-lg" v-html="flight.description"/>
<q-separator/>
<q-separator/>
<div class="text-right">
<q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}" icon="edit" color="primary">Upravit fotky</q-btn>
</div>
<BasicInfoBanner
v-if="flight.photos.length === 0"
:route-add="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
>
U tohoto letu nemáš nahrané žádné fotografie.
</BasicInfoBanner>
<PhotoGallery
v-else
:photos="flight.photos"
/>
<div class="text-right">
<q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}" icon="edit" color="primary">Upravit fotky</q-btn>
</div>
<BasicInfoBanner
v-if="flight.photos.length === 0"
:route-add="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
>
U tohoto letu nemáš nahrané žádné fotografie.
</BasicInfoBanner>
<PhotoGallery
v-else
:photos="flight.photos"
/>
<q-separator/>
<q-separator/>
<div class="text-right">
<q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
</div>
<BasicInfoBanner
v-if="flight.track.length === 0 && !flight.gpxTrack"
:route-add="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
>
Nemáš nastavenou žádnou trasu.
</BasicInfoBanner>
<FlightTrackMap
v-else
:flight="flight"
:photos="flight.photos"
/>
</q-card-section>
</template>
</ContentCard>
<div class="text-right">
<q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
</div>
<BasicInfoBanner
v-if="flight.track.length === 0 && !flight.gpxTrack"
:route-add="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
>
Nemáš nastavenou žádnou trasu.
</BasicInfoBanner>
<FlightTrackMap
v-else
:flight="flight"
/>
</q-card-section>
</q-card>
</template>
src/pages/profile/flight/FlightsPage.vue
+1 -1
View File
@@ -32,7 +32,7 @@ const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
Nemáš zaznamenaný žádný let.
</BasicInfoBanner>
<FlightsList v-else :items="flights"/>
<FlightsList v-else :items="flights" :public="false" />
<FAB mode="add" :router-link="{name: 'addFlight'}"/>
</template>
src/pages/profile/flight/PhotoEditorPage.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<script setup>
import {useRoute} from "vue-router";
import {onMounted, ref, watch} from "vue";
import {usePhotosStore} from "stores/Photo";
import {usePhotosStore} from "stores/Photos";
import {useAppStore} from "stores/App";
import {flightName} from "src/composables/flight";
import VuePictureCropper from 'vue-picture-cropper';
src/pages/profile/poi/EditPointOfInterestPage.vue
+48 -5
View File
@@ -1,6 +1,6 @@
<script setup>
import POIEditSkeleton from "components/poi/POIEditSkeleton.vue";
import {onMounted} from "vue";
import {computed, onMounted} from "vue";
import {useRoute, useRouter} from "vue-router";
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
import {useAppStore} from "stores/App";
@@ -11,6 +11,8 @@ import {storeToRefs} from "pinia";
import POIForm from "components/poi/POIForm.vue";
import {useUserStore} from "stores/User";
import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
import PhotoEditorSkeleton from "components/photos/PhotoEditorSkeleton.vue";
import PhotosEditorList from "components/photos/PhotosEditorList.vue";
const poiId = parseInt(useRoute().params.id);
@@ -27,7 +29,7 @@ onMounted(() => {
usePointsOfInterestTypeStore().fetch();
})
const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).items;
const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).types;
const loggedUser = storeToRefs(useUserStore()).user;
const {isQueryRunning, pointOfInterest, isMutationRunning} = storeToRefs(usePointsOfInterestStore());
@@ -39,13 +41,54 @@ const handleSave = (data) => {
router.push({name: "poiDetail", params: {id: poiId}});
});
}
const setTitlePhoto = (titlePhoto) => {
usePointsOfInterestStore().update(poiId, {titlePhotoId: titlePhoto.id}).then(() => {
$q.notify(successObject("Úvodní fotka nastavena"));
})
}
const formStep = computed(() => useRoute().params.step || "basic");
</script>
<template>
<POIEditSkeleton v-if="isQueryRunning"/>
<AccessDeniedBanner
v-else-if="pointOfInterest.createdById !== loggedUser.id"
v-if="pointOfInterest && !isQueryRunning && pointOfInterest.createdById !== loggedUser?.id"
:route-back="{name: 'poiDetail', params: {id: poiId}}"
/>
<POIForm :poi="pointOfInterest" :types="poiTypes" v-else @save="handleSave"/>
<q-tabs active-color="primary" class="q-mb-lg">
<q-route-tab
icon="edit"
label="Informace"
replace
:to="{name: 'poiEdit', params: {id: pointOfInterest?.id, step: 'basic'}}"
exact
/>
<q-route-tab
icon="add_a_photo"
label="Fotky"
replace
:to="{name: 'poiEdit', params: {id: pointOfInterest?.id, step: 'photo'}}"
exact
/>
</q-tabs>
<template v-if="formStep === 'basic'">
<POIEditSkeleton v-if="isQueryRunning || !pointOfInterest"/>
<POIForm :poi="pointOfInterest" :types="poiTypes" v-else @save="handleSave"/>
</template>
<template v-else-if="formStep === 'photo'">
<q-spinner v-if="isQueryRunning || !pointOfInterest"/>
<PhotosEditorList
v-else
:photos="pointOfInterest.photos"
:title-photo="pointOfInterest.titlePhoto"
:show-actions="false"
@set-title-photo="setTitlePhoto"
/>
</template>
</template>
src/pages/profile/poi/PointOfInterestDetailPage.vue
+48 -21
View File
@@ -1,5 +1,5 @@
<script setup>
import {onMounted} from "vue";
import {computed, onMounted} from "vue";
import {useRoute} from "vue-router";
import POIDetailSkeleton from "components/poi/POIDetailSkeleton.vue";
import FAB from "components/FAB.vue";
@@ -11,6 +11,8 @@ import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import FlightsList from "components/flights/FlightsList.vue";
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
import PhotoGallery from "components/photos/PhotoGallery.vue";
import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
import ContentCard from "components/ContentCard.vue";
const loggedUser = storeToRefs(useUserStore()).user;
@@ -25,36 +27,61 @@ onMounted(() => {
});
const {isQueryRunning, pointOfInterest} = storeToRefs(usePointsOfInterestStore());
const titlePhoto = computed(() => {
if (!pointOfInterest.value || pointOfInterest.value.photos.length === 0) return null;
return pointOfInterest.value.titlePhoto || pointOfInterest.value.photos[0];
});
</script>
<template>
<POIDetailSkeleton v-if="isQueryRunning || !pointOfInterest"/>
<template v-else>
<article v-html="pointOfInterest.description" class="q-my-lg" />
<EmbeddedMap
v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
:gps-latitude="pointOfInterest.gpsLatitude"
:gps-longitude="pointOfInterest.gpsLongitude"
:zoom="13"
/>
<BasicInfoBanner v-else>
Tento bod nemá nastavenou polohu. Po nastavení polohy tu bude zobrazena mapa.
</BasicInfoBanner>
<ContentCard :title-photo="titlePhoto" :title="pointOfInterest.name">
<template #actions v-if="pointOfInterest.createdById === loggedUser.id">
<div class="col-grow">
<q-btn
flat
:to="{name: 'poiEdit', params:{id: pointOfInterest.id}}"
icon="edit"
text-color="primary"
label="Upravit"
/>
</div>
</template>
<PhotoGallery
:photos="pointOfInterest.photos"
v-if="pointOfInterest.photos.length > 0"
/>
<template #content>
<q-card-section>
<article v-html="pointOfInterest.description" class="q-my-lg"/>
<BasicInfoBanner v-else>
Pokud přidáš toto místo k nějaké fotce, zobrazí se tu.
</BasicInfoBanner>
<EmbeddedMap
v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
:gps-latitude="pointOfInterest.gpsLatitude"
:gps-longitude="pointOfInterest.gpsLongitude"
:zoom="13"
/>
<BasicInfoBanner v-else>
Tento bod nemá nastavenou polohu. Po nastavení polohy tu bude zobrazena mapa.
</BasicInfoBanner>
<FlightsList :items="pointOfInterest.flights" v-if="pointOfInterest.flights.length > 0 && loggedUser.id === pointOfInterest.createdById"/>
<PhotoGallery
:photos="pointOfInterest.photos"
v-if="pointOfInterest.photos.length > 0"
/>
<BasicInfoBanner v-else>
Pokud přidáš toto místo k nějaké fotce, zobrazí se tu.
</BasicInfoBanner>
<FAB v-if="pointOfInterest.createdById === loggedUser.id" :router-link="{name: 'poiEdit', params:{id: pointOfInterest.id}}" mode="edit"/>
<FlightsList
:items="pointOfInterest.flights"
:public="false"
v-if="pointOfInterest.flights.length > 0 && loggedUser.id === pointOfInterest.createdById"
/>
</q-card-section>
</template>
</ContentCard>
</template>
</template>
src/pages/public/AircraftDetailPage.vue
+72
View File
@@ -0,0 +1,72 @@
<script>
import {useAircraftsStore} from "stores/Aircrafts";
export default {
preFetch({currentRoute}) {
return useAircraftsStore().fetchPublicDetail(currentRoute.params.id);
}
}
</script>
<script setup>
import {useRouter} from "vue-router";
import {useMeta, useQuasar} from "quasar";
import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
import {confirmObject, successObject} from "src/composables/dialog";
import {useAppStore} from "stores/App";
import FlightsList from "components/flights/FlightsList.vue";
import {storeToRefs} from "pinia";
import {computed, onMounted, watch} from "vue";
import {metaData} from "src/composables/meta";
import PhotoGallery from "components/photos/PhotoGallery.vue";
import ContentCard from "components/ContentCard.vue";
import AircraftInfo from "components/aircrafts/AircraftInfo.vue";
import {useUserStore} from "stores/User";
import {usePhotosStore} from "stores/Photos";
import {useFlightsStore} from "stores/Flights";
const $q = useQuasar();
const $router = useRouter();
const loggedUser = storeToRefs(useUserStore()).user;
const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
usePhotosStore().fetchPublic({aircraftId: aircraft.value.id});
useFlightsStore().fetchPublic({aircraftId: aircraft.value.id})
useAppStore().setPageTitle(aircraft.value.callSign);
useMeta(() => metaData({
title: aircraft.value.callSign,
image: aircraft.value.titleImage?.url
}));
useAppStore().setBreadcrumbs([
{label: "Polétání.cz", to: {name: "homepage"}},
{label: aircraft.value.callSign}
]);
</script>
<template>
<AircraftDetailSkeleton v-if="isQueryRunning || !aircraft"/>
<template v-else>
<ContentCard :title-photo="aircraft.titlePhoto" :title="aircraft.callSign">
<template #content>
<q-card-section>
<AircraftInfo :aircraft="aircraft"/>
<PhotoGallery :photos="photos"/>
<h3>Lety</h3>
<FlightsList :items="flights" :public="true" />
</q-card-section>
</template>
</ContentCard>
</template>
</template>
src/pages/public/PilotProfilePage.vue
+2 -2
View File
@@ -2,8 +2,8 @@
import {useUserStore} from "stores/User";
export default {
preFetch({currentRoute}) {
return useUserStore().fetchPublicUserDetail(currentRoute.params.username);
preFetch({store, currentRoute}) {
return useUserStore(store).fetchPublicUserDetail(currentRoute.params.username);
},
}
</script>
src/pages/public/PointOfInterestDetailPage.vue
+64
View File
@@ -0,0 +1,64 @@
<script>
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
export default {
preFetch({currentRoute, store}) {
return usePointsOfInterestStore(store).fetchPublicDetail(currentRoute.params.id);
}
}
</script>
<script setup>
import {storeToRefs} from "pinia";
import {usePhotosStore} from "stores/Photos";
import ContentCard from "components/ContentCard.vue";
import PhotoGallery from "components/photos/PhotoGallery.vue";
import {useFlightsStore} from "stores/Flights";
import EmbeddedMap from "components/map/EmbeddedMap.vue";
import FlightsList from "components/flights/FlightsList.vue";
import {useAppStore} from "stores/App";
import {useMeta} from "quasar";
import {metaData} from "src/composables/meta";
const {pointOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
usePhotosStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
useFlightsStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
useAppStore().setPageTitle(pointOfInterest.value.name);
useMeta(() => metaData({
title: pointOfInterest.value.name,
image: pointOfInterest.value.titlePhoto.url,
description: pointOfInterest.value.description,
}))
</script>
<template>
<q-spinner v-if="isQueryRunning || !pointOfInterest"/>
<ContentCard :title-photo="pointOfInterest.titlePhoto" :title="pointOfInterest.name" v-else>
<template #content>
<q-card-section>
<article v-html="pointOfInterest.description"/>
<EmbeddedMap
v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
:gps-latitude="pointOfInterest.gpsLatitude"
:gps-longitude="pointOfInterest.gpsLongitude"
:zoom="13"
/>
<PhotoGallery :photos="photos"/>
<h3>Lety</h3>
<FlightsList :public="true" :items="flights" />
</q-card-section>
</template>
</ContentCard>
</template>
src/pages/public/PointsOfInterestMapPage.vue
+7
View File
@@ -0,0 +1,7 @@
<script setup>
</script>
<template>
poi
</template>
src/pages/public/pilotProfile/CopilotDetailPage.vue
+44 -14
View File
@@ -2,8 +2,8 @@
import {useCopilotsStore} from "stores/Copilots";
export default {
preFetch({currentRoute}) {
return useCopilotsStore().fetchDetail(currentRoute.params.id, currentRoute.params.username);
preFetch({store, currentRoute}) {
return useCopilotsStore(store).fetchPublicDetail(currentRoute.params.id, currentRoute.params.username);
}
}
</script>
@@ -13,6 +13,14 @@ import FlightsList from "components/flights/FlightsList.vue";
import {useAppStore} from "stores/App";
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
import {storeToRefs} from "pinia";
import {onMounted} from "vue";
import {useFlightsStore} from "stores/Flights";
import {usePhotosStore} from "stores/Photos";
import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
import ContentCard from "components/ContentCard.vue";
import PhotoGallery from "components/photos/PhotoGallery.vue";
import {useMeta} from "quasar";
import {metaData} from "src/composables/meta";
const props = defineProps({
pilot: {
@@ -22,25 +30,47 @@ const props = defineProps({
});
const {copilot, isQueryRunning} = storeToRefs(useCopilotsStore());
const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
useAppStore().setPageTitle(`${pilot.name} + ${copilot.value.name}`);
useAppStore().setPageTitle(`${props.pilot.name} + ${copilot.value.name}`);
useAppStore().setBreadcrumbs([
{to: {name: 'homepage'}, label: "Polétání.cz"},
{to: {name: "publicProfileDetail", params: {username: props.username}}, label: `@${props.username}`},
{label: props.pilot.name}
{to: {name: "publicProfileDetail", params: {username: props.pilot.publicUsername}}, label: `@${props.pilot.publicUsername}`},
{label: copilot.value.name}
]);
useMeta(() => metaData({
title: copilot.value.name,
keywords: ["kopilot", "výlet", "fotogalerie", copilot.value.name, "létání", "fotografie"],
description: `Společné polétání: ${props.pilot.name} + ${copilot.value.name}.`,
image: copilot.value.titleImage?.url
}));
useFlightsStore().fetchPublic({copilotId: copilot.value.id});
usePhotosStore().fetchPublic({copilotId: copilot.value.id})
</script>
<template>
<BasicListSkeleton v-if="isQueryRunning || !copilot" class="q-mb-md"/>
<template v-else>
<h3>Společné lety</h3>
<FlightsList
:items="copilot.flights"
:route-detail="{name: 'publicFlightDetail', params: {username: pilot.publicUsername}}"
class="q-mb-md"
/>
</template>
<ContentCard v-if="!isQueryRunning" :title-photo="copilot.titlePhoto" :title="copilot.name">
<template #content>
<q-card-section>
<q-spinner v-if="arePhotosLoading"/>
<PhotoGallery :photos="photos" v-else/>
<h3>Společné lety</h3>
<FlightsListSkeleton v-if="areFlightsLoading && flights.length === 0"/>
<FlightsList
v-else
:items="flights"
:public="true"
class="q-mb-md"
/>
</q-card-section>
</template>
</ContentCard>
</template>
src/pages/public/pilotProfile/EventDetailPage.vue
+1 -1
View File
@@ -66,8 +66,8 @@ watch(() => event.value, (newVal) => {
<FlightsList
v-else
:items="event.flights"
:public="true"
class="q-my-lg"
:route-detail="{name: 'publicFlightDetail', params: {username: routeParams.username}}"
/>
</template>
src/pages/public/pilotProfile/FlightDetailPage.vue
+21 -20
View File
@@ -2,8 +2,8 @@
import {useFlightsStore} from "stores/Flights";
export default {
preFetch({currentRoute}) {
return useFlightsStore().fetchDetail(currentRoute.params.id, currentRoute.params.username)
preFetch({store, currentRoute}) {
return useFlightsStore(store).fetchPublicDetail(currentRoute.params.id, currentRoute.params.username)
}
}
</script>
@@ -19,12 +19,18 @@ import {useRoute} from "vue-router";
import {useUserStore} from "stores/User";
import {useMeta} from "quasar";
import {metaData} from "src/composables/meta";
import ContentCard from "components/ContentCard.vue";
import {usePhotosStore} from "stores/Photos";
import {onMounted} from "vue";
const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
const routeParams = useRoute().params;
const pilot = storeToRefs(useUserStore()).publicUser;
usePhotosStore().fetchPublic({flightId: flight.value.id});
const {isQueryRunning: arePhotosLoading, photos: flightPhotos} = storeToRefs(usePhotosStore());
const flightNameFormatted = flightName(flight.value);
useAppStore().setPageTitle(flightNameFormatted);
useAppStore().setBreadcrumbs([
@@ -37,40 +43,35 @@ useMeta(() => metaData({
title: `${flightNameFormatted} - ${pilot.value.name}`,
keywords: ["let", "výlet", "letadlo", pilot.value.name, flight.value.aircraft.callSign],
description: flight.description,
image: flight.coverPhoto?.url
image: flight.titlePhoto?.url
}
))
));
</script>
<template>
<div>
<FlightDetailSkeleton v-if="isQueryRunning || !flight"/>
<template v-else>
<q-banner class="bg-warning text-white q-mx-md q-my-md" v-if="!flight.isPublic">
Pozor! Tento let není publikován a nebude tak dostupný pro ostatní!
</q-banner>
<q-card class="q-mx-md q-my-md flight-detail-card">
<q-img :src="flight.coverPhoto.url" v-if="flight.coverPhoto">
<div class="absolute-bottom custom-caption">
<div class="text-h5">{{ flightName(flight) }}</div>
</div>
</q-img>
<ContentCard :title-photo="flight.titlePhoto" :title="flightName(flight)" v-else>
<template #content>
<q-card-section>
<FlightBasicInfo
:flight="flight"
:poi-detail-route="{name: 'publicPOIDetail'}"
:aircraft-detail-route="flight.aircraft.isPublic ? {name: 'publicAircraftDetail'} : null"
:copilot-detail-route="{name: 'publicCopilotDetail', params: {username: routeParams.username}}"
/>
<article class="q-my-lg" v-html="flight.description"/>
<PhotoGallery :photos="flight.photos"/>
<q-no-ssr>
<q-inner-loading v-if="arePhotosLoading"/>
<PhotoGallery :photos="flightPhotos" v-else/>
</q-no-ssr>
<FlightTrackMap :flight="flight"/>
<FlightTrackMap :flight="flight" :photos="flightPhotos"/>
</q-card-section>
</q-card>
</template>
</template>
</ContentCard>
</div>
</template>
src/pages/public/pilotProfile/FlightsListPage.vue
+3 -4
View File
@@ -29,7 +29,7 @@ useAppStore().setBreadcrumbs([
{label: `@${props.pilot.publicUsername}`},
])
useFlightsStore().fetch(props.pilot.publicUsername);
useFlightsStore().fetchPublic({username: props.pilot.publicUsername});
const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
const loggedUser = storeToRefs(useUserStore()).user;
</script>
@@ -37,7 +37,7 @@ const loggedUser = storeToRefs(useUserStore()).user;
<template>
<PublicFlightEventSwitcher :username="pilot?.publicUsername"/>
<FlightsListSkeleton v-if="areFlightsLoading"/>
<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.
@@ -46,8 +46,7 @@ const loggedUser = storeToRefs(useUserStore()).user;
<template v-else>
<FlightsList
:items="flights"
:displayVisibilityInfo="loggedUser?.id === pilot?.id"
:route-detail="{name: 'publicFlightDetail', params: {username: pilot?.publicUsername}}"
:public="true"
class="q-mb-md"
/>
</template>
src/router/routes.js
+5 -2
View File
@@ -23,6 +23,9 @@ const routes = [
{path: 'udalosti/:id', name: "publicEventDetail", component: () => import('pages/public/pilotProfile/EventDetailPage.vue')},
]
},
{path: 'letadlo/:id', name: "publicAircraftDetail", component: () => import('pages/public/AircraftDetailPage.vue')},
{path: 'mista', name: "publicPOIs", component: () => import('pages/public/PointsOfInterestMapPage.vue')},
{path: 'mista/:id', name: "publicPOIDetail", component: () => import('pages/public/PointOfInterestDetailPage.vue')},
]
},
@@ -41,7 +44,7 @@ const routes = [
{path: 'poi', name: "poi", component: () => import('pages/profile/poi/PointsOfInterestPage.vue')},
{path: 'poi/novy', name: "addPOI", component: () => import('pages/profile/poi/NewPointOfInterestPage.vue')},
{path: 'poi/:id', name: "poiDetail", component: () => import('pages/profile/poi/PointOfInterestDetailPage.vue')},
{path: 'poi/:id/edit', name: "poiEdit", component: () => import('pages/profile/poi/EditPointOfInterestPage.vue')},
{path: 'poi/:id/edit/:step?', name: "poiEdit", component: () => import('pages/profile/poi/EditPointOfInterestPage.vue')},
{path: 'kopiloti', name: "copilots", component: () => import('pages/profile/copilot/CopilotsPage.vue')},
{path: 'kopiloti/novy', name: "addCopilot", component: () => import('pages/profile/copilot/NewCopilotPage.vue')},
{path: 'kopiloti/:id', name: "copilotDetail", component: () => import('pages/profile/copilot/CopilotDetailPage.vue')},
@@ -49,7 +52,7 @@ const routes = [
{path: 'letadla', name: "aircrafts", component: () => import('pages/profile/aircraft/AircraftsPage.vue')},
{path: 'letadla/nove', name: "addAircraft", component: () => import('pages/profile/aircraft/NewAircraftsPage.vue')},
{path: 'letadla/:id', name: "aircraftDetail", component: () => import('pages/profile/aircraft/AircraftDetailPage.vue')},
{path: 'letadla/:id/edit', name: "aircraftEdit", component: () => import('pages/profile/aircraft/EditAircraftPage.vue')},
{path: 'letadla/:id/edit/:step?', name: "aircraftEdit", component: () => import('pages/profile/aircraft/EditAircraftPage.vue')},
{path: 'foto-editor/:id', name: "photoEditor", component: () => import("pages/profile/flight/PhotoEditorPage.vue")},
src/stores/Aircrafts.js
+14 -3
View File
@@ -1,6 +1,6 @@
import {defineStore} from "pinia";
import {ref} from "vue";
import {AIRCRAFT_DETAIL, AIRCRAFTS_LIST} from "src/graphql/queries/aircrafts";
import {AIRCRAFT_DETAIL, AIRCRAFT_PUBLIC_DETAIL, AIRCRAFTS_LIST} from "src/graphql/queries/aircrafts";
import {deleteFromItems, mutate, query, updateInItems} from "stores/helpers";
import {CREATE_AIRCRAFT, EDIT_AIRCRAFT, DELETE_AIRCRAFT} from "src/graphql/mutations/aircrafts";
@@ -18,6 +18,14 @@ export const useAircraftsStore = defineStore('Aircrafts', () => {
}).then(item => aircraft.value = item);
};
const fetchPublicDetail = (id) => {
return query({
isQueryRunning,
query: AIRCRAFT_PUBLIC_DETAIL,
variables: {id, public: true},
}).then(item => aircraft.value = item);
};
const fetch = () => {
return query({
isQueryRunning,
@@ -38,7 +46,10 @@ export const useAircraftsStore = defineStore('Aircrafts', () => {
isMutationRunning,
mutation: EDIT_AIRCRAFT,
variables: {id, input}
}).then(item => updateInItems(aircrafts.value, 'id', item))
}).then(item => {
updateInItems(aircrafts.value, 'id', item);
aircraft.value = item;
})
}
const destroy = (id) => {
@@ -51,7 +62,7 @@ export const useAircraftsStore = defineStore('Aircrafts', () => {
return {
aircrafts, aircraft, isQueryRunning, isMutationRunning, fetchDetail, fetch, create,
update, destroy
update, destroy, fetchPublicDetail
}
}
);
src/stores/Copilots.js
+10 -2
View File
@@ -1,5 +1,5 @@
import {defineStore} from 'pinia'
import {COPILOT_DETAIL, COPILOTS_LIST} from "src/graphql/queries/copilots";
import {COPILOT_DETAIL, COPILOT_PUBLIC_DETAIL, COPILOTS_LIST} from "src/graphql/queries/copilots";
import {CREATE_COPILOT, EDIT_COPILOT} from "src/graphql/mutations/copilot";
import {mutate, query, updateInItems} from "stores/helpers";
import {ref} from "vue";
@@ -18,6 +18,14 @@ export const useCopilotsStore = defineStore('Copilots', () => {
}).then(item => copilot.value = item);
};
const fetchPublicDetail = (id, username) => {
return query({
isQueryRunning,
query: COPILOT_PUBLIC_DETAIL,
variables: {id, pilotUsername: username},
}).then(item => copilot.value = item);
};
const fetch = () => {
return query({
isQueryRunning,
@@ -43,6 +51,6 @@ export const useCopilotsStore = defineStore('Copilots', () => {
return {
copilot, copilots, isMutationRunning, isQueryRunning,
fetch, fetchDetail, create, update
fetch, fetchDetail, create, update, fetchPublicDetail
}
})
src/stores/Flights.js
+45 -43
View File
@@ -1,5 +1,5 @@
import {defineStore} from 'pinia'
import {FLIGHT_DETAIL, FLIGHTS_LIST} from "src/graphql/queries/flights";
import {FLIGHT_DETAIL, FLIGHT_PUBLIC_DETAIL, FLIGHTS_LIST, FLIGHTS_PUBLIC_LIST} from "src/graphql/queries/flights";
import {EDIT_FLIGHT, CREATE_FLIGHT, DELETE_FLIGHT} from "src/graphql/mutations/flight";
import {deleteFromItems, mutate, query, updateInItems} from "stores/helpers";
import {ref} from "vue";
@@ -10,54 +10,56 @@ export const useFlightsStore = defineStore('Flights', () => {
const isMutationRunning = ref(false);
const isQueryRunning = ref(false);
const fetchDetail = (id, username) => {
return query({
isQueryRunning,
query: FLIGHT_DETAIL,
variables: {username, id},
}).then(item => flight.value = item);
};
const fetchDetail = (id, username) => query({
isQueryRunning,
query: FLIGHT_DETAIL,
variables: {username, id},
}).then(item => flight.value = item);
const fetch = (username = undefined) => {
return query({
isQueryRunning,
query: FLIGHTS_LIST,
variables: {username}
}).then(items => flights.value = items);
}
const fetchPublicDetail = (id, username) => query({
isQueryRunning,
query: FLIGHT_PUBLIC_DETAIL,
variables: {username, id}
}).then(item => flight.value = item);
const fetch = (username = undefined) => query({
isQueryRunning,
query: FLIGHTS_LIST,
variables: {username}
}).then(items => flights.value = items);
const create = (input) => {
return mutate({
isMutationRunning,
mutation: CREATE_FLIGHT,
variables: {input},
}).then(item => {
flights.value.push(item);
return item;
})
}
const fetchPublic = ({username, aircraftId, copilotId, pointOfInterestId}) => query({
isQueryRunning,
query: FLIGHTS_PUBLIC_LIST,
variables: {username, aircraftId, copilotId, pointOfInterestId}
}).then(items => flights.value = items);
const update = (id, input) => {
return mutate({
isMutationRunning,
mutation: EDIT_FLIGHT,
variables: {id, input}
}).then(item => {
updateInItems(flights.value, 'id', item);
flight.value = item;
})
}
const create = (input) => mutate({
isMutationRunning,
mutation: CREATE_FLIGHT,
variables: {input},
}).then(item => {
flights.value.push(item);
return item;
})
const destroy = (id) => {
return mutate({
isMutationRunning,
mutation: DELETE_FLIGHT,
variables: {id}
}).then(item => deleteFromItems(flights.value, 'id', item))
}
const update = (id, input) => mutate({
isMutationRunning,
mutation: EDIT_FLIGHT,
variables: {id, input}
}).then(item => {
updateInItems(flights.value, 'id', item);
flight.value = item;
})
const destroy = (id) => mutate({
isMutationRunning,
mutation: DELETE_FLIGHT,
variables: {id}
}).then(item => deleteFromItems(flights.value, 'id', item))
return {
flight, flights, isMutationRunning, isQueryRunning, fetchDetail, fetch, create, update, destroy
flight, flights, isMutationRunning, isQueryRunning, fetchDetail, fetchPublicDetail, fetch, create, update, destroy,
fetchPublic
}
});
src/stores/Photo.js
-79
View File
@@ -1,79 +0,0 @@
import {defineStore} from "pinia";
import {ADJUST_PHOTO, CHANGE_PHOTO_ORIENTATION, DELETE_PHOTO, EDIT_PHOTO, UPLOAD_PHOTO} from "src/graphql/mutations/photo";
import {PHOTO_DETAIL} from "src/graphql/queries/photo";
import {ref} from "vue";
import {mutate, query} from "stores/helpers";
export const usePhotosStore = defineStore('Photos', () => {
const photo = ref(null);
const isMutationRunning = ref(false);
const isQueryRunning = ref(false);
const fetchDetail = (id) => query({
isQueryRunning,
query: PHOTO_DETAIL,
variables: {id}
}).then(item => photo.value = item);
const upload = (flightId, input) => {
if (!flightId) {
console.error("No flightId specified for photo upload! Aborting");
return;
}
input.flightId = flightId;
if (!input.name) {
input.name = "";
}
if (!input.description) {
input.description = "";
}
// TODO: ^^ patri tohle do storu?
return mutate({
isMutationRunning,
mutation: UPLOAD_PHOTO,
variables: {input}
})
};
const update = (id, input) => mutate({
isMutationRunning,
mutation: EDIT_PHOTO,
variables: {id, input}
}).then(item => {
photo.value = item;
return item;
})
const changeOrientation = (id, direction) => mutate({
isMutationRunning,
mutation: CHANGE_PHOTO_ORIENTATION,
variables: {id, direction}
}).then(item => {
photo.value = item;
return item;
});
const adjust = (id, adjustment) => mutate({
isMutationRunning,
mutation: ADJUST_PHOTO,
variables: {id, adjustment}
}).then(item => {
photo.value = item;
return item;
});
const destroy = (id) => mutate({
isMutationRunning,
mutation: DELETE_PHOTO,
variables: {id}
});
return {
photo, isMutationRunning, isQueryRunning, fetchDetail, upload, update, changeOrientation, adjust, destroy
}
});
src/stores/Photos.js
+93
View File
@@ -0,0 +1,93 @@
import {defineStore} from "pinia";
import {ADJUST_PHOTO, CHANGE_PHOTO_ORIENTATION, DELETE_PHOTO, EDIT_PHOTO, UPLOAD_PHOTO} from "src/graphql/mutations/photo";
import {PHOTOS_PUBLIC_LIST, PHOTO_DETAIL} from "src/graphql/queries/photo";
import {ref} from "vue";
import {mutate, query} from "stores/helpers";
export const usePhotosStore = defineStore('Photos', () => {
const photo = ref(null);
const photos = ref([]);
const openedPhoto = ref(null);
const isMutationRunning = ref(false);
const isQueryRunning = ref(false);
const setOpenedPhoto = (photoObject) => {
openedPhoto.value = photoObject;
}
const fetchDetail = (id) => query({
isQueryRunning,
query: PHOTO_DETAIL,
variables: {id}
}).then(item => photo.value = item);
const fetchPublic = ({flightId, pointOfInterestId, aircraftId, copilotId}) => query({
isQueryRunning,
query: PHOTOS_PUBLIC_LIST,
variables: {flightId, pointOfInterestId, aircraftId, copilotId}
}).then(items => photos.value = items);
const upload = (flightId, input) => {
if (!flightId) {
console.error("No flightId specified for photo upload! Aborting");
return;
}
input.flightId = flightId;
if (!input.name) {
input.name = "";
}
if (!input.description) {
input.description = "";
}
// TODO: ^^ patri tohle do storu?
return mutate({
isMutationRunning,
mutation: UPLOAD_PHOTO,
variables: {input}
})
};
const update = (id, input) => mutate({
isMutationRunning,
mutation: EDIT_PHOTO,
variables: {id, input}
}).then(item => {
photo.value = item;
return item;
})
const changeOrientation = (id, direction) => mutate({
isMutationRunning,
mutation: CHANGE_PHOTO_ORIENTATION,
variables: {id, direction}
}).then(item => {
photo.value = item;
return item;
});
const adjust = (id, adjustment) => mutate({
isMutationRunning,
mutation: ADJUST_PHOTO,
variables: {id, adjustment}
}).then(item => {
photo.value = item;
return item;
});
const destroy = (id) => mutate({
isMutationRunning,
mutation: DELETE_PHOTO,
variables: {id}
});
return {
photo, photos, isMutationRunning, isQueryRunning, fetchDetail, fetchPublic, upload, update,
changeOrientation, adjust, destroy,
openedPhoto, setOpenedPhoto
}
});
src/stores/PointsOfInterest.js
+41 -35
View File
@@ -1,49 +1,55 @@
import {defineStore} from 'pinia'
import {POI_DETAIL, POI_LIST} from "src/graphql/queries/poi";
import {POI_DETAIL, POI_LIST, POI_PUBLIC_DETAIL, POI_PUBLIC_LIST} from "src/graphql/queries/poi";
import {CREATE_POI, EDIT_POI} from "src/graphql/mutations/poi";
import {mutate, query, updateInItems} from "stores/helpers";
import {ref} from "vue";
export const usePointsOfInterestStore = defineStore('PointsOfInterest', () => {
const pointOfInterest = ref(null);
const pointsOfInterest = ref([]);
const isMutationRunning = ref(false);
const isQueryRunning = ref(false);
const pointOfInterest = ref(null);
const pointsOfInterest = ref([]);
const isMutationRunning = ref(false);
const isQueryRunning = ref(false);
const fetchDetail = (id) => query({
isQueryRunning,
query: POI_DETAIL,
variables: {id},
}).then(item => pointOfInterest.value = item);
const fetchDetail = (id) => {
return query({
isQueryRunning,
query: POI_DETAIL,
variables: {id},
}).then(item => pointOfInterest.value = item);
};
const fetchPublicDetail = (id) => query({
isQueryRunning,
query: POI_PUBLIC_DETAIL,
variables: {id},
}).then(item => pointOfInterest.value = item);
const fetch = () => {
return query({
isQueryRunning,
query: POI_LIST,
}).then(items => pointsOfInterest.value = items);
}
const fetch = () => query({
isQueryRunning,
query: POI_LIST,
}).then(items => pointsOfInterest.value = items);
const create = (input) => {
return mutate({
isMutationRunning,
mutation: CREATE_POI,
variables: {input},
}).then(item => pointsOfInterest.value.push(item))
}
const fetchPublic = () => query({
isQueryRunning,
query: POI_PUBLIC_LIST,
}).then(items => pointsOfInterest.value = items);
const update = (id, input) => {
return mutate({
isMutationRunning,
mutation: EDIT_POI,
variables: {id, input}
}).then(item => updateInItems(pointsOfInterest.value, 'id', item))
}
const create = (input) => mutate({
isMutationRunning,
mutation: CREATE_POI,
variables: {input},
}).then(item => pointsOfInterest.value.push(item))
return {
pointOfInterest, pointsOfInterest, isMutationRunning, isQueryRunning, fetch, fetchDetail, create, update
}
const update = (id, input) => mutate({
isMutationRunning,
mutation: EDIT_POI,
variables: {id, input}
}).then(item => {
updateInItems(pointsOfInterest.value, 'id', item);
pointOfInterest.value = item;
})
return {
pointOfInterest, pointsOfInterest, isMutationRunning, isQueryRunning, fetch, fetchPublic, fetchDetail,
fetchPublicDetail, create, update
}
})
src/stores/User.js
+1
View File
@@ -68,6 +68,7 @@ export const useUserStore = defineStore('LoggedUser', () => {
};
const getAccessToken = () => {
// TODO: https://dev.to/quasar/quasar-ssr-using-cookies-with-other-libs-services-4nkl
if (typeof localStorage === 'undefined') return null;
const tokenValidity = localStorage.getItem("accessTokenValidity");
src/stores/helpers.js
+1 -1
View File
@@ -22,7 +22,7 @@ export const query = ({isQueryRunning, query, variables, refreshUnauthorized}) =
variables.id = parseInt(variables.id);
}
query._refreshUnauthorizedUser = refreshUnauthorized;
query._refreshUnauthorizedUser = typeof refreshUnauthorized === 'undefined' ? true : refreshUnauthorized;
isQueryRunning.value = true;
const queryName = query.definitions[0].selectionSet.selections[0].name.value;