Skip to content

Commit

Permalink
Merge pull request #439 from manya1632/manya
Browse files Browse the repository at this point in the history 
Add functionality to Schedule Page
  • Loading branch information
@dhairyagothi
dhairyagothi authored Oct 26, 2024
2 parents 958ffa7 + a60f0a7 commit e29fc0f
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 131 deletions.
1 change: 1 addition & 0 deletions frontend/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

184 changes: 53 additions & 131 deletions frontend/src/Pages/schedule.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,41 @@
import React, { useState, useEffect } from 'react';
import React, { useState } from 'react';
import { IoArrowBack, IoSearchOutline } from 'react-icons/io5';
import { useNavigate } from 'react-router-dom';

// Placeholder API URL (replace with the actual API endpoint)
const API_URL = 'http://localhost:3000/train';
import axios from 'axios';

const SchedulePage = () => {
useEffect(() => {
document.title = 'Station Saarthi | Schedule';
}, []);

const [searchQuery, setSearchQuery] = useState('');
const [trainDetails, setTrainDetails] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const navigate = useNavigate();

// Function to search train by either number or name
const searchTrain = async () => {
if (!searchQuery) {
setError('Please enter a train number or name to search');
setError('Please enter a train number to search');
return;
}

setLoading(true);
setError(null);

const apiKey = ""; // Enter your Indian Rail API key
const options = {
method: 'GET',
url: `https://indianrailapi.com/api/v2/TrainSchedule/apikey/${apiKey}/TrainNumber/${searchQuery}`,
};

try {
const response = await fetch(`${API_URL}/${searchQuery}`);
if (!response.ok) {
throw new Error('Train not found');
}
const response = await axios.request(options);
console.log("API Response Data:", response.data);

const data = await response.json();
setTrainDetails(data); // Assuming the API returns a train object
if (response.data.ResponseCode === "200") {
setTrainDetails(response.data.Route);
} else {
setError('No train details found');
}
} catch (error) {
console.error(error);
setError(error.message || 'An error occurred while fetching the train details');
} finally {
setLoading(false);
Expand All @@ -43,130 +44,51 @@ const SchedulePage = () => {

return (
<div className="relative flex flex-col items-center min-h-screen">
<div
className="absolute inset-0 bg-transparent"
style={{
backgroundImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7))',
}}
/>

<div className="relative w-full px-4 py-8 z-10 flex items-center justify-center flex-col">
<div className="w-full max-w-md mx-auto flex items-center mb-6 ">
<button
onClick={() => navigate(-1)}
className="flex items-center text-white hover:text-blue-200 transition-colors"
>
<div className="relative w-full px-4 py-8 flex items-center justify-center flex-col">
<div className="w-full max-w-md mx-auto flex items-center mb-6">
<button onClick={() => navigate(-1)} className="text-white">
<IoArrowBack size={24} />
<span className="text-lg font-medium ml-2">Back</span>
</button>
</div>

<div className="w-9/12 bg-white bg-opacity-90 rounded-lg shadow-md p-6 backdrop-blur-sm">
<h2 className="text-xl font-bold text-center mb-6 py-2 bg-blue-100 border border-blue-300 rounded-3xl shadow-sm">
Train Schedule
</h2>

<div className="space-y-4">
{/* Search input */}
<div className="mb-4">
<label className="block text-gray-700 font-semibold mb-2">
Search by Train Number or Name
</label>
<div className="relative">
<input
type="text"
placeholder="Enter train number or name..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300"
/>
<IoSearchOutline
className="absolute right-3 top-2.5 text-gray-400 cursor-pointer"
size={20}
onClick={searchTrain}
/>
</div>
{error && <p className="text-red-500 mt-2">{error}</p>}
<div className="w-9/12 bg-white rounded-lg shadow-md p-6">
<h2 className="text-xl font-bold text-center mb-6">Train Schedule</h2>

<div className="mb-4">
<label className="block text-gray-700 font-semibold mb-2">
Search by Train Number
</label>
<div className="relative">
<input
type="text"
placeholder="Enter train number..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg"
/>
<IoSearchOutline onClick={searchTrain} className="absolute right-3 top-2.5 cursor-pointer" size={20} />
</div>
{error && <p className="text-red-500 mt-2">{error}</p>}
</div>

{/* Display train details */}
{loading && <p>Loading...</p>}
{trainDetails && (
<div className="space-y-4">
<div>
<label className="block text-gray-700 font-semibold mb-2">Train Number</label>
<input
type="text"
value={trainDetails.trainNumber}
readOnly
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
/>
</div>

<div>
<label className="block text-gray-700 font-semibold mb-2">Train Name</label>
<input
type="text"
value={trainDetails.trainName}
readOnly
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
/>
</div>

<div>
<label className="block text-gray-700 font-semibold mb-2">Next Station</label>
<input
type="text"
value={trainDetails.nextStation?.name || 'N/A'}
readOnly
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
/>
</div>

<div>
<label className="block text-gray-700 font-semibold mb-2">Services</label>
<input
type="text"
value={trainDetails.services?.join(', ') || 'N/A'}
readOnly
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
/>
</div>

<div>
<label className="block text-gray-700 font-semibold mb-2">Platform Details</label>
<input
type="text"
value={trainDetails.platformDetails?.platformNumber || 'N/A'}
readOnly
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
/>
</div>

<div>
<label className="block text-gray-700 font-semibold mb-2">Coach Details</label>
<input
type="text"
value={
trainDetails.coachDetails
?.map(coach => `${coach.coachNumber} (${coach.coachType})`)
.join(', ') || 'N/A'
}
readOnly
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
/>
{loading && <p>Loading...</p>}
{trainDetails && (
<div className="space-y-4">
{trainDetails.map((stop) => (
<div key={stop.SerialNo} className="border-b py-2">
<h3 className="font-semibold">{stop.StationName} ({stop.StationCode})</h3>
<p>Arrival Time: {stop.ArrivalTime}</p>
<p>Departure Time: {stop.DepartureTime}</p>
<p>Distance: {stop.Distance} km</p>
</div>
</div>
)}
))}
</div>
)}

{/* Button to search */}
<button
className="w-full py-2 mt-6 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105"
onClick={searchTrain}
>
Search Train
</button>
</div>
<button className="w-full py-2 mt-6 bg-blue-500 text-white" onClick={searchTrain}>
Search Train
</button>
</div>
</div>
</div>
Expand Down

0 comments on commit e29fc0f

Please sign in to comment.