7 changed files with 179 additions and 8 deletions
|
After Width: | Height: | Size: 332 KiB |
@ -0,0 +1,149 @@ |
|||||
|
<template> |
||||
|
<section id="Content"> |
||||
|
<div v-if="claimData"> |
||||
|
<canvas ref="claimCanvas"></canvas> |
||||
|
</div> |
||||
|
</section> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
canvas { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { Component, Vue } from "vue-facing-decorator"; |
||||
|
import { nextTick } from "vue"; |
||||
|
import QRCode from "qrcode"; |
||||
|
|
||||
|
import { NotificationIface } from "@/constants/app"; |
||||
|
import { retrieveSettingsForActiveAccount } from "@/db/index"; |
||||
|
import * as endorserServer from "@/libs/endorserServer"; |
||||
|
|
||||
|
@Component |
||||
|
export default class ClaimViewCertificate extends Vue { |
||||
|
$notify!: (notification: NotificationIface, timeout?: number) => void; |
||||
|
|
||||
|
activeDid = ""; |
||||
|
allMyDids: Array<string> = []; |
||||
|
apiServer = ""; |
||||
|
claimId = ""; |
||||
|
claimData = null; |
||||
|
|
||||
|
endorserServer = endorserServer; |
||||
|
|
||||
|
async created() { |
||||
|
const settings = await retrieveSettingsForActiveAccount(); |
||||
|
this.activeDid = settings.activeDid || ""; |
||||
|
this.apiServer = settings.apiServer || ""; |
||||
|
const pathParams = window.location.pathname.substring( |
||||
|
"/claim-cert/".length, |
||||
|
); |
||||
|
this.claimId = pathParams; |
||||
|
await this.fetchClaim(); |
||||
|
} |
||||
|
|
||||
|
async fetchClaim() { |
||||
|
try { |
||||
|
const response = await fetch( |
||||
|
`${this.apiServer}/api/claim/${this.claimId}`, |
||||
|
); |
||||
|
if (response.ok) { |
||||
|
this.claimData = await response.json(); |
||||
|
await nextTick(); // Wait for the DOM to update |
||||
|
this.drawCanvas(); |
||||
|
} else { |
||||
|
throw new Error(`Error fetching claim: ${response.statusText}`); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error("Failed to load claim:", error); |
||||
|
this.$notify({ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Error", |
||||
|
text: "There was a problem loading the claim.", |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
drawCanvas() { |
||||
|
const canvas = this.$refs.claimCanvas as HTMLCanvasElement; |
||||
|
if (canvas) { |
||||
|
const CANVAS_WIDTH = 1100; |
||||
|
const CANVAS_HEIGHT = 850; |
||||
|
|
||||
|
// size to approximate portrait of 8.5"x11" |
||||
|
canvas.width = CANVAS_WIDTH; |
||||
|
canvas.height = CANVAS_HEIGHT; |
||||
|
const ctx = canvas.getContext("2d"); |
||||
|
if (ctx) { |
||||
|
// Load the background image |
||||
|
const backgroundImage = new Image(); |
||||
|
backgroundImage.src = "/img/background/cert-frame-2.jpg"; |
||||
|
backgroundImage.onload = async () => { |
||||
|
// Draw the background image |
||||
|
ctx.drawImage(backgroundImage, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); |
||||
|
|
||||
|
// Set font and styles |
||||
|
ctx.fillStyle = "black"; |
||||
|
|
||||
|
// Draw claim type |
||||
|
ctx.font = "bold 20px Arial"; |
||||
|
const claimTypeText = |
||||
|
this.endorserServer.capitalizeAndInsertSpacesBeforeCaps( |
||||
|
this.claimData.claimType, |
||||
|
); |
||||
|
const claimTypeWidth = ctx.measureText(claimTypeText).width; |
||||
|
ctx.fillText( |
||||
|
claimTypeText, |
||||
|
(CANVAS_WIDTH - claimTypeWidth) / 2, // Center horizontally |
||||
|
CANVAS_HEIGHT * 0.35, |
||||
|
); |
||||
|
|
||||
|
const descriptionText = |
||||
|
this.claimData.claim.description || this.claimData.claim.name; |
||||
|
if (descriptionText) { |
||||
|
const descriptionLine = |
||||
|
descriptionText.length > 50 |
||||
|
? descriptionText.substring(0, 47) + "..." |
||||
|
: descriptionText; |
||||
|
ctx.font = "14px Arial"; |
||||
|
const descriptionWidth = ctx.measureText(descriptionLine).width; |
||||
|
ctx.fillText( |
||||
|
descriptionLine, |
||||
|
(CANVAS_WIDTH - descriptionWidth) / 2, |
||||
|
CANVAS_HEIGHT * 0.45, |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// Draw claim ID |
||||
|
ctx.font = "14px Arial"; |
||||
|
ctx.fillText(this.claimId, CANVAS_WIDTH * 0.3, CANVAS_HEIGHT * 0.62); |
||||
|
ctx.fillText( |
||||
|
"via EndorserSearch.com", |
||||
|
CANVAS_WIDTH * 0.3, |
||||
|
CANVAS_HEIGHT * 0.65, |
||||
|
); |
||||
|
|
||||
|
// Generate and draw QR code |
||||
|
const qrCodeCanvas = document.createElement("canvas"); |
||||
|
await QRCode.toCanvas(qrCodeCanvas, window.location.href, { |
||||
|
width: 150, |
||||
|
color: { light: "#0000" /* Transparent background */ }, |
||||
|
}); |
||||
|
ctx.drawImage( |
||||
|
qrCodeCanvas, |
||||
|
CANVAS_WIDTH * 0.57, |
||||
|
CANVAS_HEIGHT * 0.55, |
||||
|
); |
||||
|
}; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue