improved qr code display

jdav_web/finance/locale/de/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-12-28 00:29+0100\n"
+"POT-Creation-Date: 2024-12-28 01:22+0100\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -136,7 +136,7 @@ msgstr "Finanzen"
 msgid "Name"
 msgstr "Name"
 
-#: finance/models.py:30 finance/models.py:484 finance/models.py:545
+#: finance/models.py:30 finance/models.py:484 finance/models.py:547
 #: finance/templates/admin/confirmed_statement.html:40
 #: finance/templates/admin/overview_submitted_statement.html:100
 msgid "Ledger"
@@ -146,7 +146,7 @@ msgstr "Geldtopf"
 msgid "Ledgers"
 msgstr "Geldtöpfe"
 
-#: finance/models.py:51 finance/models.py:420 finance/models.py:544
+#: finance/models.py:51 finance/models.py:420 finance/models.py:546
 msgid "Short description"
 msgstr "Kurzbeschreibung"
 
@@ -286,11 +286,11 @@ msgstr "Empfänger"
 msgid "Paid"
 msgstr "Bezahlt"
 
-#: finance/models.py:539
+#: finance/models.py:541
 msgid "Transaction"
 msgstr "Überweisung"
 
-#: finance/models.py:540
+#: finance/models.py:542
 #: finance/templates/admin/overview_submitted_statement.html:84
 msgid "Transactions"
 msgstr "Überweisungen"
@@ -326,11 +326,24 @@ msgstr "IBAN"
 msgid "QR Code"
 msgstr "QR Code"
 
-#: finance/templates/admin/confirmed_statement.html:83
+#: finance/templates/admin/confirmed_statement.html:61
+#: finance/templates/admin/confirmed_statement.html:98
+msgid "Show"
+msgstr "Anzeigen"
+
+#: finance/templates/admin/confirmed_statement.html:86
+msgid "No QR code can be displayed."
+msgstr "Es kann kein QR-Code angezeigt werden."
+
+#: finance/templates/admin/confirmed_statement.html:99
+msgid "Showing"
+msgstr "Sichtbar"
+
+#: finance/templates/admin/confirmed_statement.html:111
 msgid "I did execute the listed transactions."
 msgstr "Ich habe die aufgeführten Überweisungen ausgeführt."
 
-#: finance/templates/admin/confirmed_statement.html:85
+#: finance/templates/admin/confirmed_statement.html:113
 msgid "Confirm"
 msgstr "Bestätigen"
 

jdav_web/finance/templates/admin/confirmed_statement.html

@@ -58,24 +58,52 @@
         {{ transaction.ledger }}
     </td>
     <td>
-        <div id="qrcode_{{ forloop.counter }}"></div>
-<script type="text/javascript">
-    var qrcode_{{ forloop.counter }} = new QRCode(document.getElementById("qrcode_{{ forloop.counter }}"), {
-text: `{{ transaction.code }}`,
-width: 128,
-height: 128,
-colorDark : "#000000",
-colorLight : "#ffffff",
-correctLevel : QRCode.CorrectLevel.M
-});
-
-</script>
+        <a href="#" data-text="{{ transaction.code }}">{% trans "Show" %}</a>
     </td>
     </tr>
     {% endfor %}
 </table>
 </p>
 
+
+<div id="qr_code" style="display: none;"></div>
+
+<script type="text/javascript">
+const links = document.querySelectorAll('td a');
+const imageContainer = document.getElementById('qr_code');
+
+// Add click event listeners to all links
+links.forEach(link => {
+    link.addEventListener('click', function (event) {
+        event.preventDefault(); // Prevent default link behavior
+
+        const imageText = this.getAttribute('data-text'); // Get the image path from the data attribute
+
+        imageContainer.innerHTML = '';
+        // Update the image element
+        
+        if(imageText == "") {
+            imageContainer.innerHTML = '{% trans "No QR code can be displayed." %}';
+        } else {
+            var qrcode = new QRCode(imageContainer, {
+                text: imageText,
+                width: 128,
+                height: 128,
+                colorDark : "#000000",
+                colorLight : "#ffffff",
+                correctLevel : QRCode.CorrectLevel.M
+            });
+        }
+        imageContainer.style.display = 'block'; // Show the image if hidden
+        links.forEach(link => {link.text = '{% trans "Show" %}'});
+        link.text = '{% trans "Showing" %}';
+    });
+});
+    
+</script>
+
+
+
 <form action="" method="post">
     {% csrf_token %}
     <p>