Maxi/InfantrySkillCalculator
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects 1 Releases Activity

Prepare Player-Delete modal. Update disabled-design.

Browse Source
This commit is contained in:
MaxJa4
2024-01-16 18:24:45 +01:00
parent 80d0489b41
commit 8c4ed63359
7 changed files with 88 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
templates/components/home_clan_bar.html
View File

@@ -10,10 +10,10 @@
<option disabled selected value>Auswählen...</option>
<!-- Options will be loaded dynamically -->
</select>
<button class="btn btn-lg btn-outline-secondary text-danger" type="button" id="home-delete" data-bs-toggle="modal" data-bs-list="#home-clan" data-bs-target="#deleteClanModal" disabled>
<button class="btn btn-lg btn-outline-secondary text-danger bg-secondary-subtle" type="button" id="home-delete" data-bs-toggle="modal" data-bs-list="#home-clan" data-bs-target="#deleteClanModal" disabled>
<i class="bi bi-trash3"></i>
</button>
<button class="btn btn-lg btn-outline-secondary text-primary" type="button" data-bs-toggle="modal" data-bs-list="#home-clan" data-bs-target="#editClanModal" id="home-edit" disabled>
<button class="btn btn-lg btn-outline-secondary text-primary bg-secondary-subtle" type="button" data-bs-toggle="modal" data-bs-list="#home-clan" data-bs-target="#editClanModal" id="home-edit" disabled>
<i class="bi bi-pencil-fill"></i>
</button>
<button class="btn btn-lg btn-outline-secondary text-success" type="button" data-bs-toggle="modal" data-bs-list="#home-clan" data-bs-target="#addClanModal" id="home-add">

4
templates/components/opp_clan_bar.html
View File

@@ -9,10 +9,10 @@
<select class="form-select form-control border-secondary" id="opponent-clan" hx-get="/players_html" hx-target="#opponent-player-list" hx-vals='js:{"id": getSelectedClanId("opponent-clan")}'>
<option disabled selected value>Auswählen...</option>
</select>
<button class="btn btn-lg btn-outline-secondary text-danger" type="button" id="opponent-delete" data-bs-toggle="modal" data-bs-list="#opponent-clan" data-bs-target="#deleteClanModal" disabled>
<button class="btn btn-lg btn-outline-secondary text-danger bg-secondary-subtle" type="button" id="opponent-delete" data-bs-toggle="modal" data-bs-list="#opponent-clan" data-bs-target="#deleteClanModal" disabled>
<i class="bi bi-trash3"></i>
</button>
<button class="btn btn-lg btn-outline-secondary text-primary" type="button" data-bs-toggle="modal" data-bs-list="#opponent-clan" data-bs-target="#editClanModal" id="opponent-edit" disabled>
<button class="btn btn-lg btn-outline-secondary text-primary bg-secondary-subtle" type="button" data-bs-toggle="modal" data-bs-list="#opponent-clan" data-bs-target="#editClanModal" id="opponent-edit" disabled>
<i class="bi bi-pencil-fill"></i>
</button>
<button class="btn btn-lg btn-outline-secondary text-success" type="button" data-bs-toggle="modal" data-bs-list="#opponent-clan" data-bs-target="#addClanModal" id="opponent-add">

74
templates/modals/delete_player.html Normal file
View File

@@ -0,0 +1,74 @@
{{ define "delete_player" }}
<div class="modal modal-lg fade" id="deletePlayerModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-3 text-danger fw-bold" id="deletePlayerModalLabel">Spieler löschen</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body fs-5">
Möchtest du den Spieler "<span id="player"></span>" wirklich löschen?
<br><br>
Diese Aktion kann nicht rückgängig gemacht werden.
</div>
<div class="modal-footer">
<button type="submit" name="submit" class="btn btn-lg btn-danger">Löschen</button>
<button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
</div>
</div>
</div>
</div>
<script lang="javascript">
document.addEventListener('DOMContentLoaded', function() {
const deletePlayerModal = document.getElementById('deletePlayerModal')
const deletePlayerModalBS = new bootstrap.Modal('#deletePlayerModal');
if (deletePlayerModal) {
deletePlayerModal.addEventListener('show.bs.modal', event => {
return;
const [clanList, otherClanList] = getClanLists(event);
const selectedClan = clanList.options[clanList.selectedIndex].text;
const modalBodyInput = deletePlayerModal.querySelector('#clan');
modalBodyInput.innerText = selectedClan;
const submitButton = deletePlayerModal.querySelector('button[name="submit"]');
submitButton.addEventListener('click', function (e) {
e.preventDefault();
submitButton.onclick = function () {}
const clanId = parseInt(clanList.value);
fetch("/clan/" + clanId, {
method: "DELETE",
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then((response) => {
if (response.ok) {
const clanToRemove = clanList.children[clanList.selectedIndex];
const clanIndex = clanToRemove.index;
clanList.removeChild(clanToRemove);
clanList.selectedIndex = 0;
clanList.dispatchEvent(new Event('change'));
const lastOtherIndex = otherClanList.selectedIndex;
otherClanList.children.item(clanIndex).remove();
if (lastOtherIndex === clanIndex) {
otherClanList.selectedIndex = 0;
otherClanList.dispatchEvent(new Event('change'));
}
deletePlayerModalBS.hide();
} else
throw new Error(response.error)
});
})
});
}
});
</script>
{{ end }}

8
templates/player_list_item.html
View File

@@ -5,7 +5,11 @@
<span class="form-control py-1 px-2">%s</span>
<button class="btn btn-outline-secondary text-secondary-emphasis dropdown-toggle py-1" type="button" data-bs-toggle="dropdown"></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item text-primary fs-5" href="#"><i class="bi bi-person-gear fs-4 me-2"></i>Bearbeiten</a></li>
<li><a class="dropdown-item text-danger fs-5" href="#"><i class="bi bi-person-dash fs-4 me-2"></i>Löschen</a></li>
<li><a class="dropdown-item text-primary fs-5" href="#">
<i class="bi bi-person-gear fs-4 me-2"></i>Bearbeiten
</a></li>
<li><a class="dropdown-item text-danger fs-5" href="#" data-bs-toggle="modal" data-bs-list="#home-player-list" data-bs-id="%d" data-bs-target="#deletePlayerModal">
<i class="bi bi-person-dash fs-4 me-2"></i>Löschen
</a></li>
</ul>
</div>