From 8629a22d03d633ae839fd10ce6bb6b7c69d362a1 Mon Sep 17 00:00:00 2001 From: SrijaVuppala295 Date: Sun, 13 Oct 2024 11:31:57 +0530 Subject: [PATCH 1/2] done --- frontend/package-lock.json | 59 ++++++++++++++++++++++++++++++++++ frontend/package.json | 1 + frontend/src/Pages/booking.jsx | 31 ++++++++++++------ 3 files changed, 82 insertions(+), 9 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 8e8a394..7535905 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -15,6 +15,7 @@ "framer-motion": "^11.11.8", "jwt-decode": "^4.0.0", "react": "^18.3.1", + "react-datepicker": "^7.4.0", "react-dom": "^18.3.1", "react-icons": "^5.3.0", "react-router-dom": "^6.26.2", @@ -2163,6 +2164,14 @@ "node": ">=0.8" } }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, "node_modules/code-block-writer": { "version": "12.0.0", "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-12.0.0.tgz", @@ -2348,6 +2357,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/date-fns": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", + "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/debug": { "version": "4.3.7", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", @@ -5213,6 +5231,47 @@ "node": ">=0.10.0" } }, + "node_modules/react-datepicker": { + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-7.4.0.tgz", + "integrity": "sha512-vSSok4DTZ9/Os8O4HjZLxh4SZVFU6dQvoCX6mfbNdBqMsBBdzftrvMz0Nb4UUVVbgj9o8PfX84K3/31oPrTqmg==", + "dependencies": { + "@floating-ui/react": "^0.26.23", + "clsx": "^2.1.1", + "date-fns": "^3.6.0", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17 || ^18", + "react-dom": "^16.9.0 || ^17 || ^18" + } + }, + "node_modules/react-datepicker/node_modules/@floating-ui/react": { + "version": "0.26.24", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.24.tgz", + "integrity": "sha512-2ly0pCkZIGEQUq5H8bBK0XJmc1xIK/RM3tvVzY3GBER7IOD1UgmC2Y2tjj4AuS+TC+vTE1KJv2053290jua0Sw==", + "dependencies": { + "@floating-ui/react-dom": "^2.1.2", + "@floating-ui/utils": "^0.2.8", + "tabbable": "^6.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/react-datepicker/node_modules/@floating-ui/react-dom": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz", + "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==", + "dependencies": { + "@floating-ui/dom": "^1.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 511e6d6..912dd70 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -18,6 +18,7 @@ "framer-motion": "^11.11.8", "jwt-decode": "^4.0.0", "react": "^18.3.1", + "react-datepicker": "^7.4.0", "react-dom": "^18.3.1", "react-icons": "^5.3.0", "react-router-dom": "^6.26.2", diff --git a/frontend/src/Pages/booking.jsx b/frontend/src/Pages/booking.jsx index 42a5f26..07b2e46 100644 --- a/frontend/src/Pages/booking.jsx +++ b/frontend/src/Pages/booking.jsx @@ -1,11 +1,17 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { IoCalendarOutline } from 'react-icons/io5'; import { IoArrowBack } from 'react-icons/io5'; import { useNavigate } from 'react-router-dom'; +import DatePicker from 'react-datepicker'; // Import DatePicker +import 'react-datepicker/dist/react-datepicker.css'; // Import default styles const BookingPage = () => { + useEffect(() => { + document.title = 'Station Saarthi | Booking'; + }, []); + const [station, setStation] = useState(''); - const [date, setDate] = useState(''); + const [date, setDate] = useState(null); // Initial date state const navigate = useNavigate(); const services = [ @@ -67,18 +73,25 @@ const BookingPage = () => { /> - {/* Date input */} + {/* Date input with calendar */}
- setDate(e.target.value)} - placeholder="DD/MM/YY" + setDate(date)} // Update date state + dateFormat="dd/MM/yyyy" // Set your desired date format + placeholderText="DD/MM/YY" className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300" + popperClassName="z-50" // Adjust z-index of the date picker + onClickOutside={() => setDate(null)} // Close calendar on outside click + /> + setDate(new Date())} // Open calendar on icon click + onMouseDown={(e) => e.preventDefault()} // Prevent input focus on icon click /> -
From ddf2c980a5d044606269270a3b9408ae59918461 Mon Sep 17 00:00:00 2001 From: SrijaVuppala295 <140592148+SrijaVuppala295@users.noreply.github.com> Date: Mon, 14 Oct 2024 01:09:21 +0530 Subject: [PATCH 2/2] Update booking.jsx --- frontend/src/Pages/booking.jsx | 52 +++++++++++++++------------------- 1 file changed, 23 insertions(+), 29 deletions(-) diff --git a/frontend/src/Pages/booking.jsx b/frontend/src/Pages/booking.jsx index 0248a7b..08bf9bb 100644 --- a/frontend/src/Pages/booking.jsx +++ b/frontend/src/Pages/booking.jsx @@ -1,18 +1,18 @@ 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 axios from 'axios'; const BookingPage = () => { useEffect(() => { document.title = 'Station Saarthi | Booking'; }, []); - + const [station, setStation] = useState(''); // Holds the typed input const [selectedStation, setSelectedStation] = useState(null); // Holds the selected station - const [date, setDate] = useState(null); // Initial date state + const [date, setDate] = useState(null); // Initial date state for DatePicker const [services, setServices] = useState([ { id: 'cloak', name: 'Cloak Room Booking', availability: 0 }, { id: 'wheelchair', name: 'Wheelchair Booking', availability: 0 }, @@ -113,34 +113,12 @@ const BookingPage = () => { - {/* Date input with calendar */} -
- -
- setDate(date)} // Update date state - dateFormat="dd/MM/yyyy" // Set your desired date format - placeholderText="DD/MM/YY" - className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300" - popperClassName="z-50" // Adjust z-index of the date picker - onClickOutside={() => setDate(null)} // Close calendar on outside click - /> - setDate(new Date())} // Open calendar on icon click - onMouseDown={(e) => e.preventDefault()} // Prevent input focus on icon click - /> -
-
- + {/* Station Input */}

Station Services

- {/* Station Input */}
{ placeholder="Enter Station Name" className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300" /> - {/* Station suggestions dropdown */} {stationSuggestions.length > 0 && (
    @@ -177,11 +154,28 @@ const BookingPage = () => { )}
+ {/* Date input with calendar */} +
+ +
+ setDate(date)} // Update date state + dateFormat="dd/MM/yyyy" // Set your desired date format + placeholderText="DD/MM/YY" + className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300" + popperClassName="z-50" // Adjust z-index of the date picker + /> + +
+
+ {/* Render Services */} {loading ? (

Loading services...

- ) : error && !stationSuggestions.length ? ( -

{error}

) : (
{services.map((service) => (