add loading indicator for file UI

Author: ansonl

css/file.css

@@ -75,6 +75,30 @@
 	padding-top: 64px;
 }
 
+#content-btn {
+	position: relative;
+}
+
+#content-loader-overlay {
+	position: relative;
+	top: 0%;
+	left: 0%;
+	width: 100%;
+	height: 100%;
+	transform: translateY(-100%);
+	background:rgba(0,0,0,0.4);
+	display: none;
+}
+
+#content-loader-aspect {
+	position: absolute;
+	top: 50%;
+  left: 50%;
+  transform: translateY(-50%) translateX(-50%);
+	width: 100px;
+	height: 100px;
+}
+
 #hierarchy-container {
 	position: relative;
 	height: 100%;
@@ -117,6 +141,12 @@
 	transform: translate(-50%, -50%);
 }
 
+/* no border on drop down to avoid horizonal scroll bars */
+.file-drop-menu {
+	border: none;
+	padding:; 1px;
+}
+
 @media only screen and (max-width: 320px) {
 	#hierarchy-container {
 		width: 100%;

css/folders.css

@@ -9,6 +9,7 @@
 #folders-container {
 	position: relative;
 	overflow-y: scroll;
+	height: 100%;
 }
 
 .folder-row {
@@ -42,6 +43,13 @@
 .folder-selected {
 	background-color: #C06306;
   transition: all 0.5s;
+  animation: flicker 2s infinite;
+}
+
+@keyframes flicker {
+	0% { opacity: 1; }
+	50% { opacity: 0.5; }
+	100% { opacity: 1; }
 }
 
 .folder-comment {

css/reports.css

@@ -9,6 +9,7 @@
 #reports-container {
 	position: relative;
 	overflow-y: scroll;
+	height: 100%;
 }
 
 .report-row {
@@ -42,6 +43,7 @@
 .report-selected {
 	background-color: #763806;
   transition: all 0.5s;
+  animation: flicker 2s infinite; /* defined in folders.css */
 }
 
 .report-comment {

file.html

@@ -103,6 +103,10 @@ <h6 class="title-64">NAVFIT99</h6>
 		<div class="container" id="detail-container">
 			<div id="detail-background">Details</div>
 		</div>
+
+		<div id="content-loader-overlay">
+			<div id="content-loader-aspect"><div id="loader"></div></div>
+		</div>
 	</div>
 </div>
 

js/alerts.js

@@ -27,7 +27,13 @@ function showSuccessAlertWithText(text) {
 function showWarnAlertWithTextWithLink(text, link) {
 	$('#warn-alert').show();
 	$('#warn-text').text(text);
-	$('#warn-link').val(link);
+	if (link != null) {
+		$('#warn-link').show();
+		$('#warn-link').val(link);
+	} else {
+		$('#warn-link').hide();
+	}
+	
 }
 
 function showTextAreaAlertWithTextWithData(text, data) {

js/constants.js

@@ -1,4 +1,6 @@
+//js GET params
 var fileUUIDKey = 'uuid';
+var authErrorKey = 'authError';
 
 //auth parameter names for auth server
 var urlEditorIDKey = 'user';

js/file.js

@@ -245,7 +245,7 @@ function createFolderElement(folderMap) {
 		actionsDropdownBtn.html('<span class="glyphicon glyphicon-option-horizontal" aria-hidden="false">&nbsp;<span class="caret"></span>');
 
 		var actionList = jQuery('<ul/>', {
-			class: 'dropdown-menu'
+			class: 'dropdown-menu file-drop-menu'
 		});
 
 		//Add folder icon
@@ -508,6 +508,11 @@ function processFolders(data) {
 
 	console.log(data);
 
+	if (folders.length == 0) {
+		showWarnAlertWithTextWithLink('No folders in NAVFIT database, click \'</>\' to see your NAVFIT database data. ', null);
+		setTimeout(warnCloseButtonClicked, 5000);
+	}
+
 	$('#folders-container').empty();
 
 	for (var i = 0; i < data.length; i++) {
@@ -529,6 +534,12 @@ function processReports(data) {
 	var retrievedReports = data;
 
 	console.log(retrievedReports);
+
+	if (retrievedReports.length == 0) {
+		showWarnAlertWithTextWithLink('No reports in folder.', null);
+		setTimeout(warnCloseButtonClicked, 5000);
+	}
+
 	for (var i = 0; i < retrievedReports.length; i++) {
 		var reportMap = retrievedReports[i];
 
@@ -573,11 +584,14 @@ function loadReportsForFolderFromServer(folderID, callback) {
 	loadData(getUrlParameter(fileUUIDKey), 3, folderID, callback);
 }
 
+/*
+ * Request navift, folder, report data from backend
+ */
 function loadData(fileUUID, type, typeData, callback) {
 	/*
 	disableMainUI();
-	$('#new-file-loader-aspect').show();
 	*/
+	$('#content-loader-overlay').show();
 
 	var editorID;
 	var authToken;
@@ -631,6 +645,8 @@ function loadData(fileUUID, type, typeData, callback) {
     		callback();
 
     	console.log(callback);
+
+    	$('#content-loader-overlay').hide();
     }
 	});
 

js/main.js

@@ -29,6 +29,20 @@ function setupLoginLogoutUI() {
   }
 }
 
+function checkForAuthError() {
+  var authError = getUrlParameter(authErrorKey);
+  switch(parseInt(authError, 10)) {
+    case 1:
+      showErrorAlertWithText('No client certificate provided. Did you select a certificate? Restart browser to try again.');
+      break;
+    case 2: 
+      showErrorAlertWithText('Your certificate could not be verified. Select your DoD ID certificate. Restart browser to try again.');
+      break;
+    default:
+      console.log('Unknown autherror ' + autherror);
+  }
+}
+
 $(document).ready(function() {
   checkAuthStruct(getAuthStruct(true), function(valid) {
     if (!valid) {