From 89676c9419ce5506e89282b3fce4ddfbd9fb93ee Mon Sep 17 00:00:00 2001 From: adarshgupta404 Date: Sun, 15 Oct 2023 10:16:41 +0530 Subject: [PATCH] phoenix id card --- src/components/Uploads/ImageUploader.jsx | 334 +++++++---- src/views/CertificateGen/index.js | 549 ++++++++++++++---- .../Dashboard/Tables/components/Authors.js | 2 +- 3 files changed, 671 insertions(+), 214 deletions(-) diff --git a/src/components/Uploads/ImageUploader.jsx b/src/components/Uploads/ImageUploader.jsx index e1f10d6..15006a4 100644 --- a/src/components/Uploads/ImageUploader.jsx +++ b/src/components/Uploads/ImageUploader.jsx @@ -1,24 +1,39 @@ -import { Flex, Container,Text, Button } from "@chakra-ui/react"; -import { useState, useEffect,useRef } from "react"; +import { Flex, Container, Text, Button } from "@chakra-ui/react"; +import { useState, useEffect, useRef } from "react"; import { uploadCertficateAdmin } from "utils/firebaseFxns/certificates"; -import { getFirestore, Timestamp, doc, setDoc,collection, query, where,getDocs } from "firebase/firestore"; +import { + getFirestore, + Timestamp, + doc, + setDoc, + collection, + query, + where, + getDocs, +} from "firebase/firestore"; import { cert } from "firebaseConfig"; +function ImageUploader({ + File, + setFile, + activeInput, + setActiveInput, + setData, + data, + eventdetails, +}) { + const fileRef = useRef(); -function ImageUploader({File,setFile,activeInput,setActiveInput,setData,data,eventdetails}) { - const fileRef = useRef() - - const handleSelectFile=(input)=>{ - setFile({...File,img:input.current.files[0]}) - } + const handleSelectFile = (input) => { + setFile({ ...File, img: input.current.files[0] }); + }; const handleDragOver = (event) => { event.preventDefault(); - }; const handleDrop = (event) => { event.preventDefault(); - setFile({...File,img:event.dataTransfer.files[0]}); + setFile({ ...File, img: event.dataTransfer.files[0] }); }; const handleDragLeave = () => { @@ -34,138 +49,231 @@ function ImageUploader({File,setFile,activeInput,setActiveInput,setData,data,eve return fname; } - - function drag(event) { - if(activeInput.certname) - { - setData({ - ...data, - name:{ + if (activeInput.certname) { + setData({ + ...data, + name: { ...data.name, - xAxis: event.offsetX , - yAxis: event.offsetY+80 - } - }) - } - - -if(activeInput.certid) -{ - setData({ - ...data, - cId:{ - ...data.cId, - xAxis: event.offsetX , - yAxis: event.offsetY+135 - } - }) - } -} + xAxis: event.offsetX, + yAxis: event.offsetY + 80, + }, + }); + } -function stopDrag(){ - setActiveInput({ - certname:false, - certid:false - }) -} + if (activeInput.certid) { + setData({ + ...data, + + cId: { + ...data.cId, + xAxis: event.offsetX + 235, + yAxis: event.offsetY + 200, + }, + }); + } + if (activeInput.id) { + setData({ + ...data, + Id: { + ...data.id, + xAxis: event.offsetX + 235, + yAxis: event.offsetY + 200, + }, + }); + } + if (activeInput.ses) { + setData({ + ...data, + ses: { + ...data.ses, + xAxis: event.offsetX + 235, + yAxis: event.offsetY + 200, + }, + }); + } + if (activeInput.dep) { + setData({ + ...data, + dep: { + ...data.dep, + xAxis: event.offsetX + 235, + yAxis: event.offsetY + 200, + }, + }); + } + } -console.log(activeInput) + function stopDrag() { + setActiveInput({ + certname: false, + certid: false, + id: false, + ses: false, + dep: false + }); + } + + console.log(activeInput); useEffect(() => { - var canvas = document.getElementById("cert"); var ctx = canvas.getContext("2d"); var img = new Image(); const reader = new FileReader(); - File.img && reader.readAsDataURL(File?.img) - reader.addEventListener('load', function(e) { + File.img && reader.readAsDataURL(File?.img); + reader.addEventListener("load", function (e) { img.src = reader.result; }); File?.img && canvas.addEventListener("mousemove", drag); - canvas.addEventListener("mousedown",stopDrag) - - - - - - img.onload = function() { - + canvas.addEventListener("mousedown", stopDrag); + + img.onload = function () { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); - ctx.font = `${data.name.fontSize}px ${data.name.fontName}`; - ctx.fillStyle = data.name.fontColor; - ctx.fillText("Yout Name Here", data.name.xAxis, data.name.yAxis); - ctx.font = `${data.cId.fontSize}px ${data.cId.fontName}`; - ctx.fillStyle = data.cId.fontColor; - ctx.fillText("CERT67PH02", data.cId.xAxis, data.cId.yAxis); - } + ctx.font = `${data.name.fontSize}px ${data.name.fontName}`; + ctx.fillStyle = data.name.fontColor; + ctx.fillText("Yout Name Here", data.name.xAxis, data.name.yAxis); + ctx.font = `${data.cId.fontSize}px ${data.cId.fontName}`; + ctx.fillStyle = data.cId.fontColor; + ctx.fillText("CERT67PH02", data.cId.xAxis, data.cId.yAxis); + ctx.fillStyle = data.Id.fontColor; + ctx.font = `${data.Id.fontSize}px ${data.Id.fontName}`; + ctx.fillText("ID67PH02", data.Id.xAxis, data.Id.yAxis); + ctx.fillStyle = data.ses.fontColor; + ctx.font = `${data.ses.fontSize}px ${data.ses.fontName}`; + ctx.fillText("2023-24", data.ses.xAxis, data.ses.yAxis); + ctx.fillStyle = data.dep.fontColor; + ctx.font = `${data.dep.fontSize}px ${data.dep.fontName}`; + ctx.fillText("CSE", data.dep.xAxis, data.dep.yAxis); + }; - - return()=>{ + return () => { canvas.removeEventListener("mousemove", drag); - canvas.removeEventListener("mousedown",stopDrag) - } - }, [File,activeInput,data]) - -const users =[ - { - name: "kallyan singha", - email: "kallyan@apiffer.in" - }, - { - name: "shreyam maity", - email: "shreyam@apiffer.in" - } -] -console.log(eventdetails.listParticipants) - -const submitCert = async()=>{ - const db = getFirestore(cert); - var q = query(collection(db, "certMetas"), where("eventName", "==", eventdetails.name)) - await getDocs(q).then(async(snapshot) => { -if (snapshot.empty) { -console.log("No matching data"); - var isDone = await uploadCertficateAdmin(File.img,data.name,data.cId,eventdetails.name,eventdetails.date,'admin',eventdetails.listParticipants) - if(isDone){ - alert("Uploaded"); - }else{ - alert("Failed"); - } -}else{ - alert("A meta with same name exists") -}}).catch(err => { - console.log("Error getting documents", err); -}); -} + canvas.removeEventListener("mousedown", stopDrag); + }; + }, [File, activeInput, data]); + const users = [ + { + name: "kallyan singha", + email: "kallyan@apiffer.in", + }, + { + name: "shreyam maity", + email: "shreyam@apiffer.in", + }, + ]; + console.log(eventdetails.listParticipants); + const submitCert = async () => { + const db = getFirestore(cert); + var q = query( + collection(db, "certMetas"), + where("eventName", "==", eventdetails.name) + ); + await getDocs(q) + .then(async (snapshot) => { + if (snapshot.empty) { + console.log("No matching data"); + var isDone = await uploadCertficateAdmin( + File.img, + data.name, + data.cId, + data.Id, + data.ses, + data.dep, + eventdetails.name, + eventdetails.date, + "admin", + eventdetails.listParticipants + ); + if (isDone) { + alert("Uploaded"); + } else { + alert("Failed"); + } + } else { + alert("A meta with same name exists"); + } + }) + .catch((err) => { + console.log("Error getting documents", err); + }); + }; return ( -
- - - + {!File.img ? ( - - + + Drag and Drop .png File Here OR - handleSelectFile(fileRef)} hidden/> - + handleSelectFile(fileRef)} + hidden + /> + ) : ( - - + + {formatString(File?.img?.name)} - - - + + + )} -
+ ); } diff --git a/src/views/CertificateGen/index.js b/src/views/CertificateGen/index.js index 33a8e2e..243de58 100644 --- a/src/views/CertificateGen/index.js +++ b/src/views/CertificateGen/index.js @@ -1,115 +1,464 @@ -import { useState,useEffect } from "react"; -import { Button, Container, Flex, FormControl, FormHelperText, FormLabel, Input, Switch, Textarea } from "@chakra-ui/react"; +import { useState, useEffect } from "react"; +import { + Button, + Container, + Flex, + FormControl, + FormHelperText, + FormLabel, + Input, + Switch, + Textarea, +} from "@chakra-ui/react"; import CsvUploader from "components/Uploads/CsvUploader"; -import csvtojson from 'csvtojson' +import csvtojson from "csvtojson"; import ImageUploader from "components/Uploads/ImageUploader"; const CertificateGen = () => { - const [files,setfiles]= useState( - { - pdf: '', - csv: '', - img: '', - }) + const [files, setfiles] = useState({ + pdf: "", + csv: "", + img: "", + }); - const [certCord,setCertCord] = useState({ - name:{ - xAxis:0, - yAxis:0, - fontName: 'arial', - fontSize: 40, - fontColor: '' - }, - cId:{ - xAxis:0, - yAxis:0, - fontName: 'arial', - fontSize: 15, - fontColor: '' - } - }) -const [activeInputElementPos,setActiveInputElementPos] = useState({ - certname: false, - certid: false -}) + const [certCord, setCertCord] = useState({ + name: { + xAxis: 0, + yAxis: 0, + fontName: "arial", + fontSize: 40, + fontColor: "", + }, + cId: { + xAxis: 0, + yAxis: 0, + fontName: "arial", + fontSize: 15, + fontColor: "", + }, + Id: { + xAxis: 0, + yAxis: 0, + fontName: "arial", + fontSize: 30, + fontColor: "", + }, + ses: { + xAxis: 0, + yAxis: 0, + fontName: "arial", + fontSize: 15, + fontColor: "", + }, + dep: { + xAxis: 0, + yAxis: 0, + fontName: "arial", + fontSize: 15, + fontColor: "", + }, + }); + const [activeInputElementPos, setActiveInputElementPos] = useState({ + certname: false, + certid: false, + ses:false, + dep:false, + id:false + }); -const [eventDetails,setEventDetails] =useState({ - name: '', - date:'', - listParticipants: [] -}) - -useEffect(()=>{ - console.log(files.csv) - const reader = new FileReader(); - if(files.csv) - { - reader.readAsText(files.csv) - reader.onload = function () { - const csvString = reader.result; - csvtojson() - .fromString(csvString) - .then((csvJson) => { - // const jsonString = JSON.stringify(csvJson); - setEventDetails({...eventDetails,listParticipants:csvJson}) - }) - .catch(err=>console.log(err)); - }; - - } -},[files.csv]) + const [eventDetails, setEventDetails] = useState({ + name: "", + date: "", + id:"", + ses:"", + dep:"", + listParticipants: [], + }); + useEffect(() => { + console.log(files.csv); + const reader = new FileReader(); + if (files.csv) { + reader.readAsText(files.csv); + reader.onload = function () { + const csvString = reader.result; + csvtojson() + .fromString(csvString) + .then((csvJson) => { + // const jsonString = JSON.stringify(csvJson); + setEventDetails({ ...eventDetails, listParticipants: csvJson }); + }) + .catch((err) => console.log(err)); + }; + } + }, [files.csv]); return ( -
-
+
+
+
+ + Event Name + + setEventDetails({ ...eventDetails, name: e.target.value }) + } + /> +
+ Participant Name Position + + setActiveInputElementPos({ certid: false, certname: true }) + } + > + + +
+
+ X: {certCord.name.xAxis} , Y: {certCord.name.yAxis} +
+ X:{" "} + + setCertCord({ + ...certCord, + name: { ...certCord.name, xAxis: e.target.value }, + }) + } + placeholder="X" + /> + + Y:{" "} + + setCertCord({ + ...certCord, + name: { ...certCord.name, yAxis: e.target.value }, + }) + } + placeholder="Y" + /> +
+ + setCertCord({ + ...certCord, + name: { ...certCord.name, fontName: e.target.value }, + }) + } + placeholder="Font" + /> + + setCertCord({ + ...certCord, + name: { ...certCord.name, fontSize: e.target.value }, + }) + } + placeholder="Fontsize" + /> + + setCertCord({ + ...certCord, + name: { ...certCord.name, fontColor: e.target.value }, + }) + } + /> +
+
+ + ID Position + + + setActiveInputElementPos({ ...activeInputElementPos, id:true }) + } + > + {" "} + + +
+ X: {certCord.Id.xAxis} , Y: {certCord.Id.yAxis} +
+ X: setCertCord({...certCord, Id: {...certCord.Id, xAxis: e.target.value}})} placeholder="X" /> +Y: setCertCord({...certCord, Id: {...certCord.Id, yAxis: e.target.value}})} placeholder="Y" /> -
- - Event Name - setEventDetails({...eventDetails,name:e.target.value})} /> -
- - Participant Name Position - - setActiveInputElementPos({certid:false,certname:true})}> - -
-
- X: {certCord.name.xAxis} , Y: {certCord.name.yAxis} - setCertCord({...certCord,name:{...certCord.name,fontName:e.target.value}})} placeholder="Font" /> - setCertCord({...certCord,name:{...certCord.name,fontSize:e.target.value}})} placeholder="Fontsize"/> - setCertCord({...certCord,name:{...certCord.name,fontColor:e.target.value}})} /> -
-
- - Certificate Id Position - - setActiveInputElementPos({certid:true,certname:false})}> -
- X: {certCord.cId.xAxis} , Y: {certCord.cId.yAxis} -
- setCertCord({...certCord,cId:{...certCord.cId,fontName:e.target.value}})} placeholder="Font" /> - setCertCord({...certCord,cId:{...certCord.cId,fontSize:e.target.value}})} placeholder="Fontsize"/> - setCertCord({...certCord,cId:{...certCord.cId,fontColor:e.target.value}})} /> -
-
+
+
+ + setCertCord({ + ...certCord, + Id: { ...certCord.Id, fontName: e.target.value }, + }) + } + placeholder="Font" + /> + + setCertCord({ + ...certCord, + Id: { ...certCord.Id, fontSize: e.target.value }, + }) + } + placeholder="Fontsize" + /> + + setCertCord({ + ...certCord, + Id: { ...certCord.Id, fontColor: e.target.value }, + }) + } + /> +
+
+ + Session Position + + + setActiveInputElementPos({ ...activeInputElementPos, ses:true }) + } + > + {" "} + + +
+ X: {certCord.ses.xAxis} , Y: {certCord.ses.yAxis} +
+ X: setCertCord({...certCord, ses: {...certCord.ses, xAxis: e.target.value}})} placeholder="X" /> +Y: setCertCord({...certCord, ses: {...certCord.ses, yAxis: e.target.value}})} placeholder="Y" /> - Event Date - setEventDetails({...eventDetails,date:e.target.value})} /> -
-
+
+
+ + setCertCord({ + ...certCord, + ses: { ...certCord.ses, fontName: e.target.value }, + }) + } + placeholder="Font" + /> + + setCertCord({ + ...certCord, + ses: { ...certCord.ses, fontSize: e.target.value }, + }) + } + placeholder="Fontsize" + /> + + setCertCord({ + ...certCord, + ses: { ...certCord.ses, fontColor: e.target.value }, + }) + } + /> +
+
+ + Department Position + + + setActiveInputElementPos({ ...activeInputElementPos, dep:true }) + } + > + {" "} + + +
+ X: {certCord.dep.xAxis} , Y: {certCord.dep.yAxis} +
+ X: setCertCord({...certCord, dep: {...certCord.dep, xAxis: e.target.value}})} placeholder="X" /> +Y: setCertCord({...certCord, dep: {...certCord.dep, yAxis: e.target.value}})} placeholder="Y" /> - Participants List - -
- -
-
- -
-
-
+
+
+ + setCertCord({ + ...certCord, + dep: { ...certCord.dep, fontName: e.target.value }, + }) + } + placeholder="Font" + /> + + setCertCord({ + ...certCord, + dep: { ...certCord.dep, fontSize: e.target.value }, + }) + } + placeholder="Fontsize" + /> + + setCertCord({ + ...certCord, + dep: { ...certCord.dep, fontColor: e.target.value }, + }) + } + /> +
+
+ + Certificate Id Position + + + setActiveInputElementPos({ certid: true, certname: false }) + } + > + {" "} + + +
+ X: {certCord.cId.xAxis} , Y: {certCord.cId.yAxis} +
+ + setCertCord({ + ...certCord, + cId: { ...certCord.cId, fontName: e.target.value }, + }) + } + placeholder="Font" + /> + + setCertCord({ + ...certCord, + cId: { ...certCord.cId, fontSize: e.target.value }, + }) + } + placeholder="Fontsize" + /> + + setCertCord({ + ...certCord, + cId: { ...certCord.cId, fontColor: e.target.value }, + }) + } + /> +
+
+ Event Date + + setEventDetails({ ...eventDetails, date: e.target.value }) + } + /> +
+
+ Participants List + +
+ +
+
+ +
+
+
); }; diff --git a/src/views/Dashboard/Tables/components/Authors.js b/src/views/Dashboard/Tables/components/Authors.js index 55e2e34..12a1b8f 100644 --- a/src/views/Dashboard/Tables/components/Authors.js +++ b/src/views/Dashboard/Tables/components/Authors.js @@ -43,7 +43,7 @@ const Authors = ({ All