Skip to content

Commit

Permalink
Merge pull request #292 from PraveenUppar/Booking-Page-Update
Browse files Browse the repository at this point in the history 
Update booking.jsx
  • Loading branch information
@dhairyagothi
dhairyagothi authored Oct 18, 2024
2 parents 25b059e + af4e443 commit 2a148a5
Showing 1 changed file with 67 additions and 55 deletions.
122 changes: 67 additions & 55 deletions frontend/src/Pages/booking.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import React, { useState, useEffect } from 'react';
import { IoCalendarOutline, IoArrowBack } from 'react-icons/io5';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import DatePicker from 'react-datepicker'; // Import DatePicker
import 'react-datepicker/dist/react-datepicker.css'; // Import default styles
import React, { useState, useEffect } from "react";
import { IoCalendarOutline, IoArrowBack } from "react-icons/io5";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import DatePicker from "react-datepicker"; // Import DatePicker
import "react-datepicker/dist/react-datepicker.css"; // Import default styles

const BookingPage = () => {
const [station, setStation] = useState("");
const [selectedStation, setSelectedStation] = useState(null);
const [date, setDate] = useState(null); // Date initialized as null
const [services, setServices] = useState([
{ id: "cloak", name: "Cloak Room Booking", availability: 0 },
{ id: "cloak", name: "Clock Room Booking", availability: 0 },
{ id: "wheelchair", name: "Wheelchair Booking", availability: 0 },
{ id: "coolie", name: "Coolie Booking", availability: 0 },
]);
Expand Down Expand Up @@ -47,7 +47,8 @@ const BookingPage = () => {
const response = await axios.get(
`http://localhost:3000/station/${stationId}/bookings`
);
const { coolieBookings, wheelchairBookings, cloakroomBookings } = response.data;
const { coolieBookings, wheelchairBookings, cloakroomBookings } =
response.data;

setServices([
{
Expand Down Expand Up @@ -125,7 +126,7 @@ const BookingPage = () => {
} catch (error) {
alert(
"Failed to complete the booking: " +
(error.response?.data?.message || "Unknown error")
(error.response?.data?.message || "Unknown error")
);
}
};
Expand All @@ -146,7 +147,7 @@ const BookingPage = () => {
} catch (error) {
alert(
"Failed to complete the booking: " +
(error.response?.data?.message || "Unknown error")
(error.response?.data?.message || "Unknown error")
);
}
};
Expand All @@ -165,7 +166,7 @@ const BookingPage = () => {
} catch (error) {
alert(
"Failed to complete the booking: " +
(error.response?.data?.message || "Unknown error")
(error.response?.data?.message || "Unknown error")
);
}
};
Expand All @@ -183,52 +184,57 @@ const BookingPage = () => {
};

// Render booking form for selected service

const renderBookingForm = () => {
if (!selectedService) return null;

if (selectedService === "cloak") {
return (
<form onSubmit={handleFormSubmit} className="mt-4">
<h2 className="text-xl font-bold">Cloak Room Booking</h2>
<label>
Number of items:
<form onSubmit={handleFormSubmit} className="mt-6">
<h2 className="text-2xl font-bold text-blue-600">
Cloak Room Booking
</h2>
<label className="block mt-4">
Number of Items:
<input
type="number"
value={formData.items || ""}
onChange={(e) => setFormData({ ...formData, items: e.target.value })}
onChange={(e) =>
setFormData({ ...formData, items: e.target.value })
}
required
className="w-full px-4 py-2 mt-2 border border-gray-300 rounded-lg"
className="w-full px-4 py-2 mt-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 transition duration-200"
/>
</label>
<label>
<label className="block mt-4">
Start Date:
<DatePicker
selected={formData.startDate}
onChange={(date) => setFormData({ ...formData, startDate: date })}
className="w-full px-4 py-2 mt-2 border border-gray-300 rounded-lg"
className="w-full px-4 py-2 mt-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 transition duration-200"
/>
</label>
<label>
<label className="block mt-4">
End Date:
<DatePicker
selected={formData.endDate}
onChange={(date) => setFormData({ ...formData, endDate: date })}
className="w-full px-4 py-2 mt-2 border border-gray-300 rounded-lg"
className="w-full px-4 py-2 mt-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 transition duration-200"
/>
</label>
<button
type="submit"
className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-150"
className="mt-6 px-5 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200 shadow-md"
>
Submit Booking
</button>
</form>
);
} else if (selectedService === "coolie") {
return (
<form onSubmit={handleFormSubmit} className="mt-4">
<h2 className="text-xl font-bold">Coolie Booking</h2>
<label>
<form onSubmit={handleFormSubmit} className="mt-6">
<h2 className="text-2xl font-bold text-blue-600">Coolie Booking</h2>
<label className="block mt-4">
Pickup Location:
<input
type="text"
Expand All @@ -237,10 +243,10 @@ const BookingPage = () => {
setFormData({ ...formData, pickupLocation: e.target.value })
}
required
className="w-full px-4 py-2 mt-2 border border-gray-300 rounded-lg"
className="w-full px-4 py-2 mt-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 transition duration-200"
/>
</label>
<label>
<label className="block mt-4">
Departure Location:
<input
type="text"
Expand All @@ -249,20 +255,20 @@ const BookingPage = () => {
setFormData({ ...formData, departureLocation: e.target.value })
}
required
className="w-full px-4 py-2 mt-2 border border-gray-300 rounded-lg"
className="w-full px-4 py-2 mt-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 transition duration-200"
/>
</label>
<label>
<label className="block mt-4">
Booking Date:
<DatePicker
selected={formData.bookingDate}
onChange={(date) =>
setFormData({ ...formData, bookingDate: date })
}
className="w-full px-4 py-2 mt-2 border border-gray-300 rounded-lg"
className="w-full px-4 py-2 mt-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 transition duration-200"
/>
</label>
<label>
<label className="block mt-4">
Booking Time:
<input
type="time"
Expand All @@ -271,32 +277,34 @@ const BookingPage = () => {
setFormData({ ...formData, bookingTime: e.target.value })
}
required
className="w-full px-4 py-2 mt-2 border border-gray-300 rounded-lg"
className="w-full px-4 py-2 mt-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 transition duration-200"
/>
</label>
<button
type="submit"
className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-150"
className="mt-6 px-5 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200 shadow-md"
>
Submit Booking
</button>
</form>
);
} else if (selectedService === "wheelchair") {
return (
<form onSubmit={handleFormSubmit} className="mt-4">
<h2 className="text-xl font-bold">Wheelchair Booking</h2>
<label>
<form onSubmit={handleFormSubmit} className="mt-6">
<h2 className="text-2xl font-bold text-blue-600">
Wheelchair Booking
</h2>
<label className="block mt-4">
Booking Date:
<DatePicker
selected={formData.bookingDate}
onChange={(date) =>
setFormData({ ...formData, bookingDate: date })
}
className="w-full px-4 py-2 mt-2 border border-gray-300 rounded-lg"
className="w-full px-4 py-2 mt-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-400 transition duration-200"
/>
</label>
<label>
<label className="block mt-4">
Booking Time:
<input
type="time"
Expand All @@ -305,12 +313,12 @@ const BookingPage = () => {
setFormData({ ...formData, bookingTime: e.target.value })
}
required
className="w-full px-4 py-2 mt-2 border border-gray-300 rounded-lg"
className="w-full px-4 py-2 mt-2 border border-teal-300 rounded-lg focus:ring-2 focus:ring-teal-400 transition duration-200"
/>
</label>
<button
type="submit"
className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-150"
className="mt-6 px-5 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200 shadow-md"
>
Submit Booking
</button>
Expand All @@ -320,26 +328,28 @@ const BookingPage = () => {
};

return (
<div className="max-w-2xl mx-auto p-4 bg-gray-100 rounded-lg shadow-md">
<div className="max-w-5xl mx-auto p-6 bg-white rounded-lg shadow-lg">
<button
onClick={() => navigate(-1)}
className="flex items-center mb-4 text-gray-700 hover:text-blue-600 transition duration-200"
className="flex items-center mb-6 text-gray-800 hover:text-blue-700 transition duration-200"
>
<IoArrowBack className="mr-2" />
Go Back
</button>
<h1 className="text-2xl font-bold mb-4">Booking Page</h1>
<h1 className="text-3xl font-bold mb-6 text-gray-800">Booking Page</h1>

<div className="mb-4">
<label className="block text-gray-700">Search for a Station</label>
<div className="mb-6">
<label className="block text-gray-700 font-medium">
Search for a Station
</label>
<input
type="text"
value={station}
onChange={handleStationInputChange}
placeholder="Type to search..."
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-400 transition duration-200"
/>
{noResults && <p className="text-red-600">No results found.</p>}
{noResults && <p className="text-red-600 mt-2">No results found.</p>}
</div>

{stationSuggestions.length > 0 && (
Expand All @@ -348,7 +358,7 @@ const BookingPage = () => {
<li
key={suggestion._id}
onClick={() => handleStationSelect(suggestion)}
className="p-2 cursor-pointer hover:bg-gray-100"
className="p-3 cursor-pointer hover:bg-gray-100 transition duration-150"
>
{suggestion.name}
</li>
Expand All @@ -358,7 +368,7 @@ const BookingPage = () => {

{loading && <p className="text-blue-600">Loading services...</p>}

<div className="flex flex-wrap justify-between mt-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
{services.map((service) => (
<div
key={service.id}
Expand All @@ -375,12 +385,14 @@ const BookingPage = () => {
)}
<p className="mt-1">Available: {service.availability}</p>
</div>
<button
onClick={() => handleBookNow(service.id)}
className="mt-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-150"
>
Book Now
</button>
<div className="flex justify-center">
<button
onClick={() => handleBookNow(service.id)}
className="mt-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-150"
>
Book Now
</button>
</div>
</div>
))}
</div>
Expand Down

0 comments on commit 2a148a5

Please sign in to comment.