SearchBar

pastore99 · Dec 30, 2023 · 271e0db · 271e0db
1 parent 1864c2d
commit 271e0db
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 2 deletions.
diff --git a/src/main/java/controller/homeTherapistServlet.java b/src/main/java/controller/homeTherapistServlet.java
@@ -39,6 +39,7 @@ protected void doGet(HttpServletRequest request, HttpServletResponse response) t
         session.setAttribute("NameSurnameLogged",InfoLogged.getFirstname()+" "+InfoLogged.getLastname());
 
         response.sendRedirect("JSP/homeTherapist.jsp");
+        //response.sendRedirect("JSP/testTable.jsp");
     }
 
 

diff --git a/src/main/webapp/CSS/homeTherapist.css b/src/main/webapp/CSS/homeTherapist.css
@@ -1,12 +1,24 @@
+/* Stile per la barra di ricerca */
+#searchInput {
+  padding: 8px;
+  border: 0px;
+  position: absolute;
+  width: 70%;
+  top: 10px;
+  left: 50px;
+  outline: none;
+}
+
+
 .table-container {
   max-height: 350px; /* Altezza massima della tabella */
   overflow-y: auto; /* Rendi scorrevole solo l'asse Y quando necessario */
 }
 
 table {
   width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0 35px; /* Imposta uno spazio vuoto tra le righe */
+  border-collapse: separate;
+  border-spacing: 0 10px; /* Imposta uno spazio vuoto tra le righe */
 }
 
 tr {

diff --git a/src/main/webapp/JS/searchBar.js b/src/main/webapp/JS/searchBar.js
@@ -0,0 +1,25 @@
+//search bar for name and surname
+$(document).ready(function () {
+    var tableContainer = document.getElementById('tableContainer');
+
+    // Aggiungi un gestore di eventi all'input di ricerca
+    $('#searchInput').on('input', function () {
+        var searchText = $(this).val().toLowerCase();
+
+        // Nascondi tutte le righe
+        tableContainer.getElementsByTagName('tbody')[0].style.marginTop = '0';
+
+        // Filtra e mostra solo le righe che corrispondono alla ricerca
+        $('tbody tr').each(function () {
+            var name = $(this).find('td:eq(1)').text().toLowerCase();
+            var lastName = $(this).find('td:eq(2)').text().toLowerCase();
+
+            if (name.includes(searchText) || lastName.includes(searchText)) {
+                $(this).show();
+            } else {
+                $(this).hide();
+            }
+        });
+    });
+
+});
diff --git a/src/main/webapp/JSP/homeTherapist.jsp b/src/main/webapp/JSP/homeTherapist.jsp
@@ -5,6 +5,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="../CSS/homeTherapistGuide.css" />
     <link rel="stylesheet" href="../CSS/homeTherapist.css" />
@@ -16,6 +17,7 @@
         <div class="overlap">
             <div class="button-only-text"><button class="button">Invita paziente</button></div>
         </div>
+
         <div class="pop-up">
             <div class="text-wrapper-2">PAZIENTI</div>
             <div class="overlap-group">
@@ -113,10 +115,12 @@
             <img class="ellipse-2" src="../images/homeTherapist/ellipse-94.svg" />
         </div>
         <div class="material-symbols-wrapper">
+            <input type="text" id="searchInput" placeholder="Cerca per nome o cognome">
             <img class="material-symbols" src="../images/homeTherapist/material-symbols-search-rounded.svg" />
         </div>
         <div class="img-wrapper"><img class="material-symbols-2" src="../images/homeTherapist/material-symbols-sort.svg" /></div>
     </div>
 </div>
+<script src="../JS/searchBar.js"></script>
 </body>
 </html>
diff --git a/src/main/webapp/JSP/testTable.jsp b/src/main/webapp/JSP/testTable.jsp
@@ -4,6 +4,8 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
+
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>
@@ -44,6 +46,7 @@
 </head>
 <body>
 
+<input type="text" id="searchInput" placeholder="Cerca per nome o cognome">
 
 <div class="table-container" id="tableContainer">
     <table>
@@ -86,6 +89,38 @@
         tableContainer.getElementsByTagName('tbody')[0].style.marginTop = rowsToHide * 35 + 'px';
     });
 </script>
+<script>
+    $(document).ready(function () {
+        var tableContainer = document.getElementById('tableContainer');
+
+        // Aggiungi un gestore di eventi all'input di ricerca
+        $('#searchInput').on('input', function () {
+            var searchText = $(this).val().toLowerCase();
+
+            // Nascondi tutte le righe
+            tableContainer.getElementsByTagName('tbody')[0].style.marginTop = '0';
+
+            // Filtra e mostra solo le righe che corrispondono alla ricerca
+            $('tbody tr').each(function () {
+                var name = $(this).find('td:eq(1)').text().toLowerCase();
+                var lastName = $(this).find('td:eq(2)').text().toLowerCase();
+
+                if (name.includes(searchText) || lastName.includes(searchText)) {
+                    $(this).show();
+                } else {
+                    $(this).hide();
+                }
+            });
+        });
+
+        tableContainer.addEventListener('scroll', function () {
+            // Calcola il numero di righe da nascondere nel corpo
+            var rowsToHide = Math.floor(tableContainer.scrollTop / 35); // 35px è l'altezza approssimativa di una riga
+            // Imposta il margine superiore per nascondere le righe nel corpo
+            tableContainer.getElementsByTagName('tbody')[0].style.marginTop = rowsToHide * 35 + 'px';
+        });
+    });
+</script>
 
 </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up @@
             session.setAttribute("NameSurnameLogged",InfoLogged.getFirstname()+" "+InfoLogged.getLastname());
             response.sendRedirect("JSP/homeTherapist.jsp");
+            //response.sendRedirect("JSP/testTable.jsp");
         }
@@ Expand Down @@