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

Made presets cards full height, improved screen reader navigation, added input focus on add attribute and add preset

Browse Source
This commit is contained in:
LD-Reborn
2025-11-24 15:40:52 +01:00
parent ff3baf37db
commit 72f0116cab
1 changed files with 62 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -92,28 +92,39 @@
@foreach (var preset in Model.Presets)
{
<div class="col-md-6">
<div class="border rounded p-3 mb-3" data-preset-id="@(preset.Key)">
<div class="border rounded p-3 mb-3 h-100" data-preset-id="@(preset.Key)">
<label class="form-label" for="Presets.@(preset.Key).Key">@T["Preset name"]</label>
<input class="form-control mb-3" id="Presets.@(preset.Key).Key" name="Presets.@(preset.Key).Key" value="@preset.Key"/>
<label class="form-label">@T["Attributes"]</label>
@foreach (var attr in preset.Value.Attribute)
{
<div class="row mb-2" data-type="attribute">
<div class="col-md-3 mt-2">
<input class="form-control"
name="Presets.@(preset.Key).Attribute.@(attr.Key).Key"
value="@attr.Key" placeholder="@T["Name"]" aria-label="@T["Name"]" />
</div>
<div class="col-md-5 mt-2">
<input class="form-control"
name="Presets.@(preset.Key).Attribute.@(attr.Key).Value"
value="@attr.Value" placeholder="@T["Value"]" aria-label="@T["Value"]" />
</div>
<div class="col-md-4 mt-2">
<button type="button" class="btn btn-danger" data-type="deleteAttribute">@T["Delete attribute"]</button>
</div>
</div>
}
<table class="attributes mb-2">
<thead>
<tr>
<th class="p-1">@T["Name"]</th>
<th class="p-1">@T["Value"]</th>
<th class="p-1">@T["Delete attribute"]</th>
</tr>
</thead>
<tbody class="attributes">
@foreach (var attr in preset.Value.Attribute)
{
<tr data-type="attribute">
<td class="col-md-3 p-1">
<input class="form-control"
name="Presets.@(preset.Key).Attribute.@(attr.Key).Key"
value="@attr.Key" placeholder="@T["Name"]" aria-label="@T["Name"]" />
</td>
<td class="col-md-5 p-1">
<input class="form-control"
name="Presets.@(preset.Key).Attribute.@(attr.Key).Value"
value="@attr.Value" placeholder="@T["Value"]" aria-label="@T["Value"]" />
</td>
<td class="col-md-4 p-1">
<button type="button" class="btn btn-danger" data-type="deleteAttribute">@T["Delete attribute"]</button>
</td>
</tr>
}
</tbody>
</table>
<div class="attributes"></div>
<div class="row mb-2">
<div class="col-md-8 mt-2">
@@ -240,25 +251,25 @@
function addAttribute(presetContainer, presetKey) {
const attributeId = crypto.randomUUID();
const row = document.createElement('div');
const row = document.createElement('tr');
row.classList.add('row', 'mb-2');
row.innerHTML = `
<div class="col-md-3">
<td class="col-md-3 p-1">
<input class="form-control"
name="Presets.${presetKey}.Attribute.${attributeId}.Key"
value="" />
</div>
<div class="col-md-5">
</td>
<td class="col-md-5 p-1">
<input class="form-control"
name="Presets.${presetKey}.Attribute.${attributeId}.Value"
value="" />
</div>
<div class="col-md-4">
</td>
<td class="col-md-4 p-1">
<button type="button" class="btn btn-danger btn-delete-attr">
${presetContainer.dataset.deleteAttributeText}
</button>
</div>
</td>
`;
presetContainer.querySelector('.attributes').appendChild(row);
@@ -335,29 +346,32 @@
const attributeId = crypto.randomUUID();
const row = document.createElement('div');
row.classList.add('row', 'mb-2');
const row = document.createElement('tr');
row.classList.add('mb-2');
row.setAttribute('data-type', 'attribute');
row.innerHTML = `
<div class="col-md-3">
<td class="col-md-3 p-1">
<input class="form-control"
name="Presets.${presetKey}.Attribute.${attributeId}.Key"
value="" />
</div>
<div class="col-md-5">
</td>
<td class="col-md-5 p-1">
<input class="form-control"
name="Presets.${presetKey}.Attribute.${attributeId}.Value"
value="" />
</div>
<div class="col-md-4">
</td>
<td class="col-md-4 p-1">
<button type="button" class="btn btn-danger" data-type="deleteAttribute">
${presetContainer.dataset.deleteAttributeText || 'Delete attribute'}
</button>
</div>
</td>
`;
attributesContainer.appendChild(row);
requestAnimationFrame(() => {
row.querySelector(".col-md-3 input").focus();
});
// Delete-Button Eventlistener aktivieren
const deleteButton = row.querySelector('button[data-type="deleteAttribute"]');
@@ -392,11 +406,20 @@
const presetDiv = document.createElement('div');
presetDiv.classList.add('col-md-6');
presetDiv.innerHTML = `
<div class="border rounded p-3 mb-3" data-preset-id="${presetId}">
<div class="border rounded p-3 mb-3 h-100" data-preset-id="${presetId}">
<label class="form-label" for="Presets.${presetId}.Key">@T["Preset name"]</label>
<input class="form-control mb-3" id="Presets.${presetId}.Key" name="Presets.${presetId}.Key" value=""/>
<label class="form-label">@T["Attributes"]</label>
<div class="attributes"></div>
<table class="mb-2">
<thead>
<tr>
<th class="p-1">@T["Name"]</th>
<th class="p-1">@T["Value"]</th>
<th class="p-1">@T["Delete attribute"]</th>
</tr>
</thead>
<tbody class="attributes"></tbody>
</table>
<div class="row mb-4">
<div class="col-md-4">
<button type="button" class="btn btn-danger" data-type="deletePreset">@T["Delete preset"]</button>
@@ -410,7 +433,9 @@
// Einfach ans Ende der Container-Liste hängen
presetsButton.parentElement.parentElement.insertBefore(presetDiv, presetsButton.parentElement);
requestAnimationFrame(() => {
presetDiv.querySelector(".form-control.mb-3").focus();
});
// Eventlistener für den neuen Preset-Block aktivieren
const addAttrBtn = presetDiv.querySelector('button[data-type="addAttribute"]');
const deletePresetBtn = presetDiv.querySelector('button[data-type="deletePreset"]');