Refactor index.blade.php: Translate comments to English for better clarity

McNamara84 · McNamara84 · commit bf1816e4d867 · 2025-04-18T04:43:15.000+02:00
diff --git a/resources/views/admin/scan/index.blade.php b/resources/views/admin/scan/index.blade.php
@@ -6,6 +6,7 @@
     <title>QR-Codes scannen</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>
+        /* Basic layout and styling */
         body {
             font-family: Arial, sans-serif;
             margin: 20px;
@@ -15,7 +16,6 @@
         #reader {
             width: 100%;
             height: 80vh;
-            /* volles Browser-Viewport nutzen */
             margin: 0 auto;
             border: 2px solid #ccc;
             box-sizing: border-box;
@@ -29,24 +29,29 @@
 </head>
 
 <body>
+    {{-- Scan page header showing the currently active quiz question --}}
     <h2>Aktive Frage:</h2>
     <p id="active-question">
         {{ $activeQuestion ? $activeQuestion->question_text : 'Keine aktive Frage gefunden.' }}
     </p>
+
+    {{-- Hidden field to pass the active question ID into JavaScript --}}
     <input type="hidden" id="quiz_question_id" value="{{ $activeQuestion ? $activeQuestion->id : '' }}">
 
+    {{-- Container where the QR code scanner will render the camera feed --}}
     <div id="reader"></div>
 
-    <!-- html5-qrcode Bibliothek -->
+    {{-- Include the html5-qrcode library for in-browser scanning --}}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.3.8/html5-qrcode.min.js"
         integrity="sha512-r6rDA7W6ZeQhvl8S7yRVQUKVHdexq+GAlNkNNqVC7YyIV+NwqCTJe2hDWCiffTyRNOeGEzRRJ9ifvRm/HCzGYg=="
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script>
+        // Retrieve the quiz question ID for API requests
         const quizQuestionId = document.getElementById("quiz_question_id").value;
 
-        // Erfolgs-Callback
+        // Called when a QR code is successfully decoded
         function qrCodeSuccessCallback(decodedText, decodedResult) {
-            console.log("QR-Code erkannt:", decodedText);
+            console.log("QR code detected:", decodedText);
             fetch("{{ route('admin.scan.store') }}", {
                 method: "POST",
                 headers: {
@@ -61,42 +66,43 @@ function qrCodeSuccessCallback(decodedText, decodedResult) {
                 .then(res => res.json())
                 .then(data => {
                     if (data.success) {
-                        console.log("Scan gespeichert:", data.scan);
+                        console.log("Scan saved:", data.scan);
                     } else {
-                        console.error("Fehler beim Speichern:", data.error);
+                        console.error("Error saving scan:", data.error);
                     }
                 })
-                .catch(err => console.error("Fetch-Error:", err));
+                .catch(err => console.error("Fetch error:", err));
         }
 
-        // Fehler-Callback (wird bei jedem Frame ohne QR-Code aufgerufen)
+        // Called on each frame when no QR code is found (ignored here)
         function qrCodeFailureCallback(error) {
-            // Ignoriere – wir scannen kontinuierlich
+            // Continuous scanning - no action needed on failure
         }
 
-        // Wenn document ready
+        // Initialize the scanner once the DOM is ready
         document.addEventListener("DOMContentLoaded", () => {
             const html5QrCode = new Html5Qrcode("reader");
 
             const config = {
-                fps: 10,
-                qrbox: false,  // false = ganze Kamera-Fläche wird gescant
+                fps: 10,                      // scan 10 frames per second
+                qrbox: false,                 // scan the full video area
                 experimentalFeatures: {
                     useBarCodeDetectorIfSupported: true
                 },
                 videoConstraints: {
-                    facingMode: { exact: "environment" },
-                    zoom: 2          // versuche Zoom-Level 2x (falls Kamera es unterstützt)
+                    facingMode: { exact: "environment" }, // use rear camera
+                    zoom: 2                                  // attempt 2x zoom if supported
                 }
             };
 
+            // Start the camera and begin scanning
             html5QrCode.start(
                 { facingMode: "environment" },
                 config,
                 qrCodeSuccessCallback,
                 qrCodeFailureCallback
             ).catch(err => {
-                console.error("Kamera konnte nicht gestartet werden:", err);
+                console.error("Unable to start camera:", err);
                 document.getElementById("reader").innerText =
                     "Kamera konnte nicht gestartet werden. Bitte Browser-Berechtigungen prüfen.";
             });
