119 lines
5.2 KiB
TypeScript
119 lines
5.2 KiB
TypeScript
import { FilledButton } from "../components/FilledButton";
|
|
import { FilledCard } from "../components/FilledCard";
|
|
import { MagnifyingGlassIcon } from "../icons/MagnifyingGlassIcon";
|
|
|
|
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">
|
|
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
|
|
<code class="border border-c-outline rounded p-1 bg-c-background">
|
|
jpg
|
|
</code>
|
|
</li>
|
|
<li>
|
|
El nombre del archivo debe iniciar con
|
|
<code class="border border-c-outline rounded p-1 bg-c-background">
|
|
eeg
|
|
</code>
|
|
</li>
|
|
<li>
|
|
El nombre del archivo debe terminar en
|
|
<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">
|
|
<p>
|
|
El siguiente botón detectará los archivos
|
|
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">
|
|
<FilledButton
|
|
class="mt-2"
|
|
onClick={detectScans}
|
|
>
|
|
<span
|
|
class="absolute top-[0.9rem] left-2 inline-block"
|
|
>
|
|
<MagnifyingGlassIcon
|
|
fill="var(--c-on-primary)"
|
|
/>
|
|
</span>
|
|
<span class="ml-5">
|
|
Detectar escaneos
|
|
</span>
|
|
</FilledButton>
|
|
</div>
|
|
</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>
|
|
);
|
|
}
|