more work on cleaning up itinerary create

jacksors · Jan 28, 2024 · b2df174 · b2df174
1 parent c2897b7
commit b2df174
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 13 deletions.
diff --git a/components/itinerary/flightadd.tsx b/components/itinerary/flightadd.tsx
@@ -3,7 +3,7 @@ import {Airport, Flight, Route, User} from "@prisma/client";
 import {Card} from "@/components/ui/card";
 import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
 import {Button} from "@/components/ui/button";
-import {CaretSortIcon, CheckIcon} from "@radix-ui/react-icons";
+import {ButtonIcon, CaretSortIcon, CheckIcon} from "@radix-ui/react-icons";
 import {Command, CommandEmpty, CommandGroup, CommandInput, CommandItem} from "@/components/ui/command";
 import {cn} from "@/lib/utils";
 import {Calendar} from "@/components/ui/calendar";
@@ -12,9 +12,10 @@ export interface Props {
     key: number;
     airports: Airport[];
     setFlightCallback: (flight: { flightNo: string, date: Date, originCode: string, destinationCode: string }) => void;
+    deleteCallback: () => void;
 };
 
-export function FlightAdd({airports, setFlightCallback}: Props) {
+export function FlightAdd({airports, setFlightCallback, deleteCallback}: Props) {
     const [flightNoOpen, setFlightNoOpen] = React.useState(false);
     const [flightNo, setFlightNo] = React.useState<string>('');
     const [originCode, setOriginCode] = React.useState<string>('');
@@ -48,15 +49,31 @@ export function FlightAdd({airports, setFlightCallback}: Props) {
         }
     }, [localFlight])
 
+    const deleteThis = () => {
+        setFlightNo('');
+        setDate(undefined);
+        setOriginCode('');
+        setDestinationCode('');
+        deleteCallback();
+    }
+
     return (
-        <div>
-            <Card className={'flex flex-col justify-center items-center'}>
-                <h2 className={'text-xl mt-4'}>Date</h2>
+        <div className={'m-2'}>
+            <Card className={'flex flex-col justify-center items-center p-4 bg-secondary'}>
+                <div className={'grid grid-cols-3 items-center justify-items-center mb-2 w-full'}>
+                    <Button className='p-2 bg-red-500 shadow' onClick={deleteThis}>
+                        <span className="material-symbols-outlined">
+                            close
+                        </span>
+                    </Button>
+                    <h2 className={'text-xl'}>Date</h2>
+                </div>
                 <Calendar
                     mode="single"
                     selected={date}
                     onSelect={setDate}
-                    className={'rounded-md border shadow'}
+                    className={'rounded-md border shadow bg-blue-900 bg-background drop-shadow-md'}
+
                 />
                 <h2 className={'text-xl mt-4'}>Origin airport</h2>
                 <Popover open={originOpen} onOpenChange={setOriginOpen}>

diff --git a/components/itinerary/itinerarycard.tsx b/components/itinerary/itinerarycard.tsx
@@ -96,7 +96,7 @@ export const ItineraryCard = (props: Props) => {
     const { departTime, arriveTime } = findEarliestLatestTimes(props.itinerary);
 
     return (
-        <Card className="flex flex-col">
+        <Card className="flex flex-col m-8">
             <div className="flex flex-row">
                 <span className="material-symbols-outlined">
                     flight_takeoff

diff --git a/pages/itineraries/create.tsx b/pages/itineraries/create.tsx
@@ -35,7 +35,7 @@ const Create = () => {
         }
     }, [wingmanUser])
 
-    const updateFlightNoAndDates = (index: number, newFlight: { flightNo: string, date: Date, originCode: string, destinationCode: string }) => {
+    const updateFlightNoAndDates = (index: number) => (newFlight: { flightNo: string, date: Date, originCode: string, destinationCode: string }) => {
         console.log(newFlight)
         const updatedFlightNoAndDates = flightNoAndDates.map((flight, i) => i === index ? newFlight : flight);
         setFlightNoAndDates(updatedFlightNoAndDates);
@@ -113,11 +113,17 @@ const Create = () => {
         }
     };
 
+    const deleteFlight = (index: number) => () => {
+        const updatedRoutes = routes.filter((_, i) => i !== index);
+        const updatedFlightNoAndDates = flightNoAndDates.filter((_, i) => i !== index);
+        setRoutes(updatedRoutes);
+        setFlightNoAndDates(updatedFlightNoAndDates);
+    }
+
     return (
-        <div>
-            <Card className={'flex flex-col justify-center items-center'}>
+            <div className={'flex flex-col justify-center items-center m-4'}>
                 {routes.map((route, index) => (
-                    <FlightAdd key={index} airports={airports} setFlightCallback={newFlight => updateFlightNoAndDates(index, newFlight)} />
+                    <FlightAdd key={index} airports={airports} deleteCallback={deleteFlight(index)} setFlightCallback={updateFlightNoAndDates(index)} />
                 ))}
                 <Button
                     className={'mt-4 bg-accent p-3 rounded'}
@@ -133,8 +139,7 @@ const Create = () => {
                     onClick={onSubmit}>
                     Submit
                 </Button>
-            </Card>
-        </div>
+            </div>
     );
 };