I18n

ref #173

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,39 @@
               </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">
+              <p class="text-md text-gray-900 mr-3">Format:</p>
+              <label for="codeswitch" class="text-md text-gray-900 mr-3"
+                >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 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-md text-gray-900 ml-3"
+                >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">{$_("token")}</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">

src/locales/de.json

@@ -487,5 +487,7 @@
   "you-have-to-provide-an-organization": "Du musst eine Organisation angeben",
   "you-have-to-save-your-changes-to-generate-a-link": "Du musst deine Änderungen speichern, um einen Link zu generieren.",
   "you-must-create-at-least-one-card-or-cancel": "Du musst mindestens eine Blankokarte erstellen (oder abbrechen).",
-    "zip-postal-code": "Postleitzahl"
+  "zip-postal-code": "Postleitzahl",
+  "config-codes": "Konfigurations-Codes",
+  "api-endpoint": "API-Endpunkt"
 }

src/locales/en.json

@@ -487,5 +487,7 @@
   "you-have-to-provide-an-organization": "You have to provide an organization",
   "you-have-to-save-your-changes-to-generate-a-link": "You have to save your changes to generate a link.",
   "you-must-create-at-least-one-card-or-cancel": "You must create at least one card (or cancel).",
-    "zip-postal-code": "ZIP/ postal code"
+  "zip-postal-code": "ZIP/ postal code",
+  "config-codes": "Config codes",
+  "api-endpoint": "API-Endpoint"
 }