148 lines
3.6 KiB
Vue
148 lines
3.6 KiB
Vue
<template>
|
|
<div class="home">
|
|
<div class="main-content">
|
|
<div class="gallery-container">
|
|
<h1 class="text-2xl font-bold text-center my-4">{{ __('gallery_title') }}</h1>
|
|
<GalleryGrid :images="paginatedImages" @imageTapped="showContextMenu" />
|
|
<Navigation
|
|
:currentPage="currentPage"
|
|
:totalPages="totalPages"
|
|
@prevPage="prevPage"
|
|
@nextPage="nextPage"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<ImageContextMenu
|
|
v-if="currentOverlayComponent === 'contextMenu'"
|
|
:position="contextMenuPosition"
|
|
:image="selectedImage"
|
|
@close="currentOverlayComponent = null"
|
|
@print="printImage"
|
|
@changeStyle="showStyleSelector"
|
|
/>
|
|
|
|
<StyleSelector
|
|
v-if="currentOverlayComponent === 'styleSelector'"
|
|
:position="contextMenuPosition"
|
|
@styleSelected="applyStyle"
|
|
@back="goBackToContextMenu"
|
|
@close="currentOverlayComponent = null"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Navigation from '../Components/Navigation.vue';
|
|
import GalleryGrid from '../Components/GalleryGrid.vue';
|
|
import ImageContextMenu from '../Components/ImageContextMenu.vue';
|
|
import StyleSelector from '../Components/StyleSelector.vue';
|
|
import axios from 'axios';
|
|
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
|
|
|
const images = ref([]);
|
|
const imagesPerPage = 12;
|
|
const currentPage = ref(1);
|
|
const currentOverlayComponent = ref(null); // null, 'contextMenu', 'styleSelector'
|
|
const contextMenuPosition = ref({ x: 0, y: 0 });
|
|
const selectedImage = ref(null);
|
|
let fetchInterval = null;
|
|
|
|
const totalPages = computed(() => {
|
|
return Math.ceil(images.value.length / imagesPerPage);
|
|
});
|
|
|
|
const paginatedImages = computed(() => {
|
|
const start = (currentPage.value - 1) * imagesPerPage;
|
|
const end = start + imagesPerPage;
|
|
return images.value.slice(start, end);
|
|
});
|
|
|
|
const fetchImages = () => {
|
|
axios.get('/api/images')
|
|
.then(response => {
|
|
images.value = response.data;
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching images:', error);
|
|
});
|
|
};
|
|
|
|
const showContextMenu = (image, event) => {
|
|
selectedImage.value = image;
|
|
contextMenuPosition.value = { x: event.clientX, y: event.clientY };
|
|
currentOverlayComponent.value = 'contextMenu';
|
|
};
|
|
|
|
const printImage = () => {
|
|
console.log('Printing image:', selectedImage.value);
|
|
currentOverlayComponent.value = null;
|
|
};
|
|
|
|
const showStyleSelector = () => {
|
|
currentOverlayComponent.value = 'styleSelector';
|
|
};
|
|
|
|
const goBackToContextMenu = () => {
|
|
currentOverlayComponent.value = 'contextMenu';
|
|
};
|
|
|
|
const applyStyle = (style) => {
|
|
console.log('Applying style:', style.title, 'to image:', selectedImage.value);
|
|
axios.post('/api/images/style-change', {
|
|
image_id: selectedImage.value.id,
|
|
style_id: style.id,
|
|
})
|
|
.then(response => {
|
|
console.log('Style change request successful:', response.data);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error applying style:', error);
|
|
});
|
|
currentOverlayComponent.value = null;
|
|
};
|
|
|
|
const prevPage = () => {
|
|
if (currentPage.value > 1) {
|
|
currentPage.value--;
|
|
}
|
|
};
|
|
|
|
const nextPage = () => {
|
|
if (currentPage.value < totalPages.value) {
|
|
currentPage.value++;
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
fetchImages();
|
|
fetchInterval = setInterval(fetchImages, 5000);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
clearInterval(fetchInterval);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.home {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.main-content {
|
|
display: flex;
|
|
width: 100%;
|
|
max-width: 1400px;
|
|
}
|
|
|
|
.gallery-container {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20px;
|
|
}
|
|
</style> |