initial import

resources/js/Pages/Home.vue

@@ -0,0 +1,148 @@
+<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>