το κείμενο που θα περιέχει! ΠΡΟΣΘΗΚΗ ΥΠΗΡΕΣΙΑΣ ΣΕΛΙΔΑ SERVICES

ΕΜΦΆΝΙΣΗ ΕΙΚΟΝΙΔΙΟΥ

Μαιευτική Φροντίδα

Προσφέρουμε εξατομικευμένη φροντίδα από τις πρώτες στιγμές της εγκυμοσύνης έως και τη γέννηση, εξασφαλίζοντας την ασφάλεια και την άνεση της μητέρας.

Διαβάστε Περισσότερα (Πρόκειται για έναν σύνδεσμο που λειτουργεί ως κουμπί.)

ΕΙΚΟΝΙΔΙΑ ΑΠΟ Font Awesome ΣΕΛΙΔΑ TEAM div class="row justify-content-center align-items-center g-4 bg-light-gray1">

Χρησιμοποιείται για την εμφάνιση ενός εικονιδίου.

Ιατρικό Προσωπικό

KEIMENO

8

(data-toggle="counter-up": Αυτή η παράμετρος χρησιμοποιείται με τη βιβλιοθήκη CounterUp)

ΤΟ ΚΑΡΟΥΖΕΛ

ΤΑ ΣΤΟΙΧΕΙΑ ΤΩΝ ΚΑΡΤΕΛΩΝ

Dr. John Smith

Cardiology Specialist

Ειδικός στην καρδιολογία, παρέχει φροντίδα υψηλής ποιότητας για καρδιολογικά περιστατικά.

ΣΕΛΙΔΑ ραντεβου

: Η φόρμα για την υποβολή των δεδομένων. πεδία για εισαγωγη ΠΡΟΣΘΗΚΗ ΕΠΙΛΟΓΩΝ ΓΙΑΤΡΩΝ! ΠΕΔΙΑ ΕΠΙΛΟΓΗΣ ΗΜΕΡΟΜΗΝΙΑΣ ΠΕΔΙΟ ΕΠΙΛΟΓΗΣ ΩΡΑΣ ΠΕΡΙΓΡΑΦΗ ΠΡΟΒΛΗΜΑΤΟΣ ΚΟΥΜΠΙ! Η φόρμα είναι οργανωμένη με Bootstrap και χρησιμοποιεί τις κλάσεις του για responsive συμπεριφορά. ΤΡΟΠΟΠΟΙΗΣΗ ΡΑΝΤΕΒΟΥ! editAppointment(button) Αυτή η συνάρτηση χρησιμοποιείται για να επεξεργαστεί τα δεδομένα ενός συγκεκριμένου ραντεβού (όπως το όνομα, την ημερομηνία και την ώρα). const name = row.cells[1].textContent;: Αυτή η γραμμή παίρνει το όνομα του ραντεβού από το δεύτερο κελί της γραμμής (το cells[1] αναφέρεται στο δεύτερο κελί, καθώς το μέτρημα ξεκινά από το 0). Η μέθοδος textContent χρησιμοποιείται για να πάρει το κείμενο που υπάρχει μέσα στο κελί. const date = row.cells[2].textContent; και const time = row.cells[3].textContent;: Αυτές οι γραμμές παίρνουν αντίστοιχα την ημερομηνία και την ώρα του ραντεβού από τα κελιά της γραμμής. const newName = prompt('Τροποποιήστε το όνομα:', name);: Η συνάρτηση prompt() εμφανίζει ένα παράθυρο προτροπής στον χρήστη, με προεπιλεγμένη τιμή το όνομα του ραντεβού. Ο χρήστης μπορεί να αλλάξει το όνομα ή να το αφήσει όπως είναι. const newDate = prompt('Τροποποιήστε την ημερομηνία (π.χ. 25/01/2025):', date);: Παρόμοια, το prompt() ζητά από τον χρήστη να εισάγει μια νέα ημερομηνία, με προεπιλεγμένη τιμή την τρέχουσα ημερομηνία του ραντεβού. const newTime = prompt('Τροποποιήστε την ώρα (π.χ. 10:00 π.μ.):', time);: Ακριβώς το ίδιο και για την ώρα του ραντεβού. if (newName && newDate && newTime) { ... }: Αυτή η συνθήκη ελέγχει αν ο χρήστης έχει εισάγει όλα τα πεδία (όνομα, ημερομηνία, ώρα). Αν όλα τα πεδία είναι γεμάτα, προχωράμε στην ενημέρωση της γραμμής του πίνακα. row.cells[1].textContent = newName;, row.cells[2].textContent = newDate;, row.cells[3].textContent = newTime;: Αυτές οι γραμμές αντικαθιστούν τα παλιά δεδομένα στα κελιά της γραμμής με τις νέες τιμές που εισήγαγε ο χρήστης. alert('Το ραντεβού τροποποιήθηκε επιτυχώς!');: Εμφανίζεται ένα μήνυμα επιτυχίας που ενημερώνει τον χρήστη ότι το ραντεβού τροποποιήθηκε επιτυχώς. else { alert('Η τροποποίηση ακυρώθηκε ή δεν συμπληρώθηκαν όλα τα πεδία.'); }: Αν κάποια από τις τιμές είναι κενή, εμφανίζεται μήνυμα που λέει ότι η τροποποίηση ακυρώθηκε ή δεν συμπληρώθηκαν όλα τα πεδία. ξήγηση Κώδικα: 1. function filterTable() Η συνάρτηση filterTable() είναι υπεύθυνη για το φιλτράρισμα των δεδομένων στον πίνακα με τα ραντεβού, βάση κάποιων παραμέτρων (π.χ., όνομα ασθενούς και όνομα γιατρού). 2. const searchValue = document.getElementById("searchPatient").value.toLowerCase(); Η πρώτη εντολή παίρνει την τιμή που έχει εισάγει ο χρήστης στο πεδίο αναζήτησης με το id="searchPatient". Δηλαδή, το πεδίο αυτό πιθανώς είναι ένα input box όπου ο χρήστης μπορεί να πληκτρολογήσει το όνομα του ασθενούς. Η μέθοδος toLowerCase() μετατρέπει τη τιμή σε μικρούς χαρακτήρες (lowercase) για να αποφευχθούν τα προβλήματα μεγάλων και μικρών γραμμάτων κατά τη σύγκριση. 3. const doctorValue = document.getElementById("filterDoctor").value; Η δεύτερη εντολή παίρνει την τιμή που έχει επιλέξει ο χρήστης από το πεδίο επιλογής γιατρού με το id="filterDoctor". Το filterDoctor είναι πιθανώς ένα drop-down menu (select), από το οποίο ο χρήστης μπορεί να επιλέξει τον γιατρό ή να αφήσει κενό για να μην φιλτραριστεί με βάση τον γιατρό. 4. const rows = document.querySelectorAll("#appointmentTableBody tr"); Αυτή η εντολή παίρνει όλα τα στοιχεία (γραμμές του πίνακα) μέσα στο σώμα του πίνακα, το οποίο έχει το id="appointmentTableBody". Χρησιμοποιώντας τη μέθοδο querySelectorAll(), μπορούμε να επιλέξουμε όλες τις γραμμές του πίνακα, ώστε να τις ελέγξουμε μεμονωμένα και να εφαρμόσουμε το φίλτρο σε κάθε μία. 5. rows.forEach(row => { ... }); Η μέθοδος forEach() περνάει μέσα από όλες τις γραμμές του πίνακα και εκτελεί τον παρακάτω κώδικα για κάθε μία από αυτές. 6. const patientName = row.cells[1].textContent.toLowerCase(); Για κάθε γραμμή, η εντολή αυτή αποθηκεύει το όνομα του ασθενούς που βρίσκεται στο δεύτερο κελί (cells[1]) της γραμμής. Η μέθοδος textContent παίρνει το κείμενο του κελιού, και η toLowerCase() το μετατρέπει σε μικρούς χαρακτήρες. 7. const doctorName = row.cells[4].textContent; Εδώ αποθηκεύουμε το όνομα του γιατρού, το οποίο βρίσκεται στο πέμπτο κελί (cells[4]) της γραμμής. 8. if ((patientName.includes(searchValue) || searchValue === "") && (doctorName === doctorValue || doctorValue === "")) { ... } Αυτό το if ελέγχει αν η τρέχουσα γραμμή του πίνακα πληροί τα κριτήρια του φίλτρου: Για το όνομα του ασθενούς: Αν το όνομα του ασθενούς περιέχει την τιμή της αναζήτησης (patientName.includes(searchValue)) ή αν το πεδίο αναζήτησης είναι κενό (searchValue === ""). Για το όνομα του γιατρού: Αν το όνομα του γιατρού είναι ίσο με την τιμή του επιλεγμένου γιατρού (doctorName === doctorValue) ή αν το πεδίο του γιατρού είναι κενό (doctorValue === ""). Αν και οι δύο αυτές συνθήκες είναι αληθείς, τότε η γραμμή θα παραμείνει ορατή. 9. row.style.display = ""; Αν οι συνθήκες του if είναι αληθείς (δηλαδή αν η γραμμή πληροί τα κριτήρια του φίλτρου), τότε η γραμμή δεν κρύβεται και παραμένει ορατή με τη μέθοδο row.style.display = "". 10. else { row.style.display = "none"; } Αν οι συνθήκες του if δεν είναι αληθείς (δηλαδή αν η γραμμή δεν πληροί τα κριτήρια του φίλτρου), τότε η γραμμή κρύβεται με την εντολή row.style.display = "none";. ΑΛΛΑΓΕΣ ΧΡΩΜΑΤΩ ΣΤΟ ΑΡΧΕΙΟ CSS body { background-color: #f0f0f0; /* Εδώ μπορείς να βάλεις το χρώμα που θέλεις */ } Ή ΜΕΣΑ ΣΕ