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

Ne uplne otestovany prepis storu

Browse Source
This commit is contained in:
Michal Kváček
2023-11-19 00:44:01 +01:00
parent e65491e00b
commit f9d70a5d57
76 changed files with 1445 additions and 1463 deletions
Download Patch File Download Diff File Expand all files Collapse all files
quasar.config.js
+1
View File
@@ -30,6 +30,7 @@ module.exports = configure(function (ctx) {
// https://v2.quasar.dev/quasar-cli/boot-files
boot: [
"axios",
"apollo",
"chartJs",
],
src/boot/apollo.js
+96
View File
@@ -0,0 +1,96 @@
// import {boot} from "quasar/wrappers";
import {ApolloClient, ApolloLink, fromPromise, InMemoryCache} from '@apollo/client/core'
import {createUploadLink} from 'apollo-upload-client';
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";
const handleRefreshToken = (store, forward, operation) => {
return fromPromise(useUserStore(store).refreshAccessToken()
.catch((error) => {
Notify.create(warningObject("Tvoje přihlášení vypřešlo. Přihlaš se prosím znovu."));
window.location = "/login";
}))
.filter((value) => Boolean(value))
.flatMap((accessToken) => {
const oldHeaders = operation.getContext().headers;
operation.setContext({
headers: {
...oldHeaders, authorization: `Bearer ${accessToken}`,
},
});
// retry the request, returning the new observable
return forward(operation);
});
}
export const apolloWrapper = {};
export default (({store}) => {
const uploadLink = createUploadLink({
uri: process.env.API_URL + '/graphql',
})
const authLink = new ApolloLink((operation, forward) => {
const accessToken = useUserStore(store).getAccessToken();
if (accessToken) {
operation.setContext({
headers: {"Authorization": `Bearer ${accessToken}`},
});
}
return forward(operation);
});
const errorLink = onError(({graphQLErrors, networkError, operation, forward}) => {
if (networkError?.statusCode === 401) {
return handleRefreshToken(store, forward, operation);
}
if (graphQLErrors) {
for (const error of graphQLErrors) {
if (error.message === "Not found") {
useAppStore(store).appStatus = 404;
} else if (error.message.includes("401") || error.message.includes("Not authorized")) {
return handleRefreshToken(store, forward, operation);
} else {
Notify.create(errorObject("API error: " + error.message));
}
}
}
});
const apolloClient = new ApolloClient({
link: ApolloLink.from([authLink, errorLink, uploadLink]), cache: new InMemoryCache(), connectToDevTools: true,
});
// const apolloProvider = createApolloProvider({
// defaultClient: apolloClient,
// });
apolloWrapper.query = (query, variables = {}) => {
return apolloClient.query({
query: query, fetchPolicy: 'no-cache', variables: variables
})
.then((response) => response)
.catch(err => {
console.error("Error during query: ", err)
return err;
})
};
apolloWrapper.mutate = (mutation, variables) => {
return apolloClient
.mutate({
mutation: mutation, fetchPolicy: 'no-cache', variables: variables,
})
.then((response) => response)
.catch(err => {
console.error("Error during mutation: ", err);
})
};
});
src/boot/axios.js
+32 -43
View File
@@ -3,55 +3,44 @@ import axios from 'axios'
import {useUserStore} from "stores/User";
const api = axios.create({
baseURL: process.env.API_URL,
withCredentials: true,
xsrfHeaderName: "X-CSRF-TOKEN",
headers: {
Accept: "application/json",
"Content-Type": "application/json;charset=UTF-8",
},
baseURL: process.env.API_URL,
withCredentials: true,
xsrfHeaderName: "X-CSRF-TOKEN",
headers: {
Accept: "application/json",
"Content-Type": "application/json;charset=UTF-8",
},
})
api.interceptors.request.use((config) => {
const token = useUserStore().getAccessToken();
if (token) {
config.headers['Authorization'] = `Bearer ${token}`
}
export default boot(({store}) => {
api.interceptors.request.use((config) => {
const token = useUserStore(store).getAccessToken();
if (token) {
config.headers['Authorization'] = `Bearer ${token}`
}
if (['/refresh', '/login'].includes(config.url)) {
delete config.headers['Authorization'];
}
if (['/refresh', '/login'].includes(config.url)) {
delete config.headers['Authorization'];
}
return config;
})
// Response interceptor for API calls
api.interceptors.response.use((response) => {
return response
}, async function (error) {
const originalRequest = error.config;
if (error.response.status === 401 && !['/refresh', '/login'].includes(originalRequest.url)) {
const newToken = await useUserStore().refreshAccessToken().catch(err => {
console.error(err);
return Promise.reject("Logged out");
return config;
})
api.defaults.headers.common['Authorization'] = 'Bearer ' + newToken;
return api(originalRequest);
}
return Promise.reject(error);
});
export default boot(({app}) => {
// for use inside Vue files (Options API) through this.$axios and this.$api
// app.config.globalProperties.$axios = axios
// ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
// so you won't necessarily have to import axios in each vue file
app.config.globalProperties.$api = api
// ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
// so you can easily perform requests against your app's API
// Response interceptor for API calls
api.interceptors.response.use(
(response) => response,
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);
return Promise.reject("Logged out");
})
api.defaults.headers.common['Authorization'] = 'Bearer ' + newToken;
return api(originalRequest);
}
return Promise.reject(error);
});
})
export {axios, api}
src/boot/chartJs.js
+2 -2
View File
@@ -2,5 +2,5 @@ import {boot} from "quasar/wrappers";
import {BarElement, CategoryScale, Chart as ChartJS, Filler, Legend, LinearScale, LineElement, PointElement, Title, Tooltip} from "chart.js";
export default boot(({app}) => {
ChartJS.register(Title, Tooltip, Legend, PointElement, LineElement, Filler, BarElement, CategoryScale, LinearScale)
})
ChartJS.register(Title, Tooltip, Legend, PointElement, LineElement, Filler, BarElement, CategoryScale, LinearScale);
});
src/components/FormSubmitButton.vue
+43
View File
@@ -0,0 +1,43 @@
<script setup>
import {computed} from "vue";
import {useQuasar} from "quasar";
const props = defineProps({
saveButton: {
type: [Object, Boolean],
required: false,
default: () => ({
label: "Uložit",
icon: "save",
align: "left"
})
}
})
const $q = useQuasar();
const fullwidthBtn = computed(() => $q.screen.width <= $q.screen.sizes.md);
</script>
<template>
<div class="text-right">
<q-btn
color="primary"
type="submit"
size="lg"
:class="{'q-my-lg': true, 'btn--fullwidth': fullwidthBtn}"
:icon="props.saveButton.icon"
:loading="props.isRequestPending"
>
{{ props.saveButton.label }}
<template v-slot:loading>
<q-spinner/>
</template>
</q-btn>
</div>
</template>
<style>
.btn--fullwidth {
width: 100%;
}
</style>
src/components/FormWrapper.vue
+2 -28
View File
@@ -2,6 +2,7 @@
import {isRequestPending} from "src/composables/form/props";
import {computed, useSlots} from "vue";
import {useQuasar} from "quasar";
import FormSubmitButton from "components/FormSubmitButton.vue";
const props = defineProps({
modelValue: {
@@ -23,38 +24,11 @@ const emits = defineEmits(["save"]);
const saveForm = () => {
emits("save", props.modelValue);
}
const $q = useQuasar();
const fullwidthBtn = computed(() => $q.screen.width <= $q.screen.sizes.md);
</script>
<template>
<q-form @submit.prevent="saveForm" ref="form">
<slot name="default"/>
<div class="text-right">
<q-btn
color="primary"
type="submit"
size="lg"
:class="{'q-my-lg': true, 'btn--fullwidth': fullwidthBtn}"
v-if="saveButton"
:icon="props.saveButton.icon"
:loading="props.isRequestPending"
>
{{ props.saveButton.label }}
<template v-slot:loading>
<q-spinner />
</template>
</q-btn>
</div>
<FormSubmitButton v-if="saveButton" :save-button="saveButton" />
</q-form>
</template>
<style>
.btn--fullwidth {
width: 100%;
}
</style>
src/components/aircrafts/AircraftDetailCard.vue
-2
View File
@@ -1,5 +1,4 @@
<script setup>
import {aircraft} from "src/composables/objects/aircraft";
import {confirmObject} from "src/composables/dialog";
import {useQuasar} from "quasar";
import {storeToRefs} from "pinia";
@@ -17,7 +16,6 @@ const $q = useQuasar();
const loggedUser = storeToRefs(useUserStore()).user;
const confirmDelete = (aircraftId) => {
$q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
.onOk(() => {
src/components/banners/AccessDeniedBanner.vue
-2
View File
@@ -1,6 +1,4 @@
<script setup>
import {poi} from "src/composables/objects/poi";
const props = defineProps({
routeBack: {
type: Object,
src/components/basicSkeletons/BasicListSkeleton.vue
+6 -1
View File
@@ -1,5 +1,6 @@
<script setup>
import {randomInt} from "src/composables/random";
import {computed} from "vue";
const props = defineProps({
itemsCountMin: {
@@ -11,14 +12,18 @@ const props = defineProps({
type: Number,
required:false,
default: 5
},
items: {
type: Number, required: false,
}
})
const renderedItems = computed(() => props.items || randomInt(props.itemsCountMin, props.itemsCountMax));
</script>
<template>
<q-list bordered separator>
<q-item v-ripple v-for="i in randomInt(itemsCountMin, itemsCountMax)" :key="i">
<q-item v-ripple v-for="i in renderedItems" :key="i">
<q-item-section avatar>
<q-skeleton type="QAvatar" />
</q-item-section>
src/components/event/EventsList.vue
+2 -2
View File
@@ -19,14 +19,14 @@ const getCoverPhotos = (item) => item.flights.filter(f => !!f.coverPhoto).map(f
<template>
<q-list bordered separator>
<q-item
v-for="event of items" :key="event"
clickable
:to="{name: routeDetail.name, params: {...routeDetail.params, id: event.id}}"
v-ripple
v-for="event of items" :key="event"
>
<q-item-section>
<q-item-label>
<q-avatar icon="event" color="primary" text-color="white" v-if="event.flights.length === 0"/>
<q-avatar icon="event" color="primary" text-color="white" v-if="!event.flights || event.flights.length === 0"/>
<AvatarsGroup :avatars="getCoverPhotos(event)" v-else/>
{{ event.name }}
src/components/flights/FlightBasicInfo.vue
-1
View File
@@ -1,5 +1,4 @@
<script setup>
import {flight} from "src/composables/objects/flight";
import {FORMAT_DATE, FORMAT_TIME, formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
import WeatherInfo from "components/weather/WeatherInfo.vue";
src/components/flights/FlightDetailSkeleton.vue
+2 -3
View File
@@ -1,5 +1,4 @@
<script setup>
import {randomInt} from "src/composables/random";
import ListItemSkeleton from "components/basicSkeletons/ListItemSkeleton.vue";
import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
</script>
@@ -16,7 +15,7 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
<q-item>
<q-list>
<ListItemSkeleton v-for="i in randomInt(1, 3)" :key="i"/>
<ListItemSkeleton v-for="i in 3" :key="i"/>
</q-list>
</q-item>
@@ -26,7 +25,7 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
</q-list>
<article class="q-my-lg">
<BasicTextSkeleton :lines="randomInt(2, 5)" :paragraphs="randomInt(1, 2)" />
<BasicTextSkeleton :lines="4" :paragraphs="2" />
</article>
<q-skeleton height="400px" square class="q-mt-lg"/>
src/components/flights/FlightTrackMap.vue
+7 -8
View File
@@ -1,7 +1,6 @@
<script setup>
import {flight} from "src/composables/objects/flight";
import MapWithMarkers from "components/map/MapWithMarkers.vue";
import {computed, ref} from "vue";
import {computed, reactive, ref} from "vue";
import {Line} from "vue-chartjs"
const props = defineProps({
@@ -12,23 +11,23 @@ const props = defineProps({
})
const mapPhotos = computed(() => flight.value.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude));
const poisWithGPS = computed(() => flight.value.track.map(poi => poi.pointOfInterest || poi.airport));
const mapPhotos = computed(() => props.flight.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude));
const poisWithGPS = computed(() => props.flight.track.map(poi => poi.pointOfInterest || poi.airport));
const mapMarkers = [flight.value.takeoffAirport].concat(poisWithGPS.value).concat([flight.value.landingAirport]);
const mapMarkers = [props.flight.takeoffAirport].concat(poisWithGPS.value).concat([props.flight.landingAirport]);
const pointsOfInterests = computed(() => mapMarkers
.filter(marker => marker.gpsLatitude && marker.gpsLongitude)
.map(
marker => ({label: marker.name, position: {lat: marker.gpsLatitude, lng: marker.gpsLongitude}})
));
const gpxTrack = flight.value.gpxTrack;
const gpxTrack = props.flight.gpxTrack ? reactive(props.flight.gpxTrack) : null;
const displayMap = computed(() => {
return (
!!gpxTrack ||
mapPhotos.value.length > 0 ||
poisWithGPS.value.length > 0 ||
flight.value.landingAirport.id !== flight.value.takeoffAirport.id
props.flight.landingAirport.id !== props.flight.takeoffAirport.id
)
});
@@ -82,7 +81,7 @@ const drawCurrentPositionMarker = (e) => {
return;
}
const idx = res[0].index;
currentPositionMarker.value = flight.value.gpxTrack.coordinates[idx];
currentPositionMarker.value = props.flight.gpxTrack.coordinates[idx];
}
const chartOptions = {
src/components/flights/form/FlightFormNotes.vue
-1
View File
@@ -5,7 +5,6 @@ import {setDefaultData} from "src/composables/form/formHandling";
import RichTextEditor from "components/inputs/RichTextEditor.vue";
import {commonProps} from "src/composables/inputs";
import ComboboxInput from "components/inputs/ComboboxInput.vue";
import {isRequestPending} from "src/composables/objects/flight";
const props = defineProps({
flight: {
src/components/poi/POIForm.vue
+1 -1
View File
@@ -24,7 +24,7 @@ const props = defineProps({
const formData = reactive({
name: null,
description: null,
description: "",
gpsLatitude: null,
gpsLongitude: null,
type: null,
src/components/profile/PilotProfileCard.vue
+7 -1
View File
@@ -1,7 +1,13 @@
<script setup>
import {user as pilot} from "src/composables/objects/user";
import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
const props = defineProps({
pilot: {
type: Object,
required: true
}
});
</script>
<template>
src/composables/objects/aircraft.js
-25
View File
@@ -1,25 +0,0 @@
import {useAircraftsStore} from "stores/Aircrafts";
import {ref} from "vue";
import {storeToRefs} from "pinia";
export const loading = ref(true);
export const aircraft = ref(null);
export const fetchAircraft = (aircraftId) => {
loading.value = true;
return useAircraftsStore().fetchDetail(aircraftId).then((data) => {
aircraft.value = data;
}).catch(err => {
console.error(err);
}).finally(() => loading.value = false);
}
export const aircrafts = storeToRefs(useAircraftsStore()).items;
export const fetchAircrafts = () => {
loading.value = true;
useAircraftsStore().fetch().finally(() => loading.value = false);
}
export const isRequestPending = storeToRefs(useAircraftsStore).isMutationRunning;
src/composables/objects/copilot.js
-23
View File
@@ -1,23 +0,0 @@
import {ref} from "vue";
import {useCopilotsStore} from "stores/Copilots";
import {storeToRefs} from "pinia";
export const loading = ref(true);
export const copilot = ref(null);
export const fetchCopilot = (copilotId, pilotUsername) => {
loading.value = true;
return useCopilotsStore().fetchDetail(parseInt(copilotId), pilotUsername)
.then(resp => {
copilot.value = resp;
return resp;
})
.finally(() => loading.value = false);
}
export const copilots = storeToRefs(useCopilotsStore()).items;
export const fetchCopilots = () => {
loading.value = true;
return useCopilotsStore().fetch().finally(() => loading.value = false);
}
export const isRequestPending = storeToRefs(useCopilotsStore()).isMutationRunning;
src/composables/objects/event.js
-37
View File
@@ -1,37 +0,0 @@
import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
import {useEventsStore} from "stores/Events";
import {ref} from "vue";
import {storeToRefs} from "pinia";
import {confirmObject} from "src/composables/dialog";
import {useAppStore} from "stores/App";
export const loading = ref(true);
export const event = ref(null);
export const fetchEvent = (eventId, username) => {
loading.value = true;
return useEventsStore().fetchDetail(parseInt(eventId), username)
.then(respEvent => {
event.value = respEvent;
return respEvent;
})
.finally(() => loading.value = false);
};
export const events = storeToRefs(useEventsStore()).items;
export const fetchEvents = (username) => {
loading.value = true;
useEventsStore().fetch(username).finally(() => {
loading.value = false;
});
};
export const handleDeleteEvent = ($q, eventId, onOkCallback = () => {
}) => {
$q.dialog(confirmObject(`Opravdu chceš smazat tento let?`))
.onOk(() => {
useEventsStore().delete(eventId).then(onOkCallback);
});
};
export const isRequestPending = storeToRefs(useEventsStore()).isRequestPending;
src/composables/objects/flight.js
-36
View File
@@ -1,8 +1,4 @@
import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
import {useFlightsStore} from "stores/Flights";
import {ref} from "vue";
import {storeToRefs} from "pinia";
import {confirmObject} from "src/composables/dialog";
export const flightName = (flight) => {
const date = formatDatetime(flight.takeoffDatetime, FORMAT_DATE);
@@ -15,35 +11,3 @@ export const flightName = (flight) => {
return `${flight.takeoffAirport.icaoCode} ${trackStr} ${flight.landingAirport.icaoCode} (${date})`;
}
}
export const loading = ref(true);
export const flight = ref(null);
export const fetchFlight = (flightId, username) => {
loading.value = true;
return useFlightsStore().fetchDetail(parseInt(flightId), username)
.then(respFlight => {
flight.value = respFlight;
return respFlight;
})
.finally(() => loading.value = false);
};
export const flights = storeToRefs(useFlightsStore()).items;
export const fetchFlights = (username = null) => {
loading.value = true;
useFlightsStore().fetch(username).finally(() => {
loading.value = false;
});
};
export const handleDeleteFlight = ($q, flightId, onOkCallback = () => {
}) => {
$q.dialog(confirmObject(`Opravdu chceš smazat tento let?`))
.onOk(() => {
useFlightsStore().delete(flightId).then(onOkCallback);
});
};
export const isRequestPending = storeToRefs(useFlightsStore()).isRequestPending;
src/composables/objects/organization.js
-42
View File
@@ -1,42 +0,0 @@
import {computed, ref} from "vue";
import {storeToRefs} from "pinia";
import {useOrganizationsStore} from "stores/Organizations";
import {useUserStore} from "stores/User";
import {successObject} from "src/composables/dialog";
export const loading = ref(true);
export const organization = ref(null);
export const fetchOrganization = (organizationId) => {
loading.value = true;
return useOrganizationsStore().fetchDetail(parseInt(organizationId))
.then(resp => {
organization.value = resp;
return resp;
})
.finally(() => loading.value = false);
}
export const organizations = storeToRefs(useOrganizationsStore()).items;
export const fetchOrganizations = () => {
loading.value = true;
return useOrganizationsStore().fetch().finally(() => loading.value = false);
}
export const isRequestPending = storeToRefs(useOrganizationsStore()).isMutationRunning;
const loggedUser = storeToRefs(useUserStore()).user;
export const myOrganizationIds = computed(() => loggedUser.value.organizations?.map(o => o.id) || []);
export const addToOrganization = async (organizationId) => {
useOrganizationsStore().addUserToOrganization(organizationId).then((data) => {
organization.value.users = data.users;
useUserStore().fetchLoggedUserDetail();
});
};
export const removeFromOrganization = async (organizationId) => {
useOrganizationsStore().removeUserFromOrganization(organizationId).then((data) => {
organization.value.users = data.users;
useUserStore().fetchLoggedUserDetail();
});
}
src/composables/objects/poi.js
-22
View File
@@ -1,22 +0,0 @@
import {ref} from "vue";
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
import {storeToRefs} from "pinia";
export const loading = ref(true);
export const poi = ref(null);
export const fetchPoi = (poiId) => {
loading.value = true;
return usePointsOfInterestStore().fetchDetail(poiId)
.then(data => {
poi.value = data;
return data;
})
.finally(() => loading.value = false);
};
export const pointsOfInterest = storeToRefs(usePointsOfInterestStore()).items;
export const fetchPOIList = () => {
loading.value = true;
return usePointsOfInterestStore().fetch().finally(() => loading.value = false);
}
src/composables/photos/batchEdit.js
-40
View File
@@ -1,40 +0,0 @@
import {ref} from "vue";
import {usePhotosStore} from "stores/Photo";
import {fetchFlight} from "src/composables/objects/flight";
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
export const openBatchEdit = ref(false);
export const editBatchPhotos = ref([]);
export const openBatchPhotoForm = (photos) => {
openBatchEdit.value = true;
editBatchPhotos.value = photos;
}
export const handleBatchPhotoEdit = async (flightId, data) => {
const photoIds = data.photoIds;
delete data.photoIds;
delete data.id;
if (data.pointOfInterest && !data.pointOfInterest.id) {
const poiData = {
...data.pointOfInterest,
isPublic: false,
description: "",
}
await usePointsOfInterestStore().create(poiData).then(poi => data.pointOfInterest = {id: poi.id, name: poi.name});
}
const promises = [];
for (const id of photoIds) {
const updateData = {};
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(usePhotosStore().update(id, updateData));
}
Promise.all(promises).finally(() => fetchFlight(flightId))
}
src/composables/photos/editor/crop.js
+38 -35
View File
@@ -1,55 +1,58 @@
import {computed, ref, watch} from "vue";
import {cropper} from "vue-picture-cropper";
import {roundWithPrecision} from "src/composables/utils";
import {photoAspectRatio} from "src/composables/photos/editor/photo";
export const cropperImgSizes = computed(() => [cropper.getImageData().width, cropper.getImageData().height]);
export const photoAspectRatio = ref(0);
export const cropperImgSizes = computed(() => {
if (!cropper) return [];
return [cropper.getImageData().width, cropper.getImageData().height]
});
export const croppedArea = ref(null);
export const selectedAspectRatio = ref(null);
watch(() => selectedAspectRatio.value, (newVal) => {
cropper.setAspectRatio(newVal);
console.log(newVal);
cropper.setAspectRatio(newVal);
})
export const setCropData = () => {
const [w, h] = cropperImgSizes.value;
const [w, h] = cropperImgSizes.value;
console.log("crop end");
const cropData = cropper.getCropBoxData();
croppedArea.value = {
left: roundWithPrecision(cropData.left / w, 5),
top: roundWithPrecision(cropData.top / h, 5),
width: roundWithPrecision(cropData.width / w, 5),
height: roundWithPrecision(cropData.height / h, 5)
};
const cropData = cropper.getCropBoxData();
croppedArea.value = {
left: roundWithPrecision(cropData.left / w, 5),
top: roundWithPrecision(cropData.top / h, 5),
width: roundWithPrecision(cropData.width / w, 5),
height: roundWithPrecision(cropData.height / h, 5)
};
}
export const aspectRatioOptions = computed(() =>
[
{label: '16:9', value: roundWithPrecision(16 / 9, 5)},
{label: '4:3', value: roundWithPrecision(4 / 3, 5)},
{label: '9:16', value: roundWithPrecision(9 / 16, 5)},
{label: '3:4', value: roundWithPrecision(3 / 4, 5)},
{label: '1:1', value: 1},
{label: 'Volný', value: null},
{label: 'Původní', value: roundWithPrecision(photoAspectRatio.value, 5)},
]
export const aspectRatioOptions = computed(() => [
{label: '16:9', value: roundWithPrecision(16 / 9, 5)},
{label: '4:3', value: roundWithPrecision(4 / 3, 5)},
{label: '9:16', value: roundWithPrecision(9 / 16, 5)},
{label: '3:4', value: roundWithPrecision(3 / 4, 5)},
{label: '1:1', value: 1},
{label: 'Volný', value: null},
{label: 'Původní', value: roundWithPrecision(photoAspectRatio.value, 5)},
]
);
export const cropperReady = (e) => {
if (croppedArea.value) {
const [w, h] = cropperImgSizes.value;
selectedAspectRatio.value = roundWithPrecision((croppedArea.value.width * w) / (croppedArea.value.height * h), 5);
if (croppedArea.value && croppedArea.value.height) {
const [w, h] = cropperImgSizes.value;
selectedAspectRatio.value = roundWithPrecision((croppedArea.value.width * w) / (croppedArea.value.height * h), 5);
cropper.setCropBoxData({
left: croppedArea.value.left * w,
top: croppedArea.value.top * h,
width: croppedArea.value.width * w,
height: croppedArea.value.height * h
});
} else {
selectedAspectRatio.value = roundWithPrecision(photoAspectRatio.value, 5);
}
cropper.setCropBoxData({
left: croppedArea.value.left * w,
top: croppedArea.value.top * h,
width: croppedArea.value.width * w,
height: croppedArea.value.height * h
});
} else {
selectedAspectRatio.value = roundWithPrecision(photoAspectRatio.value, 5);
}
}
src/composables/photos/editor/photo.js
-16
View File
@@ -1,16 +0,0 @@
import {computed, ref} from "vue";
import {usePhotosStore} from "stores/Photo";
export const loading = ref(true);
export const photo = ref(null);
export const fetchPhoto = (id) => {
loading.value = true;
return usePhotosStore().fetchDetail(id)
.then(resp => {
photo.value = resp;
return resp;
})
.finally(() => loading.value = false);
};
export const photoAspectRatio = computed(() => photo.value.width / photo.value.height);
src/composables/photos/simpleEdit.js
-22
View File
@@ -1,22 +0,0 @@
import {usePhotosStore} from "stores/Photo";
import {fetchFlight} from "src/composables/objects/flight";
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
import {ref} from "vue";
export const handlePhotoUpdate = (flightId, formData) => {
const photoId = formData.id;
delete formData.id;
usePhotosStore().update(photoId, formData).then((data) => {
fetchFlight(flightId); // nenacita se mi nove vytvoreny POI z comboboxu
usePointsOfInterestStore().fetch();
});
};
export const openEdit = ref(false);
export const editPhoto = ref(null);
export const openPhotoEdit = (photo) => {
openEdit.value = true;
editPhoto.value = photo;
};
src/graphql/apollo.js
-109
View File
@@ -1,109 +0,0 @@
import {ApolloClient, ApolloLink, fromPromise, InMemoryCache} from '@apollo/client/core'
import {createApolloProvider} from "@vue/apollo-option";
import {createUploadLink} from 'apollo-upload-client';
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";
const uploadLink = createUploadLink({
uri: process.env.API_URL + '/graphql',
})
const handleRefreshToken = (forward, operation) => {
return fromPromise(
useUserStore().refreshAccessToken()
.catch((error) => {
Notify.create(warningObject("Tvoje přihlášení vypřešlo. Přihlaš se prosím znovu."));
window.location = "/login";
})
)
.filter((value) => Boolean(value))
.flatMap((accessToken) => {
const oldHeaders = operation.getContext().headers;
operation.setContext({
headers: {
...oldHeaders,
authorization: `Bearer ${accessToken}`,
},
});
// retry the request, returning the new observable
return forward(operation);
});
}
const errorLink = onError(
({graphQLErrors, networkError, operation, forward}) => {
if (networkError?.statusCode === 401) {
return handleRefreshToken(forward, operation);
}
if (graphQLErrors) {
for (const error of graphQLErrors) {
if (error.message === "Not found") {
useAppStore().appStatus = 404;
} else if (error.message.includes("401") || error.message.includes("Not authorized")) {
return handleRefreshToken(forward, operation);
} else {
Notify.create(errorObject("API error: " + error.message));
}
}
}
});
const authLink = new ApolloLink((operation, forward) => {
const accessToken = useUserStore().getAccessToken();
if (accessToken) {
operation.setContext({
headers: {"Authorization": `Bearer ${accessToken}`},
});
}
return forward(operation);
});
export const apolloClient = new ApolloClient({
link: ApolloLink.from([authLink, errorLink, uploadLink]),
cache: new InMemoryCache(),
connectToDevTools: true,
})
export const apolloWrapper = {
query(query, variables = {}) {
return apolloClient.query({
query: query,
fetchPolicy: 'no-cache',
variables: variables
})
.then((response) => response)
.catch(err => {
console.error("Error during query: ", err)
return err;
})
},
mutate(mutation, variables, onUpdate = () => {
}) {
return apolloClient
.mutate({
mutation: mutation,
fetchPolicy: 'no-cache',
variables: variables,
update: () => {
onUpdate();
},
})
.then((response) => response)
.catch(err => {
console.error("Error during mutation: ", err);
})
},
}
// @see https://v4.apollo.vuejs.org/migration/
export const apolloProvider = createApolloProvider({
defaultClient: apolloClient,
})
src/graphql/mutations/flight.js
+4 -3
View File
@@ -4,11 +4,12 @@ import {FRAGMENT_FLIGHT_FULL_INFO} from "src/graphql/fragments/flight";
export const CREATE_FLIGHT = gql`
mutation createFlight($input: CreateFlightInput!) {
createFlight(input: $input) {
id
...flightFullInfo
}
}
`
// ^^ nesmim se tu ptat na aircraft, jinak mi to upadne
${FRAGMENT_FLIGHT_FULL_INFO}
`;
export const EDIT_FLIGHT = gql`
mutation editFlight($id: Int!, $input: EditFlightInput!) {
editFlight(id: $id, input: $input) {
src/graphql/mutations/organization.js
+9 -17
View File
@@ -7,7 +7,6 @@ export const CREATE_ORGANIZATION = gql`
...organizationFullInfo
}
}
${FRAGMENT_ORGANIZATION_FULL_INFO}
`;
@@ -17,33 +16,26 @@ mutation editOrganization($id: Int!, $input: EditOrganizationInput!) {
...organizationFullInfo
}
}
${FRAGMENT_ORGANIZATION_FULL_INFO}
${FRAGMENT_ORGANIZATION_FULL_INFO}
`;
export const ADD_USER_TO_ORGANIZATION = gql`
mutation addToOrganization($organizationId: Int!) {
addToOrganization(organizationId: $organizationId) {
users {
id
name
email
avatarImageUrl
}
...organizationFullInfo
}
}`;
}
${FRAGMENT_ORGANIZATION_FULL_INFO}
`;
export const REMOVE_USER_FROM_ORGANIZATION = gql`
mutation removeFromOrganization($organizationId: Int!) {
removeFromOrganization(organizationId: $organizationId) {
users {
id
name
email
avatarImageUrl
}
...organizationFullInfo
}
}`;
}
${FRAGMENT_ORGANIZATION_FULL_INFO}
`;
// export const DELETE_ORGANIZATION = gql`
// mutation deleteOrganization($id: Int!) {
src/layouts/ProfileLayout.vue
+7 -5
View File
@@ -15,7 +15,7 @@
{{ pageTitle || "Polétání.cz" }}
</q-toolbar-title>
<TopMenuButton :logged-user="loggedUser" @logout="logout"/>
<TopMenuButton v-if="!isQueryRunning && user" :logged-user="user" @logout="logout"/>
</q-toolbar>
</q-header>
@@ -26,7 +26,9 @@
bordered
>
<q-img class="absolute-top" :src="loggedUser.titleImageUrl" style="height: 150px"/>
<q-img class="absolute-top" v-if="!isQueryRunning && user" :src="user.titleImageUrl" style="height: 150px" />
<q-spinner v-else />
<q-scroll-area style="height: calc(100% - 150px); margin-top: 150px; border-right: 1px solid #ddd">
<SidebarNavigation/>
</q-scroll-area>
@@ -42,7 +44,7 @@
</template>
<script setup>
import {onMounted, ref} from 'vue'
import {onBeforeMount, onMounted, ref} from 'vue'
import NavigationButton from "components/navigation/NavigationButton.vue";
import {useUserStore} from "stores/User";
import {storeToRefs} from "pinia";
@@ -68,10 +70,10 @@ const toggleLeftDrawer = () => {
leftDrawerOpen.value = !leftDrawerOpen.value
};
onMounted(() => {
onBeforeMount(() => {
useUserStore().fetchLoggedUserDetail();
})
const loggedUser = storeToRefs(useUserStore()).user;
const {isQueryRunning, user} = storeToRefs(useUserStore());
const logout = () => {
useUserStore().logout().then(() => {
src/layouts/PublicLayout.vue
+9 -7
View File
@@ -6,7 +6,7 @@
{{ pageTitle }}
</q-toolbar-title>
<template v-if="loggedUser.id">
<template v-if="loggedUser && loggedUser.id">
<router-link :to="{name: 'myFlights'}">
<AvatarFromPhoto :size="35" :src="loggedUser.avatarImageUrl"/>
</router-link>
@@ -46,11 +46,13 @@ useMeta(() => ({
title: pageTitle.value !== '' ? `${pageTitle.value} - Polétání.cz` : 'Polétání.cz'
}));
// onMounted(() => {
// if (loggedUser || useUserStore().hasAccessToken()) {
// // poll once per 5 minutes to keep access token active
// setInterval(useUserStore().fetchLoggedUserDetail, 5*60*1000);
// }
// })
onMounted(() => {
useUserStore().fetchLoggedUserDetail();
if (loggedUser || useUserStore().hasAccessToken()) {
// poll once per 5 minutes to keep access token active
setInterval(useUserStore().fetchLoggedUserDetail, 5*60*1000);
}
})
</script>
src/pages/profile/aircraft/AircraftDetailPage.vue
+17 -14
View File
@@ -5,43 +5,46 @@ import {useRoute, useRouter} from "vue-router";
import {useQuasar} from "quasar";
import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
import {successObject} from "src/composables/dialog";
import {loading, aircraft, fetchAircraft} from "src/composables/objects/aircraft";
import {useAppStore} from "stores/App";
import FlightsList from "components/flights/FlightsList.vue";
import AircraftDetailCard from "components/aircrafts/AircraftDetailCard.vue";
import {poi} from "src/composables/objects/poi";
import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
import {storeToRefs} from "pinia";
import {useUserStore} from "stores/User";
const $q = useQuasar();
const $router = useRouter();
const aircraftId = parseInt(useRoute().params.id);
onMounted(() => {
fetchAircraft(aircraftId);
useAircraftsStore().fetchDetail(aircraftId);
})
const deleteAircraft = (id) => {
useAircraftsStore().delete(id).then(() => {
$router.push({name: "aircrafts"});
$q.notify(successObject("Letadlo úspěšně odstraněno"));
});
}
const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
watch(() => aircraft.value, (newVal) => {
if (!newVal) return;
watch(aircraft, (newVal) => {
useAppStore().setPageTitle(newVal.callSign);
useAppStore().setBreadcrumbs([
{label: "Letadla", to: {name: "aircrafts"}},
{label: newVal.callSign}
])
});
const deleteAircraft = (id) => {
useAircraftsStore().destroy(id).then(() => {
$router.push({name: "aircrafts"});
$q.notify(successObject("Letadlo úspěšně odstraněno"));
});
}
</script>
<template>
<AircraftDetailSkeleton v-if="loading || !aircraft"/>
<AircraftDetailSkeleton v-if="isQueryRunning || !aircraft"/>
<template v-else>
<AircraftDetailCard :aircraft="aircraft" @delete="deleteAircraft" />
<AircraftDetailCard
:aircraft="aircraft"
@delete="deleteAircraft"
/>
<q-card class="flight-detail-card" flat>
<h3>Lety</h3>
src/pages/profile/aircraft/AircraftsPage.vue
+8 -4
View File
@@ -1,21 +1,25 @@
<script setup>
import {onMounted} from "vue";
import AircraftsList from "components/aircrafts/AircraftsList.vue";
import {aircrafts, fetchAircrafts, loading} from "src/composables/objects/aircraft";
import FAB from "components/FAB.vue";
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import {useAircraftsStore} from "stores/Aircrafts";
import {storeToRefs} from "pinia";
const store = useAircraftsStore();
onMounted(() => {
fetchAircrafts();
store.fetch();
})
const {aircrafts, isQueryRunning} = storeToRefs(store);
</script>
<template>
<BasicListSkeleton v-if="loading"/>
<BasicListSkeleton v-if="isQueryRunning"/>
<BasicInfoBanner
v-if="!loading && aircrafts.length === 0"
v-if="!isQueryRunning && aircrafts.length === 0"
:route-add="{name: 'addAircraft'}"
label-add="Vytvořit letadlo"
>
src/pages/profile/aircraft/EditAircraftPage.vue
+5 -5
View File
@@ -6,9 +6,7 @@ import {useQuasar} from "quasar";
import {onMounted} from "vue";
import AircraftEditSkeleton from "components/aircrafts/AircraftEditSkeleton.vue";
import {successObject} from "src/composables/dialog";
import {aircraft, fetchAircraft, loading, isRequestPending} from "src/composables/objects/aircraft";
import {useAppStore} from "stores/App";
import {fetchOrganizations, organizations} from "src/composables/objects/organization";
import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
import {storeToRefs} from "pinia";
import {useUserStore} from "stores/User";
@@ -25,9 +23,10 @@ const handleSave = (formData) => {
$router.push({name: "aircraftDetail", params: {id: aircraftId}});
})
}
const {aircraft, isMutationRunning, isQueryRunning} = storeToRefs(useAircraftsStore());
onMounted(() => {
fetchAircraft(aircraftId).then(() => {
useAircraftsStore().fetchDetail(aircraftId).then(() => {
useAppStore().setPageTitle(`${aircraft.value.callSign} - editace`);
useAppStore().setBreadcrumbs([
{to: {name: "aircraft"}, label: "Letadla"},
@@ -36,10 +35,11 @@ onMounted(() => {
])
});
});
</script>
<template>
<AircraftEditSkeleton v-if="loading"/>
<AircraftEditSkeleton v-if="isQueryRunning || !aircraft"/>
<AccessDeniedBanner
v-else-if="aircraft.createdById !== loggedUser.id"
@@ -52,7 +52,7 @@ onMounted(() => {
@save="handleSave"
:default-values="aircraft"
:organizations="loggedUser.organizations"
:is-request-pending="isRequestPending"
:is-request-pending="isMutationRunning"
/>
</q-card-section>
</q-card>
src/pages/profile/aircraft/NewAircraftsPage.vue
+5 -3
View File
@@ -5,8 +5,7 @@ import {useRouter} from "vue-router";
import {useQuasar} from "quasar";
import {useAppStore} from "stores/App";
import {successObject} from "src/composables/dialog";
import {isRequestPending} from "src/composables/objects/aircraft";
import {fetchOrganizations, organizations} from "src/composables/objects/organization";
import {fetchOrganizations} from "src/composables/objects/organization";
import {onMounted} from "vue";
import {storeToRefs} from "pinia";
import {useUserStore} from "stores/User";
@@ -30,13 +29,16 @@ onMounted(() => {
{label: "Nové"}
]);
});
const {isMutationRunning} = storeToRefs(useAircraftsStore());
</script>
<template>
<q-card class="q-mx-md q-my-md">
<q-card-section>
<AircraftForm
:is-request-pending="isRequestPending"
:is-request-pending="isMutationRunning"
:organizations="loggedUser.organizations"
@save="handleSave"
/>
src/pages/profile/copilot/CopilotDetailPage.vue
+7 -4
View File
@@ -1,26 +1,29 @@
<script setup>
import {useRoute} from "vue-router";
import {onMounted} from "vue";
import {copilot, fetchCopilot, loading} from "src/composables/objects/copilot";
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";
const copilotId = parseInt(useRoute().params.id);
onMounted(() => {
fetchCopilot(copilotId).then(() => {
useCopilotsStore().fetchDetail(copilotId).then(() => {
useAppStore().setPageTitle(copilot.value.name);
useAppStore().setBreadcrumbs([
{to: {name: "copilots"}, label: "Kopiloti"},
{label: copilot.value.name}
])
});
})
});
const {isQueryRunning, copilot} = storeToRefs(useCopilotsStore());
</script>
<template>
<CopilotDetailSkeleton v-if="loading || !copilot"/>
<CopilotDetailSkeleton v-if="isQueryRunning || !copilot"/>
<template v-else>
<h3>Společné lety</h3>
src/pages/profile/copilot/CopilotsPage.vue
+8 -5
View File
@@ -1,23 +1,26 @@
<script setup>
import {onMounted} from "vue";
import {fetchCopilots, loading, copilots} from "src/composables/objects/copilot";
import CopilotsList from "components/copilots/CopilotsList.vue";
import FAB from "components/FAB.vue";
import {useAppStore} from "stores/App";
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import {useCopilotsStore} from "stores/Copilots";
import {storeToRefs} from "pinia";
onMounted(() => {
fetchCopilots();
useCopilotsStore().fetch();
useAppStore().setPageTitle("Spolucestující");
})
});
const {isQueryRunning, copilots} = storeToRefs(useCopilotsStore());
</script>
<template>
<BasicListSkeleton :items-count-min="5" :items-count-max="10" v-if="loading"/>
<BasicListSkeleton :items="10" v-if="isQueryRunning"/>
<BasicInfoBanner
v-else-if="!loading && copilots.length === 0"
v-else-if="!isQueryRunning && copilots.length === 0"
:router-add="{name: 'addCopilot'}"
>
V tomto seznamu budou uvedeni všichni, kteří s tebou absolvovali nějaký tvůj let.
src/pages/profile/copilot/EditCopilotPage.vue
+12 -9
View File
@@ -1,6 +1,5 @@
<script setup>
import {onMounted} from "vue";
import {loading, copilot, fetchCopilot, isRequestPending} from "src/composables/objects/copilot";
import {useAppStore} from "stores/App";
import CopilotEditSkeleton from "components/copilots/CopilotEditSkeleton.vue";
import CopilotEditForm from "components/copilots/CopilotForm.vue";
@@ -8,38 +7,42 @@ import {useRoute, useRouter} from "vue-router";
import {useCopilotsStore} from "stores/Copilots";
import {successObject} from "src/composables/dialog";
import {useQuasar} from "quasar";
import {storeToRefs} from "pinia";
const copilotId = parseInt(useRoute().params.id);
const $q = useQuasar();
const $router = useRouter();
const $route = useRoute();
const copilotId = parseInt($route.params.id);
onMounted(() => {
fetchCopilot(copilotId).then(() => {
useCopilotsStore().fetchDetail(copilotId).then(() => {
useAppStore().setPageTitle(`${copilot.value.name} - editace`);
useAppStore().setBreadcrumbs([
{to: {name: "copilots"}, label: "Kopiloti"},
{to: {name: "copilotDetail", params: {id: copilotId}}, label: copilot.value.name},
{label: "Editace"}
])
})
});
});
const $q = useQuasar();
const $router = useRouter();
const handleSave = (formData) => {
useCopilotsStore().update(copilotId, formData).then(() => {
$q.notify(successObject("Kopilot úspěšně upraven"));
$router.push({name: "copilotDetail", params: {id: copilotId}});
});
}
const {isQueryRunning, isMutationRunning, copilot} = storeToRefs(useCopilotsStore());
</script>
<template>
<CopilotEditSkeleton v-if="loading"/>
<CopilotEditSkeleton v-if="isQueryRunning || !copilot"/>
<CopilotEditForm
v-else
:copilot="copilot"
:is-request-pending="isRequestPending"
:is-request-pending="isMutationRunning"
@save="handleSave"
/>
</template>
src/pages/profile/copilot/NewCopilotPage.vue
+7 -2
View File
@@ -5,7 +5,7 @@ import {successObject} from "src/composables/dialog";
import {useCopilotsStore} from "stores/Copilots";
import CopilotForm from "components/copilots/CopilotForm.vue";
import {useAppStore} from "stores/App";
import {isRequestPending} from "src/composables/objects/copilot";
import {storeToRefs} from "pinia";
const $q = useQuasar();
const router = useRouter();
@@ -21,8 +21,13 @@ useAppStore().setBreadcrumbs([
{to: {name: "copilots"}, label: "Spolucestující"},
{label: "Nový"}
]);
const {isMutationRunning} = storeToRefs(useCopilotsStore());
</script>
<template>
<CopilotForm @save="handleSave" :is-request-pending="isRequestPending"/>
<CopilotForm
:is-request-pending="isMutationRunning"
@save="handleSave"
/>
</template>
src/pages/profile/event/EditEventPage.vue
+8 -6
View File
@@ -1,6 +1,5 @@
<script setup>
import {onMounted} from "vue";
import {loading, event, fetchEvent, isRequestPending} from "src/composables/objects/event";
import {useAppStore} from "stores/App";
import {useRoute, useRouter} from "vue-router";
import {useEventsStore} from "stores/Events";
@@ -8,15 +7,16 @@ import {successObject} from "src/composables/dialog";
import {useQuasar} from "quasar";
import EventEditSkeleton from "components/event/EventEditSkeleton.vue";
import EventForm from "components/event/EventForm.vue";
import {storeToRefs} from "pinia";
const eventId = parseInt(useRoute().params.id);
onMounted(() => {
fetchEvent(eventId).then(() => {
useAppStore().setPageTitle(`${event.value.name} - editace`);
useEventsStore().fetchDetail(eventId).then((e) => {
useAppStore().setPageTitle(`${e.name} - editace`);
useAppStore().setBreadcrumbs([
{to: {name: "events"}, label: "Události"},
{to: {name: "eventDetail", params: {id: eventId}}, label: event.value.name},
{to: {name: "eventDetail", params: {id: eventId}}, label: e.name},
{label: "Editace"}
])
})
@@ -31,15 +31,17 @@ const handleSave = (formData) => {
$router.push({name: "eventDetail", params: {id: eventId}});
});
}
const {isQueryRunning, isMutationRunning, event} = storeToRefs(useEventsStore());
</script>
<template>
<EventEditSkeleton v-if="loading"/>
<EventEditSkeleton v-if="isQueryRunning"/>
<EventForm
v-else
:event="event"
:is-request-pending="isRequestPending"
:is-request-pending="isMutationRunning"
@save="handleSave"
/>
</template>
src/pages/profile/event/EventDetailPage.vue
+7 -6
View File
@@ -1,17 +1,17 @@
<script setup>
import {useRoute} from "vue-router";
import {onMounted} from "vue";
import {event, fetchEvent, loading} from "src/composables/objects/event";
import EventDetailSkeleton from "components/event/EventDetailSkeleton.vue";
import {useAppStore} from "stores/App";
import FAB from "components/FAB.vue";
import FlightsList from "components/flights/FlightsList.vue";
import ListItemSkeleton from "components/basicSkeletons/ListItemSkeleton.vue";
import {FORMAT_DATE, FORMAT_DATETIME_LONG, formatDatetime} from "../../../composables/datetimeUtils";
import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
import {useEventsStore} from "stores/Events";
import {storeToRefs} from "pinia";
const eventId = parseInt(useRoute().params.id);
onMounted(() => {
fetchEvent(eventId).then(() => {
useEventsStore().fetchDetail(eventId).then(() => {
useAppStore().setPageTitle(event.value.name);
useAppStore().setBreadcrumbs([
{to: {name: "events"}, label: "Události"},
@@ -19,13 +19,14 @@ onMounted(() => {
])
});
})
const {isQueryRunning, event} = storeToRefs(useEventsStore());
</script>
<template>
<EventDetailSkeleton v-if="loading || !event"/>
<EventDetailSkeleton v-if="isQueryRunning || !event"/>
<template v-else>
<q-list bordered separator class="q-my-lg" v-if="event.dateFrom && event.dateTo">
<q-item>
<q-item-section>
src/pages/profile/event/EventsPage.vue
+7 -5
View File
@@ -4,20 +4,22 @@ import {useAppStore} from "stores/App";
import FAB from "components/FAB.vue";
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import {events, fetchEvents, loading} from "src/composables/objects/event";
import EventsList from "components/event/EventsList.vue";
import {storeToRefs} from "pinia";
import {useEventsStore} from "stores/Events";
onMounted(() => {
fetchEvents();
useEventsStore().fetch();
useAppStore().setPageTitle("Letecké události");
});
useAppStore().setPageTitle("Letecké události")
const {isQueryRunning, events} = storeToRefs(useEventsStore());
</script>
<template>
<BasicListSkeleton :items-count-min="3" :items-count-max="8" v-if="loading"/>
<BasicListSkeleton :items-count-min="3" :items-count-max="8" v-if="isQueryRunning"/>
<BasicInfoBanner
v-else-if="!loading && events.length === 0"
v-else-if="!isQueryRunning && events.length === 0"
:route-add="{name: 'addEvent'}"
label-add="Přidat"
>
src/pages/profile/event/NewEventPage.vue
+4 -2
View File
@@ -4,8 +4,8 @@ import {useQuasar} from "quasar";
import {successObject} from "src/composables/dialog";
import {useEventsStore} from "stores/Events";
import {useAppStore} from "stores/App";
import {isRequestPending} from "src/composables/objects/event";
import EventForm from "components/event/EventForm.vue";
import {storeToRefs} from "pinia";
const $q = useQuasar();
const router = useRouter();
@@ -21,8 +21,10 @@ useAppStore().setBreadcrumbs([
{to: {name: "events"}, label: "Události"},
{label: "Nová"}
]);
const {isMutationRunning} = storeToRefs(useEventsStore());
</script>
<template>
<EventForm @save="handleSave" :is-request-pending="isRequestPending"/>
<EventForm @save="handleSave" :is-request-pending="isMutationRunning"/>
</template>
src/pages/profile/flight/EditFlightPage.vue
+119 -60
View File
@@ -19,23 +19,21 @@ import PhotosList 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";
import {fetchFlight, flight, loading} from "src/composables/objects/flight";
import FlightEditSkeleton from "components/flights/FlightEditSkeleton.vue";
import BatchPhotoFormDialog from "components/photos/BatchPhotoFormDialog.vue";
import {useAppStore} from "stores/App";
import {editBatchPhotos, handleBatchPhotoEdit, openBatchEdit, openBatchPhotoForm} from "src/composables/photos/batchEdit";
import {editPhoto, handlePhotoUpdate, openEdit, openPhotoEdit} from "src/composables/photos/simpleEdit";
import {fetchEvents, events} from "src/composables/objects/event";
import {useEventsStore} from "stores/Events";
const $q = useQuasar();
const $route = useRoute();
const flightId = parseInt($route.params.id);
const aircrafts = storeToRefs(useAircraftsStore()).items;
const locations = storeToRefs(usePointsOfInterestStore()).items;
const airports = storeToRefs(useAirportsStore()).items;
const copilots = storeToRefs(useCopilotsStore()).items;
const {aircrafts} = storeToRefs(useAircraftsStore());
const {pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
const {airports} = storeToRefs(useAirportsStore());
const {copilots} = storeToRefs(useCopilotsStore());
const {events} = storeToRefs(useEventsStore());
const {flight, isQueryRunning, isMutationRunning} = storeToRefs(useFlightsStore());
const formStep = ref("basic");
watch(() => $route.params.step, (val) => formStep.value = val);
@@ -47,12 +45,10 @@ onMounted(() => {
usePointsOfInterestStore().fetch();
useAirportsStore().fetch();
useCopilotsStore().fetch();
useEventsStore().fetch();
fetchEvents();
fetchFlight(flightId).then(() => {
const flightNameFormatted = flightName(flight.value);
useFlightsStore().fetchDetail(flightId).then((f) => {
const flightNameFormatted = flightName(f);
useAppStore().setPageTitle(`Editace - ${flightNameFormatted}`);
useAppStore().setBreadcrumbs([
{to: {name: "myFlights"}, label: "Moje lety"},
@@ -65,13 +61,13 @@ onMounted(() => {
const handleFlightEdit = (data) => {
useFlightsStore().update(flightId, data).then((data) => {
$q.notify(successObject("Úspěšně upraveno"));
flight.value = 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)
@@ -100,7 +96,7 @@ const handlePhotosUpload = (data) => {
const _findPhotoIndex = (photoId) => flight.value.photos.findIndex((object) => object.id === photoId);
const deletePhoto = (id) => {
usePhotosStore().delete(id).then((data) => {
usePhotosStore().destroy(id).then((data) => {
flight.value.photos.splice(_findPhotoIndex(data.id), 1);
});
}
@@ -108,47 +104,110 @@ const deletePhoto = (id) => {
const rotatePhotos = ({photos, direction}) => {
const promises = [];
for (const photo of photos) {
promises.push(usePhotosStore().changeOrientation(photo.id, direction));
promises.push(usePhotosStore().changeOrientation(photo.id, direction).then(data => {
const idx = _findPhotoIndex(data.id);
data.thumbnailUrl += "?t=" + (new Date()).getTime();
flight.value.photos[idx] = data;
}));
}
let success = 0;
Promise.allSettled(promises).then(result => {
for (const updatedPhoto of result) {
const {status, value} = updatedPhoto;
if (status === 'fulfilled') success++;
const idx =_findPhotoIndex(value.id);
value.thumbnailUrl += "?t=" + (new Date()).getTime();
flight.value.photos[idx] = value;
for (const item of result) {
if (item.status === 'fulfilled') success++;
}
const error = result.length - success;
if (success > 0) {
$q.notify(successObject("Otočeno " + success + " fotografií"));
}
if (error > 0) {
$q.notify(errorObject(`Nepovedlo se otočit ${error} fotografi`))
}
if (success > 0) $q.notify(successObject("Otočeno " + success + " fotografií"));
if (error > 0) $q.notify(errorObject(`Nepovedlo se otočit ${error} fotografi`))
});
}
const updateSinglePhoto = (id, formData) => 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;
delete formData.id;
return updateSinglePhoto(photoId, formData);
};
const openEdit = ref(false);
const editPhoto = ref(null);
const openPhotoEdit = (photo) => {
openEdit.value = true;
editPhoto.value = photo;
};
// batch edit
const openBatchEdit = ref(false);
const editBatchPhotos = ref([]);
const openBatchPhotoForm = (photos) => {
openBatchEdit.value = true;
editBatchPhotos.value = photos;
}
const handleBatchPhotoEdit = async (flightId, data) => {
const photoIds = data.photoIds;
delete data.photoIds;
delete data.id;
if (data.pointOfInterest && !data.pointOfInterest.id) {
const poiData = {
...data.pointOfInterest,
isPublic: false,
description: "",
}
await usePointsOfInterestStore().create(poiData).then(poi => data.pointOfInterest = {id: poi.id, name: poi.name});
}
const promises = [];
for (const id of photoIds) {
const updateData = {};
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));
}
let success = 0;
Promise.allSettled(promises).then(result => {
for (const item of result) {
if (item.status === 'fulfilled') success++;
}
const error = result.length - success;
if (success > 0) $q.notify(successObject("Upraveno " + success + " fotografií"));
if (error > 0) $q.notify(errorObject(`Nepovedlo se uložit ${error} fotografií`))
});
}
</script>
<template>
<FlightFormSteps :router-edit-mode="true" :flightId="flightId"/>
<FlightEditSkeleton :step="formStep" v-if="loading"/>
<FlightEditSkeleton :step="formStep" v-if="isQueryRunning || !flight"/>
<template v-else>
<q-tab-panels v-model="formStep">
<q-tab-panel name="basic">
<FlightFormBasic
@save="handleFlightEdit"
:flight="flight"
:locations="locations"
:airports="airports"
:aircrafts="aircrafts"
@save="handleFlightEdit"
:flight="flight"
:locations="pointsOfInterest"
:airports="airports"
:aircrafts="aircrafts"
/>
</q-tab-panel>
@@ -158,43 +217,43 @@ const rotatePhotos = ({photos, direction}) => {
<q-tab-panel name="track">
<FlightFormTrack
v-if="locations"
:flight="flight"
:locations="locations"
: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"
:photos="flight.photos"
@edit="openPhotoEdit"
@batch-edit="openBatchPhotoForm"
@batch-rotate="rotatePhotos"
@delete="deletePhoto"
/>
<!-- Dialogs for photo edit -->
<PhotoFormDialog
v-model="openEdit"
:locations="locations"
:photo="editPhoto"
@save="handlePhotoUpdate(flightId, $event)"
v-model="openEdit"
:locations="pointsOfInterest"
:photo="editPhoto"
@save="handlePhotoUpdate(flightId, $event)"
/>
<BatchPhotoFormDialog
v-model="openBatchEdit"
:locations="locations"
:photos="editBatchPhotos"
@save="handleBatchPhotoEdit(flightId, $event)"
@delete="deletePhoto"
v-model="openBatchEdit"
:locations="pointsOfInterest"
:photos="editBatchPhotos"
@save="handleBatchPhotoEdit(flightId, $event)"
@delete="deletePhoto"
/>
</q-tab-panel>
src/pages/profile/flight/FlightDetailPage.vue
+47 -56
View File
@@ -2,11 +2,11 @@
import {useRoute, useRouter} from "vue-router";
import {computed, onMounted, ref, watch} from "vue";
import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
import {fetchFlight, flight, flightName, handleDeleteFlight, loading} from "src/composables/objects/flight";
import {flightName} from "src/composables/objects/flight";
import {useAppStore} from "stores/App";
import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
import {copyToClipboard, useQuasar} from "quasar";
import {successObject} from "src/composables/dialog";
import {confirmObject, successObject} from "src/composables/dialog";
import {useFlightsStore} from "stores/Flights";
import FlightTrackMap from "components/flights/FlightTrackMap.vue";
import {useUserStore} from "stores/User";
@@ -19,37 +19,35 @@ const $router = useRouter();
const flightId = parseInt(useRoute().params.id);
const loggedUser = storeToRefs(useUserStore()).user;
onMounted(() => {
fetchFlight(flightId);
onMounted(() => {flight.value
useFlightsStore().fetchDetail(flightId).then(f => {
const flightNameFormatted = flightName(f);
useAppStore().setPageTitle(flightNameFormatted);
useAppStore().setBreadcrumbs([
{to: {name: "myFlights"}, label: "Moje lety"},
{label: flightNameFormatted}
]);
})
})
watch(flight, (newVal) => {
const flightNameFormatted = flightName(newVal);
useAppStore().setPageTitle(flightNameFormatted);
useAppStore().setBreadcrumbs([
{to: {name: "myFlights"}, label: "Moje lety"},
{label: flightNameFormatted}
]);
});
const handleDeleteAndRedirect = () => {
const flightId = flight.value.id;
handleDeleteFlight($q, flightId, (flight) => {
$router.push({name: "myFlights"});
$q.notify(successObject(`Úspěšně smazáno`));
})
$q.dialog(confirmObject("Opravdu chceš smazat tento let?"))
.onOk(() => {
useFlightsStore().destroy(flightId).then(() => {
$router.push({name: "myFlights"});
$q.notify(successObject(`Úspěšně smazáno`));
});
});
}
const togglePublicVisibility = () => {
const newVisibility = !flight.value.isPublic;
useFlightsStore()
.update(flightId, {isPublic: newVisibility})
.then((updatedFlight) => {
flight.value = updatedFlight;
$q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto"));
});
.update(flightId, {isPublic: newVisibility})
.then(() => {
$q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto"));
});
};
const copyLinkToClipboard = () => {
@@ -62,43 +60,36 @@ const copyLinkToClipboard = () => {
$q.notify(successObject("Odkaz zkopírován"))
});
};
const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
</script>
<template>
<FlightDetailSkeleton v-if="loading || !flight"/>
<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>
<div class="absolute-bottom custom-caption">
<div class="text-h5"> {{ flightName(flight) }}</div>
</div>
</q-img>
<q-card-actions class="q-my-md">
<div class="col-grow">
<!-- <q-btn-->
<!-- flat-->
<!-- :to="{name: 'flightEdit', params:{id: flight.id}}"-->
<!-- icon="edit"-->
<!-- text-color="primary"-->
<!-- label="Upravit"-->
<!-- />-->
<q-btn
@click="togglePublicVisibility"
:icon="flight.isPublic ? 'visibility_off' : 'visibility'"
:disable="!loggedUser.publicUsername"
flat
:label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
@click="togglePublicVisibility"
:icon="flight.isPublic ? 'visibility_off' : 'visibility'"
:disable="!loggedUser.publicUsername"
flat
:label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
/>
<q-btn
icon="link"
@click="copyLinkToClipboard()"
flat
v-if="flight.isPublic"
label="Získat odkaz"
icon="link"
@click="copyLinkToClipboard()"
flat
v-if="flight.isPublic"
label="Získat odkaz"
/>
</div>
<q-btn @click="handleDeleteAndRedirect" icon="delete" flat text-color="red" label="Smazat"/>
@@ -124,30 +115,30 @@ const copyLinkToClipboard = () => {
<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'}}"
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"
v-else
:photos="flight.photos"
/>
<q-separator/>
<div class="text-right">
<q-btn class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
<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'}}"
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"
v-else
:flight="flight"
/>
</q-card-section>
</q-card>
src/pages/profile/flight/FlightsPage.vue
+8 -5
View File
@@ -4,30 +4,33 @@ import {useQuasar} from "quasar";
import FlightsList from "components/flights/FlightsList.vue";
import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
import FAB from "components/FAB.vue";
import {fetchFlights, flights, handleDeleteFlight, loading} from "src/composables/objects/flight";
import {useAppStore} from "stores/App";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import {useFlightsStore} from "stores/Flights";
import {storeToRefs} from "pinia";
const $q = useQuasar();
useAppStore().setPageTitle("Moje lety")
onMounted(() => {
fetchFlights();
useFlightsStore().fetch();
})
const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
</script>
<template>
<FlightsListSkeleton v-if="loading"/>
<FlightsListSkeleton v-if="isQueryRunning"/>
<BasicInfoBanner
v-else-if="!loading && flights.length === 0"
v-else-if="!isQueryRunning && flights.length === 0"
:route-add="{name: 'addFlight'}"
label-add="Přidat let"
>
Nemáš zaznamenaný žádný let.
</BasicInfoBanner>
<FlightsList v-else :items="flights" @delete="handleDeleteFlight($q, $event)"/>
<FlightsList v-else :items="flights"/>
<FAB mode="add" :router-link="{name: 'addFlight'}"/>
</template>
src/pages/profile/flight/NewFlightPage.vue
+19 -21
View File
@@ -1,28 +1,21 @@
<script setup>
import {onMounted, ref} from "vue";
import {computed, onMounted, ref} from "vue";
import {useAircraftsStore} from "stores/Aircrafts";
import {useFlightsStore} from "stores/Flights";
import {useRouter} from "vue-router";
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
import {storeToRefs} from "pinia";
import {useAirportsStore} from "stores/Airports";
import {useAppStore} from "stores/App";
import FlightFormSteps from "components/flights/form/FlightFormSteps.vue";
import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
import {useAppStore} from "stores/App";
import {isRequestPending} from "src/composables/objects/flight";
import FlightEditSkeleton from "components/flights/FlightEditSkeleton.vue";
const loading = ref(true);
onMounted(() => {
const promises = [
useAircraftsStore().fetch(),
usePointsOfInterestStore().fetch(),
useFlightsStore().fetch(),
useAirportsStore().fetch(),
];
loading.value = true;
Promise.all(promises).finally(() => loading.value = false);
useAircraftsStore().fetch()
usePointsOfInterestStore().fetch()
useFlightsStore().fetch()
useAirportsStore().fetch()
useAppStore().setPageTitle("Nový let");
useAppStore().setBreadcrumbs([
@@ -31,9 +24,14 @@ onMounted(() => {
]);
});
const aircrafts = storeToRefs(useAircraftsStore()).items;
const locations = storeToRefs(usePointsOfInterestStore()).items;
const airports = storeToRefs(useAirportsStore()).items;
const {isMutationRunning} = storeToRefs(useFlightsStore());
const {aircrafts} = storeToRefs(useAircraftsStore());
const {pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
const {airports} = storeToRefs(useAirportsStore());
const loading = computed(() => [
useAircraftsStore().isQueryRunning, usePointsOfInterestStore().isQueryRunning, useAirportsStore().isQueryRunning
].some(i => i.value))
const router = useRouter();
const handleSave = (formData) => {
@@ -49,11 +47,11 @@ const handleSave = (formData) => {
<FlightEditSkeleton step="basic" v-if="loading"/>
<template v-else>
<FlightFormBasic
@save="handleSave"
:is-request-pending="isRequestPending"
:aircrafts="aircrafts"
:airports="airports"
:locations="locations"
@save="handleSave"
:is-request-pending="isMutationRunning"
:aircrafts="aircrafts"
:airports="airports"
:locations="pointsOfInterest"
/>
</template>
</template>
src/pages/profile/flight/PhotoEditorPage.vue
+147 -144
View File
@@ -7,11 +7,13 @@ import {flightName} from "src/composables/objects/flight";
import VuePictureCropper from 'vue-picture-cropper';
import {croppedAreaForPreview, getPreviewUrl} from "src/composables/photos/editor/preview";
import {compare, onResize, splitter, splitterWidth} from "src/composables/photos/editor/splitter";
import {aspectRatioOptions, croppedArea, cropperReady, selectedAspectRatio, setCropData} from "src/composables/photos/editor/crop";
import {fetchPhoto, loading, photo, photoAspectRatio} from "src/composables/photos/editor/photo";
import {aspectRatioOptions, croppedArea, cropperReady, photoAspectRatio, selectedAspectRatio, setCropData} from "src/composables/photos/editor/crop";
import {debounce, useQuasar} from "quasar";
import {successObject} from "src/composables/dialog";
import PhotoEditorSkeleton from "components/photos/PhotoEditorSkeleton.vue";
import {storeToRefs} from "pinia";
import FormSubmitButton from "components/FormSubmitButton.vue";
import FormWrapper from "components/FormWrapper.vue";
const $route = useRoute();
const $q = useQuasar();
@@ -43,24 +45,24 @@ watch(() => [adjustment.value, croppedAreaForPreview.value], debounce(() => {
const savePhotoAdjustment = (photoId) => {
const adjustmentInput = {...adjustment.value};
if (croppedArea.value.left !== null) {
if (croppedArea.value && croppedArea.value.left !== null) {
adjustmentInput.crop = {...croppedArea.value}
}
usePhotosStore().adjust(photoId, adjustmentInput).then((data) => {
noCacheTimestamp.value = (new Date()).getTime();
photo.value = data;
$q.notify(successObject("Fotka úspěšně upravena"));
});
};
onMounted(() => {
fetchPhoto(photoId).then(() => {
const flightNameFormatted = flightName(photo.value.flight);
usePhotosStore().fetchDetail(photoId).then((p) => {
const flightNameFormatted = flightName(p.flight);
if (photo.value.adjustment) {
const photoAdjustment = photo.value.adjustment;
photoAspectRatio.value = p.width / p.height;
if (p.adjustment) {
const photoAdjustment = p.adjustment;
const src = photoAdjustment || defaultAdjustments;
for (const i in defaultAdjustments) {
adjustment.value[i] = src[i];
@@ -77,33 +79,35 @@ onMounted(() => {
}
useAppStore().setBreadcrumbs([
{to: {name: "myFlights"}, label: "Moje lety"},
{to: {name: "flightDetail", params: {id: photo.value.flightId}}, label: flightNameFormatted},
{to: {name: "flightEdit", params: {id: photo.value.flightId, step: 'photos'}}, label: "Fotografie"},
{to: {name: "flightDetail", params: {id: p.flightId}}, label: flightNameFormatted},
{to: {name: "flightEdit", params: {id: p.flightId, step: 'photos'}}, label: "Fotografie"},
{label: "Foto editor"}
]);
})
useAppStore().setPageTitle("Foto editor");
});
const {isQueryRunning, isMutationRunning, photo} = storeToRefs(usePhotosStore());
</script>
<template>
<q-resize-observer @resize="onResize" :debounce="100"/>
<PhotoEditorSkeleton v-if="loading" />
<PhotoEditorSkeleton v-if="isQueryRunning"/>
<template v-if="!loading">
<template v-if="!isQueryRunning">
<q-card :style="`width: ${splitterWidth}px; margin: 0 auto`">
<VuePictureCropper
v-if="editorTab === 'crop'"
:img="uncroppedAdjusted"
:boxStyle="{
v-if="editorTab === 'crop'"
:img="uncroppedAdjusted"
:boxStyle="{
width: '100%',
height: '100%',
backgroundColor: '#f8f8f8',
margin: 'auto',
}"
:options="{
:options="{
viewMode: 1,
autoCropArea: 1,
dragMode: 'none',
@@ -111,8 +115,8 @@ onMounted(() => {
draggable: false,
rotatable: false,
}"
@cropend="setCropData"
@ready="cropperReady"
@cropend="setCropData"
@ready="cropperReady"
/>
<div class="overflow-hidden relative-position" v-else-if="editorTab === 'rotate'">
@@ -123,29 +127,29 @@ onMounted(() => {
<div class="overflow-hidden" v-else>
<q-img fit="contain" :src="croppedAdjusted" v-show="!compare"/>
<q-splitter
v-show="compare"
v-model="splitter"
:limits="[0, 100]"
:style="{
v-show="compare"
v-model="splitter"
:limits="[0, 100]"
:style="{
height: Math.round(splitterWidth / photoAspectRatio) + 'px',
width: splitterWidth.value + 'px'
}"
before-class="overflow-hidden"
after-class="overflow-hidden">
before-class="overflow-hidden"
after-class="overflow-hidden">
<template #before>
<img
:width="splitterWidth"
class="absolute-top-left"
:src="croppedUnadjusted"
alt="before"
:width="splitterWidth"
class="absolute-top-left"
:src="croppedUnadjusted"
alt="before"
/>
</template>
<template #after>
<img
:width="splitterWidth"
class="absolute-top-right"
:src="croppedAdjusted"
alt="after"
:width="splitterWidth"
class="absolute-top-right"
:src="croppedAdjusted"
alt="after"
/>
</template>
</q-splitter>
@@ -167,121 +171,120 @@ onMounted(() => {
</q-tabs>
<q-separator/>
<q-tab-panels v-model="editorTab" animated>
<q-tab-panel name="colors">
<q-list>
<q-item>
<q-item-section avatar>
<q-icon name="contrast"/>
</q-item-section>
<q-item-section>
<q-slider
v-model="adjustment.contrast"
:min="0.5"
:max="1.5"
:step="0.01"
label-always
@dblclick="adjustment.contrast=1"
:label="true"
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar>
<q-icon name="brightness_6"/>
</q-item-section>
<q-item-section>
<q-slider
v-model="adjustment.brightness"
:min="0.5"
:max="1.5"
:step="0.01"
:label="true"
label-always
@dblclick="adjustment.brightness = 1"
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar>
<q-icon name="palette"/>
</q-item-section>
<q-item-section>
<q-slider
v-model="adjustment.saturation"
:min="0"
:max="2"
:step="0.05"
:label="true"
label-always
@dblclick="adjustment.saturation = 1"
/>
</q-item-section>
</q-item>
</q-list>
</q-tab-panel>
<q-tab-panel name="details">
<q-list>
<q-item>
<q-item-section avatar>
<q-icon name="deblur"/>
</q-item-section>
<q-item-section>
<q-slider
v-model="adjustment.sharpness"
:min="-3"
:max="8"
:step="1"
:label="true"
label-always
snap
@dblclick="adjustment.sharpness=1"
/>
</q-item-section>
</q-item>
</q-list>
</q-tab-panel>
<q-tab-panel name="rotate">
<q-list>
<q-item>
<q-item-section avatar>
<q-btn round flat icon="rotate_left" @click="adjustment.rotate -= 0.1"/>
</q-item-section>
<q-item-section>
<FormWrapper :is-request-pending="isMutationRunning" @save="savePhotoAdjustment(photoId)">
<q-tab-panels v-model="editorTab" animated>
<q-tab-panel name="colors">
<q-list>
<q-item>
<q-item-section avatar>
<q-icon name="contrast"/>
</q-item-section>
<q-item-section>
<q-slider
v-model="adjustment.rotate"
:min="-45"
:max="45"
:step="0.1"
:label="true"
label-always
@dblclick="adjustment.rotate=0"
v-model="adjustment.contrast"
:min="0.5"
:max="1.5"
:step="0.01"
label-always
@dblclick="adjustment.contrast=1"
:label="true"
/>
</q-item-section>
<q-item-section avatar>
<q-btn round flat icon="rotate_right" @click="adjustment.rotate += 0.1"/>
</q-item-section>
</q-item>
</q-list>
</q-tab-panel>
<q-tab-panel name="crop">
<q-btn-toggle
no-caps
spread
v-model="selectedAspectRatio"
toggle-color="primary"
:options="aspectRatioOptions"
class="q-ma-lg"
/>
</q-tab-panel>
</q-tab-panels>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar>
<q-icon name="brightness_6"/>
</q-item-section>
<q-item-section>
<q-slider
v-model="adjustment.brightness"
:min="0.5"
:max="1.5"
:step="0.01"
:label="true"
label-always
@dblclick="adjustment.brightness = 1"
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar>
<q-icon name="palette"/>
</q-item-section>
<q-item-section>
<q-slider
v-model="adjustment.saturation"
:min="0"
:max="2"
:step="0.05"
:label="true"
label-always
@dblclick="adjustment.saturation = 1"
/>
</q-item-section>
</q-item>
</q-list>
</q-tab-panel>
<q-tab-panel name="details">
<q-list>
<q-item>
<q-item-section avatar>
<q-icon name="deblur"/>
</q-item-section>
<q-item-section>
<q-slider
v-model="adjustment.sharpness"
:min="-3"
:max="8"
:step="1"
:label="true"
label-always
snap
@dblclick="adjustment.sharpness=1"
/>
</q-item-section>
</q-item>
</q-list>
</q-tab-panel>
<q-tab-panel name="rotate">
<q-list>
<q-item>
<q-item-section avatar>
<q-btn round flat icon="rotate_left" @click="adjustment.rotate -= 0.1"/>
</q-item-section>
<q-item-section>
<q-slider
v-model="adjustment.rotate"
:min="-45"
:max="45"
:step="0.1"
:label="true"
label-always
@dblclick="adjustment.rotate=0"
/>
</q-item-section>
<q-item-section avatar>
<q-btn round flat icon="rotate_right" @click="adjustment.rotate += 0.1"/>
</q-item-section>
</q-item>
</q-list>
</q-tab-panel>
<q-tab-panel name="crop">
<q-btn-toggle
no-caps
spread
v-model="selectedAspectRatio"
toggle-color="primary"
:options="aspectRatioOptions"
class="q-ma-lg"
/>
</q-tab-panel>
</q-tab-panels>
</FormWrapper>
</q-card-section>
<q-card-actions>
<q-space/>
<q-btn color="primary" icon="save" @click="savePhotoAdjustment(photoId)">Uložit</q-btn>
</q-card-actions>
</q-card>
</template>
</template>
src/pages/profile/organization/EditOrganizationPage.vue
+8 -6
View File
@@ -1,6 +1,5 @@
<script setup>
import {onMounted} from "vue";
import {loading, organization, fetchOrganization, isRequestPending} from "src/composables/objects/organization";
import {useAppStore} from "stores/App";
import {useRoute, useRouter} from "vue-router";
import {useOrganizationsStore} from "stores/Organizations";
@@ -8,15 +7,16 @@ import {successObject} from "src/composables/dialog";
import {useQuasar} from "quasar";
import OrganizationEditSkeleton from "components/organizations/OrganizationEditSkeleton.vue";
import OrganizationForm from "components/organizations/OrganizationForm.vue";
import {storeToRefs} from "pinia";
const organizationId = parseInt(useRoute().params.id);
onMounted(() => {
fetchOrganization(organizationId).then(() => {
useAppStore().setPageTitle(`${organization.value.name} - editace`);
useOrganizationsStore().fetchDetail(organizationId).then((o) => {
useAppStore().setPageTitle(`${o.name} - editace`);
useAppStore().setBreadcrumbs([
{to: {name: "organizations"}, label: "Organizace"},
{to: {name: "organizationDetail", params: {id: organizationId}}, label: organization.value.name},
{to: {name: "organizationDetail", params: {id: organizationId}}, label: o.name},
{label: "Editace"}
])
})
@@ -30,15 +30,17 @@ const handleSave = (formData) => {
$router.push({name: "organizationDetail", params: {id: organizationId}});
});
}
const {isQueryRunning, isMutationRunning, organization} = storeToRefs(useOrganizationsStore());
</script>
<template>
<OrganizationEditSkeleton v-if="loading"/>
<OrganizationEditSkeleton v-if="isQueryRunning"/>
<OrganizationForm
v-else
:organization="organization"
:is-request-pending="isRequestPending"
:is-request-pending="isMutationRunning"
@save="handleSave"
/>
</template>
src/pages/profile/organization/NewOrganizationPage.vue
+4 -2
View File
@@ -4,8 +4,8 @@ import {useQuasar} from "quasar";
import {successObject} from "src/composables/dialog";
import {useOrganizationsStore} from "stores/Organizations";
import {useAppStore} from "stores/App";
import {isRequestPending} from "src/composables/objects/organization";
import OrganizationForm from "components/organizations/OrganizationForm.vue";
import {storeToRefs} from "pinia";
const $q = useQuasar();
const router = useRouter();
@@ -21,8 +21,10 @@ useAppStore().setBreadcrumbs([
{to: {name: "organizations"}, label: "Organizace"},
{label: "Nová"}
]);
const {isMutationRunning} = storeToRefs(useOrganizationsStore());
</script>
<template>
<OrganizationForm @save="handleSave" :is-request-pending="isRequestPending"/>
<OrganizationForm @save="handleSave" :is-request-pending="isMutationRunning"/>
</template>
src/pages/profile/organization/OrganizationDetailPage.vue
+11 -10
View File
@@ -1,7 +1,6 @@
<script setup>
import {useRoute} from "vue-router";
import {onMounted} from "vue";
import {organization, fetchOrganization, loading, myOrganizationIds, addToOrganization, removeFromOrganization} from "src/composables/objects/organization";
import {computed, onMounted} from "vue";
import {useAppStore} from "stores/App";
import FAB from "components/FAB.vue";
import {storeToRefs} from "pinia";
@@ -11,39 +10,41 @@ import AircraftsList from "components/aircrafts/AircraftsList.vue";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import {useQuasar} from "quasar";
import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
import {useOrganizationsStore} from "stores/Organizations";
const organizationId = parseInt(useRoute().params.id);
const loggedUser = storeToRefs(useUserStore()).user;
const $q = useQuasar();
onMounted(() => {
fetchOrganization(organizationId).then(() => {
useAppStore().setPageTitle(organization.value.name);
useOrganizationsStore().fetchDetail(organizationId).then((o) => {
useAppStore().setPageTitle(o.name);
useAppStore().setBreadcrumbs([
{to: {name: "organizations"}, label: "Organizace"},
{label: organization.value.name}
{label: o.name}
])
});
});
const myOrganizationIds = computed(() => (loggedUser.value && loggedUser.value.organizations?.map(o => o.id)) || []);
const {isQueryRunning, organization} = storeToRefs(useOrganizationsStore());
</script>
<template>
<h3>Členové</h3>
<div class="q-my-md">
<q-btn color="positive" @click="addToOrganization(organizationId)" v-if="!myOrganizationIds.includes(organizationId)">
<q-btn color="positive" @click="useOrganizationsStore().addUserToOrganization(organizationId)" v-if="!myOrganizationIds.includes(organizationId)">
<q-icon name="add"/>
Přidat se
</q-btn>
<q-btn color="warning" @click="removeFromOrganization(organizationId)" v-else>
<q-btn color="warning" @click="useOrganizationsStore().removeUserFromOrganization(organizationId)" v-else>
<q-icon name="remove"/>
Opustit organizaci
</q-btn>
</div>
<BasicListSkeleton :items-count-min="1" :items-count-max="5" v-if="loading || !organization"/>
<BasicListSkeleton :items-count-min="1" :items-count-max="5" v-if="isQueryRunning || !organization"/>
<template v-else>
<q-list bordered separator v-if="organization.users.length > 0">
<q-item v-for="user in organization.users" :key="user">
@@ -64,7 +65,7 @@ onMounted(() => {
<h3>Letadla</h3>
<BasicListSkeleton :items-count-min="1" :items-count-max="5" v-if="loading || !organization"/>
<BasicListSkeleton :items-count-min="1" :items-count-max="5" v-if="isQueryRunning || !organization"/>
<template v-else>
<AircraftsList :items="organization.aircrafts" v-if="organization.aircrafts.length > 0"/>
<BasicInfoBanner v-else>
src/pages/profile/organization/OrganizationsPage.vue
+11 -5
View File
@@ -1,22 +1,28 @@
<script setup>
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
import { onMounted} from "vue";
import {fetchOrganizations, loading, myOrganizationIds, organizations} from "src/composables/objects/organization";
import {computed, onMounted} from "vue";
import {useAppStore} from "stores/App";
import FAB from "components/FAB.vue";
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";
onMounted(() => {
fetchOrganizations();
useOrganizationsStore().fetch();
useAppStore().setPageTitle("Organizace");
});
const loggedUser = storeToRefs(useUserStore()).user;
const myOrganizationIds = computed(() => (loggedUser.value && loggedUser.value.organizations?.map(o => o.id)) || []);
const {isQueryRunning, organizations} = storeToRefs(useOrganizationsStore());
</script>
<template>
<BasicListSkeleton v-if="loading"/>
<BasicInfoBanner v-else-if="!loading && organizations.length === 0" :route-add='{name: "addOrganization"}'>
<BasicListSkeleton v-if="isQueryRunning"/>
<BasicInfoBanner v-else-if="!isQueryRunning && organizations.length === 0" :route-add='{name: "addOrganization"}'>
Aktuálně nejsou dostupné žádné organizace, ke kterým by ses mohl/a přidat.
Zaregistruj sem svůj aeroklub, abyste mohli sdílet letadla.
</BasicInfoBanner>
src/pages/profile/poi/EditPointOfInterestPage.vue
+7 -7
View File
@@ -1,6 +1,5 @@
<script setup>
import POIEditSkeleton from "components/poi/POIEditSkeleton.vue";
import {fetchPoi, loading, poi} from "src/composables/objects/poi";
import {onMounted} from "vue";
import {useRoute, useRouter} from "vue-router";
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
@@ -16,11 +15,11 @@ import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
const poiId = parseInt(useRoute().params.id);
onMounted(() => {
fetchPoi(poiId).then(() => {
useAppStore().setPageTitle(`${poi.value.name} - editace`);
usePointsOfInterestStore().fetchDetail(poiId).then((p) => {
useAppStore().setPageTitle(`${p.name} - editace`);
useAppStore().setBreadcrumbs([
{to: {name: "poi"}, label: "Zajímavá místa"},
{to: {name: "poiDetail", params: {id: poiId}}, label: poi.value.name},
{to: {name: "poiDetail", params: {id: poiId}}, label: p.name},
{label: "Editace"},
]);
});
@@ -30,6 +29,7 @@ onMounted(() => {
const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).items;
const loggedUser = storeToRefs(useUserStore()).user;
const {isQueryRunning, pointOfInterest, isMutationRunning} = storeToRefs(usePointsOfInterestStore());
const $q = useQuasar();
const router = useRouter();
@@ -42,10 +42,10 @@ const handleSave = (data) => {
</script>
<template>
<POIEditSkeleton v-if="loading"/>
<POIEditSkeleton v-if="isQueryRunning"/>
<AccessDeniedBanner
v-else-if="poi.createdById !== loggedUser.id"
v-else-if="pointOfInterest.createdById !== loggedUser.id"
:route-back="{name: 'poiDetail', params: {id: poiId}}"
/>
<POIForm :poi="poi" :types="poiTypes" v-else @save="handleSave"/>
<POIForm :poi="pointOfInterest" :types="poiTypes" v-else @save="handleSave"/>
</template>
src/pages/profile/poi/NewPointOfInterestPage.vue
+4 -3
View File
@@ -16,15 +16,16 @@ const handleSave = (formData) => {
router.push({name: "poi"});
})
}
const isRequestPending = storeToRefs(usePointsOfInterestStore()).isMutationRunning;
useAppStore().setPageTitle("Nové zajímavé místo");
useAppStore().setBreadcrumbs([
{to: "poi", label: "Zajímavá místa"},
{label: "Nové"},
])
const {isMutationRunning} = storeToRefs(usePointsOfInterestStore());
</script>
<template>
<POIForm @save="handleSave" :is-request-pending="isRequestPending"/>
<POIForm @save="handleSave" :is-request-pending="isMutationRunnin"/>
</template>
src/pages/profile/poi/PointOfInterestDetailPage.vue
+18 -17
View File
@@ -3,57 +3,58 @@ import {onMounted} from "vue";
import {useRoute} from "vue-router";
import POIDetailSkeleton from "components/poi/POIDetailSkeleton.vue";
import FAB from "components/FAB.vue";
import {fetchPoi, loading, poi} from "src/composables/objects/poi";
import PhotosList from "components/photos/PhotosEditorList.vue";
import {useAppStore} from "stores/App";
import EmbeddedMap from "components/map/EmbeddedMap.vue";
import {useUserStore} from "stores/User";
import {storeToRefs} from "pinia";
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";
const loggedUser = storeToRefs(useUserStore()).user;
onMounted(() => {
fetchPoi(useRoute().params.id).then(() => {
useAppStore().setPageTitle(`${poi.value.name}`);
usePointsOfInterestStore().fetchDetail(useRoute().params.id).then((p) => {
useAppStore().setPageTitle(`${p.name}`);
useAppStore().setBreadcrumbs([
{to: {name: "poi"}, label: "Zajímavá místa"},
{label: poi.value.name},
{label: p.name},
])
});
})
});
const {isQueryRunning, pointOfInterest} = storeToRefs(usePointsOfInterestStore());
</script>
<template>
<POIDetailSkeleton v-if="loading || !poi"/>
<POIDetailSkeleton v-if="isQueryRunning || !pointOfInterest"/>
<template v-else>
<article v-html="poi.description" class="q-my-lg" />
<article v-html="pointOfInterest.description" class="q-my-lg" />
<EmbeddedMap
v-if="poi.gpsLatitude && poi.gpsLongitude"
:gps-latitude="poi.gpsLatitude"
:gps-longitude="poi.gpsLongitude"
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>
<PhotosList
:photos="poi.photos"
:show-actions="false"
v-if="poi.photos.length > 0"
<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>
<FlightsList :items="poi.flights" v-if="poi.flights.length > 0 && loggedUser.id === poi.createdById"/>
<FlightsList :items="pointOfInterest.flights" v-if="pointOfInterest.flights.length > 0 && loggedUser.id === pointOfInterest.createdById"/>
<FAB v-if="poi.createdById === loggedUser.id" :router-link="{name: 'poiEdit', params:{id: poi.id}}" mode="edit"/>
<FAB v-if="pointOfInterest.createdById === loggedUser.id" :router-link="{name: 'poiEdit', params:{id: pointOfInterest.id}}" mode="edit"/>
</template>
</template>
src/pages/profile/poi/PointsOfInterestPage.vue
+7 -6
View File
@@ -1,24 +1,25 @@
<script setup>
import {onMounted} from "vue";
import {fetchPOIList, loading, pointsOfInterest} from "src/composables/objects/poi";
import {useAppStore} from "stores/App";
import POIList from "components/poi/POIList.vue";
import FAB from "components/FAB.vue";
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
import {flights} from "src/composables/objects/flight";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
import {storeToRefs} from "pinia";
onMounted(() => {
fetchPOIList();
usePointsOfInterestStore().fetch();
useAppStore().setPageTitle("Zajímavá místa");
});
useAppStore().setPageTitle("Zajímavá místa")
const {isQueryRunning, pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
</script>
<template>
<BasicListSkeleton :items-count-min="5" :items-count-max="10" v-if="loading"/>
<BasicListSkeleton :items="10" v-if="isQueryRunning"/>
<BasicInfoBanner
v-else-if="!loading && pointsOfInterest.length === 0"
v-else-if="!isQueryRunning && pointsOfInterest.length === 0"
:route-add="{name: 'addPoi'}"
label-add="Přidat"
>
src/pages/public/IndexPage.vue
+4 -4
View File
@@ -24,7 +24,7 @@
<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-h2 text-center">Pochlub se polétáním</div>
<div class="text-h3 text-center">Pochlub se polétáním</div>
<q-timeline color="primary" class="q-my-lg">
<q-timeline-entry title="Zaznamenej si let">
@@ -59,9 +59,9 @@
</q-timeline-entry>
</q-timeline>
<div class="text-center q-my-lg">
<q-btn size="xl" :to="{name: 'registration'}" rounded color="secondary">Založit profil</q-btn>
</div>
<div class="text-center q-my-lg">
<q-btn size="xl" :to="{name: 'registration'}" rounded color="secondary">Založit profil</q-btn>
</div>
</div>
</div>
</div>
src/pages/public/PilotProfilePage.vue
+8 -2
View File
@@ -1,13 +1,19 @@
<script setup>
import {useRoute} from "vue-router";
import {user as pilot, loading as pilotLoading} from "src/composables/objects/user";
import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue";
import {storeToRefs} from "pinia";
import {useUserStore} from "stores/User";
import PilotProfileCard from "components/profile/PilotProfileCard.vue";
import {onMounted} from "vue";
const loggedUser = storeToRefs(useUserStore()).user;
const username = useRoute().params.username;
const {publicUser: pilot, isQueryRunning: pilotLoading} = storeToRefs(useUserStore());
onMounted(() => {
useUserStore().fetchPublicUserDetail(username);
})
</script>
<template>
@@ -16,7 +22,7 @@ const username = useRoute().params.username;
<router-view :logged-user="loggedUser" :username="username"/>
</div>
<div class="col-12 col-md-4">
<PublicProfileSkeleton v-if="pilotLoading"/>
<PublicProfileSkeleton v-if="pilotLoading || !pilot"/>
<PilotProfileCard v-else :pilot="pilot"/>
</div>
</div>
src/pages/public/pilotProfile/CopilotDetailPage.vue
+10 -7
View File
@@ -1,11 +1,12 @@
<script setup>
import {useRoute} from "vue-router";
import {copilot, fetchCopilot, loading as copilotLoading} from "src/composables/objects/copilot";
import {fetchUser, user as pilot, loading as pilotLoading} from "src/composables/objects/user";
import {onMounted} from "vue";
import FlightsList from "components/flights/FlightsList.vue";
import {useAppStore} from "stores/App";
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
import {useUserStore} from "stores/User";
import {useCopilotsStore} from "stores/Copilots";
import {storeToRefs} from "pinia";
const $route = useRoute();
const copilotId = parseInt($route.params.id);
@@ -22,17 +23,19 @@ const props = defineProps({
}
});
const {copilot, isQueryRunning} = storeToRefs(useCopilotsStore());
const {publicUser, isQueryRunning: isPilotQueryRunning} = storeToRefs(useUserStore());
onMounted(() => {
Promise.all([
fetchUser(props.username),
fetchCopilot(copilotId, props.username)
useUserStore().fetchPublicUserDetail(props.username),
useCopilotsStore().fetchDetail(copilotId, props.username)
]).then(() => {
useAppStore().setPageTitle(`${pilot.value.name} + ${copilot.value.name}`);
useAppStore().setPageTitle(`${publicUser.value.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: pilot.value.name}
{label: publicUser.value.name}
]);
});
});
@@ -40,7 +43,7 @@ onMounted(() => {
</script>
<template>
<BasicListSkeleton v-if="copilotLoading || pilotLoading" class="q-mb-md"/>
<BasicListSkeleton v-if="isQueryRunning || isPilotQueryRunning || !copilot" class="q-mb-md"/>
<template v-else>
<h3>Společné lety</h3>
src/pages/public/pilotProfile/EventDetailPage.vue
+10 -12
View File
@@ -1,25 +1,23 @@
<script setup>
import {onMounted, watch} from "vue";
import {event, fetchEvent, loading} from "src/composables/objects/event";
import {useRoute} from "vue-router";
import {useAppStore} from "stores/App";
import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
import {fetchUser, loading as pilotLoading, user as pilot} from "src/composables/objects/user";
import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue";
import PilotProfileCard from "components/profile/PilotProfileCard.vue";
import EventDetailSkeleton from "components/event/EventDetailSkeleton.vue";
import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
import FAB from "components/FAB.vue";
import FlightsList from "components/flights/FlightsList.vue";
import {useEventsStore} from "stores/Events";
import {useUserStore} from "stores/User";
import {storeToRefs} from "pinia";
const routeParams = useRoute().params;
onMounted(() => {
fetchEvent(routeParams.id, routeParams.username);
fetchUser(routeParams.username)
useEventsStore().fetchDetail(routeParams.id, routeParams.username);
useUserStore().fetchPublicUserDetail(routeParams.username);
})
watch(event, (newVal) => {
// const eventNameFormatted = eventName(newVal);
const {isQueryRunning, event} = storeToRefs(useEventsStore());
watch(() => event.value, (newVal) => {
useAppStore().setPageTitle(newVal.name);
useAppStore().setBreadcrumbs([
{to: {name: 'homepage'}, label: "Polétání.cz"},
@@ -33,8 +31,7 @@ watch(event, (newVal) => {
<template>
<div>
<EventDetailSkeleton v-if="loading || !event"/>
<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">
@@ -66,6 +63,7 @@ watch(event, (newVal) => {
<FlightsList
v-else
:items="event.flights"
class="q-my-lg"
:route-detail="{name: 'publicFlightDetail', params: {username: routeParams.username}}"
/>
src/pages/public/pilotProfile/EventsListPage.vue
+6 -6
View File
@@ -1,10 +1,11 @@
<script setup>
import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
import {event, events, fetchEvents, loading} from "src/composables/objects/event";
import EventsList from "components/event/EventsList.vue";
import {onMounted, watch} from "vue";
import PublicFlightEventSwitcher from "components/navigation/PublicFlightEventSwitcher.vue";
import {useAppStore} from "stores/App";
import {useEventsStore} from "stores/Events";
import {storeToRefs} from "pinia";
const props = defineProps({
loggedUser: {
@@ -28,20 +29,19 @@ onMounted(() => {
{to: {name: "publicProfileDetail", params: {username: props.username}}, label: `@${props.username}`},
{label: "Události"}
]);
fetchEvents(props.username);
useEventsStore().fetch(props.username);
}
);
const {isQueryRunning, events} = storeToRefs(useEventsStore());
</script>
<template>
<PublicFlightEventSwitcher :username="username"/>
<FlightsListSkeleton v-if="loading"/>
<FlightsListSkeleton v-if="isQueryRunning"/>
<q-banner class="bg-primary text-white" v-else-if="!loading && events.length === 0">
<q-banner class="bg-primary text-white" v-else-if="!isQueryRunning && events.length === 0">
Tento pilot zatím nepublikoval žádnou udalost.
</q-banner>
src/pages/public/pilotProfile/FlightDetailPage.vue
+16 -16
View File
@@ -1,34 +1,34 @@
<script setup>
import {onMounted, watch} from "vue";
import {fetchFlight, flight, flightName, loading} from "src/composables/objects/flight";
import {useRoute} from "vue-router";
import FlightTrackMap from "components/flights/FlightTrackMap.vue";
import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
import {useAppStore} from "stores/App";
import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
import {fetchUser, loading as pilotLoading, user as pilot} from "src/composables/objects/user";
import PhotoGallery from "components/photos/PhotoGallery.vue";
import {storeToRefs} from "pinia";
import {useFlightsStore} from "stores/Flights";
import {flightName} from "src/composables/objects/flight";
const routeParams = useRoute().params;
onMounted(() => {
fetchFlight(routeParams.id, routeParams.username);
fetchUser(routeParams.username)
useFlightsStore().fetchDetail(routeParams.id, routeParams.username).then(f => {
const flightNameFormatted = flightName(f);
useAppStore().setPageTitle(flightNameFormatted);
useAppStore().setBreadcrumbs([
{to: {name: 'homepage'}, label: "Polétání.cz"},
{to: {name: "publicProfileDetail", params: {username: routeParams.username}}, label: `@${routeParams.username}`},
{label: flightNameFormatted}
]);
})
})
watch(flight, (newVal) => {
const flightNameFormatted = flightName(newVal);
useAppStore().setPageTitle(flightNameFormatted);
useAppStore().setBreadcrumbs([
{to: {name: 'homepage'}, label: "Polétání.cz"},
{to: {name: "publicProfileDetail", params: {username: routeParams.username}}, label: `@${routeParams.username}`},
{label: flightNameFormatted}
]);
});
const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
</script>
<template>
<div>
<FlightDetailSkeleton v-if="loading || !flight"/>
<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">
@@ -44,8 +44,8 @@ watch(flight, (newVal) => {
<q-card-section>
<FlightBasicInfo
:flight="flight"
:copilot-detail-route="{name: 'publicCopilotDetail', params: {username: routeParams.username}}"
:flight="flight"
:copilot-detail-route="{name: 'publicCopilotDetail', params: {username: routeParams.username}}"
/>
<article class="q-my-lg" v-html="flight.description"/>
src/pages/public/pilotProfile/FlightsListPage.vue
+12 -7
View File
@@ -1,11 +1,12 @@
<script setup>
import {fetchFlights, flights, loading as flightsLoading} from "src/composables/objects/flight";
import {fetchUser, user as pilot} from "src/composables/objects/user";
import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
import FlightsList from "components/flights/FlightsList.vue";
import PublicFlightEventSwitcher from "components/navigation/PublicFlightEventSwitcher.vue";
import {onMounted} from "vue";
import {useAppStore} from "stores/App";
import {useUserStore} from "stores/User";
import {useFlightsStore} from "stores/Flights";
import {storeToRefs} from "pinia";
const props = defineProps({
loggedUser: {
@@ -20,23 +21,27 @@ const props = defineProps({
});
onMounted(() => {
fetchUser(props.username).then(user => {
useUserStore().fetchPublicUserDetail(props.username).then(user => {
useAppStore().setPageTitle(user.publicUsername);
useAppStore().setBreadcrumbs([
{to: {name: 'homepage'}, label: "Polétání.cz"},
{label: `@${user.publicUsername}`},
])
})
fetchFlights(props.username);
})
useFlightsStore().fetch(props.username);
});
const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
const {publicUser: pilot} = storeToRefs(useUserStore());
</script>
<template>
<PublicFlightEventSwitcher :username="username" />
<FlightsListSkeleton v-if="flightsLoading"/>
<FlightsListSkeleton v-if="areFlightsLoading"/>
<q-banner class="bg-primary text-white" v-else-if="!flightsLoading && 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>
src/stores/Aircrafts.js
+48 -48
View File
@@ -1,57 +1,57 @@
import {defineStore} from 'pinia'
import {apolloWrapper} from "src/graphql/apollo";
import {defineStore} from "pinia";
import {ref} from "vue";
import {AIRCRAFT_DETAIL, AIRCRAFTS_LIST} from "src/graphql/queries/aircrafts";
import {CREATE_AIRCRAFT, DELETE_AIRCRAFT, EDIT_AIRCRAFT} from "src/graphql/mutations/aircrafts";
import {deleteFromItems, updateInItems} from "stores/helpers";
import {deleteFromItems, mutate, query, updateInItems} from "stores/helpers";
import {CREATE_AIRCRAFT, EDIT_AIRCRAFT, DELETE_AIRCRAFT} from "src/graphql/mutations/aircrafts";
export const useAircraftsStore = defineStore('Aircrafts', {
state: () => ({
items: [],
isMutationRunning: false
}),
export const useAircraftsStore = defineStore('Aircrafts', () => {
const aircraft = ref(null);
const aircrafts = ref([]);
const isMutationRunning = ref(false);
const isQueryRunning = ref(false);
getters: {
getDetail: (state) => (aircraftId) => state.items.find(a => a.id === aircraftId) || {}
},
const fetchDetail = (id) => {
return query({
isQueryRunning,
query: AIRCRAFT_DETAIL,
variables: {id},
}).then(item => aircraft.value = item);
};
actions: {
fetchDetail(id) {
return apolloWrapper
.query(AIRCRAFT_DETAIL, {id})
.then((result) => result.data.aircraft);
},
create(formData) {
delete formData['id'];
const fetch = () => {
return query({
isQueryRunning,
query: AIRCRAFTS_LIST
}).then(items => aircrafts.value = items);
}
this.isMutationRunning = true;
return apolloWrapper.mutate(CREATE_AIRCRAFT, {input: formData}).then(({data}) => {
// this.items.push(data.createAircraft);
const create = (input) => {
return mutate({
isMutationRunning,
mutation: CREATE_AIRCRAFT,
variables: {input}
}).then(item => aircrafts.value.push(item))
}
return data.createAircraft;
}).finally(() => this.isMutationRunning = false);
},
delete(id) {
return apolloWrapper.mutate(DELETE_AIRCRAFT, {id}).then(({data}) => {
deleteFromItems(this.items, 'id', id);
const update = (id, input) => {
return mutate({
isMutationRunning,
mutation: EDIT_AIRCRAFT,
variables: {id, input}
}).then(item => updateInItems(aircrafts.value, 'id', item))
}
return data;
});
},
update(id, formData) {
this.isMutationRunning = true;
return apolloWrapper.mutate(EDIT_AIRCRAFT, {id: id, input: formData}).then(({data}) => {
const aircraft = data.editAircraft;
updateInItems(this.items, 'id', aircraft);
return aircraft;
}).finally(() => this.isMutationRunning = false);
},
fetch() {
return apolloWrapper
.query(AIRCRAFTS_LIST)
.then((result) => {
this.items = result.data.aircrafts;
return this.items;
});
const destroy = (id) => {
return mutate({
isMutationRunning,
mutation: DELETE_AIRCRAFT,
variables: {id}
}).then(item => deleteFromItems(aircrafts.value, 'id', item))
}
return {
aircrafts, aircraft, isQueryRunning, isMutationRunning, fetchDetail, fetch, create,
update, destroy
}
}
})
);
src/stores/Airports.js
+12 -14
View File
@@ -1,20 +1,18 @@
import {defineStore} from 'pinia'
import {apolloWrapper} from "src/graphql/apollo";
import {AIRPORTS_LIST} from "src/graphql/queries/airports";
import {ref} from "vue";
import {query} from "stores/helpers";
export const useAirportsStore = defineStore('Airports', {
state: () => ({
items: [],
}),
export const useAirportsStore = defineStore('Airports', () => {
const airports = ref([])
const isQueryRunning = ref(false);
actions: {
fetch() {
return apolloWrapper
.query(AIRPORTS_LIST)
.then((result) => {
this.items = result.data.airports;
return result.data.airports;
});
}
const fetch = () => {
return query({
isQueryRunning,
query: AIRPORTS_LIST,
}).then(items => airports.value = items);
}
return {airports, isQueryRunning, fetch};
})
src/stores/App.js
+23 -18
View File
@@ -1,22 +1,27 @@
import {defineStore} from 'pinia'
import {ref} from "vue";
export const useAppStore = defineStore('App', {
state: () => ({
pageTitle: null,
breadcrumbs: [],
appStatus: 200
}),
actions: {
resetAfterRouteChange() {
this.setPageTitle("");
this.setBreadcrumbs([]);
this.appStatus = 200;
},
setPageTitle(pageTitle) {
this.pageTitle = pageTitle;
},
setBreadcrumbs(breadcrumbs) {
this.breadcrumbs = breadcrumbs;
}
export const useAppStore = defineStore('App', () => {
const pageTitle = ref(null);
const breadcrumbs = ref([]);
const appStatus = ref(200); // TODO: toto nejspis nebude potreba!
const resetAfterRouteChange = () => {
setPageTitle("");
setBreadcrumbs([]);
appStatus.value = 200;
};
const setPageTitle = (value) => {
// TODO: je toto vubec potreba?
pageTitle.value = value;
}
const setBreadcrumbs = (items) => {
// TODO: je toto vubec potreba?
breadcrumbs.value = items;
}
return {
pageTitle, breadcrumbs, appStatus, resetAfterRouteChange, setPageTitle, setBreadcrumbs
}
})
src/stores/Copilots.js
+40 -33
View File
@@ -1,41 +1,48 @@
import {defineStore} from 'pinia'
import {apolloWrapper} from "src/graphql/apollo";
import {COPILOT_DETAIL, COPILOTS_LIST} from "src/graphql/queries/copilots";
import {CREATE_COPILOT, EDIT_COPILOT} from "src/graphql/mutations/copilot";
import {updateInItems} from "stores/helpers";
import {mutate, query, updateInItems} from "stores/helpers";
import {ref} from "vue";
export const useCopilotsStore = defineStore('Copilots', {
state: () => ({
items: [],
isMutationRunning: false,
}),
export const useCopilotsStore = defineStore('Copilots', () => {
const copilot = ref(null);
const copilots = ref([]);
const isMutationRunning = ref(false);
const isQueryRunning = ref(false);
actions: {
fetchDetail(copilotId, pilotUsername) {
return apolloWrapper.query(COPILOT_DETAIL, {id: copilotId, pilotUsername: pilotUsername}).then(({data}) => data.copilot);
},
fetch() {
return apolloWrapper.query(COPILOTS_LIST).then(result => {
this.items = result.data.copilots;
return result.data.copilots;
});
},
create(formData) {
delete formData['id'];
const fetchDetail = (id) => {
return query({
isQueryRunning,
query: COPILOT_DETAIL,
variables: {id},
}).then(item => copilot.value = item);
};
this.isMutationRunning = true;
return apolloWrapper.mutate(CREATE_COPILOT, {input: formData}).then(({data}) => {
const copilot = data.createCopilot;
this.items.push(copilot);
return copilot;
}).finally(() => this.isMutationRunning = false);
},
update(id, formData) {
return apolloWrapper.mutate(EDIT_COPILOT, {id: id, input: formData}).then(({data}) => {
const copilot = data.editCopilot;
updateInItems(this.items, "id", copilot);
return copilot;
}).finally(() => this.isMutationRunning = false);
},
const fetch = () => {
return query({
isQueryRunning,
query: COPILOTS_LIST,
}).then(items => copilots.value = items);
}
const create = (input) => {
return mutate({
isMutationRunning,
mutation: CREATE_COPILOT,
variables: {input},
}).then(item => copilots.value.push(item))
}
const update = (id, input) => {
return mutate({
isMutationRunning,
mutation: EDIT_COPILOT,
variables: {id, input}
}).then(item => updateInItems(copilots.value, 'id', item))
}
return {
copilot, copilots, isMutationRunning, isQueryRunning,
fetch, fetchDetail, create, update
}
})
src/stores/Events.js
+40 -34
View File
@@ -1,42 +1,48 @@
import {defineStore} from 'pinia'
import {apolloWrapper} from "src/graphql/apollo";
import {CREATE_EVENT, EDIT_EVENT} from "src/graphql/mutations/event";
import {updateInItems} from "stores/helpers";
import {mutate, query, updateInItems} from "stores/helpers";
import {ref} from "vue";
import {EVENT_DETAIL, EVENTS_LIST} from "src/graphql/queries/event";
export const useEventsStore = defineStore('Events', {
state: () => ({
items: [],
isMutationRunning: false,
}),
export const useEventsStore = defineStore('Copilots', () => {
const event = ref(null);
const events = ref([]);
const isMutationRunning = ref(false);
const isQueryRunning = ref(false);
actions: {
fetchDetail(eventId, username) {
return apolloWrapper.query(EVENT_DETAIL, {id: eventId, username: username}).then(({data}) => data.event);
},
fetch(username) {
return apolloWrapper.query(EVENTS_LIST, {username}).then(result => {
this.items = result.data.events;
return result.data.events;
});
},
create(formData) {
delete formData['id'];
const fetchDetail = (id) => {
return query({
isQueryRunning,
query: EVENT_DETAIL,
variables: {id},
}).then(item => event.value = item);
};
this.isMutationRunning = true;
return apolloWrapper.mutate(CREATE_EVENT, {input: formData}).then(({data}) => {
const event = data.createEvent;
event.flights = event.flights || [];
this.items.push(event);
return event;
}).finally(() => this.isMutationRunning = false);
},
update(id, formData) {
return apolloWrapper.mutate(EDIT_EVENT, {id: id, input: formData}).then(({data}) => {
const event = data.editEvent;
updateInItems(this.items, "id", event);
return event;
}).finally(() => this.isMutationRunning = false);
},
const fetch = (username = undefined) => {
return query({
isQueryRunning,
query: EVENTS_LIST,
variables: {username}
}).then(items => events.value = items);
}
const create = (input) => {
return mutate({
isMutationRunning,
mutation: CREATE_EVENT,
variables: {input},
}).then(item => events.value.push(item))
}
const update = (id, input) => {
return mutate({
isMutationRunning,
mutation: EDIT_EVENT,
variables: {id, input}
}).then(item => updateInItems(events.value, 'id', item))
}
return {
event, events, isMutationRunning, isQueryRunning, fetch, fetchDetail, create, update
}
})
src/stores/Flights.js
+102 -55
View File
@@ -1,67 +1,114 @@
import {defineStore} from 'pinia'
import {apolloWrapper} from "src/graphql/apollo"
import {FLIGHT_DETAIL, FLIGHTS_LIST} from "src/graphql/queries/flights";
import {EDIT_FLIGHT, CREATE_FLIGHT, DELETE_FLIGHT} from "src/graphql/mutations/flight";
import {updateInItems} from "stores/helpers";
import {deleteFromItems, mutate, query, updateInItems} from "stores/helpers";
import {ref} from "vue";
import {DELETE_AIRCRAFT} from "src/graphql/mutations/aircrafts";
export const useFlightsStore = defineStore('Flights', {
state: () => ({
items: [],
isMutationRunning: false
}),
export const useFlightsStore = defineStore('Flights', () => {
const flight = ref(null);
const flights = ref([]);
const isMutationRunning = ref(false);
const isQueryRunning = ref(false);
getters: {
getDetail: (state) => (flightId) => {
return state.items.find(f => f.id === flightId);
},
},
const fetchDetail = (id, username) => {
return query({
isQueryRunning,
query: FLIGHT_DETAIL,
variables: {username, id},
}).then(item => flight.value = item);
};
actions: {
create(formData) {
delete formData['id'];
return apolloWrapper.mutate(CREATE_FLIGHT, {input: formData}).then(({data}) => {
const flightId = data.createFlight.id;
const fetch = (username = undefined) => {
return query({
isQueryRunning,
query: FLIGHTS_LIST,
variables: {username}
}).then(items => flights.value = items);
}
// pitomy ohack kvuli tomu, ze se mi nedari dostat z API rovnou informace o nove vytvorenem letadle
this.fetchDetail(flightId).then(flight => {
this.items.push(flight);
})
return data.createFlight;
})
},
update(id, formData) {
this.isMutationRunning = true;
return apolloWrapper.mutate(EDIT_FLIGHT, {id: id, input: formData}).then(({data}) => {
const flight = data.editFlight;
updateInItems(this.items, "id", flight);
const create = (input) => {
return mutate({
isMutationRunning,
mutation: CREATE_FLIGHT,
variables: {input},
}).then(item => {
flights.value.push(item);
return item;
})
}
return flight;
}).finally(() => this.isMutationRunning = false);
},
fetchDetail(id, username = null) {
if (typeof id !== "number") {
id = parseInt(id);
}
return apolloWrapper.query(FLIGHT_DETAIL, {id, username}).then(result => result.data.flight);
},
fetch(username = null) {
return apolloWrapper
.query(FLIGHTS_LIST, {username})
.then((resp) => {
const data = resp.data;
this.items = data.flights;
return data.flights;
}).catch(err => console.log(err));
},
delete(id) {
return apolloWrapper.mutate(DELETE_FLIGHT, {id}).then(({data}) => {
const update = (id, input) => {
return mutate({
isMutationRunning,
mutation: EDIT_FLIGHT,
variables: {id, input}
}).then(item => {
updateInItems(flights.value, 'id', item);
flight.value = item;
})
}
const idx = this.items.indexOf(this.items.find(f => f.id === id));
this.items.splice(idx, 1);
const destroy = (id) => {
return mutate({
isMutationRunning,
mutation: DELETE_FLIGHT,
variables: {id}
}).then(item => deleteFromItems(flights.value, 'id', item))
}
return data.deleteFlight;
})
},
},
return {
flight, flights, isMutationRunning, isQueryRunning, fetchDetail, fetch, create, update, destroy
}
//
// actions: {
// create(formData) {
// delete formData['id'];
// return apolloWrapper.mutate(CREATE_FLIGHT, {input: formData}).then(({data}) => {
// const flightId = data.createFlight.id;
//
// // pitomy ohack kvuli tomu, ze se mi nedari dostat z API rovnou informace o nove vytvorenem letadle
// this.fetchDetail(flightId).then(flight => {
// this.items.push(flight);
// })
//
// return data.createFlight;
// })
// },
// update(id, formData) {
// this.isMutationRunning = true;
// return apolloWrapper.mutate(EDIT_FLIGHT, {id: id, input: formData}).then(({data}) => {
// const flight = data.editFlight;
// updateInItems(this.items, "id", flight);
//
// return flight;
// }).finally(() => this.isMutationRunning = false);
// },
// fetchDetail(id, username = null) {
// if (typeof id !== "number") {
// id = parseInt(id);
// }
// return apolloWrapper.query(FLIGHT_DETAIL, {id, username}).then(result => result.data.flight);
// },
// fetch(username = null) {
// return apolloWrapper
// .query(FLIGHTS_LIST, {username})
// .then((resp) => {
// const data = resp.data;
// this.items = data.flights;
// return data.flights;
// }).catch(err => console.log(err));
// },
// delete(id) {
// return apolloWrapper.mutate(DELETE_FLIGHT, {id}).then(({data}) => {
//
// const idx = this.items.indexOf(this.items.find(f => f.id === id));
// this.items.splice(idx, 1);
//
// return data.deleteFlight;
// })
// },
// },
});
src/stores/Organizations.js
+109 -47
View File
@@ -1,56 +1,118 @@
import {defineStore} from 'pinia'
import {apolloWrapper} from "src/graphql/apollo";
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 {updateInItems} from "stores/helpers";
import {mutate, query, updateInItems} from "stores/helpers";
import {ref} from "vue";
import {useUserStore} from "stores/User";
export const useOrganizationsStore = defineStore('Organizations', {
state: () => ({
items: [],
isMutationRunning: false,
}),
export const useOrganizationsStore = defineStore('Organizations', () => {
actions: {
fetchDetail(organizationId) {
return apolloWrapper.query(ORGANIZATION_DETAIL, {id: organizationId}).then(({data}) => data.organization);
},
fetch() {
return apolloWrapper.query(ORGANIZATIONS_LIST).then(result => {
this.items = result.data.organizations;
return result.data.organizations;
});
},
create(formData) {
delete formData['id'];
const organization = ref(null);
const organizations = ref([]);
const isMutationRunning = ref(false);
const isQueryRunning = ref(false);
this.isMutationRunning = true;
return apolloWrapper.mutate(CREATE_ORGANIZATION, {input: formData}).then(({data}) => {
const organization = data.createOrganization;
this.items.push(organization);
return organization;
}).finally(() => this.isMutationRunning = false);
},
const fetchDetail = (id) => query({
isQueryRunning,
query: ORGANIZATION_DETAIL,
variables: {id}
}).then(item => organization.value = item);
addUserToOrganization(organizationId) {
this.isMutationRunning = true;
return apolloWrapper.mutate(ADD_USER_TO_ORGANIZATION, {organizationId}).then(({data}) => {
return data.addToOrganization;
}).finally(() => this.isMutationRunning = false);
},
const fetch = () => query({
isQueryRunning,
query: ORGANIZATIONS_LIST
}).then(items => organizations.value = items);
removeUserFromOrganization(organizationId) {
this.isMutationRunning = true;
return apolloWrapper.mutate(REMOVE_USER_FROM_ORGANIZATION, {organizationId}).then(({data}) => {
return data.removeFromOrganization;
}).finally(() => this.isMutationRunning = false);
},
const create = (input) => mutate({
isMutationRunning,
mutation: CREATE_ORGANIZATION,
variables: {input}
}).then(item => organizations.value.push(item));
update(id, formData) {
return apolloWrapper.mutate(EDIT_ORGANIZATION, {id: id, input: formData}).then(({data}) => {
const organization = data.editOrganization;
updateInItems(this.items, "id", organization);
return organization;
}).finally(() => this.isMutationRunning = false);
},
}
})
const update = (id, input) => mutate({
isMutationRunning,
mutation: EDIT_ORGANIZATION,
variables: {id, input}
}).then(item => {
updateInItems(organizations.value, 'id', item);
return item;
});
const addUserToOrganization = (organizationId) => mutate({
isMutationRunning,
mutation: ADD_USER_TO_ORGANIZATION,
variables: {organizationId}
}).then(item => {
useUserStore().user.organizations.push(item);
organization.value.users = item.users;
return item;
});
const removeUserFromOrganization = (organizationId) => mutate({
isMutationRunning,
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);
organization.value.users = item.users;
return item;
});
return {
organization, organizations, isMutationRunning, isQueryRunning, fetchDetail, fetch, create, update,
addUserToOrganization, removeUserFromOrganization
};
//
//
// state: () => ({
// items: [],
// isMutationRunning: false,
// }),
//
// actions: {
// fetchDetail(organizationId) {
// return apolloWrapper.query(ORGANIZATION_DETAIL, {id: organizationId}).then(({data}) => data.organization);
// },
// fetch() {
// return apolloWrapper.query(ORGANIZATIONS_LIST).then(result => {
// this.items = result.data.organizations;
// return result.data.organizations;
// });
// },
// create(formData) {
// delete formData['id'];
//
// this.isMutationRunning = true;
// return apolloWrapper.mutate(CREATE_ORGANIZATION, {input: formData}).then(({data}) => {
// const organization = data.createOrganization;
// this.items.push(organization);
// return organization;
// }).finally(() => this.isMutationRunning = false);
// },
//
// addUserToOrganization(organizationId) {
// this.isMutationRunning = true;
// return apolloWrapper.mutate(ADD_USER_TO_ORGANIZATION, {organizationId}).then(({data}) => {
// return data.addToOrganization;
// }).finally(() => this.isMutationRunning = false);
// },
//
// removeUserFromOrganization(organizationId) {
// this.isMutationRunning = true;
// return apolloWrapper.mutate(REMOVE_USER_FROM_ORGANIZATION, {organizationId}).then(({data}) => {
// return data.removeFromOrganization;
// }).finally(() => this.isMutationRunning = false);
// },
//
// update(id, formData) {
// return apolloWrapper.mutate(EDIT_ORGANIZATION, {id: id, input: formData}).then(({data}) => {
// const organization = data.editOrganization;
// updateInItems(this.items, "id", organization);
// return organization;
// }).finally(() => this.isMutationRunning = false);
// },
// }
});
src/stores/Photo.js
+66 -52
View File
@@ -1,65 +1,79 @@
import {defineStore} from "pinia";
import {apolloWrapper} from "src/graphql/apollo";
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', {
state: () => ({
isMutationRunning: false,
}),
export const usePhotosStore = defineStore('Photos', () => {
const photo = ref(null);
const isMutationRunning = ref(false);
const isQueryRunning = ref(false);
actions: {
fetchDetail(id) {
return apolloWrapper.query(PHOTO_DETAIL, {id}).then(({data}) => {
return data.photo;
});
},
upload(flightId, formData) {
if (!flightId) {
console.error("No flightId specified for photo upload! Aborting");
return;
}
const fetchDetail = (id) => query({
isQueryRunning,
query: PHOTO_DETAIL,
variables: {id}
}).then(item => photo.value = item);
formData.flightId = flightId;
const upload = (flightId, input) => {
if (!flightId) {
console.error("No flightId specified for photo upload! Aborting");
return;
}
if (!formData.name) {
formData.name = "";
}
input.flightId = flightId;
if (!formData.description) {
formData.description = "";
}
if (!input.name) {
input.name = "";
}
this.isMutationRunning = true;
return apolloWrapper.mutate(UPLOAD_PHOTO, {input: formData}).then(({data}) => {
return data.uploadPhoto;
}).finally(() => this.isMutationRunning = false);
},
update(id, formData) {
this.isMutationRunning = true;
return apolloWrapper.mutate(EDIT_PHOTO, {id, input: formData}).then(({data}) => {
return data.editPhoto;
}).finally(() => this.isMutationRunning = false);
},
if (!input.description) {
input.description = "";
}
changeOrientation(id, direction) {
this.isMutationRunning = true;
return apolloWrapper.mutate(CHANGE_PHOTO_ORIENTATION, {id, direction}).then(({data}) => {
return data.changeOrientation;
}).finally(() => this.isMutationRunning = false);
},
// TODO: ^^ patri tohle do storu?
adjust(id, adjustment) {
this.isMutationRunning = true;
return apolloWrapper.mutate(ADJUST_PHOTO, {id, adjustment}).then(({data}) => {
return data.adjustPhoto;
}).finally(() => this.isMutationRunning = false);
},
delete(photoId) {
this.isMutationRunning = true;
return apolloWrapper.mutate(DELETE_PHOTO, {id: photoId}).then(({data}) => {
return data.deletePhoto;
}).finally(() => this.isMutationRunning = false);
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/PointOfInterestType.js
+18 -32
View File
@@ -1,39 +1,25 @@
import {defineStore} from 'pinia'
import {apolloWrapper} from "src/graphql/apollo";
import {POI_TYPE_DETAIL, POI_TYPE_LIST} from "src/graphql/queries/poi_type";
import {ref} from "vue";
import {query} from "stores/helpers";
export const usePointsOfInterestTypeStore = defineStore('PointsOfInterestType', {
state: () => ({
items: []
}),
export const usePointsOfInterestTypeStore = defineStore('PointsOfInterestType', () => {
const type = ref(null);
const types = ref([]);
const isQueryRunning = ref(false);
const fetchDetail = (id) => query({
isQueryRunning,
query: POI_TYPE_DETAIL,
variables: {id}
}).then(item => type.value = item);
actions: {
// create(input) {
// return apolloWrapper.mutate(CREATE_POI, {input}).then((data) => {
// const poi = data.data.createPointOfInterest;
// this.items.push(poi);
// return poi;
// })
// },
// update(id, input) {
// return apolloWrapper.mutate(EDIT_POI, {id, input}).then((data) => {
// console.log("Pridat update POI ve store");
// return data.data.editPointOfInterest;
// })
// },
const fetch = () => query({
isQueryRunning,
query: POI_TYPE_LIST,
}).then(item => types.value = item);
fetchDetail(id) {
if (typeof id !== "number") {
id = parseInt(id);
}
return apolloWrapper.query(POI_TYPE_DETAIL, {id}).then(result => result.data.pointOfInterest);
},
fetch() {
return apolloWrapper.query(POI_TYPE_LIST).then(result => {
this.items = result.data.pointOfInterestTypes;
return result.data.pointOfInterestTypes;
});
}
}
return {types, fetchDetail, fetch};
})
src/stores/PointsOfInterest.js
+38 -41
View File
@@ -1,52 +1,49 @@
import {defineStore} from 'pinia'
import {apolloWrapper} from "src/graphql/apollo";
import {POI_DETAIL, POI_LIST} from "src/graphql/queries/poi";
import {CREATE_POI, EDIT_POI} from "src/graphql/mutations/poi";
import {updateInItems} from "stores/helpers";
import {mutate, query, updateInItems} from "stores/helpers";
import {ref} from "vue";
export const usePointsOfInterestStore = defineStore('PointsOfInterest', {
state: () => ({
items: [],
isMutationRunning: false,
}),
export const usePointsOfInterestStore = defineStore('PointsOfInterest', () => {
getters: {
getDetail: (state) => (poiId) => {
return state.items.find(p => p.id === poiId);
},
},
const pointOfInterest = ref(null);
const pointsOfInterest = ref([]);
const isMutationRunning = ref(false);
const isQueryRunning = ref(false);
actions: {
create(input) {
this.isMutationRunning = true;
return apolloWrapper.mutate(CREATE_POI, {input}).then((data) => {
const poi = data.data.createPointOfInterest;
this.items.push(poi);
return poi;
}).finally(() => this.isMutationRunning = false);
},
update(id, input) {
this.isMutationRunning = true;
const fetchDetail = (id) => {
return query({
isQueryRunning,
query: POI_DETAIL,
variables: {id},
}).then(item => pointOfInterest.value = item);
};
return apolloWrapper.mutate(EDIT_POI, {id, input}).then((data) => {
const poi = data.data.editPointOfInterest;
updateInItems(this.items, "id", poi);
return poi;
}).finally(() => this.isMutationRunning = false);
},
const fetch = () => {
return query({
isQueryRunning,
query: POI_LIST,
}).then(items => pointsOfInterest.value = items);
}
fetchDetail(id) {
if (typeof id !== "number") {
id = parseInt(id);
}
return apolloWrapper.query(POI_DETAIL, {id}).then(result => result.data.pointOfInterest);
},
fetch() {
return apolloWrapper.query(POI_LIST).then(result => {
this.items = result.data.pointsOfInterest;
return result.data.pointsOfInterest;
});
const create = (input) => {
return mutate({
isMutationRunning,
mutation: CREATE_POI,
variables: {input},
}).then(item => pointsOfInterest.value.push(item))
}
const update = (id, input) => {
return mutate({
isMutationRunning,
mutation: EDIT_POI,
variables: {id, input}
}).then(item => updateInItems(pointsOfInterest.value, 'id', item))
}
return {
pointOfInterest, pointsOfInterest, isMutationRunning, isQueryRunning, fetch, fetchDetail, create, update
}
}
})
src/stores/User.js
+84 -80
View File
@@ -1,90 +1,94 @@
import {defineStore} from 'pinia'
import {api} from "boot/axios";
import {apolloWrapper} from "src/graphql/apollo";
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";
export const useUserStore = defineStore('LoggedUser', {
state: () => ({
user: {},
isRefreshing: false,
isMutationRunning: false,
}),
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);
actions: {
update(formData) {
this.isMutationRunning = true;
const fetchLoggedUserDetail = () => query({
isQueryRunning,
query: LOGGED_USER_DETAIL
}).then(item => {
user.value = item;
return item;
});
apolloWrapper.mutate(EDIT_USER, {input: formData}).then((response) => {
const user = response.data?.editLoggedUser;
this.user = user;
return user;
}).finally(() => this.isMutationRunning = false);
},
const fetchPublicUserDetail = (username) => query({
isQueryRunning,
query: USER_DETAIL,
variables: {username}
}).then(item => {
publicUser.value = item;
return item;
});
fetchLoggedUserDetail() {
return apolloWrapper.query(LOGGED_USER_DETAIL).then((response) => {
const user = response.data?.loggedUser;
this.user = user;
return user;
})
},
const update = (input) => mutate({
isMutationRunning,
mutation: EDIT_USER,
variables: {input}
}).then(item => {
user.value = item;
return item;
});
fetchDetail(username) {
return apolloWrapper.query(USER_DETAIL, {username}).then((response) => {
return response.data?.user;
});
},
async register(formData) {
return api.post('/registration', formData).then(response => {
const registeredUser = response.data;
const isSuccess = response.status === 201
})
},
async login(formData) {
return api.post("/login", formData).then(({data}) => {
this.setTokens(data);
this.user = data.user;
})
},
logout() {
return api.post("/logout").then(response => {
Object.assign(this.user, {});
localStorage.removeItem("accessToken");
localStorage.removeItem("accessTokenValidity");
});
},
setTokens({access_token, access_token_validity}) {
const now = new Date().getTime() / 1000;
localStorage.setItem("accessToken", access_token);
localStorage.setItem("accessTokenValidity", now + access_token_validity);
},
getAccessToken() {
const tokenValidity = localStorage.getItem("accessTokenValidity");
const now = new Date().getTime() / 1000;
if (tokenValidity < now) {
localStorage.removeItem("accessToken");
localStorage.removeItem("accessTokenValidity");
}
return localStorage.getItem(`accessToken`);
},
hasAccessToken() {
return !!localStorage.getItem("accessToken");
},
async refreshAccessToken() {
return api.post("/refresh")
.then(({data}) => {
this.setTokens(data);
return data.access_token;
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);
this.user = data.user;
})
};
const logout = () => {
return api.post("/logout").then(response => {
localStorage.removeItem("accessToken");
localStorage.removeItem("accessTokenValidity");
user.value = null;
});
};
const setTokens = ({access_token, access_token_validity}) => {
const now = new Date().getTime() / 1000;
localStorage.setItem("accessToken", access_token);
localStorage.setItem("accessTokenValidity", now + access_token_validity);
};
const getAccessToken = () => {
const tokenValidity = localStorage.getItem("accessTokenValidity");
const now = new Date().getTime() / 1000;
if (tokenValidity < now) {
localStorage.removeItem("accessToken");
localStorage.removeItem("accessTokenValidity");
}
return localStorage.getItem(`accessToken`);
};
const hasAccessToken = () => !!localStorage.getItem("accessToken");
const refreshAccessToken = async () => api.post("/refresh")
.then(({data}) => {
setTokens(data);
return data.access_token;
});
return {
isQueryRunning, isMutationRunning, user, publicUser, fetchLoggedUserDetail, fetchPublicUserDetail, update,
register, login, logout,
getAccessToken, hasAccessToken, refreshAccessToken, isRefreshing
}
});
src/stores/helpers.js
+25
View File
@@ -1,8 +1,13 @@
import {apolloWrapper} from "boot/apollo";
import {getOperationName} from "@apollo/client/utilities";
export const updateInItems = (items, key, data) => {
const idx = items.findIndex(i => i[key] === data[key]);
if (idx >= 0)
items[idx] = data;
else items.push(data);
return items;
}
export const deleteFromItems = (items, key, value) => {
@@ -11,3 +16,23 @@ export const deleteFromItems = (items, key, value) => {
items.splice(idx, 1);
}
export const query = ({isQueryRunning, query, variables}) => {
if (variables && variables.id) {
variables.id = parseInt(variables.id);
}
isQueryRunning.value = true;
const queryName = query.definitions[0].selectionSet.selections[0].name.value;
return apolloWrapper.query(query, variables)
.then((result) => result.data[queryName])
.finally(() => isQueryRunning.value = false);
}
export const mutate = ({isMutationRunning, mutation, variables}) => {
isMutationRunning.value = true;
const mutationName = getOperationName(mutation);
return apolloWrapper.mutate(mutation, variables)
.then(result => result.data[mutationName])
.finally(() => isMutationRunning.value = false);
}
src/stores/index.js
+1 -14
View File
@@ -1,20 +1,7 @@
import { store } from 'quasar/wrappers'
import { createPinia } from 'pinia'
/*
* If not building with SSR mode, you can
* directly export the Store instantiation;
*
* The function below can be async too; either use
* async/await or return a Promise which resolves
* with the Store instance.
*/
export default store((/* { ssrContext } */) => {
const pinia = createPinia()
// You can add Pinia plugins here
// pinia.use(SomePiniaPlugin)
const pinia = createPinia();
return pinia
})