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"]; 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"> <div class="row g-3">
<h4 class="fw-bold">@T["General settings"]</h4> <h4 class="fw-bold">@T["General settings"]</h4>
<div class="col-md-6"> <div class="col-md-6">
@@ -44,11 +44,20 @@
<label class="form-label" for="updateMaxDownloadableUserImageSize">@T["Max downloadable user image size"]</label> <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" /> <input type="number" id="updateMaxDownloadableUserImageSize" name="MaxDownloadableUserImageSize" class="form-control" value="@Model.MaxDownloadableUserImageSize" />
</div> </div>
<div class="col-md-6 mt-3"> </div>
<h4 class="fw-bold">@T["Presets"]</h4> <h4 class="fw-bold mt-3">@T["Presets"]</h4>
<button class="btn btn-secondary mb-3"
@foreach (var preset in Model.Presets) 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)"> <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> <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"/> <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> </div>
}
<div class="col-md-4">
<button type="button" class="btn btn-primary" data-type="addPreset">@T["Add preset"]</button>
</div> </div>
}
<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> </div>
<button type="submit" class="btn btn-warning float-end">@T["Apply settings and update presets"]</button>
</form> </form>
<script> <script>
@@ -189,7 +196,7 @@
const presetContainer = e.target.closest('.border.rounded.p-3.mb-3'); const presetContainer = e.target.closest('.border.rounded.p-3.mb-3');
if (!presetContainer) return; if (!presetContainer) return;
const presetKey = presetContainer.getAttribute("data-preset-id"); //presetContainer.querySelector('input')?.value; const presetKey = presetContainer.getAttribute("data-preset-id");
if (!presetKey) return; if (!presetKey) return;
// Container für Attribute suchen // Container für Attribute suchen
@@ -242,7 +249,7 @@
function addDeletePresetEventListener(button) { function addDeletePresetEventListener(button) {
button.addEventListener('click', e => { 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; if (!presetContainer) return;
presetContainer.remove(); presetContainer.remove();
}); });
@@ -258,19 +265,20 @@
// Preset-Block erstellen // Preset-Block erstellen
const presetDiv = document.createElement('div'); const presetDiv = document.createElement('div');
presetDiv.classList.add('border', 'rounded', 'p-3', 'mb-3'); presetDiv.classList.add('col-md-6');
presetDiv.setAttribute('data-preset-id', presetId);
presetDiv.innerHTML = ` presetDiv.innerHTML = `
<label class="form-label" for="Presets.${presetId}.Key">@T["Preset name"]</label> <div class="border rounded p-3 mb-3" data-preset-id="${presetId}">
<input class="form-control mb-3" id="Presets.${presetId}.Key" name="Presets.${presetId}.Key" value=""/> <label class="form-label" for="Presets.${presetId}.Key">@T["Preset name"]</label>
<label class="form-label">@T["Attributes"]</label> <input class="form-control mb-3" id="Presets.${presetId}.Key" name="Presets.${presetId}.Key" value=""/>
<div class="attributes"></div> <label class="form-label">@T["Attributes"]</label>
<div class="row mb-4"> <div class="attributes"></div>
<div class="col-md-4"> <div class="row mb-4">
<button type="button" class="btn btn-danger" data-type="deletePreset">Delete preset</button> <div class="col-md-4">
</div> <button type="button" class="btn btn-danger" data-type="deletePreset">Delete preset</button>
<div class="col-md-4 ms-auto"> </div>
<button type="button" class="btn btn-primary" data-type="addAttribute">Add attribute</button> <div class="col-md-4 ms-auto">
<button type="button" class="btn btn-primary" data-type="addAttribute">Add attribute</button>
</div>
</div> </div>
</div> </div>
`; `;