Added barcode preview

src/Views/Settings/Admin.cshtml

@@ -10,6 +10,7 @@
 @inject LdapService ldap
 @{
     ViewData["Title"] = T["Users"];
+    List<string> supportedBarcodeTypes = ["code128c", "ean13", "ean8", "upc", "itf14", "itf"];
 }
 
 <form id="updateSettings" style="margin-bottom: 4rem !important" method="post" asp-controller="Settings" asp-action="Admin">
@@ -27,13 +28,24 @@
         </div>
         <div class="col-md-6">
             <label class="form-label" for="updateBarcodeType">@T["Barcode type"]</label>
+            <span 
+                id="barcodeInfoIcon"
+                class="ms-2 text-info"
+                style="cursor: pointer;"
+                data-bs-toggle="modal"
+                data-bs-target="#barcodePreviewModal"
+                id="barcodePreviewButton"
+                title="Preview">
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0-13A6 6 0 1 1 8 14A6 6 0 0 1 8 2z"/>
+                    <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.176-.304-.497L8.93 6.588zM9 4.5a1 1 0 1 1-2 0a1 1 0 0 1 2 0z"/>
+                </svg>
+            </span>
             <select type="text" name="BarcodeType" id="updateBarcodeType" class="form-control" />
-                <option selected="@(Model.BarcodeType == "code128c")" value="code128c">CODE128C</option>
+                @foreach (string barcodeType in supportedBarcodeTypes)
-                <option selected="@(Model.BarcodeType == "ean13")" value="ean13">EAN13</option>
+                {
-                <option selected="@(Model.BarcodeType == "ean8")" value="ean8">EAN8</option>
+                    <option selected="@(Model.BarcodeType == barcodeType)" value="@barcodeType">@barcodeType.ToUpper()</option>
-                <option selected="@(Model.BarcodeType == "upc")" value="upc">UPC</option>
+                }
-                <option selected="@(Model.BarcodeType == "itf14")" value="itf14">ITF14</option>
-                <option selected="@(Model.BarcodeType == "itf")" value="itf">ITF</option>
             </select>
         </div>
         <div class="col-md-6">
@@ -348,4 +360,55 @@
         border-bottom: none !important;
         border-radius: 0.5rem 0.5rem 0 0 !important;
     }
-</style>
+</style>
+
+
+<div class="modal modal-lg fade" id="barcodePreviewModal" tabindex="-1" aria-hidden="true" aria-label="@T["Barcode preview"]">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header bg-info text-dark">
+                <h3 class="modal-title">@T["Barcode preview"]</h5>
+                <button type="button" class="btn-close btn-close-white" style="filter: invert(0);" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+
+            <div class="modal-body text-center row">
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js" defer></script>
+
+<script defer>
+    document.addEventListener('DOMContentLoaded', () => {
+        var barcodeTypes = @Html.Raw(JsonSerializer.Serialize(supportedBarcodeTypes));
+        const modalContent = document.querySelector("#barcodePreviewModal .modal-content");
+        var body = modalContent.querySelector('.modal-body');
+        barcodeTypes.forEach(barcodeType => {
+            const divCol = document.createElement('div');
+            divCol.classList.add("col-md-6");
+            const label = document.createElement('label');
+            label.classList.add("form-label", "w-100");
+            label.textContent = barcodeType.toUpperCase();
+            const img = document.createElement('img');
+            img.id = barcodeType;
+            img.alt = "Preview";
+            img.style.maxWidth = "100%";
+            img.style.border = "1px solid #ddd";
+            img.style.padding = "0.5rem";
+            img.style.borderRadius = ".25rem";
+            img.classList.add("mb-3");
+            divCol.appendChild(label);
+            divCol.appendChild(img);
+            body.appendChild(divCol);
+
+            JsBarcode(`#${barcodeType}`, getBarcodeValue(barcodeType, "123456789"), {
+                format: barcodeType,
+                lineColor: "#000",
+                width: 2,
+                height: 80,
+                displayValue: true
+            });
+        });
+    });
+</script>