diff options
Diffstat (limited to 'driver')
| -rw-r--r-- | driver/index.html | 2 | ||||
| -rw-r--r-- | driver/src/App.tsx | 5 | ||||
| -rw-r--r-- | driver/src/components/RideDialog.tsx | 13 | ||||
| -rw-r--r-- | driver/src/pages/Home.tsx | 136 | ||||
| -rw-r--r-- | driver/src/utils/fetchRideRequests.ts | 2 |
5 files changed, 88 insertions, 70 deletions
diff --git a/driver/index.html b/driver/index.html index e4b78ea..5fc871e 100644 --- a/driver/index.html +++ b/driver/index.html @@ -4,7 +4,7 @@ <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>Vite + React + TS</title> + <title>Carpool</title> </head> <body> <div id="root"></div> diff --git a/driver/src/App.tsx b/driver/src/App.tsx index 9b3bb03..d0fa20f 100644 --- a/driver/src/App.tsx +++ b/driver/src/App.tsx @@ -1,13 +1,8 @@ -import RideDialog from "./components/RideDialog" -import Home from "./pages/Home" import LandingPage from "./pages/LandingPage" - function App() { return ( <LandingPage /> - // <Home /> - // <RideDialog /> ) } diff --git a/driver/src/components/RideDialog.tsx b/driver/src/components/RideDialog.tsx index ff3aa98..e57fc89 100644 --- a/driver/src/components/RideDialog.tsx +++ b/driver/src/components/RideDialog.tsx @@ -14,19 +14,6 @@ import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useState } from "react" import { useToast } from "./ui/use-toast" -import { ToastAction } from "./ui/toast" - -interface RideOrder { - driverName: string - carBrand: string - carModel: string - carColor: string - plateNumber: string - status: string - orderTime: Date - pickUpLocation: string - dropOffLocation: string -} function RideDialog({ name, brand, model, color, plateNumber, phoneNumber }: any) { diff --git a/driver/src/pages/Home.tsx b/driver/src/pages/Home.tsx index 5a2d981..37727e7 100644 --- a/driver/src/pages/Home.tsx +++ b/driver/src/pages/Home.tsx @@ -28,46 +28,65 @@ interface IPassengerRequest { dropOff: string, } -interface ITrip { - pickUp: string, - dropOff: string, -} - -function PassengerRequestCard({ passengerName, pickUp, dropOff, status, phoneNumber }: IPassengerRequest) { - return ( - <li className="py-2"> - <p> - <strong>Passenger:</strong> {passengerName} - </p> - <p> - <strong>Phone number:</strong> {phoneNumber} - </p> - <p> - <strong>Status:</strong> {status} - </p> - <p> - <strong>Pickup:</strong> {pickUp} - </p> - <p> - <strong>Dropoff:</strong> {dropOff} - </p> - <div className="flex justify-between mt-2"> - <Button className="text-green-500 border-green-500" variant="outline"> - Accept - </Button> - <Button className="border-red-500 text-red-500" variant="outline"> - Reject - </Button> - </div> - </li> - ) - -} export default function Home() { const [driverData, setDriverData] = useState<IDriver | null | undefined>() - const [rideRequests, setRideRequests] = useState<any[] | undefined>([]) - const [currentTrip, setCurrentTrip] = useState<ITrip>() + const [rideRequests, setRideRequests] = useState<IPassengerRequest[]>([]) + const [currentTrip, setCurrentTrip] = useState<IPassengerRequest>() + const [isLoggedIn, setIsLoggedIn] = useState(true) + + + function PassengerRequestCard({ passengerName, pickUp, dropOff, status, phoneNumber }: IPassengerRequest) { + return ( + <li className="py-2"> + <p> + <strong>Passenger:</strong> {passengerName} + </p> + <p> + <strong>Phone Number:</strong> {phoneNumber} + </p> + <p> + <strong>Status:</strong> {status} + </p> + <p> + <strong>Pickup:</strong> {pickUp} + </p> + <p> + <strong>Dropoff:</strong> {dropOff} + </p> + <div className="flex justify-between mt-2"> + <Button onClick={ + () => { + const newRideReqs = rideRequests.map((request) => { + if (request.phoneNumber === phoneNumber) { + return { ...request, status: 'Accepted' }; + } + return request; + }) + const curTrip = newRideReqs.find((req) => req.phoneNumber == phoneNumber) + setCurrentTrip(curTrip) + setRideRequests(newRideReqs) + } + } + className="text-green-500 border-green-500" variant="outline"> + Accept + </Button> + <Button onClick={() => { + const newRideReqs = rideRequests.map((request) => { + if (request.phoneNumber === phoneNumber) { + return { ...request, status: 'Cancelled' }; + } + return request; + }) + setRideRequests(newRideReqs) + }} className="border-red-500 text-red-500" variant="outline"> + Reject + </Button> + </div> + </li> + ) + + } useEffect(() => { const user = auth.currentUser; @@ -83,7 +102,7 @@ export default function Home() { }, [auth.currentUser, db]); return ( - !auth.currentUser ? <Navigate to="/login" /> : + !isLoggedIn ? <Navigate to="/login" /> : ( <main className="flex flex-col gap-6 p-6 bg-gray-900 text-white min-h-screen"> <header className="flex justify-between items-center"> @@ -96,7 +115,14 @@ export default function Home() { </Badge> </div> <div className="flex gap-4 items-center"> - <Button className="text-black bg-white" variant="outline"> + <Button onClick={ + () => { + console.log("Loging out") + setIsLoggedIn(false) + auth.signOut() + } + } + className="text-black bg-white" variant="outline"> Log Out </Button> </div> @@ -126,6 +152,15 @@ export default function Home() { </CardHeader> <CardContent className="mt-5"> <p> + <strong>Passenger:</strong> {currentTrip?.passengerName} + </p> + <p> + <strong>Phone Number:</strong> {currentTrip?.phoneNumber} + </p> + <p> + <strong>Status:</strong> {currentTrip?.status} + </p> + <p> <strong>Pickup:</strong> {currentTrip?.pickUp} </p> <p> @@ -148,17 +183,18 @@ export default function Home() { </CardHeader> <CardContent className="mt-3"> <ul className="divide-y divide-gray-600"> - {rideRequests?.map((rideReq) => { - return ( - < PassengerRequestCard - passengerName={rideReq?.name} - pickUp={rideReq?.pickUp} - dropOff={rideReq?.dropOff} - phoneNumber={rideReq?.phoneNumber} - status={rideReq?.status} - /> - ) - })} + {rideRequests?.filter((rideReq) => rideReq?.status == "Pending") + .map((rideReq) => { + return ( + < PassengerRequestCard + passengerName={rideReq?.passengerName} + pickUp={rideReq?.pickUp} + dropOff={rideReq?.dropOff} + phoneNumber={rideReq?.phoneNumber} + status={rideReq?.status} + /> + ) + })} </ul> </CardContent> </Card> diff --git a/driver/src/utils/fetchRideRequests.ts b/driver/src/utils/fetchRideRequests.ts index ec28471..53e6006 100644 --- a/driver/src/utils/fetchRideRequests.ts +++ b/driver/src/utils/fetchRideRequests.ts @@ -19,7 +19,7 @@ export const fetchRideRequests = async () => { const rideReqs = data?.map(async (rideReq) => { const passengerData: any = await fetchUserDetails(rideReq.passengerID); return { - name: passengerData?.name, + passengerName: passengerData?.name, phoneNumber: passengerData?.phoneNumber, status: rideReq.status, pickUp: rideReq.pickUp, |