mirror of
https://github.com/LD-Reborn/Berufsschule_HAM.git
synced 2025-12-20 06:51:55 +00:00
Added barcode preview
This commit is contained in:
@@ -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>
|
||||
<option selected="@(Model.BarcodeType == "ean13")" value="ean13">EAN13</option>
|
||||
<option selected="@(Model.BarcodeType == "ean8")" value="ean8">EAN8</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>
|
||||
@foreach (string barcodeType in supportedBarcodeTypes)
|
||||
{
|
||||
<option selected="@(Model.BarcodeType == barcodeType)" value="@barcodeType">@barcodeType.ToUpper()</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>
|
||||
Reference in New Issue
Block a user