Changes to UI

backend/src/controller/scans/mod.rs

@@ -344,11 +344,12 @@ fn convert_to_pdf(image_path: &PathBuf, output_path: &PathBuf) -> Result<(), Str
     };
 
     // Rotate image 45 degrees clockwise
-    let img = img.rotate270();
+    // let img = img.rotate270();
 
     // Generate PDF
     let (doc, page1, layer1) =
-        PdfDocument::new("Certificado - EEGSAC", Mm(297.0), Mm(210.0), "Layer 1");
+        // PdfDocument::new("Certificado - EEGSAC", Mm(297.0), Mm(210.0), "Layer 1");
+        PdfDocument::new("Certificado - EEGSAC", Mm(210.0), Mm(297.0), "Layer 1");
 
     let current_layer = doc.get_page(page1).get_layer(layer1);
 
@@ -369,6 +370,7 @@ fn convert_to_pdf(image_path: &PathBuf, output_path: &PathBuf) -> Result<(), Str
 
     let result = doc.save(&mut BufWriter::new(File::create(output_path).unwrap()));
 
+    // TODO: Delete image
     match result {
         Ok(_) => Ok(()),
         Err(reason) => {

frontend/src/Scans/ScansList.tsx

@@ -0,0 +1,116 @@
+import { For, createMemo } from "solid-js";
+import { ScanData, ScanResult } from ".";
+import { FilledButton } from "../components/FilledButton";
+import { FilledCard } from "../components/FilledCard";
+import { LoadingIcon } from "../icons/LoadingIcon";
+import { PDFIcon } from "../icons/PDFIcon";
+import { LoadingStatus, useLoading } from "../utils/functions";
+
+export function ScansList(props: {scanData: ScanData | null}) {
+    const {status, setStatus, error, setError} = useLoading();
+
+    const loading = createMemo(() => status() === LoadingStatus.Loading);
+
+    const convertScans = () => {
+        setStatus(LoadingStatus.Loading);
+
+        if (props.scanData === null) {
+            setError("No se detectaron escaneos");
+            setStatus(LoadingStatus.Error);
+            return;
+        }
+
+
+        fetch(
+            `${import.meta.env.VITE_BACKEND_URL}/api/scans/convert`,
+            {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(props.scanData),
+            },
+        )
+            .then((res) => res.json())
+            .then((res) => {
+                setStatus(LoadingStatus.Ok);
+                console.log(res);
+            })
+            .catch((err) => {
+                setStatus(LoadingStatus.Error);
+                console.error(err);
+            });
+    };
+
+    return (
+        <FilledCard class="border border-c-outline overflow-hidden">
+            <h1 class="p-3 font-medium text-xl">
+                        Escaneos detectados
+            </h1>
+
+            <div class="bg-c-surface py-2">
+                <For each={props.scanData?.Ok ?? []}>
+                    {([path, result]) => (
+                        <p class="py-1 px-4 hover:bg-c-surface-variant transition-colors">
+                            <span class="font-mono">
+                                {path.substring(path.lastIndexOf("/") + 1)}
+                            </span>
+                            <br />
+                            {dataFromScanResult(result)}
+                        </p>
+                    )}
+                </For>
+            </div>
+
+            <p class="p-4">
+                        - Al convertir los escaneos a PDF se eliminan los archivos JPG.
+                <br />
+                        - Solo se convertiran los escaneos mostrados en esta lista.
+                <br />
+                        - En la lista se muestran los nombres originales de los archivos.
+                        Sin embargo, en el disco se cambiaron de nombre para asegurarse de
+                        que solo 1 persona pueda transformarlos a la vez.
+            </p>
+
+            <div class="relative mx-4 mb-4">
+                <FilledButton
+                    onClick={convertScans}
+                    disabled={loading()}
+                >
+                    <span
+                        class="absolute top-[1.35rem] left-2"
+                        style={{display: loading() ? "none" : "inline-block"}}
+                    >
+                        <PDFIcon
+                            fill="var(--c-on-primary)"
+                        />
+                    </span>
+                    <span
+                        class="absolute top-[1.35rem] left-2"
+                        style={{display: loading() ? "inline-block" : "none"}}
+                    >
+                        <LoadingIcon
+                            class="animate-spin"
+                            fill="var(--c-primary-container)"
+                        />
+                    </span>
+
+                    <span class="ml-5">
+                                Convertir escaneos
+                    </span>
+                </FilledButton>
+            </div>
+        </FilledCard>
+    );
+}
+
+
+function dataFromScanResult(result: ScanResult) {
+    if ("Full" in result) {
+        return `DNI: ${result.Full[0]}, iid: ${result.Full[1]}`;
+    } else if ("Partial" in result) {
+        return `DNI: ${result.Partial[0]}`;
+    } else if ("Error" in result) {
+        return `Error: ${result.Error}`;
+    }
+}

frontend/src/Scans/index.tsx

@@ -1,33 +1,25 @@
-import { For, createMemo, createSignal } from "solid-js";
+import { createMemo, createSignal } from "solid-js";
 import { FilledButton } from "../components/FilledButton";
 import { FilledCard } from "../components/FilledCard";
 import { LoadingIcon } from "../icons/LoadingIcon";
 import { MagnifyingGlassIcon } from "../icons/MagnifyingGlassIcon";
 import { LoadingStatus, useLoading } from "../utils/functions";
-import { PDFIcon } from "../icons/PDFIcon";
+import { ScansList } from "./ScansList";
 
 /**
  * Represents the data about the scans that were detected.
  * Serialization & Deserialization is done by the backend.
  */
-interface ScanData {
+export interface ScanData {
     Ok: Array<[string, ScanResult]>,
 }
 
-type ScanResult =
+export type ScanResult =
 | {Full: [string, number, string]}
 | {Partial: [string, string]}
 | {Error: string};
 
-function dataFromScanResult(result: ScanResult) {
+
-    if ("Full" in result) {
-        return `DNI: ${result.Full[0]}, iid: ${result.Full[1]}`;
-    } else if ("Partial" in result) {
-        return `DNI: ${result.Partial[0]}`;
-    } else if ("Error" in result) {
-        return `Error: ${result.Error}`;
-    }
-}
 
 export function Scans() {
     const {status, setStatus, error, setError} = useLoading();
@@ -51,36 +43,6 @@ export function Scans() {
             });
     };
 
-    const convertScans = () => {
-        setStatus(LoadingStatus.Loading);
-
-        if (scanData() === null) {
-            setError("No se detectaron escaneos");
-            setStatus(LoadingStatus.Error);
-            return;
-        }
-
-
-        fetch(
-            `${import.meta.env.VITE_BACKEND_URL}/api/scans/convert`,
-            {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify(scanData()),
-            },
-        )
-            .then((res) => res.json())
-            .then((res) => {
-                setStatus(LoadingStatus.Ok);
-                console.log(res);
-            })
-            .catch((err) => {
-                setStatus(LoadingStatus.Error);
-                console.error(err);
-            });
-    };
 
     return (
         <div class="grid grid-cols-[25rem_25rem_auto]">
@@ -147,13 +109,6 @@ export function Scans() {
                             que cumplen con los parámetros de detección
                             en la carpeta <code>ESCANEOS</code>, y los mostrará en una lista.
                         </p>
-                        <p class="my-2">
-                            La detección demora aprox. 1 segundo por cada archivo que
-                            cumple con los parámetros.
-                        </p>
-                        <p class="my-2">
-                            Si la detección demora más de 90 segundos, se cancelará.
-                        </p>
 
 
                         <div class="relative">
@@ -188,64 +143,7 @@ export function Scans() {
                 </FilledCard>
             </div>
             <div>
-                <FilledCard class="border border-c-outline overflow-hidden">
+                <ScansList scanData={scanData()} />
-                    <h1 class="p-3 font-medium text-xl">
-                        Escaneos detectados
-                    </h1>
-
-                    <div class="bg-c-surface py-2">
-                        <For each={scanData()?.Ok ?? []}>
-                            {([path, result]) => (
-                                <p class="py-1 px-4 hover:bg-c-surface-variant transition-colors">
-                                    <span class="font-mono">
-                                        {path.substring(path.lastIndexOf("/") + 1)}
-                                    </span>
-                                    <br />
-                                    {dataFromScanResult(result)}
-                                </p>
-                            )}
-                        </For>
-                    </div>
-
-                    <p class="p-4">
-                        - Al convertir los escaneos a PDF se eliminan los archivos JPG.
-                        <br />
-                        - Solo se convertiran los escaneos mostrados en esta lista.
-                        <br />
-                        - Si ejecutas la detección de escaneos nuevamente los nombres de
-                        los archivos cambiarán. Esto es normal. El contenido de los JPG
-                        es el mismo.
-                    </p>
-
-                    <div class="relative mx-4 mb-4">
-                        <FilledButton
-                            onClick={convertScans}
-                            disabled={loading()}
-                        >
-                            <span
-                                class="absolute top-[1.35rem] left-2"
-                                style={{display: loading() ? "none" : "inline-block"}}
-                            >
-                                <PDFIcon
-                                    fill="var(--c-on-primary)"
-                                />
-                            </span>
-                            <span
-                                class="absolute top-[1.35rem] left-2"
-                                style={{display: loading() ? "inline-block" : "none"}}
-                            >
-                                <LoadingIcon
-                                    class="animate-spin"
-                                    fill="var(--c-primary-container)"
-                                />
-                            </span>
-
-                            <span class="ml-5">
-                                Convertir escaneos
-                            </span>
-                        </FilledButton>
-                    </div>
-                </FilledCard>
             </div>
         </div>
     );