HAM/Berufsschule_HAM
1
0
Fork 1
mirror of https://github.com/LD-Reborn/Berufsschule_HAM.git synced 2025-12-20 06:51:55 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Merge pull request #300 from LD-Reborn/256-feature-admin-settings-page---front-end

Browse Source 
Added barcode preview
This commit is contained in:
LD50
2025-11-15 16:23:34 +01:00
committed by GitHub
parent 118f06f82d 46795625e7
commit 823b8939f0
1 changed files with 70 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/Views/Settings/Admin.cshtml
View File

@@ -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">
@@ -349,3 +361,54 @@
border-radius: 0.5rem 0.5rem 0 0 !important;
}
</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>