added progess indicator view

js/apps/system/aardvark/frontend/html/body.html.part

@@ -23,6 +23,9 @@
   <div id="modalPlaceholder">
   </div>
 
+  <div id="progressPlaceholder" style="display:none">
+  </div>
+
   </div>
 
   <footer class="footer">

js/apps/system/aardvark/frontend/js/routers/router.js

@@ -58,6 +58,7 @@
     initialize: function () {
       // This should be the only global object
       window.modalView = new window.ModalView();
+      window.progressView = new window.ProgressView();
       var self = this;
 
       this.currentDB = new window.CurrentDatabase();
@@ -95,6 +96,14 @@
         self.handleResize();
       });
       window.checkVersion();
+
+      $(document).ajaxStart(function () {
+        window.progressView.show("Loading...");
+      });
+
+      $(document).ajaxComplete(function () {
+        window.progressView.hide();
+      });
     },
 
     checkUser: function () {

js/apps/system/aardvark/frontend/js/templates/documentsView.ejs

@@ -20,16 +20,16 @@
         <span class="icon_arangodb_import" title="Upload documents from JSON file"></span>
       </a>
     </li>
-    <li class="enabled">
-      <a id="filterCollection" class="headerButton">
-        <span class="icon_arangodb_filter" title="Filter collection"></span>
-      </a>
-    </li>
     <li class="enabled">
       <a id="indexCollection" class="headerButton">
         <span class="icon_arangodb_checklist" title="Index collection"></span>
       </a>
     </li>
+    <li class="enabled" style="margin-right: 15px">
+      <a id="filterCollection" class="headerButton">
+        <span class="icon_arangodb_filter" title="Filter collection"></span>
+      </a>
+    </li>
   </ul>
 
   </div>

js/apps/system/aardvark/frontend/js/templates/progressBase.ejs

@@ -0,0 +1,8 @@
+<script id="progressBase.ejs" type="text/template">
+  <div class="progress-view">
+    <p class="progress-content">
+      <i class="fa fa-spinner fa-spin"></i>
+    </p>
+    <div class="progress-message"></div>
+  </div>
+</script>

js/apps/system/aardvark/frontend/js/views/progressView.js

@@ -0,0 +1,27 @@
+/*jslint indent: 2, nomen: true, maxlen: 100, vars: true, white: true, plusplus: true */
+/*global Backbone, $, window, setTimeout, Joi, _ */
+/*global templateEngine*/
+
+(function () {
+  "use strict";
+
+  window.ProgressView = Backbone.View.extend({
+
+    template: templateEngine.createTemplate("progressBase.ejs"),
+    el: "#progressPlaceholder",
+
+    initialize: function() {
+    },
+
+    show: function(msg) {
+      $(this.el).html(this.template.render({}));
+      $(".progress-message").text(msg);
+      $(this.el).fadeIn();
+    },
+
+    hide: function() {
+      $(this.el).fadeOut();
+    }
+
+  });
+}());

js/apps/system/aardvark/frontend/scss/_progressView.scss

@@ -0,0 +1,33 @@
+#progressPlaceholder {
+  top: 0;
+  bottom:0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0,0,0,0.6);
+  position: fixed;
+  z-index: 9999;
+}
+
+.progress-view {
+  color: white;
+  width:300px;
+  height:200px;
+  position:absolute;
+  left:50%;
+  top:50%;
+  margin:-100px 0 0 -150px;
+
+  .progress-content {
+    margin-left: 90px;
+    margin-top: 30px;
+
+    .fa-spinner {
+      font-size: 100pt;
+    }
+
+  }
+
+  .progress-message {
+    text-align: center;
+  }
+}

js/apps/system/aardvark/frontend/scss/generated.css

@@ -5843,6 +5843,31 @@ input.gv-radio-button {
 .jsoneditor .outer .tree > table > tbody > tr:first-of-type {
   visibility: hidden; }
 
+#progressPlaceholder {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  position: fixed;
+  z-index: 9999; }
+
+.progress-view {
+  color: white;
+  width: 300px;
+  height: 200px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: -100px 0 0 -150px; }
+  .progress-view .progress-content {
+    margin-left: 90px;
+    margin-top: 30px; }
+    .progress-view .progress-content .fa-spinner {
+      font-size: 100pt; }
+  .progress-view .progress-message {
+    text-align: center; }
+
 .hotkeysList .hotkeysLabel {
   clear: both;
   color: #000;

js/apps/system/aardvark/frontend/scss/style.scss

@@ -63,6 +63,8 @@
 @import 'screenSizes';
 // document view
 @import 'documentView';
+// progress view
+@import 'progressView';
 
 // screen hotkeys
 @import 'hotkeys';

js/apps/system/aardvark/manifest.json

@@ -57,6 +57,7 @@
         "frontend/js/templates/notificationView.ejs",
         "frontend/js/templates/queryView.ejs",
         "frontend/js/templates/shellView.ejs",
+        "frontend/js/templates/progressBase.ejs",
         "frontend/js/templates/statisticBarView.ejs",
         "frontend/js/templates/testView.ejs",
         "frontend/js/templates/userBarView.ejs",
@@ -162,6 +163,7 @@
         "frontend/js/views/testView.js",
         "frontend/js/views/userBarView.js",
         "frontend/js/views/userManagementView.js",
+        "frontend/js/views/progressView.js",
         "frontend/js/routers/router.js",
         "frontend/js/routers/versionCheck.js",
         "frontend/js/routers/startApp.js"