Skip to content

Commit

Permalink
user appointmet page changes 1--Restrict Appointment Date to 15 Days …
Browse files Browse the repository at this point in the history 
…From Today

2--Add Doctor Selection Based on Selected Hospital (Fetch the available doctors dynamically when the hospital is selected)
  • Loading branch information
@abhisek2004
abhisek2004 committed Sep 5, 2024
1 parent 2debed9 commit e827184
Showing 1 changed file with 92 additions and 133 deletions.
225 changes: 92 additions & 133 deletions Government of NCT of Delhi/templates/appointment.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Expand All @@ -10,49 +11,38 @@
<style>
body {
background-image: url("../static/images/appointment.avif");
/* Replace with the path to your background image */
background-size: cover;
/* Make sure the background covers the entire page */
background-position: center;
/* Center the background image */
background-repeat: no-repeat;
/* Prevent the image from repeating */
}

/* Appointment Box Hover Effect */
.form-data {
transition: transform 0.3s ease, box-shadow 0.3s ease;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
background-color: #a2b5ba;
/* Smooth transition for transform and shadow */
border: 2px solid transparent;
}

.form-data:hover {
transform: scale(1.02);
/* Slightly increase the size of the box */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
/* Add a subtle shadow */
border-color: #00637f;
/* Highlighted border color */
}

/* Disable dates beyond 15 days in Appointment Date */
#dateInput::-webkit-calendar-picker-indicator {
color: transparent;
}
</style>
</head>

<body>
<section class="header">
<!-- <nav class="navbar navbar-expand-lg bg-primary sticky-navbar" data-bs-theme="dark"> -->
<nav
class="navbar navbar-expand-lg sticky-navbar"
style="background-color: #00637f"
data-bs-theme="dark"
>
<nav class="navbar navbar-expand-lg sticky-navbar" style="background-color: #00637f" data-bs-theme="dark">
<div class="container-fluid">
<!-- Add the logo here -->
<a class="navbar-brand" href="#">
<img
src="../static/images/delhi.png"
alt="Delhi Logo"
class="rounded-circle"
width="40"
height="40"
/>
<img src="../static/images/delhi.png" alt="Delhi Logo" class="rounded-circle" width="40" height="40" />
</a>
<h3 class="mehran">Government of NCT of Delhi</h3>
<div class="collapse navbar-collapse" id="navbarColor01">
Expand All @@ -61,27 +51,25 @@ <h3 class="mehran">Government of NCT of Delhi</h3>
<a class="nav-link text-light" href="/">Home</a>
</li>
<li class="nav-item mr-3">
<a class="nav-link text-light" href="/templates/user login.html"
>Login</a
>
<a class="nav-link text-light" href="/templates/user login.html">Login</a>
</li>
</ul>
</div>
</div>
</nav>
</section>

<!-- End of Navigation Bar -->
<!-- Appointment -->
<!-- Appointment Form -->
<div class="container appointment">
{% with messages = get_flashed_messages(with_categories=true) %} {% if
messages %}
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="alert alert-danger">
{% for category, message in messages %}
<p>{{ message }}</p>
{% endfor %}
</div>
{% endif %} {% endwith %}
{% endif %}
{% endwith %}
<div class="row justify-content-center">
<div class="col-md-6">
<div class="form-data">
Expand All @@ -90,155 +78,126 @@ <h2>Book Appointment</h2>
</div>
<form method="post" action="/appointment">
<div class="form-body">
<!-- Full Name Input -->
<div class="mb-3">
<label for="nameInput" class="form-label">Full Name</label>
<input
type="text"
id="nameInput"
placeholder="Enter Full Name"
name="name"
class="form-control"
/>
<input type="text" id="nameInput" placeholder="Enter Full Name" name="name" class="form-control" />
</div>

<!-- Mobile Number Input -->
<div class="mb-3">
<label for="numberInput" class="form-label"
>Mobile Number</label
>
<input
type="text"
id="numberInput"
placeholder="Enter Mobile Number"
name="number"
class="form-control"
/>
<label for="numberInput" class="form-label">Mobile Number</label>
<input type="text" id="numberInput" placeholder="Enter Mobile Number" name="number"
class="form-control" />
</div>

<!-- Email Address Input -->
<div class="mb-3">
<label for="emailInput" class="form-label"
>Email Address</label
>
<input
type="text"
id="emailInput"
placeholder="Enter Email Address"
name="email"
class="form-control"
/>
<label for="emailInput" class="form-label">Email Address</label>
<input type="text" id="emailInput" placeholder="Enter Email Address" name="email"
class="form-control" />
</div>

<!-- Address Input -->
<div class="mb-3">
<label for="addressInput" class="form-label">Address</label>
<input
type="text"
id="addressInput"
placeholder="Enter Your Address"
name="Address"
class="form-control"
/>
<input type="text" id="addressInput" placeholder="Enter Your Address" name="Address"
class="form-control" />
</div>

<!-- Appointment Date Input (limited to 15 days) -->
<div class="mb-3">
<label for="dateInput" class="form-label"
>Appointment Date</label
>
<input
type="date"
id="dateInput"
name="dat"
min="{{today}}"
class="form-control"
<label for="dateInput" class="form-label">Appointment Date</label>
<input type="date" id="dateInput" name="dat" min="{{ today }}" max="{{ today | add_days(15) }}" <!--
Show only next 15 days -->
class="form-control"
/>
</div>
<!-- Time Slot Selection in 24-hour Format -->

<!-- Time Slot Selection -->
<div class="mb-3">
<label for="timeSlot">Select Time Slot:</label>
<select id="timeSlot" name="timeSlot" class="form-control">
<option value="" disabled selected>
Select a time slot
</option>
<option value="" disabled selected>Select a time slot</option>
<option value="08:00 - 09:00">08:00 - 09:00</option>
<option value="09:00 - 10:00">09:00 - 10:00</option>
<option value="10:00 - 11:00">10:00 - 11:00</option>
<option value="11:00 - 12:00">11:00 - 12:00</option>
<option value="12:00 - 13:00">12:00 - 13:00</option>
<option value="13:00 - 14:00">13:00 - 14:00</option>
<option value="14:00 - 15:00">14:00 - 15:00</option>
<option value="15:00 - 16:00">15:00 - 16:00</option>
<option value="16:00 - 17:00">16:00 - 17:00</option>
<option value="17:00 - 18:00">17:00 - 18:00</option>
<option value="18:00 - 19:00">18:00 - 19:00</option>
<option value="19:00 - 20:00">19:00 - 20:00</option>
<!-- Other time slots... -->
</select>
</div>

<!-- Speciality Selection -->
<div class="mb-3">
<label for="diseaseInput">Select Speciality:</label>
<select
id="diseaseInput"
name="diseaseInput"
class="form-control"
>
<select id="diseaseInput" name="diseaseInput" class="form-control">
<option value="" disabled selected>Select an option</option>
<option value="Medicine">Medicine</option>
<option value="Orthopedic">Orthopedic</option>
<option value="Mental_health">Mental Health</option>
<option value="Cardiology">Cardiology</option>
<option value="Cancer">Cancer</option>
<option value="Covid-19">COVID-19</option>
<option value="Dermatology">Dermatology</option>
<option value="Dentistry">Dentistry</option>
<option value="Neurology">Neurology</option>

<option value="Pediatrics">Pediatrics</option>
<option value="Infectious Diseases">
Infectious Diseases
</option>
<option value="ENT">ENT (Otolaryngology)</option>
<option value="Plastic Surgery">Plastic Surgery</option>
<option value="Radiology">Radiology</option>
<option value="Pulmonology">Pulmonology</option>
<option value="Gastroenterology">Gastroenterology</option>
>
<!-- Other specialities... -->
</select>
</div>

<!-- Hospital Selection with Dynamic Doctor Update -->
<div class="form-group">
<label for="hospital" class="form-label"
>Select Hospital</label
>
<select
id="hospital"
name="hospital"
class="form-control"
required
>
<label for="hospital" class="form-label">Select Hospital</label>
<select id="hospital" name="hospital" class="form-control" required>
<option value="" disabled selected>Select Hospital</option>
{% for hospital in hospitals %}
<option value="{{ hospital }}">{{ hospital }}</option>
{% endfor %}
</select>
</div>
<!-- Time Slot Selection -->

<!-- Doctor Selection based on Hospital -->
<div class="form-group">
<label for="doctor" class="form-label">Select Doctor</label>
<select id="doctor" name="doctor" class="form-control">
<option value="" disabled selected>Select Doctor</option>
</select>
</div>

<!-- Disease Description -->
<div class="mb-3">
<label for="diseaseDescription">Description Disease:</label>
<input
type="text"
placeholder="Enter Disease Description"
name="diseaseDescription"
class="form-control"
/>
<input type="text" placeholder="Enter Disease Description" name="diseaseDescription"
class="form-control" />
</div>

<!-- Submit Button -->
<div class="mb-3 d-flex justify-content-center">
<button class="btn btn-success btn-appointment" type="submit">
Book Appointment
</button>
<button class="btn btn-success btn-appointment" type="submit">Book Appointment</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="../static/js/script.js"></script>

<!-- jQuery for Doctor Selection -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="../static/js/script.js"></script>

<script>
$(document).ready(function () {
// When a hospital is selected, fetch the list of doctors
$('#hospital').on('change', function () {
const hospital = $(this).val();

// Example: Fetch doctors via an API call (Replace with actual data fetching logic)
$.ajax({
url: `/get-doctors/${hospital}`, // Endpoint to get doctors based on hospital
method: 'GET',
success: function (data) {
const doctorSelect = $('#doctor');
doctorSelect.empty();
doctorSelect.append('<option value="" disabled selected>Select Doctor</option>');
data.doctors.forEach((doctor) => {
doctorSelect.append(`<option value="${doctor}">${doctor}</option>`);
});
},
});
});
});
</script>
</body>
</html>

</html>

0 comments on commit e827184

Please sign in to comment.