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

[FE][Certs] Move button to download carnet to the main UI

master
Araozu 2023-11-25 12:20:37 -05:00
parent e00a0f7c81
commit 37045f9c79
4 changed files with 100 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/src/certs/Registers/RegisterElement.tsx
View File

@ -1,4 +1,4 @@
import { Show } from "solid-js";
import { Show, createMemo } from "solid-js";
import { certGenerator } from "../../certGenerator";
import { Person } from "../../types/Person";
import { Register } from "../../types/Register";
@ -6,6 +6,15 @@ import { courseMap } from "../../utils/allCourses";
import { customLabelsMap } from "../../utils/allCustomLabels";
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";
// TODO: use
// const carnetEnabledIds = [12];
export function RegisterElement(props: {register: Register, person: Person, onClick: () => void}) {
@ -42,6 +51,65 @@ 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 gridClass = () => (canGenerateCarnet() ? "grid-cols-[11rem_1.5rem_1.5rem_1.25rem]" : "grid-cols-[12.5rem_1.5rem_1.25rem]");
const paddedCertCode = createMemo(() => {
const code = props.register.register_code.toString();
return code.padStart(4, "0");
});
const generateCarnet = () => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
const p = props.person;
const r = props.register;
const [expiryYear, month] = r.register_display_date.split("-");
const expiryMonth = numberToMonth(parseInt(month, 10));
if (expiryMonth === null) {
alert(`El cert. tiene un mes invalido (${month}), no se puede generar carnet`);
return;
}
// QR code
QR.toDataURL(`https://eegsac.com/certificado/${p.person_dni}`, {margin: 1}, (err, base64) => {
if (err) {
alert("Error creando codigo QR para el carnet.");
console.error("Error creating QR code");
console.error(err);
return;
}
const fullname = `${p.person_names} ${p.person_paternal_surname} ${p.person_maternal_surname}`;
const svgHtml = genCarnet({
fullname,
dni: p.person_dni.toString(),
code: r.register_code.toString().padStart(4, "0"),
expiryMonth,
expiryYear,
qrBase64: base64,
});
const v = Canvg.fromString(ctx, svgHtml);
v.start();
v.ready().then(() => {
canvas.toBlob((blob) => {
if (blob !== null) {
saveAs(blob, `CARNET MATPEL - ${fullname}.png`);
} else {
console.log("blob is null... :c");
}
});
});
});
};
const createdTodayClasses = () => {
// current dat in YYYY-MM-DD format
const today = new Date().toISOString()
@ -52,7 +120,7 @@ export function RegisterElement(props: {register: Register, person: Person, onCl
};
return (
<div class="grid grid-cols-[11rem_1.5rem_1.25rem] border border-c-outline rounded-md overflow-hidden">
<div class={`grid ${gridClass()} border border-c-outline rounded-md overflow-hidden`}>
<div class="border-r border-c-outline-50 align-middle">
<p
class="font-bold overflow-hidden whitespace-nowrap pt-1 px-1"
@ -83,16 +151,26 @@ export function RegisterElement(props: {register: Register, person: Person, onCl
<span
class="font-mono underline cursor-pointer hover:text-c-primary"
onClick={() => {
const code = props.register.register_code.toString();
const paddedCode = code.padStart(4, "0");
navigator.clipboard.writeText(paddedCode);
navigator.clipboard.writeText(paddedCertCode());
}}
>
{props.register.register_code}
{paddedCertCode()}
</span>
</Show>
</p>
</div>
<Show when={canGenerateCarnet()}>
<button
class="hover:bg-c-primary-container rounded-md transition-colors
disabled:opacity-0 disabled:cursor-default
disabled:hover:bg-c-transparent"
title="Descargar Carnet"
onclick={generateCarnet}
disabled={!canGenerateCarnet()}
>
<IdentificationCardIcon fill="var(--c-on-primary-container)" size={20} />
</button>
</Show>
<button
class="hover:bg-c-primary-container rounded-md transition-colors
disabled:opacity-0 disabled:cursor-default

67
frontend/src/certs/Registers/RegisterSidebar.tsx
View File

@ -1,16 +1,9 @@
import saveAs from "file-saver";
import { Register } from "../../types/Register";
import { courseMap } from "../../utils/allCourses";
import { genCarnet } from "../../utils/carnetGenerator";
import { formatDate, numberToMonth } from "../../utils/functions";
import { Canvg } from "canvg";
import { Show } from "solid-js";
import { Person } from "../../types/Person";
import QR from "qrcode";
import { formatDate } from "../../utils/functions";
export function RegisterSidebar(props: {
register: Register,
person: Person,
close: () => void,
onDelete: () => void,
}) {
@ -28,54 +21,6 @@ export function RegisterSidebar(props: {
const courseName = () => courseMap()[props.register.register_course_id]?.course_name ?? "<curso no encontrado>";
const generateCarnet = () => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
const p = props.person;
const r = props.register;
const [expiryYear, month] = r.register_display_date.split("-");
const expiryMonth = numberToMonth(parseInt(month, 10));
if (expiryMonth === null) {
alert(`El cert. tiene un mes invalido (${month}), no se puede generar carnet`);
return;
}
// QR code
QR.toDataURL(`https://eegsac.com/certificado/${p.person_dni}`, {margin: 1}, (err, base64) => {
if (err) {
alert("Error creando codigo QR para el carnet.");
console.error("Error creating QR code");
console.error(err);
return;
}
const fullname = `${p.person_names} ${p.person_paternal_surname} ${p.person_maternal_surname}`;
const svgHtml = genCarnet({
fullname,
dni: p.person_dni.toString(),
code: r.register_code.toString().padStart(4, "0"),
expiryMonth,
expiryYear,
qrBase64: base64,
});
const v = Canvg.fromString(ctx, svgHtml);
v.start();
v.ready().then(() => {
canvas.toBlob((blob) => {
if (blob !== null) {
saveAs(blob, `CARNET MATPEL - ${fullname}.png`);
} else {
console.log("blob is null... :c");
}
});
});
});
};
return (
<div class="absolute top-0 bg-c-surface-variant right-0
py-4 px-6 w-[20rem]
@ -101,16 +46,6 @@ export function RegisterSidebar(props: {
<p class="underline text-lg">¿Es cert. sin firmas?</p>
<p class="mb-8">{props.register.register_is_preview ? "Si" : "No"}</p>
{/* 12 is the ID for Matpel 3 in the DB */}
<Show when={props.register.register_course_id === 12}>
<button
class="bg-c-primary text-c-on-primary px-4 py-2 rounded-full cursor-pointer
disabled:opacity-50 disabled:cursor-not-allowed"
onclick={generateCarnet}
>
Generar carnet
</button>
</Show>
<button
class="bg-c-error text-c-on-error px-4 py-2 rounded-full cursor-pointer
disabled:opacity-50 disabled:cursor-not-allowed"

1
frontend/src/certs/Registers/index.tsx
View File

@ -174,7 +174,6 @@ export function Registers(props: {person: Person | null, count: number}) {
register={sidebarRegister()!}
close={() => setSidebarRegister(null)}
onDelete={loadRegisters}
person={props.person!}
/>
</Show>
</div>

15
frontend/src/icons/IdentificationCardIcon.tsx Normal file
View File

@ -0,0 +1,15 @@
export function IdentificationCardIcon(props: {fill: string, size?: number}) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
class="inline-block w-6"
width={props.size ?? 32}
height={props.size ?? 32}
fill={props.fill}
viewBox="0 0 256 256"
>
<path d="M200,112a8,8,0,0,1-8,8H152a8,8,0,0,1,0-16h40A8,8,0,0,1,200,112Zm-8,24H152a8,8,0,0,0,0,16h40a8,8,0,0,0,0-16Zm40-80V200a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56ZM216,200V56H40V200H216Zm-80.26-34a8,8,0,1,1-15.5,4c-2.63-10.26-13.06-18-24.25-18s-21.61,7.74-24.25,18a8,8,0,1,1-15.5-4,39.84,39.84,0,0,1,17.19-23.34,32,32,0,1,1,45.12,0A39.76,39.76,0,0,1,135.75,166ZM96,136a16,16,0,1,0-16-16A16,16,0,0,0,96,136Z" />
</svg>
);
}