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

Improved inventory view screen reader navigation

Browse Source
This commit is contained in:
LD-Reborn
2025-11-24 19:40:44 +01:00
parent d662157885
commit 8bc76ccf0b
1 changed files with 57 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/Views/Home/Inventory.cshtml
View File

@@ -179,13 +179,29 @@
<hr class="my-3" /> <hr class="my-3" />
<div class="row g-3"> <div class="row g-3">
<h4 class="fw-bold">@T["Attributes"]</h4> <h4 class="fw-bold">@T["Attributes"]</h4>
${Object.entries(asset.Description.Attributes) <table class="w-100">
.map(([k,v]) => ` <thead>
<div class="d-flex gap-2 align-items-center attribute-row"> <tr>
<input type="text" class="form-control w-50" placeholder="@T["Attribute name"]" aria-label="@T["Attribute name"]" data-attr-name readonly value="${k}" />: <th class="visually-hidden">@T["Attribute name"]</th>
<input type="text" class="form-control" placeholder="@T["Attribute value"]" aria-label="@T["Attribute value"]" data-attr-value readonly value="${v}" /> <th class="visually-hidden">@T["Attribute value"]</th>
</div>`) <th class="visually-hidden">@T["Delete"]</th>
</tr>
</thead>
<tbody id="updateAttributesContainer">
${Object.entries(asset.Description.Attributes)
.map(([k,v]) => `
<tr class="gap-2 align-items-center attribute-row">
<td class="d-flex p-1 align-items-center">
<input type="text" class="form-control d-inline-block w-100" placeholder="@T["Attribute name"]" aria-label="@T["Attribute name"]" data-attr-name readonly value="${k}" />
<span class="ms-1">:</span>
</td>
<td class="p-1">
<input type="text" class="form-control" placeholder="@T["Attribute value"]" aria-label="@T["Attribute value"]" data-attr-value readonly value="${v}" />
</td>
</tr>`)
.join('')} .join('')}
</tbody>
</table>
</div>` : ''} </div>` : ''}
${asset.Description?.Purchase ? ` ${asset.Description?.Purchase ? `
@@ -194,7 +210,7 @@
<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" for="detailPurchaseDate">@T["Purchase Date"]</label> <label class="form-label" for="detailPurchaseDate">@T["Purchase Date"]</label>
<input type="date" class="form-control" id="detailPurchaseDate" name="Description.Purchase.PurchaseDate" value="${asset.Description.Purchase.PurchaseDate || ''}" readonly /> <input type="text" class="form-control" id="detailPurchaseDate" name="Description.Purchase.PurchaseDate" value="${asset.Description.Purchase.PurchaseDate || ''}" readonly />
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label class="form-label" for="detailPurchaseValue">@T["Purchase Value"]</label> <label class="form-label" for="detailPurchaseValue">@T["Purchase Value"]</label>
@@ -385,10 +401,20 @@
</div> </div>
<div class="col-12 mt-3"> <div class="col-12 mt-3">
<div class="d-flex justify-content-between align-items-center mb-2"> <div class="justify-content-between align-items-center mb-2">
<h4 class="fw-bold mb-0">@T["Attributes"]</h4> <h4 class="fw-bold mb-0">@T["Attributes"]</h4>
<table class="w-100">
<thead>
<tr>
<th class="visually-hidden">@T["Attribute name"]</th>
<th class="visually-hidden">@T["Attribute value"]</th>
<th class="visually-hidden">@T["Delete"]</th>
</tr>
</thead>
<tbody id="updateAttributesContainer">
</tbody>
</table>
</div> </div>
<div id="updateAttributesContainer" class="d-flex flex-column gap-2"></div>
<button type="button" class="btn btn-sm btn-primary mt-3" id="updateAddAttributeBtn"> <button type="button" class="btn btn-sm btn-primary mt-3" id="updateAddAttributeBtn">
@T["Add Attribute"] @T["Add Attribute"]
</button> </button>
@@ -435,12 +461,18 @@ document.addEventListener('DOMContentLoaded', () => {
let assetId = null; let assetId = null;
addAttrBtn.addEventListener('click', () => { addAttrBtn.addEventListener('click', () => {
const row = document.createElement('div'); const row = document.createElement('tr');
row.className = 'd-flex gap-2 align-items-center attribute-row'; row.className = 'attribute-row mb-3';
row.innerHTML = ` row.innerHTML = `
<input type="text" class="form-control" aria-label="@T["Attribute name"]" placeholder="@T["Attribute name"]" data-attr-name /> <td class="col-md-5 p-1">
<input type="text" class="form-control" aria-label="@T["Attribute value"]" placeholder="@T["Attribute value"]" data-attr-value /> <input type="text" class="form-control" placeholder="@T["Attribute name"]" data-attr-name />
<button type="button" class="btn btn-danger btn-sm btn-remove-attribute">@T["Remove"]</button> </td>
<td class="col-md-5 p-1">
<input type="text" class="form-control" placeholder="@T["Attribute value"]" data-attr-value />
</td>
<td class="col-md-2 p-1">
<button type="button" class="btn btn-danger btn-sm btn-remove-attribute">@T["Remove"]</button>
</td>
`; `;
updateAttributesContainer.appendChild(row); updateAttributesContainer.appendChild(row);
}); });
@@ -486,12 +518,18 @@ document.addEventListener('DOMContentLoaded', () => {
// Attributes // Attributes
if (asset.Description.Attributes) { if (asset.Description.Attributes) {
for (const [attrName, attrValue] of Object.entries(asset.Description.Attributes)) { for (const [attrName, attrValue] of Object.entries(asset.Description.Attributes)) {
const row = document.createElement('div'); const row = document.createElement('tr');
row.className = 'd-flex gap-2 align-items-center attribute-row'; row.className = 'attribute-row mb-3';
row.innerHTML = ` row.innerHTML = `
<input type="text" class="form-control" aria-label="@T["Attribute name"]" value="${attrName}" data-attr-name /> <td class="col-md-5 p-1">
<input type="text" class="form-control" aria-label="@T["Attribute value"]" value="${attrValue}" data-attr-value /> <input type="text" class="form-control" value="${attrName}" placeholder="@T["Attribute name"]" data-attr-name />
<button type="button" class="btn btn-danger btn-sm btn-remove-attribute">@T["Remove"]</button> </td>
<td class="col-md-5 p-1">
<input type="text" class="form-control" value="${attrValue}" placeholder="@T["Attribute value"]" data-attr-value />
</td>
<td class="col-md-2 p-1">
<button type="button" class="btn btn-danger btn-sm btn-remove-attribute">@T["Remove"]</button>
</td>
`; `;
updateAttributesContainer.appendChild(row); updateAttributesContainer.appendChild(row);
} }