I'm facing an issue with installing the Angular Instascan library, so I am using it without installing and only importing the script. In order to make it work, I have to use JQuery in my TypeScript file within the component. Is there a way to call a TypeScript function inside a JQuery function to send the QR's content to my web service? I have tried using Ajax to send the data directly to the web service but it is not working.
The QR's function is "escanearQR" and the function that I want to call is "registrarAsistencia" inside the scanner.addListener.
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { DatosService } from '../datos.service';
import Swal from 'sweetalert2';
declare var $: any;
declare var Instascan: any;
@Component({
selector: 'app-toma-asistencia',
templateUrl: './toma-asistencia.component.html',
styleUrls: ['./toma-asistencia.component.css']
})
export class TomaAsistenciaComponent implements OnInit {
constructor(private router: Router, public datos: DatosService) { }
id_actividad_activa: string;
id_evento_activo: string;
actividad: any;
participantes: any;
qr:string;
datosEscaner:string;
obtenerParticipantes() {
this.datos.getParticipantes(this.id_evento_activo, this.id_actividad_activa).subscribe(res => {
this.participantes = res;
}, error => {
Swal.fire({
icon: 'error',
title: '¡Ups!',
text: 'No hay participantes aún',
timer: 2000
});
});
}
escanearQR(){
$('#btnqr').empty();
let scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5, mirror: false });
scanner.addListener('scan', function(content){
console.log(content);
$('#codigoQR').val(content);
//CALL HERE registrarAsistencia WITH content VALUE
});
Instascan.Camera.getCameras().then(function (cameras){
if(cameras.length > 0){
scanner.start(cameras[0]);
$('[name="options"]').on('change',function(){
if($(this).val() == 1){
if(cameras[0] != ""){
scanner.start(cameras[0]);
}else{
alert('No se ha encontrado camara frontal');
}
}else if($(this).val() == 2){
if(cameras[1] != ""){
scanner.start(cameras[1]);
}else{
alert('No se ha encontrado camara trasera');
}
}
});
}else{
console.error('No se han encontrado camaras.');
alert('No se han encontrado camaras.');
}
}).catch(function(e){
console.error(e);
alert(e);
});
}
registrarAsistencia(){
}
cerrarEscaner(){
window.location.reload();
}
ngOnInit(): void {
this.id_actividad_activa = this.datos.getActividadActiva().id_ac;
this.id_evento_activo = this.datos.getEventoActivo().id_evento;
this.actividad = this.datos.getActividadActiva().nombre;
this.obtenerParticipantes();
}
}