Prepare Player-Delete modal. Update disabled-design.

controllers/player_controller.go

@@ -43,11 +43,10 @@ func GetPlayersByClanHTML(c *gin.Context) {
 		return
 	}
 	playerItem := string(file)
-	//player_item = strings.Replace(player_item, "PLAYERNAME", player.Name, 1)
 
 	var htmlOptions string
 	for _, player := range players {
-		htmlOptions += fmt.Sprintf(playerItem, player.Name)
+		htmlOptions += fmt.Sprintf(playerItem, player.Name, player.ID)
 	}
 
 	c.Header("Content-Type", "text/html")

main.go

@@ -39,6 +39,7 @@ func main() {
 			"./templates/modals/add_clan.html",
 			"./templates/modals/edit_clan.html",
 			"./templates/modals/add_player.html",
+			"./templates/modals/delete_player.html",
 			"./templates/components/header.html",
 		}
 		tmpl, err := template.ParseFiles(files...)

static/index.js

@@ -5,7 +5,9 @@ function setupClanButtons(dropdownId, delBtnId, editBtnId) {
 
     dropdown.addEventListener('change', function () {
         deleteButton.disabled = !this.value;
+        deleteButton.classList.toggle("bg-secondary-subtle");
         editButton.disabled = !this.value;
+        editButton.classList.toggle("bg-secondary-subtle");
     });
 }
 

templates/components/home_clan_bar.html

@@ -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">

templates/components/opp_clan_bar.html

@@ -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">

templates/modals/delete_player.html

@@ -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 }}

templates/player_list_item.html

@@ -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-primary fs-5" href="#">
-        <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>
+                <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>