UI-2475: added failover mode to call forward in smartpbx

i18n/en-US.json

@@ -547,7 +547,11 @@
 			"placeholder": "+14157283992",
 			"requireKeyPress": "Leave voicemails on forwarded numbers",
 			"title": "Call Forwarding",
-			"timeoutWarning": "In order to leave voicemails on forwarded numbers, your ringing timeout needs to be set to at least 30sec. By saving now, you will automatically be redirected to the user edition where you can update the ringing timeout."
+			"timeoutWarning": "In order to leave voicemails on forwarded numbers, your ringing timeout needs to be set to at least 30sec. By saving now, you will automatically be redirected to the user edition where you can update the ringing timeout.",
+			"__comment": ": Now add a mode for failover for call forward",
+			"__version": "4.0",
+			"failoverWarning": "In \"Failover Mode\", the call-forward settings will only apply when none of this user's devices are registered.",
+			"failover_title": "Call-Forwarding (Failover Mode)"
 		},
 		"callRecording": {
 			"title": "Inbound Call Recording",

submodules/users/users.css

@@ -878,4 +878,23 @@
 /**** CSS for delete user dialog ****/
 .delete-user-wrapper .dialog-text {
 	margin-top: 10px;
+}
+
+.monster-feature-popup-container[data-feature="call_forward"] {
+	width: 600px;
+}
+
+.monster-feature-popup-container[data-feature="call_forward"] .btn-group {
+	float: right;
+	font-size: 14px;
+	margin-right: 25px;
+	margin-top: 40px;
+}
+
+.monster-feature-popup-container[data-feature="call_forward"] .failover-info {
+	margin-bottom: 25px;
+}
+
+.monster-feature-popup-container[data-feature="call_forward"] .failover-info.disabled {
+	display: none;
 }

submodules/users/users.js

@@ -177,6 +177,12 @@ define(function(require){
 							iconColor: 'monster-blue',
 							title: self.i18n.active().users.caller_id.title
 						},
+						call_forward_failover: {
+							icon: 'fa fa-share',
+							iconColor: 'monster-orange',
+							title: self.i18n.active().users.call_forward.failover_title,
+							hidden: true
+						},
 						call_forward: {
 							icon: 'fa fa-share',
 							iconColor: 'monster-yellow',
@@ -1888,9 +1894,33 @@ define(function(require){
 			}
 		},
 
+		usersFormatCallForwardData: function(user) {
+			var self = this,
+				cfMode = 'off';
+
+			user.extra = user.extra || {};
+
+			//cfmode is on if call_forward.enabled = true
+			//cfmode is failover if call_forward.enabled = false & call_forward.failover = true
+			//cfmode is off if call_forward.enabled = false & call_forward.failover = false
+			if(user.hasOwnProperty('call_forward') && user.call_forward.hasOwnProperty('enabled')) {
+				if(user.call_forward.enabled === true) {
+					cfMode = 'on';
+				}
+				else if(user.call_forward.enabled === false) {
+					cfMode = user.call_forward.hasOwnProperty('failover') && user.call_forward.failover === true ? 'failover' : 'off';
+				}
+			}
+
+			user.extra.callForwardMode = cfMode;
+
+			return user;
+		},
+
 		usersRenderCallForward: function(currentUser) {
 			var self = this,
-				featureTemplate = $(monster.template(self, 'users-feature-call_forward', currentUser)),
+				formattedCallForwardData = self.usersFormatCallForwardData(currentUser),
+				featureTemplate = $(monster.template(self, 'users-feature-call_forward', formattedCallForwardData)),
 				switchFeature = featureTemplate.find('.switch-state'),
 				featureForm = featureTemplate.find('#call_forward_form'),
 				args = {
@@ -1917,6 +1947,16 @@ define(function(require){
 				popup.dialog('close').remove();
 			});
 
+			featureTemplate.find('.feature-select-mode button').on('click', function() {
+				var $this = $(this);
+
+				featureTemplate.find('.feature-select-mode button').removeClass('selected monster-button-primary');
+				$(this).addClass('selected monster-button-primary');
+
+				$this.data('value') === 'off' ? featureTemplate.find('.content').slideUp() : featureTemplate.find('.content').slideDown();
+				$this.data('value') === 'failover' ? featureTemplate.find('.failover-info').slideDown() : featureTemplate.find('.failover-info').slideUp();
+			});
+
 			switchFeature.on('change', function() {
 				$(this).prop('checked') ? featureTemplate.find('.content').slideDown() : featureTemplate.find('.content').slideUp();
 			});
@@ -1926,11 +1966,24 @@ define(function(require){
 					var formData = monster.ui.getFormData('call_forward_form');
 					formData.require_keypress = !formData.require_keypress;
 
-					formData.enabled = switchFeature.prop('checked');
+					var selectedType = featureTemplate.find('.feature-select-mode button.selected').data('value');
+					if(selectedType === 'off') {
+						formData.enabled = false;
+						formData.failover = false;
+					}
+					else if(selectedType === 'failover') {
+						formData.enabled = false;
+						formData.failover = true;
+					}
+					else {
+						formData.enabled = true;
+						formData.failover = true;
+					}
+
 					formData.number = monster.util.unformatPhoneNumber(formData.number, 'keepPlus');
 					delete formData.phoneType;
 
-					var userToSave = $.extend(true, {}, currentUser, { call_forward: formData});
+					var userToSave = $.extend(true, {}, currentUser, { call_forward: formData });
 
 					if(timeoutWarningBox.is(':visible')) {
 						args.openedTab = 'name';
@@ -1954,6 +2007,8 @@ define(function(require){
 				title: currentUser.extra.mapFeatures.call_forward.title,
 				position: ['center', 20]
 			});
+
+			popup.find(".monster-button").blur();
 		},
 
 		usersRenderFindMeFollowMe: function(params) {

views/users-feature-call_forward.html

@@ -4,14 +4,20 @@
 			<i class="{{extra.mapFeatures.call_forward.icon}}"></i>
 		</div>
 		{{ i18n.users.call_forward.headline }}
-		<div class="switch">
-		{{#monsterSwitch}}
-			<input class="switch-state" type="checkbox" id="checkbox_call_forward" data-on="{{i18n.enabled}}" data-off="{{i18n.disabled}}"{{#if extra.mapFeatures.call_forward.active}} checked="checked"{{/if}}></input>
-		{{/monsterSwitch}}
+
+		<div class="btn-group feature-select-mode">
+			<button data-value="on" class="monster-button monster-button-fit{{#compare extra.callForwardMode "===" "on"}} monster-button-primary selected{{/compare}}">On</button>
+			<button data-value="failover" class="monster-button monster-button-fit{{#compare extra.callForwardMode "===" "failover"}} monster-button-primary selected{{/compare}}">Failover Mode</button>
+			<button data-value="off" class="monster-button monster-button-fit{{#compare extra.callForwardMode "===" "off"}} monster-button-primary selected{{/compare}}">Off</button>
 		</div>
 	</div>
 
-	<div class="content{{#unless extra.mapFeatures.call_forward.active}} disabled{{/unless}}">
+	<div class="content{{#compare extra.callForwardMode "===" "off"}} disabled{{/compare}}">
+		<div class="failover-info{{#compare extra.callForwardMode "!==" "failover"}} disabled{{/compare}}">
+			{{#monsterText 'info'}}
+				{{ i18n.users.call_forward.failoverWarning }}
+			{{/monsterText}}
+		</div>
 		<form id="call_forward_form" class="form form-horizontal">
 			<div class="control-group">
 				<label class="control-label" for="phoneType">{{ i18n.users.call_forward.label }}</label>

views/users-features.html

@@ -1,14 +1,16 @@
 <div class="detail-features">
 	<div class="features-grid">
 		{{#each extra.mapFeatures}}
-			<div data-feature="{{@key}}" class="feature">
-				<div class="fa fa-wrapper{{#if active}} active{{/if}}">
-					<i class="{{icon}}"></i>
+			{{#unless hidden}}
+				<div data-feature="{{@key}}" class="feature">
+					<div class="fa fa-wrapper{{#if active}} active{{/if}}">
+						<i class="{{icon}}"></i>
+					</div>
+					<div class="feature-title">
+						{{title}}
+					</div>
 				</div>
-				<div class="feature-title">
-					{{title}}
-				</div>
-			</div>
+			{{/unless}}
 		{{/each}}
 	</div>
 </div>