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">
|
<table class="table table-striped align-middle">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>@T["Owner"]</th>
|
<th id="col-owner">@T["Owner"]</th>
|
||||||
<th>@T["Asset ID"]</th>
|
<th id="col-assetId">@T["Asset ID"]</th>
|
||||||
<th>@T["Asset Name"]</th>
|
<th id="col-assetName">@T["Asset Name"]</th>
|
||||||
<th>@T["Location"]</th>
|
<th id="col-assetLocation">@T["Location"]</th>
|
||||||
<th class="text-center">@T["Action"]</th>
|
<th class="text-center">@T["Action"]</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th><input type="text" class="form-control form-control-sm column-filter" placeholder="@T["Owner"]" data-column="0" /></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 type="text" class="form-control form-control-sm column-filter" placeholder="@T["Asset ID"]" data-column="1" /></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 type="text" class="form-control form-control-sm column-filter" placeholder="@T["Asset Name"]" data-column="2" /></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 type="text" class="form-control form-control-sm column-filter" placeholder="@T["Location"]" data-column="3" /></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>
|
<th class="text-center">-</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
@@ -48,8 +48,8 @@
|
|||||||
@{
|
@{
|
||||||
foreach (AssetsTableViewModel assetsTableViewModel in Model.AssetsTableViewModels)
|
foreach (AssetsTableViewModel assetsTableViewModel in Model.AssetsTableViewModels)
|
||||||
{
|
{
|
||||||
<tr class="asset-row" data-asset-id="@assetsTableViewModel.AssetCn">
|
<tr tabindex="0" role="button" class="asset-row" data-asset-id="@assetsTableViewModel.AssetCn">
|
||||||
<td tabindex="0">@assetsTableViewModel.UserUID</td>
|
<td>@assetsTableViewModel.UserUID</td>
|
||||||
<td>@assetsTableViewModel.AssetCn</td>
|
<td>@assetsTableViewModel.AssetCn</td>
|
||||||
<td>@assetsTableViewModel.AssetName</td>
|
<td>@assetsTableViewModel.AssetName</td>
|
||||||
<td>@assetsTableViewModel.LocationName</td>
|
<td>@assetsTableViewModel.LocationName</td>
|
||||||
@@ -711,7 +711,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
.asset-row > td {
|
.asset-row > td {
|
||||||
transition: 0.1s ease;
|
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;
|
background-color: #17a2b8;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -725,145 +725,152 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
function registerRowDetailviewClick(row) {
|
function registerRowDetailviewClick(row) {
|
||||||
const viewModal = document.getElementById('viewAssetModal');
|
row.addEventListener('click', async (e) => handleRowDetailViewEvent(e, row));
|
||||||
const viewContent = document.getElementById('viewAssetContent');
|
row.addEventListener('keydown', e => {
|
||||||
row.addEventListener('click', async (e) => {
|
if (e.key === 'Enter' || e.key === ' ') {
|
||||||
// Avoid clicks on buttons inside the row
|
row.click();
|
||||||
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>`;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
const presetApplyButton = document.getElementById('createPresetApply');
|
const presetApplyButton = document.getElementById('createPresetApply');
|
||||||
|
|||||||
Reference in New Issue
Block a user