passed four serial numbers from blade to reosurce page

This commit is contained in:
dhanabalan
2025-10-24 18:25:59 +05:30
parent 6fe4289567
commit 0c00c47aa3

View File

@@ -288,6 +288,7 @@ document.addEventListener('DOMContentLoaded', () => {
<x-filament::button color="primary" @click="switchCamera" x-show="!photoTaken" class="inline-flex w-auto">Switch Camera</x-filament::button> <x-filament::button color="primary" @click="switchCamera" x-show="!photoTaken" class="inline-flex w-auto">Switch Camera</x-filament::button>
<x-filament::button color="primary" @click="verify" x-show="photoTaken" class="inline-flex w-auto">Verify</x-filament::button> <x-filament::button color="primary" @click="verify" x-show="photoTaken" class="inline-flex w-auto">Verify</x-filament::button>
<x-filament::button color="success" @click="uploadCroppedImage" x-show="photoTaken">OK Upload Cropped</x-filament::button> <x-filament::button color="success" @click="uploadCroppedImage" x-show="photoTaken">OK Upload Cropped</x-filament::button>
<x-filament::button color="success" @click="uploadOcr" x-show="photoTaken">Upload OCR</x-filament::button>
</div> </div>
<input type="hidden" x-ref="hiddenInput" x-model="photo1" name="camera_capture_file"> <input type="hidden" x-ref="hiddenInput" x-model="photo1" name="camera_capture_file">
@@ -340,19 +341,16 @@ function cameraCapture() {
const snapshot = this.$refs.snapshot; const snapshot = this.$refs.snapshot;
snapshot.src = canvas.toDataURL('image/png'); snapshot.src = canvas.toDataURL('image/png');
//Wait until image is loaded
// ✅ Wait until image is loaded
snapshot.onload = () => { snapshot.onload = () => {
// ✅ Make snapshot visible for Cropper
snapshot.classList.remove('hidden'); snapshot.classList.remove('hidden');
video.classList.add('hidden'); video.classList.add('hidden');
//Alpine reactive update inside nextTick //Alpine reactive update inside nextTick
this.$nextTick(() => { this.$nextTick(() => {
this.photoTaken = true; this.photoTaken = true;
//Destroy old cropper if exists //Destroy old cropper if exists
if (this.cropper) this.cropper.destroy(); if (this.cropper) this.cropper.destroy();
// ✅ Use requestAnimationFrame to ensure browser painted the image // ✅ Use requestAnimationFrame to ensure browser painted the image
@@ -376,7 +374,6 @@ snapshot.onload = () => {
}, },
// //
async uploadCroppedImage() { async uploadCroppedImage() {
@@ -436,9 +433,17 @@ snapshot.onload = () => {
// console.error(data.text); // console.error(data.text);
// } // }
if (data.success) { if (data.success) {
const serials = Array.isArray(data.text) ? data.text.join("\n") : data.text; // const serials = Array.isArray(data.text) ? data.text.join("\n") : data.text;
alert("OCR Result:\n" + serials); // alert("OCR Result:\n" + serials);
console.log(serials); // console.log(serials);
const serials = Array.isArray(data.text) ? data.text : [data.text];
const firstFour = serials.slice(0, 4);
// Emit Livewire event to Resource Page
Livewire.emit('fillSerialNumbers', firstFour);
alert("OCR Result:\n" + firstFour.join("\n"));
console.log("Serials sent to Resource Page:", firstFour);
} }
else { else {
alert("OCR Failed: " + data.error); alert("OCR Failed: " + data.error);