Skip to content

phoenix id card #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
adarshgupta404 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

phoenix id card #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
334 changes: 221 additions & 113 deletions src/components/Uploads/ImageUploader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = () => {
Expand All @@ -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 (
<div className="h-[100%] bg-[#71717129] w-[100%] border-slate-500 border-[.0005rem] rounded-2xl p-5"
onDragOver={handleDragOver}
<div
className="h-[100%] bg-[#71717129] w-[100%] border-slate-500 border-[.0005rem] rounded-2xl p-5"
onDragOver={handleDragOver}
onDrop={handleDrop}
onDragLeave={handleDragLeave}
>


<Flex alignItems='center' justifyContent='center' h='100%'>
<Flex alignItems="center" justifyContent="center" h="100%">
{!File.img ? (
<Flex flexDirection='column' justifyContent='space-evenly' w="100%" h='100%' textAlign='center'>
<canvas height="500px" width="800px" id="cert" className="bg-gray-200/10"/>
<Flex
flexDirection="column"
justifyContent="space-evenly"
w="100%"
h="100%"
textAlign="center"
>
<canvas
height="500px"
width="800px"
id="cert"
className="bg-gray-200/10"
/>
<Text> Drag and Drop .png File Here</Text>
<span>OR</span>
<input type="file" ref={fileRef} onChange={()=>handleSelectFile(fileRef)} hidden/>
<Button w='50%' marginX='auto' colorScheme='gray' onClick={()=>fileRef.current.click()}>Select File</Button>
<input
type="file"
ref={fileRef}
onChange={() => handleSelectFile(fileRef)}
hidden
/>
<Button
w="50%"
marginX="auto"
colorScheme="gray"
onClick={() => fileRef.current.click()}
>
Select File
</Button>
</Flex>
) : (
<Flex flexDirection='column' justifyContent='space-evenly' w="100%" h='100%' textAlign='center'>
<canvas height="500px" width="800px" id="cert" className="bg-green-500 cursor-pointer"/>
<Flex
flexDirection="column"
justifyContent="space-evenly"
w="100%"
h="100%"
textAlign="center"
>
<canvas
height="500px"
width="800px"
id="cert"
className="bg-green-500 cursor-pointer"
/>
<Text> {formatString(File?.img?.name)}</Text>
<Button w='50%' marginX='auto' colorScheme='red' onClick={()=>setFile({...File,img:''})}>Delete File</Button>
<Button w='50%' marginX='auto' colorScheme='blue' onClick={submitCert}>Upload Certificate</Button>
</Flex>
<Button
w="50%"
marginX="auto"
colorScheme="red"
onClick={() => setFile({ ...File, img: "" })}
>
Delete File
</Button>
<Button
w="50%"
marginX="auto"
colorScheme="blue"
onClick={submitCert}
>
Upload Certificate
</Button>
</Flex>
)}
</Flex>
</div>
</div>
);
}

Expand Down
Loading