runware.ai connection test funktioniert, drucken dialog implementiert

resources/js/Pages/Home.vue

@@ -39,6 +39,12 @@
     />
 
     <LoadingSpinner v-if="isLoading" :progress="processingProgress" />
+    <PrintQuantityModal
+      v-if="currentOverlayComponent === 'printQuantityModal'"
+      @close="currentOverlayComponent = null"
+      @printConfirmed="handlePrintConfirmed"
+      :maxCopies="maxCopiesSetting"
+    />
       </div>
 </template>
 
@@ -70,6 +76,7 @@ import ImageContextMenu from '../Components/ImageContextMenu.vue';
 import StyleSelector from '../Components/StyleSelector.vue';
 import StyledImageDisplay from '../Components/StyledImageDisplay.vue'; // Import the new component
 import LoadingSpinner from '../Components/LoadingSpinner.vue'; // Import the new component
+import PrintQuantityModal from '../Components/PrintQuantityModal.vue'; // Import the new component
 import axios from 'axios';
 import { ref, computed, onMounted, onUnmounted } from 'vue';
 
@@ -84,6 +91,7 @@ const processingProgress = ref(0); // To store the progress percentage
 const errorMessage = ref(null); // New ref for error messages
 const isLoading = ref(false); // New ref for loading state
 const currentTheme = ref('light'); // New ref for current theme
+const maxCopiesSetting = ref(10); // Default to 10, will be fetched from backend
 
 let touchStartX = 0;
 let touchEndX = 0;
@@ -124,8 +132,27 @@ const showContextMenu = (image, event) => {
 };
 
 const printImage = () => {
-  console.log('Printing image:', selectedImage.value);
-  currentOverlayComponent.value = null;
+  console.log('Showing print quantity modal for image:', selectedImage.value);
+  currentOverlayComponent.value = 'printQuantityModal';
+};
+
+const handlePrintConfirmed = (quantity) => {
+  console.log(`Printing ${quantity} copies of image:`, selectedImage.value);
+  currentOverlayComponent.value = null; // Close the modal
+
+  axios.post('/api/print-image', {
+    image_id: selectedImage.value.id,
+    image_path: selectedImage.value.path,
+    quantity: quantity,
+  })
+  .then(response => {
+    console.log('Print request sent successfully:', response.data);
+    showError('Print request sent successfully!');
+  })
+  .catch(error => {
+    console.error('Error sending print request:', error);
+    showError(error.response?.data?.error || 'Failed to send print request.');
+  });
 };
 
 const showStyleSelector = () => {
@@ -294,6 +321,15 @@ onMounted(() => {
       console.error('Error fetching image refresh interval:', error);
       fetchInterval = setInterval(fetchImages, 5000); // Fallback to 5 seconds
     });
+
+  // Fetch max number of copies setting from API
+  axios.get('/api/max-copies-setting')
+    .then(response => {
+      maxCopiesSetting.value = response.data.max_copies;
+    })
+    .catch(error => {
+      console.error('Error fetching max copies setting:', error);
+    });
 });
 
 onUnmounted(() => {