Angular 18 & Larvel QRcode Scan and update status from database

type here

can you help me please because I can't fix it, scanning the qrcode should update the status in my database please help me for the first time to build an angular project with a qrcode scan I tried different scanners installed but it won't work without a camera come out... sorry if I posted the whole code but I don't know what to do here for my capstone project. Thank youu!!

<!-- QR code scanner -->
<ngx-scanner-qrcode #action="scanner" (scanned)="onScanned($event)"></ngx-scanner-qrcode>

<!-- Loading indicator -->
<p *ngIf="action.isLoading">⌛ Loading...</p>

<!-- Start/Stop Scanner -->
<button (click)="action.isStart ? action.stop() : action.start()">
{{ action.isStart ? 'Stop' : 'Start' }}
</button>

<!-- Optional: Display scanned data -->
<p *ngIf="scannedData">Scanned Data: {{ scannedData }}</p>



export class QRScannerDialogComponent {
scannedData: string | null = null; // Store the scanned QR data

constructor(private http: HttpClient, private dataService: DataService) {}

// Called when the QR code is successfully scanned
onScanned(scannedData: any) {
console.log('Scanned Data:', scannedData); // Log the raw scanned data
const qrValue = scannedData[0]?.value; // Extract the 'value' field from the scanned data
console.log('QR Value:', qrValue); // Log the extracted QR value
this.scannedData = qrValue; // Store the scanned value (BOOK-955995)

if (qrValue) {
console.log('Calling updateBookingStatus function...'); // Log the function call
this.updateBookingStatus(qrValue); // Call the function to update the booking status
} else {
// Show an error message if no valid QR code value is found
Swal.fire({
icon: 'error',
title: 'Invalid QR Code',
text: 'No valid QR code value found. Please try again.',
});
}
}

updateBookingStatus(qrValue: string) {
console.log('updateBookingStatus function started.'); // Log the function start
const acceptedAt = new Date().toISOString(); // Capture the current timestamp

console.log('Sending data to backend:', {
complete_booking_reference: qrValue, // Use the qrValue variable directly
status: 'Completed',
accepted_at: acceptedAt
});

// Send the request using dataService
this.dataService.request('POST', 'update-booking-status', {
complete_booking_reference: qrValue,
status: 'Completed',
accepted_at: acceptedAt
}).subscribe(response => {
console.log('Booking status updated:', response); // Log the response from the server

// Show a success message using SweetAlert
Swal.fire({
icon: 'success',
title: 'Success',
text: 'Booking status updated successfully!',
});

}, error => {
console.error('Error updating booking status:', error); // Log any errors

// Show an error message using SweetAlert
Swal.fire({
icon: 'error',
title: 'Error',
text: 'There was an error updating the booking status. Please try again.',
});
});

console.log('Request sent to backend.'); // Log the request
}


I tried things from google and github but I can't follow it

Continue reading...