Skip to content

Commit

Permalink
Merge pull request #345 from manipalutsav/feature-shareViaWhatsapp
Browse files Browse the repository at this point in the history 
Feature share via whatsapp
  • Loading branch information
@code-rohitr
code-rohitr committed Mar 31, 2024
2 parents cd1fbae + a3b1cc7 commit a219bd5
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 64 deletions.
10 changes: 5 additions & 5 deletions src/components/Certificates/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react";

import collegesService from "../../services/colleges";
import { getUser } from "../../services/userServices";
import certificateURL from '../../images/participation-certificate.jpg'
import certificateURL from '../../images/participation-certificate.png'
import JSZip from "jszip";

export default class Certificates extends React.Component {
Expand Down Expand Up @@ -56,8 +56,8 @@ export default class Certificates extends React.Component {
context.font = "bold 71px Blogger Sans";
context.fillStyle = "#000000";
context.textAlign = "center";
context.fillText(member.name, (canvas.width / 2), 480);
context.fillText(event, (canvas.width / 2), 760);
context.fillText(member.name, (canvas.width / 2), 520);
context.fillText(event, (canvas.width / 2), 780);
canvas.toBlob((blob) => {
link.href = URL.createObjectURL(blob);
link.download = member.name + " - " + event + ".png"
Expand Down Expand Up @@ -90,8 +90,8 @@ export default class Certificates extends React.Component {
context.font = "bold 71px Blogger Sans";
context.fillStyle = "#000000";
context.textAlign = "center";
context.fillText(list[i].name, (canvas.width / 2) , 480);
context.fillText(list[i].event, (canvas.width / 2), 760);
context.fillText(list[i].name, (canvas.width / 2) , 520);
context.fillText(list[i].event, (canvas.width / 2), 780);
canvas.toBlob((blob) => {
this.setState({ buttonName: `Processing ${Math.round(i / total * 100)}%...` });
resolve(blob)
Expand Down
170 changes: 111 additions & 59 deletions src/components/Rounds/Leaderboard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,95 +34,139 @@ export default class extends React.Component {
this.init();
}

async download() {
const { leaderboard } = this.state;

// Filter leaderboard by ranks
const ranks = {
1: leaderboard.filter(item => item.rank === 1),
2: leaderboard.filter(item => item.rank === 2),
3: leaderboard.filter(item => item.rank === 3)
};
async download(shareOption) {
let leaderboard = this.state.leaderboard;
let ranks = { 1: [], 2: [], 3: [] }

ranks[1] = leaderboard.filter(item => item.rank == 1);
ranks[2] = leaderboard.filter(item => item.rank == 2);
ranks[3] = leaderboard.filter(item => item.rank == 3);

// Get event details
const event = await eventService.get(this.props.event);
let event = await eventService.get(this.props.event);
const is_group_event = event.maxMembersPerTeam > 1;
const is_multiple_team_event = event.maxTeamsPerCollege > 1;
const eventName = event.name;
event = event.name;

// Prepare data for rendering
const placesArray = [
ranks[1].map(item => ({ name: getCertificateName(item, is_group_event, is_multiple_team_event) })),
ranks[2].map(item => ({ name: getCertificateName(item, is_group_event, is_multiple_team_event) })),
ranks[3].map(item => ({ name: getCertificateName(item, is_group_event, is_multiple_team_event) }))
ranks[1].map(item => ({
name: getCertificateName(item, is_group_event, is_multiple_team_event),
})),
ranks[2].map(item => ({
name: getCertificateName(item, is_group_event, is_multiple_team_event),
})),
ranks[3].map(item => ({
name: getCertificateName(item, is_group_event, is_multiple_team_event),
}))
];

// Create image element
const image = new Image();

let first_start = 450;
let second_start = 620;
let third_start = 790;

image.src = template;

// Wait for image to load
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const link = document.createElement('a');
image.onload = () => {
// Create canvas
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");

// Set canvas dimensions
canvas.width = image.width;
canvas.height = image.height;

// Draw image onto canvas
context.drawImage(image, 0, 0);

// Customize text styles
// context.font = "bold 37.4px Verdana";
context.font = "bold 37.4px Rye";
context.fillStyle = "#ffffff";
context.textAlign = "center";
let textStr = event + " Results";
let textWidth = context.measureText(textStr).width;
context.fillText((textStr).toUpperCase(), (canvas.width / 2), 365);
context.font = "bold 34px Rye";
context.textAlign = "left";

// Draw event name on canvas
context.fillText(eventName.toUpperCase() + " Results", canvas.width / 2, 365);

// Draw leaderboard data on canvas
let start = 450;
for (let i = 0; i < 3; i++) {
placesArray[i].forEach(item => {
context.font = "bold 34px HammersmithOne";
context.fillText(item.name, canvas.width / 6.4, start);
start += 40;
});
for (let i = 0; i < placesArray[0].length; i++) {
context.font = "bold 34px HammersmithOne";
let text = placesArray[0][i]["name"];
//if placesArray[0].length()==1
let { width } = context.measureText(text);
if (i == 0) {
context.fillText(text, (canvas.width / 6.4), first_start);
// context.fillRect((canvas.width / 3.1), first_start + 3, width, 2);
}
if (i == 2) {
context.fillText(text, (canvas.width / 6.4), first_start + 40);
// context.fillRect((canvas.width / 3.1), first_start - 37, width, 2);
}
if (i == 1) {
context.fillText(text, (canvas.width / 6.4), first_start - 40);
// context.fillRect((canvas.width / 3.1), first_start + 43, width, 2);
}
}
for (let i = 0; i < placesArray[1].length; i++) {
context.font = "bold 34px HammersmithOne";
let text = placesArray[1][i]["name"];
let { width } = context.measureText(text);
if (i == 0) {
context.fillText(text, (canvas.width / 6.4), second_start);
// context.fillRect((canvas.width / 3.1), second_start + 3, width, 2);
}
if (i == 2) {
context.fillText(text, (canvas.width / 6.4), second_start + 40);
// context.fillRect((canvas.width / 3.1), second_start - 37, width, 2);
}
if (i == 1) {
context.fillText(text, (canvas.width / 6.4), second_start - 40);
// context.fillRect((canvas.width / 3.1), second_start + 43, width, 2);
}
}
for (let i = 0; i < placesArray[2].length; i++) {
let text = placesArray[2][i]["name"];
let { width } = context.measureText(text);
if (i == 0) {
context.fillText(text, (canvas.width / 6.4), third_start);
// context.fillRect((canvas.width / 3.1), third_start + 3, width, 2);
}
if (i == 2) {
context.fillText(text, (canvas.width / 6.4), third_start + 40);
// context.fillRect((canvas.width / 3.1), third_start - 37, width, 2);
}
if (i == 1) {
context.fillText(text, (canvas.width / 6.4), third_start - 40);
// context.fillRect((canvas.width / 3.1), third_start + 43, width, 2);
}
}

// Convert canvas to blob
canvas.toBlob(async blob => {
// Create a File object from the blob
const file = new File([blob], eventName + "-leaderboard.png", { type: 'image/png' });

// Share image using Web Share API if available
if (typeof window.navigator.share === "function") {
canvas.toBlob(async (blob) => {
// Share image using Web Share API
if (navigator.share && shareOption == "Send") {
try {
await window.navigator.share({
files: [file],
title: eventName + " Results",
await navigator.share({
files: [new File([blob], "leaderboard.png", { type: "image/png" })],
title: event + " Results",
text: "Check out the leaderboard!"
});
console.log("Share was successful.");
console.log('Successful share');
} catch (error) {
console.log("Sharing failed", error);
console.log('Error sharing:', error);
}
} else {
// Fallback for browsers that do not support Web Share API
console.error("Cannot use Web Share API: API unavailable.");
// Download image
const link = document.createElement('a');
console.log('Web Share API not supported');
// You can provide alternative sharing methods here
}
// Download image
if (shareOption == "download") {
link.href = URL.createObjectURL(blob);
link.download = eventName + "-leaderboard.png";
link.download = event + "-leaderboard.png"
link.style.display = "none";
document.body.append(link);
link.click();
URL.revokeObjectURL(link.href); // Clean up
link.remove();
}



}, 'image/png');
};

}


Expand Down Expand Up @@ -158,7 +202,10 @@ export default class extends React.Component {
})
);
}

handleShare = (e) => {
console.log(e.target.value, "value");
this.download(e.target.value);
}
render = () => (
<div>
<div>
Expand Down Expand Up @@ -191,7 +238,12 @@ export default class extends React.Component {
{this.state.button}
</Button>
}
<button onClick={() => this.download()}>Download</button>
{/* <button onClick={() => this.download()}>Download</button> */}
<select name="share" style={{"cursor":"pointer","padding":".5rem"}} id="share" onChange={this.handleShare}>
<option value="share">Share</option>
<option value="download">Download</option>
<option value="Send">Send</option>
</select>
{/* <Link to={`/events/${this.props.event}/rounds/${this.props.round}/leaderboard/download`}><Button styles={{ marginLeft: 20 }}>Download</Button></Link> */}
</div>
</>
Expand Down
Binary file added src/images/participation-certificate.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit a219bd5

Please sign in to comment.