QR Code visible on web

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "utxo22-web",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "utxo22-web",
-      "version": "1.2.1",
+      "version": "1.3.0",
       "hasInstallScript": true,
       "dependencies": {
         "@fontsource/fira-mono": "^4.5.0",
@@ -21,7 +21,9 @@
         "ethereum-blockies-base64": "^1.0.2",
         "fuse.js": "^6.5.3",
         "lodash": "^4.17.21",
+        "qrcode-svg": "^1.1.0",
         "remove-markdown": "^0.3.0",
+        "svelte-qrcode": "^1.0.0",
         "svelte-scrolling": "^1.1.1",
         "svelte-youtube": "^0.0.2"
       },
@@ -1742,6 +1744,14 @@
         "svelte": "^3.2.0"
       }
     },
+    "node_modules/qrcode-svg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/qrcode-svg/-/qrcode-svg-1.1.0.tgz",
+      "integrity": "sha512-XyQCIXux1zEIA3NPb0AeR8UMYvXZzWEhgdBgBjH9gO7M48H9uoHzviNz8pXw3UzrAcxRRRn9gxHewAVK7bn9qw==",
+      "bin": {
+        "qrcode-svg": "bin/qrcode-svg.js"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -1954,6 +1964,11 @@
         "svelte": "^3.0.0"
       }
     },
+    "node_modules/svelte-qrcode": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/svelte-qrcode/-/svelte-qrcode-1.0.0.tgz",
+      "integrity": "sha512-WrOvyyxtUzu32gVIDxcFMy0A7uUpbl/8yHaTNOsUaI8W5V4wa7AmReCjffhNY2aS42CqCLJ6qdwUoj/KxmeZzA=="
+    },
     "node_modules/svelte-scrolling": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/svelte-scrolling/-/svelte-scrolling-1.1.1.tgz",
@@ -3231,6 +3246,11 @@
       "dev": true,
       "requires": {}
     },
+    "qrcode-svg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/qrcode-svg/-/qrcode-svg-1.1.0.tgz",
+      "integrity": "sha512-XyQCIXux1zEIA3NPb0AeR8UMYvXZzWEhgdBgBjH9gO7M48H9uoHzviNz8pXw3UzrAcxRRRn9gxHewAVK7bn9qw=="
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -3361,6 +3381,11 @@
         "marked": "^4.0.10"
       }
     },
+    "svelte-qrcode": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/svelte-qrcode/-/svelte-qrcode-1.0.0.tgz",
+      "integrity": "sha512-WrOvyyxtUzu32gVIDxcFMy0A7uUpbl/8yHaTNOsUaI8W5V4wa7AmReCjffhNY2aS42CqCLJ6qdwUoj/KxmeZzA=="
+    },
     "svelte-scrolling": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/svelte-scrolling/-/svelte-scrolling-1.1.1.tgz",

package.json

@@ -39,7 +39,9 @@
     "ethereum-blockies-base64": "^1.0.2",
     "fuse.js": "^6.5.3",
     "lodash": "^4.17.21",
+    "qrcode-svg": "^1.1.0",
     "remove-markdown": "^0.3.0",
+    "svelte-qrcode": "^1.0.0",
     "svelte-scrolling": "^1.1.1",
     "svelte-youtube": "^0.0.2"
   }

src/lib/QRCode.svelte

@@ -0,0 +1,25 @@
+<script>
+  import QRCode from "qrcode-svg";
+
+  import { onMount, onDestroy, afterUpdate } from "svelte";
+
+  export let value = null;
+  let svg = null;
+
+  function render() {
+    if (value) {
+      svg = new QRCode({
+        content: value,
+        padding: 1,
+        ecl: "M",
+        join: true,
+      }).svg();
+    }
+  }
+
+  onMount(() => {
+    render();
+  });
+</script>
+
+<div>{@html svg}</div>

src/routes/vstupenky.svelte

@@ -8,6 +8,7 @@
   import SvelteMarkdown from "svelte-markdown";
   import Link from "$lib/Link.svelte";
   import * as _ from "lodash";
+  import QRCode from "$lib/QRCode.svelte";
   import {
     orderTicketForm,
     bundle,
@@ -385,6 +386,8 @@
       await loadOrders($userData);
     }
   }
+
+  let qrVisible = null;
 </script>
 
 <svelte:head>
@@ -571,6 +574,27 @@
                     >
                   </div>
                 {/if}
+                <div class="mt-2">
+                  {#if qrVisible === ticket.id}
+                    <div class="mt-2">
+                      <QRCode value="{ticket.id}:xxxxx" />
+                      <div class="mt-2">
+                        <a
+                          href="#"
+                          class="underline hover:no-underline"
+                          on:click={() => (qrVisible = null)}>Schovat QR kód</a
+                        >
+                      </div>
+                    </div>
+                  {:else}
+                    <a
+                      href="#"
+                      class="underline hover:no-underline"
+                      on:click={() => (qrVisible = ticket.id)}
+                      >Zobrazit QR kód</a
+                    >
+                  {/if}
+                </div>
               </div>
             </div>
           {/each}