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

Aktualizace balicku, strnakovani, uprava hlavni stranky

Browse Source
This commit is contained in:
Michal Kváček
2023-12-12 23:42:16 +01:00
parent 8c7e237053
commit c8ea17c1ec
67 changed files with 1372 additions and 774 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/boot/apollo.js
+3 -5
View File
@@ -1,17 +1,17 @@
import {ApolloClient, ApolloLink, fromPromise, InMemoryCache} from '@apollo/client/core'
import {onError} from "@apollo/client/link/error";
import {useUserStore} from "stores/User";
import {useAppStore} from "stores/App";
import {Notify} from "quasar";
import {errorObject, warningObject} from "src/composables/dialog";
import {createUploadLink} from "apollo-upload-client";
import {useAuthStore} from "stores/Auth";
// import createUploadLink from "apollo-upload-client/createUploadLink.mjs";
const handleRefreshToken = (store, router, forward, operation) => {
if (!operation.query?._refreshUnauthorizedUser) return;
console.log("refreshing token, ", operation.query);
return fromPromise(useUserStore(store).refreshAccessToken()
return fromPromise(useAuthStore(store).refreshAccessToken()
.catch((error) => {
Notify.create(warningObject("Tvoje přihlášení vypřešlo. Přihlaš se prosím znovu."));
router.push({name: "login"})
@@ -39,8 +39,7 @@ export default (({store, router}) => {
})
const authLink = new ApolloLink((operation, forward) => {
const accessToken = useUserStore(store).getAccessToken();
const accessToken = useAuthStore(store).getAccessToken();
if (accessToken) {
operation.setContext({
headers: {"Authorization": `Bearer ${accessToken}`},
@@ -50,7 +49,6 @@ export default (({store, router}) => {
});
const errorLink = onError(({graphQLErrors, networkError, operation, forward}) => {
console.log(networkError, graphQLErrors);
if (networkError?.statusCode === 401) {
return handleRefreshToken(store, router, forward, operation);
}
src/boot/axios.js
+3 -4
View File
@@ -1,6 +1,6 @@
import {boot} from 'quasar/wrappers'
import axios from 'axios'
import {useUserStore} from "stores/User";
import {useAuthStore} from "stores/Auth";
const api = axios.create({
@@ -15,7 +15,7 @@ const api = axios.create({
export default boot(({store}) => {
api.interceptors.request.use((config) => {
const token = useUserStore(store).getAccessToken();
const token = useAuthStore(store).getAccessToken();
if (token) {
config.headers['Authorization'] = `Bearer ${token}`
}
@@ -33,8 +33,7 @@ export default boot(({store}) => {
async function (error) {
const originalRequest = error.config;
if (error.response.status === 401 && !['/refresh', '/login'].includes(originalRequest.url)) {
const newToken = await useUserStore(store).refreshAccessToken().catch(err => {
console.error(err);
const newToken = await useAuthStore(store).refreshAccessToken().catch(err => {
return Promise.reject("Logged out");
})
api.defaults.headers.common['Authorization'] = 'Bearer ' + newToken;
src/components/AppFooter.vue
+38
View File
@@ -0,0 +1,38 @@
<script setup></script>
<template>
<q-footer>
<div class="row justify-between">
<div class="col-4">
<q-list>
<q-item><router-link :to="{name: 'about'}">O projektu</router-link></q-item>
<q-item><router-link :to="{name: 'contact'}">Kontakt</router-link></q-item>
<q-item><router-link :to="{name: 'login'}">Login</router-link></q-item>
<q-item><router-link :to="{name: 'registration'}">Registrace</router-link></q-item>
</q-list>
</div>
<div class="col-4">
<q-list>
<q-item><router-link :to="{name: 'about'}">Podmínky použití</router-link></q-item>
<q-item><router-link :to="{name: 'about'}">Správa osobních údajů</router-link></q-item>
</q-list>
</div>
<!-- <div class="col">-->
<!-- &copy; 2023 Polétání.cz-->
<!-- </div>-->
</div>
<div class="row">
<div class="col text-center q-my-lg">
Vytvořeno s &hearts; s využitím následujících technologií: Quasar, GraphQL, Strawberry, FastAPI
</div>
</div>
</q-footer>
</template>
<style scoped>
a {
color: white;
font-size: 110%;
}
</style>
src/components/LoadMoreList.vue
+41
View File
@@ -0,0 +1,41 @@
<script setup>
const props = defineProps({
totalItemsCount: {
type: Number,
required: true
},
itemsLength: {
type: Number,
required: true,
},
itemsPerPage: {
type: Number,
required: false,
default: 5,
},
isQueryRunning: {
type: Boolean,
required: false,
default: false
}
})
const emits = defineEmits(["load-more"]);
const loadMore = () => {
emits("load-more", props.itemsPerPage);
}
</script>
<template>
<div>
<slot name="items"/>
<slot name="skeleton" v-if="isQueryRunning"/>
<div class="text-center q-my-md">
<q-btn color="primary" :loading="isQueryRunning" rounded size="lg" icon="expand_more" @click="loadMore()" v-if="totalItemsCount > itemsLength">
<slot name="loadMoreText"/>
</q-btn>
</div>
</div>
</template>
src/components/aircrafts/AircraftsList.vue
+56 -34
View File
@@ -1,46 +1,68 @@
<script setup>
import {useAppStore} from "stores/App";
import LoadMoreList from "components/LoadMoreList.vue";
import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
const props = defineProps({
items: {
type: Array,
required: true
},
totalItemsCount: {
type: Number,
required: true
},
itemsPerPage: {
type: Number,
required: false,
default: 5,
},
isQueryRunning: {
type: Boolean,
required: false,
default: false
}
});
useAppStore().setPageTitle("Letadla");
</script>
<template>
<q-list bordered separator>
<q-item
clickable
v-ripple
:to="{name: 'aircraftDetail', params: {id: aircraft.id }}"
v-for="aircraft of props.items" :key="aircraft"
>
<q-item-section avatar>
<q-avatar v-if="aircraft.titlePhoto">
<img :src="aircraft.titlePhoto.thumbnailUrl" alt=""/>
</q-avatar>
<q-avatar color="teal" text-color="white" icon="flight" v-else/>
</q-item-section>
<q-item-section>
<q-item-label label>
{{ aircraft.callSign }}
</q-item-label>
<q-item-label caption>
{{ aircraft.model }}
<template v-if="aircraft.manufacturer">
({{ aircraft.manufacturer }})
</template>
</q-item-label>
<q-item-label caption v-if="aircraft.organization">
Provozovatel: {{ aircraft.organization.name }}
</q-item-label>
</q-item-section>
</q-item>
</q-list>
<LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
<template #items>
<q-list bordered separator>
<q-item
clickable
v-ripple
:to="{name: 'aircraftDetail', params: {id: aircraft.id }}"
v-for="aircraft of props.items" :key="aircraft"
>
<q-item-section avatar>
<q-avatar v-if="aircraft.titlePhoto">
<img :src="aircraft.titlePhoto.thumbnailUrl" alt=""/>
</q-avatar>
<q-avatar color="teal" text-color="white" icon="flight" v-else/>
</q-item-section>
<q-item-section>
<q-item-label label>
{{ aircraft.callSign }}
</q-item-label>
<q-item-label caption>
{{ aircraft.model }}
<template v-if="aircraft.manufacturer">
({{ aircraft.manufacturer }})
</template>
</q-item-label>
<q-item-label caption v-if="aircraft.organization">
Provozovatel: {{ aircraft.organization.name }}
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</template>
<template #skeleton>
<BasicListSkeleton :items="itemsPerPage"/>
</template>
<template #loadMoreText>
Další
</template>
</LoadMoreList>
</template>
src/components/flights/FlightsList.vue
+80 -40
View File
@@ -2,6 +2,9 @@
import {minutesToHumanReadable} from "src/composables/datetimeUtils";
import {flightName} from "src/composables/flight";
import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
import {computed} from "vue";
import LoadMoreList from "components/LoadMoreList.vue";
const props = defineProps({
items: {
@@ -12,6 +15,20 @@ const props = defineProps({
type: Boolean,
required: true
},
totalItemsCount: {
type: Number,
required: true
},
itemsPerPage: {
type: Number,
required: false,
default: 5,
},
isQueryRunning: {
type: Boolean,
required: false,
default: false
}
});
const routeDetail = (flight) => {
@@ -20,52 +37,75 @@ const routeDetail = (flight) => {
else
return {name: "flightDetail", params: {id: flight.id}}
};
const pluralize = (count, singular, plural, pluralMore) => {
if (count === 1) return singular;
else if (count < 5) return plural;
else return pluralMore;
}
const loadMoreCount = computed(() => {
const remaining = props.totalItemsCount - props.items.length;
return Math.min(props.itemsPerPage, remaining);
});
</script>
<template>
<q-list bordered separator>
<q-item
v-for="flight of items" :key="flight"
ripple
clickable
:to="routeDetail(flight)"
>
<q-item-section avatar>
<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>
<LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
<template #items>
<q-list bordered separator>
<q-item
v-for="flight of items" :key="flight"
ripple
clickable
:to="routeDetail(flight)"
>
<q-item-section avatar>
<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="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>
<div class="text-secondary" v-if="flight.copilots">
<q-icon name="person"/>
{{ flight.pilot.name }}
{{ flight.copilots }}
</div>
<div class="text-secondary">
<q-icon name="schedule"/>
{{ minutesToHumanReadable(flight.durationMinCalculated) }}
</div>
<div class="text-secondary">
<q-icon name="flight"/>
{{ flight.aircraft.callSign }}
</div>
<div class="text-secondary">
<q-icon name="schedule"/>
{{ minutesToHumanReadable(flight.durationMinCalculated) }}
</div>
<div class="text-secondary">
<q-icon name="flight"/>
{{ flight.aircraft.callSign }}
</div>
<div class="text-secondary" v-if="flight.event">
<q-icon name="event"/>
{{ flight.event.name }}
</div>
</q-item-section>
<div class="text-secondary" v-if="flight.event">
<q-icon name="event"/>
{{ flight.event.name }}
</div>
</q-item-section>
<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>
</q-list>
</template>
<template #skeleton>
<FlightsListSkeleton :items="itemsPerPage"/>
</template>
<template #loadMoreText>
Načíst {{ pluralize(loadMoreCount, 'jeden let', `další ${loadMoreCount} lety`, `dalších ${loadMoreCount} letů`) }}
</template>
</LoadMoreList>
<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>
</q-list>
</template>
src/components/flights/skeletons/FlightsListSkeleton.vue
+12 -4
View File
@@ -1,10 +1,18 @@
<script setup>
import {randomInt} from "src/composables/random";
const props = defineProps({
items: {
type: Number,
required: false,
default: 10,
}
})
</script>
<template>
<q-list bordered separator>
<q-item v-for="i in 10" :key="i" ripple>
<q-item v-for="i in items" :key="i" ripple>
<q-item-section avatar>
<q-avatar size="100px">
<q-skeleton type="QAvatar" size="100px"></q-skeleton>
@@ -12,9 +20,9 @@ import {randomInt} from "src/composables/random";
</q-item-section>
<q-item-section>
<q-skeleton :width="randomInt(30,50)+'%'"/>
<q-skeleton type="text" :width="randomInt(10,15)+'%'"/>
<q-skeleton type="text" :width="randomInt(5,10)+'%'"/>
<q-skeleton type="text" width="8%"/>
<q-skeleton type="text" :width="randomInt(10,15)+'%'"/>
<q-skeleton type="text" :width="randomInt(5,10)+'%'"/>
<q-skeleton type="text" width="8%"/>
</q-item-section>
</q-item>
</q-list>
src/components/flights/slider/LatestFlightSliderInfo.vue
+26
View File
@@ -0,0 +1,26 @@
<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, id: flight.id}}">
{{ 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/flights/slider/LatestFlightsSlider.vue
+40
View File
@@ -0,0 +1,40 @@
<script setup>
import {ref} from "vue";
import {flightName} from "src/composables/flight";
import LatestFlightSliderInfo from "components/flights/slider/LatestFlightSliderInfo.vue";
const props = defineProps({
items: {
type: Array,
required: true
}
});
const slide = ref(0);
</script>
<template>
<q-carousel
v-model="slide"
transition-prev="scale"
transition-next="scale"
swipeable
animated
control-color="primary"
navigation
padding
arrows
infinite
height="500px"
class="bg-blue-1 text-white shadow-1 "
>
<q-carousel-slide :name="idx" v-for="(flight, idx) in items" :key="idx" class="column no-wrap flex-center text-center">
<q-img :src="flight.titlePhoto.url" fit="cover" ratio="16/9" height="400px" v-if="flight.titlePhoto">
<div class="absolute-bottom">
<LatestFlightSliderInfo :flight="flight"/>
</div>
</q-img>
<LatestFlightSliderInfo v-else :flight="flight" text-color="primary"/>
</q-carousel-slide>
</q-carousel>
</template>
src/components/indexPage/TimelineDescription.vue
+36
View File
@@ -0,0 +1,36 @@
<script setup></script>
<template>
<q-timeline color="primary" class="q-my-lg">
<q-timeline-entry title="Zaznamenej si let">
<div>
Zapiš si odkud, kdy a čím jsi letěl. Aplikace sama stáhne informace o počasí při vzletu a přistání.
</div>
</q-timeline-entry>
<q-timeline-entry title="Vyber a nahraj fotky">
<div>
Máš nějaké fotky z letu? Nahraj je ke svému letu! A pokud mají v sobě uloženou informaci o poloze, polétání.cz ti zobrazí i místo kde fotka vznikla.
</div>
</q-timeline-entry>
<q-timeline-entry title="Ulož trasu">
<div>
Polétání.cz umí pracovat s trasou ve formátu GPX. Pokud ale tento záznam nemáš, můžeš si naklikat trasu ručně.
</div>
</q-timeline-entry>
<q-timeline-entry title="Popiš zážitek">
<div>
Určitě se po ceste stalo něco vzrušujícího. Proč o tom nenapsat pár vět?
</div>
</q-timeline-entry>
<q-timeline-entry title="Sdílej">
<div>
Létat v sóle je super, ale ještě lepší je se o zážitek podělit. Jedním kliknutím můžeš svůj let zveřejnit a sdílet odkaz kde chceš. Třeba s tvým kopilotem.
</div>
</q-timeline-entry>
</q-timeline>
</template>
src/components/poi/POIList.vue
+47 -19
View File
@@ -1,4 +1,8 @@
<script setup>
import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
import LoadMoreList from "components/LoadMoreList.vue";
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
const props = defineProps({
items: {
type: Array,
@@ -7,6 +11,20 @@ const props = defineProps({
public: {
type: Boolean,
required: true
},
totalItemsCount: {
type: Number,
required: true
},
itemsPerPage: {
type: Number,
required: false,
default: 5,
},
isQueryRunning: {
type: Boolean,
required: false,
default: false
}
});
@@ -18,23 +36,33 @@ const getRoute = (item) => {
}
</script>
<template>
<q-list bordered separator>
<q-item clickable v-ripple v-for="poi of items" :key="poi" :to="getRoute(poi)">
<q-item-section avatar>
<q-avatar v-if="poi.titlePhoto">
<img :src="poi.titlePhoto.thumbnailUrl" alt=""/>
</q-avatar>
<q-avatar v-else :icon="poi.type?.icon || 'place'" color="primary" text-color="white"/>
</q-item-section>
<q-item-section>
{{ poi.name }}
<div class="text-secondary" v-if="poi.type">
{{ poi.type.name }}
</div>
</q-item-section>
<q-item-section side top v-if="poi.isPublic">
<q-icon name="visibility"></q-icon>
</q-item-section>
</q-item>
</q-list>
<LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
<template #items>
<q-list bordered separator>
<q-item clickable v-ripple v-for="poi of items" :key="poi" :to="getRoute(poi)">
<q-item-section avatar>
<q-avatar v-if="poi.titlePhoto">
<img :src="poi.titlePhoto.thumbnailUrl" alt=""/>
</q-avatar>
<q-avatar v-else :icon="poi.type?.icon || 'place'" color="primary" text-color="white"/>
</q-item-section>
<q-item-section>
{{ poi.name }}
<div class="text-secondary" v-if="poi.type">
{{ poi.type.name }}
</div>
</q-item-section>
<q-item-section side top v-if="!props.public && poi.isPublic">
<q-icon name="visibility"></q-icon>
</q-item-section>
</q-item>
</q-list>
</template>
<template #skeleton>
<BasicListSkeleton :items="itemsPerPage"/>
</template>
<template #loadMoreText>
Další
</template>
</LoadMoreList>
</template>
src/components/profile/PublicProfileInfo.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<script setup>
import {onMounted, reactive, watch} from "vue";
import {useRoute} from "vue-router";
import {useUserStore} from "stores/User";
import {useLoggedUserStore} from "stores/LoggedUser";
import {commonProps} from "src/composables/inputs";
import RichTextEditor from "components/inputs/RichTextEditor.vue";
import FormWrapper from "components/FormWrapper.vue";
src/composables/meta.js
+2 -2
View File
@@ -18,9 +18,9 @@ export const metaData = ({title, description, keywords, image}) => {
const filteredDescription = stripHtml(description);
return {
title: title || "",
title: title,
titleTemplate(title) {
return title !== '' ? `${title} - Polétání.cz` : 'Polétání.cz'
return title !== '' ? `${title} - Polétání.cz: fotogalerie ze vzduchu` : 'Polétání.cz'
},
meta: {
description: {name: "description", content: filteredDescription || ""},
src/composables/pagination.js
+16
View File
@@ -0,0 +1,16 @@
import {ref} from "vue";
export const paginationLimit = ref(10);
export const paginationOffset = ref(0);
export const loadPage = ({fetchFunc, filters, appendItems}) => {
return fetchFunc({
...filters,
limit: paginationLimit.value,
offset: paginationOffset.value,
appendItems
}).then(() => {
paginationOffset.value += paginationLimit.value;
})
}
src/graphql/fragments/flight_list.js
+1
View File
@@ -13,6 +13,7 @@ fragment flightListInfo on Flight {
titlePhoto {
thumbnailUrl
url
}
track {
src/graphql/queries/aircrafts.js
+7 -4
View File
@@ -2,11 +2,14 @@ import gql from "graphql-tag";
import {FRAGMENT_AIRCRAFT_FULL_INFO, FRAGMENT_AIRCRAFT_FULL_PRIVATE_INFO, FRAGMENT_AIRCRAFT_LIST_INFO} from "src/graphql/fragments/aircraft";
export const AIRCRAFTS_LIST = gql`
query AircraftsList {
aircrafts {
...aircraftListInfo
query AircraftsList ($limit: Int!, $offset: Int) {
aircrafts(limit: $limit, offset: $offset) {
totalItemsCount
items {
...aircraftListInfo
}
}
}
}
${FRAGMENT_AIRCRAFT_LIST_INFO}
`;
src/graphql/queries/event.js
+48 -10
View File
@@ -3,13 +3,33 @@ import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
import {FRAGMENT_EVENT_FULL_INFO, FRAGMENT_EVENT_LIST_INFO} from "src/graphql/fragments/event";
export const EVENTS_LIST = gql`
query eventsList($username: String) {
events(username: $username) {
...eventListInfo
query eventsList($limit: Int!, $offset: Int) {
events(limit: $limit, offset: $offset) {
items {
...eventListInfo
flights {
titlePhoto {
thumbnailUrl
flights {
titlePhoto {
thumbnailUrl
}
}
}
}
}
${FRAGMENT_EVENT_LIST_INFO}
`;
export const EVENTS_PUBLIC_LIST = gql`
query eventsPublicList($username: String, $limit: Int!, $offset: Int) {
events(username: $username, limit: $limit, offset: $offset, public: true) {
items {
...eventListInfo
flights {
titlePhoto {
thumbnailUrl
}
}
}
}
@@ -19,16 +39,34 @@ ${FRAGMENT_EVENT_LIST_INFO}
`;
export const EVENT_DETAIL = gql`
query event($id: Int!, $username: String) {
event(id: $id, username: $username) {
query event($id: Int!) {
event(id: $id) {
...eventFullInfo
flights {
...flightListInfo
titlePhoto {
thumbnailUrl
}
}
}
}
${FRAGMENT_EVENT_FULL_INFO}
${FRAGMENT_FLIGHT_LIST_INFO}
`;
export const EVENT_PUBLIC_DETAIL = gql`
query eventPublicDetail($id: Int!, $username: String) {
event(id: $id, username: $username, public: true) {
...eventFullInfo
flights {
titlePhoto {
thumbnailUrl
}
}
}
}
${FRAGMENT_EVENT_FULL_INFO}
`;
src/graphql/queries/flights.js
+23 -10
View File
@@ -4,22 +4,35 @@ 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 {
flights {
...flightListInfo
query FlightsList($limit: Int!, $offset: Int) {
flights(limit: $limit, offset: $offset) {
totalItemsCount
items {
...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
query FlightsPublicList($username: String, $aircraftId: Int, $copilotId: Int, $pointOfInterestId: Int, $limit: Int!, $offset: Int) {
flights(
username: $username,
aircraftId: $aircraftId,
copilotId: $copilotId,
pointOfInterestId: $pointOfInterestId,
limit: $limit,
offset: $offset,
public: true
) {
totalItemsCount
items {
...flightListInfo
pilot {
id
publicUsername
}
}
}
}
src/graphql/queries/poi.js
+12 -6
View File
@@ -2,9 +2,12 @@ import gql from "graphql-tag";
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 {
pointsOfInterest {
...pointOfInterestListInfo
query poiList($limit: Int!, $offset: Int) {
pointsOfInterest (limit: $limit, offset: $offset) {
totalItemsCount
items {
...pointOfInterestListInfo
}
}
}
@@ -12,9 +15,12 @@ ${FRAGMENT_POI_LIST_INFO}
`;
export const POI_PUBLIC_LIST = gql`
query poiList {
pointsOfInterest(public: true) {
...pointOfInterestListInfo
query poiList($limit: Int!, $offset: Int) {
pointsOfInterest(limit: $limit, offset: $offset, public: true) {
totalItemsCount
items {
...pointOfInterestListInfo
}
}
}
src/layouts/ProfileLayout.vue
+19 -14
View File
@@ -3,12 +3,12 @@
<q-header reveal elevated class="bg-primary text-white">
<q-toolbar>
<q-btn
flat
dense
round
icon="menu"
aria-label="Menu"
@click="toggleLeftDrawer"
flat
dense
round
icon="menu"
aria-label="Menu"
@click="toggleLeftDrawer"
/>
<q-toolbar-title>
@@ -21,9 +21,9 @@
</q-header>
<q-drawer
v-model="leftDrawerOpen"
show-if-above
bordered
v-model="leftDrawerOpen"
show-if-above
bordered
>
<q-img class="absolute-top" v-if="!isQueryRunning && user" :src="user.titleImageUrl" style="height: 150px"/>
<q-spinner v-else/>
@@ -41,15 +41,20 @@
</q-page-container>
</q-layout>
</template>
<script>
import {useUserStore} from "stores/User";
import {useLoggedUserStore} from "stores/LoggedUser";
export default {
preFetch() {
return useUserStore().fetchLoggedUserDetail({refresh: true});
preFetch({redirect, currentRoute}) {
// nelze udelat refresh tokenu, protoze refreshToken je ulozeny v HTTP-only cookie a neposila se!
return useLoggedUserStore().fetchLoggedUserDetail({refresh: false}).catch(() => {
redirect({name: "profileRefresh", query: {url: currentRoute.href}})
})
}
}
</script>
<script setup>
import {ref} from 'vue'
import {storeToRefs} from "pinia";
@@ -75,10 +80,10 @@ const toggleLeftDrawer = () => {
leftDrawerOpen.value = !leftDrawerOpen.value
};
const {isQueryRunning, user} = storeToRefs(useUserStore());
const {isQueryRunning, user} = storeToRefs(useLoggedUserStore());
const logout = () => {
useUserStore().logout().then(() => {
useLoggedUserStore().logout().then(() => {
$q.notify(successObject("Odhlášení bylo úspěšné"));
$router.push({name: "homepage"});
})
src/layouts/PublicLayout.vue
+6 -4
View File
@@ -1,5 +1,5 @@
<template>
<q-layout view="lHh Lpr lFf">
<q-layout view="lHh Lpr lff">
<q-header>
<q-toolbar>
<q-toolbar-title>
@@ -29,16 +29,17 @@
<router-view class="q-my-lg q-mx-lg"/>
</q-page-container>
<!-- <AppFooter />-->
</q-layout>
</template>
<script>
import {useUserStore} from "stores/User";
import {useLoggedUserStore} from "stores/LoggedUser";
export default {
preFetch() {
// todo: nevim proc tu nefunguje refresh, neposila se credentials
return useUserStore().fetchLoggedUserDetail({refresh: false});
return useLoggedUserStore().fetchLoggedUserDetail({refresh: false});
}
}
</script>
@@ -48,7 +49,8 @@ import {useAppStore} from "stores/App";
import BreadcrumbsNavigation from "components/navigation/BreadcrumbsNavigation.vue";
import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
import BreadcrumbsSkeleton from "components/navigation/BreadcrumbsSkeleton.vue";
import AppFooter from "components/AppFooter.vue";
const {pageTitle, breadcrumbs} = storeToRefs(useAppStore());
const loggedUser = storeToRefs(useUserStore()).user;
const loggedUser = storeToRefs(useLoggedUserStore()).user;
</script>
src/pages/ContactPage.vue
+5
View File
@@ -0,0 +1,5 @@
<script setup></script>
<template>
contact form
</template>
src/pages/profile/ProfilePage.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<script setup>
import {useUserStore} from "stores/User";
import {useLoggedUserStore} from "stores/LoggedUser";
import ProfileImagesForm from "components/profile/ProfileForm.vue";
import {useAppStore} from "stores/App";
import {storeToRefs} from "pinia";
@@ -10,14 +10,14 @@ import ChangePasswordForm from "components/profile/ChangePasswordForm.vue";
import PublicProfileInfo from "components/profile/PublicProfileInfo.vue";
useAppStore().setPageTitle("Profil");
const loggedUser = storeToRefs(useUserStore()).user;
const loggedUser = storeToRefs(useLoggedUserStore()).user;
const $q = useQuasar();
const handleSave = async (formData) => {
await useUserStore().update(formData);
await useLoggedUserStore().update(formData);
$q.notify(successObject("Úspěšně uloženo"));
};
const isRequestPending = storeToRefs(useUserStore()).isMutationRunning;
const isRequestPending = storeToRefs(useLoggedUserStore()).isMutationRunning;
const openedTab = ref("profile");
</script>
src/pages/profile/ProfileRefreshPage.vue
+24
View File
@@ -0,0 +1,24 @@
<script setup>
import {useRoute, useRouter} from "vue-router";
import {computed, onMounted} from "vue";
import {useLoggedUserStore} from "stores/LoggedUser";
import {useAuthStore} from "stores/Auth";
const $route = useRoute();
const $router = useRouter();
const url = computed(() => $route.query.url);
onMounted(() => {
useAuthStore().refreshAccessToken().then(() => {
console.log("refreshnuto", $route.query.url);
$router.push($route.query.url)
});
});
</script>
<template>
{{ url }}
</template>
src/pages/profile/aircraft/AircraftDetailPage.vue
+2 -2
View File
@@ -14,7 +14,7 @@ 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";
import {useLoggedUserStore} from "stores/LoggedUser";
import {useFlightsStore} from "stores/Flights";
import {toggleVisibility} from "src/composables/form/formHandling";
import ContentCardEditButton from "components/ContentCardEditButton.vue";
@@ -24,7 +24,7 @@ const $router = useRouter();
const aircraftId = parseInt(useRoute().params.id);
useAircraftsStore().fetchDetail(aircraftId);
const loggedUser = storeToRefs(useUserStore()).user;
const loggedUser = storeToRefs(useLoggedUserStore()).user;
const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
watch(() => aircraft.value, (newVal) => {
if (!newVal) return;
src/pages/profile/aircraft/AircraftsPage.vue
+19 -4
View File
@@ -6,18 +6,27 @@ import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import {useAircraftsStore} from "stores/Aircrafts";
import {storeToRefs} from "pinia";
import {useAppStore} from "stores/App";
import FlightsList from "components/flights/FlightsList.vue";
import {ref} from "vue";
import {useFlightsStore} from "stores/Flights";
import {loadPage, paginationLimit} from "src/composables/pagination";
useAircraftsStore().fetch();
const {aircrafts, isQueryRunning} = storeToRefs(useAircraftsStore());
useAppStore().setPageTitle("Letadla");
const loadNextAircraftsPage = (appendItems) => loadPage({
fetchFunc: useAircraftsStore().fetch,
appendItems
});
loadNextAircraftsPage(false);
const {aircrafts, totalItemsCount, isQueryRunning} = storeToRefs(useAircraftsStore());
</script>
<template>
<BasicListSkeleton v-if="isQueryRunning || !aircrafts.length"/>
<BasicListSkeleton :items="paginationLimit" v-if="isQueryRunning && !totalItemsCount"/>
<BasicInfoBanner
v-if="!isQueryRunning && aircrafts.length === 0"
v-if="!isQueryRunning && totalItemsCount === 0"
:route-add="{name: 'addAircraft'}"
label-add="Vytvořit letadlo"
>
@@ -29,6 +38,12 @@ useAppStore().setPageTitle("Letadla");
<AircraftsList
v-else
:items="aircrafts"
:total-items-count="totalItemsCount"
:is-query-running="isQueryRunning"
:items-per-page="paginationLimit"
:public="true"
class="q-mb-xl"
@load-more="loadNextAircraftsPage(true)"
/>
<FAB mode="add" :router-link="{name: 'addAircraft'}"/>
src/pages/profile/aircraft/EditAircraftPage.vue
+2 -2
View File
@@ -9,7 +9,7 @@ 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 {useLoggedUserStore} from "stores/LoggedUser";
import PhotosEditorList from "components/photos/PhotosEditorList.vue";
import CommonEditSwitcher from "components/navigation/CommonEditSwitcher.vue";
import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
@@ -17,7 +17,7 @@ import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkelet
const $router = useRouter();
const $q = useQuasar();
const aircraftId = parseInt(useRoute().params.id);
const loggedUser = storeToRefs(useUserStore()).user;
const loggedUser = storeToRefs(useLoggedUserStore()).user;
const {aircraft, isMutationRunning, isQueryRunning} = storeToRefs(useAircraftsStore());
src/pages/profile/flight/EditFlightPage.vue
+4 -4
View File
@@ -42,11 +42,11 @@ watch(() => $route.params.step, (val) => formStep.value = val);
onMounted(() => {
formStep.value = $route.params.step || "basic";
useAircraftsStore().fetch();
usePointsOfInterestStore().fetch();
useAircraftsStore().fetch({});
usePointsOfInterestStore().fetch({});
useAirportsStore().fetch();
useCopilotsStore().fetch();
useEventsStore().fetch();
useEventsStore().fetch({});
useFlightsStore().fetchDetail(flightId).then((f) => {
const flightNameFormatted = flightName(f);
@@ -133,7 +133,7 @@ const updateSinglePhoto = (id, formData) => {
return usePhotosStore().update(id, formData).then((data) => {
const idx = _findPhotoIndex(data.id);
flight.value.photos[idx] = data;
usePointsOfInterestStore().fetch();
usePointsOfInterestStore().fetch({});
});
}
src/pages/profile/flight/FlightDetailPage.vue
+3 -3
View File
@@ -9,7 +9,7 @@ import {copyToClipboard, useQuasar} from "quasar";
import {confirmObject, successObject} from "src/composables/dialog";
import {useFlightsStore} from "stores/Flights";
import FlightTrackMap from "components/flights/FlightTrackMap.vue";
import {useUserStore} from "stores/User";
import {useLoggedUserStore} from "stores/LoggedUser";
import {storeToRefs} from "pinia";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import PhotoGallery from "components/photos/PhotoGallery.vue";
@@ -21,7 +21,7 @@ import {toggleVisibility} from "src/composables/form/formHandling";
const $q = useQuasar();
const $router = useRouter();
const flightId = parseInt(useRoute().params.id);
const loggedUser = storeToRefs(useUserStore()).user;
const loggedUser = storeToRefs(useLoggedUserStore()).user;
useFlightsStore().fetchDetail(flightId);
const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
@@ -52,7 +52,7 @@ const togglePublicVisibility = () => toggleVisibility({
});
const copyLinkToClipboard = () => {
const loggedUser = useUserStore().user;
const loggedUser = useLoggedUserStore().user;
const url = $router.resolve({
name: "publicFlightDetail",
params: {id: flightId, username: loggedUser.publicUsername}
src/pages/profile/flight/FlightsPage.vue
+28 -4
View File
@@ -6,24 +6,48 @@ import {useAppStore} from "stores/App";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import {useFlightsStore} from "stores/Flights";
import {storeToRefs} from "pinia";
import {ref} from "vue";
useAppStore().setPageTitle("Moje lety");
useFlightsStore().fetch({});
const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
const paginationLimit = ref(10);
const paginationOffset = ref(0);
const loadNextPage = (appendItems) => {
return useFlightsStore().fetch({
limit: paginationLimit.value,
offset: paginationOffset.value,
appendItems
}).then(() => {
paginationOffset.value += paginationLimit.value;
})
}
loadNextPage(false);
const {flights, totalItemsCount, isQueryRunning} = storeToRefs(useFlightsStore());
</script>
<template>
<FlightsListSkeleton v-if="isQueryRunning"/>
<BasicInfoBanner
v-else-if="!isQueryRunning && flights.length === 0"
v-else-if="!isQueryRunning && totalItemsCount === 0"
:route-add="{name: 'addFlight'}"
label-add="Přidat let"
>
Nemáš zaznamenaný žádný let.
</BasicInfoBanner>
<FlightsList v-else :items="flights" :public="false" />
<FlightsList
v-else
:items="flights"
:public="false"
:is-query-running="isQueryRunning"
:items-per-page="paginationLimit"
:total-items-count="totalItemsCount"
@load-more="loadNextPage(true)"
/>
<FAB mode="add" :router-link="{name: 'addFlight'}"/>
</template>
src/pages/profile/flight/NewFlightPage.vue
+3 -3
View File
@@ -12,9 +12,9 @@ import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
import FlightEditSkeleton from "components/flights/skeletons/FlightEditSkeleton.vue";
onMounted(() => {
useAircraftsStore().fetch()
usePointsOfInterestStore().fetch()
useFlightsStore().fetch()
useAircraftsStore().fetch({})
usePointsOfInterestStore().fetch({})
useFlightsStore().fetch({})
useAirportsStore().fetch()
useAppStore().setPageTitle("Nový let");
src/pages/profile/organization/OrganizationDetailPage.vue
+2 -2
View File
@@ -4,7 +4,7 @@ import {computed, onMounted} from "vue";
import {useAppStore} from "stores/App";
import FAB from "components/FAB.vue";
import {storeToRefs} from "pinia";
import {useUserStore} from "stores/User";
import {useLoggedUserStore} from "stores/LoggedUser";
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
import AircraftsList from "components/aircrafts/AircraftsList.vue";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
@@ -13,7 +13,7 @@ import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
import {useOrganizationsStore} from "stores/Organizations";
const organizationId = parseInt(useRoute().params.id);
const loggedUser = storeToRefs(useUserStore()).user;
const loggedUser = storeToRefs(useLoggedUserStore()).user;
const $q = useQuasar();
onMounted(() => {
src/pages/profile/organization/OrganizationsPage.vue
+2 -2
View File
@@ -7,12 +7,12 @@ import OrganizationsList from "components/organizations/OrganizationsList.vue";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import {useOrganizationsStore} from "stores/Organizations";
import {storeToRefs} from "pinia";
import {useUserStore} from "stores/User";
import {useLoggedUserStore} from "stores/LoggedUser";
useOrganizationsStore().fetch();
useAppStore().setPageTitle("Organizace");
const loggedUser = storeToRefs(useUserStore()).user;
const loggedUser = storeToRefs(useLoggedUserStore()).user;
const myOrganizationIds = computed(() => (loggedUser.value && loggedUser.value.organizations?.map(o => o.id)) || []);
const {isQueryRunning, organizations} = storeToRefs(useOrganizationsStore());
src/pages/profile/poi/EditPointOfInterestPage.vue
+2 -2
View File
@@ -9,7 +9,7 @@ import {successObject} from "src/composables/dialog";
import {usePointsOfInterestTypeStore} from "stores/PointOfInterestType";
import {storeToRefs} from "pinia";
import POIForm from "components/poi/POIForm.vue";
import {useUserStore} from "stores/User";
import {useLoggedUserStore} from "stores/LoggedUser";
import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
import PhotoEditorSkeleton from "components/photos/skeletons/PhotoEditorSkeleton.vue";
import PhotosEditorList from "components/photos/PhotosEditorList.vue";
@@ -32,7 +32,7 @@ usePointsOfInterestStore().fetchDetail(poiId).then((p) => {
usePointsOfInterestTypeStore().fetch();
const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).types;
const loggedUser = storeToRefs(useUserStore()).user;
const loggedUser = storeToRefs(useLoggedUserStore()).user;
const {isQueryRunning, pointOfInterest, isMutationRunning} = storeToRefs(usePointsOfInterestStore());
const $q = useQuasar();
src/pages/profile/poi/PointOfInterestDetailPage.vue
+2 -2
View File
@@ -3,7 +3,7 @@ import {useRoute, useRouter} from "vue-router";
import POIDetailSkeleton from "components/poi/skeletons/POIDetailSkeleton.vue";
import {useAppStore} from "stores/App";
import EmbeddedMap from "components/map/EmbeddedMap.vue";
import {useUserStore} from "stores/User";
import {useLoggedUserStore} from "stores/LoggedUser";
import {storeToRefs} from "pinia";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import FlightsList from "components/flights/FlightsList.vue";
@@ -17,7 +17,7 @@ import ContentCardEditButton from "components/ContentCardEditButton.vue";
import {useFlightsStore} from "stores/Flights";
import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
const loggedUser = storeToRefs(useUserStore()).user;
const loggedUser = storeToRefs(useLoggedUserStore()).user;
const poiId = parseInt(useRoute().params.id);
usePointsOfInterestStore().fetchDetail(poiId).then((p) => {
src/pages/profile/poi/PointsOfInterestPage.vue
+18 -8
View File
@@ -6,28 +6,38 @@ import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
import {storeToRefs} from "pinia";
import {loadPage, paginationLimit} from "src/composables/pagination";
usePointsOfInterestStore().fetch();
useAppStore().setPageTitle("Zajímavá místa");
const {isQueryRunning, pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
const loadNextPage = (appendItems) => loadPage({
fetchFunc: usePointsOfInterestStore().fetch,
appendItems
});
loadNextPage(false);
const {isQueryRunning, totalItemsCount, pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
</script>
<template>
<BasicListSkeleton :items="10" v-if="isQueryRunning && !pointsOfInterest.length"/>
<BasicInfoBanner
v-else-if="!isQueryRunning && pointsOfInterest.length === 0"
:route-add="{name: 'addPoi'}"
label-add="Přidat"
v-else-if="!isQueryRunning && pointsOfInterest.length === 0"
:route-add="{name: 'addPoi'}"
label-add="Přidat"
>
Nemáš tu uložené žádné zajímavé místo. Přidej si let, nastav si tam ručně trasu a jednotlivé body se zobrazí
i v tomto seznamu.
</BasicInfoBanner>
<POIList
v-else
:public="false"
:items="pointsOfInterest"
v-else
:public="false"
:items="pointsOfInterest"
:total-items-count="totalItemsCount"
:is-query-running="isQueryRunning"
:items-per-page="paginationLimit"
@load-more="loadNextPage(true)"
/>
<FAB :router-link="{name: 'addPOI'}" mode="add"/>
src/pages/public/AboutPage.vue
+45 -2
View File
@@ -1,5 +1,48 @@
<script setup></script>
<script setup>
import {useAppStore} from "stores/App";
import {useMeta} from "quasar";
import {metaData} from "src/composables/meta";
import ContentCard from "components/ContentCard.vue";
useAppStore().setPageTitle("O projektu");
useAppStore().setBreadcrumbs([
{to: {name: 'homepage'}, label: "Polétání.cz"},
{label: "O projektu"}
]);
useMeta(() => metaData({
title: "O projektu",
}));
</script>
<template>
about
<ContentCard title="Polétání.cz">
<template #content>
<q-card-section>
<p>
Polétání.cz je fotogalerie určená pilotům malých letadel. Nesnaží se být leteckým zápisníkem, nabízí ale
možnosti uložení fotografií pořízených během letu. Posláním aplikace je vytvořit vizuálně příjemnou prezentaci
tvých zážitků ze vzduchu a umožnit sdílet detaily o letu se svým kamarádem (kopilotem).
</p>
<h3>Externí data</h3>
Pro obohacení informací používá Polétání.cz data z následujících zdrojů:
<ul>
<li>Open Meteo API - pro stahování informací o počasí při vzletu a přistání</li>
<li>Elevation API - pro stažení informací o výšce terénu. Tato informace se používá u fotografií a trasy letu</li>
<li>VFR příručka - pro aktualizaci informací o letištích</li>
</ul>
<h3>O autorovi</h3>
<p>
Jmenuji se Michal a posledních pár let trávím čas nejradši pár stovek metrů nad zemí. Kromě létání mě baví i
fotografie. A zároveň se živím jako programátor. Původně Polétání.cz mělo být jen malý proof-of-concept projekt,
abych si vyzkoušel nové technologie. Po pár týdnech práce jsem ale zjistil, že se úplně o malý projekt nejedná :).
</p>
</q-card-section>
</template>
</ContentCard>
</template>
src/pages/public/IndexPage.vue
+30 -41
View File
@@ -1,15 +1,25 @@
<script setup>
import {useMeta} from "quasar";
import {commonKeywords, metaData} from "src/composables/meta";
import {metaData} from "src/composables/meta";
import AppFooter from "components/AppFooter.vue";
import LatestFlightsSlider from "components/flights/slider/LatestFlightsSlider.vue";
import {onMounted} from "vue";
import {useFlightsStore} from "stores/Flights";
import {storeToRefs} from "pinia";
import TimelineDescription from "components/indexPage/TimelineDescription.vue";
useMeta(() => metaData({
title: "",
title: "Polétání.cz",
description: "Polétání.cz je aplikace na ukládání a sdílení fotografií a tras z vyhlídkových letů.",
keywords: [...commonKeywords]
}));
onMounted(() => {
useFlightsStore().fetchPublic({limit: 5});
});
const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
</script>
<template>
<q-layout view="lHh Lpr lFf" data-style="background: url('hp/bg.jpg'); background-size: cover;">
<q-layout view="lHh Lpr fff">
<q-header class="bg-semi-transparent text-black" elevated>
<q-toolbar>
@@ -25,56 +35,35 @@ useMeta(() => metaData({
<q-page-container class="q-py-none">
<q-page>
<div class="row q-mx-md">
<div class="xs-hide sm-hide col-md-6 text-center">
<q-img src="hp/app_screenshot.png" fit="contain" class="app-screen" alt="Nahled aplikace"/>
</div>
<div class="col col-md-6">
<div class="info-box bg-semi-transparent q-mx-lg q-py-lg q-px-lg rounded-borders">
<div class="text-h3 text-center">Fotogalerie ze vzduchu</div>
<div class="text-h3 text-center q-my-lg">Fotogalerie ze vzduchu</div>
<q-timeline color="primary" class="q-my-lg">
<q-timeline-entry title="Zaznamenej si let">
<div>
Zapiš si odkud, kdy a čím jsi letěl. Aplikace sama stáhne informace o počasí při vzletu a přistání.
</div>
</q-timeline-entry>
<q-timeline-entry title="Vyber a nahraj fotky">
<div>
Máš nějaké fotky z letu? Nahraj je ke svému letu! A pokud mají v sobě uloženou informaci o poloze, polétání.cz ti zobrazí i místo kde fotka vznikla.
</div>
</q-timeline-entry>
<q-timeline-entry title="Ulož trasu">
<div>
Polétání.cz umí pracovat s trasou ve formátu GPX. Pokud ale tento záznam nemáš, můžeš si naklikat trasu ručně.
</div>
</q-timeline-entry>
<q-timeline-entry title="Popiš zážitek">
<div>
Určitě se po ceste stalo něco vzrušujícího. Proč o tom nenapsat pár vět?
</div>
</q-timeline-entry>
<q-timeline-entry title="Sdílej">
<div>
Létat v sóle je super, ale ještě lepší je se o zážitek podělit. Jedním kliknutím můžeš svůj let zveřejnit a sdílet odkaz kde chceš. Třeba s tvým kopilotem.
</div>
</q-timeline-entry>
</q-timeline>
<p>Polétání.cz je aplikace pro piloty, kteří si chtějí spravovat fotografie ze svých výletů, zobrazovat je na mapě a ukládat si trasy svých výletů.</p>
<div class="text-center q-my-lg">
<q-btn size="xl" :to="{name: 'registration'}" rounded color="secondary">Založit účet</q-btn>
</div>
</div>
</div>
<div class="col-md-6 text-center">
<q-img src="hp/app_screenshot.png" fit="contain" class="app-screen" alt="Nahled aplikace"/>
</div>
</div>
<h3 class="text-center">Poslední lety</h3>
<LatestFlightsSlider :items="flights"/>
<div class="row justify-center">
<div class="col-md-6 q-px-lg">
<TimelineDescription/>
</div>
</div>
</q-page>
</q-page-container>
<AppFooter />
</q-layout>
</template>
src/pages/public/PilotProfilePage.vue → src/pages/public/PilotProfileWrapper.vue
+4 -4
View File
@@ -1,9 +1,9 @@
<script>
import {useUserStore} from "stores/User";
import {usePilotsStore} from "stores/Pilots";
export default {
preFetch({store, currentRoute}) {
return useUserStore(store).fetchPublicUserDetail(currentRoute.params.username);
return usePilotsStore(store).fetchPublicPilotDetail(currentRoute.params.username);
},
}
</script>
@@ -13,13 +13,13 @@ import {storeToRefs} from "pinia";
import PilotProfileCard from "components/profile/PilotProfileCard.vue";
import PublicProfileSkeleton from "components/profile/skeletons/PublicProfileSkeleton.vue";
const {publicUser: pilot, isQueryRunning: pilotLoading} = storeToRefs(useUserStore());
const {pilot, isQueryRunning: pilotLoading} = storeToRefs(usePilotsStore());
</script>
<template>
<div class="row">
<div class="col-12 col-md-8">
<router-view :pilot="pilot"/>
<router-view :pilot="pilot" />
</div>
<div class="col-12 col-md-4">
<PublicProfileSkeleton v-if="pilotLoading && !pilot"/>
src/pages/public/PointsOfInterestPage.vue
-31
View File
@@ -1,31 +0,0 @@
<script setup>
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
import {storeToRefs} from "pinia";
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
import POIList from "components/poi/POIList.vue";
import {useAppStore} from "stores/App";
import {useMeta} from "quasar";
import {metaData} from "src/composables/meta";
usePointsOfInterestStore().fetchPublic();
useAppStore().setPageTitle("Místa");
useAppStore().setBreadcrumbs([
{to: {name: 'homepage'}, label: "Polétání.cz"},
{label: "Místa"},
]);
useMeta(() => metaData({
title: "Místa"
}))
const {pointsOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
</script>
<template>
<BasicListSkeleton :items="10" v-if="isQueryRunning && !pointsOfInterest.length"/>
<POIList
v-else
:public="true"
:items="pointsOfInterest"
/>
</template>
src/pages/public/AircraftDetailPage.vue → src/pages/public/aircraft/AircraftDetailPage.vue
+19 -8
View File
@@ -19,20 +19,19 @@ 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";
import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
import {loadPage, paginationLimit} from "src/composables/pagination";
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());
const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
useAppStore().setPageTitle(aircraft.value.callSign);
useMeta(() => metaData({
@@ -52,9 +51,16 @@ useAppStore().setBreadcrumbs([
{label: aircraft.value.callSign}
]);
const loadNextFlightsPage = (appendItems) => loadPage({
fetchFunc: useFlightsStore().fetchPublic,
filters: {aircraftId: aircraft.value.id},
appendItems
});
onMounted(() => {
loadNextFlightsPage(false);
usePhotosStore().fetchPublic({aircraftId: aircraft.value.id});
useFlightsStore().fetchPublic({aircraftId: aircraft.value.id})
});
</script>
@@ -76,12 +82,17 @@ onMounted(() => {
<BasicInfoBanner v-else-if="!areFlightsLoading && flights.length === 0">
U tohoto letadla nejsou publikované žádné lety.
</BasicInfoBanner>
<FlightsList v-else :items="flights" :public="true"/>
<FlightsList
v-else
:items="flights"
:total-items-count="totalItemsCount"
:is-query-running="areFlightsLoading"
:items-per-page="paginationLimit"
:public="true"
@load-more="loadNextFlightsPage(true)"
/>
</q-card-section>
</template>
</ContentCard>
</template>
</template>
src/pages/public/pilotProfile/CopilotDetailPage.vue
+21 -21
View File
@@ -10,9 +10,8 @@ export default {
<script setup>
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, onServerPrefetch} from "vue";
import {onMounted} from "vue";
import {useFlightsStore} from "stores/Flights";
import {usePhotosStore} from "stores/Photos";
import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
@@ -20,8 +19,8 @@ import ContentCard from "components/ContentCard.vue";
import PhotoGallery from "components/photos/PhotoGallery.vue";
import {useMeta} from "quasar";
import {metaData} from "src/composables/meta";
// import {useCopilotsStore} from "stores/Copilots";
// import {useRoute} from "vue-router";
import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
import {loadPage, paginationLimit} from "src/composables/pagination";
const props = defineProps({
pilot: {
@@ -30,14 +29,8 @@ const props = defineProps({
},
})
// const currentRoute = useRoute();
//
// onServerPrefetch(() => {
//
// })
const {copilot, isQueryRunning} = storeToRefs(useCopilotsStore());
const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
useAppStore().setPageTitle(`${props.pilot.name} + ${copilot.value.name}`);
@@ -54,32 +47,39 @@ useMeta(() => metaData({
image: copilot.value.titleImage?.url
}));
const loadNextFlightsPage = (appendItems) => loadPage({
fetchFunc: useFlightsStore().fetchPublic,
filters: {copilotId: copilot.value.id},
appendItems
});
onMounted(() => {
useFlightsStore().fetchPublic({copilotId: copilot.value.id});
loadNextFlightsPage(false);
usePhotosStore().fetchPublic({copilotId: copilot.value.id})
})
</script>
<template>
<ContentCard v-if="!isQueryRunning" :title-photo="copilot.titlePhoto" :title="copilot.name">
<template #content>
<q-card-section>
<q-spinner v-if="arePhotosLoading"/>
<PhotoGallerySkeleton 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"
v-else
:items="flights"
:total-items-count="totalItemsCount"
:is-query-running="areFlightsLoading"
:items-per-page="paginationLimit"
:public="true"
@load-more="loadNextFlightsPage(true)"
/>
</q-card-section>
</template>
</ContentCard>
</template>
src/pages/public/pilotProfile/EventDetailPage.vue
+39 -19
View File
@@ -3,33 +3,53 @@ import {useEventsStore} from "stores/Events";
export default {
preFetch({currentRoute}) {
return useEventsStore().fetchDetail(currentRoute.params.id, currentRoute.params.username);
return useEventsStore().fetchPublicDetail(currentRoute.params.id, currentRoute.params.username);
}
}
</script>
<script setup>
import {watch} from "vue";
import {useRoute} from "vue-router";
import {useAppStore} from "stores/App";
import EventDetailSkeleton from "components/event/skeletons/EventDetailSkeleton.vue";
import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
import FlightsList from "components/flights/FlightsList.vue";
import {storeToRefs} from "pinia";
import {loadPage, paginationLimit} from "src/composables/pagination";
import {useFlightsStore} from "stores/Flights";
import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
import {useMeta} from "quasar";
import {metaData} from "src/composables/meta";
const routeParams = useRoute().params;
const props = defineProps({
pilot: {
type: Object,
required: false
},
})
const {isQueryRunning, event} = storeToRefs(useEventsStore());
watch(() => event.value, (newVal) => {
useAppStore().setPageTitle(newVal.name);
useAppStore().setBreadcrumbs([
{to: {name: 'homepage'}, label: "Polétání.cz"},
{to: {name: "publicProfileDetail", params: {username: routeParams.username}}, label: `@${routeParams.username}`},
{to: {name: "publicEventsList", params: {username: routeParams.username}}, label: "Události"},
{label: newVal.name}
]);
useAppStore().setPageTitle(event.value.name);
useAppStore().setBreadcrumbs([
{to: {name: 'homepage'}, label: "Polétání.cz"},
{to: {name: "publicProfileDetail", params: {username: props.pilot.publicUsername}}, label: `@${props.pilot.publicUsername}`},
{to: {name: "publicEventsList", params: {username: props.pilot.publicUsername}}, label: "Události"},
{label: event.value.name}
]);
useMeta(() => metaData({
title: event.value.name,
description: event.value.description
}))
const loadNextFlightsPage = (appendItems) => loadPage({
fetchFunc: useFlightsStore().fetchPublic,
filters: {username: props.pilot.publicUsername},
appendItems
});
loadNextFlightsPage(false);
const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
</script>
<template>
@@ -37,11 +57,6 @@ watch(() => event.value, (newVal) => {
<EventDetailSkeleton v-if="isQueryRunning || !event"/>
<template v-else>
<q-banner class="bg-warning text-white q-mx-md q-my-md" v-if="!event.isPublic">
Pozor! Tento event není publikován a nebude tak dostupný pro ostatní!
</q-banner>
<q-list bordered separator class="q-my-lg" v-if="event.dateFrom && event.dateTo">
<q-item>
<q-item-section>
@@ -63,11 +78,16 @@ watch(() => event.value, (newVal) => {
Zatím tu nemáš uložené žádné lety.
</q-banner>
<FlightsListSkeleton :items="paginationLimit" v-if="areFlightsLoading && flights?.length === 0"/>
<FlightsList
v-else
:items="event.flights"
:items="flights"
:total-items-count="totalItemsCount"
:is-query-running="areFlightsLoading"
:items-per-page="paginationLimit"
:public="true"
class="q-my-lg"
@load-more="loadNextFlightsPage(true)"
/>
</template>
src/pages/public/pilotProfile/EventsListPage.vue
+9 -9
View File
@@ -17,7 +17,7 @@ const props = defineProps({
useMeta(() => metaData({
title: `${props.pilot.publicUsername} - Události`,
keywords: [...commonKeywords, "pilot"],
keywords: [...commonKeywords, "události", "letecký den",],
description: "Detail pilota na poletani.cz",
}));
@@ -28,24 +28,24 @@ useAppStore().setBreadcrumbs([
{label: "Události"}
]);
useEventsStore().fetch(props.pilot.publicUsername);
useEventsStore().fetchPublic(props.pilot.publicUsername);
const {isQueryRunning, events} = storeToRefs(useEventsStore());
</script>
<template>
<PublicFlightEventSwitcher :username="pilot.publicUsername"/>
<FlightsListSkeleton v-if="isQueryRunning"/>
<div class="q-mb-md">
<FlightsListSkeleton v-if="isQueryRunning"/>
<q-banner class="bg-primary text-white" v-else-if="!isQueryRunning && events.length === 0">
Tento pilot zatím nepublikoval žádnou udalost.
</q-banner>
<q-banner class="bg-primary text-white" v-else-if="!isQueryRunning && events.length === 0">
Tento pilot zatím nepublikoval žádnou udalost.
</q-banner>
<template v-else>
<EventsList
:items="events"
:route-detail="{name: 'publicEventDetail', params: {username: pilot.publicUsername}}"
class="q-mb-md"
v-else
/>
</template>
</div>
</template>
src/pages/public/pilotProfile/FlightDetailPage.vue
+11 -8
View File
@@ -15,16 +15,19 @@ import FlightDetailSkeleton from "components/flights/skeletons/FlightDetailSkele
import PhotoGallery from "components/photos/PhotoGallery.vue";
import {storeToRefs} from "pinia";
import {flightName} from "src/composables/flight";
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";
const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
const routeParams = useRoute().params;
const pilot = storeToRefs(useUserStore()).publicUser;
const props = defineProps({
pilot: {
type: Object,
required: true
}
});
usePhotosStore().fetchPublic({flightId: flight.value.id});
const {isQueryRunning: arePhotosLoading, photos: flightPhotos} = storeToRefs(usePhotosStore());
@@ -33,13 +36,13 @@ const flightNameFormatted = flightName(flight.value);
useAppStore().setPageTitle(flightNameFormatted);
useAppStore().setBreadcrumbs([
{to: {name: 'homepage'}, label: "Polétání.cz"},
{to: {name: "publicProfileDetail", params: {username: routeParams.username}}, label: `@${routeParams.username}`},
{to: {name: "publicProfileDetail", params: {username: props.pilot.publicUsername}}, label: `@${props.pilot.publicUsername}`},
{label: flightNameFormatted}
]);
useMeta(() => metaData({
title: `${flightNameFormatted} - ${pilot.value.name}`,
keywords: ["let", "výlet", "letadlo", pilot.value.name, flight.value.aircraft.callSign],
title: `${flightNameFormatted} - ${props.pilot.name}`,
keywords: ["let", "výlet", "letadlo", props.pilot.name, flight.value.aircraft.callSign],
description: flight.description,
image: flight.titlePhoto?.url
}
@@ -57,7 +60,7 @@ useMeta(() => metaData({
: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}}"
:copilot-detail-route="{name: 'publicCopilotDetail', params: {username: pilot.publicUsername}}"
/>
<article class="q-my-lg" v-html="flight.description"/>
src/pages/public/pilotProfile/FlightsListPage.vue
+18 -10
View File
@@ -7,12 +7,12 @@ import {useFlightsStore} from "stores/Flights";
import {storeToRefs} from "pinia";
import {commonKeywords, metaData} from "src/composables/meta";
import {useMeta} from "quasar";
import {useUserStore} from "stores/User";
import {loadPage, paginationLimit} from "src/composables/pagination";
const props = defineProps({
pilot: {
type: Object,
required: true,
required: true
}
});
@@ -29,24 +29,32 @@ useAppStore().setBreadcrumbs([
{label: `@${props.pilot.publicUsername}`},
])
useFlightsStore().fetchPublic({username: props.pilot.publicUsername});
const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
const loggedUser = storeToRefs(useUserStore()).user;
const loadNextFlightsPage = (appendItems) => loadPage({
fetchFunc: useFlightsStore().fetchPublic,
filters: {username: props.pilot.publicUsername},
appendItems
});
loadNextFlightsPage(false);
const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
</script>
<template>
<PublicFlightEventSwitcher :username="pilot?.publicUsername"/>
<FlightsListSkeleton v-if="areFlightsLoading && flights?.length === 0"/>
<FlightsListSkeleton :items="paginationLimit" 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.
</q-banner>
<FlightsList
v-else
:items="flights"
:public="true"
class="q-mb-md"
v-else
:items="flights"
:total-items-count="totalItemsCount"
:is-query-running="areFlightsLoading"
:items-per-page="paginationLimit"
:public="true"
@load-more="loadNextFlightsPage(true)"
/>
</template>
src/pages/public/PointOfInterestDetailPage.vue → src/pages/public/poi/PointOfInterestDetailPage.vue
+25 -9
View File
@@ -23,10 +23,11 @@ import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleto
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import {onMounted} from "vue";
import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
import {loadPage, paginationLimit} from "src/composables/pagination";
const {pointOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
useAppStore().setPageTitle(pointOfInterest.value.name);
useMeta(() => metaData({
@@ -40,9 +41,16 @@ useAppStore().setBreadcrumbs([
{label: pointOfInterest.value.name}
]);
const loadNextFlightsPage = (appendItems) => loadPage({
fetchFunc: useFlightsStore().fetchPublic,
filters: {pointOfInterestId: pointOfInterest.value.id},
appendItems
});
onMounted(() => {
usePhotosStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
useFlightsStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
loadNextFlightsPage(false);
});
</script>
@@ -55,14 +63,14 @@ onMounted(() => {
<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"
v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
:gps-latitude="pointOfInterest.gpsLatitude"
:gps-longitude="pointOfInterest.gpsLongitude"
:zoom="13"
/>
<PhotoGallerySkeleton v-if="arePhotosLoading && !pointOfInterest" />
<PhotoGallery :photos="photos" class="q-my-lg" v-else />
<PhotoGallerySkeleton v-if="arePhotosLoading && !pointOfInterest"/>
<PhotoGallery :photos="photos" class="q-my-lg" v-else/>
<h3>Lety na místo {{ pointOfInterest.name }}</h3>
@@ -70,7 +78,15 @@ onMounted(() => {
<BasicInfoBanner v-else-if="!areFlightsLoading && flights.length === 0">
Zdá se, že na toto místo ještě nikdo neletěl. Zatím tu nejsou ještě žádné lety.
</BasicInfoBanner>
<FlightsList v-else :items="flights" :public="true"/>
<FlightsList
v-else
:items="flights"
:total-items-count="totalItemsCount"
:is-query-running="areFlightsLoading"
:items-per-page="paginationLimit"
:public="true"
@load-more="loadNextFlightsPage(true)"
/>
</q-card-section>
</template>
</ContentCard>
src/pages/public/poi/PointsOfInterestPage.vue
+41
View File
@@ -0,0 +1,41 @@
<script setup>
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
import {storeToRefs} from "pinia";
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
import POIList from "components/poi/POIList.vue";
import {useAppStore} from "stores/App";
import {useMeta} from "quasar";
import {metaData} from "src/composables/meta";
import {loadPage, paginationLimit} from "src/composables/pagination";
useAppStore().setPageTitle("Místa");
useAppStore().setBreadcrumbs([
{to: {name: 'homepage'}, label: "Polétání.cz"},
{label: "Místa"},
]);
useMeta(() => metaData({
title: "Místa"
}))
const loadNextPage = (appendItems) => loadPage({
fetchFunc: usePointsOfInterestStore().fetchPublic,
appendItems
});
loadNextPage(false);
const {pointsOfInterest, totalItemsCount, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
</script>
<template>
<BasicListSkeleton :items="paginationLimit" v-if="isQueryRunning && !pointsOfInterest.length"/>
<POIList
v-else
:public="true"
:items="pointsOfInterest"
:total-items-count="totalItemsCount"
:is-query-running="isQueryRunning"
:items-per-page="paginationLimit"
@load-more="loadNextPage(true)"
/>
</template>
src/pages/public/LoginPage.vue → src/pages/public/user/LoginPage.vue
+9 -7
View File
@@ -1,18 +1,16 @@
<script setup>
import {ref} from "vue";
import {useUserStore} from "stores/User";
import {reactive} from "vue";
import {useRouter} from "vue-router";
import {isRequired, isValidEmail, minLength} from "src/composables/form/rules";
import {useQuasar} from "quasar";
import {errorObject} from "src/composables/dialog";
import {useAuthStore} from "stores/Auth";
const email = ref("");
const password = ref("");
const $router = useRouter();
const $q = useQuasar();
const logUser = () => {
useUserStore().login({email: email.value, password: password.value}).then(() => {
useAuthStore().login(formData).then(() => {
$router.push({name: "myFlights"});
}).catch((err) => {
$q.notify(errorObject("Přihlášení se nezdařilo."))
@@ -23,6 +21,10 @@ const rules = {
email: [isRequired, isValidEmail],
password: [isRequired, minLength(4)]
}
const formData = reactive({
email: "",
password: ""
})
</script>
<template>
@@ -36,12 +38,12 @@ const rules = {
</q-card-section>
<q-card-section>
<q-form class="q-px-sm q-pt-xl" @submit.prevent="logUser()">
<q-input square clearable v-model="email" :rules="rules.email" type="email" label="E-mail">
<q-input square clearable v-model="formData.email" :rules="rules.email" type="email" label="E-mail">
<template v-slot:prepend>
<q-icon name="email"/>
</template>
</q-input>
<q-input square clearable v-model="password" :rules="rules.password" type="password" label="Password">
<q-input square clearable v-model="formData.password" :rules="rules.password" type="password" label="Password">
<template v-slot:prepend>
<q-icon name="lock"/>
</template>
src/pages/public/RegisterPage.vue → src/pages/public/user/RegisterPage.vue
+10 -5
View File
@@ -1,23 +1,27 @@
<script setup>
import {reactive, ref} from "vue";
import {useUserStore} from "stores/User";
import {useRouter} from "vue-router";
import {useQuasar} from "quasar";
import {useMeta, useQuasar} from "quasar";
import {errorObject, successObject} from "src/composables/dialog";
import {useAppStore} from "stores/App";
import {isRequired, isValidEmail, minLength} from "src/composables/form/rules";
import {api} from "boot/axios";
import {useAuthStore} from "stores/Auth";
import {metaData} from "src/composables/meta";
const router = useRouter();
const $q = useQuasar();
const form = ref(null);
useAppStore().setPageTitle("Registrace");
useMeta(() => metaData({
title: "Registrace",
}));
const registerUser = () => {
if (!form.value.validate()) return;
useUserStore().register(formData).then(() => {
useUserStore().login({email: formData.email, password: formData.password}).then(() => {
return api.post('/registration', formData).then(response => {
useAuthStore().login({email: formData.email, password: formData.password}).then(() => {
$q.notify(successObject("Registrace úspěšná, vítej!"));
router.push({name: "myFlights"});
})
@@ -31,6 +35,7 @@ const registerUser = () => {
})
}
const form = ref(null);
const formData = reactive({
name: "",
email: "",
src/router/index.js
+1 -7
View File
@@ -1,15 +1,9 @@
import {route} from 'quasar/wrappers'
import {createRouter, createMemoryHistory, createWebHistory, createWebHashHistory} from 'vue-router'
import {createRouter, createMemoryHistory, createWebHistory} from 'vue-router'
import routes from './routes'
import {useAppStore} from "stores/App";
export default route(function ({ store }) {
// const createHistory = process.env.SERVER
// ? createMemoryHistory
// : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)
console.log(process.env.SERVER);
const createHistory = process.env.SERVER ? createMemoryHistory : createWebHistory;
const Router = createRouter({
src/router/routes.js
+12 -8
View File
@@ -1,9 +1,9 @@
import PlainLayout from "layouts/PlainLayout.vue";
const routes = [
{path: '/login', name: "login", component: () => import('pages/public/LoginPage.vue'), meta: {layout: PlainLayout}},
{path: '/registrace', name: "registration", component: () => import('pages/public/RegisterPage.vue'), meta: {layout: PlainLayout}},
{path: '/zapomenute-heslo', name: "forgottenPassword", component: () => import('pages/public/RegisterPage.vue'), meta: {layout: PlainLayout}},
{path: '/login', name: "login", component: () => import('pages/public/user/LoginPage.vue'), meta: {layout: PlainLayout}},
{path: '/registrace', name: "registration", component: () => import('pages/public/user/RegisterPage.vue'), meta: {layout: PlainLayout}},
{path: '/zapomenute-heslo', name: "forgottenPassword", component: () => import('pages/public/user/RegisterPage.vue'), meta: {layout: PlainLayout}},
{path: '', name: "homepage", component: () => import('pages/public/IndexPage.vue'), meta: {layout: PlainLayout}},
@@ -11,10 +11,11 @@ const routes = [
path: '/',
component: () => import('layouts/PublicLayout.vue'),
children: [
{path: 'about', name: "about", component: () => import('pages/public/AboutPage.vue')},
{path: 'o-projektu', name: "about", component: () => import('pages/public/AboutPage.vue')},
{path: 'kontakt', name: "contact", component: () => import('pages/public/ContactPage.vue')},
{
path: ':username',
component: () => import('pages/public/PilotProfilePage.vue'),
component: () => import('pages/public/PilotProfileWrapper.vue'),
children: [
{path: '', name: "publicProfileDetail", component: () => import('pages/public/pilotProfile/FlightsListPage.vue')},
{path: ':id', name: "publicFlightDetail", component: () => import('pages/public/pilotProfile/FlightDetailPage.vue')},
@@ -23,9 +24,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/PointsOfInterestPage.vue')},
{path: 'mista/:id', name: "publicPOIDetail", component: () => import('pages/public/PointOfInterestDetailPage.vue')},
{path: 'letadlo/:id', name: "publicAircraftDetail", component: () => import('pages/public/aircraft/AircraftDetailPage.vue')},
{path: 'mista', name: "publicPOIs", component: () => import('pages/public/poi/PointsOfInterestPage.vue')},
{path: 'mista/:id', name: "publicPOIDetail", component: () => import('pages/public/poi/PointOfInterestDetailPage.vue')},
]
},
@@ -65,8 +66,11 @@ const routes = [
{path: 'organizace/nova', name: "addOrganization", component: () => import('pages/profile/organization/NewOrganizationPage.vue')},
{path: 'organizace/:id', name: "organizationDetail", component: () => import('pages/profile/organization/OrganizationDetailPage.vue')},
{path: 'organizace/:id/edit', name: "organizationEdit", component: () => import('pages/profile/organization/EditOrganizationPage.vue')},
]
},
{path: '/refresh', name: "profileRefresh", component: () => import('pages/profile/ProfileRefreshPage.vue')},
// Always leave this as last one,
src/stores/Aircrafts.js
+53 -53
View File
@@ -1,67 +1,67 @@
import {defineStore} from "pinia";
import {ref} from "vue";
import {AIRCRAFT_DETAIL, AIRCRAFT_PUBLIC_DETAIL, AIRCRAFTS_LIST} from "src/graphql/queries/aircrafts";
import {deleteFromItems, mutate, query, updateInItems} from "stores/helpers";
import {deleteFromItems, mutate, query, setItems, updateInItems} from "stores/helpers";
import {CREATE_AIRCRAFT, EDIT_AIRCRAFT, DELETE_AIRCRAFT} from "src/graphql/mutations/aircrafts";
export const useAircraftsStore = defineStore('Aircrafts', () => {
const aircraft = ref(null);
const aircrafts = ref([]);
const isMutationRunning = ref(false);
const isQueryRunning = ref(false);
const aircraft = ref(null);
const aircrafts = ref([]);
const totalItemsCount = ref(0);
const isMutationRunning = ref(false);
const isQueryRunning = ref(false);
const fetchDetail = (id) => query({
isQueryRunning,
query: AIRCRAFT_DETAIL,
variables: {id},
}).then(item => {
aircraft.value = item;
return item
});
const fetchDetail = (id) => query({
isQueryRunning,
query: AIRCRAFT_DETAIL,
variables: {id},
}).then(item => {
aircraft.value = item;
return item
});
const fetchPublicDetail = (id) => query({
isQueryRunning,
query: AIRCRAFT_PUBLIC_DETAIL,
variables: {id},
}).then(item => {
aircraft.value = item;
return item;
});
const fetchPublicDetail = (id) => query({
isQueryRunning,
query: AIRCRAFT_PUBLIC_DETAIL,
variables: {id},
}).then(item => {
aircraft.value = item;
return item;
});
const fetch = () => query({
isQueryRunning,
query: AIRCRAFTS_LIST
}).then(items => {
aircrafts.value = items;
return items;
});
const fetch = ({appendItems, limit = 100, offset = 0}) => query({
isQueryRunning,
query: AIRCRAFTS_LIST,
variables: {limit, offset}
}).then(data => setItems(data, appendItems, aircrafts, totalItemsCount));
const create = (input) => mutate({
isMutationRunning,
mutation: CREATE_AIRCRAFT,
variables: {input}
}).then(item => {
aircrafts.value.push(item);
return item;
})
const create = (input) => mutate({
isMutationRunning,
mutation: CREATE_AIRCRAFT,
variables: {input}
}).then(item => {
aircrafts.value.push(item);
return item;
})
const update = (id, input) => mutate({
isMutationRunning,
mutation: EDIT_AIRCRAFT,
variables: {id, input}
}).then(item => {
updateInItems(aircrafts.value, 'id', item);
aircraft.value = item;
return item;
})
const update = (id, input) => mutate({
isMutationRunning,
mutation: EDIT_AIRCRAFT,
variables: {id, input}
}).then(item => {
updateInItems(aircrafts.value, 'id', item);
aircraft.value = item;
return item;
})
const destroy = (id) => mutate({
isMutationRunning,
mutation: DELETE_AIRCRAFT,
variables: {id}
}).then(item => deleteFromItems(aircrafts.value, 'id', item))
const destroy = (id) => mutate({
isMutationRunning,
mutation: DELETE_AIRCRAFT,
variables: {id}
}).then(item => deleteFromItems(aircrafts.value, 'id', item))
return {
aircrafts, aircraft, isQueryRunning, isMutationRunning, fetchDetail, fetch, create, update, destroy, fetchPublicDetail
}
return {
aircrafts, aircraft, isQueryRunning, isMutationRunning, fetchDetail, fetch, create, update, destroy, fetchPublicDetail,
totalItemsCount
}
});
src/stores/App.js
+3
View File
@@ -1,5 +1,6 @@
import {defineStore} from 'pinia'
import {ref} from "vue";
import {paginationOffset} from "src/composables/pagination";
export const useAppStore = defineStore('App', () => {
const pageTitle = ref(null);
@@ -10,6 +11,8 @@ export const useAppStore = defineStore('App', () => {
pageTitle.value = null;
appStatus.value = 200;
breadcrumbs.value = null;
paginationOffset.value = 0;
};
const setPageTitle = (value) => {
src/stores/Auth.js
+51
View File
@@ -0,0 +1,51 @@
import {defineStore} from 'pinia'
import {api} from "boot/axios";
import {ref} from "vue";
import {cookies} from "boot/cookies";
import {useLoggedUserStore} from "stores/LoggedUser";
export const useAuthStore = defineStore('Auth', () => {
const isRefreshing = ref(false);
const login = async (formData) => {
return api.post("/login", formData).then(({data}) => {
setTokens(data);
useLoggedUserStore().user.value = data.user;
})
};
const logout = () => {
return api.post("/logout").then(response => {
unsetTokens();
useLoggedUserStore().user.value = data.user;
});
};
const unsetTokens = () => {
cookies.remove("accessToken")
};
const setTokens = ({access_token, access_token_validity}) => {
cookies.set("accessToken", access_token, {expires: `${access_token_validity}s`})
};
const getAccessToken = () => {
return cookies.get("accessToken");
};
const hasAccessToken = () => !!getAccessToken();
const refreshAccessToken = async () => api.post("/refresh")
.then(({data}) => {
setTokens(data);
return data.access_token;
}).catch((e) => {
console.log("cannot refresh token", e);
return Promise.reject(e);
})
return {
login, logout, getAccessToken, hasAccessToken, refreshAccessToken,
isRefreshing
}
});
src/stores/Events.js
+25 -7
View File
@@ -1,29 +1,46 @@
import {defineStore} from 'pinia'
import {CREATE_EVENT, EDIT_EVENT} from "src/graphql/mutations/event";
import {mutate, query, updateInItems} from "stores/helpers";
import {mutate, query, setItems, updateInItems} from "stores/helpers";
import {ref} from "vue";
import {EVENT_DETAIL, EVENTS_LIST} from "src/graphql/queries/event";
import {EVENT_DETAIL, EVENT_PUBLIC_DETAIL, EVENTS_LIST, EVENTS_PUBLIC_LIST} from "src/graphql/queries/event";
export const useEventsStore = defineStore('Events', () => {
const event = ref(null);
const events = ref([]);
const totalItemsCount = ref(0);
const isMutationRunning = ref(false);
const isQueryRunning = ref(false);
const fetchDetail = (id, username) => {
const fetchDetail = (id) => {
return query({
isQueryRunning,
query: EVENT_DETAIL,
variables: {id},
}).then(item => event.value = item);
};
const fetchPublicDetail = (id, username) => {
return query({
isQueryRunning,
query: EVENT_PUBLIC_DETAIL,
variables: {id, username},
}).then(item => event.value = item);
};
const fetch = (username = undefined) => {
const fetch = ({limit = 100, offset, appendItems}) => {
return query({
isQueryRunning,
query: EVENTS_LIST,
variables: {username}
}).then(items => events.value = items);
variables: {limit, offset}
}).then(data => setItems(data, appendItems, events, totalItemsCount));
}
const fetchPublic = (username, limit = 100, offset, appendItems) => {
return query({
isQueryRunning,
query: EVENTS_PUBLIC_LIST,
variables: {username, limit, offset}
}).then(data => setItems(data, appendItems, events, totalItemsCount));
}
const create = (input) => {
@@ -43,6 +60,7 @@ export const useEventsStore = defineStore('Events', () => {
}
return {
event, events, isMutationRunning, isQueryRunning, fetch, fetchDetail, create, update
event, events, isMutationRunning, isQueryRunning, fetch, fetchDetail, create, update,
fetchPublic, fetchPublicDetail, totalItemsCount
}
})
src/stores/Flights.js
+79 -70
View File
@@ -1,81 +1,90 @@
import {defineStore} from 'pinia'
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 {deleteFromItems, mutate, query, updateInItems, setItems} from "stores/helpers";
import {ref} from "vue";
export const useFlightsStore = defineStore('Flights', () => {
const flight = ref(null);
const flights = ref([]);
const isMutationRunning = ref(false);
const isQueryRunning = ref(false);
const flight = ref(null);
const flights = ref([]);
const totalItemsCount = ref(0);
const isMutationRunning = ref(false);
const isQueryRunning = ref(false);
const fetchDetail = (id, username) => query({
isQueryRunning,
query: FLIGHT_DETAIL,
variables: {username, id},
}).then(item => {
flight.value = item;
return item;
});
const fetchDetail = (id) => query({
isQueryRunning,
query: FLIGHT_DETAIL,
variables: {id},
}).then(item => {
flight.value = item;
return item;
});
const fetchPublicDetail = (id, username) => query({
isQueryRunning,
query: FLIGHT_PUBLIC_DETAIL,
variables: {username, id}
}).then(item => {
flight.value = item;
return item;
});
const fetchPublicDetail = (id, username) => query({
isQueryRunning,
query: FLIGHT_PUBLIC_DETAIL,
variables: {username, id}
}).then(item => {
flight.value = item;
return item;
});
const fetch = ({aircraftId, copilotId, pointOfInterestId}) => query({
isQueryRunning,
query: FLIGHTS_LIST,
variables: {aircraftId, copilotId, pointOfInterestId}
}).then(items => {
flights.value = items;
return items;
});
const fetchPublic = ({username, aircraftId, copilotId, pointOfInterestId}) => query({
isQueryRunning,
query: FLIGHTS_PUBLIC_LIST,
variables: {username, aircraftId, copilotId, pointOfInterestId}
}).then(items => {
flights.value = items;
return items;
});
const create = (input) => mutate({
isMutationRunning,
mutation: CREATE_FLIGHT,
variables: {input},
}).then(item => {
flights.value.push(item);
return item;
})
const update = (id, input) => mutate({
isMutationRunning,
mutation: EDIT_FLIGHT,
variables: {id, input}
}).then(item => {
updateInItems(flights.value, 'id', item);
flight.value = item;
return item;
})
const destroy = (id) => mutate({
isMutationRunning,
mutation: DELETE_FLIGHT,
variables: {id}
}).then(item => {
deleteFromItems(flights.value, 'id', item);
return item;
})
return {
flight, flights, isMutationRunning, isQueryRunning, fetchDetail, fetchPublicDetail, fetch, create, update, destroy,
fetchPublic
const fetch = (
{
aircraftId,
copilotId,
pointOfInterestId,
offset,
limit,
appendItems
}) => query({
isQueryRunning,
query: FLIGHTS_LIST,
variables: {
aircraftId,
copilotId,
pointOfInterestId,
offset,
limit
}
}).then(data => setItems(data, appendItems, flights, totalItemsCount));
const fetchPublic = ({username, aircraftId, copilotId, pointOfInterestId, offset, limit, appendItems}) => query({
isQueryRunning,
query: FLIGHTS_PUBLIC_LIST,
variables: {username, aircraftId, copilotId, pointOfInterestId, offset, limit}
}).then(items => setItems(items, appendItems, flights, totalItemsCount));
const create = (input) => mutate({
isMutationRunning,
mutation: CREATE_FLIGHT,
variables: {input},
}).then(item => {
flights.value.push(item);
return item;
})
const update = (id, input) => mutate({
isMutationRunning,
mutation: EDIT_FLIGHT,
variables: {id, input}
}).then(item => {
updateInItems(flights.value, 'id', item);
flight.value = item;
return item;
})
const destroy = (id) => mutate({
isMutationRunning,
mutation: DELETE_FLIGHT,
variables: {id}
}).then(item => {
deleteFromItems(flights.value, 'id', item);
return item;
})
return {
flight, flights, isMutationRunning, isQueryRunning, fetchDetail, fetchPublicDetail, fetch, create, update, destroy,
fetchPublic, totalItemsCount
}
});
src/stores/LoggedUser.js
+34
View File
@@ -0,0 +1,34 @@
import {defineStore} from 'pinia'
import {api} from "boot/axios";
import {EDIT_USER} from "src/graphql/mutations/user";
import {LOGGED_USER_DETAIL, USER_DETAIL} from "src/graphql/queries/user";
import {ref} from "vue";
import {mutate, query} from "stores/helpers";
import {cookies} from "boot/cookies";
export const useLoggedUserStore = defineStore('LoggedUser', () => {
const user = ref(null);
const isQueryRunning = ref(false);
const isMutationRunning = ref(false);
const fetchLoggedUserDetail = ({refresh}) => query({
isQueryRunning,
query: LOGGED_USER_DETAIL,
refreshUnauthorized: refresh || false,
}).then(item => {
user.value = item;
return item;
});
const update = (input) => mutate({
isMutationRunning,
mutation: EDIT_USER,
variables: {input}
}).then(item => {
user.value = item;
return item;
});
return {isQueryRunning, isMutationRunning, user, fetchLoggedUserDetail, update}
});
src/stores/Organizations.js
+4 -5
View File
@@ -1,10 +1,9 @@
import {defineStore} from 'pinia'
import {apolloWrapper} from "boot/apollo";
import {ADD_USER_TO_ORGANIZATION, CREATE_ORGANIZATION, EDIT_ORGANIZATION, REMOVE_USER_FROM_ORGANIZATION} from "src/graphql/mutations/organization";
import {ORGANIZATION_DETAIL, ORGANIZATIONS_LIST} from "src/graphql/queries/organization";
import {mutate, query, updateInItems} from "stores/helpers";
import {ref} from "vue";
import {useUserStore} from "stores/User";
import {useLoggedUserStore} from "stores/LoggedUser";
export const useOrganizationsStore = defineStore('Organizations', () => {
@@ -44,7 +43,7 @@ export const useOrganizationsStore = defineStore('Organizations', () => {
mutation: ADD_USER_TO_ORGANIZATION,
variables: {organizationId}
}).then(item => {
useUserStore().user.organizations.push(item);
useLoggedUserStore().user.organizations.push(item);
organization.value.users = item.users;
return item;
});
@@ -54,8 +53,8 @@ export const useOrganizationsStore = defineStore('Organizations', () => {
mutation: REMOVE_USER_FROM_ORGANIZATION,
variables: {organizationId},
}).then(item => {
const idx = useUserStore().user.organizations.findIndex(o => o.id === organizationId);
useUserStore().user.organizations.splice(idx, 1);
const idx = useLoggedUserStore().user.organizations.findIndex(o => o.id === organizationId);
useLoggedUserStore().user.organizations.splice(idx, 1);
organization.value.users = item.users;
return item;
});
src/stores/Pilots.js
+25
View File
@@ -0,0 +1,25 @@
import {defineStore} from 'pinia'
import {api} from "boot/axios";
import {EDIT_USER} from "src/graphql/mutations/user";
import {LOGGED_USER_DETAIL, USER_DETAIL} from "src/graphql/queries/user";
import {ref} from "vue";
import {mutate, query} from "stores/helpers";
import {cookies} from "boot/cookies";
export const usePilotsStore = defineStore('Pilots', () => {
const pilot = ref(null);
const isQueryRunning = ref(false);
const fetchPublicPilotDetail = (username) => query({
isQueryRunning,
query: USER_DETAIL,
variables: {username}
}).then(item => {
pilot.value = item;
return item;
});
return {
isQueryRunning, pilot, fetchPublicPilotDetail
}
});
src/stores/PointsOfInterest.js
+53 -56
View File
@@ -1,71 +1,68 @@
import {defineStore} from 'pinia'
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 {mutate, query, setItems, 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 totalItemsCount = ref(0);
const isMutationRunning = ref(false);
const isQueryRunning = ref(false);
const fetchDetail = (id) => query({
isQueryRunning,
query: POI_DETAIL,
variables: {id},
}).then(item => {
pointOfInterest.value = item;
return item;
});
const fetchDetail = (id) => query({
isQueryRunning,
query: POI_DETAIL,
variables: {id},
}).then(item => {
pointOfInterest.value = item;
return item;
});
const fetchPublicDetail = (id) => query({
isQueryRunning,
query: POI_PUBLIC_DETAIL,
variables: {id},
}).then(item => {
pointOfInterest.value = item;
return item;
});
const fetchPublicDetail = (id) => query({
isQueryRunning,
query: POI_PUBLIC_DETAIL,
variables: {id},
}).then(item => {
pointOfInterest.value = item;
return item;
});
const fetch = () => query({
isQueryRunning,
query: POI_LIST,
}).then(items => {
pointsOfInterest.value = items;
return items;
});
const fetch = ({limit = 100, offset = 0, appendItems}) => query({
isQueryRunning,
query: POI_LIST,
variables: {limit, offset}
}).then(data => setItems(data, appendItems, pointsOfInterest, totalItemsCount));
const fetchPublic = () => query({
isQueryRunning,
query: POI_PUBLIC_LIST,
}).then(items => {
pointsOfInterest.value = items;
return items;
});
const fetchPublic = ({limit, offset, appendItems}) => query({
isQueryRunning,
query: POI_PUBLIC_LIST,
variables: {limit, offset}
}).then(data => setItems(data, appendItems, pointsOfInterest, totalItemsCount));
const create = (input) => mutate({
isMutationRunning,
mutation: CREATE_POI,
variables: {input},
}).then(item => {
pointsOfInterest.value.push(item);
return item;
})
const create = (input) => mutate({
isMutationRunning,
mutation: CREATE_POI,
variables: {input},
}).then(item => {
pointsOfInterest.value.push(item);
return item;
})
const update = (id, input) => mutate({
isMutationRunning,
mutation: EDIT_POI,
variables: {id, input}
}).then(item => {
updateInItems(pointsOfInterest.value, 'id', item);
pointOfInterest.value = item;
return item;
})
const update = (id, input) => mutate({
isMutationRunning,
mutation: EDIT_POI,
variables: {id, input}
}).then(item => {
updateInItems(pointsOfInterest.value, 'id', item);
pointOfInterest.value = item;
return item;
})
return {
pointOfInterest, pointsOfInterest, isMutationRunning, isQueryRunning, fetch, fetchPublic, fetchDetail,
fetchPublicDetail, create, update
}
return {
pointOfInterest, pointsOfInterest, isMutationRunning, isQueryRunning, fetch, fetchPublic, fetchDetail,
fetchPublicDetail, create, update, totalItemsCount
}
})
src/stores/User.js
-92
View File
@@ -1,92 +0,0 @@
import {defineStore} from 'pinia'
import {api} from "boot/axios";
import {EDIT_USER} from "src/graphql/mutations/user";
import {LOGGED_USER_DETAIL, USER_DETAIL} from "src/graphql/queries/user";
import {ref} from "vue";
import {mutate, query} from "stores/helpers";
import {cookies} from "boot/cookies";
export const useUserStore = defineStore('LoggedUser', () => {
const user = ref(null);
const publicUser = ref(null);
const isQueryRunning = ref(false);
const isMutationRunning = ref(false);
const isRefreshing = ref(false);
const fetchLoggedUserDetail = ({refresh}) => query({
isQueryRunning,
query: LOGGED_USER_DETAIL,
refreshUnauthorized: refresh || false,
}).then(item => {
user.value = item;
return item;
});
const fetchPublicUserDetail = (username) => query({
isQueryRunning,
query: USER_DETAIL,
variables: {username}
}).then(item => {
publicUser.value = item;
return item;
});
const update = (input) => mutate({
isMutationRunning,
mutation: EDIT_USER,
variables: {input}
}).then(item => {
user.value = item;
return item;
});
const register = async (formData) => {
return api.post('/registration', formData).then(response => {
const registeredUser = response.data;
const isSuccess = response.status === 201
})
};
const login = async (formData) => {
return api.post("/login", formData).then(({data}) => {
setTokens(data);
user.value = data.user;
})
};
const logout = () => {
return api.post("/logout").then(response => {
unsetTokens();
user.value = null;
});
};
const unsetTokens = () => {
cookies.remove("accessToken")
};
const setTokens = ({access_token, access_token_validity}) => {
cookies.set("accessToken", access_token, {expires: `${access_token_validity}s`})
};
const getAccessToken = () => {
return cookies.get("accessToken");
};
const hasAccessToken = () => !!getAccessToken();
const refreshAccessToken = async () => api.post("/refresh")
.then(({data}) => {
setTokens(data);
console.log("token refreshed");
return data.access_token;
}).catch((e) => {
console.log("cannot refresh token", e);
})
return {
isQueryRunning, isMutationRunning, user, publicUser, fetchLoggedUserDetail, fetchPublicUserDetail, update,
register, login, logout,
getAccessToken, hasAccessToken, refreshAccessToken, isRefreshing
}
});
src/stores/helpers.js
+7
View File
@@ -1,6 +1,13 @@
import {apolloWrapper} from "boot/apollo";
import {getOperationName} from "@apollo/client/utilities";
export const setItems = (data, appendItems, itemsModel, totalItemsCount) => {
const originalData = appendItems ? [...itemsModel.value] : [];
itemsModel.value = [...originalData, ...data.items];
totalItemsCount.value = data.totalItemsCount;
return data.items;
}
export const updateInItems = (items, key, data) => {
const idx = items.findIndex(i => i[key] === data[key]);
if (idx >= 0)