UI-904: Added red & green colors on user devices to show registration

submodules/users/users.css

@@ -787,4 +787,10 @@
 #find_me_follow_me_form .grid-time .grid-time-row-placeholder {
 	height: 52px;
 	background-color: inherit;
+}
+
+/********* CSS for device popovers (appended directly on the body) *********/
+.device-popover-icon {
+	margin-right: 10px;
+	vertical-align: text-bottom;
 }

submodules/users/users.js

@@ -14,6 +14,18 @@ define(function(require){
 			'voip.users.render': 'usersRender'
 		},
 
+		deviceIcons: {
+			'cellphone': 'icon-phone',
+			'smartphone': 'icon-telicon-mobile-phone',
+			'landline': 'icon-telicon-home-phone',
+			'mobile': 'icon-telicon-sprint-phone',
+			'softphone': 'icon-telicon-soft-phone',
+			'sip_device': 'icon-telicon-voip-phone',
+			'sip_uri': 'icon-telicon-voip-phone',
+			'fax': 'icon-telicon-fax',
+			'ata': 'icon-telicon-fax'
+		},
+
 		/* Users */
 		/* args: parent and userId */
 		usersRender: function(args) {
@@ -37,6 +49,7 @@ define(function(require){
 				});
 
 				template.find('[data-toggle="tooltip"]').tooltip({ container: 'body'});
+				template.find('[data-toggle="popover"]').popover({ container: 'body'});
 
 				self.usersBindEvents(template, parent, dataTemplate);
 
@@ -253,21 +266,27 @@ define(function(require){
 				var userId = device.owner_id;
 
 				if(userId in mapUsers) {
+					var isRegistered = _.find(data.deviceStatus, function(status){ return (status.device_id === device.id && status.registered === true); }) ? true : false;
 					if(mapUsers[userId].extra.devices.length == 2) {
 						if(mapUsers[userId].extra.additionalDevices) {
 							mapUsers[userId].extra.additionalDevices.count++;
-							mapUsers[userId].extra.additionalDevices.tooltip += '<br>'+device.name + ' (' + device.device_type.replace('_', ' ') + ')';
+							mapUsers[userId].extra.additionalDevices.tooltip += '<br><i class=\"device-popover-icon '+self.deviceIcons[device.device_type]+(isRegistered?' icon-green':' icon-red')+'\"></i>'
+							                                                 + device.name + ' (' + device.device_type.replace('_', ' ') + ')';
 						} else {
 							mapUsers[userId].extra.additionalDevices = {
 								count: 1,
-								tooltip: device.name + ' (' + device.device_type.replace('_', ' ') + ')'
+								tooltip: '<i class=\"device-popover-icon '+self.deviceIcons[device.device_type]+(isRegistered?' icon-green':' icon-red')+'\"></i>'
+								         + device.name + ' (' + device.device_type.replace('_', ' ') + ')'
 							};
 						}
 					}
 					else {
 						mapUsers[userId].extra.devices.push({
+							id: device.id,
 							name: device.name + ' (' + device.device_type.replace('_', ' ') + ')',
-							type: device.device_type
+							type: device.device_type,
+							registered: isRegistered,
+							icon: self.deviceIcons[device.device_type]
 						});
 					}
 				}
@@ -438,7 +457,7 @@ define(function(require){
 					},
 					function(err, results) {
 						var originalData = self.usersFormatAddUser(results),
-							userTemplate = $(monster.template(self, 'users-creation', originalData));
+							userTemplate = $(monster.template(self, 'users-crefation', originalData));
 
 						timezone.populateDropdown(userTemplate.find('#user_creation_timezone'));
 						monster.ui.prettyCheck.create(userTemplate);
@@ -1713,15 +1732,7 @@ define(function(require){
 		},
 
 		usersRenderFindMeFollowMe: function(params) {
-			var self = this,
-				deviceIcons = {
-					'softphone': 'icon-telicon-soft-phone',
-					'cellphone': 'icon-telicon-mobile-phone',
-					'smartphone': 'icon-telicon-sprint-phone',
-					'sip_device': 'icon-telicon-voip-phone',
-					'fax': 'icon-telicon-fax',
-					'landline': 'icon-telicon-home-phone'
-				};
+			var self = this;
 
 			if(!params.userCallflow) {
 				monster.ui.alert('error', self.i18n.active().users.find_me_follow_me.noNumber);
@@ -1755,7 +1766,7 @@ define(function(require){
 							delay: endpoint.delay,
 							timeout: endpoint.timeout,
 							name: device.name,
-							icon: deviceIcons[device.device_type],
+							icon: self.deviceIcons[device.device_type],
 							disabled: false
 						}
 					}
@@ -1767,7 +1778,7 @@ define(function(require){
 						delay: 0,
 						timeout: 0,
 						name: device.name,
-						icon: deviceIcons[device.device_type],
+						icon: self.deviceIcons[device.device_type],
 						disabled: true
 					})
 				});
@@ -3315,6 +3326,17 @@ define(function(require){
 						self.usersGetDevicesData(function(devices) {
 							callback(null, devices);
 						});
+					},
+					deviceStatus: function(callback) {
+						self.callApi({
+							resource: 'device.getStatus',
+							data: {
+								accountId: self.accountId
+							},
+							success: function(data, status) {
+								callback(null, data.data);
+							}
+						});
 					}
 				},
 				function(err, results) {

views/users-row.html

@@ -25,33 +25,13 @@
 		</div>
 		<div class="devices grid-cell" data-type="devices">
 			{{#each extra.devices}}
-				{{#compare this.type '===' 'softphone'}}
-					<i class="icon-telicon-soft-phone help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{ this.name }}"></i>
-				{{/compare}}
-				{{#compare this.type '===' 'cellphone'}}
-					<i class="icon-phone help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{ this.name }}"></i>
-				{{/compare}}
-				{{#compare this.type '===' 'smartphone'}}
-					<i class="icon-telicon-mobile-phone help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{ this.name }}"></i>
-				{{/compare}}
-				{{#compare this.type '===' 'mobile'}}
-					<i class="icon-telicon-sprint-phone help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{ this.name }}"></i>
-				{{/compare}}
-				{{#compare this.type '===' 'sip_device'}}
-					<i class="icon-telicon-voip-phone help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{ this.name }}"></i>
-				{{/compare}}
-				{{#compare this.type '===' 'fax'}}
-					<i class="icon-telicon-fax help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{ this.name }}"></i>
-				{{/compare}}
-				{{#compare this.type '===' 'landline'}}
-					<i class="icon-telicon-home-phone help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{ this.name }}"></i>
-				{{/compare}}
+				<i class="{{this.icon}} {{#if this.registered}}icon-green{{else}}icon-red{{/if}} help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{ this.name }}"></i>
 			{{else}}
 				{{ i18n.users.noUserDevices }}
 			{{/each}}
 
 			{{#if extra.additionalDevices}}
-				<span class="help-popover" data-toggle="tooltip" data-html="true" data-placement="top" data-original-title="{{ extra.additionalDevices.tooltip }}">(+{{extra.additionalDevices.count}})</span>
+				<span class="device-popover" data-trigger="hover" data-toggle="popover" data-html="true" data-placement="top" data-content="{{ extra.additionalDevices.tooltip }}">(+{{extra.additionalDevices.count}})</span>
 			{{/if}}
 		</div>
 		<div class="features grid-cell right-aligned{{#compare extra.countFeatures ">" 5}} smaller{{/compare}}" data-type="features">