From 685455040ded980d815d52c7516ece8a86af60f4 Mon Sep 17 00:00:00 2001
From: tree <tree@hidden.cz>
Date: Wed, 1 Jun 2022 07:19:16 +0200
Subject: [PATCH] QR Code visible on web

---
 package-lock.json           | 29 +++++++++++++++++++++++++++--
 package.json                |  2 ++
 src/lib/QRCode.svelte       | 25 +++++++++++++++++++++++++
 src/routes/vstupenky.svelte | 24 ++++++++++++++++++++++++
 4 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/QRCode.svelte

diff --git a/package-lock.json b/package-lock.json
index 9ce2609..9e815a2 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 2432a60..bf79bc8 100644
--- a/package.json
+++ b/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"
   }
diff --git a/src/lib/QRCode.svelte b/src/lib/QRCode.svelte
new file mode 100644
index 0000000..9c96038
--- /dev/null
+++ b/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>
diff --git a/src/routes/vstupenky.svelte b/src/routes/vstupenky.svelte
index 26b1d37..47b3cec 100644
--- a/src/routes/vstupenky.svelte
+++ b/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}