UI-592: Added icons to virtual receptionist routes to help identify the endpoint type

submodules/strategy/strategy.css

@@ -536,7 +536,7 @@
 #strategy_menu_popup .menu-block .menu-line > select {
 	margin: 0 15px 0 0;
 	display: inline-block;
-	vertical-align: initial;
+	vertical-align: middle;
 }
 #strategy_menu_popup .menu-block .menu-line .number-input {
 	width: 18px;
@@ -549,17 +549,21 @@
 	font-weight: bold;
 	cursor: pointer;
 }
+#strategy_menu_popup .menu-block .menu-line .target-input .add-on {
+	width: 20px;
+}
 #strategy_menu_popup .menu-block .menu-line .target-select {
-	width: 140px;
+	width: 150px;
 }
-#strategy_menu_popup .menu-block .menu-line i {
+#strategy_menu_popup .menu-block .menu-line i.remove-btn {
 	cursor: pointer;
 	opacity: 0.8;
+	vertical-align: middle;
 }
-#strategy_menu_popup .menu-block .menu-line i:hover {
+#strategy_menu_popup .menu-block .menu-line i.remove-btn:hover {
 	color: #ff1212 !important;
 }
-#strategy_menu_popup .menu-block .menu-line i:active {
+#strategy_menu_popup .menu-block .menu-line i.remove-btn:active {
 	color: #ff1212 !important;
 	text-shadow: 1px 1px 1px #999;
 }

submodules/strategy/strategy.js

@@ -1358,6 +1358,12 @@ define(function(require){
 						}));
 					});
 
+					$.each(menuLineContainer.find('.target-input'), function() {
+						var $this = $(this),
+							icon = $this.find('.target-select option:selected').parents('optgroup').data('icon');
+						$this.find('.target-icon').addClass(icon);
+					});
+
 					self.strategyBindMenuPopupEvents(popup, $.extend({
 						menu: menu,
 						greeting: greeting
@@ -1470,6 +1476,14 @@ define(function(require){
 				}
 			});
 
+			container.on('change', '.target-select', function(e) {
+				var $this = $(this),
+					iconElem = $this.parents('.target-input').find('.target-icon'),
+					icon = $this.find('option:selected').parents('optgroup').data('icon');
+
+				iconElem.attr('class', 'target-icon '+icon);
+			});
+
 			container.on('click', '.remove-btn', function(e) {
 				$(this).parents('.menu-line').remove();
 			});
@@ -1477,8 +1491,11 @@ define(function(require){
 			container.find('.add-menu-line a').on('click', function(e) {
 				e.preventDefault();
 				var popupCallEntities = $.extend(true, {}, strategyData.callEntities, { voicemail: strategyData.voicemails }),
-					menuLine = $(monster.template(self, 'strategy-menuLine', { callEntities: self.strategyGetCallEntitiesDropdownData(popupCallEntities) }));
+					menuLine = $(monster.template(self, 'strategy-menuLine', { callEntities: self.strategyGetCallEntitiesDropdownData(popupCallEntities) })),
+					icon = menuLine.find('.target-select option:selected').parents('optgroup').data('icon');
+
 				container.find('.menu-block .left .content').append(menuLine);
+				menuLine.find('.target-icon').addClass(icon);
 				menuLine.find('.number-input').focus();
 			});
 
@@ -1701,6 +1718,7 @@ define(function(require){
 		strategyGetCallEntitiesDropdownData: function(callEntities) {
 			var self = this,
 				results = [];
+
 			_.each(callEntities, function(value, key) {
 				var group = {
 						groupName: self.i18n.active().strategy.callEntities[key],
@@ -1713,6 +1731,22 @@ define(function(require){
 							};
 						})
 					};
+
+				switch(group.groupType) {
+					case 'user':
+						group.groupIcon = 'icon-user';
+						break;
+					case 'device':
+						group.groupIcon = 'icon-telicon-voip-phone';
+						break;
+					case 'ring_group':
+						group.groupIcon = 'icon-group';
+						break;
+					case 'voicemail':
+						group.groupIcon = 'icon-telicon-voicemail';
+						break;
+				}
+
 				group.entities.sort(function(a,b) { return (a.name.toLowerCase() > b.name.toLowerCase()); });
 				if(group.groupType === "user") {
 					results.splice(0, 0, group);

views/strategy-menuLine.html

@@ -3,14 +3,17 @@
 	<div class="number-text">{{number}}</div>
 	<input class="number-input" type="text" maxlength="2" value="{{number}}">
 	<div class="text">{{i18n.strategy.popup.for}}</div>
-	<select class="target-select">
-		{{#each callEntities}}
-			<optgroup label="{{groupName}}">
-				{{#each entities}}
-					<option value="{{id}}" data-type="{{module}}" {{#compare id '===' ../../selectedId }}selected{{/compare}}>{{name}}</option>
-				{{/each}}
-			</optgroup>
-		{{/each}}
-	</select>
+	<div class="input-prepend target-input">
+		<span class="add-on"><i class="target-icon"></i></span>
+		<select class="target-select">
+			{{#each callEntities}}
+				<optgroup label="{{groupName}}" data-icon="{{groupIcon}}">
+					{{#each entities}}
+						<option value="{{id}}" data-type="{{module}}" {{#compare id '===' ../../selectedId }}selected{{/compare}}>{{name}}</option>
+					{{/each}}
+				</optgroup>
+			{{/each}}
+		</select>
+	</div>
 	<i class="remove-btn icon-remove icon-lightgrey"></i>
 </div>