<link href="libs/webcodecamjs-master/css/style.css" rel="stylesheet">
<form id="form-marcacion" class="list " onsubmit="return false;">
<div class="container">
<div class="row ">
<div class="col-lg-6 col-lg-offset-3 col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-1 col-xs-12">
<div class="spacer" style="width: 100%; height: 60px;"></div>
<div style="width: 100%;margin: auto;">
<h1 style="text-align: center;font-weight: bold;">CONTROL DE ASISTENCIA</h1>
<h4 style="text-align: center;" class="">Tiempo Actual: <span id="marcacion-tiempousuario"></span></h4>
<div id="QR-Code" class="container" style=" width:auto;">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="botones hidden">
<button id="play" data-toggle="tooltip" title="Scannear" type="button" class="btn btn-success btn-sm">
<ul class="bars"><li></li><li></li><li></li><li></li></ul><div class="scannericon"></div></button>
<select class="form-control hidden" id="camera-select"></select>
</div>
</div>
<div class="panel-body">
<div class="col-md-12" title="Marcacion" style="padding-bottom: 30px; padding-top: 20px;">
<?php Vistas::mostrar("asistencia", "btn-sentidos"); ?>
</div>
<div class="col-md-12" style="text-align: center;">
<div style="text-align: center;">
<div >
<div class="" style="position: relative;display: inline-block;">
<canvas width="320" height="320" id="webcodecam-canvas" style="width: 100%;"></canvas>
<div class="scanner-laser laser-rightBottom" style="opacity: 0.5;"></div>
<div class="scanner-laser laser-rightTop" style="opacity: 0.5;"></div>
<div class="scanner-laser laser-leftBottom" style="opacity: 0.5;"></div>
<div class="scanner-laser laser-leftTop" style="opacity: 0.5;"></div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6" style="text-align: center;">
<h5>Nombre:</h5><input type="text" class="form-control" id="nombre" style="text-align: center;" name="nombre" disabled="" readonly="" placeholder="Identificando al colaborador..." value="<?php if (Visitante::estaLogueado() or isset($usuario->personaIDENTIFICACION)): ?><?= Visitante::nombre(); ?><?php endif; ?>">
</div>
<div class="col-md-6" style="text-align: center;">
<h5>Cédula:</h5><input type="number" class="form-control" id="identificacion" style="text-align: center;" name="num_cedula" <?php if (Visitante::estaLogueado() or isset($usuario->personaIDENTIFICACION)): ?> readonly=""<?php endif; ?> placeholder="Escribe tu cedula" value="<?= Visitante::cedula(); ?>" required="">
</div>
</div>
</div>
<div class="panel-footer" style="text-align: center;" id="marcacion-list-item-container3">
<button id="btn-marcacion" type="submit" class="btn btn-primary">Aceptar</button>
<p>Solo es necesario presionar el botón una sola vez, y esperar a que el sistema responda; Si no sucede nada luego de presionar el botón, debe reportarlo a <a href="mailto:soporte.tics@ccsm.org.co">soporte.tics@ccsm.org.co</a>.</p>
</div>
<input type="hidden" id="carnet" name="carnet" value="NO"/>
<input type="hidden" id="tiempo" name="tiempo"/>
<input type="hidden" id="longitud" name="longitud" />
<input type="hidden" id="latitud" name="latitud" />
</div>
</div>
</div>
<div class="spacer" style="width: 100%; height: 60px;">
</div>
<div id="btn-login"></div>
</div>
</div>
</div>
</form>
<script>
cargarLogin('btn-login');
</script>
<script type="text/javascript" src="libs/webcodecamjs-master/js/filereader.js"></script>
<script type="text/javascript" src="libs/webcodecamjs-master/js/qrcodelib.js"></script>
<script type="text/javascript" src="libs/webcodecamjs-master/js/webcodecamjquery.js"></script>
<!--<script type="text/javascript" src="/libs/webcodecamjs-master/js/mainjquery.js"></script>-->
<!--<script type="text/javascript" src="/vistas/asistencia/js/asistenciasqr.js"></script>-->
<script type="text/javascript" >
var decoder;
var canvasData;
var scannedQR = $("#scanned-QR");
var grabImg = $("#btn-marcacion");
var scannedImg = $("#scanned-img");
var scannerLaser = $(".scanner-laser");
$(document).ready(function () {
var args = {
zoom: 3,
flipHorizontal: true,
autoBrightnessValue: 100,
width: 500,
height: 500,
resultFunction: function (res) {
[].forEach.call(scannerLaser, function (el) {
$(el).fadeOut(300, function () {
$(el).fadeIn(300);
});
});
procesarResultadoQR(res);
},
getDevicesError: function (error) {
var p, message = "getdDevicerError detected with the following parameters:\n";
for (p in error) {
message += (p + ": " + error[p] + "\n");
}
alert(message + error.toLocaleString());
},
getUserMediaError: function (error) {
var p, message = "getUserError detected with the following parameters:\n";
for (p in error) {
message += (p + ": " + error[p] + "\n");
}
alert(message + error.toLocaleString());
},
cameraError: function (error) {
var p, message = "CameraError detected with the following parameters:\n";
if (error.name == "NotSupportedError") {
var ans = confirm("Your browser does not support getUserMedia via HTTP!\n(see: https://goo.gl/Y0ZkNV).\n You want to see github demo page in a new window?");
if (ans) {
window.open("https://andrastoth.github.io/webcodecamjs/");
}
} else {
for (p in error) {
message += p + ": " + error[p] + "\n";
}
cargarVista("asistencia", "sinpermisos", 'error=ErrorCamara');
//alert(message + error.toLocaleString());
}
},
cameraSuccess: function () {
grabImg.removeClass("disabled");
}
};
decoder = $("#webcodecam-canvas").WebCodeCamJQuery(args).data().plugin_WebCodeCamJQuery;
decoder.buildSelectMenu("#camera-select", "environment|back").init();
scannedQR.text("Escaneando ...");
grabImg.removeClass("disabled");
decoder.play();
grabImg.on("click", function () {
//esperaCapturarImagen();
});
});
var timerCapturar = null;
function esperaCapturarImagen() {
decoder.options.zoom = 1;
clearTimeout(timerCapturar);
timerCapturar = setTimeout(function () {
//scannedImg.attr("src", decoder.getLastImageSrc());
canvasData = decoder.getLastImageSrc();
decoder.options.zoom = 3;
ejecutarOperacion(
"asistencia", "registroTiempoMarcacion", $("#form-marcacion").serialize() + "&imgData=" + canvasData,
function (datos) {
alert(datos);
datos = JSON.parse(datos);
if (datos.RESPUESTA === 'EXITO') {
cargarVista('asistencia', 'confirmarMarcacion', 'idAsistencia=' + datos.IDASISTENCIA);
} else {
alert(datos.MENSAJE);
}
}
);
//guardarImagen();
}, 300);
}
function detenerCamara() {
decoder = $("#webcodecam-canvas").WebCodeCamJQuery().data().plugin_WebCodeCamJQuery;
decoder.stop();
}
function procesarResultadoQR(res) {
identificacionColaborador = res.code.replace("https://validar.apps.ccsm.org.co/?colaborador=", "");
verificaridentificacion(identificacionColaborador, registrarTiempoAsistencia);
$("#carnet").val("SI");
}
</script>
<script type="text/javascript" src="vistas/asistencia/js/Geolocalizacion.js"></script>
<script type="text/javascript" >
$(document).ready(function () {
$("#form-marcacion").submit(function (evt) {
esperaCapturarImagen();
evt.preventDefault();
});
localize();
});
</script>
<script type="text/javascript" >
var tiempoInactivo = 0;
var tiempoInactividad = 300;
var controlRecarga = setInterval(function () {
ejecutarOperacionOculta( "tienda-apps", "asistencia", "controlTiempoMarcacion", "",
function (datos) {
datos = JSON.parse(datos);
$("#marcacion-tiempousuario").html(
datos.tiempo.hours + ":" + datos.tiempo.minutes + ":" + datos.tiempo.seconds
);
$("#tiempo").val(
datos.tiempo.hours + ":" + datos.tiempo.minutes + ":" + datos.tiempo.seconds
);
}
);
tiempoInactivo++;
//console.log('t:'+tiempoInactivo);
if (tiempoInactivo === tiempoInactividad) {
detenerCamara();
cargarVista("asistencia", "inactividad");
}
}, 1000);
$(document).mousemove(function (event) {
pararRecarga();
}).keydown(function (event) {
pararRecarga();
});
$("#identificacion").keyup(function () {
$("#carnet").val("NO");
esperaEnviarIdentificacion(identificacion.value);
});
var timerVerificar = null;
function esperaEnviarIdentificacion(identificacionColaborador) {
clearTimeout(timerVerificar);
timerVerificar = setTimeout(function () {
verificaridentificacion(identificacionColaborador, null);
}, 1000);
}
function pararRecarga() {
//console.log('parar');
//clearTimeout(controlRecarga);
tiempoInactivo = 0;
}
function verificaridentificacion(identificacionColaborador, functionRegistrar) {
//var identificacionColaborador = $("#identificacion").val();
ejecutarOperacionOculta(
"asistencia", "datosColaborador", "identificacion=" + identificacionColaborador,
function (datos) {
console.log(datos);
datos = JSON.parse(datos);
if (datos.Colaborador !== null) {
$("#nombre").val(datos.Colaborador.personaNOMBRES + " " + datos.Colaborador.personaAPELLIDOS);
$("#identificacion").val(datos.Colaborador.personaIDENTIFICACION);
if (functionRegistrar !== null) {
functionRegistrar(datos);
}
} else {
$("#nombre").val("Verifique la cedula. No se ha podido identificar al colaborador.");
}
}
);
}
/**
* Registra el tiempo de la marcacion
*/
function registrarTiempoAsistencia() {
$("#btn-marcacion").click();
}
</script>