soeren/ai-stylegallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

runware.ai connection test funktioniert, drucken dialog implementiert

Browse Source
This commit is contained in:
SEB Fotografie - soeren
2025-08-08 10:11:56 +02:00
parent ad893b48a7
commit cfceaed08f
12 changed files with 305 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
resources/js/Components/ImageContextMenu.vue
View File

@@ -5,28 +5,23 @@
<img :src="image.path" :alt="'Selected Image ' + image.name" />
</div>
<div class="context-menu-options">
<ul v-if="!showStyleSelectorView">
<li @click="$emit('print', image)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 inline-block align-middle mr-2">
<path fill-rule="evenodd" d="M7.875 1.5C6.839 1.5 6 2.34 6 3.375v2.25a.75.75 0 0 0 1.5 0V3.375c0-.39.315-.75.75-.75h6.75c.39 0 .75.36.75.75v2.25a.75.75 0 0 0 1.5 0V3.375c0-1.036-.84-1.875-1.875-1.875H7.875Z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M19.875 9a.75.75 0 0 0-.75-.75H4.875a.75.75 0 0 0-.75.75v6.75c0 1.036.84 1.875 1.875 1.875h11.25c1.036 0 1.875-.84 1.875-1.875V9ZM12 12.75a.75.75 0 0 0 0 1.5h.007a.75.75 0 0 0 0-1.5H12Z" clip-rule="evenodd" />
<path d="M2.25 17.75a.75.75 0 0 0 0 1.5h19.5a.75.75 0 0 0 0-1.5H2.25Z" />
</svg>
Drucken
</li>
<li @click="showStyleSelectorView = true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 inline-block align-middle mr-2">
<path fill-rule="evenodd" d="M10.788 3.212a.75.75 0 0 0-1.06 0L7.212 5.788a.75.75 0 0 0 0 1.06l1.59 1.59a.75.75 0 0 0 1.06 0l2.576-2.576a.75.75 0 0 0 0-1.06L10.788 3.212ZM15.75 10.5a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM12 12a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75ZM18.75 10.5a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM12 15a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75ZM15.75 15a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM18.75 15a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM12 18a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75ZM15.75 18a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM18.75 18a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM12 21a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" />
</svg>
Stil ändern
</li>
<li @click="$emit('close')">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 inline-block align-middle mr-2">
<div v-if="!showStyleSelectorView" class="flex flex-col p-2 space-y-2">
<button @click="$emit('close')" class="context-menu-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-10 h-10 inline-block align-middle mr-2">
<path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
<path d="M6.22 6.22a.75.75 0 0 1 1.06 0L12 10.94l4.72-4.72a.75.75 0 1 1 1.06 1.06L13.06 12l4.72 4.72a.75.75 0 1 1-1.06 1.06L12 13.06l-4.72 4.72a.75.75 0 0 1-1.06-1.06L10.94 12 6.22 7.28a.75.75 0 0 1 0-1.06Z" />
</svg>
Schließen
</li>
</ul>
</button>
<button @click="$emit('print', image)" class="context-menu-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="w-8 h-8 inline-block align-middle mr-2"><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>
Drucken
</button>
<button @click="showStyleSelectorView = true" class="context-menu-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="w-8 h-8 inline-block align-middle mr-2"><!--!Font Awesome Pro v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM183.2 132.6c-1.3-2.8-4.1-4.6-7.2-4.6s-5.9 1.8-7.2 4.6l-16.6 34.7-38.1 5c-3.1 .4-5.6 2.5-6.6 5.5s-.1 6.2 2.1 8.3l27.9 26.5-7 37.8c-.6 3 .7 6.1 3.2 7.9s5.8 2 8.5 .6L176 240.5l33.8 18.3c2.7 1.5 6 1.3 8.5-.6s3.7-4.9 3.2-7.9l-7-37.8L242.4 186c2.2-2.1 3.1-5.3 2.1-8.3s-3.5-5.1-6.6-5.5l-38.1-5-16.6-34.7zm160 0c-1.3-2.8-4.1-4.6-7.2-4.6s-5.9 1.8-7.2 4.6l-16.6 34.7-38.1 5c-3.1 .4-5.6 2.5-6.6 5.5s-.1 6.2 2.1 8.3l27.9 26.5-7 37.8c-.6 3 .7 6.1 3.2 7.9s5.8 2 8.5 .6L336 240.5l33.8 18.3c2.7 1.5 6 1.3 8.5-.6s3.7-4.9 3.2-7.9l-7-37.8L402.4 186c2.2-2.1 3.1-5.3 2.1-8.3s-3.5-5.1-6.6-5.5l-38.1-5-16.6-34.7zm6.3 175.8c-28.9 6.8-60.5 10.5-93.6 10.5s-64.7-3.7-93.6-10.5c-18.7-4.4-35.9 12-25.5 28.1c24.6 38.1 68.7 63.5 119.1 63.5s94.5-25.4 119.1-63.5c10.4-16.1-6.8-32.5-25.5-28.1z"/></svg>
Stil ändern
</button>
</div>
<StyleSelector
v-else
:image_id="image.image_id"
@@ -86,7 +81,7 @@ const showStyleSelectorView = ref(false);
}
.context-menu-image-preview {
flex: 6; /* Takes 60% of the space (6 out of 10 parts) */
flex: 7; /* Takes 60% of the space (6 out of 10 parts) */
display: flex;
justify-content: center;
align-items: center;
@@ -101,32 +96,23 @@ const showStyleSelectorView = ref(false);
}
.context-menu-options {
flex: 4; /* Takes 40% of the space (4 out of 10 parts) */
flex: 3; /* Takes 40% of the space (4 out of 10 parts) */
display: flex;
flex-direction: column;
}
.context-menu ul {
list-style: none;
padding: 0;
margin: 0;
border-left: 1px solid var(--color-text); /* Trennlinie zwischen Bild und Menü */
min-width: 150px; /* Mindestbreite für das Menü */
}
.context-menu li {
padding: 15px;
cursor: pointer;
font-size: 1.1em;
.context-menu-button {
@apply flex items-center justify-start px-4 py-3 font-medium text-white bg-[#0056b3] hover:bg-[#004494] focus:outline-none focus:ring-2 focus:ring-[#0056b3] focus:ring-offset-2 transition ease-in-out duration-150 rounded-md;
width: 70%;
text-align: left;
border-bottom: 1px solid var(--color-text);
margin: 5px auto;
font-size: 1.8em;
}
.context-menu li:last-child {
.context-menu-button:last-child {
border-bottom: none;
}
.context-menu li:hover {
@apply hover:bg-gray-100 dark:hover:bg-gray-700;
@apply dark:hover:text-gray-400;
}
</style>

95
resources/js/Components/PrintQuantityModal.vue Normal file
View File

@@ -0,0 +1,95 @@
<template>
<div class="modal-overlay" @click.self="$emit('close')">
<div class="modal-content">
<h2 class="text-xl font-bold mb-4">{{ __('api.print_dialog.title') }}</h2>
<p class="mb-4">{{ __('api.print_dialog.quantity_prompt') }}</p>
<div class="flex items-center justify-center space-x-4 mb-6">
<button @click="decrementQuantity" class="quantity-button">
-
</button>
<span class="text-5xl font-bold">{{ quantity }}</span>
<button @click="incrementQuantity" class="quantity-button">
+
</button>
</div>
<div class="flex justify-end space-x-2">
<button @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
{{ __('api.print_dialog.cancel_button') }}
</button>
<button @click="confirmPrint" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
{{ __('api.print_dialog.print_button') }}
</button>
</div>
</div>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
maxCopies: {
type: Number,
default: 10, // Default max if not provided
},
});
const emit = defineEmits(['close', 'printConfirmed']);
const quantity = ref(1);
const incrementQuantity = () => {
if (quantity.value < props.maxCopies) {
quantity.value++;
}
};
const decrementQuantity = () => {
if (quantity.value > 1) {
quantity.value--;
}
};
const confirmPrint = () => {
emit('printConfirmed', quantity.value);
};
// Watch for changes in maxCopies prop and adjust quantity if it exceeds new max
watch(() => props.maxCopies, (newMax) => {
if (quantity.value > newMax) {
quantity.value = newMax;
}
});
</script>
<style scoped>
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background: var(--color-background);
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
width: 90%;
max-width: 400px;
color: var(--color-text);
}
.quantity-button {
@apply bg-blue-500 text-white rounded-full w-16 h-16 flex items-center justify-center text-4xl font-bold;
@apply hover:bg-blue-600 transition-colors duration-200;
}
</style>

40
resources/js/Pages/Home.vue
View File

@@ -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(() => {

7
resources/lang/de/api.php
View File

@@ -18,5 +18,10 @@ return [
'styled_image_display.title' => 'Neu gestyltes Bild',
'styled_image_display.keep_button' => 'Behalten',
'styled_image_display.delete_button' => 'Löschen',
'print_command_sent_successfully' => 'Druckbefehl erfolgreich gesendet.',
'failed_to_send_print_command' => 'Druckbefehl konnte nicht gesendet werden.',
'api.print_dialog.title' => 'Bild drucken',
'api.print_dialog.quantity_prompt' => 'Wie viele Kopien möchten Sie drucken?',
'api.print_dialog.cancel_button' => 'Abbrechen',
'api.print_dialog.print_button' => 'Drucken',
];

6
resources/lang/en/api.php
View File

@@ -18,4 +18,10 @@ return [
'styled_image_display.title' => 'Newly Styled Image',
'styled_image_display.keep_button' => 'Keep',
'styled_image_display.delete_button' => 'Delete',
'print_command_sent_successfully' => 'Print command sent successfully.',
'failed_to_send_print_command' => 'Failed to send print command.',
'print_dialog.title' => 'Print Image',
'print_dialog.quantity_prompt' => 'How many copies would you like to print?',
'print_dialog.cancel_button' => 'Cancel',
'print_dialog.print_button' => 'Print',
];