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

Lepsi verejna cast, ssr, lepsi prace s fotkamaa

Browse Source
This commit is contained in:
Michal Kváček
2023-12-04 22:46:23 +01:00
parent 11cc6ad107
commit 3bd4d7ba52
62 changed files with 1331 additions and 619 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/photos/BatchPhotoFormDialog.vue
+26 -8
View File
@@ -12,13 +12,21 @@ const props = defineProps({
},
locations: {
type: Array
}
},
aircraft: {
type: Object
},
copilots: {
type: Array
},
});
const formData = ref({
name: "",
description: "",
pointOfInterest: null,
copilots: [],
isAircraft: false,
photoIds: []
});
@@ -34,23 +42,33 @@ const setup = () => {
<template>
<DialogWrapper :formData="formData" @show="setup()">
<q-card-section class="text-center">
<!-- <q-scroll-area style="min-height: 80px; max-height: 150px">-->
<q-img :src="photo.thumbnailUrl" width="80px" class="q-ma-sm" v-for="photo in photos" :key="photo.thumbnailUrl"/>
<!-- {{ photos }}-->
<!-- </q-scroll-area>-->
</q-card-section>
<q-card-section>
<FormWrapper :save-button="false">
<q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
<q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
<ComboboxInput
:options="locations"
v-bind="commonProps"
v-model="formData.pointOfInterest"
:enable-new-values="false"
label="POI"
label="Místo"
/>
<q-select
v-if="copilots.length > 0"
:options="copilots"
v-model="formData.copilots"
v-bind="commonProps"
label="Kopiloti"
option-label="name"
option-value="id"
multiple
/>
<q-checkbox v-model="formData.isAircraft" :label="`Letadlo (${aircraft.callSign})`"/>
<q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
<q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
</FormWrapper>
</q-card-section>
</DialogWrapper>
src/components/photos/PhotoFormDialog.vue
+23 -6
View File
@@ -12,6 +12,12 @@ const props = defineProps({
},
locations: {
type: Array
},
aircraft: {
type: Object
},
copilots: {
type: Array
}
});
@@ -20,7 +26,8 @@ const formData = ref({
name: "",
description: "",
pointOfInterest: null,
isFlightCover: false
copilots: [],
isAircraft: false,
});
const setup = (() => {
@@ -33,17 +40,27 @@ const setup = (() => {
<q-img :src="photo.thumbnailUrl"/>
<q-card-section>
<FormWrapper :save-button="false">
<q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
<q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
<ComboboxInput
:options="locations"
v-bind="commonProps"
v-model="formData.pointOfInterest"
label="POI"
label="Místo"
/>
<q-checkbox v-model="formData.isFlightCover" label="Úvodní fotografie k letu?"/>
<q-select
v-if="copilots.length > 0"
:options="copilots"
v-model="formData.copilots"
v-bind="commonProps"
label="Kopiloti"
option-label="name"
option-value="id"
multiple
/>
<q-checkbox v-model="formData.isAircraft" :label="`Letadlo (${aircraft.callSign})`"/>
<q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
<q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
</FormWrapper>
</q-card-section>
</DialogWrapper>
src/components/photos/PhotoGallery.vue
+62 -27
View File
@@ -1,17 +1,19 @@
<script setup>
import {onMounted, onUnmounted} from "vue";
import {computed, onMounted, onUnmounted, ref, watch} from "vue";
import 'photoswipe/style.css';
import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css";
import PhotoSwipeDynamicCaption from "../../../node_modules/photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.esm";
import PhotoCaption from "components/photos/PhotoCaption.vue";
import PhotoSwipeLightbox from "../../../node_modules/photoswipe/dist/photoswipe-lightbox.esm"
import PhotoSwipe from "../../../node_modules/photoswipe/dist/photoswipe.esm"
import {useRoute, useRouter} from "vue-router";
import {usePhotosStore} from "stores/Photos";
const props = defineProps({
galleryId: {
type: String,
required: false,
default: () => "randomGalleryId"
default: () => "photogallery"
},
photos: {
type: Array,
@@ -19,46 +21,79 @@ const props = defineProps({
}
})
let $lightbox = null;
const route = useRoute();
const $router = useRouter();
let $lightbox = ref(null);
const initLightbox = () => {
if ($lightbox.value && $lightbox.value.pswp) {
// lightbox already initialized
return
}
$lightbox.value = new PhotoSwipeLightbox({
gallery: '#' + props.galleryId,
children: 'a',
pswpModule: () => PhotoSwipe,
});
let captionPlugin = new PhotoSwipeDynamicCaption($lightbox.value, {
type: 'auto',
});
$lightbox.value.init();
}
onMounted(() => {
if (!$lightbox) {
$lightbox = new PhotoSwipeLightbox({
gallery: '#' + props.galleryId,
children: 'a',
pswpModule: () => import('photoswipe'),
});
initLightbox();
let captionPlugin = new PhotoSwipeDynamicCaption($lightbox, {
type: 'auto',
});
// todo: tohle nefunguje, sice se galerie zavre, ale i tak se user presmeruje na predchozi stranku
window.onpopstate = function (e) {
if (!$lightbox.value || !$lightbox.value.pswp) {
initLightbox();
}
$lightbox.init();
}
if ($lightbox.value && $lightbox.value.pswp)
$lightbox.value.pswp.close();
};
});
onUnmounted(() => {
if ($lightbox) {
$lightbox.destroy();
$lightbox = null;
if ($lightbox.value) {
$lightbox.value.destroy();
$lightbox.value = null;
}
});
const openedPhoto = computed(() => usePhotosStore().openedPhoto);
watch(() => [openedPhoto.value, $lightbox.value], () => {
if (!$lightbox.value || !openedPhoto.value) return;
const idx = props.photos.findIndex(p => p.id === openedPhoto.value.id);
if (idx >= 0) {
$lightbox.value.loadAndOpen(idx);
usePhotosStore().setOpenedPhoto(null);
}
}, {immediate: true})
</script>
<template>
<div :id="galleryId" class="row">
<div class="col-6 col-sm-4 col-md-4 col-lg-3 q-pa-sm" v-for="photo in photos" :key="photo.id">
<a
:href="photo.url"
:data-pswp-width="photo.width"
:data-pswp-height="photo.height"
target="_blank"
rel="noreferrer"
:href="photo.url"
:data-pswp-width="photo.width"
:data-pswp-height="photo.height"
target="_blank"
rel="noreferrer"
>
<q-img
spinner-color="primary"
class="rounded-borders"
:src="photo.thumbnailUrl"
alt=""
spinner-color="primary"
class="rounded-borders"
:src="photo.thumbnailUrl"
alt=""
>
<div class="absolute-bottom" v-if="photo.name !== ''">
{{ photo.name }}
src/components/photos/PhotosEditorList.vue
+47 -27
View File
@@ -3,24 +3,29 @@ import {computed, onMounted, reactive, ref, watch} from "vue";
import {useQuasar} from "quasar";
import {confirmObject} from "src/composables/dialog";
const $q = useQuasar();
const props = defineProps({
photos: {
type: Array
},
});
const batchEdit = ref({});
onMounted(() => {
for (const photo of props.photos) {
batchEdit.value[photo.id] = false;
titlePhoto: {
type: Object,
},
showActions: {
type: Boolean,
required: false,
default: true
}
});
const emits = defineEmits(["edit", "delete", "batch-edit", "batch-rotate"])
const $q = useQuasar();
const batchEdit = ref({});
for (const photo of props.photos) {
batchEdit.value[photo.id] = false;
}
const emits = defineEmits(["edit", "delete", "set-title-photo", "batch-edit", "batch-rotate"])
const openEdit = (photo) => {
emits("edit", photo);
@@ -29,20 +34,20 @@ const openEdit = (photo) => {
const confirmPhotoDelete = (id) => {
$q.dialog(confirmObject("Opravdu chces smazat tuto fotku?"))
.onOk(() => {
emits("delete", id);
});
.onOk(() => {
emits("delete", id);
});
}
const confirmBatchPhotoDelete = () => {
$q.dialog(confirmObject("Opravdu chces smazat vybrané fotky?"))
.onOk(() => {
for (const id in batchEdit.value) {
if (!batchEdit.value[id]) continue;
emits("delete", parseInt(id));
batchEdit.value[id] = false;
}
});
.onOk(() => {
for (const id in batchEdit.value) {
if (!batchEdit.value[id]) continue;
emits("delete", parseInt(id));
batchEdit.value[id] = false;
}
});
}
const handleImageClick = (photo, idx) => {
@@ -108,6 +113,10 @@ const batchOptionsProps = computed(() => ({
class: "q-ml-lg",
disable: !isBatchEditAllowed.value
}));
const setFlightCover = (titlePhoto) => {
emits("set-title-photo", titlePhoto);
}
</script>
<template>
@@ -115,6 +124,15 @@ const batchOptionsProps = computed(() => ({
<div class="col-6 col-sm-4 col-md-4 col-lg-3" v-for="(photo, idx) in photos" :key="photo.id">
<q-card :class='{"q-ma-sm": true, "shadow-1": !batchEdit[photo.id], "shadow-10": batchEdit[photo.id]}'>
<q-img :src="photo.thumbnailUrl" @click="handleImageClick(photo, idx)" style="cursor: pointer">
<div class="absolute-top bg-transparent text-right">
<q-btn
icon="star"
:color="titlePhoto?.id === photo.id ? 'amber-9' : 'grey-6'"
round
@click.stop.prevent="setFlightCover(photo)"
/>
</div>
<div class="absolute-bottom" v-if="photo.name !== '' || photo.description !== ''">
<div class="text-h6" v-if="photo.name !== ''">
{{ photo.name }}
@@ -125,24 +143,26 @@ const batchOptionsProps = computed(() => ({
</div>
</q-img>
<q-card-actions align="right" :class="{'bg-primary': batchEdit[photo.id], 'text-white': batchEdit[photo.id]}">
<q-card-actions align="right" :class="{'bg-primary': batchEdit[photo.id], 'text-white': batchEdit[photo.id]}" v-if="showActions">
<div class="col-grow">
<q-checkbox v-model="batchEdit[photo.id]"/>
<q-icon name="star" v-if="photo.isFlightCover" color="red"/>
<q-icon name="flight" v-if="photo.isAircraft" size="xs" color="grey-5" />
<q-icon name="person" v-if="photo.copilots.length > 0" size="xs" color="grey-5" />
</div>
<q-btn flat icon="edit" color="black" :to="{name: 'photoEditor', params: {id: photo.id}}"/>
<q-btn flat icon="info" color="blue" @click="openEdit(photo)"/>
<q-btn flat icon="edit" color="blue" @click="openEdit(photo)"/>
<q-btn flat icon="tune" color="black" :to="{name: 'photoEditor', params: {id: photo.id}}"/>
<q-btn flat icon="delete" color="red" @click="confirmPhotoDelete(photo.id)"/>
</q-card-actions>
</q-card>
</div>
</div>
<q-page-sticky :offset="[50, 50]" position="bottom" v-if="photos.length > 0">
<q-page-sticky :offset="[50, 50]" position="bottom" v-if="photos.length > 0 && showActions">
<q-card>
<q-card-actions>
<q-checkbox v-model="checkAll" label="Vybrat vše"/>
<q-btn v-bind="batchOptionsProps" icon="info" :color="isBatchEditAllowed ? 'primary' : 'grey'" @click="openBatchEdit"/>
<q-btn v-bind="batchOptionsProps" icon="edit" :color="isBatchEditAllowed ? 'primary' : 'grey'" @click="openBatchEdit"/>
<q-btn v-bind="batchOptionsProps" icon="rotate_90_degrees_ccw" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate('counterClockwise')"/>
<q-btn v-bind="batchOptionsProps" icon="rotate_90_degrees_cw" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate('clockwise')"/>
<q-btn v-bind="batchOptionsProps" icon="delete" :color="isBatchEditAllowed ? 'red' : 'grey'" @click="confirmBatchPhotoDelete"/>
src/components/photos/TitlePhotoWithGallery.vue
+31
View File
@@ -0,0 +1,31 @@
<script setup>
import {useRoute, useRouter} from "vue-router";
import {usePhotosStore} from "stores/Photos";
const props = defineProps({
photo: {
type: Object,
required: true
},
title: {
type: String,
required: false
}
});
const route = useRoute();
const $router = useRouter();
const openGallery = (photo) => {
usePhotosStore().setOpenedPhoto(photo);
}
</script>
<template>
<q-img :src="photo.url" fit="cover" :ratio="4/3" @click="openGallery(photo)" class="cursor-pointer" v-if="photo">
<div class="absolute-bottom custom-caption" v-if="title && title !== ''">
<div class="text-h5">
{{ title }}
</div>
</div>
</q-img>
</template>