Merge branch 'main' into 'main'

Add download button for qr code

See merge request XenGi/bezahlbrudi!2

i18n.json

@@ -10,6 +10,17 @@
     "pl": "🇵🇱",
     "tr": "🇹🇷"
   },
+  "download": {
+    "de": "Herunterladen",
+    "ch": "Herunterladen",
+    "en": "Download",
+    "es": "Descargar",
+    "fr": "Télécharger",
+    "gr": "Λήψη",
+    "it": "Scaricare",
+    "pl": "Pobierz",
+    "tr": "İndir"
+  },
   "subtitle": {
     "de": "Geld überweisen ohne Drittanbieter",
     "ch": "Gäld überwise ohni Drittparteiä",

index.html.pre

@@ -56,6 +56,9 @@
         input[type=number] {
             -moz-appearance: textfield;
         }
+        div#qr-code {
+            width: fit-content;
+        }
         div#qr-code canvas {
             max-width: 100%;
         }

js/index.js

@@ -264,6 +264,27 @@ ${document.querySelector("#purpose input").value}
     if (document.querySelector("#rememberme").checked) {
       saveFormData();
     }
+
+    // download link
+    let canvas = document.querySelector("#qr-code canvas")
+    if (!canvas) {
+      console.error("Unable to access canvas");
+    } else {
+      canvas.toBlob((blob) => {
+        let link = document.createElement("a");
+        link.className = "button is-fullwidth";
+        link.href = URL.createObjectURL(blob);
+        link.download = "qr-code.png";
+        link.innerText = i18n["download"][document.documentElement.lang];
+
+        let downloadLocation = document.querySelector("#qr-code");
+        if (!downloadLocation) {
+          console.log("Unable to access link container");
+        } else {
+          downloadLocation.appendChild(link);
+        }
+      });
+    }
   }
 }