added loader!

client/bower.json

@@ -20,6 +20,8 @@
     "angular-leaflet-directive": "~0.7.7",
     "leaflet": "~0.7.2",
     "codemirror": "~3.19.0",
-    "angular-ui-codemirror": "~0.1.1"
+    "angular-ui-codemirror": "~0.1.1",
+    "spin.js": "~2.0.1",
+    "angular-spinner": "~0.4.0"
   }
 }

client/coffee/controllers/collectionsCtrl.coffee

@@ -1,11 +1,12 @@
 root = this;
 
 
-root.controllers.controller('collectionsCtrl', ['$scope', '$routeParams', '$http', ($scope, $routeParams, $http) ->
+root.controllers.controller('collectionsCtrl', ['$scope', '$routeParams', '$rootScope', 'util', ($scope, $routeParams, $rootScope, util) ->
    $scope.server = $routeParams.server
    $scope.database = $routeParams.database
    $scope.collections = []
-   $http.get("/api/#{ $routeParams.server }/#{ $routeParams.database }/collections").then((res) ->
+   $rootScope.$broadcast("loading")
+   util.get("/api/#{ $routeParams.server }/#{ $routeParams.database }/collections").then((res) ->
         $scope.collections = res.data
     )
     

client/coffee/controllers/databasesCtrl.coffee

@@ -1,10 +1,10 @@
 root = this;
 
 
-root.controllers.controller('databasesCtrl', ['$scope', '$routeParams', '$http', ($scope, $routeParams, $http) ->
+root.controllers.controller('databasesCtrl', ['$scope', '$routeParams', 'util', ($scope, $routeParams, util) ->
     $scope.server = $routeParams.server
     $scope.databases = []
-    $http.get("/api/#{ $routeParams.server }/databases").then((res) ->
+    util.get("/api/#{ $routeParams.server }/databases").then((res) ->
         $scope.databases = res.data
     )
     

client/coffee/controllers/documentCtrl.coffee

@@ -62,7 +62,7 @@ testmongoJsToMongoJSON = () ->
 
 testmongoJsToMongoJSON()
 
-root.controllers.controller('documentCtrl', ['$scope', '$routeParams', '$http', ($scope, $routeParams, $http) ->
+root.controllers.controller('documentCtrl', ['$scope', '$routeParams', 'util', ($scope, $routeParams, util) ->
     $scope.idx = $routeParams.idx
     $scope.doc = {}
     $scope.idx = Number($routeParams.idx) or 1
@@ -83,7 +83,7 @@ root.controllers.controller('documentCtrl', ['$scope', '$routeParams', '$http',
     else if $routeParams.id
         url = "#{ url }/_id/#{$routeParams.id}"
 
-    $http.get(url).then((res) ->
+    util.get(url).then((res) ->
          $scope.doc = res.data.document
          $scope.meta = res.data.meta
     ).catch( (res) ->

client/coffee/controllers/fieldCtrl.coffee

@@ -1,7 +1,7 @@
 root = this;
 
 
-root.controllers.controller('fieldCtrl', ['$scope', '$routeParams', '$http', ($scope, $routeParams, $http) ->
+root.controllers.controller('fieldCtrl', ['$scope', '$routeParams', 'util', ($scope, $routeParams, util) ->
     $scope.idx = $routeParams.idx
     $scope.field = $routeParams.field
     $scope.fields = []
@@ -17,7 +17,7 @@ root.controllers.controller('fieldCtrl', ['$scope', '$routeParams', '$http', ($s
     url  = "/api/#{ $routeParams.server }/#{ $routeParams.database }/#{ $routeParams.collection }"
     url = "#{ url }/_id/#{$routeParams.id}"
 
-    $http.get(url).then((res) ->
+    util.get(url).then((res) ->
          $scope.doc = res.data.document
          $scope.value = $scope.doc[$scope.field]
          $scope.fields = _.keys($scope.doc)

client/coffee/controllers/geojsonmapCtrl.coffee

@@ -42,7 +42,7 @@ transformListOfGeoJsonToGeometryCollection = (resData, routeParams) ->
     return ret
     
 
-root.controllers.controller('geojsonmapCtrl', ['$scope', '$routeParams', '$location', '$http', ($scope, $routeParams, $location, $http) ->
+root.controllers.controller('geojsonmapCtrl', ['$scope', '$routeParams', '$location', 'util', ($scope, $routeParams, $location, util) ->
     $scope.geojson = {}
     $scope.geojsonData = {}
     $scope.idx = Number($routeParams.idx)
@@ -75,7 +75,7 @@ root.controllers.controller('geojsonmapCtrl', ['$scope', '$routeParams', '$locat
     
     $scope.initSingleDocument = ()->
         url = getSingleDataUrl($routeParams)
-        $http.get(url).then (res) ->
+        util.get(url).then (res) ->
             geojson = res.data.document[$routeParams.key]
             if not geojson.properties
                 geojson.properties = {}
@@ -88,7 +88,7 @@ root.controllers.controller('geojsonmapCtrl', ['$scope', '$routeParams', '$locat
 
     $scope.initAllDocuments = () ->
         url = getAllDataUrl($routeParams)
-        $http.get(url).then (res) ->
+        util.get(url).then (res) ->
             $scope.meta = res.data.meta
             $scope.geojsonData =
                 data: transformListOfGeoJsonToGeometryCollection(res.data, $routeParams)

client/coffee/controllers/keyStatCtrl.coffee

@@ -6,14 +6,14 @@ humanValueOfStatisticalAbreviation =
     var: "variance"
 
 
-root.controllers.controller('keyStatCtrl', ['$scope', '$routeParams', '$http', ($scope, $routeParams, $http) ->
+root.controllers.controller('keyStatCtrl', ['$scope', '$routeParams', 'util', ($scope, $routeParams, util) ->
     $scope.name = "didier!"
     $scope.stats = []
     
     url  = "/api/#{ $routeParams.server }/#{ $routeParams.database }/#{ $routeParams.collection }"
     url = "#{ url }/stats/#{$routeParams.key}"
 
-    $http.get(url).then((res) ->
+    util.get(url).then((res) ->
         for key, val of res.data
             $scope.stats.push({name: humanValueOfStatisticalAbreviation[key], value: val })
     )

client/coffee/controllers/serversCtrl.coffee

@@ -1,9 +1,9 @@
 root = this;
 
 
-root.controllers.controller('serversCtrl', ['$scope', '$http', ($scope, $http) ->
+root.controllers.controller('serversCtrl', ['$scope', 'util', ($scope, util) ->
     $scope.servers = []
-    $http.get("/api/servers").then((res) ->
+    util.get("/api/servers").then((res) ->
         $scope.servers = res.data
     )
     

client/coffee/controllers/topBarCtrl.coffee

@@ -5,6 +5,9 @@ joinArray = (a, b)->
     return a
 
 root.controllers.controller('topBarCtrl', ['$scope', '$location', ($scope, $location) ->
+    
+    $scope.loading = false
+    
     $scope.$on('$routeChangeSuccess', (next, current) ->
         $scope.path = _.filter($location.path().split("/"), (s) -> s)
         if $scope.path[5] == "query"
@@ -23,4 +26,9 @@ root.controllers.controller('topBarCtrl', ['$scope', '$location', ($scope, $loca
                 ret += "/#{ $scope.path[4] }"
             return ret
     )
+    $scope.$on "loading", ()->
+        $scope.loading = true
+    
+    $scope.$on "loadingFinished", ()->
+        $scope.loading = false
  ])

client/coffee/services.coffee

@@ -0,0 +1,14 @@
+root = this
+
+root.services.factory('util', ['$http', '$rootScope', ($http, $rootScope)->
+    service = 
+        get: (params...) ->
+            $rootScope.$broadcast("loading")
+            return $http.get(params...).
+            finally( () ->
+                $rootScope.$broadcast("loadingFinished")
+            )
+        
+    return service
+
+]);

client/coffee/vultureApp.coffee

@@ -4,6 +4,7 @@ root = this;
 angular.module('vulture', [
   'ngRoute'
   'ui.codemirror'
+  'angularSpinner'
   'leaflet-directive'
   'vulture.filters'
   'vulture.services'

client/index.html

@@ -21,13 +21,18 @@
 
 </head>
 <body>
+    <div ng-controller="topBarCtrl">
         <div class="row">
             <div class="large-12 columns">
                 <h3 style="font-family: 'Rock Salt', cursive;">
-                <img src="images/vulture.svg" width="50px" style="margin-right: 100px; "> Vulture</h3>
+                    <img src="images/vulture.svg" width="50px" style="margin-right: 100px; "> Vulture
+                    <span style="position: absolute;left: 40px; top: 45px; z-index:-1;" ng-show="loading">
+                        <span us-spinner="{radius:20, width:8, length: 16}"></span>
+                    </span>
+                </h3>
             </div>
         </div>
-    <div class="row" ng-controller="topBarCtrl">
+        <div class="row" >
             <div class="large-12 columns">
                 <ul class="breadcrumbs">
                     <li ng-repeat="p in path" ng-class="{current: $last, unavailable: getHistoryUrl($index)== ''}">
@@ -36,6 +41,7 @@
                 </ul>
             </div>
         </div>
+    </div>
     
     <div ng-view></div>
   
@@ -47,12 +53,15 @@
     <script src="bower_components/foundation/js/foundation.js"></script>
     <script src="bower_components/angular-route/angular-route.js"></script>
     <script src="bower_components/angular-leaflet-directive/dist/angular-leaflet-directive.js"></script>
+    <script src="bower_components/spin.js/spin.js"></script>
+    <script src="bower_components/angular-spinner/angular-spinner.js"></script>
     <script type="text/javascript" src="bower_components/angular-ui-codemirror/ui-codemirror.js"></script>
 
     
       
     <script src="js/vultureApp.js"></script>
     <script src="js/filters.js"></script>
+    <script src="js/services.js"></script>
     <script src="js/controllers/homeCtrl.js"></script>
     <script src="js/controllers/serversCtrl.js"></script>
     <script src="js/controllers/databasesCtrl.js"></script>

params.yml

@@ -10,7 +10,7 @@ Port: 8000
 #  The address where the service will run.  If you wish to run it on your computer, you
 #  should use `localhost`.  If you wish to share the service on your local network, you
 #  should use `0.0.0.0`
-ServingAddress: localhost
+ServingAddress: 0.0.0.0
 
 #  The list of mongo servers.  Each server is an object with a field *name* that will
 #  be shown in the web user interface and a *url* field that points to the mongo server