96 lines
1.8 KiB
TypeScript
96 lines
1.8 KiB
TypeScript
import {
|
|
css,
|
|
customElement,
|
|
DeesElement,
|
|
html,
|
|
property,
|
|
query,
|
|
type TemplateResult,
|
|
} from "@design.estate/dees-element";
|
|
import * as plugins from "../plugins.js";
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
"dedocument-paymentcode": DedocumentPaymentCode;
|
|
}
|
|
}
|
|
|
|
@customElement("dedocument-paymentcode")
|
|
export class DedocumentPaymentCode extends DeesElement {
|
|
public static styles = [
|
|
css`
|
|
:host {
|
|
text-align: center;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
canvas {
|
|
width: inherit !important;
|
|
height: inherit !important;
|
|
}
|
|
`,
|
|
];
|
|
|
|
@query("canvas")
|
|
private canvasEl!: HTMLCanvasElement;
|
|
|
|
@property()
|
|
public bic: string;
|
|
|
|
@property()
|
|
public name: string;
|
|
|
|
@property()
|
|
public iban: string;
|
|
|
|
@property()
|
|
public currency: string;
|
|
|
|
@property({ type: Number })
|
|
public totalGross: number;
|
|
|
|
@property()
|
|
public reference: string;
|
|
|
|
private updateQRCode(): void {
|
|
if (!this.canvasEl) return;
|
|
|
|
plugins.qrcode.toCanvas(
|
|
this.canvasEl,
|
|
`BCD
|
|
001
|
|
1
|
|
SCT
|
|
${this.bic}
|
|
${this.name}
|
|
${this.iban}
|
|
${this.currency}${this.totalGross?.toFixed?.(2)}
|
|
|
|
${this.reference}`,
|
|
(error) => {
|
|
if (error) console.error(error);
|
|
}
|
|
);
|
|
}
|
|
|
|
public override update(
|
|
changedProperties: Parameters<DeesElement["update"]>[0]
|
|
): void {
|
|
super.update(changedProperties);
|
|
this.updateQRCode();
|
|
}
|
|
|
|
public render(): TemplateResult {
|
|
const allDataAvailable =
|
|
typeof this.bic === "string" &&
|
|
typeof this.name === "string" &&
|
|
typeof this.iban === "string" &&
|
|
typeof this.currency === "string" &&
|
|
typeof this.totalGross === "number" &&
|
|
typeof this.reference === "string";
|
|
|
|
return allDataAvailable ? html`<canvas></canvas>` : null;
|
|
}
|
|
}
|