Skip to content

Commit

Permalink
search function fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@TharinduX
TharinduX committed May 3, 2023
1 parent 25c6181 commit 582d2ac
Show file tree
Hide file tree
Showing 12 changed files with 365 additions and 163 deletions.
9 changes: 9 additions & 0 deletions client/package-lock.json
View file

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

1 change: 1 addition & 0 deletions client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"react-date-range": "^1.4.0",
"react-dom": "^18.2.0",
"react-icons": "^4.8.0",
"react-loading-skeleton": "^3.3.0",
"react-numeric-input": "^2.2.3",
"react-router-dom": "^6.11.0",
"react-select": "^5.7.2"
Expand Down
178 changes: 97 additions & 81 deletions client/src/components/FlightSearch/FilterSiderbar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,18 @@
import React, { useEffect, useState } from 'react';
import Select from 'react-select';
import useFetch from '../../hooks/useFetch';
import Skeleton from 'react-loading-skeleton';
import 'react-loading-skeleton/dist/skeleton.css';

const FilterSiderbar = () => {
const [loading, setLoading] = useState(true);

useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 1500);
});

const [airlines, setAirlines] = useState([]);

useEffect(() => {
Expand All @@ -23,90 +33,96 @@ const FilterSiderbar = () => {
];

return (
<div>
<div className='text-lg font-bold mb-3'>Filters</div>
<hr />
<div>
<div className='mt-4 font-semibold'>Airlines</div>
<Select
placeholder='Select airline'
className='mt-2'
styles={{
control: (baseStyles, state) => ({
...baseStyles,
border: 0,
boxShadow: 'none',
borderColor: 'none',
}),
}}
options={options}
></Select>
<hr />
<div className='mt-4 font-semibold'>Price</div>
<Select
className='mt-2'
isSearchable={false}
styles={{
control: (baseStyles, state) => ({
...baseStyles,
border: 0,
boxShadow: 'none',
borderColor: 'none',
}),
}}
options={priceOptions}
></Select>
<>
{loading ? (
<Skeleton count={1} height={600} />
) : (
<div className='bg-white rounded-lg shadow-md mb-auto text-gray-700 p-5'>
<div className='text-lg font-bold mb-3'>Filters</div>
<hr />
<div>
<div className='mt-4 font-semibold'>Airlines</div>
<Select
placeholder='Select airline'
className='mt-2'
styles={{
control: (baseStyles, state) => ({
...baseStyles,
border: 0,
boxShadow: 'none',
borderColor: 'none',
}),
}}
options={options}
></Select>
<hr />
<div className='mt-4 font-semibold'>Price</div>
<Select
className='mt-2'
isSearchable={false}
styles={{
control: (baseStyles, state) => ({
...baseStyles,
border: 0,
boxShadow: 'none',
borderColor: 'none',
}),
}}
options={priceOptions}
></Select>

<hr />
<div className='mt-4 font-semibold'>Stops</div>
<div className='flex flex-col gap-1 mt-3.5 mb-3'>
<div className='flex gap-2'>
<input type='checkbox' />
<label className=''>Direct</label>
</div>
<div className='flex gap-2'>
<input type='checkbox' />
<label className=''>1 Stop</label>
</div>
<div className='flex gap-2'>
<input type='checkbox' />
<label className=''>2+ Stops</label>
</div>
</div>
<hr />
<div className='mt-4 font-semibold'>Ticket Type</div>
<div className='flex flex-col gap-1 mt-3.5 mb-3'>
<div className='flex gap-2'>
<input type='checkbox' />
<label className=''>One-way</label>
</div>
<div className='flex gap-2'>
<input type='checkbox' />
<label className=''>Return</label>
</div>
</div>
<hr />
<div className='mt-4 font-semibold'>Cabin Class</div>
<div className='flex flex-col gap-1 mt-3.5 mb-3'>
<div className='flex gap-2'>
<input type='checkbox' />
<label className=''>Basic</label>
</div>
<div className='flex gap-2'>
<input type='checkbox' />
<label className=''>Economy</label>
</div>
<div className='flex gap-2'>
<input type='checkbox' />
<label className=''>Business</label>
<hr />
<div className='mt-4 font-semibold'>Stops</div>
<div className='flex flex-col gap-1 mt-3.5 mb-3'>
<div className='flex gap-2'>
<input type='checkbox' />
<label className=''>Direct</label>
</div>
<div className='flex gap-2'>
<input type='checkbox' />
<label className=''>1 Stop</label>
</div>
<div className='flex gap-2'>
<input type='checkbox' />
<label className=''>2+ Stops</label>
</div>
</div>
<hr />
<div className='mt-4 font-semibold'>Ticket Type</div>
<div className='flex flex-col gap-1 mt-3.5 mb-3'>
<div className='flex gap-2'>
<input type='checkbox' />
<label className=''>One-way</label>
</div>
<div className='flex gap-2'>
<input type='checkbox' />
<label className=''>Return</label>
</div>
</div>
<hr />
<div className='mt-4 font-semibold'>Cabin Class</div>
<div className='flex flex-col gap-1 mt-3.5 mb-3'>
<div className='flex gap-2'>
<input type='checkbox' />
<label className=''>Basic</label>
</div>
<div className='flex gap-2'>
<input type='checkbox' />
<label className=''>Economy</label>
</div>
<div className='flex gap-2'>
<input type='checkbox' />
<label className=''>Business</label>
</div>
</div>
<hr />
<div className='mt-4 font-semibold'>Duration</div>
<input type='range' id='duration' className='w-full' />
<label htmlFor='duration'>5h 30m</label>
</div>
</div>
<hr />
<div className='mt-4 font-semibold'>Duration</div>
<input type='range' id='duration' className='w-full' />
<label htmlFor='duration'>5h 30m</label>
</div>
</div>
)}
</>
);
};

Expand Down
124 changes: 83 additions & 41 deletions client/src/components/FlightSearch/FlightCard.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,92 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import Skeleton from 'react-loading-skeleton';
import 'react-loading-skeleton/dist/skeleton.css';

const FlightCard = (flight) => {
const [loading, setLoading] = useState(true);

useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 2000);
});

function convertMinutesToHrsMins(minutes) {
if (minutes < 60) {
return `${minutes}m`;
}

const hours = Math.floor(minutes / 60);
const mins = minutes % 60;

if (mins === 0) {
return `${hours}h`;
}

return `${hours}h ${mins}m`;
}

const FlightCard = () => {
return (
<div className=' bg-white rounded-lg shadow-md px-7 py-5 mb-3'>
<div className='grid grid-cols-4'>
<div className='col-span-3'>
<div className='flex flex-col items-center text-xs border rounded-lg p-0.5 w-[10%] text-secondary border-secondary'>
Return
</div>
<div className='flex justify-between w-full gap-4'>
<div className='text-xs flex flex-col items-center w-full'>
<img
src='https://images.kiwi.com/airlines/64/UL.png'
alt=''
className='w-10 h-10 '
/>
Sri Lankan Airlines
</div>
<div className='flex flex-col justify-center items-center text-gray-600'>
<div className='font-bold'>18:00</div>
<div className='text-sm'>CMB</div>
</div>
<div className='flex flex-col items-center justify-center text-gray-600 w-full'>
<hr className='w-full h-1 bg-gray-200 border-0 rounded dark:bg-gray-500' />
<div className='text-sm'>Direct</div>
</div>
<div className='flex flex-col justify-center items-center text-gray-600'>
<div className='font-bold'>18:00</div>
<div className='text-sm'>CMB</div>
<>
{loading ? (
<Skeleton count={1} height={130} />
) : (
<div className=' bg-white rounded-lg shadow-md px-7 py-5 mb-3'>
<div className='grid grid-cols-4'>
<div className='col-span-3'>
<div className='flex flex-col items-center text-xs border rounded-lg p-0.5 w-[10%] text-secondary border-secondary'>
{flight.flight.isReturn ? 'Return' : 'One Way'}
</div>

<div className='flex justify-between w-full gap-4'>
<div className='text-xs flex flex-col items-center w-full'>
<img
src={flight.flight.airline.logo}
alt={flight.flight.airline.name}
className='w-10 h-10 '
/>
{flight.flight.airline.name}
</div>
<div className='flex flex-col justify-center items-center text-gray-600'>
<div className='font-bold'>18:00</div>
<div className='text-sm'>
{flight.flight.departure_destination.code}
</div>
</div>
<div className='flex flex-col items-center justify-center text-gray-600 w-full'>
<hr className='w-full h-1 bg-gray-200 border-0 rounded dark:bg-gray-500' />
<div className='text-sm'>
{flight.flight.isDirect ? 'Direct' : flight.flight.stops}
</div>
</div>
<div className='flex flex-col justify-center items-center text-gray-600'>
<div className='font-bold'>18:00</div>
<div className='text-sm'>
{flight.flight.arrival_destination.code}
</div>
</div>
<div className='flex flex-col justify-center items-center text-gray-400 w-full'>
<div className='text-md'>
{convertMinutesToHrsMins(flight.flight.duration)}
</div>
</div>
</div>
</div>
<div className='flex flex-col justify-center items-center text-gray-400 w-full'>
<div className='text-md'>6h 25m</div>
<div className='col-span-1'>
<div className='flex flex-col items-end'>
<div className='font-bold text-gray-800 text-lg'>
{flight.flight.price} LKR
</div>
<div className='text-sm'>Tax included</div>
<button className='bg-secondary text-white px-10 py-1 rounded-md'>
Select
</button>
</div>
</div>
</div>
</div>
<div className='col-span-1'>
<div className='flex flex-col items-end'>
<div className='font-bold text-gray-800 text-lg'>58,000</div>
<div className='text-sm'>Tax included</div>
<button className='bg-secondary text-white px-10 py-1 rounded-md'>
Select
</button>
</div>
</div>
</div>
</div>
)}
</>
);
};

Expand Down
4 changes: 2 additions & 2 deletions client/src/components/GoogleMap/Map.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ const containerStyle = {
};

const loactions = [
{ lat: 6.927079, lng: 79.861244 },
{ lat: 19.07609, lng: 72.877426 },
{ id: 1, lat: 6.927079, lng: 79.861244 },
{ id: 2, lat: 19.07609, lng: 72.877426 },
];

const options = {
Expand Down
Loading

0 comments on commit 582d2ac

Please sign in to comment.