Automate MATPEL I certificate

2023-05-12 10:54:19 -05:00 · 2023-05-12 10:54:19 -05:00 · 2938dd4dce
commit 2938dd4dce
parent 6ff5fddee6
7 changed files with 359 additions and 103 deletions
--- a/docx/main.ts
+++ b/docx/main.ts
@ -7,8 +7,10 @@ import {
    HorizontalPositionAlign,
    VerticalPositionAlign,
    TextRun,
+    AlignmentType,
 } from "docx";
 import { join } from "path";
+import * as QR from "qrcode";


 function cm(centimeters: number) {
@ -19,6 +21,10 @@ function cmToEmu(cm: number) {
    return Math.round(cm * 360000);
 }

+function cmText(cm: number) {
+    return Math.round(cm * 567);
+}
+
 type ImgConfig = {
    name: string,
    height: number,
@ -64,6 +70,7 @@ const imgFondoDoc = new ImageRun({
            relative: VerticalPositionRelativeFrom.TOP_MARGIN,
            offset: 0,
        },
+        behindDocument: true,
    },
 });

@ -261,11 +268,11 @@ const imgEATE = new ImageRun({
 const certificateName = new Paragraph({
    frame: {
        position: {
-            x: cmToEmu(3.13),
-            y: cmToEmu(1.39),
+            x: cmText(3.13),
+            y: cmText(1.9),
        },
-        width: cm(14.28) * 5,
-        height: cm(3.19) * 5,
+        width: cmText(14.28),
+        height: cmText(3.19),
        anchor: {
            horizontal: FrameAnchorType.MARGIN,
            vertical: FrameAnchorType.MARGIN,
@ -277,47 +284,281 @@ const certificateName = new Paragraph({
    },
    children: [
        new TextRun({
-            text: "sample text",
+            text: "CAPACITACIÓN EN MANEJO; MANIPULACIÓN Y TRANSPORTE DE MATERIALES Y RESIDUOS PELIGROSOS - MATPEL I - Advertencia".toUpperCase(),
            bold: true,
            font: "Arial",
+            size: 32,
        }),
    ],
+    alignment: AlignmentType.CENTER,
+});
+
+const certificatePersonName = new Paragraph({
+    frame: {
+        position: {
+            x: cmText(0),
+            y: cmText(6.5),
+        },
+        width: cmText(23),
+        height: cmText(1.5),
+        anchor: {
+            horizontal: FrameAnchorType.MARGIN,
+            vertical: FrameAnchorType.MARGIN,
+        },
+        alignment: {
+            x: HorizontalPositionAlign.CENTER,
+            y: VerticalPositionAlign.TOP,
+        },
+    },
+    children: [
+        new TextRun({
+            text: "fernando enrique araoz morales".toUpperCase(),
+            bold: true,
+            font: "Arial",
+            allCaps: true,
+            size: 48,
+        }),
+    ],
+    alignment: AlignmentType.CENTER,
+});
+
+// "Se expide el presente certificado a:"
+const certificateExpedite = new Paragraph({
+    frame: {
+        position: {
+            x: cmText(2.85),
+            y: cmText(5.15),
+        },
+        width: cmText(14.28),
+        height: cmText(1),
+        anchor: {
+            horizontal: FrameAnchorType.MARGIN,
+            vertical: FrameAnchorType.MARGIN,
+        },
+        alignment: {
+            x: HorizontalPositionAlign.CENTER,
+            y: VerticalPositionAlign.TOP,
+        },
+    },
+    children: [
+        new TextRun({
+            text: "Se expide el presente certificado a:",
+            font: "Arial",
+            size: 22,
+        }),
+    ],
+    alignment: AlignmentType.CENTER,
+});
+
+// N° XXXX-202X-EEG
+const certificateCode = new Paragraph({
+    frame: {
+        position: {
+            x: cmText(17.1),
+            y: cmText(5.35),
+        },
+        width: cmText(3.68),
+        height: cmText(0.7),
+        anchor: {
+            horizontal: FrameAnchorType.MARGIN,
+            vertical: FrameAnchorType.MARGIN,
+        },
+        alignment: {
+            x: HorizontalPositionAlign.CENTER,
+            y: VerticalPositionAlign.TOP,
+        },
+    },
+    children: [
+        new TextRun({
+            text: "N° 0524-2023-EEG",
+            font: "Arial",
+            size: 20,
+        }),
+    ],
+    alignment: AlignmentType.CENTER,
+});
+
+// Identificado con dni ...
+const certificateBody = new Paragraph({
+    frame: {
+        position: {
+            x: cmText(1.51),
+            y: cmText(8.35),
+        },
+        width: cmText(20.08),
+        height: cmText(3.7),
+        anchor: {
+            horizontal: FrameAnchorType.MARGIN,
+            vertical: FrameAnchorType.MARGIN,
+        },
+        alignment: {
+            x: HorizontalPositionAlign.CENTER,
+            y: VerticalPositionAlign.TOP,
+        },
+    },
+    children: [
+        new TextRun({
+            text: "Identificado con DNI N° ",
+            font: "Arial",
+            size: 24,
+        }),
+        new TextRun({
+            text: "74059695",
+            font: "Arial",
+            size: 24,
+            bold: true,
+        }),
+        new TextRun({
+            text: ", al haber aprobado el curso de capacitación sobre ",
+            font: "Arial",
+            size: 24,
+        }),
+        new TextRun({
+            text: "MANEJO DE MATERIALES Y RESIDUOS PELIGROSOS - MATPEL I - Advertencia",
+            font: "Arial",
+            size: 24,
+            bold: true,
+        }),
+        new TextRun({
+            text: ", según lo estipulado en la Ley N°28256 (ley que regula el Transporte de Materiales y Residuos Peligrosos) y Decreto Supremo N° 021-2008-MTC (Reglamento Nacional de Transporte Terrestre de Materiales y Residuos Peligrosos) con una duración de 12 horas lectivas.\n",
+            font: "Arial",
+            size: 24,
+        }),
+    ],
+    alignment: AlignmentType.JUSTIFIED,
+});
+
+// Se expide certificado...
+const certificateFinishLabel = new Paragraph({
+    frame: {
+        position: {
+            x: cmText(1.52),
+            y: cmText(11.25),
+        },
+        width: cmText(20.1),
+        height: cmText(0.8),
+        anchor: {
+            horizontal: FrameAnchorType.MARGIN,
+            vertical: FrameAnchorType.MARGIN,
+        },
+        alignment: {
+            x: HorizontalPositionAlign.CENTER,
+            y: VerticalPositionAlign.TOP,
+        },
+    },
+    children: [
+        new TextRun({
+            text: "Se expide certificado para los fines que se estime conveniente.",
+            font: "Arial",
+            size: 24,
+        }),
+    ],
+    alignment: AlignmentType.CENTER,
+});
+
+// Fecha de Emision: ...
+const certificateDate = new Paragraph({
+    frame: {
+        position: {
+            x: cmText(16),
+            y: cmText(16.5),
+        },
+        width: cmText(9),
+        height: cmText(1.4),
+        anchor: {
+            horizontal: FrameAnchorType.MARGIN,
+            vertical: FrameAnchorType.MARGIN,
+        },
+        alignment: {
+            x: HorizontalPositionAlign.CENTER,
+            y: VerticalPositionAlign.TOP,
+        },
+    },
+    children: [
+        new TextRun({
+            text: "Fecha de Emisión:\t\t{fecha_emision}",
+            font: "Arial",
+            size: 20,
+            break: 1,
+        }),
+        new TextRun({
+            text: "Fecha de Expiración:\t\t{fecha_expiracion}",
+            font: "Arial",
+            size: 20,
+            break: 1,
+        }),
+    ],
+    alignment: AlignmentType.LEFT,
 });


-const doc = new Document({
-    sections: [
-        {
-            properties: {
-                page: {
-                    size: {
-                        orientation: PageOrientation.LANDSCAPE,
+
+async function create() {
+    const qr = await QR.toDataURL(/* join(__dirname, "img", "qr.png"), */ `https://www.eegsac.com/alumnoscertificados.php?DNI=${"74059695"}`, {margin: 1});
+
+    const imgQR = new ImageRun({
+        data: qr, // fs.readFileSync(join(__dirname, "img", "qr.png")),
+        transformation: {
+            height: cm(2.47),
+            width: cm(2.47),
+        },
+        floating: {
+            zIndex: 1,
+            horizontalPosition: {
+                relative: HorizontalPositionRelativeFrom.LEFT_MARGIN,
+                offset: cmToEmu(26.3),
+            },
+            verticalPosition: {
+                relative: VerticalPositionRelativeFrom.TOP_MARGIN,
+                offset: cmToEmu(16.48),
+            },
+        },
+    });
+
+    const doc = new Document({
+        sections: [
+            {
+                properties: {
+                    page: {
+                        size: {
+                            orientation: PageOrientation.LANDSCAPE,
+                        },
                    },
                },
+                children: [
+                    certificateName,
+                    certificatePersonName,
+                    certificateExpedite,
+                    certificateCode,
+                    certificateBody,
+                    certificateFinishLabel,
+                    certificateDate,
+                    new Paragraph({
+                        children: [
+                            imgFondoDoc,
+                            imgMatpel,
+                            imgCIP,
+                            imgCEE,
+                            imgMTC,
+                            imgEEG,
+                            imgOSHA,
+                            imgAguila,
+                            imgMichigan,
+                            imgCEEM,
+                            imgEATE,
+                            imgQR,
+                        ],
+                    }),
+                ],
            },
-            children: [
-                certificateName,
-                new Paragraph({
-                    children: [
-                        imgFondoDoc,
-                        imgMatpel,
-                        imgCIP,
-                        imgCEE,
-                        imgMTC,
-                        imgEEG,
-                        imgOSHA,
-                        imgAguila,
-                        imgMichigan,
-                        imgCEEM,
-                        imgEATE,
-                    ],
-                }),
-            ],
-        },
-    ],
-});
+        ],
+    });

-// Used to export the file into a .docx file
-Packer.toBuffer(doc).then((buffer) => {
-    fs.writeFileSync("My Document.docx", buffer);
-});
+    // Used to export the file into a .docx file
+    Packer.toBuffer(doc).then((buffer) => {
+        fs.writeFileSync("My Document.docx", buffer);
+        // fs.rmSync(join(__dirname, "temp", "qr.png"));
+    });
+}
+
+create();
--- a/package.json
+++ b/package.json
@ -49,6 +49,7 @@
    "@types/express": "^4.17.13",
    "@types/jest": "29.5.0",
    "@types/node": "18.15.11",
+    "@types/qrcode": "^1.5.0",
    "@types/supertest": "^2.0.11",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -72,6 +72,9 @@ devDependencies:
  '@types/node':
    specifier: 18.15.11
    version: 18.15.11
+  '@types/qrcode':
+    specifier: ^1.5.0
+    version: 1.5.0
  '@types/supertest':
    specifier: ^2.0.11
    version: 2.0.12
@ -1735,6 +1738,12 @@ packages:
    resolution: {integrity: sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==}
    dev: true

+  /@types/qrcode@1.5.0:
+    resolution: {integrity: sha512-x5ilHXRxUPIMfjtM+1vf/GPTRWZ81nqscursm5gMznJeK9M0YnZ1c3bEvRLQ0zSSgedLx1J6MGL231ObQGGhaA==}
+    dependencies:
+      '@types/node': 18.15.11
+    dev: true
+
  /@types/qs@6.9.7:
    resolution: {integrity: sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==}
    dev: true
--- a/src/app.module.ts
+++ b/src/app.module.ts
@ -12,7 +12,7 @@ import { SubjectService } from "./controller/subject/subject.service";
 import * as dotenv from "dotenv";

 // Must be done before initializing DB.
-dotenv.config();
+console.log(dotenv.config());

@Module({
    imports: [
--- a/src/controller/certificate/certificate.template.ts
+++ b/src/controller/certificate/certificate.template.ts
@ -8,7 +8,7 @@ export function template(ssr: string): string {
      <title>Registrar certificados - EEGSAC</title>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <link rel="stylesheet" href="/static/styles.css" />
+      <link rel="stylesheet" href="/static/styles.css?t=${Date.now()}" />
      ${generateHydrationScript()}
    </head>
    <body>
@ -16,7 +16,7 @@ export function template(ssr: string): string {
        ${ssr}
      </div>
    </body>
-    <script src="/static/hydration.js"></script>
+    <script src="/static/hydration.js?t=${Date.now()}"></script>
  </html>
 `;

--- a/src/views/components/NewRegister.tsx
+++ b/src/views/components/NewRegister.tsx
@ -1,9 +1,8 @@
-import { createEffect, createSignal, onMount, Show } from "solid-js";
+import { createSignal, onMount, Show } from "solid-js";
 import type { CursoGIE } from "../../model/CursoGIE/cursoGIE.entity";
 import { SearchableSelect } from "./NewRegister/SearchableSelect";
 import { JSX } from "solid-js/jsx-runtime";
 import { Person } from "src/types/Person";
-import QR from "qrcode";


 type HTMLEventFn = JSX.EventHandlerUnion<HTMLFormElement, Event & {
@ -19,21 +18,9 @@ export function NewRegister(props: {person: Person | null, onSuccess: () => void

    const [selectedSubject, setSelectedSubject] = createSignal<number | null>(null);

-    const [qrBase64, setQrBase64] = createSignal<string | null>(null);

-    // Update QR
-    createEffect(() => {
-        if (props.person !== null) {
-            QR.toDataURL(`https://www.eegsac.com/alumnosceertificados.php?DNI=${props.person.dni}`, (err, res) => {
-                if (err) {
-                    console.error("Error creating QR code");
-                    return;
-                }

-                setQrBase64(res);
-            });
-        }
-    });
+

    const datePicker = (
        <input
@ -147,9 +134,6 @@ export function NewRegister(props: {person: Person | null, onSuccess: () => void
                            disabled={loading()}
                        />
                    </div>
-                    <div>
-                        <img src={qrBase64() ?? ""} height="225" width="225" />
-                    </div>
                </form>
            </Show>
        </div>
--- a/src/views/components/Search.tsx
+++ b/src/views/components/Search.tsx
@ -1,7 +1,8 @@
-import { createSignal, Show } from "solid-js";
+import { createEffect, createSignal, Show } from "solid-js";
 import { JSX } from "solid-js/jsx-runtime";
 import { Person } from "../../types/Person";
 import { RegisterPerson } from "./Search/RegisterPerson";
+import QR from "qrcode";

 type HTMLEventFn = JSX.EventHandlerUnion<HTMLFormElement, Event & {
    submitter: HTMLElement;
@ -16,6 +17,21 @@ export function Search(props: {setPerson: (p: Person | null) => void}) {
    const [loading, setLoading] = createSignal(false);
    const [error, setError] = createSignal("");
    const [warning, setWarning] = createSignal("");
+    const [qrBase64, setQrBase64] = createSignal<string | null>(null);
+
+    // Update QR
+    createEffect(() => {
+        if (dni() !== "") {
+            QR.toDataURL(`https://www.eegsac.com/alumnoscertificados.php?DNI=${dni()}`, {margin: 1}, (err, res) => {
+                if (err) {
+                    console.error("Error creating QR code");
+                    return;
+                }
+
+                setQrBase64(res);
+            });
+        }
+    });

    /*
      Get the user data from the DB
@ -51,59 +67,64 @@ export function Search(props: {setPerson: (p: Person | null) => void}) {
    };

    return (
-        <div class="p-4">
-            <h2 class="my-2 font-bold text-xl">1. Buscar persona</h2>
-            <form onSubmit={searchDNI} class="px-4">
-                <label for="search-dni">DNI</label>
-                <br />
-                <input
-                    id="search-dni"
-                    class="bg-c-background text-c-on-background border-c-outline border-2 rounded px-2 py-1
+        <div class="p-4 grid" style={{"grid-template-columns": "40rem auto"}}>
+            <div>
+                <h2 class="my-2 font-bold text-xl">1. Buscar persona</h2>
+                <form onSubmit={searchDNI} class="px-4">
+                    <label for="search-dni">DNI</label>
+                    <br />
+                    <input
+                        id="search-dni"
+                        class="bg-c-background text-c-on-background border-c-outline border-2 rounded px-2 py-1
                        invalid:border-c-error invalid:text-c-error
                        focus:border-c-primary outline-none
                        disabled:opacity-50 disabled:cursor-not-allowed"
-                    type="text"
-                    minLength={8}
-                    maxLength={8}
-                    pattern="[0-9]{8}"
-                    placeholder="Número de DNI"
-                    value={dni()}
-                    required={true}
-                    onChange={(e) => setDni(e.target.value)}
-                    disabled={loading()}
-                />
-                <br />
-                <br />
-                <input
-                    class="bg-c-primary text-c-on-primary px-4 py-2 rounded-md cursor-pointer
+                        type="text"
+                        minLength={8}
+                        maxLength={8}
+                        pattern="[0-9]{8}"
+                        placeholder="Número de DNI"
+                        value={dni()}
+                        required={true}
+                        onChange={(e) => setDni(e.target.value)}
+                        disabled={loading()}
+                    />
+                    <br />
+                    <br />
+                    <input
+                        class="bg-c-primary text-c-on-primary px-4 py-2 rounded-md cursor-pointer
                        disabled:opacity-50 disabled:cursor-not-allowed"
-                    type="submit"
-                    value="Buscar"
-                    disabled={loading()}
-                />
-            </form>
+                        type="submit"
+                        value="Buscar"
+                        disabled={loading()}
+                    />
+                </form>

-            <p
-                class="my-2 p-1 rounded w-fit mx-4 bg-c-error text-c-on-error"
-                style={{display: error() === "" ? "none" : "block"}}
-            >
+                <p
+                    class="my-2 p-1 rounded w-fit mx-4 bg-c-error text-c-on-error"
+                    style={{display: error() === "" ? "none" : "block"}}
+                >
                Error:
-                <br />
-                {error()}
-            </p>
+                    <br />
+                    {error()}
+                </p>

-            <p
-                class="my-2 mx-4 p-1 rounded border border-c-error text-c-error font-medium w-fit"
-                style={{display: warning() === "" ? "none" : "block"}}
-            >
+                <p
+                    class="my-2 mx-4 p-1 rounded border border-c-error text-c-error font-medium w-fit"
+                    style={{display: warning() === "" ? "none" : "block"}}
+                >
                Advertencia:
-                <br />
-                {warning()}
-            </p>
+                    <br />
+                    {warning()}
+                </p>

-            <Show when={warning() !== ""}>
-                <RegisterPerson dni={dni()} onSuccess={search} />
-            </Show>
+                <Show when={warning() !== ""}>
+                    <RegisterPerson dni={dni()} onSuccess={search} />
+                </Show>
+            </div>
+            <div>
+                <img src={qrBase64() ?? ""} height="225" width="225" />
+            </div>
        </div>
    );
 }