Add image display to flight logs

web/app/routes/logbook.dashboard/route.tsx

@@ -31,7 +31,6 @@ export default function Dashboard() {
 
   useEffect(() => {
     if (totals.isFetched && !!totals.data) {
-      console.log(totals.data);
       setTotalsData(totals.data);
     }
   }, [totals.data]);

web/app/routes/logbook.flights.$id/route.tsx

@@ -77,6 +77,7 @@ export default function Flight() {
             </Text>
           ) : null}
           <Group justify="flex-end">
+            {deleteFlight.isPending ? <Loader /> : null}
             <Button color="red" onClick={() => deleteFlight.mutate()}>
               Delete
             </Button>
@@ -131,6 +132,7 @@ export default function Flight() {
                     {imageIds.length > 0 ? (
                       <CollapsibleFieldset legend="Images" mt="sm" w="100%">
                         <Carousel
+                          style={{ maxHeight: "700px" }}
                           withIndicators
                           slideGap="sm"
                           slideSize={{ base: "100%", sm: "80%" }}
@@ -140,6 +142,7 @@ export default function Flight() {
                               <SecureImage
                                 key={randomId()}
                                 id={img}
+                                h="700px"
                                 radius="lg"
                               />
                             </Carousel.Slide>

web/app/routes/logbook.flights.new/route.tsx

@@ -16,6 +16,32 @@ export default function NewFlight() {
       const newFlight = flightCreateHelper(values);
       if (newFlight) {
         const res = await client.post("/flights", newFlight);
+
+        const id = res.data.id;
+        if (!id) throw new Error("Flight creation failed");
+
+        console.log(values.images);
+
+        const imageForm = new FormData();
+
+        // Upload images
+        for (const img of values.images) {
+          imageForm.append("images", img);
+        }
+
+        console.log(imageForm);
+
+        const img_id = await client.post(
+          `/flights/${id}/add_images`,
+          imageForm,
+          { headers: { "Content-Type": "multipart/form-data" } }
+        );
+
+        if (!img_id) {
+          await queryClient.invalidateQueries({ queryKey: ["flights-list"] });
+          throw new Error("Image upload failed");
+        }
+
         return res.data;
       }
       throw new Error("Flight creation failed");