Remade homepage Therapist and ViewPatient

Old file still kept, new files:
-homepageTherapist, will replace homeTherapist
-viewPatinetInfo, will replace viewPatient

src/main/webapp/CSS/homepageTherapist.css

@@ -0,0 +1,178 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+body{
+    height: 100vh;
+    width: 100%;
+    background: #7edcd4;
+}
+
+#container{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+#navbar{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    text-align: center;
+    background: white;
+    width: 10%;
+    height: 70%;
+    border-radius: 50000px;
+    margin-left: 10%;
+}
+
+#navbar > div{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    width: 100%;
+}
+
+#navIcons{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+#navIcons > div{
+    margin-top: 10%;
+    margin-bottom: 10%;
+    width: 100%;
+}
+
+#navIcons > div > img{
+    width: 25%;
+}
+
+#logoIcon{
+    width: 70%;
+    margin-top: 20%;
+}
+
+#docInfo{
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 40%;
+}
+
+#docIcon{
+    width: 40%;
+    margin-bottom: 2%;
+}
+
+#rightHalf{
+    margin-left: 10%;
+    margin-right: 10%;
+    width: 70%;
+    height: 90%;
+}
+
+#bottomHalf{
+    margin-top: 5%;
+    background: white;
+    width: 100%;
+    height: 75%;
+    border-radius: 24px;
+}
+
+#topHalf{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
+#topHalf div{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
+.roundedWhite{
+    background: white;
+    border-radius: 99999px;
+    padding: 2% 5% 2% 5%;
+
+}
+
+input{
+    border: none;
+}
+
+#textInput{
+  width: 100%
+}
+
+#searchInput{
+    width: 100%;
+}
+
+#tableContainer{
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    max-height: 100%;
+    overflow: hidden;
+}
+
+#tableContainer table{
+    width: 80%
+}
+
+#tableContainer table td{
+    align-items: center;
+    text-align: center;
+}
+
+#content{
+    height: 100%;
+}
+
+#searchDiv{
+    width: 50%;
+}
+
+
+.table-header th {
+    background-color: #f2f2f2;
+}
+
+tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+
+tr:nth-child(odd) {
+    background-color: #ffffff;
+}
+
+
+tr.hoverable-row:hover {
+    background-color: #e6f7ff;
+}
+
+.tdButton{
+    cursor: pointer;
+    color: deepskyblue;
+}
+
+#scrollableDiv {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    width: 100%;
+    max-height: 100%;
+    overflow-y: auto;
+}

src/main/webapp/CSS/invitePatient.css

@@ -32,13 +32,14 @@ a {
 }
 
 #InvitePage {
-    width: 154px;
+    width: 35vh;
+    height: 40vh;
     background-color: #fff;
-    padding: 80px;
+    padding: 1%;
     border-radius: 10px;
     text-align: center;
     position: fixed;
-    top: 43%;
+    top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 1001;
@@ -55,29 +56,29 @@ a {
 }
 
 #InviteTitle{
-    margin-top: -16%;
-    font-size: 20px;;
+    margin-top: 5%;
+    font-size: 20px;
 }
 
 
 #InviteForm{
     margin-top: 5%;
-    width: 70%;
+    width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
 }
 
 .inputDiv{
-    width: 217%;
+    width: 80%;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     background-color: #f9fafb;
     border: 2px solid #e8eaed;
     border-radius: 500px;
-    margin-bottom: -1%;
+    margin-bottom: 2%;
 }
 
 .icon{
@@ -116,7 +117,7 @@ a {
 
 #InviteButton{
     color: white;
-    width: 100%;
+    width: 65%;
     background-color: #199a8e;
     border: none;
     padding: 5% 10%;

src/main/webapp/CSS/viewPatientInfo.css

@@ -0,0 +1,49 @@
+#patientInfo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 20%;
+}
+
+#patientInfo > table {
+    width: 90%;
+    max-width: 100%;
+}
+
+#buttonDivs {
+    margin-top: 5%;
+    margin-bottom: 5%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
+#moreInfo{
+    height: 50%;
+}
+
+#buttonDivs div{
+    flex: 1;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    align-content: center;
+    justify-content: space-around;
+}
+
+#buttonDivs button{
+    background: #199a8e;
+    border: none;
+    border-radius: 25px;
+    width: 50%;
+    padding: 3% 4%;
+    color: white;
+    cursor: pointer;
+}
+
+#chartDiv{
+    position: relative;
+    margin: auto;
+    height: 90%;
+    width: 90%;
+}

src/main/webapp/JS/homepageTherapist.js

@@ -0,0 +1,44 @@
+$(document).ready(function () {
+    $("#home").click(() => redirect("homepageTherapist.jsp"));
+    $("#message").click(() => redirect("messageCenter.jsp"));
+    $("#agenda").click(() => redirect("schedule.jsp"));
+    $("#profile").click(() => redirect("userArea.jsp"));
+
+
+    let tableContainer = $("#tableContainer");
+
+    // Aggiungi un gestore di eventi all'input di ricerca
+    $('#searchInput').on('input', function () {
+        let searchText = $(this).val().toLowerCase();
+
+        // Nascondi tutte le righe
+        tableContainer.find('tbody').css('marginTop', '0');  // Using jQuery methods
+
+        // Filtra e mostra solo le righe che corrispondono alla ricerca
+        $('tbody tr').each(function () {
+            let name = $(this).find('td:eq(1)').text().toLowerCase();
+            let lastName = $(this).find('td:eq(2)').text().toLowerCase();
+
+            if (name.includes(searchText) || lastName.includes(searchText)) {
+                $(this).show();
+            } else {
+                $(this).hide();
+            }
+        });
+    });
+});
+
+
+
+function openInvitePopup() {
+    $("#invitePopup").show();
+}
+
+function viewPatient(i){
+    window.location.href = "viewPatientInfo.jsp?patientID="+i;
+}
+
+
+function redirect(where){
+    window.location.href = where;
+}