From e9d3bb2b2905d8f6558a15ed543a174e294ed5e8 Mon Sep 17 00:00:00 2001 From: Parth Gupta Date: Mon, 15 Apr 2024 19:19:27 +0530 Subject: [PATCH] add view certificate page --- src/App.js | 2 + src/pages/certifgen/Popper.js | 22 +++ src/pages/certifgen/ViewCertificate.css | 96 ++++++++++++ src/pages/certifgen/ViewCertificate.js | 185 ++++++++++++++++++++++++ 4 files changed, 305 insertions(+) create mode 100644 src/pages/certifgen/Popper.js create mode 100644 src/pages/certifgen/ViewCertificate.css create mode 100644 src/pages/certifgen/ViewCertificate.js diff --git a/src/App.js b/src/App.js index 02af03f..edb43a9 100755 --- a/src/App.js +++ b/src/App.js @@ -30,6 +30,7 @@ import EventsUpdatePage from "./pages/admin/DataUpdate/EventsUpdatePage"; import Nominations from "./pages/Nominations/Nominations"; import LiveScoreboard from "./pages/LiveScoreboard/LiveScoreboard"; import Results from "./pages/Results/Results"; +import ViewCertificate from "./pages/certifgen/ViewCertificate"; function App() { useEffect(() => { @@ -85,6 +86,7 @@ function App() { component={ElectionCandidates} /> + {/* Other Routes */} {/* */} diff --git a/src/pages/certifgen/Popper.js b/src/pages/certifgen/Popper.js new file mode 100644 index 0000000..6612c72 --- /dev/null +++ b/src/pages/certifgen/Popper.js @@ -0,0 +1,22 @@ +import React, { useState, useEffect } from "react"; +import { useWindowSize } from "react-use"; +import Confetti from "react-confetti"; + +const ConfettiComponent = () => { + const [isConfettiActive, setConfettiActive] = useState(true); + const { width, height } = useWindowSize(); + + // Use a timeout or any condition to control when to stop the confetti + useEffect(() => { + const confettiTimeout = setTimeout(() => { + setConfettiActive(false); + }, 10000); + + // Clean up the timeout to avoid memory leaks + return () => clearTimeout(confettiTimeout); + }, []); // The empty dependency array ensures that this effect runs only once + + return <>{isConfettiActive && }; +}; + +export default ConfettiComponent; diff --git a/src/pages/certifgen/ViewCertificate.css b/src/pages/certifgen/ViewCertificate.css new file mode 100644 index 0000000..ab4648f --- /dev/null +++ b/src/pages/certifgen/ViewCertificate.css @@ -0,0 +1,96 @@ +@media only screen and (min-width:725px){ + .certificateimage { + text-align: center; + } + + .certificateimage img{ + width: 100%; + height: 50%; + } + + .certifpreview_nav h1{ + font-size: 2.25rem; + } + + .downloadBtn{ + font-size: 1.25rem; + width: auto; + margin: 0 1rem; + } +} + +@media only screen and (max-width:724px){ + .certificateimage { + text-align: center; + } + + .certificateimage img{ + width: 80vw; + height: auto; + } + + .certifpreview_nav h1{ + font-size: 1.6rem; + } + + .downloadBtn{ + font-size: 1.25rem; + width: 15rem; + } +} + +.downloadBtn{ + color: #F1C40F; + background-color: transparent; + /* background-color: #F1C40F; */ + padding: 10px; + font: 1rem; + transition: all 0.2s; + /* border: none; */ + border: 1px solid #F1C40F; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer !important; +} + +.downloadBtn:hover{ + background-color: #F1C40F; + color: white; + cursor: pointer !important; +} + +.gymk_logo,.kgp_logo{ + width: 6rem; + margin: 0 0.6rem; +} + +.certifpreview_body hr{ + color: #F1C40F; + width: 80vw; + margin: 0.5rem auto; + border: 0.2rem solid #F1C40F; +} + +.certifpreview_share{ + width: 40vw; + display: flex; + flex-direction: column; + align-items: center; +} + +.certifshare_text{ + color: white; + font-size: 1.25rem; + font-weight: 600; +} + +.certifshare_link i{ + color: black; + background-color: #F1C40F; + border-radius: 50%; + width: 2rem; + margin: 0 0.5rem; + padding: 0.5rem; + font-size: 1.25rem; +} + diff --git a/src/pages/certifgen/ViewCertificate.js b/src/pages/certifgen/ViewCertificate.js new file mode 100644 index 0000000..edbfadc --- /dev/null +++ b/src/pages/certifgen/ViewCertificate.js @@ -0,0 +1,185 @@ +import React, { useEffect, useState } from "react"; +import { useParams } from "react-router-dom"; +import IITKGPLogo from "../../images/IIT_Kharagpur_Logo.png"; +import Trail from "../../images/WebsiteHackathon.jpg"; +import "./ViewCertificate.css"; +import Popper from "./Popper"; +import html2canvas from "html2canvas"; +import jsPDF from "jspdf"; + +//https://gymkhana.iitkgp.ac.in/certifgen/view/NjYxYWFlOGM4ZjU0NTJjZmNlM2IxZjIx +const ViewCertificate = () => { + document.title = "Certificate | TSG"; + + const params = useParams(); + // console.log(params.id); + const [certificateImage, setCertificateImage] = useState(""); + const [certifData, setCertifData] = useState({}); + + useEffect(() => { + const getCertifData = async () => { + try { + const response = await fetch( + `http://localhost:5050/api/certifgen/generateCertif/${params.id}` + ); + if (!response.ok) { + throw new Error("Failed to fetch certificate data"); + } + const data = await response.json(); + console.log(data); + setCertifData(data); + setCertificateImage(data.certificate); + } catch (error) { + console.error("Error fetching certificate data:", error); + } + }; + + getCertifData(); + }, []); + + const downloadImage = () => { + // Create a Blob from the base64 encoded image + const byteCharacters = atob(certificateImage.split(",")[1]); + const byteNumbers = new Array(byteCharacters.length); + for (let i = 0; i < byteCharacters.length; i++) { + byteNumbers[i] = byteCharacters.charCodeAt(i); + } + const byteArray = new Uint8Array(byteNumbers); + const blob = new Blob([byteArray], { type: "image/png" }); + + // Create a download link and trigger the download + const url = window.URL.createObjectURL(blob); + const link = document.createElement("a"); + link.href = url; + link.setAttribute("download", "certificate.png"); + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }; + + // const downloadPdf = () => { + // const pdf = new jsPDF('p', 'mm', 'a4'); + + // // Calculate the dimensions of the image relative to the page size + // const pageWidth = pdf.internal.pageSize.getWidth(); + // const pageHeight = pdf.internal.pageSize.getHeight(); + + // // Load the image to get its natural width and height + // const img = new Image(); + // img.src = certificateImage; + // img.onload = () => { + // const imgWidth = pageWidth; + // const imgHeight = (pageWidth * img.naturalHeight) / img.naturalWidth; + + // // Add the image to the PDF + // pdf.addImage(certificateImage, 'JPEG', 0, 0, imgWidth, imgHeight); + + // // Save the PDF + // pdf.save('certificate.pdf'); + // }; + // }; + const downloadPdf = () => { + const img = new Image(); + img.onload = () => { + const pdf = new jsPDF("p", "pt", [img.width, img.height]); + // Set the width of the image to match the width of the PDF page + const imgWidth = pdf.internal.pageSize.getWidth(); + const imgHeight = (img.height * imgWidth) / img.width; + + // Add the image to the PDF + pdf.addImage(img, "JPEG", 0, 0, imgWidth, img.height); + + // Save the PDF + pdf.save("certificate.pdf"); + }; + img.src = certificateImage; + }; + + return ( +
+ + gymk_logo +
+

Technology Students' Gymkhana

+

Indian Institute of Technology Kharagpur

+
+ +
+

CERTIFICATE

+

+ {certifData.eventName} +

+
+
+ + {/* */} +
+
+ Certificate + {/*
+

Share it on:

+
+ + + + +
+
*/} +
+ +
+ ); +}; + +export default ViewCertificate;