[FE][Scans] Improve UI to display relevant information
Araozu
parent
a1bae5e795
commit
88da49a052
|
|
@ -1,16 +1,39 @@
|
||||||
import { For, createMemo } from "solid-js";
|
import { For, Show, createMemo } from "solid-js";
|
||||||
import { ScanData, ScanResult } from ".";
|
import { ScanData, ScanResult } from ".";
|
||||||
import { FilledButton } from "../components/FilledButton";
|
import { FilledButton } from "../components/FilledButton";
|
||||||
import { FilledCard } from "../components/FilledCard";
|
import { FilledCard } from "../components/FilledCard";
|
||||||
import { LoadingIcon } from "../icons/LoadingIcon";
|
import { LoadingIcon } from "../icons/LoadingIcon";
|
||||||
import { PDFIcon } from "../icons/PDFIcon";
|
import { PDFIcon } from "../icons/PDFIcon";
|
||||||
import { LoadingStatus, useLoading } from "../utils/functions";
|
import { LoadingStatus, useLoading } from "../utils/functions";
|
||||||
|
import { QuestionIcon } from "../icons/QuestionIcon";
|
||||||
|
|
||||||
export function ScansList(props: {scanData: ScanData | null}) {
|
export function ScansList(props: {scanData: ScanData | null}) {
|
||||||
const {status, setStatus, error, setError} = useLoading();
|
const {status, setStatus, error, setError} = useLoading();
|
||||||
|
|
||||||
const loading = createMemo(() => status() === LoadingStatus.Loading);
|
const loading = createMemo(() => status() === LoadingStatus.Loading);
|
||||||
|
|
||||||
|
const empty = createMemo(() => props.scanData?.Ok.length === 0);
|
||||||
|
|
||||||
|
const entriesCount = createMemo(() => {
|
||||||
|
if (props.scanData === null) return [0, 0];
|
||||||
|
|
||||||
|
let fullCount = 0;
|
||||||
|
let partialCount = 0;
|
||||||
|
let invalidCount = 0;
|
||||||
|
|
||||||
|
for (const [, result] of props.scanData.Ok) {
|
||||||
|
if ("Full" in result) {
|
||||||
|
fullCount += 1;
|
||||||
|
} else if ("Partial" in result) {
|
||||||
|
partialCount += 1;
|
||||||
|
} else {
|
||||||
|
invalidCount += 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return [fullCount, partialCount, invalidCount];
|
||||||
|
});
|
||||||
|
|
||||||
const convertScans = () => {
|
const convertScans = () => {
|
||||||
setStatus(LoadingStatus.Loading);
|
setStatus(LoadingStatus.Loading);
|
||||||
|
|
||||||
|
|
@ -43,64 +66,83 @@ export function ScansList(props: {scanData: ScanData | null}) {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FilledCard class="border border-c-outline overflow-hidden">
|
<>
|
||||||
<h1 class="p-3 font-medium text-xl">
|
<Show when={props.scanData !== null}>
|
||||||
|
<FilledCard class="border border-c-outline overflow-hidden">
|
||||||
|
<h1 class="p-3 font-medium text-xl">
|
||||||
Escaneos detectados
|
Escaneos detectados
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<div class="bg-c-surface py-2">
|
<div class="bg-c-surface py-2">
|
||||||
<For each={props.scanData?.Ok ?? []}>
|
<Show when={empty()}>
|
||||||
{([path, result]) => (
|
<div class="px-4 pb-2">
|
||||||
<p class="py-1 px-4 hover:bg-c-surface-variant transition-colors">
|
<div class="text-center pt-6 pb-4">
|
||||||
<span class="font-mono">
|
<QuestionIcon class="scale-[200%]" fill="var(--c-outline)" />
|
||||||
{path.substring(path.lastIndexOf("/") + 1)}
|
</div>
|
||||||
|
<p>No se encontraron archivos que cumplan con los parámetros.</p>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
<Show when={!empty()}>
|
||||||
|
<div class="px-4">
|
||||||
|
Se detectaron:
|
||||||
|
<br />
|
||||||
|
<p>
|
||||||
|
- <span class="font-mono">{entriesCount()[0]}</span> archivos
|
||||||
|
con QR (nombres y curso)
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
- <span class="font-mono">{entriesCount()[1]}</span> archivos
|
||||||
|
con QR (solo nombres)
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
- <span class="font-mono">{entriesCount()[2]}</span> archivos sin QR
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="px-4 pt-4">
|
||||||
|
El sig. botón:
|
||||||
|
<br />
|
||||||
|
- Convierte los escaneos con QR por completo (1), (2), (3) y (4).
|
||||||
|
<br />
|
||||||
|
- Convierte los escaneos sin QR solo en (1), (2) y (3). Se debe realizar
|
||||||
|
(4) manualmente.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="relative mx-4 mb-4">
|
||||||
|
<FilledButton
|
||||||
|
onClick={convertScans}
|
||||||
|
disabled={loading() || empty()}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
<br />
|
|
||||||
{dataFromScanResult(result)}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="p-4">
|
<span class="ml-5">
|
||||||
- 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
|
Convertir escaneos
|
||||||
</span>
|
</span>
|
||||||
</FilledButton>
|
</FilledButton>
|
||||||
</div>
|
</div>
|
||||||
</FilledCard>
|
</FilledCard>
|
||||||
|
</Show>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -47,6 +47,30 @@ export function Scans() {
|
||||||
return (
|
return (
|
||||||
<div class="grid grid-cols-[25rem_25rem_auto]">
|
<div class="grid grid-cols-[25rem_25rem_auto]">
|
||||||
<div>
|
<div>
|
||||||
|
<FilledCard>
|
||||||
|
<h1 class="py-2 px-4 font-medium text-xl mb-2">
|
||||||
|
Escaneos
|
||||||
|
</h1>
|
||||||
|
<div class="px-4 pb-4">
|
||||||
|
Esta sección del sistema realiza lo siguiente:
|
||||||
|
<br />
|
||||||
|
(1) Detecta el código QR en los escaneos
|
||||||
|
<br />
|
||||||
|
(2) Rota el escaneo a posición horizontal
|
||||||
|
<br />
|
||||||
|
(3) Convierte los escaneos a PDF
|
||||||
|
<br />
|
||||||
|
(4) Coloca el nombre correcto al PDF según el formato:
|
||||||
|
<br />
|
||||||
|
<code class="border border-c-outline rounded p-1 bg-c-background">
|
||||||
|
<NOMBRES> <APELLIDOS> - <CURSO>.pdf
|
||||||
|
</code>
|
||||||
|
<hr class="my-2" />
|
||||||
|
Si el sistema no detecta el código QR, se debe realizar el
|
||||||
|
paso (4) manualmente.
|
||||||
|
</div>
|
||||||
|
</FilledCard>
|
||||||
|
|
||||||
<FilledCard>
|
<FilledCard>
|
||||||
<h1 class="py-2 px-4 font-medium text-xl mb-2">
|
<h1 class="py-2 px-4 font-medium text-xl mb-2">
|
||||||
Parámetros de detección
|
Parámetros de detección
|
||||||
|
|
@ -99,6 +123,8 @@ export function Scans() {
|
||||||
</div>
|
</div>
|
||||||
</FilledCard>
|
</FilledCard>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
<FilledCard>
|
<FilledCard>
|
||||||
<h1 class="py-2 px-4 font-medium text-xl mb-2">
|
<h1 class="py-2 px-4 font-medium text-xl mb-2">
|
||||||
Detectar escaneos
|
Detectar escaneos
|
||||||
|
|
@ -107,7 +133,7 @@ export function Scans() {
|
||||||
<p>
|
<p>
|
||||||
El siguiente botón detectará los archivos
|
El siguiente botón detectará los archivos
|
||||||
que cumplen con los parámetros de detección
|
que cumplen con los parámetros de detección
|
||||||
en la carpeta <code>ESCANEOS</code>, y los mostrará en una lista.
|
en la carpeta <code>ESCANEOS</code>, y mostrará los resultados abajo.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -141,8 +167,7 @@ export function Scans() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</FilledCard>
|
</FilledCard>
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<ScansList scanData={scanData()} />
|
<ScansList scanData={scanData()} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue