Feature - Generate QR Code (#155)

* Generate QR Code by calling API Generate a QR code by calling API and open QR code in new tab * Change size of qr code generated * Only display button if officer
HKN-UCSD · Apr 27, 2024 · bbb2f47 · bbb2f47
1 parent c2d4132
commit bbb2f47
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/frontend/src/Components/Events/CustomizableEventConsole.svelte b/frontend/src/Components/Events/CustomizableEventConsole.svelte
@@ -8,6 +8,7 @@
         getAvailableOtherActions,
         getAvailableSelfActions,
         addToCalendar,
+        generateQRCode,
     } from "./eventutils";
     import EventRidesDisplay from "./EventRidesDisplay.svelte";
     export let event;
@@ -223,6 +224,16 @@
         <button on:click={() => addToCalendar(event) }>
             Add to Calendar
         </button>
+        <!--  generate qr code -->
+        {#await isAdmin()}
+            <p>Loading...</p>
+        {:then isAdmin}
+            {#if isAdmin}
+                <button on:click={() => generateQRCode(event) }>
+                    Generate QR Code
+                </button>
+            {/if}
+        {/await}
     </div>
 
     <EventRidesDisplay {event} />

diff --git a/frontend/src/Components/Events/eventutils.js b/frontend/src/Components/Events/eventutils.js
@@ -176,6 +176,14 @@ export function addToCalendar(event) {
 
 }
 
+/*
+Generate QR code by calling a QR Code API
+*/
+export function generateQRCode(event) {
+    let url = `https://api.qrserver.com/v1/create-qr-code/?data=portal.hknucsd.com/events/${event.pk}?size=500x500`;
+    window.open(url, "_blank");
+}
+