mirror of
https://github.com/danielvici/tool-website.git
synced 2026-01-16 23:01:26 +00:00
add regenerate of qrcode while changing size, info (qr) is now hidden
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
<div class="p-8 text-white">
|
<div class="px-8 text-white">
|
||||||
<div class="mx-auto">
|
<div class="mx-auto">
|
||||||
<div class="mb-8">
|
<div class="mb-8">
|
||||||
<app-custom-title
|
<app-custom-title
|
||||||
@@ -49,12 +49,13 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex justify-center mt-6 flex-col items-center space-y-4">
|
<div class="flex mt-6 flex-col items-center space-y-4">
|
||||||
<canvas #canvas class="hidden" #ziel></canvas>
|
<canvas #canvas class="hidden" #ziel></canvas>
|
||||||
@if (qrDataUrl) {
|
@if (qrDataUrl) {
|
||||||
<img [src]="qrDataUrl" alt="Generated QR Code" class="mx-auto border-4 border-white rounded-lg max-w-[500px] max-h-[500px]" />
|
<p class="self-start block text-sm font-medium text-gray-300 mb-2">Generated QR Code:</p>
|
||||||
|
<img [src]="qrDataUrl" alt="Generated QR Code" class="self-center mx-auto border-4 border-white rounded-lg max-w-[600px] max-h-[600px]" />
|
||||||
<button (click)="downloadQR()"
|
<button (click)="downloadQR()"
|
||||||
class="w-full bg-green-500 text-white py-2 px-4 rounded-md hover:bg-green-600 transition-colors">
|
class="w-full bg-green-500 text-white mt-4 py-2 px-4 rounded-md hover:bg-green-600 transition-colors">
|
||||||
Download QR Code
|
Download QR Code
|
||||||
</button>
|
</button>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -58,4 +58,10 @@ export class GeneratorQrcode {
|
|||||||
link.click();
|
link.click();
|
||||||
document.body.removeChild(link);
|
document.body.removeChild(link);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async ngOnInit() {
|
||||||
|
this.qrCodeDetailsForm.get('size')?.valueChanges.subscribe(() => {
|
||||||
|
this.generateQR();
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user