QR Code visible on web
This commit is contained in:
rodič
f5d019bccc
revize
685455040d
|
@ -1,12 +1,12 @@
|
||||||
{
|
{
|
||||||
"name": "utxo22-web",
|
"name": "utxo22-web",
|
||||||
"version": "1.2.1",
|
"version": "1.3.0",
|
||||||
"lockfileVersion": 2,
|
"lockfileVersion": 2,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "utxo22-web",
|
"name": "utxo22-web",
|
||||||
"version": "1.2.1",
|
"version": "1.3.0",
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fontsource/fira-mono": "^4.5.0",
|
"@fontsource/fira-mono": "^4.5.0",
|
||||||
|
@ -21,7 +21,9 @@
|
||||||
"ethereum-blockies-base64": "^1.0.2",
|
"ethereum-blockies-base64": "^1.0.2",
|
||||||
"fuse.js": "^6.5.3",
|
"fuse.js": "^6.5.3",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
|
"qrcode-svg": "^1.1.0",
|
||||||
"remove-markdown": "^0.3.0",
|
"remove-markdown": "^0.3.0",
|
||||||
|
"svelte-qrcode": "^1.0.0",
|
||||||
"svelte-scrolling": "^1.1.1",
|
"svelte-scrolling": "^1.1.1",
|
||||||
"svelte-youtube": "^0.0.2"
|
"svelte-youtube": "^0.0.2"
|
||||||
},
|
},
|
||||||
|
@ -1742,6 +1744,14 @@
|
||||||
"svelte": "^3.2.0"
|
"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": {
|
"node_modules/queue-microtask": {
|
||||||
"version": "1.2.3",
|
"version": "1.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
|
||||||
|
@ -1954,6 +1964,11 @@
|
||||||
"svelte": "^3.0.0"
|
"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": {
|
"node_modules/svelte-scrolling": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/svelte-scrolling/-/svelte-scrolling-1.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/svelte-scrolling/-/svelte-scrolling-1.1.1.tgz",
|
||||||
|
@ -3231,6 +3246,11 @@
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {}
|
"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": {
|
"queue-microtask": {
|
||||||
"version": "1.2.3",
|
"version": "1.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
|
||||||
|
@ -3361,6 +3381,11 @@
|
||||||
"marked": "^4.0.10"
|
"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": {
|
"svelte-scrolling": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/svelte-scrolling/-/svelte-scrolling-1.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/svelte-scrolling/-/svelte-scrolling-1.1.1.tgz",
|
||||||
|
|
|
@ -39,7 +39,9 @@
|
||||||
"ethereum-blockies-base64": "^1.0.2",
|
"ethereum-blockies-base64": "^1.0.2",
|
||||||
"fuse.js": "^6.5.3",
|
"fuse.js": "^6.5.3",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
|
"qrcode-svg": "^1.1.0",
|
||||||
"remove-markdown": "^0.3.0",
|
"remove-markdown": "^0.3.0",
|
||||||
|
"svelte-qrcode": "^1.0.0",
|
||||||
"svelte-scrolling": "^1.1.1",
|
"svelte-scrolling": "^1.1.1",
|
||||||
"svelte-youtube": "^0.0.2"
|
"svelte-youtube": "^0.0.2"
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
|
@ -8,6 +8,7 @@
|
||||||
import SvelteMarkdown from "svelte-markdown";
|
import SvelteMarkdown from "svelte-markdown";
|
||||||
import Link from "$lib/Link.svelte";
|
import Link from "$lib/Link.svelte";
|
||||||
import * as _ from "lodash";
|
import * as _ from "lodash";
|
||||||
|
import QRCode from "$lib/QRCode.svelte";
|
||||||
import {
|
import {
|
||||||
orderTicketForm,
|
orderTicketForm,
|
||||||
bundle,
|
bundle,
|
||||||
|
@ -385,6 +386,8 @@
|
||||||
await loadOrders($userData);
|
await loadOrders($userData);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let qrVisible = null;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
|
@ -571,6 +574,27 @@
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/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>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
Načítá se…
Odkázat v novém úkolu