Agent login/logout functionality

app.js

@@ -218,8 +218,7 @@ var app = {
 							self.dashboardUpdateAllData(null, data, self.vars.queue_id);
 							current_global_data = data;
 						});
-					}
-					else {
+					} else {
 						poll();
 					}
 				}
@@ -1448,9 +1447,8 @@ var app = {
 
 		$('.js-login-to-queue', container).click(function(e) {
 			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(data);
 			});
@@ -1458,16 +1456,15 @@ var app = {
 
 		$('.js-logout-from-queue', container).click(function(e) {
 			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(data);
 			});
 		});
 	},
 
-	changeAgentInQueueStatus: function(agentId, status, callback) {
+	changeAgentInQueueStatus: function($btn, status, callback) {
 		var self = this;
 
 		if(status !== 'login' && status !== 'logout') {
@@ -1475,14 +1472,18 @@ var app = {
 			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',
 			data: {
 				accountId: self.accountId,
 				agentId: agentId,
 				generateError: false,
 				data: {
-					status: 'login'
+					status: status
 				}
 			},
 			success: function (data) {
@@ -1490,18 +1491,11 @@ var app = {
 				if(typeof(callback) === 'function') {
 					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);
 			self.detail_stat(args.id, container);
 		});
-	},
+	}
 
 	/*activate: function(_container) {
 		var self = this,
@@ -1583,33 +1577,7 @@ var app = {
 		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;
 });

style/app.scss

@@ -1,6 +1,16 @@
 @import url('../../../css/vendor/jquery/jquery.dataTables.css');
 
 /* 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 {
     background: #B1AFAF;
     cursor: pointer;
@@ -213,6 +223,18 @@
     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 {
     color: #555;
     font-size: 15px;

views/agents_dashboard.html

@@ -1,95 +1,105 @@
 <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>