fernando
/
eeg_certs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changes to UI

master
Araozu 2023-11-16 17:02:22 -05:00
parent 16b9cecd73
commit 57f69a6096
3 changed files with 126 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
backend/src/controller/scans/mod.rs
View File

@ -344,11 +344,12 @@ fn convert_to_pdf(image_path: &PathBuf, output_path: &PathBuf) -> Result<(), Str
};
// Rotate image 45 degrees clockwise
let img = img.rotate270();
// let img = img.rotate270();
// Generate PDF
let (doc, page1, layer1) =
PdfDocument::new("Certificado - EEGSAC", Mm(297.0), Mm(210.0), "Layer 1");
// PdfDocument::new("Certificado - EEGSAC", Mm(297.0), Mm(210.0), "Layer 1");
PdfDocument::new("Certificado - EEGSAC", Mm(210.0), Mm(297.0), "Layer 1");
let current_layer = doc.get_page(page1).get_layer(layer1);
@ -369,6 +370,7 @@ fn convert_to_pdf(image_path: &PathBuf, output_path: &PathBuf) -> Result<(), Str
let result = doc.save(&mut BufWriter::new(File::create(output_path).unwrap()));
// TODO: Delete image
match result {
Ok(_) => Ok(()),
Err(reason) => {

116
frontend/src/Scans/ScansList.tsx Normal file
View File

@ -0,0 +1,116 @@
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}`;
}
}

114
frontend/src/Scans/index.tsx
View File

@ -1,33 +1,25 @@
import { For, createMemo, createSignal } from "solid-js";
import { createMemo, createSignal } from "solid-js";
import { FilledButton } from "../components/FilledButton";
import { FilledCard } from "../components/FilledCard";
import { LoadingIcon } from "../icons/LoadingIcon";
import { MagnifyingGlassIcon } from "../icons/MagnifyingGlassIcon";
import { LoadingStatus, useLoading } from "../utils/functions";
import { PDFIcon } from "../icons/PDFIcon";
import { ScansList } from "./ScansList";
/**
* Represents the data about the scans that were detected.
* Serialization & Deserialization is done by the backend.
*/
interface ScanData {
export interface ScanData {
Ok: Array<[string, ScanResult]>,
}
type ScanResult =
export type ScanResult =
| {Full: [string, number, string]}
| {Partial: [string, string]}
| {Error: string};
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}`;
}
}
export function Scans() {
const {status, setStatus, error, setError} = useLoading();
@ -51,36 +43,6 @@ export function Scans() {
});
};
const convertScans = () => {
setStatus(LoadingStatus.Loading);
if (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(scanData()),
},
)
.then((res) => res.json())
.then((res) => {
setStatus(LoadingStatus.Ok);
console.log(res);
})
.catch((err) => {
setStatus(LoadingStatus.Error);
console.error(err);
});
};
return (
<div class="grid grid-cols-[25rem_25rem_auto]">
@ -147,13 +109,6 @@ export function Scans() {
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">
@ -188,64 +143,7 @@ export function Scans() {
</FilledCard>
</div>
<div>
<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={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 />
- Si ejecutas la detección de escaneos nuevamente los nombres de
los archivos cambiarán. Esto es normal. El contenido de los JPG
es el mismo.
</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>
<ScansList scanData={scanData()} />
</div>
</div>
);