Added tabs to monitor

jdoerrie · Jul 31, 2014 · 2c8037f · 2c8037f
1 parent 0670e87
commit 2c8037f
Show file tree

Hide file tree

Showing 11 changed files with 4,464 additions and 5,038 deletions.
diff --git a/html/css/bootstrap.css b/html/css/bootstrap.css
diff --git a/html/css/bootstrap.css.map b/html/css/bootstrap.css.map
diff --git a/html/css/bootstrap.min.css b/html/css/bootstrap.min.css
diff --git a/index.htm b/index.htm
diff --git a/js/GameList.js b/js/GameList.js
@@ -22,7 +22,7 @@
     GameList.version = '0.1.0';
     GameList.description = 'Visually display available games on the server.';
 
-    GameList.title = 'Games';
+    //GameList.title = 'Games';
     GameList.className = 'gamelist';
 
     // ## Dependencies

diff --git a/js/Monitor.js b/js/Monitor.js
@@ -3,8 +3,8 @@ function Monitor(node) {
     var stager = new node.Stager();
 
     stager.setOnInit(function() {
-        var button;
-        var channelList, roomList, clientList;
+        var button, tabList, tmpElem;
+        var tabContent, channelList, roomList, clientList;
 
         // Add refresh button:
         button = document.createElement('button');
@@ -17,14 +17,55 @@ function Monitor(node) {
         };
         document.body.appendChild(button);
 
+        // Tabs:
+        tabList = document.createElement('ul');
+        tabList.className = 'nav nav-tabs';
+        tabList.setAttribute('role', 'tablist');
+        document.body.appendChild(tabList);
+
+        tmpElem = document.createElement('li');
+        tmpElem.className = 'active';
+        tmpElem.innerHTML =
+            '<a href="#channels" role="tab" data-toggle="tab">Channels</a>';
+        tabList.appendChild(tmpElem);
+
+        tmpElem = document.createElement('li');
+        tmpElem.innerHTML =
+            '<a href="#clients" role="tab" data-toggle="tab">Clients</a>';
+        tabList.appendChild(tmpElem);
+
+        tmpElem = document.createElement('li');
+        tmpElem.innerHTML =
+            '<a href="#games" role="tab" data-toggle="tab">Games</a>';
+        tabList.appendChild(tmpElem);
+
         // Add widgets:
-        channelList = node.widgets.append('ChannelList');
-        roomList    = node.widgets.append('RoomList');
-        clientList  = node.widgets.append('ClientList');
-        node.widgets.append('GameList');
+        tabContent = document.createElement('div');
+        tabContent.className = 'tab-content';
+        document.body.appendChild(tabContent);
+
+        // Channel and room list:
+        tmpElem = document.createElement('div');
+        tmpElem.className = 'tab-pane active';
+        tmpElem.id = 'channels';
+        tabContent.appendChild(tmpElem);
+        channelList = node.widgets.append('ChannelList', tmpElem);
+        roomList = node.widgets.append('RoomList', tmpElem);
+
+        // Client list and controls:
+        tmpElem = document.createElement('div');
+        tmpElem.className = 'tab-pane';
+        tmpElem.id = 'clients';
+        tabContent.appendChild(tmpElem);
+        clientList = node.widgets.append('ClientList', tmpElem);
+        node.widgets.append('MsgBar', tmpElem);
+        node.widgets.append('StateBar', tmpElem);
 
-        node.widgets.append('MsgBar');
-        node.widgets.append('StateBar');
+        tmpElem = document.createElement('div');
+        tmpElem.className = 'tab-pane';
+        tmpElem.id = 'games';
+        tabContent.appendChild(tmpElem);
+        node.widgets.append('GameList', tmpElem);
     });
 
     stager.addStage({

diff --git a/js/bootbox.min.js b/js/bootbox.min.js