From fc084108acfa7255b268a3ce6a4d5cf02229a72a Mon Sep 17 00:00:00 2001
From: MaxJa4 <74194322+MaxJa4@users.noreply.github.com>
Date: Tue, 16 Jan 2024 20:19:40 +0100
Subject: [PATCH] Optimize all modals (fetching). Implement add-player modal.

---
 controllers/player_controller.go        |   2 +-
 isc_data.db                             | Bin 16384 -> 16384 bytes
 static/index.js                         |  22 +++++++++++-
 templates/components/header.html        |   2 +-
 templates/components/home_clan_bar.html |   3 +-
 templates/components/opp_clan_bar.html  |   3 +-
 templates/index.html                    |   5 +--
 templates/modals/add_clan.html          |  45 +++++++++++++++---------
 templates/modals/add_player.html        |  22 +++++-------
 templates/modals/delete_clan.html       |  35 ++++++++++--------
 templates/modals/delete_player.html     |  45 +++++++++++-------------
 templates/modals/edit_clan.html         |  39 ++++++++++++++------
 templates/player_list_item.html         |   2 +-
 13 files changed, 134 insertions(+), 91 deletions(-)

diff --git a/controllers/player_controller.go b/controllers/player_controller.go
index 205cf0c..eb0f95e 100644
--- a/controllers/player_controller.go
+++ b/controllers/player_controller.go
@@ -33,7 +33,7 @@ func GetAllPlayers(c *gin.Context) {
 // GetPlayersByClanHTML GET /players_html
 func GetPlayersByClanHTML(c *gin.Context) {
 	var players []models.Player
-	clanId := c.Request.URL.Query().Get("id")
+	clanId := c.Request.URL.Query().Get("clan_id")
 	if err := models.DB.Where("clan_id = ?", utils.StringToUint(clanId)).Find(&players).Error; err != nil {
 		return
 	}
diff --git a/isc_data.db b/isc_data.db
index c2658a32984236dae5fe36bada2c9240cad09e17..ce19e86199a826b2198cd5b65b44a341120eeee7 100644
GIT binary patch
delta 817
zcma)5F^kkd6rRCk&ARNo&F;l@%*`couA-=HGReZ)Se$sBAPBaG%SHqhVS<*s_X7@2
zw!A{*df_;*v#_{pEUlC+EG%to)Jl9WSrj{yH_XiUzBliiFJw03vl-v@`QD4w4Ze49
z{}pJ4Plqu$f+KPJ|K5Y`o%Z~l+L?AoHuI%p@*<6Ol9?O>7W|HsPF{>NGtSL;m=&<a
z7E(DnNs(DcR)|mRy009QAynihE2x-I&-a}Q!9<3U7wyPqp65`Wu$7_B6ms$@5eUJN
z7jS{O(!(w>>Oig$*KF34&hsR~U6vb^aZ~jxwVE1WRpDK+*?Qj@r6>+5L^OG<kt)@>
zS{$DKS6}BcO7Wc{O*Hn;h~2qlvwmeloZy*pq+!8i5KtpblRQ(@61x{|CVfZ8R7XQc
zF_PEG2O`!U(0y71)ZU{jqo|HTn?0wTm@<krO<riTz@NVlytVfE%A9iY_-WZiV(^Ek
z<8pHNEBFq#f+j!F=Ub1mCuY=!Z%m4P4zJ-Q?7}vb@Br??CVYX9a129`@D_f83r*nS
zhxjT!ix1*hyb=3{Zun44-N0f4j<=*h{gDpEn#BT+(&`9X%3_lC$O&7k%T1Dw!c)G*
z`jko1uzA*EUbPM#X|WzH!^Rnl0oSV0U(Tm#j+NK5*j0{p4DeH<Pv|Hul-FJ2|HAXl
r8_zZxD^we)%ymgJ`DP|nl&aaG<^-vhAc3{hA^r>}6~Ei?>bAcD40y?P

delta 627
zcmaJ+yGlbr5S`Urycb<35tAUv=79u@prH8xixl|)1zQ(4Ya=P#t74Vp0|Jp$Hi|zW
zgcMd57FLQsppA`{jg44|GdGEXi0or#XV08-rqvRymgr{0#!0p+Hu~EaSivWlzyaU@
zZ-1729<3Ys$LhB`vUj68P31ddHJzjSzH!!Zq+LjPu(-^B{H-Zy&Kze(TWuVGI4+fa
z?JQThZkcC<(bl+yc@K(3pBq?$Dp6n#e1MPglJ9hLDE`e&5N05(&d!j95?f$jB(J%X
zt&SM3{{1~wDi{)tEg3r(c#u{>#K98AHk~FfjSOQ6H`X>bJH_fj<b<q8Q}g6>=!s`A
zU0kG|#4I9lrv25mN~IEA_zLly2brWF)?G*?4srFnk}P<T&-Cu{$(&jsXc&g6JZX+{
z7dmRCI~;uG-*H6-Vlpju_H@G)BmhXP0lwi2KH@!I<0YPB7uy)(E^c9MkSLU}S6e@<
pN-qXVM9ygzC1cSu8p~J}OvWH7cytv^aLQhl6b#y=^uX2k)fYi_!|eb7

diff --git a/static/index.js b/static/index.js
index 513c65a..075d833 100644
--- a/static/index.js
+++ b/static/index.js
@@ -69,4 +69,24 @@ function getSelectedClan(event) {
     const clanList = document.querySelector(clanListId);
 
     return clanList.options[clanList.selectedIndex];
-}
\ No newline at end of file
+}
+
+function loadClans() {
+    const homeClanList = document.getElementById('home-clan');
+    const oppClanList = document.getElementById('opponent-clan');
+
+    fetch('/clans_html')
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.text();
+        })
+        .then(data => {
+            homeClanList.innerHTML = data;
+            oppClanList.innerHTML = data;
+        })
+        .catch(error => {
+            console.error('There has been a problem with your fetch operation:', error);
+        });
+}
diff --git a/templates/components/header.html b/templates/components/header.html
index ec06537..95d120a 100644
--- a/templates/components/header.html
+++ b/templates/components/header.html
@@ -3,7 +3,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Infantry Skill Calculator</title>
-<script src="https://unpkg.com/htmx.org@1.9.6"></script>
+<script src="https://unpkg.com/htmx.org@1.9.10"></script>
 <script src="../static/index.js"></script>
 <!-- Bootstrap 5 CSS -->
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
diff --git a/templates/components/home_clan_bar.html b/templates/components/home_clan_bar.html
index 7a71974..7324f84 100644
--- a/templates/components/home_clan_bar.html
+++ b/templates/components/home_clan_bar.html
@@ -6,7 +6,7 @@
     </div>
     <div class="col">
         <div class="input-group input-group-lg mb-3">
-            <select class="form-select form-control border-secondary" id="home-clan" hx-get="/players_html" hx-target="#home-player-list" hx-vals='js:{"id": getSelectedClanId("home-clan")}'>
+            <select class="form-select form-control border-secondary" id="home-clan" hx-get="/players_html" hx-target="#home-player-list" hx-vals='js:{"clan_id": getSelectedClanId("home-clan")}'>
                 <option disabled selected value>Auswählen...</option>
                 <!-- Options will be loaded dynamically -->
             </select>
@@ -26,7 +26,6 @@
 <script lang="javascript">
     document.addEventListener('DOMContentLoaded', function() {
         setupClanButtons('home-clan', 'home-delete', 'home-edit');
-        htmx.ajax('GET', '/clans_html', {target: '#home-clan'});
     });
 </script>
 
diff --git a/templates/components/opp_clan_bar.html b/templates/components/opp_clan_bar.html
index ebff250..9bbf378 100644
--- a/templates/components/opp_clan_bar.html
+++ b/templates/components/opp_clan_bar.html
@@ -6,7 +6,7 @@
     </div>
     <div class="col">
         <div class="input-group input-group-lg mb-3">
-            <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")}'>
+            <select class="form-select form-control border-secondary" id="opponent-clan" hx-get="/players_html" hx-target="#opponent-player-list" hx-vals='js:{"clan_id": getSelectedClanId("opponent-clan")}'>
                 <option disabled selected value>Auswählen...</option>
             </select>
             <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>
@@ -25,7 +25,6 @@
 <script lang="javascript">
     document.addEventListener('DOMContentLoaded', function() {
         setupClanButtons('opponent-clan', 'opponent-delete', 'opponent-edit');
-        htmx.ajax('GET', '/clans_html', {target: '#opponent-clan'});
     });
 </script>
 
diff --git a/templates/index.html b/templates/index.html
index 5e7d80a..7be7381 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -40,11 +40,12 @@
 
 <!-- Add Player Modal -->
 {{ template "add_player" . }}
-
+<!-- Delete Player Modal -->
+{{ template "delete_player" . }}
 
 <script lang="javascript">
     document.addEventListener('DOMContentLoaded', function() {
-
+        loadClans();
 
     });
 </script>
diff --git a/templates/modals/add_clan.html b/templates/modals/add_clan.html
index 771e325..000c109 100644
--- a/templates/modals/add_clan.html
+++ b/templates/modals/add_clan.html
@@ -57,26 +57,37 @@
                             "Content-type": "application/json; charset=UTF-8"
                         }
                     })
-                        .then((response) => {
-                            if (response.ok) {
-                                const opt = document.createElement('option');
-                                opt.innerText = "[" + clanTag.value + "]" + " " + clanName.value;
-                                opt.value = response.json()['ID'];
+                        .then(() => {
+                            const lastIndex = otherClanList.selectedIndex;
 
-                                clanList.appendChild(opt.cloneNode(true));
-                                clanList.selectedIndex = clanList.children.length - 1;
-                                clanList.dispatchEvent(new Event('change'));
+                            fetch('/clans_html')
+                                .then(response => {
+                                    if (!response.ok) {
+                                        throw new Error('Network response was not ok');
+                                    }
+                                    return response.text();
+                                })
+                                .then(data => {
+                                    clanList.innerHTML = data;
+                                    otherClanList.innerHTML = data;
 
-                                const lastIndex = otherClanList.selectedIndex;
-                                otherClanList.appendChild(opt);
-                                otherClanList.selectedIndex = lastIndex;
+                                    clanList.selectedIndex = clanList.children.length - 1;
+                                    otherClanList.selectedIndex = lastIndex;
 
-                                addClanModalBS.hide();
-                                clanName.value = "";
-                                clanTag.value = "";
-                                keepUpdated.checked = false;
-                            } else
-                                throw new Error(response.error)
+                                    clanList.dispatchEvent(new Event('change'));
+                                })
+                                .catch(error => {
+                                    console.error('There has been a problem with your fetch operation:', error);
+                                });
+
+
+                            addClanModalBS.hide();
+                            clanName.value = "";
+                            clanTag.value = "";
+                            keepUpdated.checked = false;
+                            })
+                        .catch((error) => {
+                            throw new Error(error)
                         });
                 })
             });
diff --git a/templates/modals/add_player.html b/templates/modals/add_player.html
index f7ce82b..08a87c2 100644
--- a/templates/modals/add_player.html
+++ b/templates/modals/add_player.html
@@ -37,6 +37,8 @@
                 const clanName = addPlayerModal.querySelector('#playerClanName');
                 clanName.value = selectedClan.innerText;
                 const clanId = parseInt(selectedClan.value);
+                const homeClanListIndex = document.getElementById('home-clan').selectedIndex;
+                const oppClanListIndex = document.getElementById('opponent-clan').selectedIndex;
 
                 const submitButton = addPlayerModal.querySelector('button[name="submit"]');
                 submitButton.addEventListener('click', function (e) {
@@ -53,18 +55,12 @@
                             "Content-type": "application/json; charset=UTF-8"
                         }
                     })
-                        .then((response) => response.json())
-                        .then((json) => {
-                            const opt = document.createElement('option');
-                            opt.innerText = playerName.value;
-                            opt.value = json['ID'];
-
-                            playerList.appendChild(opt.cloneNode(true));
-                            playerList.selectedIndex = playerList.children.length - 1;
-                            playerList.dispatchEvent(new Event('change'));
-
-                            if (document.getElementById('home-clan').selectedIndex === document.getElementById('opponent-clan').selectedIndex)
-                                otherPlayerList.appendChild(opt);
+                        .then(() => {
+                            const sameClan = homeClanListIndex === oppClanListIndex;
+                            if (playerList.id === 'home-player-list' || sameClan)
+                                htmx.ajax('GET', '/players_html', {target: '#home-player-list', values: {"clan_id": getSelectedClanId("home-clan")}});
+                            if (playerList.id === 'opponent-player-list' || sameClan)
+                                htmx.ajax('GET', '/players_html', {target: '#opponent-player-list', values: {"clan_id": getSelectedClanId("opponent-clan")}});
 
                             addPlayerModalBS.hide();
                             playerName.value = "";
@@ -72,7 +68,7 @@
                         }).catch((error) => {
                             throw new Error(error)
                         });
-                })
+                }, { once: true });
             });
         }
     });
diff --git a/templates/modals/delete_clan.html b/templates/modals/delete_clan.html
index aed3954..bd0782d 100644
--- a/templates/modals/delete_clan.html
+++ b/templates/modals/delete_clan.html
@@ -45,24 +45,29 @@
                             "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'));
+                        .then(() => {
+                            fetch('/clans_html')
+                                .then(response => {
+                                    if (!response.ok) {
+                                        throw new Error('Network response was not ok');
+                                    }
+                                    return response.text();
+                                })
+                                .then(data => {
+                                    clanList.innerHTML = data;
+                                    otherClanList.innerHTML = data;
 
-                                const lastOtherIndex = otherClanList.selectedIndex;
-                                otherClanList.children.item(clanIndex).remove();
-                                if (lastOtherIndex === clanIndex) {
-                                    otherClanList.selectedIndex = 0;
+                                    clanList.dispatchEvent(new Event('change'));
                                     otherClanList.dispatchEvent(new Event('change'));
-                                }
+                                })
+                                .catch(error => {
+                                    console.error('There has been a problem with your fetch operation:', error);
+                                });
 
-                                deleteClanModalBS.hide();
-                            } else
-                                throw new Error(response.error)
+                            deleteClanModalBS.hide();
+                        })
+                        .catch((error) => {
+                            throw new Error(error)
                         });
                 })
             });
diff --git a/templates/modals/delete_player.html b/templates/modals/delete_player.html
index 5290e09..88eec07 100644
--- a/templates/modals/delete_player.html
+++ b/templates/modals/delete_player.html
@@ -26,44 +26,39 @@
         const deletePlayerModalBS = new bootstrap.Modal('#deletePlayerModal');
         if (deletePlayerModal) {
             deletePlayerModal.addEventListener('show.bs.modal', event => {
-                return;
-                const [clanList, otherClanList] = getClanLists(event);
+                const button = event.relatedTarget;
+                const playerId = parseInt(button.getAttribute('data-bs-id'));
 
-                const selectedClan = clanList.options[clanList.selectedIndex].text;
-                const modalBodyInput = deletePlayerModal.querySelector('#clan');
-                modalBodyInput.innerText = selectedClan;
+                const selectedPlayer = button.closest('.input-group').querySelector('span').innerText;
+                const modalBodyInput = deletePlayerModal.querySelector('#player');
+                modalBodyInput.innerText = selectedPlayer;
+
+                const playerListId = button.closest('ul').parentElement.parentElement.id;
+                const homeClanListIndex = document.getElementById('home-clan').selectedIndex;
+                const oppClanListIndex = document.getElementById('opponent-clan').selectedIndex;
 
                 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, {
+                    fetch("/player/" + playerId, {
                         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'));
+                        .then(() => {
+                            const sameClan = homeClanListIndex === oppClanListIndex;
+                            if (playerListId === 'home-player-list' || sameClan)
+                                htmx.ajax('GET', '/players_html', {target: '#home-player-list', values: {"clan_id": getSelectedClanId("home-clan")}});
+                            if (playerListId === 'opponent-player-list' || sameClan)
+                                htmx.ajax('GET', '/players_html', {target: '#opponent-player-list', values: {"clan_id": getSelectedClanId("opponent-clan")}});
 
-                                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)
+                            deletePlayerModalBS.hide();
+                        })
+                        .catch((error) => {
+                            throw new Error(error)
                         });
                 })
             });
diff --git a/templates/modals/edit_clan.html b/templates/modals/edit_clan.html
index 5539d37..e09b920 100644
--- a/templates/modals/edit_clan.html
+++ b/templates/modals/edit_clan.html
@@ -81,18 +81,35 @@
                             "Content-type": "application/json; charset=UTF-8"
                         }
                     })
-                        .then((response) => {
-                            if (response.ok) {
-                                const newName = "[" + clanTag.value + "]" + " " + clanName.value;
-                                selectedClanItem.innerText = newName;
-                                otherSelClanItem.innerText = newName;
+                        .then(() => {
+                            const lastIndex = clanList.selectedIndex;
+                            const otherLastIndex = otherClanList.selectedIndex;
 
-                                editClanModalBS.hide();
-                                clanName.value = "";
-                                clanTag.value = "";
-                                keepUpdated.checked = false;
-                            } else
-                                throw new Error(response.error)
+                            fetch('/clans_html')
+                                .then(response => {
+                                    if (!response.ok) {
+                                        throw new Error('Network response was not ok');
+                                    }
+                                    return response.text();
+                                })
+                                .then(data => {
+                                    clanList.innerHTML = data;
+                                    otherClanList.innerHTML = data;
+
+                                    clanList.selectedIndex = lastIndex;
+                                    otherClanList.selectedIndex = otherLastIndex;
+                                })
+                                .catch(error => {
+                                    console.error('There has been a problem with your fetch operation:', error);
+                                });
+
+                            editClanModalBS.hide();
+                            clanName.value = "";
+                            clanTag.value = "";
+                            keepUpdated.checked = false;
+                        })
+                        .catch((error) => {
+                            throw new Error(error)
                         });
                 })
             });
diff --git a/templates/player_list_item.html b/templates/player_list_item.html
index 3ba6d84..b06d9b3 100644
--- a/templates/player_list_item.html
+++ b/templates/player_list_item.html
@@ -8,7 +8,7 @@
         <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">
+        <li><a class="dropdown-item text-danger fs-5" href="#" data-bs-toggle="modal" data-bs-id="%d" data-bs-target="#deletePlayerModal">
                 <i class="bi bi-person-dash fs-4 me-2"></i>Löschen
         </a></li>
     </ul>