UI-649: moved warning for main number and fixed charts on empty account

i18n/en-US.json

@@ -704,7 +704,8 @@
 			"spare": "Spare Numbers",
 			"local": "Local Numbers",
 			"tollfree": "Toll-free Numbers",
-			"international": "International Numbers"
+			"international": "International Numbers",
+			"noNumber": "No number available"
 		}
 	}
 }

i18n/fr-FR.json

@@ -100,7 +100,7 @@
 			"advancedTitle": "Avancés",
 			"basicTitle": "Réglages",
 			"basicSectionTitle": "Réglages basiques",
-			"dragAndDrop": "Pour sélectionner un codec, glisser-déposer depuis la boite des codecs disponilbes jusqu'à celle des codecs sélectionnés",
+			"dragAndDrop": "Pour sélectionner un codec, glisser-déposer depuis la boite des codecs disponibles jusqu'à celle des codecs sélectionnés",
 			"options": {
 				"menuTitle": "Réglages"
 			},
@@ -683,7 +683,8 @@
 			"spare": "Numéros assignés",
 			"local": "Numéros locaux",
 			"tollfree": "Numéros verts",
-			"international": "Numéros internationaux"
+			"international": "Numéros internationaux",
+			"noNumber": "Aucun numéro disponible"
 		}
 	}
 }

submodules/myOffice/myOffice.css

@@ -73,10 +73,6 @@
 #myoffice_container .dashboard-content-div.dashboard-left-content {
 	padding-right: 10px;
 }
-#myoffice_container .dashboard-content-div .link-box:hover {
-	cursor: pointer;
-	background: #eeeeee !important;
-}
 #myoffice_container .dashboard-left-content .left-section-header  {
 	height: 50px;
 	line-height: 50px;
@@ -166,6 +162,23 @@
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
 }
+#myoffice_container .dashboard-right-content .dashboard-box .dashboard-warning-row {
+	padding: 10px;
+	line-height: 40px;
+	color: #ffffff;
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+	background-color: #faa732;
+	background-image: -moz-linear-gradient(top, #fbb450, #f89406);
+	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
+	background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
+	background-image: -o-linear-gradient(top, #fbb450, #f89406);
+	background-image: linear-gradient(to bottom, #fbb450, #f89406);
+	opacity: 0.8;
+}
+#myoffice_container .dashboard-right-content .dashboard-box .dashboard-warning-row > i {
+	margin-right: 10px;
+	color: #ffffff;
+}
 #myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row {
 	padding: 10px;
 	background-color: #f6f6f6;
@@ -324,6 +337,25 @@
 #myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-div .number-types-legend .legend-number {
 	font-size: 16px;
 }
+#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-div .number-types-legend .no-number {
+	line-height: 90px;
+	font-style: italic;
+	color: #999;
+}
+
+#myoffice_container .dashboard-content-div .link-box:hover,
+#myoffice_container .dashboard-content-div .div-title.link-box:hover {
+	cursor: pointer;
+	background: #eeeeee;
+}
+#myoffice_container .dashboard-right-content .dashboard-box .dashboard-warning-row.link-box:hover {
+	background-color: #faa732;
+	background-image: -moz-linear-gradient(top, #f89406, #fbb450);
+	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f89406), to(#fbb450));
+	background-image: -webkit-linear-gradient(top, #f89406, #fbb450);
+	background-image: -o-linear-gradient(top, #f89406, #fbb450);
+	background-image: linear-gradient(to bottom, #f89406, #fbb450);
+}
 
 /********** Music-On-Hold Popup **********/
 #my_office_music_on_hold_popup .media-dropdown {
@@ -368,3 +400,24 @@
 #my_office_caller_id_popup .caller-id-name {
     margin-top: 5px;
 }
+
+#myoffice_container .warning-pulse-box {
+    -webkit-animation: "warning-pulse-box" 1s ease-in-out 0 infinite alternate;
+
+    animation-name: warning-pulse-box;
+    animation-duration: 1s;
+    animation-timing-function: ease-in-out;
+    animation-delay: 0;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+
+@-webkit-keyframes warning-pulse-box {
+    0% { box-shadow: 0px 0px 5px #fbb450 inset, 0px 0px 5px #f89406; }
+    100% { box-shadow: 0px 0px 30px #fbb450 inset, 0px 0px 10px #f89406; }
+}
+
+@keyframes warning-pulse-box {
+    0% { box-shadow: 0px 0px 5px #fbb450 inset, 0px 0px 5px #f89406; }
+    100% { box-shadow: 0px 0px 30px #fbb450 inset, 0px 0px 10px #f89406; }
+}

submodules/myOffice/myOffice.js

@@ -117,21 +117,25 @@ define(function(require){
 						percentageInnerCutout: 60
 					},
 					devicesChart = new Chart(template.find('#dashboard_devices_chart').get(0).getContext("2d")).Doughnut(
+						myOfficeData.devicesData.totalCount > 0 ?
 						$.map(myOfficeData.devicesData, function(val) {
-							return {
+							return typeof val === 'object' ? {
 								value: val.count,
 								color: val.color
-							};
-						}).sort(function(a, b) { return b.value - a.value ; }),
+							} : null;
+						}).sort(function(a, b) { return b.value - a.value ; }) :
+						[{ value:1, color:"#DDD" }],
 						chartOptions
 					),
 					assignedNumbersChart = new Chart(template.find('#dashboard_assigned_numbers_chart').get(0).getContext("2d")).Doughnut(
+						myOfficeData.assignedNumbersData.totalCount > 0 ?
 						$.map(myOfficeData.assignedNumbersData, function(val) {
-							return {
+							return typeof val === 'object' ? {
 								value: val.count,
 								color: val.color
-							};
-						}).sort(function(a, b) { return b.value - a.value ; }),
+							} : null;
+						}).sort(function(a, b) { return b.value - a.value ; }) :
+						[{ value:1, color:"#DDD" }],
 						chartOptions
 					),
 					numberTypesChart = new Chart(template.find('#dashboard_number_types_chart').get(0).getContext("2d")).Doughnut(
@@ -141,12 +145,14 @@ define(function(require){
 						// 		color: val.color
 						// 	};
 						// }).sort(function(a, b) { return b.value - a.value ; }),
+						myOfficeData.classifiedNumbers.length > 0 ?
 						$.map(myOfficeData.classifiedNumbers, function(val, index) {
-							return {
+							return typeof val === 'object' ? {
 								value: val.count,
 								color: val.color
-							};
-						}),
+							} : null;
+						}) :
+						[{ value:1, color:"#DDD" }],
 						chartOptions
 					);
 
@@ -312,7 +318,8 @@ define(function(require){
 						label: self.i18n.active().devices.types.ata,
 						count: 0,
 						color: self.chartColors[7]
-					}
+					},
+					totalCount: 0
 				},
 				assignedNumbers = {
 					"spare": {
@@ -324,7 +331,8 @@ define(function(require){
 						label: self.i18n.active().myOffice.numberChartLegend.assigned,
 						count: 0,
 						color: self.chartColors[3]
-					}
+					},
+					totalCount: 0
 				},
 				// numberTypes = {
 				// 	"local": {
@@ -390,6 +398,7 @@ define(function(require){
 			_.each(data.devices, function(val) {
 				if(val.device_type in devices) {
 					devices[val.device_type].count++;
+					devices.totalCount++;
 				} else {
 					console.log('Unknown device type: '+val.device_type);
 				}
@@ -401,6 +410,7 @@ define(function(require){
 				} else {
 					assignedNumbers["spare"].count++;
 				}
+				assignedNumbers.totalCount++;
 
 				//TODO: Find out the number type and increment the right category
 				// numberTypes["local"].count++;
@@ -445,16 +455,17 @@ define(function(require){
 				}
 			})
 
-			if(!data.mainNumbers || data.mainNumbers.length === 0) {
-				data.topMessage = {
-					class: 'btn-warning',
-					message: self.i18n.active().myOffice.missingMainNumberMessage
-				}
-			} else if(!('caller_id' in data.account)
-				   || !('emergency' in data.account.caller_id)
-				   || !('number' in data.account.caller_id.emergency)
-				   || !(data.account.caller_id.emergency.number in data.numbers)
-				   || data.numbers[data.account.caller_id.emergency.number].features.indexOf('dash_e911') < 0) {
+			if(
+				data.mainNumbers
+			 && data.mainNumbers.length > 0
+			 && (
+			 	   !('caller_id' in data.account)
+				|| !('emergency' in data.account.caller_id)
+				|| !('number' in data.account.caller_id.emergency)
+				|| !(data.account.caller_id.emergency.number in data.numbers)
+				|| data.numbers[data.account.caller_id.emergency.number].features.indexOf('dash_e911') < 0
+				)
+			) {
 				data.topMessage = {
 					class: 'btn-danger',
 					message: self.i18n.active().myOffice.missingE911Message

views/myOffice-layout.html

@@ -73,6 +73,7 @@
 
 		<div class="dashboard-content-div dashboard-right-content">
 			<div class="dashboard-box">
+				{{#if mainNumbers.length}}
 				<div class="dashboard-box-row main-number-row link-box" data-category="strategy" data-subcategory="main-number">
 					<div class="row-title">
 						<div>{{i18n.myOffice.mainNumberLabel}}</div>
@@ -94,6 +95,11 @@
 						</ul>
 					</div>
 				</div>
+				{{else}}
+				<div class="dashboard-warning-row main-number-row link-box" data-category="strategy" data-subcategory="main-number">
+					<i class="icon-warning-sign"></i>{{../i18n.myOffice.missingMainNumberMessage}}
+				</div>	
+				{{/if}}
 				<div class="dashboard-box-row conf-number-row link-box" data-category="strategy" data-subcategory="strategy-confnum">
 					<div class="row-title">
 						<div>{{i18n.myOffice.confNumberLabel}}</div>
@@ -161,6 +167,8 @@
 									<span class="legend-label">{{label}}</span>
 									<span class="legend-number">{{count}}</span>
 								</li>
+								{{else}}
+								<li class="no-number">{{../i18n.myOffice.numberChartLegend.noNumber}}</li>
 								{{/each}}
 							</ul>
 						</div>