Made presets collapsible

This commit is contained in:
2025-11-15 11:54:06 +01:00
parent 2df6111bd1
commit bb1e4c197a

View File

@@ -12,7 +12,7 @@
ViewData["Title"] = T["Users"];
}
<form id="updateSettings">
<form id="updateSettings" class="mb-5" method="post" asp-controller="Settings" asp-action="Admin">
<div class="row g-3">
<h4 class="fw-bold">@T["General settings"]</h4>
<div class="col-md-6">
@@ -44,11 +44,20 @@
<label class="form-label" for="updateMaxDownloadableUserImageSize">@T["Max downloadable user image size"]</label>
<input type="number" id="updateMaxDownloadableUserImageSize" name="MaxDownloadableUserImageSize" class="form-control" value="@Model.MaxDownloadableUserImageSize" />
</div>
<div class="col-md-6 mt-3">
<h4 class="fw-bold">@T["Presets"]</h4>
</div>
<h4 class="fw-bold mt-3">@T["Presets"]</h4>
<button class="btn btn-secondary mb-3"
type="button"
data-bs-toggle="collapse"
data-bs-target="#presetsCollapse"
aria-expanded="false"
aria-controls="presetsCollapse">
@T["Show/Hide presets"]
</button>
<div class="row g-3 collapse" id="presetsCollapse">
@foreach (var preset in Model.Presets)
{
<div class="col-md-6">
<div class="border rounded p-3 mb-3" 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"/>
@@ -80,15 +89,13 @@
</div>
</div>
</div>
</div>
}
<div class="col-md-4">
<div class="col-md-12">
<button type="button" class="btn btn-primary" data-type="addPreset">@T["Add preset"]</button>
</div>
</div>
<form id="updateSettings" method="post" asp-controller="Settings" asp-action="Admin">
<button type="submit" class="btn btn-warning">@T["Update"]</button>
</form>
</div>
<button type="submit" class="btn btn-warning float-end">@T["Apply settings and update presets"]</button>
</form>
<script>
@@ -189,7 +196,7 @@
const presetContainer = e.target.closest('.border.rounded.p-3.mb-3');
if (!presetContainer) return;
const presetKey = presetContainer.getAttribute("data-preset-id"); //presetContainer.querySelector('input')?.value;
const presetKey = presetContainer.getAttribute("data-preset-id");
if (!presetKey) return;
// Container für Attribute suchen
@@ -242,7 +249,7 @@
function addDeletePresetEventListener(button) {
button.addEventListener('click', e => {
const presetContainer = e.target.closest('.border.rounded.p-3.mb-3');
const presetContainer = e.target.closest('.col-md-6');
if (!presetContainer) return;
presetContainer.remove();
});
@@ -258,9 +265,9 @@
// Preset-Block erstellen
const presetDiv = document.createElement('div');
presetDiv.classList.add('border', 'rounded', 'p-3', 'mb-3');
presetDiv.setAttribute('data-preset-id', presetId);
presetDiv.classList.add('col-md-6');
presetDiv.innerHTML = `
<div class="border rounded p-3 mb-3" 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>
@@ -273,6 +280,7 @@
<button type="button" class="btn btn-primary" data-type="addAttribute">Add attribute</button>
</div>
</div>
</div>
`;
// Einfach ans Ende der Container-Liste hängen