chore: Add player search functionality and styling updates

fedecarboni7 · Jul 27, 2024 · 3655ca6 · 3655ca6
1 parent f453fef
commit 3655ca6
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 2 deletions.
diff --git a/TODO.md b/TODO.md
@@ -1,6 +1,5 @@
 ## Prioridades Inmediatas
 
-- **Agregar un buscador de jugadores**
 - **Permitir agrupar jugadores por grupos de amigos y filtrar por grupo en el buscador**
 - **Implementar validación de entrada de datos para prevenir inyección SQL**
 

diff --git a/static/css/style.css b/static/css/style.css
@@ -321,4 +321,30 @@ th {
 
 .share-button {
     margin-left: 20px;
+}
+
+.search-container {
+    position: relative;
+    width: 100%;
+    max-width: 400px;
+    margin: 0 auto 20px; /* Centra el buscador y añade un margen inferior */
+}
+
+#searchInput {
+    width: 100%; /* Ocupa todo el ancho del contenedor */
+    padding: 10px 40px 10px 20px; /* Añade espacio para el icono a la derecha */
+    border-radius: 20px;
+    border: 1px solid #ccc;
+    font-size: 16px;
+    outline: none;
+    box-sizing: border-box; /* Asegura que el padding esté incluido en el ancho */
+}
+
+.search-icon {
+    position: absolute;
+    top: 50%;
+    right: 15px; /* Ajusta el espacio del icono desde el borde derecho */
+    transform: translateY(-50%);
+    color: #999;
+    pointer-events: none; /* Evita que el icono interfiera con el clic en el campo de entrada */
 }
diff --git a/static/js/script.js b/static/js/script.js
@@ -336,3 +336,17 @@ function compartirEquipos(button) {
           });
     }
 }
+
+function filterPlayers() {
+    const searchInput = document.getElementById('searchInput').value.toLowerCase();
+    const players = document.querySelectorAll('.player-entry');
+
+    players.forEach(player => {
+        const playerName = player.querySelector('input[name="names"]').value.toLowerCase();
+        if (playerName.includes(searchInput)) {
+            player.style.display = '';
+        } else {
+            player.style.display = 'none';
+        }
+    });
+}
diff --git a/templates/index.html b/templates/index.html
@@ -14,6 +14,12 @@
 </head>
 <body>
     <h1>Armar Equipos</h1>
+
+    <div class="search-container">
+        <input type="text" id="searchInput" placeholder="Buscar jugador..." onkeyup="filterPlayers()">
+        <i class="fas fa-search search-icon"></i>
+    </div>
+
     <form action="/submit" method="post" onsubmit="return validateForm(event)">
         <div id="players-container" class="player-container">
             {% for player in players %}
@@ -73,8 +79,8 @@ <h1>Armar Equipos</h1>
             {% endfor %}
         </div>
         <button type="button" onclick="addPlayer()">Agregar jugador</button>
-        <button type="button" id="toggle-select-button" onclick="toggleSelectPlayers()">Seleccionar todos los jugadores</button>
         <button type="submit" id="submitBtn">Calcular</button>
+        <button type="button" id="toggle-select-button" onclick="toggleSelectPlayers()">Seleccionar todos los jugadores</button>
     </form>
     <button class="reset-button" type="button" onclick="reset()">Borrar a todos</button>
     <br>