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");

web/app/ui/display/secure-img.tsx

@@ -45,10 +45,12 @@ function useFetchImageAsBase64(
 export default function SecureImage({
   id,
   radius = "sm",
+  h = "",
   clickable = true,
 }: {
   id: string;
   radius?: string;
+  h?: string;
   clickable?: boolean;
 }) {
   const { isLoading, error, data } = useFetchImageAsBase64(id);
@@ -57,7 +59,7 @@ export default function SecureImage({
 
   if (isLoading)
     return (
-      <Center h="100%">
+      <Center h="500px">
         <Loader />
       </Center>
     );
@@ -80,6 +82,12 @@ export default function SecureImage({
       <Image
         src={`data:${data?.type};base64,${data?.blob}`}
         radius={radius}
+        w="auto"
+        maw="100%"
+        h="100%"
+        m="auto"
+        fit="contain"
+        style={{ maxHeight: h ?? "" }}
         onClick={() => {
           if (clickable) {
             open();

web/app/ui/form/flight-form.tsx

@@ -10,6 +10,7 @@ import {
   Container,
   Fieldset,
   Group,
+  Loader,
   Modal,
   NumberInput,
   ScrollArea,
@@ -34,6 +35,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useApi } from "@/util/api";
 import { useAircraft } from "@/util/hooks";
 import { useEffect, useState } from "react";
+import ImageUpload from "./image-upload";
 
 export default function FlightForm({
   onSubmit,
@@ -101,6 +103,8 @@ export default function FlightForm({
       crew: [],
 
       comments: "",
+
+      images: [],
     },
   });
 
@@ -492,20 +496,22 @@ export default function FlightForm({
                 minRows={4}
                 {...form.getInputProps("comments")}
               />
+              <ImageUpload
+                form={form}
+                field="images"
+                label="Images"
+                placeholder="Upload Images"
+              />
             </Fieldset>
           </Container>
         </ScrollArea.Autosize>
 
         <Group justify="flex-end" mt="md">
           {isPending ? (
-            <Text c="yellow" fw={700}>
-              Loading...
-            </Text>
+            <Loader />
           ) : isError ? (
             <Text c="red" fw={700}>
-              {error instanceof AxiosError
-                ? error.response?.data.detail
-                : error?.message}
+              {error?.message}
             </Text>
           ) : null}
           {withCancelButton ? (

web/app/ui/form/image-upload.tsx

@@ -0,0 +1,51 @@
+import { FlightFormSchema } from "@/util/types";
+import { FileInput, FileInputProps, Pill } from "@mantine/core";
+import { UseFormReturnType } from "@mantine/form";
+import { randomId } from "@mantine/hooks";
+import { IconPhoto } from "@tabler/icons-react";
+
+export default function ImageUpload({
+  form,
+  field,
+  label = "",
+  placeholder = "",
+}: {
+  form: UseFormReturnType<
+    FlightFormSchema,
+    (values: FlightFormSchema) => FlightFormSchema
+  >;
+  field: string;
+  label?: string;
+  placeholder?: string;
+}) {
+  const ValueComponent: FileInputProps["valueComponent"] = ({ value }) => {
+    if (value === null) {
+      return null;
+    }
+
+    if (Array.isArray(value)) {
+      return (
+        <Pill.Group>
+          {value.map((file) => (
+            <Pill key={randomId()}>{file.name}</Pill>
+          ))}
+        </Pill.Group>
+      );
+    }
+
+    return <Pill>{value.name}</Pill>;
+  };
+
+  return (
+    <FileInput
+      label={label}
+      placeholder={placeholder}
+      multiple
+      accept="image/*"
+      valueComponent={ValueComponent}
+      rightSectionPointerEvents="none"
+      rightSection={<IconPhoto />}
+      {...form.getInputProps(field)}
+    />
+  );
+}

web/app/util/api.tsx

@@ -58,3 +58,7 @@ function useProvideApi(apiUrl: string) {
 
   return client;
 }
+
+export function createClient() {
+  return axios.create({});
+}

web/app/util/types.ts

@@ -50,6 +50,8 @@ type FlightFormSchema = FlightBaseSchema & {
   time_off: number | null;
   time_down: number | null;
   time_stop: number | null;
+
+  images: File[];
 };
 
 type FlightCreateSchema = FlightBaseSchema & {