diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/app/DillerRpc.js | 41 | ||||
| -rw-r--r-- | web/app/app.js | 60 | ||||
| -rw-r--r-- | web/app/templates/device.html | 21 | ||||
| -rw-r--r-- | web/app/templates/front-page.html | 24 | ||||
| -rw-r--r-- | web/app/templates/property.html | 36 | ||||
| -rw-r--r-- | web/index.html | 24 |
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> |