Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update booking.jsx #292

Merged
merged 5 commits into from
Oct 18, 2024
Merged

Update booking.jsx #292

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0d1d154
Update booking.jsx
PraveenUppar Oct 18, 2024
db32e66
Update booking.jsx
PraveenUppar Oct 18, 2024
0e84a4c
Create StationSearch.jsx
PraveenUppar Oct 18, 2024
f717599
Delete frontend/src/components/StationSearch.jsx
PraveenUppar Oct 18, 2024
af4e443
Update booking.jsx
PraveenUppar Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 67 additions & 55 deletions frontend/src/Pages/booking.jsx
View file
Open in desktop
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
Loading