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

Fixed a few accessibility issues for Assets view

Browse Source
This commit is contained in:
LD-Reborn
2025-11-28 19:07:32 +01:00
parent b319e50a18
commit db2939c5ba
1 changed files with 153 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/Views/Home/Assets.cshtml
View File

@@ -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,9 +725,17 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
function registerRowDetailviewClick(row) { function registerRowDetailviewClick(row) {
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 viewModal = document.getElementById('viewAssetModal');
const viewContent = document.getElementById('viewAssetContent'); const viewContent = document.getElementById('viewAssetContent');
row.addEventListener('click', async (e) => {
// Avoid clicks on buttons inside the row // Avoid clicks on buttons inside the row
if (e.target.closest('button')) return; if (e.target.closest('button')) return;
@@ -746,12 +754,12 @@ function registerRowDetailviewClick(row) {
viewContent.innerHTML = `<p class="text-danger text-center">@T["Asset not found."]</p>`; viewContent.innerHTML = `<p class="text-danger text-center">@T["Asset not found."]</p>`;
return; return;
} }
let i = 0;
const html = ` const html = `
<div class="row g-3"> <div class="row g-3">
<h4 class="fw-bold">@T["Barcode"]</h4> <h4 class="fw-bold">@T["Barcode"]</h4>
<div class="col-md-6"> <div class="col-md-6">
<svg id="@barcodeType" class="form-control" name="Barcode" /> <svg role="img" aria-label="@T["Barcode"]" id="@barcodeType" class="form-control" name="Barcode" />
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<button id="downloadBtn" class="form-control my-2 btn btn-primary">@T["Download Barcode"]</button> <button id="downloadBtn" class="form-control my-2 btn btn-primary">@T["Download Barcode"]</button>
@@ -762,48 +770,48 @@ function registerRowDetailviewClick(row) {
<div class="row g-3"> <div class="row g-3">
<h4 class="fw-bold">@T["Inventory"]</h4> <h4 class="fw-bold">@T["Inventory"]</h4>
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label">@T["Name"]</label> <label for="detailUsername" class="form-label">@T["Name"]</label>
<input type="text" class="form-control" name="Name" value="${asset.Description.Inventory.PersonUid || ''}" disabled /> <input id="detailUsername" type="text" class="form-control" name="Name" value="${asset.Description.Inventory.PersonUid || ''}" disabled />
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label">@T["Date"]</label> <label for="detailDate" 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 /> <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>
</div> </div>
<hr class="my-3" /> <hr class="my-3" />
<div class="row g-3"> <div class="row g-3">
<h4 class="fw-bold">@T["Information"]</h4> <h4 class="fw-bold">@T["Information"]</h4>
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label">@T["Name"]</label> <label for="detailName" class="form-label">@T["Name"]</label>
<input type="text" class="form-control" name="Name" value="${asset.Name || ''}" disabled /> <input id="detailName" type="text" class="form-control" name="Name" value="${asset.Name || ''}" disabled />
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label">@T["Location"]</label> <label for="detailLocation" class="form-label">@T["Location"]</label>
<input type="text" class="form-control" name="Location" value="${asset.Location || ''}" disabled /> <input id="detailLocation" type="text" class="form-control" name="Location" value="${asset.Location || ''}" disabled />
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label">@T["Owner"]</label> <label for="detailOwner" class="form-label">@T["Owner"]</label>
<input type="text" class="form-control" name="Owner" value="${asset.Owner || ''}" disabled /> <input id="detailOwner" type="text" class="form-control" name="Owner" value="${asset.Owner || ''}" disabled />
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label">@T["Serial Number"]</label> <label for="detailSerialnumber" class="form-label">@T["Serial Number"]</label>
<input type="text" class="form-control" name="SerialNumber" value="${asset.SerialNumber || ''}" disabled /> <input id="detailSerialnumber" type="text" class="form-control" name="SerialNumber" value="${asset.SerialNumber || ''}" disabled />
</div> </div>
</div> </div>
<hr class="my-3" /> <hr class="my-3" />
<div class="row g-3"> <div class="row g-3">
<h4 class="fw-bold">@T["Description"]</h4> <h4 class="fw-bold">@T["Description"]</h4>
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label">@T["Type"]</label> <label for="detailType" class="form-label">@T["Type"]</label>
<input type="text" class="form-control" name="Description.Type" value="${asset.Description?.Type || ''}" disabled /> <input id="detailType" type="text" class="form-control" name="Description.Type" value="${asset.Description?.Type || ''}" disabled />
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label">@T["Make"]</label> <label for="detailMake" class="form-label">@T["Make"]</label>
<input type="text" class="form-control" name="Description.Make" value="${asset.Description?.Make || ''}" disabled /> <input id="detailMake" type="text" class="form-control" name="Description.Make" value="${asset.Description?.Make || ''}" disabled />
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label">@T["Model"]</label> <label for="detailModel" class="form-label">@T["Model"]</label>
<input type="text" class="form-control" name="Description.Model" value="${asset.Description?.Model || ''}" disabled /> <input id="detailModel" type="text" class="form-control" name="Description.Model" value="${asset.Description?.Model || ''}" disabled />
</div> </div>
</div> </div>
${asset.Description?.Attributes ? ` ${asset.Description?.Attributes ? `
@@ -813,8 +821,8 @@ function registerRowDetailviewClick(row) {
${Object.entries(asset.Description.Attributes) ${Object.entries(asset.Description.Attributes)
.map(([k,v]) => ` .map(([k,v]) => `
<div class="d-flex gap-2 align-items-center attribute-row"> <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}" />: <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}" />:
<input type="text" class="form-control" placeholder="@T["Attribute value"]" data-attr-value disabled value="${v}" /> <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>`) </div>`)
.join('')} .join('')}
</div>` : ''} </div>` : ''}
@@ -824,20 +832,20 @@ function registerRowDetailviewClick(row) {
<div class="row g-3"> <div class="row g-3">
<h4 class="fw-bold">@T["Purchase Information"]</h4> <h4 class="fw-bold">@T["Purchase Information"]</h4>
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label">@T["Purchase Date"]</label> <label for="detailPurchaseDate" class="form-label">@T["Purchase Date"]</label>
<input type="date" class="form-control" name="Description.Purchase.PurchaseDate" value="${asset.Description.Purchase.PurchaseDate || ''}" disabled /> <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>
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label">@T["Purchase Value"]</label> <label for="detailPurchaseValue" class="form-label">@T["Purchase Value"]</label>
<input type="text" class="form-control" name="Description.Purchase.PurchaseValue" value="${asset.Description.Purchase.PurchaseValue || ''}" disabled /> <input id="detailPurchaseValue" type="text" class="form-control" name="Description.Purchase.PurchaseValue" value="${asset.Description.Purchase.PurchaseValue || ''}" disabled />
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label">@T["Purchased At"]</label> <label for="detailPurchaseAt" class="form-label">@T["Purchased At"]</label>
<input type="text" class="form-control" name="Description.Purchase.PurchaseAt" value="${asset.Description.Purchase.PurchaseAt || ''}" disabled /> <input id="detailPurchaseAt" type="text" class="form-control" name="Description.Purchase.PurchaseAt" value="${asset.Description.Purchase.PurchaseAt || ''}" disabled />
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label">@T["Purchased By"]</label> <label for="detailPurchaseBy" class="form-label">@T["Purchased By"]</label>
<input type="text" class="form-control" name="Description.Purchase.PurchaseBy" value="${asset.Description.Purchase.PurchaseBy || ''}" disabled /> <input id="detailPurchaseBy" type="text" class="form-control" name="Description.Purchase.PurchaseBy" value="${asset.Description.Purchase.PurchaseBy || ''}" disabled />
</div> </div>
</div>` : ''} </div>` : ''}
</div>`; </div>`;
@@ -861,7 +869,6 @@ function registerRowDetailviewClick(row) {
console.error(err); console.error(err);
viewContent.innerHTML = `<p class="text-danger text-center">@T["Error loading asset details"]</p>`; viewContent.innerHTML = `<p class="text-danger text-center">@T["Error loading asset details"]</p>`;
} }
});
} }