UI-727: Updated the way device restrictions are displayed

i18n/en-US.json

@@ -158,11 +158,16 @@
 				"inherit": "Inherit",
 				"deny": "Deny",
 				"matcher": {
-					"help": "Type in a number and click on \"Test\" to see which category it falls in.",
+					"help": "Type in a number and click on \"Test\" to see if the call would be allowed.",
 					"placeholder": "+18554443333",
 					"button": "Test",
-					"label": "The above number matched this rule."
-				}
+					"label": "The above number matched this rule.",
+					"__comment": "UI-727, v3.19_s2: Updating the way call restrictions are displayed on devices.",
+					"allowMessage": "This device will be allowed to place a call to {{phoneNumber}}",
+					"denyMessage": "This device will not be allowed to place a call to {{phoneNumber}}."
+				},
+				"__comment": "UI-727, v3.19_s2: Updating the way call restrictions are displayed on devices.",
+				"allow": "Allow"
 			},
 			"video": {
 				"menuTitle": "Video",

i18n/fr-FR.json

@@ -141,11 +141,15 @@
 				"inherit": "Hériter",
 				"deny": "Refuser",
 				"matcher": {
-					"help": "Saisissez un numéro et cliquez sur \"Tester\" pour voir à quelle catégorie il appartient.",
+					"help": "Saisissez un numéro et cliquez sur \"Tester\" pour savoir s'il sera autorisé.",
 					"placeholder": "+18554443333",
 					"button": "Tester",
-					"label": "Le numéro ci-dessus appartient à cette catégorie."
-				}
+					"label": "Le numéro ci-dessus appartient à cette catégorie.",
+					"allowMessage": "Ce téléphone sera autorisé à appeler le numéro {{phoneNumber}}",
+					"denyMessage": "Ce téléphone ne sera pas autorisé à appeler le numéro {{phoneNumber}}."
+				},
+				"__comment": "UI-727, v3.19_s2: Updating the way call restrictions are displayed on devices.",
+				"allow": "Autoriser"
 			},
 			"video": {
 				"menuTitle": "Vidéo",

submodules/devices/devices.css

@@ -278,13 +278,30 @@
 	margin-left: 5px;
 }
 
-.edit-device .restriction-matcher-label {
-	line-height: 30px;
-	margin-right: 50px;
-	float: right;
+.edit-device .restriction-matcher-sign {
+	margin-left: 20px;
+	width: 25px;
+	vertical-align: middle;
 	display: none;
 }
 
+.edit-device .restriction-list {
+	display: inline-block;
+}
+
+.edit-device .restriction-message {
+	width: 275px;
+	margin: 0 0 0 20px !important;
+	padding: 10px;
+	vertical-align: top;
+	display: none;
+}
+
+.edit-device .restriction-list .restriction-line.disabled .control-label {
+    opacity: 0.5;
+    cursor: default;
+}
+
 /* Codecs selector */
 .edit-device .content .codec-selector .box-selector {
 	float: left;

submodules/devices/devices.js

@@ -359,27 +359,61 @@ define(function(require){
 				}
 			});
 
+			templateDevice.find('.restriction-list .switch').on('switch-change', function() {
+				templateDevice.find('.restriction-matcher-sign').hide();
+				templateDevice.find('.restriction-message').hide();
+			});
+
 			templateDevice.find('.restriction-matcher-button').on('click', function(e) {
 				e.preventDefault();
 				var number = templateDevice.find('.restriction-matcher-input').val(),
 					matched = false;
-				templateDevice.find('.restriction-matcher-label').each(function() {
-					var label = $(this),
-						regex =  new RegExp(data.extra.restrictions[label.data('restriction')].regex);
-
-					if(regex.test(number)) {
-						label.show();
-						if(matched) {
-							label.fadeTo(0, 0.5);
-						} else {
-							label.fadeTo(0, 1);
+
+				if(number) {
+					self.callApi({
+						resource: 'numbers.matchClassifier',
+						data: {
+							accountId: self.accountId,
+							phoneNumber: encodeURIComponent(number)
+						},
+						success: function(data, status) {
+							var matchedLine = templateDevice.find('.restriction-line[data-restriction="'+data.data.name+'"]'),
+								matchedSign = matchedLine.find('.restriction-matcher-sign'),
+								matchedMsg = templateDevice.find('.restriction-message');
+
+							templateDevice.find('.restriction-matcher-sign').hide();
+							if(matchedLine.find('.switch').bootstrapSwitch('status')) {
+								matchedSign.removeClass('icon-red icon-remove')
+										   .addClass('icon-green icon-ok')
+										   .css('display', 'inline-block');
+
+								matchedMsg.removeClass('red-box')
+										  .addClass('green-box')
+										  .css('display', 'inline-block')
+										  .empty()
+										  .text(
+										  	monster.template(self, '!' + self.i18n.active().devices.popupSettings.restrictions.matcher.allowMessage, { phoneNumber: monster.util.formatPhoneNumber(number) })
+										  );
+							} else {
+								matchedSign.removeClass('icon-green icon-ok')
+										   .addClass('icon-red icon-remove')
+										   .css('display', 'inline-block');
+
+								matchedMsg.removeClass('green-box')
+										  .addClass('red-box')
+										  .css('display', 'inline-block')
+										  .empty()
+										  .text(
+										  	monster.template(self, '!' + self.i18n.active().devices.popupSettings.restrictions.matcher.denyMessage, { phoneNumber: monster.util.formatPhoneNumber(number) })
+										  );
+							}
 						}
-						matched = true;
-					} else {
-						label.hide();
-					}
-				});
-			})
+					});
+				} else {
+					templateDevice.find('.restriction-matcher-sign').hide();
+					templateDevice.find('.restriction-message').hide();
+				}
+			});
 
 			var popup = monster.ui.dialog(templateDevice, {
 				position: ['center', 20],
@@ -441,8 +475,12 @@ define(function(require){
 			}
 
 			if('call_restriction' in formData) {
-				_.each(formData.call_restriction, function(restriction) {
-					restriction.action = restriction.action === true ? 'inherit' : 'deny';
+				_.each(formData.call_restriction, function(restriction, key) {
+					if(key in originalData.extra.restrictions && originalData.extra.restrictions[key].disabled) {
+						restriction.action = originalData.extra.restrictions[key].action
+					} else {
+						restriction.action = restriction.action === true ? 'inherit' : 'deny';
+					}
 				});
 			}
 
@@ -605,9 +643,8 @@ define(function(require){
 						}
 					}
 				};
-
+			
 			_.each(data.listClassifiers, function(restriction, name) {
-				defaults.extra.restrictions[name] = restriction;
 				if(name in self.i18n.active().devices.classifiers) {
 					defaults.extra.restrictions[name].friendly_name = self.i18n.active().devices.classifiers[name].name;
 
@@ -616,9 +653,14 @@ define(function(require){
 					}
 				}
 
+				if('call_restriction' in data.accountLimits 
+				&& name in data.accountLimits.call_restriction
+				&& data.accountLimits.call_restriction[name].action === 'deny') {
+					defaults.extra.restrictions[name].disabled = true;
+				}
+
 				if('call_restriction' in data.device && name in data.device.call_restriction) {
 					defaults.extra.restrictions[name].action = data.device.call_restriction[name].action;
-
 				}
 				else {
 					defaults.extra.restrictions[name].action = 'inherit';
@@ -844,6 +886,17 @@ define(function(require){
 						self.devicesGetE911Numbers(function(e911Numbers) {
 							callback(null, e911Numbers);
 						});
+					},
+					accountLimits: function(callback) {
+						self.callApi({
+							resource: 'limits.get',
+							data: {
+								accountId: self.accountId
+							},
+							success: function(data, status) {
+								callback(null, data.data);
+							}
+						});
 					}
 				},
 				function(error, results) {

views/devices-ata.html

@@ -101,21 +101,25 @@
 				<div class="title">
 					{{ i18n.devices.popupSettings.restrictions.sectionTitle }}
 				</div>
+				<div class="restriction-list">
 				{{#each extra.restrictions}}
-					<div class="control-group">
+					<div class="control-group restriction-line{{#if this.disabled}} disabled{{/if}}" data-restriction="{{@key}}">
 						<label class="control-label">{{this.friendly_name}}
 							{{#if this.help}}
 								<i class="help-popover icon-question-sign" data-original-title="{{this.help}}" data-placement="top" data-toggle="tooltip"></i>
 							{{/if}}
 						</label>
 						<div class="controls">
-							<div class="switch" data-on="primary" data-off="danger" data-on-label="{{../i18n.devices.popupSettings.restrictions.inherit}}" data-off-label="{{../i18n.devices.popupSettings.restrictions.deny}}">
-								<input class="not-pretty" type="checkbox" name="call_restriction.{{@key}}.action" id="checkbox_enabled"{{#compare this.action '===' 'inherit'}} checked{{/compare}}></input>
+							<div class="switch" data-on="success" data-off="danger" data-on-label="{{../i18n.devices.popupSettings.restrictions.allow}}" data-off-label="{{../i18n.devices.popupSettings.restrictions.deny}}">
+								<input class="not-pretty" type="checkbox" name="call_restriction.{{@key}}.action" {{#compare this.action '===' 'inherit'}}{{#unless this.disabled}} checked{{/unless}}{{/compare}}{{#if this.disabled}} disabled{{/if}}></input>
 							</div>
-							<span data-restriction="{{@key}}" class="restriction-matcher-label">{{../i18n.devices.popupSettings.restrictions.matcher.label}}</span>
+							<i class="restriction-matcher-sign icon-large icon-ok icon-green"></i>
 						</div>
 					</div>
 				{{/each}}
+				</div>
+				<div class="restriction-message help-box">
+				</div>
 			</div>
 
 			<div class="tabs-section clearfix" data-section="callerId">

views/devices-fax.html

@@ -112,21 +112,25 @@
 				<div class="title">
 					{{ i18n.devices.popupSettings.restrictions.sectionTitle }}
 				</div>
+				<div class="restriction-list">
 				{{#each extra.restrictions}}
-					<div class="control-group">
+					<div class="control-group restriction-line{{#if this.disabled}} disabled{{/if}}" data-restriction="{{@key}}">
 						<label class="control-label">{{this.friendly_name}}
 							{{#if this.help}}
 								<i class="help-popover icon-question-sign" data-original-title="{{this.help}}" data-placement="top" data-toggle="tooltip"></i>
 							{{/if}}
 						</label>
 						<div class="controls">
-							<div class="switch" data-on="primary" data-off="danger" data-on-label="{{../i18n.devices.popupSettings.restrictions.inherit}}" data-off-label="{{../i18n.devices.popupSettings.restrictions.deny}}">
-								<input class="not-pretty" type="checkbox" name="call_restriction.{{@key}}.action" id="checkbox_enabled"{{#compare this.action '===' 'inherit'}} checked{{/compare}}></input>
+							<div class="switch" data-on="success" data-off="danger" data-on-label="{{../i18n.devices.popupSettings.restrictions.allow}}" data-off-label="{{../i18n.devices.popupSettings.restrictions.deny}}">
+								<input class="not-pretty" type="checkbox" name="call_restriction.{{@key}}.action" {{#compare this.action '===' 'inherit'}}{{#unless this.disabled}} checked{{/unless}}{{/compare}}{{#if this.disabled}} disabled{{/if}}></input>
 							</div>
-							<span data-restriction="{{@key}}" class="restriction-matcher-label">{{../i18n.devices.popupSettings.restrictions.matcher.label}}</span>
+							<i class="restriction-matcher-sign icon-large icon-ok icon-green"></i>
 						</div>
 					</div>
 				{{/each}}
+				</div>
+				<div class="restriction-message help-box">
+				</div>
 			</div>
 
 			<div class="tabs-section clearfix" data-section="callerId">

views/devices-mobile.html

@@ -131,23 +131,33 @@
 			</div>
 
 			<div class="tabs-section clearfix" data-section="restrictions">
+				<div class="restriction-matcher-div">
+					<i class="help-popover icon-question-sign icon-large" data-original-title="{{i18n.devices.popupSettings.restrictions.matcher.help}}" data-placement="top" data-toggle="tooltip"></i>
+					<input type="text" class="restriction-matcher-input" placeholder="{{i18n.devices.popupSettings.restrictions.matcher.placeholder}}" />
+					<button type="button"  class="btn btn-primary restriction-matcher-button">{{i18n.devices.popupSettings.restrictions.matcher.button}}</button>
+				</div>
 				<div class="title">
 					{{ i18n.devices.popupSettings.restrictions.sectionTitle }}
 				</div>
+				<div class="restriction-list">
 				{{#each extra.restrictions}}
-					<div class="control-group">
-                    	<label class="control-label">{{this.friendly_name}}
-                    		{{#if this.help}}
+					<div class="control-group restriction-line{{#if this.disabled}} disabled{{/if}}" data-restriction="{{@key}}">
+						<label class="control-label">{{this.friendly_name}}
+							{{#if this.help}}
 								<i class="help-popover icon-question-sign" data-original-title="{{this.help}}" data-placement="top" data-toggle="tooltip"></i>
-                    		{{/if}}
-                    	</label>
-                    	<div class="controls">
-							<div class="switch" data-on="primary" data-off="danger" data-on-label="{{../i18n.devices.popupSettings.restrictions.inherit}}" data-off-label="{{../i18n.devices.popupSettings.restrictions.deny}}">
-				    			<input class="not-pretty" type="checkbox" name="call_restriction.{{@key}}.action" id="checkbox_enabled"{{#compare this.action '===' 'inherit'}} checked{{/compare}}></input>
+							{{/if}}
+						</label>
+						<div class="controls">
+							<div class="switch" data-on="success" data-off="danger" data-on-label="{{../i18n.devices.popupSettings.restrictions.allow}}" data-off-label="{{../i18n.devices.popupSettings.restrictions.deny}}">
+								<input class="not-pretty" type="checkbox" name="call_restriction.{{@key}}.action" {{#compare this.action '===' 'inherit'}}{{#unless this.disabled}} checked{{/unless}}{{/compare}}{{#if this.disabled}} disabled{{/if}}></input>
 							</div>
-                    	</div>
-                	</div>
+							<i class="restriction-matcher-sign icon-large icon-ok icon-green"></i>
+						</div>
+					</div>
 				{{/each}}
+				</div>
+				<div class="restriction-message help-box">
+				</div>
 			</div>
 
 			<div class="tabs-section clearfix" data-section="callerId">

views/devices-row.html

@@ -17,7 +17,7 @@
 		</div>
 		<div class="enable grid-cell centered">
 			<div class="switch" data-on="success" data-off="danger" data-on-label="{{i18n.on}}" data-off-label="{{i18n.off}}">
-			    <input type="checkbox" id="checkbox_enabled"{{#if enabled}} checked="checked"{{/if}}></input>
+			    <input type="checkbox"{{#if enabled}} checked="checked"{{/if}}></input>
 			</div>
 		</div>
 		<div class="edit grid-cell centered">

views/devices-sip_device.html

@@ -175,21 +175,25 @@
 				<div class="title">
 					{{ i18n.devices.popupSettings.restrictions.sectionTitle }}
 				</div>
+				<div class="restriction-list">
 				{{#each extra.restrictions}}
-					<div class="control-group">
+					<div class="control-group restriction-line{{#if this.disabled}} disabled{{/if}}" data-restriction="{{@key}}">
 						<label class="control-label">{{this.friendly_name}}
 							{{#if this.help}}
 								<i class="help-popover icon-question-sign" data-original-title="{{this.help}}" data-placement="top" data-toggle="tooltip"></i>
 							{{/if}}
 						</label>
 						<div class="controls">
-							<div class="switch" data-on="primary" data-off="danger" data-on-label="{{../i18n.devices.popupSettings.restrictions.inherit}}" data-off-label="{{../i18n.devices.popupSettings.restrictions.deny}}">
-								<input class="not-pretty" type="checkbox" name="call_restriction.{{@key}}.action" id="checkbox_enabled"{{#compare this.action '===' 'inherit'}} checked{{/compare}}></input>
+							<div class="switch" data-on="success" data-off="danger" data-on-label="{{../i18n.devices.popupSettings.restrictions.allow}}" data-off-label="{{../i18n.devices.popupSettings.restrictions.deny}}">
+								<input class="not-pretty" type="checkbox" name="call_restriction.{{@key}}.action" {{#compare this.action '===' 'inherit'}}{{#unless this.disabled}} checked{{/unless}}{{/compare}}{{#if this.disabled}} disabled{{/if}}></input>
 							</div>
-							<span data-restriction="{{@key}}" class="restriction-matcher-label">{{../i18n.devices.popupSettings.restrictions.matcher.label}}</span>
+							<i class="restriction-matcher-sign icon-large icon-ok icon-green"></i>
 						</div>
 					</div>
 				{{/each}}
+				</div>
+				<div class="restriction-message help-box">
+				</div>
 			</div>
 
 			<div class="tabs-section clearfix" data-section="callerId">

views/devices-smartphone.html

@@ -167,21 +167,25 @@
 				<div class="title">
 					{{ i18n.devices.popupSettings.restrictions.sectionTitle }}
 				</div>
+				<div class="restriction-list">
 				{{#each extra.restrictions}}
-					<div class="control-group">
+					<div class="control-group restriction-line{{#if this.disabled}} disabled{{/if}}" data-restriction="{{@key}}">
 						<label class="control-label">{{this.friendly_name}}
 							{{#if this.help}}
 								<i class="help-popover icon-question-sign" data-original-title="{{this.help}}" data-placement="top" data-toggle="tooltip"></i>
 							{{/if}}
 						</label>
 						<div class="controls">
-							<div class="switch" data-on="primary" data-off="danger" data-on-label="{{../i18n.devices.popupSettings.restrictions.inherit}}" data-off-label="{{../i18n.devices.popupSettings.restrictions.deny}}">
-								<input class="not-pretty" type="checkbox" name="call_restriction.{{@key}}.action" id="checkbox_enabled"{{#compare this.action '===' 'inherit'}} checked{{/compare}}></input>
+							<div class="switch" data-on="success" data-off="danger" data-on-label="{{../i18n.devices.popupSettings.restrictions.allow}}" data-off-label="{{../i18n.devices.popupSettings.restrictions.deny}}">
+								<input class="not-pretty" type="checkbox" name="call_restriction.{{@key}}.action" {{#compare this.action '===' 'inherit'}}{{#unless this.disabled}} checked{{/unless}}{{/compare}}{{#if this.disabled}} disabled{{/if}}></input>
 							</div>
-							<span data-restriction="{{@key}}" class="restriction-matcher-label">{{../i18n.devices.popupSettings.restrictions.matcher.label}}</span>
+							<i class="restriction-matcher-sign icon-large icon-ok icon-green"></i>
 						</div>
 					</div>
 				{{/each}}
+				</div>
+				<div class="restriction-message help-box">
+				</div>
 			</div>
 
 			<div class="tabs-section clearfix" data-section="callerId">

views/devices-softphone.html

@@ -132,21 +132,25 @@
 				<div class="title">
 					{{ i18n.devices.popupSettings.restrictions.sectionTitle }}
 				</div>
+				<div class="restriction-list">
 				{{#each extra.restrictions}}
-					<div class="control-group">
+					<div class="control-group restriction-line{{#if this.disabled}} disabled{{/if}}" data-restriction="{{@key}}">
 						<label class="control-label">{{this.friendly_name}}
 							{{#if this.help}}
 								<i class="help-popover icon-question-sign" data-original-title="{{this.help}}" data-placement="top" data-toggle="tooltip"></i>
 							{{/if}}
 						</label>
 						<div class="controls">
-							<div class="switch" data-on="primary" data-off="danger" data-on-label="{{../i18n.devices.popupSettings.restrictions.inherit}}" data-off-label="{{../i18n.devices.popupSettings.restrictions.deny}}">
-								<input class="not-pretty" type="checkbox" name="call_restriction.{{@key}}.action" id="checkbox_enabled"{{#compare this.action '===' 'inherit'}} checked{{/compare}}></input>
+							<div class="switch" data-on="success" data-off="danger" data-on-label="{{../i18n.devices.popupSettings.restrictions.allow}}" data-off-label="{{../i18n.devices.popupSettings.restrictions.deny}}">
+								<input class="not-pretty" type="checkbox" name="call_restriction.{{@key}}.action" {{#compare this.action '===' 'inherit'}}{{#unless this.disabled}} checked{{/unless}}{{/compare}}{{#if this.disabled}} disabled{{/if}}></input>
 							</div>
-							<span data-restriction="{{@key}}" class="restriction-matcher-label">{{../i18n.devices.popupSettings.restrictions.matcher.label}}</span>
+							<i class="restriction-matcher-sign icon-large icon-ok icon-green"></i>
 						</div>
 					</div>
 				{{/each}}
+				</div>
+				<div class="restriction-message help-box">
+				</div>
 			</div>
 
 			<div class="tabs-section clearfix" data-section="callerId">