[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 { 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";
|
||||
import { QuestionIcon } from "../icons/QuestionIcon";
|
||||
|
||||
export function ScansList(props: {scanData: ScanData | null}) {
|
||||
const {status, setStatus, error, setError} = useLoading();
|
||||
|
||||
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 = () => {
|
||||
setStatus(LoadingStatus.Loading);
|
||||
|
||||
|
|
@ -43,39 +66,56 @@ export function ScansList(props: {scanData: ScanData | null}) {
|
|||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Show when={props.scanData !== null}>
|
||||
<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>
|
||||
<Show when={empty()}>
|
||||
<div class="px-4 pb-2">
|
||||
<div class="text-center pt-6 pb-4">
|
||||
<QuestionIcon class="scale-[200%]" fill="var(--c-outline)" />
|
||||
</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 />
|
||||
{dataFromScanResult(result)}
|
||||
<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>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
|
||||
<p class="p-4">
|
||||
- Al convertir los escaneos a PDF se eliminan los archivos JPG.
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<p class="px-4 pt-4">
|
||||
El sig. botón:
|
||||
<br />
|
||||
- Solo se convertiran los escaneos mostrados en esta lista.
|
||||
- Convierte los escaneos con QR por completo (1), (2), (3) y (4).
|
||||
<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.
|
||||
- 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()}
|
||||
disabled={loading() || empty()}
|
||||
>
|
||||
<span
|
||||
class="absolute top-[1.35rem] left-2"
|
||||
|
|
@ -101,6 +141,8 @@ export function ScansList(props: {scanData: ScanData | null}) {
|
|||
</FilledButton>
|
||||
</div>
|
||||
</FilledCard>
|
||||
</Show>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -47,6 +47,30 @@ export function Scans() {
|
|||
return (
|
||||
<div class="grid grid-cols-[25rem_25rem_auto]">
|
||||
<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>
|
||||
<h1 class="py-2 px-4 font-medium text-xl mb-2">
|
||||
Parámetros de detección
|
||||
|
|
@ -99,6 +123,8 @@ export function Scans() {
|
|||
</div>
|
||||
</FilledCard>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<FilledCard>
|
||||
<h1 class="py-2 px-4 font-medium text-xl mb-2">
|
||||
Detectar escaneos
|
||||
|
|
@ -107,7 +133,7 @@ export function Scans() {
|
|||
<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.
|
||||
en la carpeta <code>ESCANEOS</code>, y mostrará los resultados abajo.
|
||||
</p>
|
||||
|
||||
|
||||
|
|
@ -141,8 +167,7 @@ export function Scans() {
|
|||
</div>
|
||||
</div>
|
||||
</FilledCard>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<ScansList scanData={scanData()} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue