Eavesdrop for queue

README.md

@@ -16,15 +16,13 @@ Installation
 2. Add next strings to `js/lib/jquery.kazoosdk.js` after string `methodsGenerator = {`
 ```javascript
     queues: {
-        'queue_eavesdrop': { 'verb': 'PUT', 'url': 'accounts/{accountId}/queues/{queueId}/eavesdrop' },
-        'call_eavesdrop':  { 'verb': 'PUT', 'url': 'accounts/{accountId}/queues/eavesdrop' },
         'queues_list':     { 'verb': 'GET', 'url': 'accounts/{accountId}/queues' },
         'queues_create':   { 'verb': 'PUT', 'url': 'accounts/{accountId}/queues' },
         'queues_get':      { 'verb': 'GET', 'url': 'accounts/{accountId}/queues/{queuesId}' },
         'queues_update':   { 'verb': 'POST', 'url': 'accounts/{accountId}/queues/{queuesId}' },
         'queues_delete':   { 'verb': 'DELETE', 'url': 'accounts/{accountId}/queues/{queuesId}' },
         'queues_stats':    { 'verb': 'GET', 'url': 'accounts/{accountId}/queues/stats' }
-        },
+    },
     agents: {
         'agents_stats':    { 'verb': 'GET', 'url': 'accounts/{accountId}/agents/stats' },
         'agents_status':   { 'verb': 'GET', 'url': 'accounts/{accountId}/agents/status' },

app.js

@@ -39,6 +39,14 @@ var app = {
 			url: 'accounts/{accountId}/agents/{agentId}/status',
 			verb: 'POST'
 		}*/
+		'callcenter.queue.eavesdrop': {
+			'verb': 'PUT',
+			'url': 'accounts/{accountId}/queues/{queueId}/eavesdrop'
+		},
+		'callcenter.call.eavesdrop': {
+			'verb': 'PUT',
+			'url': 'accounts/{accountId}/queues/eavesdrop'
+		}
 	},
 
 	load: function(callback){
@@ -143,6 +151,66 @@ var app = {
 			}
 		});
 	},
+
+	showEavesdropPopup: function(mode, data) {
+		var self = this;
+
+		self.callApi({
+			resource: 'device.list',
+			data: {
+				accountId: self.accountId,
+				generateError: false
+			},
+			success: function (devices) {
+				var popup_html = $(monster.template(self, 'eavesdrop_popup', {
+					devices: devices.data
+				}));
+
+				var i18n = self.i18n.active();
+
+				$('#ring', popup_html).click(function(e) {
+					e.preventDefault();
+
+					var requestData = {
+						accountId: self.accountId,
+						generateError: false,
+						data: {
+							id: $('#object-selector', popup_html).val()
+						}
+					};
+
+					if(mode === 'call') {
+						requestData.data.call_id = data.call_id;
+					} else if(mode === 'queue') {
+						requestData.queueId = data.queue_id;
+					}
+
+					monster.request({
+						resource: 'callcenter.' + mode + '.eavesdrop',
+						data: requestData,
+						success: function (devices) {
+							popup.dialog('close');
+						},
+						error: function() {
+							// monster.ui.alert('Eavesdrop failed');
+							console.log(i18n.callcenter.eavesdrop_request_failed);
+						}
+					});
+				});
+
+				$('#cancel', popup_html).click(function(e) {
+					e.preventDefault();
+					popup.dialog('close');
+				});
+
+				var popup = monster.ui.dialog(popup_html, {
+					title: i18n.callcenter.select_the_device,
+					width: '450px'
+				});
+			}
+		});
+	},
+
 /*	listDevices: function (callback) {
 		var self = this;
 
@@ -1445,6 +1513,29 @@ var app = {
 			}
 		});
 
+		$('.js-agent-item .js-eavesdrop', container).on('click', function(e) {
+			e.preventDefault();
+			e.stopPropagation();
+
+			var data = {
+				call_id: $(this).data('call_id')
+			};
+
+			self.showEavesdropPopup('call', data);
+		});
+
+
+		$('.list_queues li .js-eavesdrop', container).on('click', function(e) {
+			e.preventDefault();
+			e.stopPropagation();
+
+			var data = {
+				queue_id: $(this).closest('li').attr('id')
+			};
+
+			self.showEavesdropPopup('queue', data);
+		});
+
 		$('.js-login-to-queue', container).click(function(e) {
 			e.preventDefault();
 

i18n/de-DE.json

@@ -20,6 +20,12 @@
 		"devices_title": "Geräte",
 		"hide_queues_html": "Warteräume ausblenden",
 		"show_queues_html": "Warteräume anzeigen",
+		"eavesdropTooltip": "Eavesdrop",
+		"eavesdropPopup": {
+			"deviceLabel": "Device",
+			"callBtnText": "klingeln",
+			"cancelBtnText": "Abbrechen"
+		},
 		"settings": {
 			"sidebar": {
 				"title": "Queues"

i18n/dk-DK.json

@@ -21,6 +21,12 @@
 		"devices_title": "Devices",
 		"hide_queues_html": "Hide Queues",
 		"show_queues_html": "Show Queues",
+		"eavesdropTooltip": "Eavesdrop",
+		"eavesdropPopup": {
+			"deviceLabel": "Device",
+			"callBtnText": "Call",
+			"cancelBtnText": "Cancel"
+		},
 		"settings": {
 			"sidebar": {
 				"title": "Queues"

i18n/en-NZ.json

@@ -21,6 +21,12 @@
 		"devices_title": "Devices",
 		"hide_queues_html": "Hide Queues",
 		"show_queues_html": "Show Queues",
+		"eavesdropTooltip": "Eavesdrop",
+		"eavesdropPopup": {
+			"deviceLabel": "Device",
+			"callBtnText": "Call",
+			"cancelBtnText": "Cancel"
+		},
 		"settings": {
 			"sidebar": {
 				"title": "Queues"
@@ -33,7 +39,6 @@
 				"noDataText": "None",
 				"actionsColumnHeader": "Add",
 				"userNameColumnHeader": "User Name"
-
 			},
 			"queuePanel": {
 				"title": "Queue settings",

i18n/en-US.json

@@ -21,6 +21,12 @@
 		"devices_title": "Devices",
 		"hide_queues_html": "Hide Queues",
 		"show_queues_html": "Show Queues",
+		"eavesdropTooltip": "Eavesdrop",
+		"eavesdropPopup": {
+			"deviceLabel": "Device",
+			"callBtnText": "Call",
+			"cancelBtnText": "Cancel"
+		},
 		"settings": {
 			"sidebar": {
 				"title": "Queues"

i18n/es-ES.json

@@ -14,11 +14,18 @@
 		"which_device": "Which device?",
 		"ring": "Ring",
 		"cancel": "Cancel",
+		"call_waiting": "Call Waiting",
 		"call_waiting_log": "Call Waiting Log...",
 		"eavesdrop_request_failed": "Eavesdrop Request failed. Error #",
 		"devices_title": "Devices",
 		"hide_queues_html": "Hide Queues",
 		"show_queues_html": "Show Queues",
+		"eavesdropTooltip": "Eavesdrop",
+		"eavesdropPopup": {
+			"deviceLabel": "Device",
+			"callBtnText": "Call",
+			"cancelBtnText": "Cancel"
+		},
 		"settings": {
 			"sidebar": {
 				"title": "Queues"

i18n/fr-FR.json

@@ -19,6 +19,12 @@
 		"devices_title": "Devices",
 		"hide_queues_html": "Hide Queues",
 		"show_queues_html": "Show Queues",
+		"eavesdropTooltip": "Eavesdrop",
+		"eavesdropPopup": {
+			"deviceLabel": "Device",
+			"callBtnText": "Call",
+			"cancelBtnText": "Cancel"
+		},
 		"settings": {
 			"sidebar": {
 				"title": "Queues"

i18n/it-IT.json

@@ -19,6 +19,12 @@
 		"devices_title": "Devices",
 		"hide_queues_html": "Hide Queues",
 		"show_queues_html": "Show Queues",
+		"eavesdropTooltip": "Eavesdrop",
+		"eavesdropPopup": {
+			"deviceLabel": "Device",
+			"callBtnText": "Call",
+			"cancelBtnText": "Cancel"
+		},
 		"settings": {
 			"sidebar": {
 				"title": "Queues"

i18n/nl-NL.json

@@ -19,6 +19,12 @@
 		"devices_title": "Devices",
 		"hide_queues_html": "Verberg Queues",
 		"show_queues_html": "Toon Queues",
+		"eavesdropTooltip": "Eavesdrop",
+		"eavesdropPopup": {
+			"deviceLabel": "Device",
+			"callBtnText": "Call",
+			"cancelBtnText": "Cancel"
+		},
 		"settings": {
 			"sidebar": {
 				"title": "Queues"

i18n/pt-PT.json

@@ -21,6 +21,12 @@
 		"devices_title": "Devices",
 		"hide_queues_html": "Hide Queues",
 		"show_queues_html": "Show Queues",
+		"eavesdropTooltip": "Eavesdrop",
+		"eavesdropPopup": {
+			"deviceLabel": "Device",
+			"callBtnText": "Call",
+			"cancelBtnText": "Cancel"
+		},
 		"settings": {
 			"sidebar": {
 				"title": "Queues"

i18n/ro-RO.json

@@ -21,6 +21,12 @@
 		"devices_title": "Devices",
 		"hide_queues_html": "Hide Queues",
 		"show_queues_html": "Show Queues",
+		"eavesdropTooltip": "Eavesdrop",
+		"eavesdropPopup": {
+			"deviceLabel": "Device",
+			"callBtnText": "Call",
+			"cancelBtnText": "Cancel"
+		},
 		"settings": {
 			"sidebar": {
 				"title": "Queues"

i18n/ru-RU.json

@@ -19,6 +19,12 @@
 		"devices_title": "Устройства",
 		"hide_queues_html": "Скрыть очереди",
 		"show_queues_html": "Показать очереди",
+		"eavesdropTooltip": "Eavesdrop",
+		"eavesdropPopup": {
+			"deviceLabel": "Device",
+			"callBtnText": "Call",
+			"cancelBtnText": "Cancel"
+		},
 		"settings": {
 			"sidebar": {
 				"title": "Очереди"

i18n/zh-CN.json

@@ -19,6 +19,12 @@
 		"devices_title": "设备",
 		"hide_queues_html": "隐藏队列",
 		"show_queues_html": "显示队列",
+		"eavesdropTooltip": "Eavesdrop",
+		"eavesdropPopup": {
+			"deviceLabel": "Device",
+			"callBtnText": "Call",
+			"cancelBtnText": "Cancel"
+		},
 		"settings": {
 			"sidebar": {
 				"title": "Queues"

style/app.scss

@@ -11,6 +11,33 @@
 	}
 }
 
+.callcenter-dialog-body {
+	padding: 20px 20px 30px;
+
+	form {
+		margin-bottom: 0;
+	}
+
+	.buttons-wrapper {
+		padding-top: 10px;
+		text-align: center;
+	}
+
+	.buttons-wrapper .btn {
+		margin-right: 10px;
+	}
+}
+
+.eavesdrop-dialog-body {
+	.form-horizontal .control-label {
+		width: 100px;
+	}
+
+	.form-horizontal .controls {
+		margin-left: 115px;
+	}
+}
+
 #dashboard-content #dashboard-topbar .settings-bar {
     background: #B1AFAF;
     cursor: pointer;
@@ -90,7 +117,7 @@
     margin: 0;
 }
 
-#dashboard-content #dashboard-topbar .topbar-right .list_queues .list_queues_inner > li{
+#dashboard-content #dashboard-topbar .topbar-right .list_queues .list_queues_inner > li {
     width: 151px;
     height: 200px;
     list-style-type: none;
@@ -100,6 +127,11 @@
     cursor: pointer;
 }
 
+#dashboard-content #dashboard-topbar .topbar-right .list_queues .list_queues_inner > li.active .eavesdrop_queue,
+#dashboard-content #dashboard-topbar .topbar-right .list_queues .list_queues_inner > li.active .edit_queue {
+	display: inline-block !important;
+}
+
 #dashboard-content #dashboard-topbar .topbar-right .list_queues .list_queues_inner > li.active, #dashboard-content #dashboard-topbar .topbar-right .list_queues .list_queues_inner > li:hover {
     background: #E3E3E3;
 }
@@ -129,6 +161,27 @@
     white-space: nowrap;
 }
 
+#dashboard-content #dashboard-topbar .topbar-right .list_queues .list_queues_inner > li .box_title_text {
+	width: 100%;
+	display: inline-block;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	vertical-align: top;
+}
+
+#dashboard-content #dashboard-topbar .topbar-right .list_queues .list_queues_inner > li.active .box_title_text {
+	width: 78px;
+}
+
+#dashboard-content #dashboard-topbar .topbar-right .list_queues .list_queues_inner > li .box_title .btn {
+	width: 19px;
+	padding: 2px 3px 3px 3px;
+	height: 18px;
+	text-align: center;
+	display: none;
+}
+
 #dashboard-content #dashboard-topbar .topbar-right .list_queues .list_queues_inner > li .box {
     float: left;
     width: 65px;

views/agents_dashboard.html

@@ -1,7 +1,7 @@
 <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="js-agent-item agent_wrapper {{status}}" id="{{id}}" data-queues="{{queues}}">
 				<div class="agent_header">
 					<span class="fa fa-user"/>
 					{{first_name}} {{last_name}}
@@ -42,7 +42,9 @@
 						{{#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"/>
+								<a title="{{ ../i18n.callcenter.eavesdropTooltip }}" class="btn js-eavesdrop eavesdrop-call" data-call_id="{{current_call.call_id}}" href="">
+									<i class="fa fa-headphones"></i>
+								</a>
 							{{else}}
 								<div class="data_title agent_text">{{ ../../i18n.callcenter.no_active_call }}</div>
 							{{/if}}

views/eavesdrop_popup.html

@@ -0,0 +1,18 @@
+<div class="callcenter-dialog-body eavesdrop-dialog-body">
+	<form name="form" class="form-horizontal" method="post" action="#">
+		<div class="control-group">
+			<label class="control-label" for="object-selector">{{i18n.callcenter.eavesdropPopup.deviceLabel}}</label>
+			<div class="controls">
+				<select id="object-selector">
+					{{#each devices}}
+						<option value="{{id}}">{{name}}</option>
+					{{/each}}
+				</select>
+			</div>
+		</div>
+		<div class="buttons-wrapper">
+			<button id="ring" class="btn btn-primary">{{ i18n.callcenter.eavesdropPopup.callBtnText }}</button>
+			<button id="cancel" class="btn">{{ i18n.callcenter.eavesdropPopup.cancelBtnText }}</button>
+		</div>
+	</form>
+</div>

views/queues_dashboard.html

@@ -1,41 +1,45 @@
 <div>
-    <div class="list_queues">
-        <ul class="list_queues_inner">
-            {{#each queues}}
-                <li id="{{id}}" data-current_calls="{{current_calls}}" data-total_calls="{{total_calls}}">
-                    <div class="box_title">
-                      <span class="icon eavesdrop_queue medium tech_support" style="display: none;" rel="popover"></span>
-                      {{name}}
-                    <span class="icon edit_queue medium wrench_screw" style="display: none;" rel="popover" data-content="{{clicking_here_will_send_you}}"></span>
-                    </div>
-                    <div class="grid_bottom">
-                        <div class="first_row">
-                            <div class="box calls">
-                                <div class="icon_wrapper"><span class="fa fa-volume-control-phone"></span></div>
-                                <div class="stat" title="{{ ../i18n.callcenter.busy }}">
-                                    <span class="blue">{{current_calls}}</span> / {{total_calls}}
-                                </div>
-                            </div>
-                            <div class="box users">
-                                <div class="icon_wrapper"><span class="fa fa-users"></span></div>
-                                <div class="stat">
-                                    <span class="blue">{{current_agents}}</span> / {{max_agents}}
-                                </div>
-                            </div>
-                        </div>
-                        <div class="second_row">
-                            <div class="box dropped_calls" title="{{ ../i18n.callcenter.missed_calls }}">
-                                <div class="icon_wrapper"><span class="fa fa-thumbs-o-down"></span></div>
-                                <div class="red">{{abandoned_calls}}</div>
-                            </div>
-                            <div class="box hold_time">
-                                <div class="icon_wrapper"><span class="fa fa-hand-paper-o"></span></div>
-                                <div class="orange">{{average_hold_time}}</div>
-                            </div>
-                        </div>
-                    </div>
-                </li>
-            {{/each}}
-        </ul>
-    </div>
+	<div class="list_queues">
+		<ul class="list_queues_inner">
+			{{#each queues}}
+				<li id="{{id}}" data-current_calls="{{current_calls}}" data-total_calls="{{total_calls}}">
+					<div class="box_title">
+						<a title="{{ ../i18n.callcenter.eavesdropTooltip }}" class="btn js-eavesdrop eavesdrop_queue tech_support" style="display: none;" rel="popover">
+							<i class="fa fa-headphones"></i>
+						</a>
+						<span class="box_title_text">{{name}}</span>
+						<a class="btn js-edit-queue edit_queue wrench_screw" style="display: none;" rel="popover" data-content="{{clicking_here_will_send_you}}">
+							<i class="fa fa-cog"></i>
+						</a>
+					</div>
+					<div class="grid_bottom">
+						<div class="first_row">
+							<div class="box calls">
+								<div class="icon_wrapper"><span class="fa fa-volume-control-phone"></span></div>
+								<div class="stat" title="{{ ../i18n.callcenter.busy }}">
+									<span class="blue">{{current_calls}}</span> / {{total_calls}}
+								</div>
+							</div>
+							<div class="box users">
+								<div class="icon_wrapper"><span class="fa fa-users"></span></div>
+								<div class="stat">
+									<span class="blue">{{current_agents}}</span> / {{max_agents}}
+								</div>
+							</div>
+						</div>
+						<div class="second_row">
+							<div class="box dropped_calls" title="{{ ../i18n.callcenter.missed_calls }}">
+								<div class="icon_wrapper"><span class="fa fa-thumbs-o-down"></span></div>
+								<div class="red">{{abandoned_calls}}</div>
+							</div>
+							<div class="box hold_time">
+								<div class="icon_wrapper"><span class="fa fa-hand-paper-o"></span></div>
+								<div class="orange">{{average_hold_time}}</div>
+							</div>
+						</div>
+					</div>
+				</li>
+			{{/each}}
+		</ul>
+	</div>
 </div>