Skip to content

Commit

Permalink
Merge pull request #411 from Bhum-ika/enhanceBookingSection
Browse files Browse the repository at this point in the history 
Enhanced booking section
  • Loading branch information
@dhairyagothi
dhairyagothi authored Oct 23, 2024
2 parents eda90a8 + cd361f6 commit 28204f6
Showing 1 changed file with 66 additions and 53 deletions.
119 changes: 66 additions & 53 deletions frontend/src/Pages/booking.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,11 @@ const BookingPage = () => {
const [selectedStation, setSelectedStation] = useState(null);
const [date, setDate] = useState(null); // Date initialized as null
const [services, setServices] = useState([
{ id: "cloak", name: "Clock Room Booking", availability: 0 },
{ id: "cloak", name: "Cloak Room Booking", availability: 0 },
{ id: "wheelchair", name: "Wheelchair Booking", availability: 0 },
{ id: "coolie", name: "Coolie Booking", availability: 0 },
]);
const[buttonClicked,setButtonClicked]=useState(false);

const [stationSuggestions, setStationSuggestions] = useState([]);
const [loading, setLoading] = useState(false);
Expand Down Expand Up @@ -106,6 +107,7 @@ const BookingPage = () => {

// Handle booking action based on selected service
const handleBookNow = (serviceId) => {
setButtonClicked(true);
setSelectedService(serviceId);
setFormData({});
};
Expand Down Expand Up @@ -195,169 +197,179 @@ const BookingPage = () => {

if (selectedService === "cloak") {
return (
<form onSubmit={handleFormSubmit} className="mt-6">
<h2 className="text-2xl font-bold text-blue-600">
<div className="flex w-full justify-center ">
<form onSubmit={handleFormSubmit} className="mt-6 flex flex-col w-8/12">
<h2 className="text-2xl font-bold text-center text-blue-600 underline underline-offset-4">
Cloak Room Booking
</h2>
<label className="block mt-4">
Number of Items:
<label className="block mt-4 text-left">
Number of Items: </label>
<input
type="number"
value={formData.items || ""}
onChange={(e) =>
setFormData({ ...formData, items: e.target.value })
}
required
className="w-full px-4 py-2 mt-2 transition duration-200 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400"
className=" w-full px-4 py-2 mt-2 transition duration-200 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 outline-none"
/>
</label>

<label className="block mt-4">
Start Date:
Start Date: </label>
<DatePicker
selected={formData.startDate}
onChange={(date) => setFormData({ ...formData, startDate: date })}
minDate={minDate} // Setting minimum date to today
className="w-full px-4 py-2 mt-2 transition duration-200 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400"
className="w-full px-4 py-2 mt-2 transition duration-200 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 outline-none"
/>
</label>

<label className="block mt-4">
End Date:
End Date: </label>
<DatePicker
selected={formData.endDate}
onChange={(date) => setFormData({ ...formData, endDate: date })}
minDate={minDate} // Setting minimum date to today
className="w-full px-4 py-2 mt-2 transition duration-200 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400"
className="w-full px-4 py-2 mt-2 transition duration-200 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 outline-none"
/>
</label>

<button
type="submit"
className="px-5 py-3 mt-6 text-white transition duration-200 bg-blue-500 rounded-lg shadow-md hover:bg-blue-600"
className="px-5 py-3 mt-6 hover:text-white font-bold transition-all bg-blue-50 duration-300 border-2 text-blue-500 border-blue-500 rounded-lg shadow-md hover:bg-blue-600"
>
Submit Booking
</button>
</form>
</div>
);
} else if (selectedService === "coolie") {
return (
<form onSubmit={handleFormSubmit} className="mt-6">
<h2 className="text-2xl font-bold text-blue-600">Coolie Booking</h2>
<div className="flex justify-center w-full ">
<form onSubmit={handleFormSubmit} className="mt-6 flex flex-col w-8/12">
<h2 className="text-2xl font-bold text-blue-600 text-center underline underline-offset-4">Coolie Booking</h2>
<label className="block mt-4">
Pickup Location:
Pickup Location:</label>
<input
type="text"
value={formData.pickupLocation || ""}
onChange={(e) =>
setFormData({ ...formData, pickupLocation: e.target.value })
}
required
className="w-full px-4 py-2 mt-2 transition duration-200 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400"
className="w-full px-4 py-2 mt-2 transition duration-200 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 outline-none"
/>
</label>

<label className="block mt-4">
Departure Location:
Departure Location: </label>
<input
type="text"
value={formData.departureLocation || ""}
onChange={(e) =>
setFormData({ ...formData, departureLocation: e.target.value })
}
required
className="w-full px-4 py-2 mt-2 transition duration-200 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400"
className="w-full px-4 py-2 mt-2 transition duration-200 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 outline-none"
/>
</label>

<label className="block mt-4">
Booking Date:
Booking Date:</label>
<DatePicker
selected={formData.bookingDate}
onChange={(date) =>
setFormData({ ...formData, bookingDate: date })
}
className="w-full px-4 py-2 mt-2 transition duration-200 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400"
className="w-full px-4 py-2 mt-2 transition duration-200 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 outline-none"
/>
</label>

<label className="block mt-4">
Booking Time:
Booking Time:</label>
<input
type="time"
value={formData.bookingTime || ""}
onChange={(e) =>
setFormData({ ...formData, bookingTime: e.target.value })
}
required
className="w-full px-4 py-2 mt-2 transition duration-200 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400"
className="w-full px-4 py-2 mt-2 transition duration-200 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 outline-none"
/>
</label>

<button
type="submit"
className="px-5 py-3 mt-6 text-white transition duration-200 bg-blue-500 rounded-lg shadow-md hover:bg-blue-600"
>
className="px-5 py-3 mt-6 hover:text-white font-bold transition-all bg-blue-50 duration-300 border-2 text-blue-500 border-blue-500 rounded-lg shadow-md hover:bg-blue-600" >
Submit Booking
</button>
</form>
</div>
);
} else if (selectedService === "wheelchair") {
return (
<form onSubmit={handleFormSubmit} className="mt-6">
<h2 className="text-2xl font-bold text-blue-600">
<div className="flex justify-center w-full ">
<form onSubmit={handleFormSubmit} className="mt-6 w-8/12 flex flex-col ">
<h2 className="text-2xl font-bold text-blue-600 underline underline-offset-4 text-center">
Wheelchair Booking
</h2>
<label className="block mt-4">
Booking Date:
Booking Date: </label>
<DatePicker
selected={formData.bookingDate}
onChange={(date) =>
setFormData({ ...formData, bookingDate: date })
}
className="w-full px-4 py-2 mt-2 transition duration-200 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400"
className="w-full px-4 py-2 mt-2 transition duration-200 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 outline-none"
/>
</label>

<label className="block mt-4">
Booking Time:
Booking Time:</label>
<input
type="time"
value={formData.bookingTime || ""}
onChange={(e) =>
setFormData({ ...formData, bookingTime: e.target.value })
}
required
className="w-full px-4 py-2 mt-2 transition duration-200 border border-teal-300 rounded-lg focus:ring-2 focus:ring-teal-400"
className="w-full px-4 py-2 mt-2 transition duration-200 border border-teal-300 rounded-lg focus:ring-2 focus:ring-teal-400 outline-none"
/>
</label>

<button
type="submit"
className="px-5 py-3 mt-6 text-white transition duration-200 bg-blue-500 rounded-lg shadow-md hover:bg-blue-600"
>
className="px-5 py-3 mt-6 hover:text-white font-bold transition-all bg-blue-50 duration-300 border-2 text-blue-500 border-blue-500 rounded-lg shadow-md hover:bg-blue-600" >
Submit Booking
</button>
</form>
</div>
);
}
};

return (
<div className="max-w-5xl p-6 mx-auto bg-white rounded-lg shadow-lg " style={{marginTop:"3rem", marginBottom:"3rem"}}>

<div className="max-w-5xl p-6 mx-auto bg-white rounded-lg shadow-lg " style={{marginTop:"3rem", marginBottom:"3rem"}}>

<div className="flex flex-col items-center">
<button
<div className="flex w-full justify-between items-center mb-6">
<button
onClick={() => navigate(-1)}
className="flex items-center mb-6 text-gray-800 transition duration-200 hover:text-blue-700"
className="flex items-center text-gray-800 transition-all duration-300 hover:text-white hover:bg-gray-800 border-2 border-gray-500 rounded-md px-2 py-1 shadow-sm text-sm"
>
<IoArrowBack className="mr-2" />
<IoArrowBack className="mr-1" />
Go Back
</button>
{buttonClicked?( <button className="px-4 py-1 rounded-xl text-xs bg-blue-600 text-white ">
Scroll down for Filling the form
</button>):''}
</div>

<h1 className="mb-6 text-3xl font-bold text-gray-800">Booking Page</h1>
<h1 className="mb-6 text-3xl font-bold text-blue-950">Booking Page</h1>

<div className="mb-6 w-3/5"> {/* Setting width to 60% */}
<label className="block font-medium text-gray-700 text-center">
<label className="block text-blue-800 text-center mb-2 font-medium">
Search for a Station
</label>
<input
type="text"
value={station}
onChange={handleStationInputChange}
placeholder="Type to search..."
className="w-full px-4 py-3 transition duration-200 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-400"
className="w-full px-4 py-3 transition duration-200 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
/>
{noResults && <p className="mt-2 text-red-600 text-center">No results found.</p>}
</div>
Expand All @@ -384,23 +396,23 @@ const BookingPage = () => {
{services.map((service) => (
<div
key={service.id}
className="flex-1 p-4 mx-2 mb-4 transition duration-150 bg-white border border-gray-300 rounded-lg shadow-sm hover:shadow-md"
className="flex-1 p-4 mx-2 mb-4 transition duration-150 bg-blue-50 border border-blue-200 rounded-lg shadow-sm hover:shadow-md hover:shadow-blue-300 hover:-translate-y-1 hover:duration-500"
>
<div className="flex items-center justify-between">
<h3 className="text-lg font-semibold">{service.name}</h3>
<div className="flex items-center justify-between ">
<h3 className="text-lg text-blue-800 font-semibold">{service.name}</h3>
</div>
<div className="flex">
<div className="flex ">
{service.availability > 0 ? (
<span className="text-lg font-bold text-green-500">●</span>
) : (
<span className="text-lg font-bold text-red-500">●</span>
)}
<p className="mt-1">Available: {service.availability}</p>
<p className="mt-1 ml-1">Available: <span className="font-semibold">{service.availability}</span></p>
</div>
<div className="flex justify-center">
<button
onClick={() => handleBookNow(service.id)}
className="px-4 py-2 mt-2 text-white transition duration-150 bg-blue-500 rounded-lg hover:bg-blue-600"
className="px-6 py-2 mt-4 text-white transition-all bg-blue-500 rounded-lg hover:bg-blue-600 hover:px-8 duration-300 text-sm"
>
Book Now
</button>
Expand All @@ -411,6 +423,7 @@ const BookingPage = () => {

{renderBookingForm()}
</div>

);
};

Expand Down

0 comments on commit 28204f6

Please sign in to comment.