[FE] Fixes #25: Load cert images lazily

frontend/src/certGenerator/certs/4X4.ts

@@ -10,6 +10,13 @@ import {
 import { cmText, createSimpleText, getImage, getQR } from "./utils";
 import { CertData } from "./CertData";
 
+
+export async function _4X4Cert(props: CertData<null>): Promise<Document> {
+    // All these resources compose the certificate.
+    // They load images from the server,
+    // and so are here, so they are loaded only when the certificate is generated,
+    // and not when the app is loaded.
+
     const {
         Document, Paragraph, PageOrientation,
         FrameAnchorType,
@@ -152,8 +159,6 @@ const photoSection = new Paragraph({
         alignment: AlignmentType.LEFT,
     });
 
-
-export async function _4X4Cert(props: CertData<null>): Promise<Document> {
     const imgQR = await getQR({
         iid: props.certIId,
         dni: props.personDni,

frontend/src/certGenerator/certs/CARGADOR_FRONTAL.ts

@@ -9,6 +9,8 @@ const {
     BorderStyle,
 } = window.docx;
 
+export async function cargadorFrontal(props: CertData<null>): Promise<Document> {
+
     const imgFondoDoc = getImage({
         name: "fondo_certificado_4x4.png",
         height: 21.03,
@@ -98,7 +100,6 @@ const photoSection = new Paragraph({
     });
 
 
-export async function cargadorFrontal(props: CertData<null>): Promise<Document> {
     const hasCustomLabel = (props.certCustomLabel?.length ?? 0) > 0;
     const customLabelYOffset = 0.8;
 

frontend/src/certGenerator/certs/EXCAVADORA_HIDRAULICA.ts

@@ -9,6 +9,9 @@ const {
     BorderStyle,
 } = window.docx;
 
+
+export async function excavadoraHidraulica(props: CertData<null>): Promise<Document> {
+
     const imgFondoDoc = getImage({
         name: "fondo_certificado_4x4.png",
         height: 21.03,
@@ -123,7 +126,6 @@ const photoSection = new Paragraph({
     });
 
 
-export async function excavadoraHidraulica(props: CertData<null>): Promise<Document> {
     // OPERADOR PROFESIONAL DE EXCAVADORA HIDRÁULICA
     const tCourse = createSimpleText({
         xPosition: 2.2,

frontend/src/certGenerator/certs/EXTINTORES.ts

@@ -10,6 +10,7 @@ const {
 } = window.docx;
 
 
+export async function extintores(props: CertData<null>): Promise<Document> {
 
     const imgFondoDoc = getImage({
         name: "fondo_certificado_manejo_defensivo.png",
@@ -140,7 +141,8 @@ const photoSection = new Paragraph({
         alignment: AlignmentType.LEFT,
     });
 
-export async function extintores(props: CertData<null>): Promise<Document> {
+
+
     const imgQR = await getQR({
         iid: props.certIId,
         dni: props.personDni,

frontend/src/certGenerator/certs/IPERC.ts

@@ -11,6 +11,8 @@ const {
 
 
 
+export async function ipercCert(props: CertData<null>): Promise<Document> {
+
     const imgFondoDoc = getImage({
         name: "fondo_certificado_manejo_defensivo.png",
         height: 21.23,
@@ -127,7 +129,7 @@ const photoSection = new Paragraph({
         alignment: AlignmentType.LEFT,
     });
 
-export async function ipercCert(props: CertData<null>): Promise<Document> {
+
     const imgQR = await getQR({
         iid: props.certIId,
         dni: props.personDni,

frontend/src/certGenerator/certs/LUCHA_CONTRA_INCENDIOS.ts

@@ -11,6 +11,8 @@ const {
 
 
 
+export async function luchaContraIncendiosCert(props: CertData<null>): Promise<Document> {
+
     const imgFondoDoc = getImage({
         name: "fondo_certificado_manejo_defensivo.png",
         height: 21.23,
@@ -120,7 +122,7 @@ const photoSection = new Paragraph({
         alignment: AlignmentType.LEFT,
     });
 
-export async function luchaContraIncendiosCert(props: CertData<null>): Promise<Document> {
+
     const imgQR = await getQR({
         iid: props.certIId,
         dni: props.personDni,

frontend/src/certGenerator/certs/MANEJO_DEFENSIVO.ts

@@ -9,6 +9,9 @@ const {
     BorderStyle,
 } = window.docx;
 
+
+export async function manejoDefensivoCert(props: CertData<null>): Promise<Document> {
+
     const imgFondoDoc = getImage({
         name: "fondo_certificado_manejo_defensivo.png",
         height: 21.23,
@@ -147,7 +150,6 @@ const photoSection = new Paragraph({
     });
 
 
-export async function manejoDefensivoCert(props: CertData<null>): Promise<Document> {
     const imgQR = await getQR({
         iid: props.certIId,
         dni: props.personDni,

frontend/src/certGenerator/certs/MATPEL.ts

@@ -1,23 +1,22 @@
 import { Matpel, cmText, getImage, getMatpelHours, getMatpelLabel, getQR } from "./utils";
 import { CertData } from "./CertData";
 
-/*
-import {
-    Document, Packer, Paragraph, PageOrientation,
-    FrameAnchorType,
-    TextRun,
-    AlignmentType,
-} from "docx";
-// */
-
-//*
 const {
     Document, Paragraph, PageOrientation,
     FrameAnchorType,
     TextRun,
     AlignmentType,
 } = window.docx;
-// */
+
+
+
+/**
+ * Generates a certificate in format DOCX and in-place.
+ *
+ * @param props Data to use in the certificate
+ * @returns A buffer of the DOCX document
+ */
+export async function matpelCert(props: CertData<Matpel>): Promise<Document> {
 
     const imgFondoDoc = getImage({
         name: "fondo_certificado.png",
@@ -110,14 +109,6 @@ const imgEATE = getImage({
 
 
 
-
-/**
- * Generates a certificate in format DOCX and in-place.
- *
- * @param props Data to use in the certificate
- * @returns A buffer of the DOCX document
- */
-export async function matpelCert(props: CertData<Matpel>): Promise<Document> {
     const certificateName = new Paragraph({
         frame: {
             position: {

frontend/src/certGenerator/certs/MECANICA_BASICA.ts

@@ -9,6 +9,8 @@ const {
     BorderStyle,
 } = window.docx;
 
+export async function mecanicaBasicaCert(props: CertData<null>): Promise<Document> {
+
     const imgFondoDoc = getImage({
         name: "fondo_certificado_mecanica_basica.jpg",
         height: 21.23,
@@ -131,7 +133,7 @@ const photoSection = new Paragraph({
         alignment: AlignmentType.LEFT,
     });
 
-export async function mecanicaBasicaCert(props: CertData<null>): Promise<Document> {
+
     const imgQR = await getQR({
         iid: props.certIId,
         dni: props.personDni,

frontend/src/certGenerator/certs/MINICARGADOR.ts

@@ -9,6 +9,9 @@ const {
     BorderStyle,
 } = window.docx;
 
+
+export async function minicargador(props: CertData<null>): Promise<Document> {
+
     const imgFondoDoc = getImage({
         name: "fondo_certificado_4x4.png",
         height: 21.03,
@@ -99,7 +102,7 @@ const photoSection = new Paragraph({
     });
 
 
-export async function minicargador(props: CertData<null>): Promise<Document> {
+
     const hasCustomLabel = (props.certCustomLabel?.length ?? 0) > 0;
     const customLabelYOffset = 0.8;
 

frontend/src/certGenerator/certs/PRIMEROS_AUXILIOS.ts

@@ -9,6 +9,9 @@ const {
     BorderStyle,
 } = window.docx;
 
+
+export async function primerosAuxiliosCert(props: CertData<null>): Promise<Document> {
+
     const imgFondoDoc = getImage({
         name: "fondo_certificado_manejo_defensivo.png",
         height: 21.23,
@@ -139,7 +142,6 @@ const photoSection = new Paragraph({
     });
 
 
-export async function primerosAuxiliosCert(props: CertData<null>): Promise<Document> {
     const imgQR = await getQR({
         iid: props.certIId,
         dni: props.personDni,

frontend/src/certGenerator/certs/RETROEXCAVADORA.ts

@@ -9,6 +9,9 @@ const {
     BorderStyle,
 } = window.docx;
 
+
+export async function retroexcavadora(props: CertData<null>): Promise<Document> {
+
     const imgFondoDoc = getImage({
         name: "fondo_certificado_4x4.png",
         height: 21.03,
@@ -99,7 +102,6 @@ const photoSection = new Paragraph({
     });
 
 
-export async function retroexcavadora(props: CertData<null>): Promise<Document> {
     const hasCustomLabel = (props.certCustomLabel?.length ?? 0) > 0;
     const customLabelYOffset = 0.8;
 

frontend/src/certGenerator/certs/SEG_OP_MAQ_PES.ts

@@ -9,6 +9,9 @@ const {
     BorderStyle,
 } = window.docx;
 
+
+export async function segOpMaqPesCert(props: CertData<null>): Promise<Document> {
+
     const imgFondoDoc = getImage({
         name: "fondo_seg_op_maq_pes.png",
         height: 21.02,
@@ -134,7 +137,6 @@ const photoSection = new Paragraph({
     });
 
 
-export async function segOpMaqPesCert(props: CertData<null>): Promise<Document> {
     const imgQR = await getQR({
         iid: props.certIId,
         dni: props.personDni,

frontend/src/certGenerator/certs/SUPERVISOR_ESCOLTA.ts

@@ -9,6 +9,9 @@ const {
     BorderStyle,
 } = window.docx;
 
+
+export async function supervisorEscolta(props: CertData<null>): Promise<Document> {
+
     const imgFondoDoc = getImage({
         name: "fondo_super_escolta.png",
         height: 20.99,
@@ -193,7 +196,6 @@ const photoSection = new Paragraph({
     });
 
 
-export async function supervisorEscolta(props: CertData<null>): Promise<Document> {
     const imgQR = await getQR({
         iid: props.certIId,
         dni: props.personDni,

frontend/src/certGenerator/certs/TRACTOR_ORUGA.ts

@@ -9,6 +9,9 @@ const {
     BorderStyle,
 } = window.docx;
 
+
+export async function tractorOruga(props: CertData<null>): Promise<Document> {
+
     const imgFondoDoc = getImage({
         name: "fondo_certificado_4x4.png",
         height: 21.03,
@@ -99,7 +102,6 @@ const photoSection = new Paragraph({
     });
 
 
-export async function tractorOruga(props: CertData<null>): Promise<Document> {
     const hasCustomLabel = (props.certCustomLabel?.length ?? 0) > 0;
     const customLabelYOffset = 0.8;
 

frontend/src/certGenerator/certs/VOLQUETE.ts

@@ -9,6 +9,9 @@ const {
     BorderStyle,
 } = window.docx;
 
+
+export async function volquete(props: CertData<null>): Promise<Document> {
+
     const imgFondoDoc = getImage({
         name: "fondo_certificado_4x4.png",
         height: 21.03,
@@ -99,7 +102,6 @@ const photoSection = new Paragraph({
     });
 
 
-export async function volquete(props: CertData<null>): Promise<Document> {
     const hasCustomLabel = (props.certCustomLabel?.length ?? 0) > 0;
     const customLabelYOffset = 0.8;
 

frontend/src/certs/NewRegister/RegisterPreview.tsx

@@ -14,10 +14,6 @@ function isoDateToLocalDate(date: string): string {
     return `${day}/${month}`;
 }
 
-function wait(ms: number) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
 // TODO: Refactor
 export function RegisterPreview(props: {selections: Array<RegistrationPreview>, personId: number | null, onDelete: (v: number) => void, onRegister: () => void}) {
     const [error, setError] = createSignal("");