From 4b6342727ee0ea38597750d8c99edc301f1ccc2d Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Mon, 17 Apr 2023 17:47:57 +0200
Subject: [PATCH] Implemented config code generation ref #173

---
 .../CopyScanStationTokenModal.svelte          | 66 +++++++++++++++++--
 1 file changed, 62 insertions(+), 4 deletions(-)

diff --git a/src/components/scanstations/CopyScanStationTokenModal.svelte b/src/components/scanstations/CopyScanStationTokenModal.svelte
index f2d9cc12..65eefc8c 100644
--- a/src/components/scanstations/CopyScanStationTokenModal.svelte
+++ b/src/components/scanstations/CopyScanStationTokenModal.svelte
@@ -1,14 +1,18 @@
 <script>
   import { _ } from "svelte-i18n";
-
   import Toastify from "toastify-js";
   import { tick, createEventDispatcher } from "svelte";
+  import bwipjs from "bwip-js";
+
   export let copy_modal_open;
   export let new_station;
   const dispatch = createEventDispatcher();
   let valueCopy = null;
   let areaDom;
   let copied = false;
+  $: is_qrcode = false;
+  $: barcode = textToBase64Barcode(new_station.key, is_qrcode);
+
   function close() {
     copy_modal_open = false;
   }
@@ -36,10 +40,30 @@
           "linear-gradient(90deg, hsla(281, 37%, 45%, 1) 0%, hsla(1, 62%, 48%, 1) 100%)",
       }).showToast();
     }
-
     // we can notifi by event or storage about copy status
     valueCopy = null;
   }
+
+  function textToBase64Barcode(text, is_qrcode) {
+    const canvas = document.createElement("canvas");
+    let bcid = "code128";
+    if (is_qrcode) {
+      bcid = "qrcode";
+    }
+    let codeconfig = {
+      bcid,
+      text: `${text}`,
+      scale: 3,
+      includetext: true,
+      textxalign: "center",
+      backgroundcolor: "ffffff",
+    };
+    if (bcid == "code128") {
+      codeconfig.height = 10;
+    }
+    bwipjs.toCanvas(canvas, codeconfig);
+    return canvas.toDataURL("image/png");
+  }
 </script>
 
 {#if copy_modal_open}
@@ -131,8 +155,42 @@
               </div>
             </div>
           </div>
-          <div class="sm:flex sm:items-start">
-            [TODO:BARCODE]
+          <div class="mx-auto text-center items-center">
+            <h2 class="text-lg leading-6 font-medium text-gray-900">
+              Config Codes
+            </h2>
+            <span class="flex items-center text-center">
+              <label
+                for="codeswitch"
+                class="text-sm text-gray-500 mr-3 dark:text-gray-400"
+                >Code128</label
+              >
+              <input
+                id="codeswitch"
+                type="checkbox"
+                bind:checked={is_qrcode}
+                class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-blue-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent focus:border-blue-600 focus:ring-blue-600 ring-offset-white focus:outline-none appearance-none dark:bg-gray-700 dark:checked:bg-blue-600 dark:focus:ring-offset-gray-800
+            
+              before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200"
+              />
+              <label
+                for="codeswitch"
+                class="text-sm text-gray-500 ml-3 dark:text-gray-400"
+                >QR-Code</label
+              >
+            </span>
+            <h3 class="leading-6 font-medium text-gray-900">API-Endpoint</h3>
+            <img
+              class="w-full md:w-auto mb-2 mx-auto"
+              alt="Registrierungscode"
+              src={textToBase64Barcode(config.baseurl, is_qrcode)}
+            />
+            <h3 class="leading-6 font-medium text-gray-900">Key</h3>
+            <img
+              class="w-full md:w-auto mb-2 mx-auto"
+              alt="Registrierungscode"
+              src={barcode}
+            />
           </div>
         </div>
         <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">