Feature/loading (#66)

* [ux] stateless search * [ux] tell the user when we're loading
nexacenter · Apr 22, 2016 · b090493 · b090493
1 parent 7ca9ed1
commit b090493
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 41 deletions.
diff --git a/lib/client/app.js b/lib/client/app.js
@@ -67,56 +67,45 @@ angular.module("roarmap-h2020-view", ["ngRoute"])
         };
     })
 
-    .service("roarmapSearch", function (roarmapLoader) {
-
-        // TODO: Here we should probably also store the searched
-        // terms such that one also see them when he returns into
-        // the search tab rather than seeing an empty box.
-        var current = null;
-        return {
-
-            beginSearch: function (terms, callback) {
-                current = [];
-                terms = terms.toLowerCase();
-                roarmapLoader(function (error, institutions) {
-                    if (error) {
-                        callback(error);
-                        return;
-                    }
-
-                    // TODO: if performance becomes a bottleneck we could
-                    // create once an index and then use such index
-                    institutions.forEach(function (entry) {
-                        if (entry.title.toLowerCase().indexOf(terms) >= 0) {
-                            current.push(entry);
-                        }
-                    });
-                    callback(null, current);
-                });
-            },
-
-            getCurrentSearch: function () {
-                return current;
-            },
-        };
-    })
-
     // TODO: all the following code should be adapted not to throw
     // errors but rather to write somewhere what went wrong. Also
     // indication that processing is ongoing would be a great thing.
 
-    .controller("SearchController", function ($scope, roarmapSearch) {
+    .controller("MainController", function ($scope, roarmapLoader) {
+        $scope.g = {
+            is_loaded: false
+        };
+        $scope.$on('$viewContentLoaded', function () {
+            roarmapLoader(function (error, institutions) {
+                if (error) {
+                    throw error;
+                }
+                $scope.g.is_loaded = true;
+            });
+        });
+    })
+
+    .controller("SearchController", function ($scope, roarmapLoader) {
         $scope.g = {
             terms: "",
-            result: roarmapSearch.getCurrentSearch(),
+            result: null
         };
         $scope.search = function () {
-            roarmapSearch.beginSearch($scope.g.terms,
-                                      function (error, result) {
+            current = [];
+            terms = $scope.g.terms.toLowerCase();
+            roarmapLoader(function (error, institutions) {
                 if (error) {
                     throw error;
                 }
-                $scope.g.result = result;
+
+                // TODO: if performance becomes a bottleneck we could
+                // create once an index and then use such index
+                institutions.forEach(function (entry) {
+                    if (entry.title.toLowerCase().indexOf(terms) >= 0) {
+                        current.push(entry);
+                    }
+                });
+                $scope.g.result = current;
             });
         };
     })

diff --git a/static/index.html b/static/index.html
@@ -10,7 +10,7 @@
   </head>
 
   <body ng-app="roarmap-h2020-view">
-    <div class="container">
+    <div class="container" ng-controller="MainController">
 
       <div class="hidden-sm hidden-xs">
         <a href="https://github.com/nexacenter/roarmap-h2020-view">
@@ -26,7 +26,8 @@
           <img src="img/pasteur.png" alt="Pasteur4oa logo" class="center"
                id="pasteur-logo" />
         </a>
-        View H2020 compliancy of ROARMAP policies.
+        View H2020 compliancy of
+          <a href="https://roarmap.eprints.org/">ROARMAP</a> policies.
       </div>
 
       <div>
@@ -38,6 +39,11 @@
       </div>
 
       <hr>
+      <div class="center">
+        <mark ng-show="!g.is_loaded" class="lead">
+          Loading ROARMAP data... please wait...
+        </mark>
+      </div>
       <div class="row" ng-view></div>
     </div>