aboutsummaryrefslogtreecommitdiff
path: root/web/static
diff options
context:
space:
mode:
Diffstat (limited to 'web/static')
-rw-r--r--web/static/app/DillerRpc.js43
-rw-r--r--web/static/app/app.css3
-rw-r--r--web/static/app/app.js72
-rw-r--r--web/static/app/templates/device.html34
-rw-r--r--web/static/app/templates/front-page.html23
-rw-r--r--web/static/app/templates/property.html42
6 files changed, 217 insertions, 0 deletions
diff --git a/web/static/app/DillerRpc.js b/web/static/app/DillerRpc.js
new file mode 100644
index 0000000..de90aee
--- /dev/null
+++ b/web/static/app/DillerRpc.js
@@ -0,0 +1,43 @@
+function DillerRpc($http, DillerConfig) {
+ var baseUrl = DillerConfig.baseUrl;
+
+ function getDevices() {
+ var req = {};
+ req.method = 'get';
+ req.url = baseUrl + '/api/device';
+ return $http(req);
+ }
+
+ function getDevice(deviceId) {
+ var req = {};
+ req.method = 'get';
+ req.url = baseUrl + '/api/device/:deviceId';
+ req.url = req.url.replace(/:deviceId/, deviceId);
+ return $http(req);
+ }
+
+ function getValues(propertyId) {
+ var req = {};
+ req.method = 'get';
+ req.url = baseUrl + '/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/static/app/app.css b/web/static/app/app.css
new file mode 100644
index 0000000..090ac5e
--- /dev/null
+++ b/web/static/app/app.css
@@ -0,0 +1,3 @@
+nav.navbar {
+ margin-bottom: 2rem;
+}
diff --git a/web/static/app/app.js b/web/static/app/app.js
new file mode 100644
index 0000000..5274362
--- /dev/null
+++ b/web/static/app/app.js
@@ -0,0 +1,72 @@
+(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);
+ }
+
+ function DillerConfig() {
+ var head = document.getElementsByTagName('head')[0];
+ var base = head.getElementsByTagName('base')[0];
+ console.log('base =', base);
+ var baseUrl = base.href.replace(/\/$/, '');
+ console.log('baseUrl =', baseUrl);
+ return {
+ baseUrl: baseUrl
+ };
+ }
+
+ angular
+ .module('Diller', ['ngRoute'])
+ .config(config)
+ .service('DillerConfig', DillerConfig)
+ .service('DillerRpc', DillerRpc);
+})();
diff --git a/web/static/app/templates/device.html b/web/static/app/templates/device.html
new file mode 100644
index 0000000..b466fdc
--- /dev/null
+++ b/web/static/app/templates/device.html
@@ -0,0 +1,34 @@
+<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>
+
+ <table class="table">
+ <thead>
+ <tr>
+ <td>Registered</td>
+ <td>Key</td>
+ </tr>
+ </thead>
+ <tbody>
+ <tr ng-repeat="p in ctrl.device.properties | orderBy:'key'">
+ <td>
+ {{p.created_timestamp | date:'medium'}}
+ </td>
+ <td>
+ <a href="#/device/{{ctrl.device.id}}/property/{{p.id}}">{{p.key}}</a>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+</div>
diff --git a/web/static/app/templates/front-page.html b/web/static/app/templates/front-page.html
new file mode 100644
index 0000000..68026c3
--- /dev/null
+++ b/web/static/app/templates/front-page.html
@@ -0,0 +1,23 @@
+<div class="container">
+
+ <h2>Devices</h2>
+
+ <table class="table">
+ <thead>
+ <tr>
+ <th>Registered</th>
+ <th>Key</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr ng-repeat="d in ctrl.devices | orderBy:'key'">
+ <td>
+ {{d.created_timestamp | date:'medium'}}
+ </td>
+ <td>
+ <a href="#/device/{{d.id}}">{{d.key}}</a>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+</div>
diff --git a/web/static/app/templates/property.html b/web/static/app/templates/property.html
new file mode 100644
index 0000000..5f925e7
--- /dev/null
+++ b/web/static/app/templates/property.html
@@ -0,0 +1,42 @@
+<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>
+ <tbody>
+ <tr ng-repeat="v in ctrl.values">
+ <td>{{v.timestamp | date:'medium'}}</td>
+ <td>{{v.value}}</td>
+ </tr>
+ </tbody>
+ </table>
+
+</div>