117 lines
4.0 KiB
TypeScript
117 lines
4.0 KiB
TypeScript
|
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}`;
|
||
|
|
}
|
||
|
|
}
|