ruhnet
/
monster-ui-callcenter
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

Agent login/logout functionality

master
vbarkasov 8 years ago
parent
845097a0ca
commit
0de8ed1bad
4 changed files with 142 additions and 142 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +17
    -49
      app.js
  2. +22
    -0
      style/app.scss
  3. BIN
      style/static/images/preloader.gif
  4. +103
    -93
      views/agents_dashboard.html

+ 17
- 49
app.js View File

@ -218,8 +218,7 @@ var app = {
self.dashboardUpdateAllData(null, data, self.vars.queue_id); self.dashboardUpdateAllData(null, data, self.vars.queue_id);
current_global_data = data; current_global_data = data;
}); });
}
else {
} else {
poll(); poll();
} }
} }
@ -1448,9 +1447,8 @@ var app = {
$('.js-login-to-queue', container).click(function(e) { $('.js-login-to-queue', container).click(function(e) {
e.preventDefault(); e.preventDefault();
var agentId = $(this).closest('.agent_wrapper').attr('id');
self.changeAgentInQueueStatus(agentId, 'login', function(data) {
self.changeAgentInQueueStatus($(this), 'login', function(data) {
console.log('Agent login to queue'); console.log('Agent login to queue');
console.log(data); console.log(data);
}); });
@ -1458,16 +1456,15 @@ var app = {
$('.js-logout-from-queue', container).click(function(e) { $('.js-logout-from-queue', container).click(function(e) {
e.preventDefault(); e.preventDefault();
var agentId = $(this).closest('.agent_wrapper').attr('id');
self.changeAgentInQueueStatus(agentId, 'logout', function(data) {
self.changeAgentInQueueStatus($(this), 'logout', function(data) {
console.log('Agent logout from queue'); console.log('Agent logout from queue');
console.log(data); console.log(data);
}); });
}); });
}, },
changeAgentInQueueStatus: function(agentId, status, callback) {
changeAgentInQueueStatus: function($btn, status, callback) {
var self = this; var self = this;
if(status !== 'login' && status !== 'logout') { if(status !== 'login' && status !== 'logout') {
@ -1475,14 +1472,18 @@ var app = {
return; return;
} }
monster.request({
var agentId = $btn.closest('.agent_wrapper').attr('id');
$btn.parent().find('.preloader').remove();
$('<span class="preloader"></span>').insertAfter($btn);
self.callApi({
resource: 'agents.agents_toggle', resource: 'agents.agents_toggle',
data: { data: {
accountId: self.accountId, accountId: self.accountId,
agentId: agentId, agentId: agentId,
generateError: false, generateError: false,
data: { data: {
status: 'login'
status: status
} }
}, },
success: function (data) { success: function (data) {
@ -1490,18 +1491,11 @@ var app = {
if(typeof(callback) === 'function') { if(typeof(callback) === 'function') {
callback(data); callback(data);
} }
monster.request({
resource: 'callcenter.agent_in_queue_status.get',
data: {
accountId: self.accountId,
agentId: agentId,
generateError: false
},
success: function (data) {
console.log(data);
}
});
},
error: function() {
if(typeof(callback) === 'function'){
callback();
}
} }
}); });
}, },
@ -1571,7 +1565,7 @@ var app = {
var $self_queue = $('#'+args.id, container); var $self_queue = $('#'+args.id, container);
self.detail_stat(args.id, container); self.detail_stat(args.id, container);
}); });
},
}
/*activate: function(_container) { /*activate: function(_container) {
var self = this, var self = this,
@ -1583,33 +1577,7 @@ var app = {
self.render(container); self.render(container);
},*/ },*/
login: function(agent, callback) {
var self = this,
agentId = $(agent).attr('id');
self.callApi({
resource: 'agents.agents_toggle',
data: {
accountId: self.accountId,
generateError: false,
agentId: agentId,
data: {status: 'login'}
}
});
},
logout: function(agent, callback) {
var self = this,
agentId = $(agent).attr('id');
self.callApi({
resource: 'agents.agents_toggle',
data: {
accountId: self.accountId,
agentId: agentId,
generateError: false,
data: {status: 'logout'}
}
});
}};
};
return app; return app;
}); });

+ 22
- 0
style/app.scss View File

@ -1,6 +1,16 @@
@import url('../../../css/vendor/jquery/jquery.dataTables.css'); @import url('../../../css/vendor/jquery/jquery.dataTables.css');
/* Top bar */ /* Top bar */
#dashboard-content {
.preloader {
background: url('static/images/preloader.gif') no-repeat;
display: inline-block;
width: 30px;
height: 30px;
vertical-align: top;
}
}
#dashboard-content #dashboard-topbar .settings-bar { #dashboard-content #dashboard-topbar .settings-bar {
background: #B1AFAF; background: #B1AFAF;
cursor: pointer; cursor: pointer;
@ -213,6 +223,18 @@
position: relative; position: relative;
} }
#dashboard-content .dashboard-bottom-right #agents-view .agent_wrapper .btn-login {
border-color: #22A5FF;
background: #22A5FF;
color: white;
text-shadow: none;
}
#dashboard-content .dashboard-bottom-right #agents-view .agent_wrapper .btn-login i.icon-small {
color: white;
margin-right: 5px;
}
#dashboard-content .dashboard-bottom-right #agents-view .agent_wrapper .agent_header { #dashboard-content .dashboard-bottom-right #agents-view .agent_wrapper .agent_header {
color: #555; color: #555;
font-size: 15px; font-size: 15px;


BIN
style/static/images/preloader.gif View File

Before After
Width: 30  |  Height: 30  |  Size: 36 KiB

+ 103
- 93
views/agents_dashboard.html View File

@ -1,95 +1,105 @@
<div> <div>
{{#if hide_logout}}
<div id="agents-view" class="hide-logout">
{{else}}
<div id="agents-view">
{{/if}}
{{#each agents}}
<div class="agent_wrapper {{status}}" id="{{id}}" data-queues="{{queues}}">
<div class="agent_header">
<span class="fa fa-user"/>
{{first_name}} {{last_name}}
<span class="agent_header_badge">{{status}}</span>
</div>
<div class="agent_data">
<div class="row_data call_time">
{{#compare status "===" "paused"}}
<div class="data_title agent_text">{{ ../../i18n.callcenter.break_time }}</div>
<div class="data_value">{{call_time}}</div>
{{/compare}}
{{#compare status "===" 'wrapup'}}
<div class="data_title agent_text">{{ ../../i18n.callcenter.wrapping_up }}</div>
<div class="data_value">{{call_time}}</div>
{{/compare}}
{{#compare status "===" 'handling'}}
<div class="data_title agent_text">{{ ../../i18n.callcenter.call_time }}</div>
<div class="data_value">{{call_time}}</div>
{{/compare}}
{{#compare status "===" 'busy'}}
<div class="data_title agent_text">{{ ../../i18n.callcenter.busy_since }}</div>
<div class="data_value">{{call_time}}</div>
{{/compare}}
{{#compare status "===" 'ready'}}
<div class="data_title agent_text">{{ ../../i18n.callcenter.call_time }}</div>
<div class="data_value">-</div>
{{/compare}}
{{#compare status "===" 'logged_out'}}
<div class="data_title agent_text">{{ ../../i18n.callcenter.call_time }}</div>
<div class="data_value">-</div>
{{/compare}}
{{#compare status "===" 'logged_in'}}
<div class="data_title agent_text">{{ ../../i18n.callcenter.call_time }}</div>
<div class="data_value">-</div>
{{/compare}}
</div>
<div class="row_data call">
{{#compare status "===" 'handling'}}
{{#if current_call}}
<div class="data_title agent_text">{{ ../../../i18n.callcenter.current_call }}</div>
<span data-call_id="{{current_call.call_id}}" class="icon tech_support eavesdrop"/>
{{else}}
<div class="data_title agent_text">{{ ../../../i18n.callcenter.no_active_call }}</div>
{{/if}}
{{/compare}}
{{#compare status "===" 'connecting'}}
{{#if current_call}}
<div class="data_title agent_text">{{ ../../../i18n.callcenter.current_call }}</div>
{{else}}
<div class="data_title agent_text">{{ ../../../i18n.callcenter.no_active_call }}</div>
{{/if}}
{{/compare}}
{{#compare status "!==" 'connecting' }}
{{#compare status "!==" 'handling'}}
<div class="data_title agent_text">{{ ../../../i18n.callcenter.no_active_call }}</div>
{{/compare}}
{{/compare}}
</div>
<div class="all_data">
<div class="row_data call_hours">
<div class="data_title agent_text">{{ ../i18n.callcenter.total_calls }}</div>
<div class="data_value">{{total_calls}}</div>
</div>
<div class="row_data call_day">
<div class="data_title agent_text">{{ ../i18n.callcenter.missed_calls }}</div>
<div class="data_value">{{missed_calls}}</div>
</div>
</div>
<div class="queue_data" style="display: none;">
{{#each queues_list}}
<div class="queue_stat" data-id="{{id}}">
<div class="row_data call_hours">
<div class="data_title agent_text">{{ ../../i18n.callcenter.total_calls }}</div>
<div class="data_value">{{total_calls}}</div>
</div>
<div class="row_data call_day">
<div class="data_title agent_text">{{ ../../i18n.callcenter.missed_calls }}</div>
<div class="data_value">{{missed_calls}}</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
{{/each}}
</div>
<div id="agents-view" {{#if hide_logout}}class="hide-logout"{{/if}}>
{{#each agents}}
<div class="agent_wrapper {{status}}" id="{{id}}" data-queues="{{queues}}">
<div class="agent_header">
<span class="fa fa-user"/>
{{first_name}} {{last_name}}
<span class="agent_header_badge">{{status}}</span>
</div>
<div class="agent_data">
<div class="row_data call_time">
{{#compare status "===" "paused"}}
<div class="data_title agent_text">{{ ../i18n.callcenter.break_time }}</div>
<div class="data_value">{{call_time}}</div>
{{/compare}}
{{#compare status "===" 'wrapup'}}
<div class="data_title agent_text">{{ ../i18n.callcenter.wrapping_up }}</div>
<div class="data_value">{{call_time}}</div>
{{/compare}}
{{#compare status "===" 'handling'}}
<div class="data_title agent_text">{{ ../i18n.callcenter.call_time }}</div>
<div class="data_value">{{call_time}}</div>
{{/compare}}
{{#compare status "===" 'busy'}}
<div class="data_title agent_text">{{ ../i18n.callcenter.busy_since }}</div>
<div class="data_value">{{call_time}}</div>
{{/compare}}
{{#compare status "===" 'ready'}}
<div class="data_title agent_text">{{ ../i18n.callcenter.call_time }}</div>
<div class="data_value">-</div>
{{/compare}}
{{#compare status "===" 'logged_out'}}
<div class="data_title agent_text">{{ ../i18n.callcenter.call_time }}</div>
<div class="data_value">-</div>
{{/compare}}
{{#compare status "===" 'logged_in'}}
<div class="data_title agent_text">{{ ../i18n.callcenter.call_time }}</div>
<div class="data_value">-</div>
{{/compare}}
</div>
<div class="row_data call">
{{#compare status "===" 'handling'}}
{{#if current_call}}
<div class="data_title agent_text">{{ ../../i18n.callcenter.current_call }}</div>
<span data-call_id="{{current_call.call_id}}" class="icon tech_support eavesdrop"/>
{{else}}
<div class="data_title agent_text">{{ ../../i18n.callcenter.no_active_call }}</div>
{{/if}}
{{/compare}}
{{#compare status "===" 'connecting'}}
{{#if current_call}}
<div class="data_title agent_text">{{ ../../i18n.callcenter.current_call }}</div>
{{else}}
<div class="data_title agent_text">{{ ../../i18n.callcenter.no_active_call }}</div>
{{/if}}
{{/compare}}
{{#compare status "!==" 'connecting' }}
{{#compare status "!==" 'handling'}}
<div class="data_title agent_text">{{ ../../i18n.callcenter.no_active_call }}</div>
{{/compare}}
{{/compare}}
</div>
<div class="all_data">
<div class="row_data call_hours">
<div class="data_title agent_text">{{ ../i18n.callcenter.total_calls }}</div>
<div class="data_value">{{total_calls}}</div>
</div>
<div class="row_data call_day">
<div class="data_title agent_text">{{ ../i18n.callcenter.missed_calls }}</div>
<div class="data_value">{{missed_calls}}</div>
</div>
</div>
<div class="queue_data" style="display: none;">
{{#each queues_list}}
<div class="queue_stat" data-id="{{id}}">
<div class="row_data call_hours">
<div class="data_title agent_text">{{ ../i18n.callcenter.total_calls }}</div>
<div class="data_value">{{total_calls}}</div>
</div>
<div class="row_data call_day">
<div class="data_title agent_text">{{ ../i18n.callcenter.missed_calls }}</div>
<div class="data_value">{{missed_calls}}</div>
</div>
</div>
{{/each}}
<div class="buttons-wrapper">
{{#compare status "===" 'ready'}}
<button class="btn btn-logout js-logout-from-queue">
<i class="fa fa-sign-out icon-small"></i>
Logout
</button>
{{/compare}}
{{#compare status "===" 'logged_out'}}
<button class="btn btn-login js-login-to-queue">
<i class="fa fa-sign-in icon-small"></i>
Login
</button>
{{/compare}}
</div>
</div>
</div>
</div>
{{/each}}
</div>
</div> </div>

Write Preview
Loading…
Cancel
Save