File: //home/arjun/projects/buyercall/buyercall/assets/components/agents/agents_dashboard.js
var utils = require('../utils');
var moment = require('moment');
const swal = require('sweetalert2');
const AGENTS_CHART_DATA_URL = `//${appConfig.server_url}/agents/data_chart`;
const AGENTS_FILTER_OPTIONS = `//${appConfig.server_url}/agents/filteroptions`;
const AGENTS_CSV_URL = `//${appConfig.server_url}/agents/csv`;
var agents = {
fromDate: null,
toDate: null,
friendlyNameObject: null,
phonenumberObject: null,
chartData: null,
init: function() {
//Define start and end date
this.fromDate = moment().subtract(1, 'month');
this.toDate = moment();
this.loadDropDownFilterOptions();
this.loadDatePickers();
this.loadTable();
this.getChartData();
this.loadEvents();
},
getPhonenumberFilter: function() {
var loThat = this;
if (loThat.phonenumberObject == null || loThat.phonenumberObject == undefined || loThat.phonenumberObject.id == undefined)
return 'null';
else
return loThat.phonenumberObject.id;
},
getFriendlyNameFilter: function() {
var loThat = this;
if (loThat.friendlyNameObject == null || loThat.friendlyNameObject == undefined || loThat.friendlyNameObject.id == undefined)
return 'null';
else
return loThat.friendlyNameObject.id;
},
getFromDateFilter: function() {
var loThat = this;
return loThat.fromDate.format('MMDDYYYY') ;
},
getToDateFilter: function() {
var loThat = this;
return loThat.toDate.format('MMDDYYYY');
},
getChartData: function() {
var loThat = this;
var searchOptions = {
pn: loThat.getPhonenumberFilter(),
fn: loThat.getFriendlyNameFilter(),
df: loThat.getFromDateFilter(),
dt: loThat.getToDateFilter()
},
queryString = $.param(searchOptions);
$.ajax({
url: `${AGENTS_CHART_DATA_URL}?${queryString}`,
type: 'GET',
dataType: 'json',
success: function(response) {
if (response != undefined) {
loThat.chartData = response;
loThat.loadChart();
loThat.loadSmallCharts();
}
}
});
},
loadChart: function() {
var loThat = this,
loWidth = window.innerWidth,
loGraphHeight = 400,
loRightBuffer = 40,
loChartOffset = 60
if (loThat.chartData.agent_labels != undefined && loThat.chartData.agent_labels!= null && loThat.chartData.agent_leads != undefined && loThat.chartData.agent_leads != null) {
if (loWidth < 640) {
loRightBuffer = 5;
loChartOffset = 12;
$('.graph-section').css('padding-left', 0).css('padding-right', 0);
$('.graph-chart-content').css('padding-left', 0).css('padding-right', 0);
}
var loAgentChart = new Chartist.Bar('#agentBarChart', {
labels:
loThat.chartData.agent_labels
,
series: [
loThat.chartData.agent_leads ]
}, {
seriesBarDistance: 10,
fullWidth: true,
chartPadding: {
right: loRightBuffer
},
// Set height of the chart
height: loGraphHeight,
reverseData: true,
horizontalBars: true,
axisX: {
onlyInteger: true,
},
axisY: {
offset: loChartOffset
}
});
}
},
loadSmallCharts: function() {
var loThat = this;
if (loThat.chartData != undefined && loThat.chartData != null) {
$('.chart-available-agents').html(loThat.chartData.available + ' <graph> ' + loThat.chartData.total_agents + ' total agents</graph>');
$('.chart-average-calls').html(loThat.chartData.average_calls);
$('.chart-response-times').html(loThat.chartData.avg_response_agent_min + ' : ' + loThat.chartData.avg_response_agent_sec + '<graph> min </graph>');
}
},
loadTable: function() {
var loThat = this;
App.datatables();
var AgentTableApi = $('#agent-datatable').DataTable({
buttons: [
{
text: 'Download CSV',
className: 'btn-primary btn btn-csv-dl',
action: function (e, dt, node, config) {
var searchOptions = {
search: dt.ajax.params().search,
df: loThat.getFromDateFilter(),
dt: loThat.getToDateFilter()
},
queryString = $.param(searchOptions),
url = `${AGENTS_CSV_URL}?${queryString}`;
window.open(url);
}
}
],
dom: "<'row'<'col-sm-3 col-md-3 col-lg-2'B><'col-sm-2 col-lg-2'l><'col-xs-12 col-sm-7 col-md-7 col-lg-8 datatables-padding text-right'f>>" +
"<'row'<'col-sm-12't>>" +
"<'row'<'col-sm-5'i><'col-sm-7'rp>>",
columns: [
{
data: null,
render: function (data, type, row, meta) {
return AgentTableApi.page.info().start + meta.row + 1;
},
searchable: false,
orderable: false
},
null,
null,
null,
null,
{
searchable: false,
orderable: false,
render: function (data) {
if (data != undefined && data != null) {
if (String(data).toLowerCase() == 'true') {
return 'Yes';
} else {
return 'No';
}
} else {
return 'No';
}
}
},
{
data: '0',
searchable: false,
orderable: false,
className: "text-center",
render: function (id, type, row) {
let url = (row[4] == 'Agent') ? `/agents/edit/${id}`
: `/groups/edit/${id}`;
let markup = `
<div class='btn-group'>
<a href='${url}' class='btn btn-xs btn-success btn-table-action' data-original-title='Edit' title='Edit' data-toggle='tooltip'>
<i class="material-icons">mode_edit</i>
</a>`;
if ($('.add-agent-btn').length) {
markup += `
<a href='/agents/delete/${id}' class='btn btn-xs btn-danger remove-agent btn-table-action' data-original-title='Delete' title='Delete' data-toggle='tooltip'>
<i class="material-icons">delete_forever</i>
</a>`;
}
if ($('.add-agent-btn').length) {
markup += `
<a type="button" class="btn btn-xs btn-primary btn-table-action"
title="Convert this agent to user"
onclick="$('[name=\\'a_to_u_agent_id\\']').val(${id});$('#agent_to_user_form').submit()"`;
}
if (row[2] == 'Group') {
markup += ' style="visibility: hidden"';
}
if ($('.add-agent-btn').length) {
markup += `
>
<i class="material-icons">person_add</i>
</a>`;
}
return markup += '</div>';
}
}
],
"order": [[ 0, "desc" ]],
"language": {
"lengthMenu": 'Display <select class="form-control dataTables-records-length-select">'+
'<option value="30"> 30</option>'+
'<option value="40"> 40</option>'+
'<option value="50"> 50</option>'+
'<option value="100"> 100</option>'+
'</select> records'
},
"pageLength": 50,
"processing": false,
"serverSide": true,
"ajax": `//${appConfig.server_url}/agents/agent_data`,
createdRow: function (row, data, dataIndex) {
var id = data[0];
var $row = $(row);
$row.find('.remove-agent').click(function (event) {
event.preventDefault();
{swal({title: 'Are you sure about this deletion?',
text: "You won't be able to revert this change.",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#03a9f4',
cancelButtonColor: '#f44336',
confirmButtonText: 'Yes, delete it!'
}).then(function(isConfirm)
{
if (isConfirm){
var csrf_token = $('meta[name=csrf-token]').attr('content');
$.ajax({
url: `//${appConfig.server_url}/agents/delete/${id}`,
headers: {
"X-CSRFToken": csrf_token,
},
method: 'DELETE'
}).done(function () {
AgentTableApi.ajax.reload();
swal({
title: 'Deleted!',
text: 'The agent has been deleted.',
type: 'success',
confirmButtonColor: '#03a9f4'
}
);
}).fail(function () {
utils.flash(__('There was an error deleting the phone number.','danger'));
});
}
})
}
});
}
});
loThat.loadStyles();
},
loadDropDownFilterOptions: function() {
var loThat = this;
$.ajax({
url: `${AGENTS_FILTER_OPTIONS}`,
type: 'GET',
dataType: 'json',
success: function(response) {
loThat.populateDropDowns('cbPhonenumber', response.phonenumber_data, 'phone');
loThat.populateDropDowns('cbFriendlyname', response.tool_name_data, 'friendly');
}
});
},
loadDatePickers: function() {
var loThat = this;
$('.date-from').datetimepicker({
format: 'MM/DD/YYYY',
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-chevron-up",
down: "fa fa-chevron-down",
previous: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
today: 'fa fa-screenshot',
clear: 'fa fa-trash',
close: 'fa fa-remove',
inline: true
},
defaultDate: loThat.fromDate
});
$('.date-to').datetimepicker({
format: 'MM/DD/YYYY',
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-chevron-up",
down: "fa fa-chevron-down",
previous: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
today: 'fa fa-screenshot',
clear: 'fa fa-trash',
close: 'fa fa-remove',
inline: true
},
defaultDate: loThat.toDate
});
},
populateDropDowns: function(paControl, paDict, paShortName) {
var loThat = this;
var loHtml = '';
loHtml = loHtml + '<li ><a id="' + -1 +'" class="'+paShortName+' filter-dropdown-text">All</a></li>';
for(var lpItem in paDict) {
loHtml = loHtml + '<li><a class="'+paShortName+' filter-dropdown-text" id="'+ lpItem +'">'+ paDict[lpItem] +'</a></li>';
}
if (paShortName == 'phone') {
loHtml = '<li class="dropdown-header">Phonenumbers</li><li class="divider"></li>' + loHtml;
$('.' + paControl).html(loHtml);
$('.' + paShortName).off().on('click', function(ev) {
loThat.phonenumberObject = {
id: ($(this).attr('id') == -1) ? null : $(this).attr('id'),
name: $(this).html()
};
$('.divPhoneNumber').html(loThat.phonenumberObject.name);
loThat.getChartData();
});
}
if (paShortName == 'friendly') {
loHtml = '<li class="dropdown-header">Friendly Name</li><li class="divider"></li>' + loHtml;
$('.' + paControl).html(loHtml);
$('.' + paShortName).off().on('click', function(ev) {
loThat.friendlyNameObject = {
id: ($(this).attr('id') == -1) ? null : $(this).attr('id'),
name: $(this).html()
};
$('.divFriendlyName').html(loThat.friendlyNameObject.name);
loThat.getChartData();
});
}
},
loadEvents: function() {
var loThat = this;
$('.date-from').on('dp.change', function(ev) {
if (ev.date != null && ev.date != undefined) {
loThat.fromDate = ev.date;
loThat.getChartData();
}
});
$('.date-to').on('dp.change', function(ev) {
if (ev.date != null && ev.date != undefined) {
loThat.toDate = ev.date;
loThat.getChartData();
}
});
},
loadStyles: function() {
$('#agent-datatable_filter label').addClass('form-group');
$('#agent-datatable_length label').addClass('form-group');
$('.dataTables_filter input').attr('placeholder', 'Search Records');
},
}
$(document).ready(function() {
agents.init();
});