fix

resources/[inventory]/pl_printer/web/index.html

@@ -10,21 +10,25 @@
             margin: 0;
             padding: 0;
             overflow: hidden;
-            /* Entferne den Hintergrund, der den Schleier verursacht */
-            background-color: transparent;
+            background-color: rgba(0, 0, 0, 0.7);
+            width: 100vw;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
         }
         #image-container {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            max-width: 90%;
-            max-height: 90%;
+            position: relative;
+            max-width: 80vw;
+            max-height: 80vh;
             display: none;
+            overflow: auto; /* Ermöglicht Scrollen, wenn das Bild größer ist */
         }
         #image {
+            display: block;
             max-width: 100%;
             max-height: 100%;
+            object-fit: contain; /* Behält das Seitenverhältnis bei */
         }
         #document-id {
             position: absolute;
@@ -35,7 +39,26 @@
             padding: 5px;
             border-radius: 3px;
             font-family: Arial, sans-serif;
-            display: none; /* Verstecke die Dokument-ID standardmäßig */
+        }
+        /* Zoom-Kontrollen */
+        .zoom-controls {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            display: flex;
+            gap: 10px;
+        }
+        .zoom-btn {
+            background-color: rgba(0, 0, 0, 0.5);
+            color: white;
+            border: none;
+            border-radius: 3px;
+            padding: 5px 10px;
+            cursor: pointer;
+            font-family: Arial, sans-serif;
+        }
+        .zoom-btn:hover {
+            background-color: rgba(0, 0, 0, 0.7);
         }
     </style>
 </head>
@@ -43,23 +66,56 @@
     <div id="image-container">
         <img id="image" src="" alt="Document">
         <div id="document-id"></div>
+        <div class="zoom-controls">
+            <button class="zoom-btn" id="zoom-out">-</button>
+            <button class="zoom-btn" id="zoom-reset">Reset</button>
+            <button class="zoom-btn" id="zoom-in">+</button>
+        </div>
     </div>
     <script>
+        let currentZoom = 1;
+        const image = document.getElementById('image');
+        const zoomIn = document.getElementById('zoom-in');
+        const zoomOut = document.getElementById('zoom-out');
+        const zoomReset = document.getElementById('zoom-reset');
+
+        // Zoom-Funktionen
+        zoomIn.addEventListener('click', () => {
+            currentZoom += 0.1;
+            applyZoom();
+        });
+
+        zoomOut.addEventListener('click', () => {
+            currentZoom = Math.max(0.1, currentZoom - 0.1);
+            applyZoom();
+        });
+
+        zoomReset.addEventListener('click', () => {
+            currentZoom = 1;
+            applyZoom();
+        });
+
+        function applyZoom() {
+            image.style.transform = `scale(${currentZoom})`;
+            image.style.transformOrigin = 'center center';
+        }
+
         window.addEventListener('message', function(event) {
             if (event.data.action === 'show') {
-                // Zeige das spezifische Dokument basierend auf der URL
+                // Zeige das spezifische Dokument basierend auf der ID oder URL
                 document.getElementById('image').src = event.data.imageUrl;
                 
-                // Zeige optional die Dokument-ID an (nur wenn Debug aktiviert ist)
-                if (event.data.documentId && false) { // Setze auf true für Debug
+                // Zeige optional die Dokument-ID an
+                if (event.data.documentId) {
                     document.getElementById('document-id').textContent = "Dokument: " + event.data.documentId;
-                    document.getElementById('document-id').style.display = 'block';
-                } else {
-                    document.getElementById('document-id').style.display = 'none';
                 }
                 
                 document.getElementById('image-container').style.display = 'block';
                 
+                // Reset zoom when showing a new image
+                currentZoom = 1;
+                applyZoom();
+                
                 // Logge die Dokument-Informationen zur Fehlersuche
                 console.log("Dokument angezeigt:", event.data);
             } else if (event.data.action === 'hide') {
@@ -78,6 +134,32 @@
                     console.error("Fehler beim Verstecken des Frames:", error);
                 });
             }
+            // Zoom mit Tastatur
+            else if (event.key === "+" || event.key === "=") {
+                currentZoom += 0.1;
+                applyZoom();
+            }
+            else if (event.key === "-" || event.key === "_") {
+                currentZoom = Math.max(0.1, currentZoom - 0.1);
+                applyZoom();
+            }
+            else if (event.key === "0") {
+                currentZoom = 1;
+                applyZoom();
+            }
+        });
+
+        // Mausrad-Zoom
+        document.getElementById('image-container').addEventListener('wheel', function(event) {
+            event.preventDefault();
+            if (event.deltaY < 0) {
+                // Zoom in
+                currentZoom += 0.1;
+            } else {
+                // Zoom out
+                currentZoom = Math.max(0.1, currentZoom - 0.1);
+            }
+            applyZoom();
         });
     </script>
 </body>