%PDF-
%PDF-
Mini Shell
Mini Shell
{% if exercisemonitoring.show_overview_region and exercisemonitoring.enabled %}
{% if exercisemonitoring.enable_snapshots %}
<div id="em-modal-start" class="modal fade in" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{ 'ExerciseMonitored'|get_plugin_lang('ExerciseMonitoringPlugin') }}</h4>
</div>
<div class="modal-body" id="em-terms-body">
{{ exercisemonitoring.instructions }}
</div>
<div class="modal-body text-center" id="em-camera-body" style="display: none;">
<p id="txt-iddoc-img-instructions" class="lead" style="display: block;">
{{ 'ImageIdDocumentCameraInstructions'|get_plugin_lang('ExerciseMonitoringPlugin') }}
</p>
<p id="txt-learner-img-instructions" class="lead" style="display: none;">
{{ 'ImageStudentCameraInstructions'|get_plugin_lang('ExerciseMonitoringPlugin') }}
</p>
<div style="position: relative">
<div id="monitoring-camera" class="embed-responsive embed-responsive-4by3"></div>
<img id="img-iddoc-placeholder" style="display: block;" src="{{ _p.web_plugin }}exercisemonitoring/assets/images/idcard.png">
<img id="img-learner-placeholder" style="display: none" src="{{ _p.web_plugin }}exercisemonitoring/assets/images/user.png">
</div>
<br>
<button class="btn btn-default" type="button" id="btn-snap" disabled>
<span class="fa fa-camera" aria-hidden="true"></span>
{{ 'Snapshot'|get_lang }}
</button>
</div>
<div class="modal-body text-center" id="em-iddoc-body" style="display: none;">
<p class="lead">{{ 'IdDocumentSnapshot'|get_plugin_lang('ExerciseMonitoringPlugin') }}</p>
<div id="img-iddoc"></div>
</div>
<div class="modal-body text-center" id="em-student-body" style="display: none;">
<p class="lead">{{ 'StudentSnapshot'|get_plugin_lang('ExerciseMonitoringPlugin') }}</p>
<div id="img-learner"></div>
</div>
<div id="em-terms-footer" class="modal-footer">
<button type="button" class="btn btn-primary" id="btn-accept">
<span class="fa fa-check" aria-hidden="true"></span> {{ 'Accept'|get_lang }}
</button>
</div>
<div id="em-camera-footer" class="modal-footer" style="display: none;">
<button class="btn btn-default" type="button" id="btn-retry" disabled>
<span class="fa fa-refresh" aria-hidden="true"></span>
{{ 'Retry'|get_plugin_lang('ExerciseMonitoringPlugin') }}
</button>
<button class="btn btn-primary" type="button" id="btn-next" disabled>
<span class="fa fa-forward" aria-hidden="true"></span> {{ 'Next'|get_lang }}
</button>
</div>
</div>
</div>
</div>
<script src="{{ _p.web }}web/assets/webcamjs/webcam.js"></script>
<script>
$(function () {
var $btnStartExercise = $('.exercise_overview_options a');
var $bodyTerms = $('#em-terms-body');
var $bodyCamera = $('#em-camera-body');
var $bodyIdDoc = $('#em-iddoc-body');
var $bodyStudent = $('#em-student-body');
var $footTerms = $('#em-terms-footer');
var $footCamera = $('#em-camera-footer');
var $btnSnap = $('#btn-snap');
var $btnRetry = $('#btn-retry');
var $btnNext = $('#btn-next');
var $imgIdDoc = $('#img-iddoc');
var $imgLearner = $('#img-learner');
var $txtIdDocInstructions = $('#txt-iddoc-img-instructions');
var $txtLearnerInstructions = $('#txt-learner-img-instructions');
var $imgIdDocPlaceholder = $('#img-iddoc-placeholder');
var $imgLearnerPlaceholder = $('#img-learner-placeholder');
var hasIdDoc = false;
var hasLearner = false;
var imgIdDoc = null;
var imgLearner = null;
if ($btnStartExercise.length > 0) {
$("#em-modal-start").modal("show");
}
$btnStartExercise.addClass('disabled').attr('aria-disabled', 'true');
$("#btn-accept").on('click', function (e) {
e.preventDefault();
$bodyTerms.hide();
$footTerms.hide();
$bodyCamera.show();
$footCamera.show();
Webcam.set({
height: 480,
width: 640,
});
Webcam.attach('#monitoring-camera');
Webcam.on('live', function () {
$txtIdDocInstructions.show();
$imgIdDocPlaceholder.show();
$txtLearnerInstructions.hide();
$imgLearnerPlaceholder.hide();
$btnSnap.prop({disabled: false}).focus();
$('#monitoring-camera video').addClass('embed-responsive-item');
});
});
$btnSnap.on('click', function (e) {
e.preventDefault();
$btnSnap.prop({disabled: true});
$btnRetry.prop({disabled: true});
$btnNext.prop({disabled: true});
snap()
.done(function () {
$btnRetry.prop({disabled: false});
$btnNext.prop({disabled: false});
});
});
$btnRetry.on('click', function (e) {
e.preventDefault();
$btnSnap.prop({disabled: false}).focus();
$btnRetry.prop({disabled: true});
$btnNext.prop({disabled: true});
if (hasIdDoc && !hasLearner) {
$bodyCamera.show();
$bodyIdDoc.hide();
hasIdDoc = false;
hasLearner = false;
} else if (hasIdDoc && hasLearner) {
$bodyCamera.show();
$bodyStudent.hide();
hasIdDoc = true;
hasLearner = false;
}
});
$btnNext.on('click', function (e) {
e.preventDefault();
$btnRetry.prop({disabled: true});
if (hasIdDoc && !hasLearner) {
$bodyIdDoc.hide();
$bodyCamera.show();
$txtIdDocInstructions.hide();
$imgIdDocPlaceholder.hide();
$txtLearnerInstructions.show();
$imgLearnerPlaceholder.show();
$btnSnap.prop({disabled: false}).focus();
} else if (hasIdDoc && hasLearner) {
$btnNext.prop({disabled: true});
$btnSnap.prop({disabled: true});
Webcam.reset();
sendData().done(function () {
$btnStartExercise.removeClass('disabled').removeAttr('aria-disabled');
window.location = $btnStartExercise.prop('href');
$("#em-modal-start").modal('hide');
});
}
});
$(window).on('keyup', function (e) {
if (32 === event.which && !$btnSnap.prop('disabled')) {
e.preventDefault();
$btnSnap.trigger('click');
}
});
function snap() {
var deferred = $.Deferred();
Webcam.snap(function (dataUri) {
var $imgSnapshot = $('<img>')
.prop({src: dataUri, id: 'img-snapshot'})
.addClass('img-responsive');
if (!hasIdDoc && !hasLearner) {
$imgIdDoc.html($imgSnapshot);
$bodyCamera.hide();
$bodyIdDoc.show();
hasIdDoc = true;
hasLearner = false;
imgIdDoc = dataUri;
} else if (hasIdDoc && !hasLearner) {
$imgLearner.html($imgSnapshot);
$bodyCamera.hide();
$bodyStudent.show();
hasIdDoc = true;
hasLearner = true;
imgLearner = dataUri;
}
deferred.resolve();
});
return deferred.promise();
}
function sendData() {
var rawImgIdDoc = imgIdDoc.replace(/^data:image\/\w+;base64,/, '');
var blobImgIdDoc = new Blob( [ Webcam.base64DecToArr(rawImgIdDoc) ], {type: 'image/jpeg'} );
var rawImgLearner = imgLearner.replace(/^data:image\/\w+;base64,/, '');
var blobImgLearner = new Blob( [ Webcam.base64DecToArr(rawImgLearner) ], {type: 'image/jpeg'} );
var formData = new FormData();
formData.append('iddoc', blobImgIdDoc, 'iddoc.jpg');
formData.append('learner', blobImgLearner, 'learner.jpg');
formData.append('exercise_id', '{{ exercisemonitoring.exercise_id }}');
return $.ajax({
url: '{{ _p.web_plugin }}exercisemonitoring/pages/start.ajax.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
});
}
});
</script>
<style>
#monitoring-camera {
height: auto !important;
max-width: 100% !important;
margin: 0 auto;
}
#em-camera-body img#img-iddoc-placeholder,
#em-camera-body img#img-learner-placeholder {
height: auto;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#monitoring-camera video {
height: auto !important;
max-width: 100%;
}
</style>
{% else %}
<div id="em-modal-start" class="modal fade in" tabindex="1" role="dialog" data-backdrop="static" data-keyboard="false" data-show="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{ 'ExerciseMonitored'|get_plugin_lang('ExerciseMonitoringPlugin') }}</h4>
</div>
<div class="modal-body" id="em-terms-body">
{{ exercisemonitoring.instructions }}
</div>
<div id="em-terms-footer" class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">
<span class="fa fa-check" aria-hidden="true"></span> {{ 'Accept'|get_lang }}
</button>
</div>
</div>
</div>
</div>
<script>
$(function () {
var $modal = $("#em-modal-start");
var $btnStartExercise = $('.exercise_overview_options a');
if ($btnStartExercise.length > 0) {
$modal.modal("show");
}
$modal.on('hidden.bs.modal', function (e) {
$btnStartExercise.removeClass('disabled').removeAttr('aria-disabled');
window.location = $btnStartExercise.prop('href');
});
});
</script>
{% endif %}
{% endif %}
Zerion Mini Shell 1.0