-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathViewAppoinmets.html
146 lines (132 loc) · 5.96 KB
/
ViewAppoinmets.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>View Appointments</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-custom-blue">
<h2 class="text-center">View Appointments</h2>
<div class="container p-3">
<!-- Doctors Section -->
<div class="container shaded-section shadow-sm p-3">
<div class="row text-center text-custom-blue">
<!-- Profile 1 -->
<div class="col-md-3 mb-4">
<div class="profile-card1">
<img src="Images/D1.jpg" alt="Dr Lahiru Rajakaruna">
<div class="card-body">
<h5 class="card-title">Dr Lahiru Rajakaruna</h5>
<button class="btn btn-primary view-appointments-btn" data-doctor="1">View Appointments</button>
</div>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="profile-card1">
<img src="Images/D2.jpg" alt="Dr Lahiru Rajakaruna">
<div class="card-body">
<h5 class="card-title">Dr Deepali Nanayakkara</h5>
<button class="btn btn-primary view-appointments-btn" data-doctor="2">View Appointments</button>
</div>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="profile-card1">
<img src="Images/D3.jpg" alt="Dr Lahiru Rajakaruna">
<div class="card-body">
<h5 class="card-title">Dr Malinda Senadhirathna</h5>
<button class="btn btn-primary view-appointments-btn" data-doctor="3">View Appointments</button>
</div>
</div>
</div>
<div class="col-md-3 mb-4">
<div class="profile-card1">
<img src="Images/D4.jpg" alt="Dr Lahiru Rajakaruna">
<div class="card-body">
<h5 class="card-title">Dr Dinali Gayasha</h5>
<button class="btn btn-primary view-appointments-btn" data-doctor="4">View Appointments</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Appointments Table -->
<div class="p-5">
<div class="mt-5">
<h3 class="text-center">Appointments</h3>
<div class="row mb-3">
<div class="col-md-1 col-12" style="margin-right: 10px;">
<label for="filter-date" class="form-label">Filter by Date:</label>
<input type="date" id="filter-date" class="form-control" style="width: 150px;">
</div>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Patient ID</th>
<th>Patient Name</th>
<th>Service</th>
<th>Availability</th>
</tr>
</thead>
<tbody id="appointment-table-body">
<!-- Dynamic rows will be added here -->
</tbody>
</table>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Handle the "View Appointments" button click event
const viewAppointmentButtons = document.querySelectorAll('.view-appointments-btn');
viewAppointmentButtons.forEach(button => {
button.addEventListener('click', function () {
const doctorId = button.getAttribute('data-doctor');
displayAppointments(doctorId); // Call the function to display appointments based on the doctor
});
});
// Filter and display appointments based on selected doctor and date
function displayAppointments(doctorId) {
const filterDate = document.getElementById('filter-date').value;
const tableBody = document.getElementById('appointment-table-body');
tableBody.innerHTML = '';
// Dummy Data for Appointments
const appointments = [
{ id: 'P001', name: 'John Doe', service: 'Teeth Cleaning', date: '2025-01-10', doctor: 1 },
{ id: 'P002', name: 'Jane Smith', service: 'Cavity Filling', date: '2025-01-10', doctor: 1 },
{ id: 'P003', name: 'Alice Brown', service: 'Whitening', date: '2025-01-10', doctor: 2 },
{ id: 'P004', name: 'Tom Lee', service: 'Root Canal', date: '2025-01-10', doctor: 1 },
{ id: 'P005', name: 'Emma Green', service: 'Braces Checkup', date: '2025-01-10', doctor: 2 },
];
// Filter Appointments by Date and Doctor
const filteredAppointments = appointments.filter(app => app.date === filterDate && app.doctor == doctorId);
// Display Appointment Count
const maxAppointments = 10; // Maximum appointments limit
const appointmentCount = filteredAppointments.length;
const countMessage = document.createElement('div');
countMessage.className = 'text-center mb-3';
countMessage.innerHTML = `<strong>${appointmentCount}/${maxAppointments} Appointments</strong>`;
tableBody.parentElement.insertBefore(countMessage, tableBody);
if (appointmentCount >= maxAppointments) {
// Display "Can't Add Appointment Now" Message
tableBody.innerHTML = '<tr><td colspan="4" class="text-center text-danger">Can\'t Add Appointment Now</td></tr>';
} else if (filteredAppointments.length > 0) {
filteredAppointments.forEach(app => {
const row = `<tr>
<td>${app.id}</td>
<td>${app.name}</td>
<td>${app.service}</td>
<td>${filteredAppointments.length < maxAppointments ? 'Available' : 'Full'}</td>
</tr>`;
tableBody.innerHTML += row;
});
} else {
tableBody.innerHTML = '<tr><td colspan="4" class="text-center">No Appointments Available</td></tr>';
}
}
</script>
</body>
</html>