eeg_certs/frontend/src/Scans/index.tsx

import { FilledButton } from "../components/FilledButton";
import { FilledCard } from "../components/FilledCard";

export function Scans() {
    const detectScans = () => {
        fetch(`${import.meta.env.VITE_BACKEND_URL}/api/scans/detect`)
            .then((res) => res.json())
            .then(console.log);
    };

    return (
        <div class="grid grid-cols-[25rem_25rem_auto]">
            <div>
                <FilledCard>
                    <h1 class="py-2 px-4 font-medium text-xl mb-2">
                        Ruta de la carpeta "Certificados"
                    </h1>
                    <div class="px-2">
                        <input
                            class="w-full p-2 border border-c-outline rounded-md font-mono"
                            type="text"
                            value="/srv/srv/shares/eegsac/ESCANEOS/"
                        />

                        <p class="py-2 px-2">
                            Si no hay ningún problema con la ruta, no es necesario cambiarla.
                            <br />
                            Esta ruta es relativa al servidor, no al cliente.
                        </p>
                    </div>
                </FilledCard>

                <FilledCard>
                    <h1 class="py-2 px-4 font-medium text-xl mb-2">
                        Parámetros de detección
                    </h1>
                    <div class="px-4 pb-4">
                        Para que el sistema detecte y clasifique automáticamente los escaneos
                        se debe cumplir lo siguiente:
                        <ol class="py-2 px-2 list-decimal list-inside">
                            <li>
                                Escanear el certificado en formato&nbsp;
                                <code class="border border-c-outline rounded p-1 bg-c-background">
                                    jpg
                                </code>
                            </li>
                            <li>
                                El nombre del archivo debe iniciar con&nbsp;
                                <code class="border border-c-outline rounded p-1 bg-c-background">
                                    eeg
                                </code>
                            </li>
                            <li>
                                El nombre del archivo debe terminar en&nbsp;
                                <code class="border border-c-outline rounded p-1 bg-c-background">
                                    .jpg
                                </code>
                            </li>
                            <li>
                                El nombre del archivo puede tener otras letras en medio,
                                siempre que se cumplan las condiciones anteriores.
                            </li>
                        </ol>
                        Por ejemplo, los siguientes nombres de archivo son válidos:
                        <ul class="py-2 px-2 list-disc list-inside">
                            <li>
                                <code class="border border-c-outline rounded p-1 bg-c-background">
                                    eeg.jpg
                                </code>
                            </li>
                            <li>
                                <code class="border border-c-outline rounded p-1 bg-c-background">
                                    eeg0001.jpg
                                </code>
                            </li>
                            <li>
                                <code class="border border-c-outline rounded p-1 bg-c-background">
                                    eeg archivo con letras en medio.jpg
                                </code>
                            </li>
                        </ul>
                    </div>
                </FilledCard>
            </div>
            <div>
                <FilledCard>
                    <h1 class="py-2 px-4 font-medium text-xl mb-2">
                        Detectar escaneos
                    </h1>
                    <div class="px-4 pb-4">
                        El siguiente botón detectará los escaneos en la carpeta
                        que cumplen con los parámetros de detección, y los mostrará
                        en una lista.
                        <br />
                        <FilledButton
                            class="mt-2"
                            onClick={detectScans}
                        >
                            Detectar escaneos
                        </FilledButton>
                    </div>
                </FilledCard>
                <FilledCard class="border border-c-outline overflow-hidden">
                    <h1 class="p-3 font-medium text-xl">
                        Escaneos detectados
                    </h1>

                    <div class="bg-c-surface p-4">
                        :D
                    </div>
                </FilledCard>
            </div>
        </div>
    );
}