Added initial homepage using the new dataset service.

This homepage implements a sample layout that uses real example
data, but is still a WIP and has a number of empty stub UI
elements.

Change-Id: Icf5afdfd1d078e250bec29af828ea63f78ee0a9e

app/js/controllers/home.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var controllersModule = require('./_index');
+
+/**
+ * @ngInject
+ */
+function HomeCtrl(datasetService) {
+
+  // ViewModel
+  var vm = this;
+
+  datasetService.list().then(function(response) {
+    vm.tempest = response.data.tempest;
+  });
+
+}
+
+controllersModule.controller('HomeCtrl', HomeCtrl);

app/js/directives/tempest-summary.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var directivesModule = require('./_index.js');
+
+/**
+ * @ngInject
+ */
+function tempestSummary() {
+  var controller = function($scope, $attrs, datasetService) {
+    // TODO get extra data here
+    // (may require raw details, or extra metadata inside config.json)
+  };
+
+  return {
+    restrict: 'EA',
+    scope: {
+      'dataset': '='
+    },
+    controller: controller,
+    templateUrl: 'directives/tempest-summary.html'
+  };
+}
+
+directivesModule.directive('tempestSummary', tempestSummary);

app/js/on_config.js

@@ -7,10 +7,9 @@ function OnConfig($stateProvider, $locationProvider, $urlRouterProvider) {
 
   $locationProvider.html5Mode(true);
 
-  $stateProvider
-  .state('Home', {
+  $stateProvider.state('home', {
     url: '/',
-    controller: 'ExampleCtrl as home',
+    controller: 'HomeCtrl as home',
     templateUrl: 'home.html',
     title: 'Home'
   });
@@ -19,4 +18,4 @@ function OnConfig($stateProvider, $locationProvider, $urlRouterProvider) {
 
 }
 
-module.exports = OnConfig;
+module.exports = OnConfig;

app/views/directives/tempest-summary.html

@@ -0,0 +1,18 @@
+<div class="panel panel-default">
+    <div class="panel-heading">
+        <h3 class="panel-title">{{ dataset.name }}</h3>
+    </div>
+    <div class="panel-body">
+        More details go here
+    </div>
+    <div class="panel-footer clearfix">
+        <div class="btn-group pull-right">
+            <a type="button"
+               class="btn btn-default"
+               ui-sref="timeline({datasetId: dataset.id})">Timeline</a>
+            <a type="button"
+               class="btn btn-default"
+               ui-sref="sunburst({datasetId: dataset.id})">Sunburst</a>
+       </div>
+    </div>
+</div>

app/views/home.html

@@ -1,18 +1,37 @@
 
 <header class="bs-header">
     <div class="container">
-        <h1 class="page-header">{{ home.title }}</h1>
+        <h1 class="page-header">Datasets</h1>
     </div>
 </header>
 
 <div class="container">
-    <div class="row">
+    <div class="row" ng-if="!home.tempest.length">
         <div class="col-lg-12">
-            <h3 class="heading -medium">Here is a fancy number served up courtesy of Angular: <span class="number-example">{{ home.number }}</span></h3>
+            <div class="alert alert-danger">
+                No tempest datasets could be loaded!
+            </div>
+        </div>
+    </div>
+    <div class="row" ng-if="!!home.tempest.length">
+        <div class="col-lg-8">
+            <tempest-summary ng-if="home.tempest.length >= 1" dataset="home.tempest[0]"></tempest-summary>
+        </div>
+        <div class="col-lg-4" ng-if="home.tempest.length > 1">
+            <div class="panel panel-default">
+                <div class="panel-heading">
+                    <h3 class="panel-title">Additional Datasets</h3>
+                </div>
 
-            <img src="images/angular.png" height="100" example-directive />
-            <img src="images/gulp.png" height="100" />
-            <img src="images/browserify.png" height="100" />
+                <div class="list-group">
+                    <a class="list-group-item"
+                       ng-repeat="dataset in home.tempest"
+                       ng-if="$index > 0"
+                       ui-sref="timeline({datasetId: dataset.id})">
+                        {{ dataset.name }}
+                    </a>
+                </div>
+            </div>
         </div>
     </div>
 </div>