mirror of
https://github.com/LD-Reborn/Berufsschule_HAM.git
synced 2025-12-20 06:51:55 +00:00
Fixed a few accessibility issues for Assets view
This commit is contained in:
@@ -30,17 +30,17 @@
|
||||
<table class="table table-striped align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>@T["Owner"]</th>
|
||||
<th>@T["Asset ID"]</th>
|
||||
<th>@T["Asset Name"]</th>
|
||||
<th>@T["Location"]</th>
|
||||
<th id="col-owner">@T["Owner"]</th>
|
||||
<th id="col-assetId">@T["Asset ID"]</th>
|
||||
<th id="col-assetName">@T["Asset Name"]</th>
|
||||
<th id="col-assetLocation">@T["Location"]</th>
|
||||
<th class="text-center">@T["Action"]</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><input type="text" class="form-control form-control-sm column-filter" placeholder="@T["Owner"]" data-column="0" /></th>
|
||||
<th><input type="text" class="form-control form-control-sm column-filter" placeholder="@T["Asset ID"]" data-column="1" /></th>
|
||||
<th><input type="text" class="form-control form-control-sm column-filter" placeholder="@T["Asset Name"]" data-column="2" /></th>
|
||||
<th><input type="text" class="form-control form-control-sm column-filter" placeholder="@T["Location"]" data-column="3" /></th>
|
||||
<th><input aria-labelledby="col-owner" type="text" class="form-control form-control-sm column-filter" placeholder="@T["Owner"]" data-column="0" /></th>
|
||||
<th><input aria-labelledby="col-assetId" type="text" class="form-control form-control-sm column-filter" placeholder="@T["Asset ID"]" data-column="1" /></th>
|
||||
<th><input aria-labelledby="col-assetName" type="text" class="form-control form-control-sm column-filter" placeholder="@T["Asset Name"]" data-column="2" /></th>
|
||||
<th><input aria-labelledby="col-assetLocation" type="text" class="form-control form-control-sm column-filter" placeholder="@T["Location"]" data-column="3" /></th>
|
||||
<th class="text-center">-</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -48,8 +48,8 @@
|
||||
@{
|
||||
foreach (AssetsTableViewModel assetsTableViewModel in Model.AssetsTableViewModels)
|
||||
{
|
||||
<tr class="asset-row" data-asset-id="@assetsTableViewModel.AssetCn">
|
||||
<td tabindex="0">@assetsTableViewModel.UserUID</td>
|
||||
<tr tabindex="0" role="button" class="asset-row" data-asset-id="@assetsTableViewModel.AssetCn">
|
||||
<td>@assetsTableViewModel.UserUID</td>
|
||||
<td>@assetsTableViewModel.AssetCn</td>
|
||||
<td>@assetsTableViewModel.AssetName</td>
|
||||
<td>@assetsTableViewModel.LocationName</td>
|
||||
@@ -711,7 +711,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
.asset-row > td {
|
||||
transition: 0.1s ease;
|
||||
}
|
||||
.asset-row:has(td:not(:last-child):hover) > td {
|
||||
.asset-row:has(td:not(:last-child):is(:hover, :focus)) > td {
|
||||
background-color: #17a2b8;
|
||||
}
|
||||
</style>
|
||||
@@ -725,145 +725,152 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
|
||||
function registerRowDetailviewClick(row) {
|
||||
const viewModal = document.getElementById('viewAssetModal');
|
||||
const viewContent = document.getElementById('viewAssetContent');
|
||||
row.addEventListener('click', async (e) => {
|
||||
// Avoid clicks on buttons inside the row
|
||||
if (e.target.closest('button')) return;
|
||||
|
||||
const assetId = row.getAttribute('data-asset-id');
|
||||
viewContent.innerHTML = '<p class="text-center text-muted">@T["Loading..."]</p>';
|
||||
|
||||
const modal = new bootstrap.Modal(viewModal);
|
||||
modal.show();
|
||||
|
||||
try {
|
||||
const response = await fetch(`/Assets/Get?cn=${assetId}`);
|
||||
const json = await response.json();
|
||||
const asset = json.assetsModel;
|
||||
|
||||
if (!asset) {
|
||||
viewContent.innerHTML = `<p class="text-danger text-center">@T["Asset not found."]</p>`;
|
||||
return;
|
||||
}
|
||||
|
||||
const html = `
|
||||
<div class="row g-3">
|
||||
<h4 class="fw-bold">@T["Barcode"]</h4>
|
||||
<div class="col-md-6">
|
||||
<svg id="@barcodeType" class="form-control" name="Barcode" />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<button id="downloadBtn" class="form-control my-2 btn btn-primary">@T["Download Barcode"]</button>
|
||||
<button id="printBtn" class="form-control my-2 btn btn-primary">@T["Add Barcode to print batch"]</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-3" />
|
||||
<div class="row g-3">
|
||||
<h4 class="fw-bold">@T["Inventory"]</h4>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">@T["Name"]</label>
|
||||
<input type="text" class="form-control" name="Name" value="${asset.Description.Inventory.PersonUid || ''}" disabled />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">@T["Date"]</label>
|
||||
<input type="text" class="form-control" name="Name" value="${new Intl.DateTimeFormat('de-DE', {year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit"}).format(new Date(asset.Description.Inventory.Date)) || ''}" disabled />
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-3" />
|
||||
<div class="row g-3">
|
||||
<h4 class="fw-bold">@T["Information"]</h4>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">@T["Name"]</label>
|
||||
<input type="text" class="form-control" name="Name" value="${asset.Name || ''}" disabled />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">@T["Location"]</label>
|
||||
<input type="text" class="form-control" name="Location" value="${asset.Location || ''}" disabled />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">@T["Owner"]</label>
|
||||
<input type="text" class="form-control" name="Owner" value="${asset.Owner || ''}" disabled />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">@T["Serial Number"]</label>
|
||||
<input type="text" class="form-control" name="SerialNumber" value="${asset.SerialNumber || ''}" disabled />
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-3" />
|
||||
<div class="row g-3">
|
||||
<h4 class="fw-bold">@T["Description"]</h4>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">@T["Type"]</label>
|
||||
<input type="text" class="form-control" name="Description.Type" value="${asset.Description?.Type || ''}" disabled />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">@T["Make"]</label>
|
||||
<input type="text" class="form-control" name="Description.Make" value="${asset.Description?.Make || ''}" disabled />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">@T["Model"]</label>
|
||||
<input type="text" class="form-control" name="Description.Model" value="${asset.Description?.Model || ''}" disabled />
|
||||
</div>
|
||||
</div>
|
||||
${asset.Description?.Attributes ? `
|
||||
<hr class="my-3" />
|
||||
<div class="row g-3">
|
||||
<h4 class="fw-bold">@T["Attributes"]</h4>
|
||||
${Object.entries(asset.Description.Attributes)
|
||||
.map(([k,v]) => `
|
||||
<div class="d-flex gap-2 align-items-center attribute-row">
|
||||
<input type="text" class="form-control w-50" placeholder="@T["Attribute name"]" data-attr-name disabled value="${k}" />:
|
||||
<input type="text" class="form-control" placeholder="@T["Attribute value"]" data-attr-value disabled value="${v}" />
|
||||
</div>`)
|
||||
.join('')}
|
||||
</div>` : ''}
|
||||
|
||||
${asset.Description?.Purchase ? `
|
||||
<hr class="my-3" />
|
||||
<div class="row g-3">
|
||||
<h4 class="fw-bold">@T["Purchase Information"]</h4>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">@T["Purchase Date"]</label>
|
||||
<input type="date" class="form-control" name="Description.Purchase.PurchaseDate" value="${asset.Description.Purchase.PurchaseDate || ''}" disabled />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">@T["Purchase Value"]</label>
|
||||
<input type="text" class="form-control" name="Description.Purchase.PurchaseValue" value="${asset.Description.Purchase.PurchaseValue || ''}" disabled />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">@T["Purchased At"]</label>
|
||||
<input type="text" class="form-control" name="Description.Purchase.PurchaseAt" value="${asset.Description.Purchase.PurchaseAt || ''}" disabled />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">@T["Purchased By"]</label>
|
||||
<input type="text" class="form-control" name="Description.Purchase.PurchaseBy" value="${asset.Description.Purchase.PurchaseBy || ''}" disabled />
|
||||
</div>
|
||||
</div>` : ''}
|
||||
</div>`;
|
||||
viewContent.innerHTML = html;
|
||||
JsBarcode("#@barcodeType", getBarcodeValue("@barcodeType", asset.Cn), {
|
||||
format: "@barcodeType",
|
||||
lineColor: "#000",
|
||||
width: 2,
|
||||
height: 80,
|
||||
displayValue: true
|
||||
});
|
||||
document.getElementById("downloadBtn").addEventListener("click", () => {
|
||||
downloadBarcode("@barcodeType", getBarcodeValue("@barcodeType", asset.Cn));
|
||||
});
|
||||
document.getElementById("printBtn").addEventListener("click", () => {
|
||||
addAssetIdToBatch(asset.Cn);
|
||||
showToast("@T["Successfully added barcode to print batch"]", "success");
|
||||
bootstrap.Modal.getInstance('#viewAssetModal').hide();
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
viewContent.innerHTML = `<p class="text-danger text-center">@T["Error loading asset details"]</p>`;
|
||||
row.addEventListener('click', async (e) => handleRowDetailViewEvent(e, row));
|
||||
row.addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
row.click();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function handleRowDetailViewEvent(e, row) {
|
||||
const viewModal = document.getElementById('viewAssetModal');
|
||||
const viewContent = document.getElementById('viewAssetContent');
|
||||
// Avoid clicks on buttons inside the row
|
||||
if (e.target.closest('button')) return;
|
||||
|
||||
const assetId = row.getAttribute('data-asset-id');
|
||||
viewContent.innerHTML = '<p class="text-center text-muted">@T["Loading..."]</p>';
|
||||
|
||||
const modal = new bootstrap.Modal(viewModal);
|
||||
modal.show();
|
||||
|
||||
try {
|
||||
const response = await fetch(`/Assets/Get?cn=${assetId}`);
|
||||
const json = await response.json();
|
||||
const asset = json.assetsModel;
|
||||
|
||||
if (!asset) {
|
||||
viewContent.innerHTML = `<p class="text-danger text-center">@T["Asset not found."]</p>`;
|
||||
return;
|
||||
}
|
||||
let i = 0;
|
||||
const html = `
|
||||
<div class="row g-3">
|
||||
<h4 class="fw-bold">@T["Barcode"]</h4>
|
||||
<div class="col-md-6">
|
||||
<svg role="img" aria-label="@T["Barcode"]" id="@barcodeType" class="form-control" name="Barcode" />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<button id="downloadBtn" class="form-control my-2 btn btn-primary">@T["Download Barcode"]</button>
|
||||
<button id="printBtn" class="form-control my-2 btn btn-primary">@T["Add Barcode to print batch"]</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-3" />
|
||||
<div class="row g-3">
|
||||
<h4 class="fw-bold">@T["Inventory"]</h4>
|
||||
<div class="col-md-6">
|
||||
<label for="detailUsername" class="form-label">@T["Name"]</label>
|
||||
<input id="detailUsername" type="text" class="form-control" name="Name" value="${asset.Description.Inventory.PersonUid || ''}" disabled />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="detailDate" class="form-label">@T["Date"]</label>
|
||||
<input id="detailDate" type="text" class="form-control" name="Date" value="${new Intl.DateTimeFormat('de-DE', {year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit"}).format(new Date(asset.Description.Inventory.Date)) || ''}" disabled />
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-3" />
|
||||
<div class="row g-3">
|
||||
<h4 class="fw-bold">@T["Information"]</h4>
|
||||
<div class="col-md-6">
|
||||
<label for="detailName" class="form-label">@T["Name"]</label>
|
||||
<input id="detailName" type="text" class="form-control" name="Name" value="${asset.Name || ''}" disabled />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="detailLocation" class="form-label">@T["Location"]</label>
|
||||
<input id="detailLocation" type="text" class="form-control" name="Location" value="${asset.Location || ''}" disabled />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="detailOwner" class="form-label">@T["Owner"]</label>
|
||||
<input id="detailOwner" type="text" class="form-control" name="Owner" value="${asset.Owner || ''}" disabled />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="detailSerialnumber" class="form-label">@T["Serial Number"]</label>
|
||||
<input id="detailSerialnumber" type="text" class="form-control" name="SerialNumber" value="${asset.SerialNumber || ''}" disabled />
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-3" />
|
||||
<div class="row g-3">
|
||||
<h4 class="fw-bold">@T["Description"]</h4>
|
||||
<div class="col-md-6">
|
||||
<label for="detailType" class="form-label">@T["Type"]</label>
|
||||
<input id="detailType" type="text" class="form-control" name="Description.Type" value="${asset.Description?.Type || ''}" disabled />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="detailMake" class="form-label">@T["Make"]</label>
|
||||
<input id="detailMake" type="text" class="form-control" name="Description.Make" value="${asset.Description?.Make || ''}" disabled />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="detailModel" class="form-label">@T["Model"]</label>
|
||||
<input id="detailModel" type="text" class="form-control" name="Description.Model" value="${asset.Description?.Model || ''}" disabled />
|
||||
</div>
|
||||
</div>
|
||||
${asset.Description?.Attributes ? `
|
||||
<hr class="my-3" />
|
||||
<div class="row g-3">
|
||||
<h4 class="fw-bold">@T["Attributes"]</h4>
|
||||
${Object.entries(asset.Description.Attributes)
|
||||
.map(([k,v]) => `
|
||||
<div class="d-flex gap-2 align-items-center attribute-row">
|
||||
<label for="detailAttributeName-${++i}" class="visually-hidden">${k}</label><input id="detailAttributeName-${i}" type="text" class="form-control w-50" placeholder="@T["Attribute name"]" data-attr-name disabled value="${k}" />:
|
||||
<label for="detailAttributeValue-${i}" class="visually-hidden">${k}</label><input id="detailAttributeValue-${i}" type="text" class="form-control" placeholder="@T["Attribute value"]" data-attr-value disabled value="${v}" />
|
||||
</div>`)
|
||||
.join('')}
|
||||
</div>` : ''}
|
||||
|
||||
${asset.Description?.Purchase ? `
|
||||
<hr class="my-3" />
|
||||
<div class="row g-3">
|
||||
<h4 class="fw-bold">@T["Purchase Information"]</h4>
|
||||
<div class="col-md-6">
|
||||
<label for="detailPurchaseDate" class="form-label">@T["Purchase Date"]</label>
|
||||
<input id="detailPurchaseDate" type="text" class="form-control" name="Description.Purchase.PurchaseDate" value="${new Intl.DateTimeFormat('de-DE', {year: "numeric", month: "2-digit", day: "2-digit"}).format(new Date(asset.Description.Purchase.PurchaseDate)) || ''}" disabled />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="detailPurchaseValue" class="form-label">@T["Purchase Value"]</label>
|
||||
<input id="detailPurchaseValue" type="text" class="form-control" name="Description.Purchase.PurchaseValue" value="${asset.Description.Purchase.PurchaseValue || ''}" disabled />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="detailPurchaseAt" class="form-label">@T["Purchased At"]</label>
|
||||
<input id="detailPurchaseAt" type="text" class="form-control" name="Description.Purchase.PurchaseAt" value="${asset.Description.Purchase.PurchaseAt || ''}" disabled />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="detailPurchaseBy" class="form-label">@T["Purchased By"]</label>
|
||||
<input id="detailPurchaseBy" type="text" class="form-control" name="Description.Purchase.PurchaseBy" value="${asset.Description.Purchase.PurchaseBy || ''}" disabled />
|
||||
</div>
|
||||
</div>` : ''}
|
||||
</div>`;
|
||||
viewContent.innerHTML = html;
|
||||
JsBarcode("#@barcodeType", getBarcodeValue("@barcodeType", asset.Cn), {
|
||||
format: "@barcodeType",
|
||||
lineColor: "#000",
|
||||
width: 2,
|
||||
height: 80,
|
||||
displayValue: true
|
||||
});
|
||||
document.getElementById("downloadBtn").addEventListener("click", () => {
|
||||
downloadBarcode("@barcodeType", getBarcodeValue("@barcodeType", asset.Cn));
|
||||
});
|
||||
document.getElementById("printBtn").addEventListener("click", () => {
|
||||
addAssetIdToBatch(asset.Cn);
|
||||
showToast("@T["Successfully added barcode to print batch"]", "success");
|
||||
bootstrap.Modal.getInstance('#viewAssetModal').hide();
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
viewContent.innerHTML = `<p class="text-danger text-center">@T["Error loading asset details"]</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const presetApplyButton = document.getElementById('createPresetApply');
|
||||
|
||||
Reference in New Issue
Block a user