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

Upravy UI, refaktoring, davkove upravy a mazani fotek

Browse Source
This commit is contained in:
Michal Kváček
2023-08-28 22:02:24 +02:00
parent dcc3230cbe
commit dd248d4432
53 changed files with 636 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FormWrapper.vue
+1 -10
View File
@@ -7,11 +7,6 @@ const props = defineProps({
modelValue: {
type: Object,
},
resetAfterSubmit: {
type: Boolean,
required: false,
default: false
},
isRequestPending,
saveButton: {
type: [Object, Boolean],
@@ -27,10 +22,6 @@ const props = defineProps({
const emits = defineEmits(["save"]);
const saveForm = () => {
emits("save", props.modelValue);
if (props.resetAfterSubmit) {
console.error("Not implemented")
}
}
const $q = useQuasar();
@@ -47,7 +38,7 @@ const fullwidthBtn = computed(() => $q.screen.width <= $q.screen.sizes.md);
color="primary"
type="submit"
size="lg"
:class="{'q-my-lg': true, 'q-mx-lg': !fullwidthBtn, 'btn--fullwidth': fullwidthBtn}"
:class="{'q-my-lg': true, 'btn--fullwidth': fullwidthBtn}"
v-if="saveButton"
:icon="props.saveButton.icon"
:loading="props.isRequestPending"
src/components/aircrafts/AircraftDetailCard.vue
+59
View File
@@ -0,0 +1,59 @@
<script setup>
import {aircraft} from "src/composables/objects/aircraft";
import {confirmObject} from "src/composables/dialog";
import {useQuasar} from "quasar";
const props = defineProps({
aircraft: {
type: Object,
required: true
}
});
const emits = defineEmits(["delete"]);
const $q = useQuasar();
const confirmDelete = (aircraftId) => {
$q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
.onOk(() => {
emits("delete", aircraftId);
});
};
</script>
<template>
<q-card class="q-mx-md q-my-md flight-detail-card">
<q-img :src="aircraft.photoUrl" v-if="aircraft.photoUrl"/>
<q-card-actions class="q-my-md">
<div class="col-grow">
<q-btn
flat
:to='{name: "aircraftEdit", params: {id: aircraft.id}}'
icon="edit"
text-color="primary"
label="Upravit"
/>
</div>
<q-btn @click="confirmDelete(aircraft.id)" icon="delete" flat text-color="red" label="Smazat"/>
</q-card-actions>
<q-card-section>
<q-list>
<q-item v-if="aircraft.manufacturer">
Výrobce: {{ aircraft.manufacturer }}
</q-item>
<q-item v-if="aircraft.model">
Model: {{ aircraft.model }}
</q-item>
<q-item v-if="aircraft.seats">
Počet míst: {{ aircraft.seats }}
</q-item>
</q-list>
</q-card-section>
<q-card-section>
<article v-html="aircraft.description" class="q-my-md"/>
</q-card-section>
</q-card>
</template>
src/components/aircrafts/AircraftDetailSkeleton.vue
+20 -2
View File
@@ -1,5 +1,23 @@
<script setup></script>
<script setup>
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
import {randomInt} from "src/composables/random";
import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
</script>
<template>
<q-skeleton></q-skeleton>
<q-card class="flight-detail-card">
<q-skeleton type="rect" height="400px"/>
<q-card-section>
<q-skeleton type="text" v-for="i in 3" :key="i" :width="randomInt(30, 50)+'%'"/>
</q-card-section>
<q-card-section class="q-my-md">
<BasicTextSkeleton :paragraphs="1" :lines="randomInt(1, 3)"/>
</q-card-section>
</q-card>
<q-card class="flight-detail-card" flat>
<BasicListSkeleton :items-count-min="1" :items-count-max="4"/>
</q-card>
</template>
src/components/aircrafts/AircraftEditSkeleton.vue
+19 -2
View File
@@ -1,5 +1,22 @@
<script setup></script>
<script setup>
import {randomInt} from "src/composables/random";
import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
</script>
<template>
<em>Aircraft edit skeleton</em>
<q-card class="flight-detail-card">
<q-skeleton type="rect" height="400px"/>
<q-card-section>
<q-skeleton type="QInput" v-for="i in 3" :key="i" class="q-my-lg" />
<q-skeleton type="QInput" height="200px" class="q-my-lg" />
</q-card-section>
<q-card-actions>
<!-- TODO: posunout vpravo, zvetsit a na mobilu udelat fullwidth-->
<q-skeleton type="QBtn" />
</q-card-actions>
</q-card>
</template>
src/components/AccessDeniedBanner.vue → src/components/banners/AccessDeniedBanner.vue
View File
src/components/BasicInfoBanner.vue → src/components/banners/BasicInfoBanner.vue
View File
src/components/copilots/CopilotDetailSkeleton.vue
+6 -2
View File
@@ -1,5 +1,9 @@
<script setup></script>
<script setup>
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
</script>
<template>
<em>Copilot skeleton</em>
<q-card class="flight-detail-card">
<BasicListSkeleton :items-count-min="1" :items-count-max="5"/>
</q-card>
</template>
src/components/copilots/CopilotForm.vue
+15 -3
View File
@@ -4,17 +4,24 @@ import {onMounted, reactive} from "vue";
import {setDefaultData} from "src/composables/form/formHandling";
import FormWrapper from "components/FormWrapper.vue";
import {commonProps} from "src/composables/inputs";
import {isRequestPending} from "src/composables/form/props";
import {isRequired} from "src/composables/form/rules";
const props = defineProps({
copilot: {
type: Object
}
},
isRequestPending
})
const formData = reactive({
name: null,
});
const rules = {
name: [isRequired]
}
onMounted(() => {
if (props.copilot) {
setDefaultData(formData, props.copilot);
@@ -24,7 +31,12 @@ onMounted(() => {
</script>
<template>
<FormWrapper v-model="formData">
<q-input v-bind="commonProps" label="Jméno" v-model="formData.name" />
<FormWrapper v-model="formData" :is-request-pending="props.isRequestPending">
<q-input
v-bind="commonProps"
label="Jméno"
:rules="rules.name"
v-model="formData.name"
/>
</FormWrapper>
</template>
src/components/flights/FlightDetailSkeleton.vue
+2 -2
View File
@@ -16,7 +16,7 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
<q-item>
<q-list>
<ListItemSkeleton v-for="i in randomInt(2, 5)" :key="i"/>
<ListItemSkeleton v-for="i in randomInt(1, 3)" :key="i"/>
</q-list>
</q-item>
@@ -26,7 +26,7 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
</q-list>
<article class="q-my-lg">
<BasicTextSkeleton :lines="randomInt(5, 10)" :paragraphs="randomInt(1, 3)" />
<BasicTextSkeleton :lines="randomInt(2, 5)" :paragraphs="randomInt(1, 2)" />
</article>
<q-skeleton height="400px" square class="q-mt-lg"/>
src/components/flights/FlightEditSkeleton.vue
+15 -2
View File
@@ -1,7 +1,20 @@
<script setup>
import {randomInt} from "src/composables/random";
import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
</script>
<template>
<em>Flight edit skeleton</em>
</template>
<q-card class="flight-detail-card">
<q-skeleton type="rect" height="400px"/>
<q-card-section>
<q-skeleton type="QInput" v-for="i in 3" :key="i" />
</q-card-section>
</q-card>
<q-card class="flight-detail-card" flat>
<BasicListSkeleton :items-count-min="1" :items-count-max="4"/>
</q-card></template>
src/components/flights/FlightTrackMap.vue
+1 -1
View File
@@ -33,7 +33,7 @@ const pointsOfInterests = computed(() => {
}
path.push({
label: flight.value.takeoffAirport.name,
label: flight.value.landingAirport.name,
position: {
lat: flight.value.landingAirport.gpsLatitude,
lng: flight.value.landingAirport.gpsLongitude
src/components/flights/form/FlightFormBasic.vue
+5 -6
View File
@@ -6,6 +6,7 @@ import DatetimePicker from "components/inputs/DatetimePicker.vue";
import ComboboxInput from "components/inputs/ComboboxInput.vue";
import {commonProps} from "src/composables/inputs";
import {isRequired} from "src/composables/form/rules";
import {isRequestPending} from "src/composables/form/props";
const props = defineProps({
aircrafts: {
@@ -19,9 +20,9 @@ const props = defineProps({
flight: {
type: Object,
required: false
}
}
)
},
isRequestPending,
});
const formData = reactive({
aircraft: null,
@@ -69,7 +70,7 @@ watch(() => formData.takeoffAirport, () => {
</script>
<template>
<FormWrapper v-model="formData">
<FormWrapper v-model="formData" :is-request-pending="props.isRequestPending">
<div class="row">
<div class="col">
<q-card class="q-mx-md q-my-md">
@@ -140,8 +141,6 @@ watch(() => formData.takeoffAirport, () => {
/>
</q-card-section>
</q-card>
</div>
</div>
</FormWrapper>
src/components/flights/form/FlightFormPhotos.vue
+1
View File
@@ -25,6 +25,7 @@ const formData = reactive({
icon: "upload",
align: "left"
}'>
<q-file
class="q-my-lg"
outlined
src/components/BreadcrumbsNavigation.vue → src/components/navigation/BreadcrumbsNavigation.vue
View File
src/components/photos/BatchPhotoFormDialog.vue
+57
View File
@@ -0,0 +1,57 @@
<script setup>
import {computed, ref} from "vue";
import {setDefaultData} from "src/composables/form/formHandling";
import DialogWrapper from "components/DialogWrapper.vue";
import FormWrapper from "components/FormWrapper.vue";
import {commonProps} from "src/composables/inputs";
import ComboboxInput from "components/inputs/ComboboxInput.vue";
const props = defineProps({
photos: {
type: Array
},
locations: {
type: Array
}
});
const formData = ref({
name: "",
description: "",
pointOfInterest: null,
photoIds: []
});
const setup = () => {
formData.value.photoIds = props.photos.map(p => p.id);
formData.value.name = "";
formData.value.description = "";
formData.value.pointOfInterest = null;
}
</script>
<template>
<DialogWrapper :formData="formData" @show="setup()">
<q-card-section class="text-center">
<!-- <q-scroll-area style="min-height: 80px; max-height: 150px">-->
<q-img :src="photo.thumbnailUrl" width="80px" class="q-ma-sm" v-for="photo in photos" :key="photo.thumbnailUrl"/>
<!-- {{ photos }}-->
<!-- </q-scroll-area>-->
</q-card-section>
<q-card-section>
<FormWrapper :save-button="false">
<q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
<q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
<ComboboxInput
:options="locations"
v-bind="commonProps"
v-model="formData.pointOfInterest"
:enable-new-values="false"
label="POI"
/>
</FormWrapper>
</q-card-section>
</DialogWrapper>
</template>
src/components/photos/PhotoDetail.vue
+44 -8
View File
@@ -3,6 +3,7 @@ import EmbeddedMap from "components/map/EmbeddedMap.vue";
import {computed, onMounted, ref} from "vue";
import {formatDatetime} from "src/composables/datetimeUtils";
import 'vue-inner-image-zoom/lib/vue-inner-image-zoom.css'
import {useQuasar} from "quasar";
const props = defineProps({
photos: {
@@ -50,12 +51,17 @@ const prevPhoto = () => {
}
const showExtra = ref(false);
const $q = useQuasar();
const isMaximized = computed(() => $q.screen.width <= $q.screen.sizes.md);
const imageFullscreen = ref(false);
</script>
<template>
<q-dialog
v-model="open"
full-width
:maximized="isMaximized"
>
<q-card
v-touch-swipe.mouse.left="prevPhoto"
@@ -63,10 +69,29 @@ const showExtra = ref(false);
@keyup.left="prevPhoto"
@keyup.right="nextPhoto"
>
<q-card-section>
<div class="relative-position">
<q-card-section class="bg-black text-white" v-if="isMaximized">
<div class="row">
<div class="col">
<strong v-if="photo.name !== ''">{{ photo.name }}</strong>
</div>
<div class="col text-right">
<q-btn round text-color="white" size="sm" icon="close" @click="open = false"/>
</div>
</div>
</q-card-section>
<q-card-section :class="{'q-pa-none': isMaximized}">
<div :class="{'relative-position': true, 'image-full-height': imageFullscreen}">
<div class="text-center">
<inner-image-zoom move-type="pan" :zoomScale="0.75" :hide-hint="true" :src="photo.url"/>
<inner-image-zoom
move-type="pan"
:zoomScale="0.75"
:hide-hint="true"
:after-zoom-in="() => imageFullscreen = true"
:after-zoom-out="() => imageFullscreen = false"
:src="photo.url"
/>
</div>
<q-btn
@@ -75,14 +100,14 @@ const showExtra = ref(false);
flat
icon="info"
:text-color="showExtra ? 'primary' : 'white'"
style="background: rgba(0, 0, 0, 0.25); top: 8px; right: 8px"
style="background: rgba(0, 0, 0, 0.25); bottom: 16px; left: 8px"
@click="showExtra = !showExtra"
/>
<q-btn
class="absolute all-pointer-events"
style="background: rgba(0, 0, 0, 0.25); top: 50%; left: 8px;"
@click="prevPhoto"
v-if="photoIndex > 0"
v-if="photoIndex > 0 && !isMaximized"
icon="chevron_left"
text-color="white"
flat
@@ -93,19 +118,18 @@ const showExtra = ref(false);
class="absolute all-pointer-events"
style="background: rgba(0, 0, 0, 0.25); top: 50%; right: 8px;"
@click="nextPhoto"
v-if="photoIndex < photos.length - 1"
v-if="photoIndex < photos.length - 1 && !isMaximized"
icon-right="chevron_right"
text-color="white"
flat
rounded
>
</q-btn>
<strong v-if="photo.name !== ''">{{ photo.name }}</strong>
<strong v-if="photo.name !== '' && !isMaximized">{{ photo.name }}</strong>
<p v-if="photo.description !== ''">{{ photo.description }}</p>
</div>
<div class="row">
<div class="col-12 q-my-md" v-if="showExtra">
<EmbeddedMap
v-if="photo.gpsLatitude && photo.gpsLongitude"
@@ -153,8 +177,20 @@ const showExtra = ref(false);
width: 100%;
}
.image-full-height .iiz {
height: calc(95vh - 65px) !important;
}
.iiz__img {
max-height: 90vh !important;
margin: 0 auto;
}
.iiz__img--hidden {
height: 100vh;
}
.iiz__zoom-img--visible {
//height: 125vh !important
}
</style>
src/components/photos/PhotoForm.vue → src/components/photos/PhotoFormDialog.vue
+5 -9
View File
@@ -4,6 +4,7 @@ import {setDefaultData} from "src/composables/form/formHandling";
import DialogWrapper from "components/DialogWrapper.vue";
import FormWrapper from "components/FormWrapper.vue";
import {commonProps} from "src/composables/inputs";
import ComboboxInput from "components/inputs/ComboboxInput.vue";
const props = defineProps({
photo: {
@@ -18,7 +19,7 @@ const photoId = computed(() => props.photo?.id || null);
const formData = ref({
name: "",
description: "",
pointOfInterestId: null,
pointOfInterest: null,
isFlightCover: false
});
@@ -29,6 +30,7 @@ const setup = (() => {
<template>
<DialogWrapper :formData="formData" :object-id="photoId" @show="setup">
{{ formData }}
<q-img :src="photo.thumbnailUrl"/>
<q-card-section>
@@ -36,16 +38,10 @@ const setup = (() => {
<q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
<q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
{{ locations }}
<q-select
<ComboboxInput
:options="locations"
option-label="name"
option-value="id"
emit-value
map-options
v-bind="commonProps"
v-model="formData.pointOfInterestId"
v-model="formData.pointOfInterest"
label="POI"
/>
src/components/photos/PhotosList.vue
+65 -13
View File
@@ -1,4 +1,8 @@
<script setup>
import {computed, onMounted, ref} from "vue";
import {useQuasar} from "quasar";
import {confirmObject} from "src/composables/dialog";
const props = defineProps({
photos: {
type: Array
@@ -10,26 +14,73 @@ const props = defineProps({
}
});
const emits = defineEmits(["edit", "delete", "openDetail"])
const batchEdit = ref({});
onMounted(() => {
for (const photo of props.photos) {
batchEdit.value[photo.id] = false;
}
});
const emits = defineEmits(["edit", "delete", "batch-edit"])
const openEdit = (photo) => {
emits("edit", photo);
};
const deletePhoto = (id) => {
emits("delete", id);
};
const $q = useQuasar();
const openDetail = (photo, idx) => {
emits("openDetail", {photo, idx, allPhotos: props.photos});
const confirmPhotoDelete = (id) => {
$q.dialog(confirmObject("Opravdu chces smazat tuto fotku?"))
.onOk(() => {
emits("delete", id);
});
}
const confirmBatchPhotoDelete = () => {
$q.dialog(confirmObject("Opravdu chces smazat vybrané fotky?" + JSON.stringify(batchEdit.value)))
.onOk(() => {
for (const id in batchEdit.value) {
if (!batchEdit.value[id]) continue;
emits("delete", parseInt(id));
batchEdit.value[id] = false;
}
});
}
const handleImageClick = (photo, idx) => {
if (props.showActions) {
batchEdit.value[photo.id] = !batchEdit.value[photo.id];
}
}
const openBatchEdit = () => {
const photos = [];
for (const i in batchEdit.value) {
const photo = props.photos.find(p => p.id === parseInt(i));
if (photo && batchEdit.value[i]) photos.push(photo);
batchEdit.value[i] = false;
}
emits('batch-edit', photos);
}
const isBatchEditAllowed = computed(() => Object.values(batchEdit.value).filter(v => v).length > 0);
</script>
<template>
<div class="row q-my-md">
<div class="col text-right">
<q-btn round flat icon="edit" :color="isBatchEditAllowed ? 'primary' : 'grey'" :disable="!isBatchEditAllowed" @click="openBatchEdit" v-if="showActions"/>
<q-btn round flat icon="delete" :color="isBatchEditAllowed ? 'red' : 'grey'" :disable="!isBatchEditAllowed" @click="confirmBatchPhotoDelete" v-if="showActions"/>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-4 col-md-4 col-lg-3" v-for="(photo, idx) in photos" :key="photo.id">
<q-card class="q-my-sm q-mx-sm">
<q-img :src="photo.thumbnailUrl" @click="openDetail(photo, idx)">
<q-card :class='{"q-ma-sm": true, "shadow-1": !batchEdit[photo.id], "shadow-10": batchEdit[photo.id]}'>
<q-img :src="photo.thumbnailUrl" @click="handleImageClick(photo, idx)">
<div class="absolute-bottom" v-if="photo.name !== '' || photo.description !== ''">
<div class="text-h6" v-if="photo.name !== ''">
{{ photo.name }}
@@ -40,16 +91,17 @@ const openDetail = (photo, idx) => {
</div>
</q-img>
<q-card-actions v-if="showActions" align="right">
<q-card-actions v-if="showActions" align="right" :class="{'bg-primary': batchEdit[photo.id], 'text-white': batchEdit[photo.id]}">
<div class="col-grow">
<q-checkbox v-model="batchEdit[photo.id]"/>
<q-icon name="star" v-if="photo.isFlightCover" color="red"/>
<q-icon name="place" v-if="photo.pointOfInterestId" />
<q-icon name="gps_fixed" v-if="photo.gpsLatitude && photo.gpsLongitude" />
<q-icon name="gps_off" v-else />
<q-icon name="place" v-if="photo.pointOfInterestId"/>
<q-icon name="gps_fixed" v-if="photo.gpsLatitude && photo.gpsLongitude"/>
<q-icon name="gps_off" v-else/>
</div>
<q-btn flat icon="edit" color="blue" @click="openEdit(photo)"></q-btn>
<q-btn flat icon="delete" color="red" @click="deletePhoto(photo.id)"></q-btn>
<q-btn flat icon="delete" color="red" @click="confirmPhotoDelete(photo.id)"></q-btn>
</q-card-actions>
</q-card>
</div>
src/composables/dialog.js
+12 -2
View File
@@ -8,11 +8,21 @@ export const confirmObject = (message, title) => ({
export const successObject = (message) => ({
message,
position: "top",
color: "positive"
color: "positive",
progress: true,
});
export const warningObject = (message) => ({
message,
position: "top",
color: "warning",
});
export const errorObject = (message) => ({
message,
position: "top",
color: "negative"
color: "negative",
timeout: 5 * 60 * 1000,
actions: [{ icon: 'close', color: 'white', round: true, handler: () => { }}]
})
src/composables/objects/aircraft.js
+2
View File
@@ -21,3 +21,5 @@ export const fetchAircrafts = () => {
loading.value = true;
useAircraftsStore().fetch().finally(() => loading.value = false);
}
export const isRequestPending = storeToRefs(useAircraftsStore).isMutationRunning;
src/composables/objects/copilot.js
+2
View File
@@ -19,3 +19,5 @@ export const fetchCopilots = () => {
loading.value = true;
return useCopilotsStore().fetch().finally(() => loading.value = false);
}
export const isRequestPending = storeToRefs(useCopilotsStore()).isMutationRunning;
src/composables/objects/flight.js
+2
View File
@@ -43,3 +43,5 @@ export const handleDeleteFlight = ($q, flightId, onOkCallback = () => {
useFlightsStore().delete(flightId).then(onOkCallback);
});
};
export const isRequestPending = storeToRefs(useFlightsStore()).isRequestPending;
src/composables/photos/batchEdit.js
+30
View File
@@ -0,0 +1,30 @@
import {ref} from "vue";
import {usePhotosStore} from "stores/Photo";
import {fetchFlight} from "src/composables/objects/flight";
export const openBatchEdit = ref(false);
export const editBatchPhotos = ref([]);
export const openBatchPhotoForm = (photos) => {
openBatchEdit.value = true;
editBatchPhotos.value = photos;
}
export const handleBatchPhotoEdit = (flightId, data) => {
const photoIds = data.photoIds;
delete data.photoIds;
delete data.id;
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/simpleEdit.js
+22
View File
@@ -0,0 +1,22 @@
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
+7 -9
View File
@@ -4,18 +4,20 @@ 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',
uri: process.env.API_URL + '/graphql',
})
const handleRefreshToken = (forward, operation) => {
return fromPromise(
useUserStore().refreshAccessToken()
.catch((error) => {
console.log("neumim refresh");
// window.location = "/login";
Notify.create(warningObject("Tvoje přihlášení vypřešlo. Přihlaš se prosím znovu."));
window.location = "/login";
})
)
.filter((value) => Boolean(value))
@@ -40,17 +42,14 @@ const errorLink = onError(
}
if (graphQLErrors) {
const messages = [];
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 {
messages.push(error.message);
Notify.create(errorObject("API error: " + error.message));
}
// TODO: zaridit zobrazeni erroru z messages
}
}
});
@@ -81,8 +80,7 @@ export const apolloWrapper = {
})
.then((response) => response)
.catch(err => {
console.log(err.message);
// console.error("Error during query: ", err)
console.error("Error during query: ", err)
return err;
})
},
src/graphql/fragments/flight.js
-1
View File
@@ -61,7 +61,6 @@ fragment flightFullInfo on Flight {
...weatherFullInfo
}
aircraft {
...aircraftFullInfo
}
src/graphql/fragments/photo.js
+4 -1
View File
@@ -9,7 +9,10 @@ export const FRAGMENT_PHOTO_FULL_INFO = gql`
name
description
flightId
pointOfInterestId
pointOfInterest {
id
name
}
isFlightCover
gpsLatitude
gpsLongitude
src/layouts/ProfileLayout.vue
+2 -2
View File
@@ -75,11 +75,11 @@
</template>
<script setup>
import {onMounted, ref, watch} from 'vue'
import {onMounted, ref} from 'vue'
import NavigationButton from "components/navigation/NavigationButton.vue";
import {useUserStore} from "stores/User";
import {storeToRefs} from "pinia";
import BreadcrumbsNavigation from "components/BreadcrumbsNavigation.vue";
import BreadcrumbsNavigation from "components/navigation/BreadcrumbsNavigation.vue";
import {useAppStore} from "stores/App";
import {useMeta, useQuasar} from "quasar";
import AvatarFromPhoto from "components/AvatarFromPhoto.vue";
src/layouts/PublicLayout.vue
+1 -1
View File
@@ -36,7 +36,7 @@ import {useUserStore} from "stores/User";
import {onMounted} from "vue";
import {useAppStore} from "stores/App";
import {useMeta} from "quasar";
import BreadcrumbsNavigation from "components/BreadcrumbsNavigation.vue";
import BreadcrumbsNavigation from "components/navigation/BreadcrumbsNavigation.vue";
import AvatarFromPhoto from "components/AvatarFromPhoto.vue";
const {pageTitle, breadcrumbs} = storeToRefs(useAppStore());
src/pages/profile/aircraft/AircraftDetailPage.vue
+10 -50
View File
@@ -4,29 +4,26 @@ import {useAircraftsStore} from "stores/Aircrafts";
import {useRoute, useRouter} from "vue-router";
import {useQuasar} from "quasar";
import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
import {confirmObject, successObject} from "src/composables/dialog";
import {successObject} from "src/composables/dialog";
import {loading, aircraft, fetchAircraft} from "src/composables/objects/aircraft";
import FAB from "components/FAB.vue";
import {useAppStore} from "stores/App";
import FlightsList from "components/flights/FlightsList.vue";
import {copilot} from "src/composables/objects/copilot";
import {flight} from "src/composables/objects/flight";
import AircraftDetailCard from "components/aircrafts/AircraftDetailCard.vue";
const $q = useQuasar();
const $router = useRouter();
const aircraftId = parseInt(useRoute().params.id);
onMounted(() => {
fetchAircraft(aircraftId);
})
const $q = useQuasar();
const confirmDelete = (id) => {
$q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
.onOk(() => {
const deleteAircraft = (id) => {
useAircraftsStore().delete(id).then(() => {
useRouter().push({name: "aircrafts"});
$q.notify(successObject("Letadlo uspesne odstraneno"));
$router.push({name: "aircrafts"});
$q.notify(successObject("Letadlo úspěšně odstraněno"));
});
})
};
}
watch(aircraft, (newVal) => {
useAppStore().setPageTitle(newVal.callSign);
@@ -35,47 +32,12 @@ watch(aircraft, (newVal) => {
{label: newVal.callSign}
])
});
</script>
<template>
<AircraftDetailSkeleton v-if="loading || !aircraft"/>
<template v-else>
<q-card class="q-mx-md q-my-md flight-detail-card">
<q-img :src="aircraft.photoUrl" v-if="aircraft.photoUrl" />
<q-card-actions class="q-my-md">
<div class="col-grow">
<q-btn
flat
:to='{name: "aircraftEdit", params: {id: aircraft.id}}'
icon="edit"
text-color="primary"
label="Upravit"
/>
</div>
<q-btn @click="confirmDelete(aircraft.id)" icon="delete" flat text-color="red" label="Smazat"/>
</q-card-actions>
<q-card-section>
<q-list>
<q-item v-if="aircraft.manufacturer">
Výrobce: {{ aircraft.manufacturer }}
</q-item>
<q-item v-if="aircraft.model">
Model: {{ aircraft.model }}
</q-item>
</q-list>
</q-card-section>
<!-- <q-card-actions align="right">-->
<!-- <q-btn :to='{name: "aircraftEdit", params: {id: aircraft.id}}' icon="edit" text-color="primary" rounded flat/>-->
<!-- <q-btn @click="confirmDelete(aircraft.id)" icon="delete" text-color="red" rounded flat/>-->
<!-- </q-card-actions>-->
</q-card>
<AircraftDetailCard :aircraft="aircraft" @delete="deleteAircraft" />
<q-card class="flight-detail-card" flat>
<h3>Lety</h3>
@@ -84,8 +46,6 @@ watch(aircraft, (newVal) => {
</q-banner>
<FlightsList :items="aircraft.flights" v-else/>
</q-card>
<!-- <FAB :router-link='{name: "aircraftEdit", params: {id: aircraft.id}}' mode="edit"/>-->
</template>
src/pages/profile/aircraft/AircraftsPage.vue
+7 -10
View File
@@ -4,6 +4,7 @@ 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";
onMounted(() => {
fetchAircrafts();
@@ -13,17 +14,13 @@ onMounted(() => {
<template>
<BasicListSkeleton v-if="loading"/>
<div class="q-pa-md q-gutter-sm" v-else-if="!loading && aircrafts.length === 0">
<q-banner class="bg-light-blue text-white">
<template v-slot:avatar>
<q-icon name="info"/>
</template>
<BasicInfoBanner
v-if="!loading && aircrafts.length === 0"
:route-add="{name: 'addAircraft'}"
label-add="Vytvořit letadlo"
>
Aktuálně nemáš přidané žádné letadlo.
<template v-slot:action>
<q-btn flat color="white" :to="{name: 'addAircraft'}" label="Vytvořit letadlo"/>
</template>
</q-banner>
</div>
</BasicInfoBanner>
<AircraftsList
v-else
src/pages/profile/aircraft/EditAircraftPage.vue
+3 -8
View File
@@ -3,26 +3,21 @@ import AircraftForm from "components/aircrafts/AircraftForm.vue";
import {useAircraftsStore} from "stores/Aircrafts";
import {useRoute, useRouter} from "vue-router";
import {useQuasar} from "quasar";
import {onMounted, ref} from "vue";
import {onMounted} from "vue";
import AircraftEditSkeleton from "components/aircrafts/AircraftEditSkeleton.vue";
import {successObject} from "src/composables/dialog";
import {aircraft, fetchAircraft, loading} from "src/composables/objects/aircraft";
import {aircraft, fetchAircraft, loading, isRequestPending} from "src/composables/objects/aircraft";
import {useAppStore} from "stores/App";
import {copilot} from "src/composables/objects/copilot";
const isRequestPending = ref(false);
const $router = useRouter();
const $q = useQuasar();
const aircraftId = parseInt(useRoute().params.id);
const handleSave = (formData) => {
isRequestPending.value = true;
useAircraftsStore().update(aircraftId, formData).then(() => {
$q.notify(successObject("Letadlo úspěšně upraveno"));
$router.push({name: "aircrafts"});
}).finally(() => {
isRequestPending.value = false;
$router.push({name: "aircraftDetail", params: {id: aircraftId}});
})
}
src/pages/profile/aircraft/NewAircraftsPage.vue
+3 -7
View File
@@ -6,21 +6,17 @@ import {useQuasar} from "quasar";
import {ref} from "vue";
import {useAppStore} from "stores/App";
import {successObject} from "src/composables/dialog";
import {isRequestPending} from "src/composables/objects/aircraft";
const $q = useQuasar();
const router = useRouter();
let isRequestPending = ref(false);
const handleSave = (formData) => {
isRequestPending.value = true;
useAircraftsStore().create(formData).then(() => {
$q.notify(successObject("Letadlo úspěšně vytvořeno"));
router.push({name: "aircrafts"});
}).finally(() => {
isRequestPending.value = false;
})
}
});
};
useAppStore().setPageTitle("Nové letadlo");
useAppStore().setBreadcrumbs([
src/pages/profile/copilot/CopilotDetailPage.vue
+3 -1
View File
@@ -24,9 +24,11 @@ onMounted(() => {
<template v-else>
<h3>Společné lety</h3>
<q-banner v-if="copilot.flights.length === 0" class="bg-light-blue text-white">
Zatím žádné společné lety
Zatím tu nemáš uložené žádné společné lety.
</q-banner>
<FlightsList :items="copilot.flights" v-else/>
<FAB mode="edit" :router-link="{name: 'copilotEdit', params: {id: copilotId}}"/>
src/pages/profile/copilot/CopilotsPage.vue
+5 -2
View File
@@ -5,7 +5,7 @@ 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/BasicInfoBanner.vue";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
onMounted(() => {
fetchCopilots();
@@ -16,7 +16,10 @@ onMounted(() => {
<template>
<BasicListSkeleton :items-count-min="5" :items-count-max="10" v-if="loading"/>
<BasicInfoBanner v-else-if="!loading && copilots.length === 0" :router-add="{name: 'addCopilot'}">
<BasicInfoBanner
v-else-if="!loading && copilots.length === 0"
:router-add="{name: 'addCopilot'}"
>
Zatím tu není nikdo. Přidej si let s někým nebo kopilota vytvoř ručně tu.
</BasicInfoBanner>
src/pages/profile/copilot/EditCopilotPage.vue
+11 -7
View File
@@ -1,10 +1,10 @@
<script setup>
import {onMounted} from "vue";
import {loading, copilot, fetchCopilot} from "src/composables/objects/copilot";
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";
import {useRoute} from "vue-router";
import {useRoute, useRouter} from "vue-router";
import {useCopilotsStore} from "stores/Copilots";
import {successObject} from "src/composables/dialog";
import {useQuasar} from "quasar";
@@ -23,19 +23,23 @@ onMounted(() => {
});
const $q = useQuasar();
const $router = useRouter();
const handleSave = (formData) => {
useCopilotsStore().update(copilotId, formData).then(() => {
$q.notify(successObject("Kopilot úspěšně upraven"));
// useRouter().push({name: "copilots"});
// TODO: ^^ hazi error
})
$router.push({name: "copilotDetail", params: {id: copilotId}});
});
}
</script>
<template>
<CopilotEditSkeleton v-if="loading"/>
<CopilotEditForm v-else :copilot="copilot" @save="handleSave"/>
<CopilotEditForm
v-else
:copilot="copilot"
:is-request-pending="isRequestPending"
@save="handleSave"
/>
</template>
src/pages/profile/copilot/NewCopilotPage.vue
+3 -7
View File
@@ -1,24 +1,20 @@
<script setup>
import {useRouter} from "vue-router";
import {useQuasar} from "quasar";
import {ref} from "vue";
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";
let isRequestPending = ref(false);
const $q = useQuasar();
const router = useRouter();
const handleSave = (formData) => {
isRequestPending.value = true;
useCopilotsStore().create(formData).then(() => {
$q.notify(successObject("Kopilot úspěšně vytvořen"));
router.push({name: "copilots"});
}).finally(() => {
isRequestPending.value = false;
})
}
});
};
useAppStore().setPageTitle("Nový spolucestující");
useAppStore().setBreadcrumbs([
src/pages/profile/flight/EditFlightPage.vue
+46 -49
View File
@@ -1,13 +1,13 @@
<script setup>
import FlightFormSteps from "components/flights/form/FlightFormSteps.vue";
import {computed, onMounted, reactive, ref, watch} from "vue";
import {onMounted, ref, watch} from "vue";
import {useRoute} from "vue-router";
import {useFlightsStore} from "stores/Flights";
import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
import {useAircraftsStore} from "stores/Aircrafts";
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
import {useAirportsStore} from "stores/Airports";
import {useMeta, useQuasar} from "quasar";
import {useQuasar} from "quasar";
import {storeToRefs} from "pinia";
import {flightName} from "src/composables/objects/flight";
import FlightFormCopilot from "components/flights/form/FlightFormCopilot.vue";
@@ -16,17 +16,19 @@ import FlightFormNotes from "components/flights/form/FlightFormNotes.vue";
import FlightFormPhotos from "components/flights/form/FlightFormPhotos.vue";
import {usePhotosStore} from "stores/Photo";
import PhotosList from "components/photos/PhotosList.vue";
import {confirmObject, successObject} from "src/composables/dialog";
import PhotoForm from "components/photos/PhotoForm.vue";
import {successObject} 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";
useMeta({title: "Editace letu"});
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";
const $q = useQuasar();
const route = useRoute();
const flightId = parseInt(route.params.id);
const $route = useRoute();
const flightId = parseInt($route.params.id);
const aircrafts = storeToRefs(useAircraftsStore()).items;
const locations = storeToRefs(usePointsOfInterestStore()).items;
@@ -34,17 +36,26 @@ const airports = storeToRefs(useAirportsStore()).items;
const copilots = storeToRefs(useCopilotsStore()).items;
const formStep = ref("");
watch(() => route.params.step, (val) => formStep.value = val);
watch(() => $route.params.step, (val) => formStep.value = val);
onMounted(() => {
formStep.value = route.params.step || "basic";
formStep.value = $route.params.step || "basic";
useAircraftsStore().fetch();
usePointsOfInterestStore().fetch();
useAirportsStore().fetch();
useCopilotsStore().fetch();
fetchFlight(flightId);
fetchFlight(flightId).then(() => {
const flightNameFormatted = flightName(flight.value);
useAppStore().setPageTitle(`Editace - ${flightNameFormatted}`);
useAppStore().setBreadcrumbs([
{to: {name: "myFlights"}, label: "Moje lety"},
{to: {name: "flightDetail", params: {id: flightId}}, label: flightNameFormatted},
{label: "Editace"}
]);
})
});
const handleFlightEdit = (data) => {
@@ -56,9 +67,11 @@ const handleFlightEdit = (data) => {
}
const isRequestPending = storeToRefs(useFlightsStore()).isMutationRunning;
const uploadInProgress = ref(false);
const handlePhotosUpload = (data) => {
const promises = [];
uploadInProgress.value = true;
for (const photo of data.photos) {
promises.push(usePhotosStore().upload(flightId, {photo}));
}
@@ -66,48 +79,24 @@ const handlePhotosUpload = (data) => {
Promise.all(promises).then(() => {
$q.notify(successObject("Úspěšně nahráno"));
fetchFlight(flightId);
});
}).finally(() => uploadInProgress.value = false);
}
const _findPhotoIndex = (photoId) => flight.value.photos.findIndex((object) => object.id === photoId);
const confirmPhotoDelete = (id) => {
$q.dialog(confirmObject("Opravdu chces smazat tuto fotku?"))
.onOk(() => {
const deletePhoto = (id) => {
usePhotosStore().delete(id).then((data) => {
flight.value.photos.splice(_findPhotoIndex(data.id), 1);
});
});
}
const handlePhotoUpdate = (formData) => {
const photoId = formData.id;
delete formData.id;
usePhotosStore().update(photoId, formData).then((data) => {
const idx = _findPhotoIndex(data.id);
flight.value.photos[idx] = data;
})
}
const openEdit = ref(false);
const editPhoto = ref(null);
const openPhotoEdit = (photo) => {
openEdit.value = true;
editPhoto.value = photo;
}
</script>
<template>
<FlightEditSkeleton v-if="loading"/>
<template v-else>
<q-breadcrumbs :key="loading">
<q-breadcrumbs-el :to="{name: 'myFlights'}">Moje lety</q-breadcrumbs-el>
<q-breadcrumbs-el :to="{name: 'flightDetail', params: {id: flightId}}">{{ flightName(flight) }}</q-breadcrumbs-el>
<q-breadcrumbs-el>Editace</q-breadcrumbs-el>
</q-breadcrumbs>
<FlightFormSteps :router-edit-mode="true" :flightId="flightId" />
<FlightFormSteps :router-edit-mode="true" :flightId="flightId"/>
<q-tab-panels v-model="formStep">
<q-tab-panel name="basic">
@@ -136,23 +125,31 @@ const openPhotoEdit = (photo) => {
<q-tab-panel name="photos">
<FlightFormPhotos
:flight="flight"
:is-request-pending="isRequestPending"
:is-request-pending="isRequestPending || uploadInProgress"
@save="handlePhotosUpload"
/>
<PhotoForm
v-model="openEdit"
:locations="locations"
:photo="editPhoto"
@save="handlePhotoUpdate"
/>
Tu nejsou videt fotky po nahrani
<PhotosList
:photos="flight.photos"
@edit="openPhotoEdit"
@delete="confirmPhotoDelete"
@batch-edit="openBatchPhotoForm"
@delete="deletePhoto"
/>
<!-- Dialogs for photo edit -->
<PhotoFormDialog
v-model="openEdit"
:locations="locations"
:photo="editPhoto"
@save="handlePhotoUpdate(flightId, $event)"
/>
<BatchPhotoFormDialog
v-model="openBatchEdit"
:locations="locations"
:photos="editBatchPhotos"
@save="handleBatchPhotoEdit(flightId, $event)"
@delete="deletePhoto"
/>
</q-tab-panel>
src/pages/profile/flight/FlightDetailPage.vue
+4 -1
View File
@@ -11,11 +11,14 @@ import {useFlightsStore} from "stores/Flights";
import PhotoCarousel from "components/flights/PhotoCarousel.vue";
import FlightTrackMap from "components/flights/FlightTrackMap.vue";
import {useUserStore} from "stores/User";
import {storeToRefs} from "pinia";
const $q = useQuasar();
const $router = useRouter();
const flightId = parseInt(useRoute().params.id);
const loggedUser = storeToRefs(useUserStore()).user;
onMounted(() => {
fetchFlight(flightId);
})
@@ -59,7 +62,6 @@ const copyLinkToClipboard = () => {
$q.notify(successObject("Odkaz zkopírován"))
});
};
</script>
@@ -82,6 +84,7 @@ const copyLinkToClipboard = () => {
<q-btn
@click="togglePublicVisibility"
:icon="flight.isPublic ? 'visibility_off' : 'visibility'"
:disable="!loggedUser.publicUsername"
flat
:label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
/>
src/pages/profile/flight/FlightsPage.vue
+8 -11
View File
@@ -6,6 +6,7 @@ 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";
const $q = useQuasar();
@@ -18,19 +19,15 @@ onMounted(() => {
<template>
<FlightsListSkeleton v-if="loading"/>
<div class="q-pa-md q-gutter-sm" v-else-if="!loading && flights.length === 0">
<q-banner class="bg-light-blue text-white">
<template v-slot:avatar>
<q-icon name="info"/>
</template>
<BasicInfoBanner
v-else-if="!loading && flights.length === 0"
:route-add="{name: 'addFlight'}"
label-add="Přidat let"
>
Nemáš zaznamenaný žádný let.
<template v-slot:action>
<q-btn flat color="white" :to="{name: 'addFlight'}" label="Přidat let"/>
</template>
</q-banner>
</div>
</BasicInfoBanner>
<FlightsList v-else :items="flights" @delete="handleDeleteFlight($q, $event)" />
<FlightsList v-else :items="flights" @delete="handleDeleteFlight($q, $event)"/>
<FAB mode="add" :router-link="{name: 'addFlight'}"/>
</template>
src/pages/profile/flight/NewFlightPage.vue
+18 -6
View File
@@ -1,5 +1,5 @@
<script setup>
import {onMounted} from "vue";
import {onMounted, ref} from "vue";
import {useAircraftsStore} from "stores/Aircrafts";
import {useFlightsStore} from "stores/Flights";
import {useRouter} from "vue-router";
@@ -9,13 +9,20 @@ import {useAirportsStore} from "stores/Airports";
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(() => {
useAircraftsStore().fetch();
usePointsOfInterestStore().fetch();
useFlightsStore().fetch();
useAirportsStore().fetch();
const promises = [
useAircraftsStore().fetch(),
usePointsOfInterestStore().fetch(),
useFlightsStore().fetch(),
useAirportsStore().fetch(),
];
loading.value = true;
Promise.all(promises).finally(() => loading.value = false);
useAppStore().setPageTitle("Nový let");
useAppStore().setBreadcrumbs([
@@ -38,10 +45,15 @@ const handleSave = (formData) => {
<template>
<FlightFormSteps :disabled="['copilot', 'track', 'photos', 'notes']"/>
<FlightEditSkeleton v-if="loading"/>
<template v-else>
<FlightFormBasic
@save="handleSave"
:is-request-pending="isRequestPending"
:aircrafts="aircrafts"
:airports="airports"
:locations="locations"
/>
</template>
</template>
src/pages/profile/poi/EditPointOfInterestPage.vue
+5 -2
View File
@@ -11,7 +11,7 @@ import {usePointsOfInterestTypeStore} from "stores/PointOfInterestType";
import {storeToRefs} from "pinia";
import POIForm from "components/poi/POIForm.vue";
import {useUserStore} from "stores/User";
import AccessDeniedBanner from "components/AccessDeniedBanner.vue";
import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
const poiId = parseInt(useRoute().params.id);
@@ -43,6 +43,9 @@ const handleSave = (data) => {
<template>
<POIEditSkeleton v-if="loading"/>
<AccessDeniedBanner v-else-if="poi.createdbyId !== loggedUser.id" :route-back="{name: 'poiDetail', params: {id: poiId}}"/>
<AccessDeniedBanner
v-else-if="poi.createdById !== loggedUser.id"
:route-back="{name: 'poiDetail', params: {id: poiId}}"
/>
<POIForm :poi="poi" :types="poiTypes" v-else @save="handleSave"/>
</template>
src/pages/profile/poi/NewPointOfInterestPage.vue
-2
View File
@@ -1,7 +1,6 @@
<script setup>
import {useRouter} from "vue-router";
import {useQuasar} from "quasar";
import {ref} from "vue";
import POIForm from "components/poi/POIForm.vue";
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
import {successObject} from "src/composables/dialog";
@@ -17,7 +16,6 @@ const handleSave = (formData) => {
router.push({name: "poi"});
})
}
const isRequestPending = storeToRefs(usePointsOfInterestStore()).isMutationRunning;
useAppStore().setPageTitle("Nové zajímavé místo");
src/pages/profile/poi/PointOfInterestDetailPage.vue
+1 -1
View File
@@ -9,7 +9,7 @@ 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/BasicInfoBanner.vue";
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
import FlightsList from "components/flights/FlightsList.vue";
const loggedUser = storeToRefs(useUserStore()).user;
src/pages/profile/poi/PointsOfInterestPage.vue
+8 -11
View File
@@ -5,6 +5,8 @@ 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";
onMounted(() => {
fetchPOIList();
@@ -15,19 +17,14 @@ useAppStore().setPageTitle("Zajímavá místa")
<template>
<BasicListSkeleton :items-count-min="5" :items-count-max="10" v-if="loading"/>
<div class="q-pa-md q-gutter-sm" v-else-if="!loading && pointsOfInterest.length === 0">
<q-banner class="bg-light-blue text-white">
<template v-slot:avatar>
<q-icon name="info"/>
</template>
<BasicInfoBanner
v-else-if="!loading && pointsOfInterest.length === 0"
:route-add="{name: 'addPoi'}"
label-add="Přidat"
>
Nemáš tu uložené žádné zajímavé místo. Přidej si let, nastav si tam ručně trasu a jednotlivé body se zobrazí
i v tomto seznamu.
<template v-slot:action>
<q-btn flat color="white" :to="{name: 'addPoi'}" label="Přidat"/>
</template>
</q-banner>
</div>
</BasicInfoBanner>
<POIList
v-else
src/pages/public/LoginPage.vue
+11 -5
View File
@@ -2,6 +2,7 @@
import {ref} from "vue";
import {useUserStore} from "stores/User";
import {useRouter} from "vue-router";
import {isRequired, isValidEmail, minLength} from "src/composables/form/rules";
const email = ref("");
const password = ref("");
@@ -12,6 +13,11 @@ const logUser = () => {
router.push({name: "myFlights"});
});
};
const rules = {
email: [isRequired, isValidEmail],
password: [isRequired, minLength(4)]
}
</script>
<template>
@@ -25,12 +31,12 @@ const logUser = () => {
</q-card-section>
<q-card-section>
<q-form class="q-px-sm q-pt-xl" @submit.prevent="logUser()">
<q-input square clearable v-model="email" type="email" label="Email">
<q-input square clearable v-model="email" :rules="rules.email" type="email" label="E-mail">
<template v-slot:prepend>
<q-icon name="email"/>
</template>
</q-input>
<q-input square clearable v-model="password" type="password" label="Password">
<q-input square clearable v-model="password" :rules="rules.password" type="password" label="Password">
<template v-slot:prepend>
<q-icon name="lock"/>
</template>
@@ -41,9 +47,9 @@ const logUser = () => {
<q-card-actions class="q-px-lg">
<q-btn unelevated size="lg" class="full-width" label="Přihlásit se" @click.prevent="logUser()"/>
</q-card-actions>
<q-card-section class="text-center q-pa-sm">
<router-link :to="{name: 'forgottenPassword'}" class="text-grey-6">Zapomenuté heslo</router-link>
</q-card-section>
<!-- <q-card-section class="text-center q-pa-sm">-->
<!-- <router-link :to="{name: 'forgottenPassword'}" class="text-grey-6">Zapomenuté heslo</router-link>-->
<!-- </q-card-section>-->
</q-card>
</q-page>
src/pages/public/PilotProfilePage.vue
+1
View File
@@ -41,6 +41,7 @@ onMounted(() => {
:items="flights"
:displayVisibilityInfo="loggedUser.id === pilot.id"
:route-detail="{name: 'publicFlightDetail', params: {username: username}}"
class="q-mb-md"
/>
</template>
</div>
src/pages/public/RegisterPage.vue
-1
View File
@@ -23,7 +23,6 @@ const registerUser = () => {
})
}).catch(({response}) => {
console.log(response.detail);
if (response.detail === 'User already exists') {
$q.notify(errorObject("Uživatel s tímto e-mailem je již registrovaný. Zkus se přihlásit."));
} else {
src/stores/Copilots.js
+9 -7
View File
@@ -6,7 +6,8 @@ import {updateInItems} from "stores/helpers";
export const useCopilotsStore = defineStore('SecondPilots', {
state: () => ({
items: []
items: [],
isMutationRunning: false,
}),
actions: {
@@ -21,19 +22,20 @@ export const useCopilotsStore = defineStore('SecondPilots', {
},
create(formData) {
delete formData['id'];
return apolloWrapper.mutate(CREATE_COPILOT, {input: formData}).then(({data}) => {
this.items.push(data.createCopilot);
return data.createCopilot;
})
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);
},
}
})
src/stores/FlashMessages.js
-13
View File
@@ -1,13 +0,0 @@
import {defineStore} from 'pinia'
export const useFlashMessagesStore = defineStore('FlashMessages', {
state: () => ({
items: []
}),
actions: {
add(title, content, type) {
}
}
})
src/stores/Flights.js
-3
View File
@@ -49,11 +49,8 @@ export const useFlightsStore = defineStore('Flights', {
return apolloWrapper
.query(FLIGHTS_LIST, {username})
.then((resp) => {
console.log(resp);
const data = resp.data;
this.items = data.flights;
return data.flights;
}).catch(err => console.log(err));
},
src/stores/Photo.js
+8 -3
View File
@@ -3,6 +3,9 @@ import {apolloWrapper} from "src/graphql/apollo";
import {DELETE_PHOTO, EDIT_PHOTO, UPLOAD_PHOTO} from "src/graphql/mutations/photo";
export const usePhotosStore = defineStore('photos', {
state: () => ({
isMutationRunning: false,
}),
actions: {
upload(flightId, formData) {
@@ -20,15 +23,17 @@ export const usePhotosStore = defineStore('photos', {
if (!formData.description) {
formData.description = "";
}
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);
},
delete(photoId) {
return apolloWrapper.mutate(DELETE_PHOTO, {id: photoId}).then(({data}) => {
src/stores/index.js
-1
View File
@@ -13,7 +13,6 @@ import { createPinia } from 'pinia'
export default store((/* { ssrContext } */) => {
const pinia = createPinia()
console.log("Pinia index");
// You can add Pinia plugins here
// pinia.use(SomePiniaPlugin)