From 88da49a052209ac88546ea6f1f81db66a06979ac Mon Sep 17 00:00:00 2001 From: Araozu Date: Tue, 21 Nov 2023 12:11:09 -0500 Subject: [PATCH] [FE][Scans] Improve UI to display relevant information --- frontend/src/Scans/ScansList.tsx | 150 ++++++++++++++++++++----------- frontend/src/Scans/index.tsx | 31 ++++++- 2 files changed, 124 insertions(+), 57 deletions(-) diff --git a/frontend/src/Scans/ScansList.tsx b/frontend/src/Scans/ScansList.tsx index 63c20ce..d006645 100644 --- a/frontend/src/Scans/ScansList.tsx +++ b/frontend/src/Scans/ScansList.tsx @@ -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,64 +66,83 @@ export function ScansList(props: {scanData: ScanData | null}) { }; return ( - -

+ <> + + +

Escaneos detectados -

+

-
- - {([path, result]) => ( -

- - {path.substring(path.lastIndexOf("/") + 1)} +

+ +
+
+ +
+

No se encontraron archivos que cumplan con los parámetros.

+
+ + + +
+ Se detectaron: +
+

+ - {entriesCount()[0]} archivos + con QR (nombres y curso) +

+

+ - {entriesCount()[1]} archivos + con QR (solo nombres) +

+

+ - {entriesCount()[2]} archivos sin QR +

+
+ + +
+ +

+ El sig. botón: +
+ - Convierte los escaneos con QR por completo (1), (2), (3) y (4). +
+ - Convierte los escaneos sin QR solo en (1), (2) y (3). Se debe realizar + (4) manualmente. +

+ +
+ + + + + + -
- {dataFromScanResult(result)} -

- )} - -
-

- - Al convertir los escaneos a PDF se eliminan los archivos JPG. -
- - Solo se convertiran los escaneos mostrados en esta lista. -
- - 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. -

- -
- - - - - - - - - + Convertir escaneos - - -
- + + +
+ + + ); } diff --git a/frontend/src/Scans/index.tsx b/frontend/src/Scans/index.tsx index 2b463f3..8f56939 100644 --- a/frontend/src/Scans/index.tsx +++ b/frontend/src/Scans/index.tsx @@ -47,6 +47,30 @@ export function Scans() { return (
+ +

+ Escaneos +

+
+ Esta sección del sistema realiza lo siguiente: +
+ (1) Detecta el código QR en los escaneos +
+ (2) Rota el escaneo a posición horizontal +
+ (3) Convierte los escaneos a PDF +
+ (4) Coloca el nombre correcto al PDF según el formato: +
+ + <NOMBRES> <APELLIDOS> - <CURSO>.pdf + +
+ Si el sistema no detecta el código QR, se debe realizar el + paso (4) manualmente. +
+ +

Parámetros de detección @@ -99,6 +123,8 @@ export function Scans() {

+
+

Detectar escaneos @@ -107,7 +133,7 @@ export function Scans() {

El siguiente botón detectará los archivos que cumplen con los parámetros de detección - en la carpeta ESCANEOS, y los mostrará en una lista. + en la carpeta ESCANEOS, y mostrará los resultados abajo.

@@ -141,8 +167,7 @@ export function Scans() {

- -
+