Moved the selection box from navigation bar back to footer bar

js/apps/system/aardvark/frontend/css/dbSelectionView.css

@@ -1,12 +1,8 @@
-span.selectDB {
-  top: 6px;
-  left: 210px;
-  position: absolute;
-}
-
 span.selectDB > select {
   line-height: 20px;
   height: 20px;
   width: 150px;
-  padding: 0px;
+  margin: -3px 0px 2px 0px;
+  border-radius: 0px !important;
+  border: 1px solid;
 }

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

@@ -69,10 +69,6 @@
       this.graphView = new window.GraphView({
         collection: window.arangoCollectionsStore
       });
-      this.dbSelectionView = new window.DBSelectionView({
-        collection: window.arangoDatabase,
-        current: window.currentDB
-      });
 
       var self = this;
       $(window).resize(function() {
@@ -343,7 +339,7 @@
     },
 
     handleSelectDatabase: function () {
-      this.dbSelectionView.render($("#selectDB"));
+      this.footerView.handleSelectDatabase();
     },
 
     handleResize: function () {

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

@@ -12,5 +12,9 @@ if (list.length > 1) {
   %>
 </select>
 <%
+} else {
+%>
+  <%=current%>
+<%
 }
 %>

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

@@ -12,6 +12,6 @@
 </div>
 
 <div class="footer-right">
-  <p <%=margin?"style='margin-right:"+margin+"px'":""%>><% if(n) { %>Server: <%=n%> <%=v%>, Database: <%=db%><% } %></p>
+  <p <%=margin?"style='margin-right:"+margin+"px'":""%>><% if(n) { %>Server: <%=n%> <%=v%>, Database: <span id="dbSelect" class="selectDB"></span><% } %></p>
 </div>
 <div class="footer-invisible" id="databaseName"></div>

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

@@ -4,8 +4,6 @@
   "use strict";
   window.DBSelectionView = Backbone.View.extend({
 
-    el: "#dbSelect",
-
     template: templateEngine.createTemplate("dbSelectionView.ejs"),
 
     events: {
@@ -16,9 +14,7 @@
       var self = this;
       this.current = opts.current;
       this.collection.fetch({
-        success: function() {
+        async: false
-          self.render();
-        }
       });
     },
 
@@ -28,13 +24,14 @@
       window.location.replace(url);
     },
 
-    render: function() {
+    render: function(el) {
-      $(this.el).html(this.template.render({
+      this.$el = el;
+      this.$el.html(this.template.render({
         list: this.collection,
         current: this.current.get("name")
       }));
       this.delegateEvents();
-      return $(this.el);
+      return this.el;
     }
   });
 }());

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

@@ -11,6 +11,10 @@
     initialize: function () {
       //also server online check
       var self = this;
+      this.dbSelectionView = new window.DBSelectionView({
+        collection: window.arangoDatabase,
+        current: window.currentDB
+      });
       window.setInterval(function(){
         self.getVersion();
       }, 15000);
@@ -90,6 +94,7 @@
     },
 
     renderVersion: function () {
+      var self = this;
       if (this.system.hasOwnProperty('database') && this.system.hasOwnProperty('name')) {
         $(this.el).html(this.template.render({
           name: this.system.name,
@@ -97,11 +102,7 @@
           database: this.system.database,
           margin: this.resizeMargin
         }));
-       /* 
+        this.dbSelectionView.render($("#dbSelect"));
-            var tag = 'Server: ' + this.system.name + ' ' + this.system.version + 
-          ', Database: ' + this.system.database;
-        $('.footer-right p').html(tag);
-        */
       }
     },
 
@@ -110,7 +111,12 @@
       this.render();
     },
 
+    handleSelectDatabase: function() {
+      this.dbSelectionView.render();
+    },
+
     render: function () {
+      var self = this;
       if (!this.system.version) {
         this.getVersion();
       }
@@ -120,6 +126,7 @@
         database: this.system.database,
         margin: this.resizeMargin
       }));
+      this.dbSelectionView.render($("#dbSelect"));
       return this;
     }
 

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

@@ -18,9 +18,8 @@
     },
 
     handleResize: function (margin) {
-      $('.arango-logo').css('margin-left', margin - 17);
+      $('.arango-logo').css('margin-left', margin - 41);
-      $("#dbSelect").css('margin-left', margin - 17);
+      $('.nav-collapse').css('margin-right', margin + 7);
-      $('.nav-collapse').css('margin-right', margin - 10);
     },
 
 

js/apps/system/aardvark/index.html

@@ -20,7 +20,6 @@
           <div class="arango-nav navbar-inner">
             <div class="container">
               <a class="arango-logo brand navlogo" href="#"><img src="img/logo_arangob_white.gif"/></a>
-              <span id="dbSelect" class="selectDB"></span>
               <div class="nav-collapse arangoNavSwitch" id="navigationBar">
               </div>
             </div>

js/apps/system/aardvark/test/specs/router/routerSpec.js

@@ -15,7 +15,6 @@
       footerDummy,
       documentDummy,
       documentsDummy,
-      databaseDummy,
       sessionDummy,
       graphDummy,
       logsDummy;
@@ -32,7 +31,6 @@
       };
       documentDummy = {};
       documentsDummy = {};
-      databaseDummy = {};
       graphDummy = {
         handleResize: function() {}
       };
@@ -48,7 +46,6 @@
       spyOn(storeDummy, "fetch");
       spyOn(window, "arangoCollections").andReturn(storeDummy);
       spyOn(window, "ArangoSession").andReturn(sessionDummy);
-      spyOn(window, "ArangoDatabase").andReturn(databaseDummy);
       spyOn(window, "arangoDocuments").andReturn(documentsDummy);
       spyOn(window, "arangoDocument").andReturn(documentDummy);
       spyOn(window, "CollectionsView");
@@ -91,7 +88,7 @@
       spyOn(window, "DBSelectionView");
     });
 
-    describe("Initialisation", function() {
+    describe("initialisation", function() {
 
       var r;
 
@@ -135,13 +132,6 @@
         });
       });
 
-      it("should create the dbSelectionView", function() {
-        expect(window.DBSelectionView).toHaveBeenCalledWith({
-          collection: databaseDummy,
-          current: fakeDB
-        });
-      });
-
       it("should fetch the collectionsStore", function() {
         expect(storeDummy.fetch).toHaveBeenCalled();
       });

js/apps/system/aardvark/test/specs/views/dbSelectionViewSpec.js

@@ -25,13 +25,16 @@
         dbCollection.add({name: n});
       });
       fetched = false;
-      spyOn(dbCollection, "fetch").andCallFake(function(opt) {
+      spyOn(dbCollection, "fetch");
-        fetched = true;
-        opt.success();
-      });
       div = document.createElement("div");
       div.id = "dbSelect";
       document.body.appendChild(div);
+      view = new DBSelectionView(
+        {
+          collection: dbCollection,
+          current: current
+        }
+      );
     });
 
     afterEach(function() {
@@ -39,114 +42,48 @@
     });
 
     it("should display all databases ordered", function() {
-
+      view.render($(div));
-      runs(function() {
+      var select = $(div).children()[0],
-        view = new DBSelectionView(
+        childs;
-          {
+      expect(div.childElementCount).toEqual(1);
-            collection: dbCollection,
+      childs = $(select).children();
-            current: current
+      expect(childs.length).toEqual(3);
-          }
+      expect(childs[0].id).toEqual(list[0]);
-        );
+      expect(childs[1].id).toEqual(list[2]);
-      });
+      expect(childs[2].id).toEqual(list[1]);
-
-      waitsFor(function() {
-        return fetched;
-      }, 1000);
-
-      runs(function() {
-        var select = $(div).children()[0],
-          childs;
-        expect(div.childElementCount).toEqual(1);
-        childs = $(select).children();
-        expect(childs.length).toEqual(3);
-        expect(childs[0].id).toEqual(list[0]);
-        expect(childs[1].id).toEqual(list[2]);
-        expect(childs[2].id).toEqual(list[1]);
-      });
     });
 
     it("should select the current db", function() {
-      runs(function() {
+      view.render($(div));
-        view = new DBSelectionView(
+      expect($(div).find(":selected").attr("id")).toEqual(current.get("name"));
-          {
-            collection: dbCollection,
-            current: current
-          }
-        );
-      });
-
-      waitsFor(function() {
-        return fetched;
-      }, 1000);
-
-      runs(function() {
-        expect($(div).find(":selected").attr("id")).toEqual(current.get("name"));
-      });
     });
 
     it("should trigger fetch on collection", function() {
-      runs(function() {
+      view.render($(div));
-        view = new DBSelectionView(
+      expect(dbCollection.fetch).toHaveBeenCalled();
-          {
-            collection: dbCollection,
-            current: current
-          }
-        );
-      });
-
-      waitsFor(function() {
-        return fetched;
-      }, 1000);
-
-      runs(function() {
-        expect(dbCollection.fetch).toHaveBeenCalled();
-      });
     });
 
     it("should trigger a database switch on click", function() {
-      runs(function() {
+      view.render($(div));
-        view = new DBSelectionView(
+      spyOn(dbCollection, "createDatabaseURL").andReturn("switchURL");
-          {
+      spyOn(location, "replace");
-            collection: dbCollection,
+      $("#dbSelectionList").val("second").trigger("change");
-            current: current
+      expect(dbCollection.createDatabaseURL).toHaveBeenCalledWith("second");
-          }
+      expect(location.replace).toHaveBeenCalledWith("switchURL");
-        );
-      });
-      
-      waitsFor(function() {
-        return fetched;
-      }, 1000);
-
-      runs(function() {
-        spyOn(dbCollection, "createDatabaseURL").andReturn("switchURL");
-        spyOn(location, "replace");
-        $("#dbSelectionList").val("second").trigger("change");
-        expect(dbCollection.createDatabaseURL).toHaveBeenCalledWith("second");
-        expect(location.replace).toHaveBeenCalledWith("switchURL");
-      });
     });
 
-    it("should not render if the list has only one element", function() {
+    it("should not render the selection if the list has only one element", function() {
-      runs(function() {
+      var oneCollection = new window.ArangoDatabase();
-        var oneCollection = new window.ArangoDatabase();
+      oneCollection.add({name: current});
-        oneCollection.add({name: current});
+      spyOn(oneCollection, "fetch");
-        spyOn(oneCollection, "fetch").andCallFake(function(opts) {
+      view = new DBSelectionView(
-          fetched = true;
+        {
-          opts.success();
-        });
-        view = new DBSelectionView({
           collection: oneCollection,
           current: current
-        });
+        }
-      });
+      );
-
+      view.render($(div));
-      waitsFor(function() {
+      expect($(div).text().trim()).toEqual("first");
-        return fetched;
-      }, 1000);
-
-      runs(function() {
-        expect($(div).text().trim()).toEqual("");
-      });
     });
   });
 }());