From 2139b8317480a8e8f672d88dcbc4db394b3dcd96 Mon Sep 17 00:00:00 2001
From: MaxJa4 <74194322+MaxJa4@users.noreply.github.com>
Date: Tue, 23 Jan 2024 09:33:56 +0100
Subject: [PATCH] Enable Enter-Press for submit in modals.

---
 templates/modals/add_clan.html      |  6 ++++++
 templates/modals/add_player.html    |  8 +++++++-
 templates/modals/delete_clan.html   | 12 +++++++++---
 templates/modals/delete_player.html | 13 ++++++++++---
 templates/modals/edit_clan.html     |  6 ++++++
 templates/modals/edit_player.html   |  6 ++++++
 templates/modals/settings.html      |  6 ++++++
 7 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/templates/modals/add_clan.html b/templates/modals/add_clan.html
index c0e8a20..486fa2a 100644
--- a/templates/modals/add_clan.html
+++ b/templates/modals/add_clan.html
@@ -130,6 +130,12 @@
                 submitButton.addEventListener('click', submitClanHandler);
             });
 
+            addClanModal.addEventListener('keypress', event => {
+                if (event.key === 'Enter') {
+                    submitButton.click();
+                }
+            });
+
             addClanModal.addEventListener('hidden.bs.modal', _ => {
                 submitButton.removeEventListener('click', submitClanHandler);
 
diff --git a/templates/modals/add_player.html b/templates/modals/add_player.html
index 47a6f1d..28d96be 100644
--- a/templates/modals/add_player.html
+++ b/templates/modals/add_player.html
@@ -41,7 +41,7 @@
         const homeClanList = document.getElementById('home-clan');
         const oppClanList = document.getElementById('opponent-clan');
 
-        const spinner = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>Lade...'
+        const spinner = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>Lade Spielerdaten...'
 
         function validateInput() {
             if (playerName.value.length < 1) {
@@ -110,6 +110,12 @@
                 clanName.value = selectedClan.innerText;
             });
 
+            addPlayerModal.addEventListener('keypress', event => {
+                if (event.key === 'Enter') {
+                    submitButton.click();
+                }
+            });
+
             addPlayerModal.addEventListener('hidden.bs.modal', _ => {
                 submitButton.removeEventListener('click', submitPlayerHandler);
 
diff --git a/templates/modals/delete_clan.html b/templates/modals/delete_clan.html
index 9c6b2b2..8f46335 100644
--- a/templates/modals/delete_clan.html
+++ b/templates/modals/delete_clan.html
@@ -1,13 +1,13 @@
 {{ define "delete_clan" }}
 
-<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="deleteClanModal" tabindex="-1">
+<div class="modal modal-lg fade" data-bs-backdrop="static" data-bs-keyboard="false" id="deleteClanModal" 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="deleteClanModalLabel">Clan löschen</h1>
                 <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>
-            <div class="modal-body fs-5">
+            <div class="modal-body fs-5 text-center">
                 Möchtest du den Clan <span class="text-warning fw-bold" id="clan"></span> wirklich löschen?
                 <br><br>
                 Die Aktion kann nicht rückgängig gemacht werden.
@@ -24,6 +24,7 @@
     document.addEventListener('DOMContentLoaded', function() {
         const deleteClanModal = document.getElementById('deleteClanModal')
         const deleteClanModalBS = new bootstrap.Modal('#deleteClanModal');
+        const submitButton = deleteClanModal.querySelector('button[name="submit"]');
 
         if (deleteClanModal) {
             deleteClanModal.addEventListener('show.bs.modal', event => {
@@ -33,7 +34,6 @@
                 const modalBodyInput = deleteClanModal.querySelector('#clan');
                 modalBodyInput.innerText = selectedClan;
 
-                const submitButton = deleteClanModal.querySelector('button[name="submit"]');
                 submitButton.addEventListener('click', function () {
                     const clanId = parseInt(clanList.value);
 
@@ -69,6 +69,12 @@
                         });
                 }, { once: true });
             });
+
+            deleteClanModal.addEventListener('keypress', event => {
+                if (event.key === 'Enter') {
+                    submitButton.click();
+                }
+            });
         }
     });
 </script>
diff --git a/templates/modals/delete_player.html b/templates/modals/delete_player.html
index db52d5b..71e0efa 100644
--- a/templates/modals/delete_player.html
+++ b/templates/modals/delete_player.html
@@ -1,13 +1,13 @@
 {{ define "delete_player" }}
 
-<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="deletePlayerModal" tabindex="-1">
+<div class="modal modal-lg fade" data-bs-backdrop="static" data-bs-keyboard="false" 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">
+            <div class="modal-body fs-5 text-center">
                 Möchtest du den Spieler <span class="text-warning fw-bold" id="player"></span> wirklich löschen?
                 <br><br>
                 Die Aktion kann nicht rückgängig gemacht werden.
@@ -24,6 +24,8 @@
     document.addEventListener('DOMContentLoaded', function() {
         const deletePlayerModal = document.getElementById('deletePlayerModal')
         const deletePlayerModalBS = new bootstrap.Modal('#deletePlayerModal');
+        const submitButton = deletePlayerModal.querySelector('button[name="submit"]');
+
         if (deletePlayerModal) {
             deletePlayerModal.addEventListener('show.bs.modal', event => {
                 const button = event.relatedTarget;
@@ -37,7 +39,6 @@
                 const homeClanList = document.getElementById('home-clan');
                 const oppClanList = document.getElementById('opponent-clan');
 
-                const submitButton = deletePlayerModal.querySelector('button[name="submit"]');
                 submitButton.addEventListener('click', function () {
                     fetch("/player/" + playerId, {
                         method: "DELETE",
@@ -59,6 +60,12 @@
                         });
                 }, { once: true });
             });
+
+            deletePlayerModal.addEventListener('keypress', event => {
+                if (event.key === 'Enter') {
+                    submitButton.click();
+                }
+            });
         }
     });
 </script>
diff --git a/templates/modals/edit_clan.html b/templates/modals/edit_clan.html
index 2055897..ea01d5c 100644
--- a/templates/modals/edit_clan.html
+++ b/templates/modals/edit_clan.html
@@ -149,6 +149,12 @@
                     });
             });
 
+            editClanModal.addEventListener('keypress', event => {
+                if (event.key === 'Enter') {
+                    submitButton.click();
+                }
+            });
+
             editClanModal.addEventListener('hidden.bs.modal', _ => {
                 submitButton.removeEventListener('click', submitClanHandler);
 
diff --git a/templates/modals/edit_player.html b/templates/modals/edit_player.html
index 7a9f8ab..e3a0aa5 100644
--- a/templates/modals/edit_player.html
+++ b/templates/modals/edit_player.html
@@ -95,6 +95,12 @@
                 playerName.value = event.relatedTarget.closest('.input-group').querySelector('span').innerText;
             });
 
+            editPlayerModal.addEventListener('keypress', event => {
+                if (event.key === 'Enter') {
+                    submitButton.click();
+                }
+            });
+
             editPlayerModal.addEventListener('hide.bs.modal', _ => {
                 submitButton.removeEventListener('click', submitPlayerHandler);
 
diff --git a/templates/modals/settings.html b/templates/modals/settings.html
index c45360f..6da1ecf 100644
--- a/templates/modals/settings.html
+++ b/templates/modals/settings.html
@@ -111,6 +111,12 @@
                         alert('Fehler beim Laden der Einstellungen: ' + error.message);
                     });
             });
+
+            settingsModal.addEventListener('keypress', event => {
+                if (event.key === 'Enter') {
+                    submitButton.click();
+                }
+            });
         }
     });
 </script>