350 lines
10 KiB
JavaScript
350 lines
10 KiB
JavaScript
/*
|
|
Copyright (c) 2018 [Glacies UG, Berlin, Germany] (http://glacies.de)
|
|
Developer: Thilina Hasantha (http://lk.linkedin.com/in/thilinah | https://github.com/thilinah)
|
|
*/
|
|
|
|
import AdapterBase from '../../../api/AdapterBase';
|
|
import FormValidation from '../../../api/FormValidation';
|
|
|
|
class AttendanceAdapter extends AdapterBase {
|
|
constructor(endPoint, tab, filter, orderBy) {
|
|
super(endPoint, tab, filter, orderBy);
|
|
this.photoAttendance = false;
|
|
}
|
|
|
|
getDataMapping() {
|
|
return [
|
|
'id',
|
|
'employee',
|
|
'in_time',
|
|
'out_time',
|
|
'note',
|
|
];
|
|
}
|
|
|
|
getHeaders() {
|
|
return [
|
|
{ sTitle: 'ID', bVisible: false },
|
|
{ sTitle: 'Employee' },
|
|
{ sTitle: 'Time-In' },
|
|
{ sTitle: 'Time-Out' },
|
|
{ sTitle: 'Note' },
|
|
];
|
|
}
|
|
|
|
getFormFields() {
|
|
return [
|
|
['employee', {
|
|
label: 'Employee', type: 'select2', 'allow-null': false, 'remote-source': ['Employee', 'id', 'first_name+last_name'],
|
|
}],
|
|
['id', { label: 'ID', type: 'hidden' }],
|
|
['in_time', { label: 'Time-In', type: 'datetime' }],
|
|
['out_time', { label: 'Time-Out', type: 'datetime', validation: 'none' }],
|
|
['note', { label: 'Note', type: 'textarea', validation: 'none' }],
|
|
];
|
|
}
|
|
|
|
getFilters() {
|
|
return [
|
|
['employee', {
|
|
label: 'Employee', type: 'select2', 'allow-null': false, 'remote-source': ['Employee', 'id', 'first_name+last_name'],
|
|
}],
|
|
|
|
];
|
|
}
|
|
|
|
setPhotoAttendance(val) {
|
|
this.photoAttendance = parseInt(val, 10);
|
|
}
|
|
|
|
|
|
getCustomTableParams() {
|
|
const that = this;
|
|
const dataTableParams = {
|
|
aoColumnDefs: [
|
|
{
|
|
fnRender(data, cell) {
|
|
return that.preProcessRemoteTableData(data, cell, 2);
|
|
},
|
|
aTargets: [2],
|
|
},
|
|
{
|
|
fnRender(data, cell) {
|
|
return that.preProcessRemoteTableData(data, cell, 3);
|
|
},
|
|
aTargets: [3],
|
|
},
|
|
{
|
|
fnRender(data, cell) {
|
|
return that.preProcessRemoteTableData(data, cell, 4);
|
|
},
|
|
aTargets: [4],
|
|
},
|
|
{
|
|
fnRender: that.getActionButtons,
|
|
aTargets: [that.getDataMapping().length],
|
|
},
|
|
],
|
|
};
|
|
return dataTableParams;
|
|
}
|
|
|
|
preProcessRemoteTableData(data, cell, id) {
|
|
if (id === 2) {
|
|
if (cell === '0000-00-00 00:00:00' || cell === '' || cell === undefined || cell == null) {
|
|
return '';
|
|
}
|
|
return Date.parse(cell).toString('yyyy MMM d <b>HH:mm</b>');
|
|
} if (id === 3) {
|
|
if (cell === '0000-00-00 00:00:00' || cell === '' || cell === undefined || cell == null) {
|
|
return '';
|
|
}
|
|
return Date.parse(cell).toString('MMM d <b>HH:mm</b>');
|
|
} if (id === 4) {
|
|
if (cell !== undefined && cell !== null) {
|
|
if (cell.length > 10) {
|
|
return `${cell.substring(0, 10)}..`;
|
|
}
|
|
}
|
|
return cell;
|
|
}
|
|
}
|
|
|
|
|
|
save() {
|
|
const validator = new FormValidation(`${this.getTableName()}_submit`, true, { ShowPopup: false, LabelErrorClass: 'error' });
|
|
if (validator.checkValues()) {
|
|
const params = validator.getFormParameters();
|
|
|
|
const msg = this.doCustomValidation(params);
|
|
if (msg == null) {
|
|
const id = $(`#${this.getTableName()}_submit #id`).val();
|
|
if (id != null && id !== undefined && id !== '') {
|
|
params.id = id;
|
|
}
|
|
|
|
const reqJson = JSON.stringify(params);
|
|
const callBackData = [];
|
|
callBackData.callBackData = [];
|
|
callBackData.callBackSuccess = 'saveSuccessCallback';
|
|
callBackData.callBackFail = 'saveFailCallback';
|
|
|
|
this.customAction('savePunch', 'admin=attendance', reqJson, callBackData);
|
|
} else {
|
|
const label = $(`#${this.getTableName()}Form .label`);
|
|
label.html(msg);
|
|
label.show();
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
saveSuccessCallback(callBackData) {
|
|
this.get(callBackData);
|
|
}
|
|
|
|
|
|
saveFailCallback(callBackData) {
|
|
this.showMessage('Error saving attendance entry', callBackData);
|
|
}
|
|
|
|
isSubProfileTable() {
|
|
return this.user.user_level !== 'Admin';
|
|
}
|
|
|
|
showPunchImages(id) {
|
|
const reqJson = JSON.stringify({ id });
|
|
const callBackData = [];
|
|
callBackData.callBackData = [];
|
|
callBackData.callBackSuccess = 'getImagesSuccessCallback';
|
|
callBackData.callBackFail = 'getImagesFailCallback';
|
|
this.customAction('getImages', 'admin=attendance', reqJson, callBackData);
|
|
}
|
|
|
|
getImagesSuccessCallback(callBackData) {
|
|
$('#attendnaceMapCanvasIn').remove();
|
|
$('#attendnaceCanvasInWrapper').html('<canvas id="attendnaceCanvasIn" height="156" width="208" style="border: 1px #222 dotted;"></canvas>');
|
|
|
|
$('#attendnaceCanvasOut').remove();
|
|
$('#attendnaceCanvasOutWrapper').html('<canvas id="attendnaceCanvasOut" height="156" width="208" style="border: 1px #222 dotted;"></canvas>');
|
|
|
|
$('#attendnaceCanvasPunchInTime').html('');
|
|
$('#attendnaceCanvasPunchOutTime').html('');
|
|
$('#punchInLocation').html('');
|
|
$('#punchOutLocation').html('');
|
|
$('#punchInIp').html('');
|
|
$('#punchOutIp').html('');
|
|
|
|
$('#attendnaceMapCanvasIn').remove();
|
|
$('#attendnaceMapCanvasInWrapper').html('<canvas id="attendnaceMapCanvasIn" height="156" width="208" style="border: 1px #222 dotted;"></canvas>');
|
|
|
|
$('#attendnaceMapCanvasOut').remove();
|
|
$('#attendnaceMapCanvasOutWrapper').html('<canvas id="attendnaceMapCanvasOut" height="156" width="208" style="border: 1px #222 dotted;"></canvas>');
|
|
|
|
$('#attendancePhotoModel').modal('show');
|
|
$('#attendnaceCanvasEmp').html(callBackData.employee_Name);
|
|
if (callBackData.in_time) {
|
|
$('#attendnaceCanvasPunchInTime').html(Date.parse(callBackData.in_time).toString('yyyy MMM d <b>HH:mm</b>'));
|
|
}
|
|
|
|
if (callBackData.image_in) {
|
|
$('#attendancePhoto').show();
|
|
const myCanvas = document.getElementById('attendnaceCanvasIn');
|
|
const ctx = myCanvas.getContext('2d');
|
|
const img = new Image();
|
|
img.onload = function () {
|
|
ctx.drawImage(img, 0, 0); // Or at whatever offset you like
|
|
};
|
|
img.src = callBackData.image_in;
|
|
}
|
|
|
|
if (callBackData.out_time) {
|
|
$('#attendnaceCanvasPunchOutTime').html(Date.parse(callBackData.out_time).toString('yyyy MMM d <b>HH:mm</b>'));
|
|
}
|
|
|
|
if (callBackData.image_out) {
|
|
$('#attendancePhoto').show();
|
|
const myCanvas = document.getElementById('attendnaceCanvasOut');
|
|
const ctx = myCanvas.getContext('2d');
|
|
const img = new Image();
|
|
img.onload = function () {
|
|
ctx.drawImage(img, 0, 0); // Or at whatever offset you like
|
|
};
|
|
img.src = callBackData.image_out;
|
|
}
|
|
|
|
if (callBackData.map_lat) {
|
|
$('#attendanceMap').show();
|
|
$('#punchInLocation').html(`${callBackData.map_lat},${callBackData.map_lng}`);
|
|
}
|
|
|
|
if (callBackData.map_out_lat) {
|
|
$('#attendanceMap').show();
|
|
$('#punchOutLocation').html(`${callBackData.map_out_lat},${callBackData.map_out_lng}`);
|
|
}
|
|
|
|
if (callBackData.in_ip) {
|
|
$('#punchInIp').html(callBackData.in_ip);
|
|
}
|
|
if (callBackData.out_ip) {
|
|
$('#punchOutIp').html(callBackData.out_ip);
|
|
}
|
|
|
|
if (callBackData.map_snapshot) {
|
|
$('#attendanceMap').show();
|
|
const myCanvas = document.getElementById('attendnaceMapCanvasIn');
|
|
const ctx = myCanvas.getContext('2d');
|
|
const img = new Image();
|
|
img.onload = function () {
|
|
ctx.drawImage(img, 0, 0); // Or at whatever offset you like
|
|
};
|
|
img.src = callBackData.map_snapshot;
|
|
}
|
|
|
|
if (callBackData.map_out_snapshot) {
|
|
$('#attendanceMap').show();
|
|
const myCanvas = document.getElementById('attendnaceMapCanvasOut');
|
|
const ctx = myCanvas.getContext('2d');
|
|
const img = new Image();
|
|
img.onload = function () {
|
|
ctx.drawImage(img, 0, 0); // Or at whatever offset you like
|
|
};
|
|
img.src = callBackData.map_out_snapshot;
|
|
}
|
|
}
|
|
|
|
|
|
getImagesFailCallback(callBackData) {
|
|
this.showMessage('Error', callBackData);
|
|
}
|
|
|
|
getActionButtonsHtml(id, data) {
|
|
const editButton = '<img class="tableActionButton" src="_BASE_images/edit.png" style="cursor:pointer;" rel="tooltip" title="Edit" onclick="modJs.edit(_id_);return false;"></img>';
|
|
const deleteButton = '<img class="tableActionButton" src="_BASE_images/delete.png" style="margin-left:15px;cursor:pointer;" rel="tooltip" title="Delete" onclick="modJs.deleteRow(_id_);return false;"></img>';
|
|
const photoButton = '<img class="tableActionButton" src="_BASE_images/map.png" style="margin-left:15px;cursor:pointer;" rel="tooltip" title="Show Photo" onclick="modJs.showPunchImages(_id_);return false;"></img>';
|
|
|
|
let html;
|
|
if (this.photoAttendance === 1) {
|
|
html = '<div style="width:80px;">_edit__delete__photo_</div>';
|
|
} else {
|
|
html = '<div style="width:80px;">_edit__delete_</div>';
|
|
}
|
|
|
|
html = html.replace('_photo_', photoButton);
|
|
|
|
if (this.showDelete) {
|
|
html = html.replace('_delete_', deleteButton);
|
|
} else {
|
|
html = html.replace('_delete_', '');
|
|
}
|
|
|
|
if (this.showEdit) {
|
|
html = html.replace('_edit_', editButton);
|
|
} else {
|
|
html = html.replace('_edit_', '');
|
|
}
|
|
|
|
html = html.replace(/_id_/g, id);
|
|
html = html.replace(/_BASE_/g, this.baseUrl);
|
|
return html;
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
Attendance Status
|
|
*/
|
|
|
|
class AttendanceStatusAdapter extends AdapterBase {
|
|
getDataMapping() {
|
|
return [
|
|
'id',
|
|
'employee',
|
|
'status',
|
|
];
|
|
}
|
|
|
|
getHeaders() {
|
|
return [
|
|
{ sTitle: 'ID', bVisible: false },
|
|
{ sTitle: 'Employee' },
|
|
{ sTitle: 'Clocked In Status' },
|
|
];
|
|
}
|
|
|
|
getFormFields() {
|
|
return [
|
|
|
|
];
|
|
}
|
|
|
|
getFilters() {
|
|
return [
|
|
['employee', {
|
|
label: 'Employee', type: 'select2', 'allow-null': false, 'remote-source': ['Employee', 'id', 'first_name+last_name'],
|
|
}],
|
|
|
|
];
|
|
}
|
|
|
|
getActionButtonsHtml(id, data) {
|
|
let html = '<div class="online-button-_COLOR_"></div>';
|
|
html = html.replace(/_BASE_/g, this.baseUrl);
|
|
if (data[2] == 'Not Clocked In') {
|
|
html = html.replace(/_COLOR_/g, 'gray');
|
|
} else if (data[2] == 'Clocked Out') {
|
|
html = html.replace(/_COLOR_/g, 'yellow');
|
|
} else if (data[2] == 'Clocked In') {
|
|
html = html.replace(/_COLOR_/g, 'green');
|
|
}
|
|
return html;
|
|
}
|
|
|
|
|
|
isSubProfileTable() {
|
|
return this.user.user_level !== 'Admin';
|
|
}
|
|
}
|
|
|
|
module.exports = { AttendanceAdapter, AttendanceStatusAdapter };
|