From c52d4620c702db6ec0039b79fa13e23c67ebe66e Mon Sep 17 00:00:00 2001 From: Araozu Date: Tue, 28 Nov 2023 16:31:55 -0500 Subject: [PATCH] [FE][Certs] Generate carnets for machineries --- frontend/src/App.tsx | 13 ++ frontend/src/carnetGenerator/machinery.ts | 137 ++++++++++++++++++ frontend/src/carnetGenerator/matpel.ts | 105 ++++++++++++++ .../src/certs/Registers/RegisterElement.tsx | 46 ++++-- 4 files changed, 292 insertions(+), 9 deletions(-) create mode 100644 frontend/src/carnetGenerator/machinery.ts create mode 100644 frontend/src/carnetGenerator/matpel.ts diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index e619e4f..83db25c 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -5,6 +5,7 @@ import { NavRail } from "./components/NavRail"; import { OnlineClassroom } from "./OnlineClassroom"; import { Scans } from "./Scans"; import { Reports } from "./Reports"; +import { genMachineryCarnet } from "./carnetGenerator/machinery"; const App: Component = () => (
@@ -21,10 +22,22 @@ const App: Component = () => ( function Builder() { + const svgRaw = genMachineryCarnet({ + fullname: "FERNANDO ENRIQUE ARAOZ MORALES", + dni: "74059695", + code: "0123", + expiryMonth: "NOVIEMBRE", + expiryYear: "2023", + qrBase64: "", + certName: "RETROEXCAVADORA", + certCustomLabel: "246D3 CAT", + }); + return (

En construccion

:D

+
); } diff --git a/frontend/src/carnetGenerator/machinery.ts b/frontend/src/carnetGenerator/machinery.ts new file mode 100644 index 0000000..7136443 --- /dev/null +++ b/frontend/src/carnetGenerator/machinery.ts @@ -0,0 +1,137 @@ +export function genMachineryCarnet(d: { + fullname: string, + dni: string, + code: string, + expiryMonth: string, + expiryYear: string, + qrBase64: string, + certName: string, + certCustomLabel: string, +}) { + const { fullname, dni, code, expiryMonth, expiryYear, qrBase64 } = d; + + return ` + + + + + OPERADOR PROFESIONAL DE + + + ${d.certName.toUpperCase()} + + + ${fullname.toUpperCase()} + + + DNI: ${dni} + + + ${code}-${expiryYear}-EEG + + + ${code}-${expiryYear}-EEG + + + Operador de ${d.certName} + + + ${d.certCustomLabel} + + + ${expiryMonth.toUpperCase()} ${parseInt(expiryYear, 10) + 1} + + + `; +} diff --git a/frontend/src/carnetGenerator/matpel.ts b/frontend/src/carnetGenerator/matpel.ts new file mode 100644 index 0000000..31fbc25 --- /dev/null +++ b/frontend/src/carnetGenerator/matpel.ts @@ -0,0 +1,105 @@ +export function genMatpelCarnet(d: { + fullname: string, + dni: string, + code: string, + expiryMonth: string, + expiryYear: string, + qrBase64: string, +}) { + const { fullname, dni, code, expiryMonth, expiryYear, qrBase64 } = d; + + return ` + + + + + ${fullname.toUpperCase()} + + + DNI: ${dni} + + + ${code}-${expiryYear}-EEG + + + ${code}-${expiryYear}-EEG + + + ${expiryMonth.toUpperCase()} ${parseInt(expiryYear, 10) + 1} + + + `; +} diff --git a/frontend/src/certs/Registers/RegisterElement.tsx b/frontend/src/certs/Registers/RegisterElement.tsx index 0a1261a..0b84ff6 100644 --- a/frontend/src/certs/Registers/RegisterElement.tsx +++ b/frontend/src/certs/Registers/RegisterElement.tsx @@ -8,13 +8,21 @@ import { DownloadSimpleIcon } from "../../icons/DownloadSimpleIcon"; import { CaretRight } from "../../icons/CaretRight"; import { IdentificationCardIcon } from "../../icons/IdentificationCardIcon"; import { numberToMonth } from "../../utils/functions"; -import { genCarnet } from "../../utils/carnetGenerator"; import { Canvg } from "canvg"; import QR from "qrcode"; import saveAs from "file-saver"; +import { genMatpelCarnet } from "../../carnetGenerator/matpel"; +import { genMachineryCarnet } from "../../carnetGenerator/machinery"; -// TODO: use -// const carnetEnabledIds = [12]; +const carnetEnabled = [ + "Matpel 3", + "Cargador Frontal", + "Excavadora", + "Retroexcavadora", + "Volquete", + "Minicargador", + "Tractor Oruga", +]; export function RegisterElement(props: {register: Register, person: Person, onClick: () => void}) { @@ -51,9 +59,7 @@ export function RegisterElement(props: {register: Register, person: Person, onCl return certGenerator[courseN] !== undefined; }; - // TODO: Check if the course is enabled for carnet generation - // with the list above - const canGenerateCarnet = () => props.register.register_course_id === 12; + const canGenerateCarnet = () => carnetEnabled.find((c) => c === courseName()) !== undefined; const gridClass = () => (canGenerateCarnet() ? "grid-cols-[11rem_1.5rem_1.5rem_1.25rem]" : "grid-cols-[12.5rem_1.5rem_1.25rem]"); @@ -66,7 +72,7 @@ export function RegisterElement(props: {register: Register, person: Person, onCl const p = props.person; const r = props.register; - generateCarnetImpl(p, r); + generateCarnetImpl(p, r, courseName(), customLabel()); }; const createdTodayClasses = () => { @@ -185,7 +191,7 @@ export function generateCert(person: Person, register: Register) { }); } -export function generateCarnetImpl(p: Person, r: Register) { +export function generateCarnetImpl(p: Person, r: Register, certName: string, certCustomLabel: string) { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d") as CanvasRenderingContext2D; @@ -208,14 +214,19 @@ export function generateCarnetImpl(p: Person, r: Register) { } const fullname = `${p.person_names} ${p.person_paternal_surname} ${p.person_maternal_surname}`; - const svgHtml = genCarnet({ + + const svgHtml = generateCarnet({ fullname, dni: p.person_dni.toString(), code: r.register_code.toString().padStart(4, "0"), expiryMonth, expiryYear, qrBase64: base64, + certName, + certCustomLabel, }); + + const v = Canvg.fromString(ctx, svgHtml); v.start(); v.ready().then(() => { @@ -229,3 +240,20 @@ export function generateCarnetImpl(p: Person, r: Register) { }); }); } + +function generateCarnet(d: { + fullname: string, + dni: string, + code: string, + expiryMonth: string, + expiryYear: string, + qrBase64: string, + certName: string, + certCustomLabel: string, +}): string { + if (d.certName === "Matpel 3") { + return genMatpelCarnet(d); + } else { + return genMachineryCarnet(d); + } +}