trentlarson/crowd-funder-from-jason
1
0
Fork 0
forked from jsnbuchanan/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

for certificate: fix the canvas to fit in the middle vertically, add amount, and position things better

Browse Source
This commit is contained in:
Trent Larson
2024-12-20 19:09:20 -07:00
parent 8bf9640c10
commit af12e1bd51
2 changed files with 38 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/views/ClaimCertificateView.vue
View File

@@ -1,21 +1,13 @@
<template>
<section id="Content">
<div v-if="claimData">
<canvas ref="claimCanvas"></canvas>
<div class="flex items-center justify-center h-screen">
<div v-if="claimData">
<canvas class="w-full block mx-auto" ref="claimCanvas"></canvas>
</div>
</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";
@@ -116,9 +108,13 @@ export default class ClaimCertificateView extends Vue {
// Draw claim type
ctx.font = "bold 20px Arial";
const claimTypeText =
this.serverUtil.capitalizeAndInsertSpacesBeforeCaps(
claimData.claimType || "",
);
claimData.claimType === "GiveAction"
? "Gift"
: claimData.claimType === "PlanAction"
? "Project"
: this.serverUtil.capitalizeAndInsertSpacesBeforeCaps(
claimData.claimType || "",
);
const claimTypeWidth = ctx.measureText(claimTypeText).width;
ctx.fillText(
claimTypeText,
@@ -126,8 +122,8 @@ export default class ClaimCertificateView extends Vue {
CANVAS_HEIGHT * 0.33,
);
if (claimData.claim.agent) {
const presentedText = "Presented to ";
if (claimData.claimType === "GiveAction" && claimData.claim.agent) {
const presentedText = "Thanks To ";
ctx.font = "14px Arial";
const presentedWidth = ctx.measureText(presentedText).width;
ctx.fillText(
@@ -146,7 +142,7 @@ export default class ClaimCertificateView extends Vue {
ctx.fillText(
agentText,
(CANVAS_WIDTH - agentWidth) / 2, // Center horizontally
CANVAS_HEIGHT * 0.4,
CANVAS_HEIGHT * 0.41,
);
}
@@ -162,16 +158,29 @@ export default class ClaimCertificateView extends Vue {
ctx.fillText(
descriptionLine,
(CANVAS_WIDTH - descriptionWidth) / 2,
CANVAS_HEIGHT * 0.45,
CANVAS_HEIGHT * 0.495,
);
}
if (claimData.claim.object?.amountOfThisGood && claimData.claim.object?.unitCode) {
const amount = claimData.claim.object.amountOfThisGood;
const unit = claimData.claim.object.unitCode;
const amountText = serverUtil.displayAmount(unit, amount);
const amountWidth = ctx.measureText(amountText).width;
// if there was no description then put this in that spot, otherwise put it below the description
const yPos = descriptionText ? CANVAS_HEIGHT * 0.525 : CANVAS_HEIGHT * 0.495;
ctx.font = "14px Arial";
ctx.fillText(amountText, (CANVAS_WIDTH - amountWidth) / 2, yPos);
}
// Draw claim issuer & recipient
if (claimData.issuer) {
ctx.font = "14px Arial";
const issuerText =
"Issued by " +
serverUtil.didInfoForCertificate(claimData.issuer, allContacts);
let fullIssuer = serverUtil.didInfoForCertificate(claimData.issuer, allContacts);
if (fullIssuer.length > 15) {
fullIssuer = fullIssuer.substring(0, 30) + "...";
}
const issuerText = "Issued by " + fullIssuer;
ctx.fillText(issuerText, CANVAS_WIDTH * 0.3, CANVAS_HEIGHT * 0.6);
}
if (confirmerIds.length > 0) {