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
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>