nrkno · oyvindholmstad · Nov 21, 2016 · Nov 14, 2016
diff --git a/Readme.md b/Readme.md
@@ -71,23 +71,38 @@ var myWidget = {
     fieldType: "boolean"
  }
 ```
+
+#### Tabs and rows
 To make the widget available you need to add it to a row in the dashboard. A row has an array of widgets. A row is defined like this:
 ```
-var myRow = {
+var myFirstRow = {
     title: "My widgets",
-    widgets: [myWidget]
+    widgets: [myWidget, myOtherWidget]
 }
 ```
 
-The rows in turn need to be included in the dashboardConfig-object which is read by the Angular controller:
+The rows in turn need to be included in the dashboardConfig-object. The rows can be added in two different ways, depending on if you need multiple tabs (pages) in your dashboard or not.
+
+If you only want one page, you can add the rows directly in the `rows`-field.
 ```
 var dashboardConfig = {
     title: "My Dashboard",
-    rows: [myRow]
+    rows: [myRow, mySecondRow]
 };
 ```
 
+If you have so many widgets that you need multiple pages, define an array of row-arrays in the `tabs`-field:
+```
+var dashboardConfig = {
+    title: "My Dashboard",
+    tabs: [
+      [myFirstRow, mySecondRow],
+      [pageTwoRow, pageTwoSecondRow]
+    ]
+};
+```
 
+If both `tabs` and `rows` are present, `tabs` will be used.
 
 ### Setup datasources
 Datasources are defined in `config/serverconfig.js`. Each datasource is defined as a json-object with the following fields:

diff --git a/app.js b/app.js
@@ -36,6 +36,7 @@ app.get('/test', function(req, res) {
   res.send(JSON.stringify({
     astring: 'Hello world' + Math.round(Math.random() * 100),
     number: Math.round(Math.random() * 100),
+    bigNumber: Math.round(Math.random() * 10000),
     boolean: true,
     imgurl: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150',
     piechart: {

diff --git a/config/appconfig.js b/config/appconfig.js
@@ -10,5 +10,6 @@ var datasourceDefaults = {
 module.exports = {
   datasourceDefaults: datasourceDefaults,
   widgetDefaults: widgetDefaults,
-  enabledPlugins: ['teamcity', 'rabbitmq', 'simple', 'iframe', 'azure-servicebus', 'image', 'chart']
+  enabledPlugins: ['teamcity', 'rabbitmq', 'simple', 'iframe', 'azure-servicebus', 'image', 'chart'],
+  tabCycleInterval: 7000
 };
diff --git a/config/clientconfig.template.js b/config/clientconfig.template.js
@@ -42,9 +42,37 @@ var row2 = {
   }]
 };
 
+var row3 = {
+  title: 'This',
+  widgets: [
+    {
+      plugin: 'simple',
+      datasourceId: 'simple1',
+      displayName: 'A big number on a dashboard',
+      fieldName: 'bigNumber',
+      fieldType: 'number'
+    },
+    {
+      plugin: 'chart',
+      datasourceId: 'chart1',
+      chartType: 'pie',
+      width: '320px',
+      height: '320px',
+      options: {
+        displayName: 'Animals',
+        valueField: 'piechart dataset',
+        labelField: 'piechart labels'
+      }
+    }
+  ]
+};
+
 var dashboardConfig = {
   title: 'Odashboard 1.0',
-  rows: [row1, row2]
+  tabs: [
+    [row1, row2],
+    [row3]
+  ]
 };
 
 module.exports = dashboardConfig;
diff --git a/public/css/app.css b/public/css/app.css
@@ -36,7 +36,7 @@ a {
     height: 100%;
     margin-left: auto;
     margin-right: auto;
-    margin-top: 70px;
+    margin-top: 30px;
 }
 
 .dashboardRow {
@@ -138,6 +138,11 @@ iframe {
     border: 0;
 }
 
+.tabsNav {
+  float: right;
+  cursor: pointer;
+}
+
 
 /* ----------- 1600x1200 ----------- */
 @media screen

diff --git a/src/controllers.js b/src/controllers.js
@@ -6,7 +6,30 @@ var _ = require('lodash');
 var myController = app.controller('PluginController', function($rootScope, $scope, $interval, $timeout, $http, $location, $sce, socket) {
   $rootScope.title = clientConfig.title;
   var transformedConfig = transformConfig(clientConfig);
-  $scope.rows = parseRows(transformedConfig, $interval, $http, socket);
+  $scope.tabs = parseRows(clientConfig, $interval, $http, socket);
+
+  // Tab handling
+  var tabCycle;
+  $scope.isCycling = false;
+  $scope.tabIndex = 0;
+  $scope.hasTabs = function () { return $scope.tabs.length > 1; };
+  console.log($scope.hasTabs());
+  $scope.nextTab = function () { $scope.tabIndex = ($scope.tabIndex + 1) % $scope.tabs.length; };
+  $scope.prevTab = function () { $scope.tabIndex = ($scope.tabIndex - 1) % $scope.tabs.length; };
+  $scope.pauseTabCycle = function () {
+    if (!angular.isDefined(tabCycle)) return;
+    $interval.cancel(tabCycle);
+    $scope.isCycling = false;
+    tabCycle = undefined;
+  };
+  $scope.startTabCycle = function () {
+    if (angular.isDefined(tabCycle)) return;
+    $scope.isCycling = true;
+    tabCycle = $interval(function() {
+      $scope.nextTab();
+    }, config.tabCycleInterval);
+  };
+
   $scope.trustAsResourceUrl = $sce.trustAsResourceUrl;
 });
 
@@ -33,12 +56,20 @@ function requireModule(pluginName) {
 }
 
 function transformConfig(clientConfig) {
-  _.each(clientConfig.rows, function (row) {
-    _.each(row.widgets, function(widget) {
-      _.each(config.widgetDefaults, function (defaultValue, key) {
-        if (widget[key] === undefined) {
-          widget[key] = defaultValue;
-        }
+
+  // Backwards compatibility with old
+  if (clientConfig.tabs == undefined && clientConfig.rows != undefined) {
+    clientConfig.tabs = [clientConfig.rows];
+  }
+
+  _.each(clientConfig.tabs, function (tab) {
+    _.each(tab, function (row) {
+      _.each(row.widgets, function(widget) {
+        _.each(config.widgetDefaults, function (defaultValue, key) {
+          if (widget[key] === undefined) {
+            widget[key] = defaultValue;
+          }
+        });
       });
     });
   });
@@ -47,21 +78,25 @@ function transformConfig(clientConfig) {
 }
 
 function parseRows(clientConfig, $interval, $http, socket) {
-  var rows = [];
-  _.each(clientConfig.rows, function (row) {
-    var widgets = [];
-    _.each(row.widgets, function(widget) {
-      var plugin = pluginModules[widget.plugin];
-      if (plugin !== undefined)
-          {
-        var newWidget = plugin.createWidget(widget, socket);
-        widgets.push(newWidget);
-      }
+  var tabs = [];
+  _.each(clientConfig.tabs, function (tab) {
+    var rows = [];
+    _.each(tab, function (row) {
+      var widgets = [];
+      _.each(row.widgets, function(widget) {
+        var plugin = pluginModules[widget.plugin];
+        if (plugin !== undefined)
+            {
+          var newWidget = plugin.createWidget(widget, socket);
+          widgets.push(newWidget);
+        }
+      });
+      rows.push(createRow(row.title, widgets));
     });
-    rows.push(createRow(row.title, widgets));
+    tabs.push(createTab(tab.title, rows));
   });
 
-  return rows;
+  return tabs;
 }
 
 function createRow(title, widgets) {
@@ -71,4 +106,11 @@ function createRow(title, widgets) {
   };
 }
 
+function createTab(title, rows) {
+  return {
+    title: title,
+    rows: rows
+  };
+}
+
 module.exports = myController;
diff --git a/validators/clientConfigValidator.js b/validators/clientConfigValidator.js
@@ -6,17 +6,25 @@ var config = require('../config/appconfig');
 var pluginValidators = [];
 
 function validateClientConfig() {
-  loadPluginValidators();
+  loadPluginValidators(config.enabledPlugins);
+  shouldHaveTabsOrRows(clientconfig);
   console.log('Validating widgets in client config');
-  _.each(clientconfig.rows, function (row) {
-    _.each(row.widgets, function (widget) {
-      validateWidget(widget);
+
+  if (clientconfig.tabs) {
+    _.each(clientconfig.tabs, function (tab) {
+      _.each(tab, function (row) {
+        validateRow(row);
+      });
     });
-  });
+  } else {
+    _.each(clientconfig.rows, function (row) {
+      validateRow(row);
+    });
+  }
 }
 
-function loadPluginValidators() {
-  _.each(config.enabledPlugins, function (pluginName) {
+function loadPluginValidators(enabledPlugins) {
+  _.each(enabledPlugins, function (pluginName) {
     try {
       var pluginValidator = require('../src/plugins/' + pluginName + '/validator', function () { });
       pluginValidators[pluginName] = pluginValidator;
@@ -26,6 +34,12 @@ function loadPluginValidators() {
   });
 }
 
+function validateRow(row) {
+  _.each(row.widgets, function (widget) {
+    validateWidget(widget);
+  });
+}
+
 function validateWidget(widget) {
   shouldHavePlugin(widget);
 
@@ -40,5 +54,14 @@ function shouldHavePlugin(widget) {
     'Plugin not defined for datasource with datsourceId %s', widget.datasourceId);
 }
 
+function shouldHaveTabsOrRows(clientConfig) {
+  if (clientConfig.tabs === undefined) {
+    console.log('Warning: clientconfig.tabs not defined. Assuming clientconfig.rows as only tab.');
+    assert(clientConfig.rows != undefined, 'Critical error. No rows or tabs in client config.');
+  } else if (clientConfig.tabs) {
+    assert(clientConfig.tabs.constructor === Array, 'Tabs is not an array of rows.');
+  }
+}
+
 var exports = module.exports = {};
 exports.validateClientConfig = validateClientConfig;
diff --git a/views/layout.ejs b/views/layout.ejs
@@ -1,48 +1,58 @@
 <!doctype html>
 <html lang="en" ng-app="odashboard">
-    <head>
-        <meta charset="utf-8">
-        <title ng-bind="title"></title>
 
-        <link rel="stylesheet" href="css/app.css"/>
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<head>
+    <meta charset="utf-8">
+    <title ng-bind="title"></title>
 
+    <link rel="stylesheet" href="css/app.css" />
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
-        <!-- odashboard: plugin css -->
-        <% for(var i=0; i<plugins.length; i++) {%>
-          <link rel="stylesheet" href="plugins/<%= plugins[i] %>/<%= plugins[i] %>.css"/>
-        <% } %>
 
-    </head>
-<body>
+    <!-- odashboard: plugin css -->
+    <% for(var i=0; i<plugins.length; i++) {%>
+        <link rel="stylesheet" href="plugins/<%= plugins[i] %>/<%= plugins[i] %>.css" />
+        <% } %>
 
-<div class="contentWrapper">
-  <div id="wrapper" ng-controller="PluginController">
-      <div class="dashboardRow" ng-repeat="row in rows">
+</head>
 
-          <div class="rowHeader">
-              <h2 class="rotate">{{row.title}}</h2>
+<body ng-controller="PluginController">
+  <div ng-show="hasTabs()">
+    <div class="tabsNav">
+      Tabs: <a ng-click="prevTab()">Prev</a> - <a ng-show="isCycling" ng-click="pauseTabCycle()">Pause</a> <a ng-hide="isCycling" ng-click="startTabCycle()">Play</a> - <a ng-click="nextTab()">Next</a>
+    </div>
+    <div style="clear: both;"></div>
+  </div>
+    <div class="contentWrapper">
+        <div id="wrapper">
+          <div ng-repeat="tab in tabs">
+            <div class="tabWrapper" ng-show="$index == tabIndex">
+              <div class="dashboardRow" ng-repeat="row in tab.rows">
+                    <div class="rowHeader">
+                        <h2 class="rotate">{{row.title}}</h2>
+                    </div>
+                    <ul class="rowList">
+                        <li ng-repeat="widget in row.widgets" ng-switch on="widget.plugin" class="rowBlock" style="width: {{widget.width}};
+                     height: {{widget.height}};">
+                            <teamcitydir ng-switch-when='teamcity'></teamcitydir>
+                            <rabbitmqdir ng-switch-when='rabbitmq'></rabbitmqdir>
+                            <simpledir ng-switch-when='simple'></simpledir>
+                            <imagedir ng-switch-when='image'></imagedir>
+                            <iframedir ng-switch-when='iframe'></iframedir>
+                            <azureservicebusdir ng-switch-when='azure-servicebus'></azureservicebusdir>
+                            <chartdir ng-switch-when='chart'></chartdir>
+                        </li>
+                    </ul>
+                </div>
+            </div>
           </div>
 
-          <ul class="rowList">
-              <li ng-repeat="widget in row.widgets" ng-switch on="widget.plugin" class="rowBlock"
-              style="width: {{widget.width}};
-                     height: {{widget.height}};">
-                  <teamcitydir ng-switch-when='teamcity'></teamcitydir>
-                  <rabbitmqdir ng-switch-when='rabbitmq'></rabbitmqdir>
-                  <simpledir ng-switch-when='simple'></simpledir>
-                  <imagedir ng-switch-when='image'></imagedir>
-                  <iframedir ng-switch-when='iframe'></iframedir>
-                  <azureservicebusdir ng-switch-when='azure-servicebus'></azureservicebusdir>
-                  <chartdir ng-switch-when='chart'></chartdir>
-              </li>
-          </ul>
-      </div>
-  </div>
-</div>
+        </div>
+    </div>
 
-<script src="socket.io/socket.io.js"></script>
-<script src="bundle.js"></script>
+    <script src="socket.io/socket.io.js"></script>
+    <script src="bundle.js"></script>
 
 </body>
+
 </html>