o Adding a webapp.

o Using di.js as dependency injection framework.

6 files changed, 206 insertions, 0 deletions

diff --git a/web/app/DillerRpc.js b/web/app/DillerRpc.js
new file mode 100644
index 0000000..a0c20fb
--- /dev/null
+++ b/web/app/DillerRpc.js
@@ -0,0 +1,41 @@
+function DillerRpc($http) {
+  function getDevices() {
+    var req = {};
+    req.method = 'get';
+    req.url = '/api/device';
+    return $http(req);
+  }
+
+  function getDevice(deviceId) {
+    var req = {};
+    req.method = 'get';
+    req.url = '/api/device/:deviceId';
+    req.url = req.url.replace(/:deviceId/, deviceId);
+    return $http(req);
+  }
+
+  function getValues(propertyId) {
+    var req = {};
+    req.method = 'get';
+    req.url = '/api/property/:propertyId/values';
+    req.url = req.url.replace(/:propertyId/, propertyId);
+    return $http(req);
+  }
+
+  return {
+    getDevices: getDevices,
+    getDevice: getDevice,
+    getValues: getValues
+  };
+}
+
+DillerRpcResolve = {};
+DillerRpcResolve.getDevices = function(DillerRpc) {
+  return DillerRpc.getDevices();
+};
+DillerRpcResolve.getDevice = function(DillerRpc, $route) {
+  return DillerRpc.getDevice($route.current.params.deviceId);
+};
+DillerRpcResolve.getValues = function(DillerRpc, $route) {
+  return DillerRpc.getValues($route.current.params.propertyId);
+};
diff --git a/web/app/app.js b/web/app/app.js
new file mode 100644
index 0000000..cd14ae5
--- /dev/null
+++ b/web/app/app.js
@@ -0,0 +1,60 @@
+(function () {
+  function FrontPageController(devices) {
+    var ctrl = this;
+
+    ctrl.devices = devices.data.devices;
+  }
+
+  function DeviceController(device) {
+    var ctrl = this;
+
+    ctrl.device = device.data.device;
+  }
+
+  function PropertyController($route, device, values) {
+    var ctrl = this;
+
+    ctrl.device = device.data.device;
+    ctrl.property = _.find(ctrl.device.properties, {id: $route.current.params.propertyId});
+    ctrl.values = values.data.values;
+  }
+
+  function config($routeProvider, $locationProvider) {
+    $routeProvider
+      .when('/', {
+        controller: FrontPageController,
+        controllerAs: 'ctrl',
+        templateUrl: '/app/templates/front-page.html',
+        resolve: {
+          devices: DillerRpcResolve.getDevices
+        }
+      })
+      .when('/device/:deviceId', {
+        controller: DeviceController,
+        controllerAs: 'ctrl',
+        templateUrl: '/app/templates/device.html',
+        resolve: {
+          device: DillerRpcResolve.getDevice
+        }
+      })
+      .when('/device/:deviceId/property/:propertyId', {
+        controller: PropertyController,
+        controllerAs: 'ctrl',
+        templateUrl: '/app/templates/property.html',
+        resolve: {
+          device: DillerRpcResolve.getDevice,
+          values: DillerRpcResolve.getValues
+        }
+      })
+      .otherwise({
+        redirectTo: '/'
+      });
+
+    //$locationProvider.html5Mode(true);
+  }
+
+  angular
+    .module('Diller', ['ngRoute'])
+    .config(config)
+    .service('DillerRpc', DillerRpc);
+})();
diff --git a/web/app/templates/device.html b/web/app/templates/device.html
new file mode 100644
index 0000000..ae028b5
--- /dev/null
+++ b/web/app/templates/device.html
@@ -0,0 +1,21 @@
+<div class="container">
+
+  <h1>
+    {{ctrl.device.key}}
+    <small class="text-muted">device</small>
+  </h1>
+
+  <ul>
+    <li>Created: {{ctrl.device.created_timestamp | date}}</li>
+    <li>Name: {{ctrl.property.name}}</li>
+    <li>Description: {{ctrl.property.description}}</li>
+  </ul>
+
+  <h3>Properties</h3>
+
+  <ul>
+    <li ng-repeat="p in ctrl.device.properties | orderBy:'key'">
+      <a href="#/device/{{ctrl.device.id}}/property/{{p.id}}">{{p.key}}</a>
+    </li>
+  </ul>
+</div>
diff --git a/web/app/templates/front-page.html b/web/app/templates/front-page.html
new file mode 100644
index 0000000..1846dea
--- /dev/null
+++ b/web/app/templates/front-page.html
@@ -0,0 +1,24 @@
+<div class="container">
+
+  <h1>
+    Diller
+    <small class="text-muted">All your sensor data are belong to us</small>
+  </h1>
+
+  <h2>Devices</h2>
+
+  <table>
+    <thead>
+    <tr>
+      <th>Key</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr ng-repeat="d in ctrl.devices | orderBy:'key'">
+      <td>
+        <a href="#/device/{{d.id}}">{{d.key}}</a>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/web/app/templates/property.html b/web/app/templates/property.html
new file mode 100644
index 0000000..65a66e8
--- /dev/null
+++ b/web/app/templates/property.html
@@ -0,0 +1,36 @@
+<div class="container">
+
+  <h1>
+    <a href="#/device/{{ctrl.device.id}}">{{ctrl.device.key}}</a>
+    <small class="muted">device</small>
+  </h1>
+
+  <h2>
+    {{ctrl.property.key}}
+    <small class="muted">property</small>
+  </h2>
+
+  <ul>
+    <li>Created: {{ctrl.property.created_timestamp | date}}</li>
+    <li>Name: {{ctrl.property.name}}</li>
+    <li>Description: {{ctrl.property.description}}</li>
+  </ul>
+
+  <h3>Latest Values</h3>
+
+  <table class="table">
+    <thead>
+    <tr>
+      <th>Timestamp</th>
+      <th>Value</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr ng-repeat="v in ctrl.values">
+      <td>{{v.timestamp | date:'medium'}}</td>
+      <td>{{v.value}}</td>
+    </tr>
+    </tbody>
+  </table>
+
+</div>
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..b591e55
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+
+  <script src="bower_components/jquery/dist/jquery.js" type="application/javascript"></script>
+
+  <script src="bower_components/bootstrap/dist/js/bootstrap.js" type="application/javascript"></script>
+  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
+
+  <script src="bower_components/angular/angular.js" type="application/javascript"></script>
+  <script src="bower_components/angular-route/angular-route.js" type="application/javascript"></script>
+  <script src="bower_components/lodash/lodash.js" type="application/javascript"></script>
+
+  <script src="app/DillerRpc.js" type="application/javascript"></script>
+  <script src="app/app.js" type="application/javascript"></script>
+  <base href="/">
+</head>
+<body ng-app="Diller" ng-view>
+Loading Diller ...
+</body>
+</html>