From 5c4a6763a7575367f0015b7532d83dc7a004c705 Mon Sep 17 00:00:00 2001 From: Henning Treu Date: Wed, 26 Jul 2017 10:14:21 +0200 Subject: [PATCH] PaperUI: rework bindings list view & binding detail view (#3782) * PaperUI: rework bindings list view & binding detail view Also: refactor list views Also-by: Chris Jackson Signed-off-by: Henning Treu --- .../gulpfile.js | 5 +- .../package.json | 23 +-- .../tests/configuration.binding.test.js | 73 +++++++ .../tests/configuration.test.js | 107 ---------- .../web-src/css/components.css | 126 ++++++++---- .../web-src/css/layout.css | 3 +- .../web-src/css/views.css | 6 +- .../web-src/index.html | 1 + .../web-src/js/app.js | 8 +- .../js/controllers.configuration.bindings.js | 184 ++++++++++++++++++ .../web-src/js/controllers.configuration.js | 120 ------------ .../js/directives/directive.searchField.js | 19 ++ .../web-src/js/services.rest.js | 14 +- .../configuration.binding.configuration.html | 19 ++ .../partials/configuration.binding.html | 19 ++ .../configuration.binding.overview.html | 3 + .../configuration.binding.thingtypes.html | 27 +++ .../partials/configuration.bindings.html | 34 ++++ .../web-src/partials/configuration.html | 31 +-- .../partials/directive.searchField.html | 3 + .../web-src/partials/extensions.html | 8 +- .../web-src/partials/include.inbox.html | 12 +- 22 files changed, 537 insertions(+), 308 deletions(-) create mode 100644 extensions/ui/org.eclipse.smarthome.ui.paper/tests/configuration.binding.test.js create mode 100644 extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/controllers.configuration.bindings.js create mode 100644 extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/directives/directive.searchField.js create mode 100644 extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.binding.configuration.html create mode 100644 extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.binding.html create mode 100644 extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.binding.overview.html create mode 100644 extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.binding.thingtypes.html create mode 100644 extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.bindings.html create mode 100644 extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/directive.searchField.html diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/gulpfile.js b/extensions/ui/org.eclipse.smarthome.ui.paper/gulpfile.js index f534866b723..5064bd0b5ce 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.paper/gulpfile.js +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/gulpfile.js @@ -54,7 +54,8 @@ var paths = { './node_modules/angular-material/angular-material.min.js', './node_modules/angular-messages/angular-messages.min.js', './node_modules/angular-sanitize/angular-sanitize.min.js', - './node_modules/angular-ui-sortable/dist/sortable.min.js' + './node_modules/angular-ui-sortable/dist/sortable.min.js', + './node_modules/angular-material-expansion-panel/dist/md-expansion-panel.min.js', ], 'name': 'angular-bundle.js' }], @@ -83,6 +84,7 @@ var paths = { CSSLibs: [ './node_modules/bootstrap/dist/css/bootstrap.min.css', './node_modules/angular-material/angular-material.min.css', + './node_modules/angular-material-expansion-panel/dist/md-expansion-panel.min.css' ], FontLibs: [ './node_modules/roboto-fontface/fonts/*.woff', @@ -212,6 +214,7 @@ gulp.task('inject', ['build'], function () { './web-src/js/app.js', './web-src/js/constants.js', './web-src/js/controllers.configuration.js', + './web-src/js/controllers.configuration.bindings.js', './web-src/js/controllers.system.js', './web-src/js/controllers.items.js', './web-src/js/controllers.control.js', diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/package.json b/extensions/ui/org.eclipse.smarthome.ui.paper/package.json index 7d2f83fe3cb..dc72e9f2134 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.paper/package.json +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/package.json @@ -12,24 +12,14 @@ "angular-animate": "1.4.8", "angular-aria": "1.4.8", "angular-material": "1.0.1", + "angular-material-expansion-panel": "0.7.2", "angular-messages": "1.4.8", "angular-resource": "1.4.8", "angular-route": "1.4.8", "angular-sanitize": "1.4.8", "angular-ui-sortable": "0.13.4", "bootstrap": "3.3.2", - "browser-sync": "~2.7.12", - "del": "^2.0.0", "eventsource-polyfill": "^0.9.6", - "gulp": "^3.9.0", - "gulp-angular-filesort": "~1.1.1", - "gulp-concat": "^2.6.0", - "gulp-inject": "^4.0.0", - "gulp-ng-annotate": "~1.0.0", - "gulp-rename": "^1.2.2", - "gulp-uglify": "^1.5.1", - "gulp-util": "^3.0.7", - "http-proxy-middleware": "^0.9.0", "jquery": "2.1.3", "jquery-ui": "^1.11.2", "masonry-layout": "3.3.1", @@ -43,6 +33,17 @@ }, "devDependencies": { "angular-mocks": "1.4.8", + "browser-sync": "~2.7.12", + "del": "^2.0.0", + "gulp": "^3.9.0", + "gulp-angular-filesort": "~1.1.1", + "gulp-concat": "^2.6.0", + "gulp-inject": "^4.0.0", + "gulp-ng-annotate": "~1.0.0", + "gulp-rename": "^1.2.2", + "gulp-uglify": "^1.5.1", + "gulp-util": "^3.0.7", + "http-proxy-middleware": "^0.9.0", "jasmine-core": "^2.5.2", "karma": "^1.1.0", "karma-angular": "0.0.6", diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/tests/configuration.binding.test.js b/extensions/ui/org.eclipse.smarthome.ui.paper/tests/configuration.binding.test.js new file mode 100644 index 00000000000..703c5dc65bb --- /dev/null +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/tests/configuration.binding.test.js @@ -0,0 +1,73 @@ +describe('module PaperUI.controllers.configuration.bindings', function() { + beforeEach(function() { + module('PaperUI'); + }); + describe('tests for BindingController', function() { + var bindingController, scope, mdDialog; + beforeEach(inject(function($injector, $rootScope, $controller, $mdDialog) { + scope = $rootScope.$new(); + mdDialog = $mdDialog + $controller('BodyController', { + '$scope' : scope + }); + bindingController = $controller('BindingController', { + '$scope' : scope + }); + })); + it('should require BindingController', function() { + expect(bindingController).toBeDefined(); + }); + }); + + describe('tests for ConfigureBindingDialogController', function() { + var configureBindingDialogController, scope, bindingService; + var restConfig; + beforeEach(inject(function($injector, $rootScope, $controller) { + scope = $rootScope.$new(); + var bindingRepository = $injector.get('bindingRepository'); + restConfig = $injector.get('restConfig'); + $rootScope.data.bindings = [ { + id : 'B' + } ]; + configureBindingDialogController = $controller('ConfigureBindingDialogController', { + '$scope' : scope, + 'binding' : { + 'id' : 'B', + 'configDescriptionURI' : 'CDURI' + }, + 'bindingRepository' : bindingRepository + }); + $httpBackend = $injector.get('$httpBackend'); + $httpBackend.when('GET', restConfig.restPath + "/config-descriptions/CDURI").respond({ + parameters : [ { + type : 'input', + name : 'PNAME' + } ] + }); + $httpBackend.when('GET', restConfig.restPath + "/bindings/B/config").respond({ + PNAME : '1' + }); + $httpBackend.flush(); + bindingService = $injector.get('bindingService'); + })); + it('should require ConfigureBindingDialogController', function() { + expect(configureBindingDialogController).toBeDefined(); + }); + it('should get binding parameters', function() { + expect(scope.parameters.length).toEqual(1); + }); + it('should get binding configuration', function() { + expect(scope.configuration.PNAME).toEqual(1); + }); + it('should add binding parameter', function() { + scope.configArray = []; + scope.addParameter(); + expect(scope.configArray.length).toEqual(1); + }); + it('should save binding configuration', function() { + spyOn(bindingService, 'updateConfig'); + scope.save(); + expect(bindingService.updateConfig).toHaveBeenCalled(); + }); + }); +}); \ No newline at end of file diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/tests/configuration.test.js b/extensions/ui/org.eclipse.smarthome.ui.paper/tests/configuration.test.js index 95315c10e5a..7a679697dcf 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.paper/tests/configuration.test.js +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/tests/configuration.test.js @@ -2,7 +2,6 @@ describe('module PaperUI.controllers.configuration', function() { beforeEach(function() { module('PaperUI'); }); - var restConfig; describe('tests for ConfigurationPageController', function() { var configurationPageController, scope; beforeEach(inject(function($injector, $rootScope, $controller) { @@ -22,112 +21,6 @@ describe('module PaperUI.controllers.configuration', function() { expect(label).toEqual('1'); }); }); - describe('tests for BindingController', function() { - var bindingController, scope, mdDialog; - beforeEach(inject(function($injector, $rootScope, $controller, $mdDialog) { - scope = $rootScope.$new(); - mdDialog = $mdDialog - $controller('BodyController', { - '$scope' : scope - }); - bindingController = $controller('BindingController', { - '$scope' : scope - }); - })); - it('should require BindingController', function() { - expect(bindingController).toBeDefined(); - }); - it('should open binding info dialog', function() { - spyOn(mdDialog, 'show'); - scope.openBindingInfoDialog(0); - expect(mdDialog.show).toHaveBeenCalled(); - }); - it('should open binding configuration dialog', function() { - spyOn(mdDialog, 'show'); - scope.configure(0); - expect(mdDialog.show).toHaveBeenCalled(); - }); - }); - - describe('tests for BindingInfoDialogController', function() { - var bindingInfoDialogController, scope, mdDialog; - beforeEach(inject(function($injector, $rootScope, $controller) { - scope = $rootScope.$new(); - var bindingRepository = $injector.get('bindingRepository'); - var thingTypeRepository = $injector.get('thingTypeRepository'); - restConfig = $injector.get('restConfig'); - $rootScope.data.bindings = [ { - id : 'B' - } ]; - - $httpBackend = $injector.get('$httpBackend'); - $httpBackend.when('GET', restConfig.restPath + "/thing-types").respond([ { - UID : 'B:T' - } ]); - bindingInfoDialogController = $controller('BindingInfoDialogController', { - '$scope' : scope, - 'bindingId' : 'B', - 'bindingRepository' : bindingRepository, - 'thingTypeRepository' : thingTypeRepository - }); - $httpBackend.flush(); - })); - it('should require BindingInfoDialogController', function() { - expect(bindingInfoDialogController).toBeDefined(); - }); - it('should get ThingTypes of Binding', function() { - expect(scope.binding.thingTypes[0].UID).toEqual('B:T'); - }); - - }); - - describe('tests for ConfigureBindingDialogController', function() { - var configureBindingDialogController, scope, bindingService; - beforeEach(inject(function($injector, $rootScope, $controller) { - scope = $rootScope.$new(); - var bindingRepository = $injector.get('bindingRepository'); - $rootScope.data.bindings = [ { - id : 'B' - } ]; - configureBindingDialogController = $controller('ConfigureBindingDialogController', { - '$scope' : scope, - 'bindingId' : 'B', - 'configDescriptionURI' : 'CDURI', - 'bindingRepository' : bindingRepository - }); - $httpBackend = $injector.get('$httpBackend'); - $httpBackend.when('GET', restConfig.restPath + "/config-descriptions/CDURI").respond({ - parameters : [ { - type : 'input', - name : 'PNAME' - } ] - }); - $httpBackend.when('GET', restConfig.restPath + "/bindings/B/config").respond({ - PNAME : '1' - }); - $httpBackend.flush(); - bindingService = $injector.get('bindingService'); - })); - it('should require ConfigureBindingDialogController', function() { - expect(configureBindingDialogController).toBeDefined(); - }); - it('should get binding parameters', function() { - expect(scope.parameters.length).toEqual(1); - }); - it('should get binding configuration', function() { - expect(scope.configuration.PNAME).toEqual(1); - }); - it('should add binding parameter', function() { - scope.configArray = []; - scope.addParameter(); - expect(scope.configArray.length).toEqual(1); - }); - it('should save binding configuration', function() { - spyOn(bindingService, 'updateConfig'); - scope.save(); - expect(bindingService.updateConfig).toHaveBeenCalled(); - }); - }); describe('tests for ServicesController', function() { var ServicesController, scope, injector; diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/css/components.css b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/css/components.css index fbf2c56545b..b5e16a9aea6 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/css/components.css +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/css/components.css @@ -285,10 +285,15 @@ md-slider.md-default-theme.hue .md-thumb:after { } /* Fab Item / List Item */ -.fab-item, .list-item { +.list-item { position: relative; } +.fab-item { + margin-top: 15px; + margin-bottom: 15px; +} + .fab-item h3, .list-item h3 { font-size: 18px; font-weight: 500; @@ -304,17 +309,17 @@ md-slider.md-default-theme.hue .md-thumb:after { } .fab-item button.md-fab { - position: absolute; - left: 0px; - top: 0px; + float: left; + margin: 0; } .fab-item .item-content { - margin-left: 75px; min-height: 60px; + padding-left: 20px; + display: flex; } -.fab-item .item-content .actions, .list-item .actions, .item-content .actions +.list-item .actions { position: absolute; top: 7px; @@ -322,6 +327,14 @@ md-slider.md-default-theme.hue .md-thumb:after { background: white; } +.fab-item .item-content .actions { + width: 160px; +} + +.fab-item .item-content .actions i:last-child { + float: right; +} + .extensions .card .item-content { padding-top: 5px; } @@ -342,6 +355,17 @@ md-slider.md-default-theme.hue .md-thumb:after { margin-top: 10px; } +.item-content .description { + width: 100%; + display: flex; + flex-wrap: wrap; + align-items: center; +} + +.item-content .description h3 { + width: 100%; +} + .showCards .fab-item .item-content { margin-left: 100px; min-height: 60px; @@ -371,10 +395,10 @@ md-slider.md-default-theme.hue .md-thumb:after { width: 56px; height: 56px; background-color: #CCC; - position: absolute; text-align: center; font-size: 30px; line-height: 54px; + float: left; } .fab-item .rectangle { @@ -398,10 +422,6 @@ md-slider.md-default-theme.hue .md-thumb:after { font-size: 15px; } -.fab-item hr.border-line { - margin: 10px 0px; -} - /* Input */ md-input-group.md-default-theme input, md-input-group.md-default-theme textarea { @@ -667,10 +687,6 @@ md-progress-circular.md-default-theme .md-inner .md-left .md-half-circle margin-top: 5px; } -.channel .circle { - margin-left: 8px; -} - .channels .channelGroup { margin-top: 20px; } @@ -985,14 +1001,6 @@ md-chips strong { outline: 0; } -.thing .cbody { - margin-bottom: 10px; -} - -.fab-item hr.border-line { - margin: 0px; -} - .material-icons.color-remove { font-size: 12px; margin-top: 10px; @@ -1051,6 +1059,10 @@ md-dialog-content .dayParameter { min-height: 48px; } +.item-container { + padding-left: 0px; +} + .container.itemConfig .md-select-value, .container .includeConfig .md-select-value { padding: 2px 2px 1px 2px; } @@ -1145,16 +1157,18 @@ background-color: green; .rule .actions i,.item-content .actions i{ margin:1px; } - .container { - padding-left:8px; - padding-right:4px; - } } .item-content p, .item-content h3 { word-wrap: normal; text-overflow:ellipsis; overflow:hidden; + margin-top: 0px; +} + +.item-content p { + margin: 0; + width: 100%; } .item-content h3:focus { @@ -1170,13 +1184,12 @@ background-color: green; margin-right: 20px; } -.linkedItems { - -/* background-color:#e6e6e6 */ +.linkedItems.item-content { + margin-left: 56px; + display: block; } .linkedItems>div{ - border-bottom: 1px solid #ddd; margin: 5px; } @@ -1187,12 +1200,12 @@ background-color: green; font-size:15px; } -.fab-item .linkedItems button.md-fab { - position:relative; +.linkedItems button.md-fab { + float: none; + margin: 0 0 4px 6px; } .linkedItems>.row { - padding-bottom: 10px; margin-top: 10px; } @@ -1416,3 +1429,48 @@ md-progress-circular.firmware { -webkit-transition: none !important; transition: none !important; } + +.bindings.white-bg { + padding-top: 30px; +} + +.bindings.white-bg.has-section-header { + padding-top: 80px; +} + +.binding.white-bg { + padding-top: 30px; +} + +.binding .item-content .actions { + width: 60px; +} + +.binding.white-bg.has-section-header { + padding-top: 80px; +} + +.fab-item hr.border-line { + margin: 10px 0 0 76px; +} + +.binding :not(md-expansion-panel) .md-title { + padding-bottom: 10px; + flex-grow: 2 +} +.binding .things .search { + padding: 0 0 10px 0; +} + +.binding .things md-expansion-panel .md-title.ng-binding { + padding-bottom: 0; +} + +search-field { + display: flex; + width: 100%; +} + +search-field i { + margin-top: 4px; +} diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/css/layout.css b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/css/layout.css index 902e9101bb2..247feeca3c3 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/css/layout.css +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/css/layout.css @@ -390,8 +390,7 @@ md-tabs.section-tabs { .section-header .toolbar { position: absolute; - bottom: -50px; - left: 15px; + left: 7px; z-index: 8; } diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/css/views.css b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/css/views.css index cf8352abdf8..e7eb827be85 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/css/views.css +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/css/views.css @@ -136,9 +136,9 @@ section#main.header-tabs { /* Inbox */ .scan .fab-item md-progress-circular { - position: absolute; - left: 0px; - right: 0px; + float: left; + margin: 0px; + width: 56px !important; } .thing-type-choose { diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/index.html b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/index.html index 3bbdd3e888a..e2eda35ede1 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/index.html +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/index.html @@ -12,6 +12,7 @@ + diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/app.js b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/app.js index 00d176f70fe..e4631444f80 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/app.js +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/app.js @@ -1,4 +1,4 @@ -angular.module('PaperUI', [ 'PaperUI.controllers', 'PaperUI.controllers.control', 'PaperUI.controllers.setup', 'PaperUI.controllers.configuration', 'PaperUI.controllers.extension', 'PaperUI.controllers.rules', 'PaperUI.services', 'PaperUI.services.rest', 'PaperUI.extensions', 'ngRoute', 'ngResource', 'ngMaterial', 'ngMessages', 'ngSanitize', 'ui.sortable' ]).config([ '$routeProvider', '$httpProvider', 'globalConfig', '$mdDateLocaleProvider', 'moduleConfig', 'dateTimeProvider', function($routeProvider, httpProvider, globalConfig, $mdDateLocaleProvider, moduleConfig, dateTimeProvider) { +angular.module('PaperUI', [ 'PaperUI.controllers', 'PaperUI.controllers.control', 'PaperUI.controllers.setup', 'PaperUI.controllers.configuration', 'PaperUI.controllers.configuration.bindings', 'PaperUI.controllers.extension', 'PaperUI.controllers.rules', 'PaperUI.services', 'PaperUI.services.rest', 'PaperUI.services.repositories', 'PaperUI.extensions', 'ngRoute', 'ngResource', 'ngMaterial', 'ngMessages', 'ngSanitize', 'ui.sortable', 'material.components.expansionPanels' ]).config([ '$routeProvider', '$httpProvider', 'globalConfig', '$mdDateLocaleProvider', 'moduleConfig', 'dateTimeProvider', function($routeProvider, httpProvider, globalConfig, $mdDateLocaleProvider, moduleConfig, dateTimeProvider) { $routeProvider.when('/control', { templateUrl : 'partials/control.html', controller : 'ControlPageController', @@ -32,10 +32,6 @@ angular.module('PaperUI', [ 'PaperUI.controllers', 'PaperUI.controllers.control' title : 'Inbox' }).when('/configuration', { redirectTo : '/configuration/bindings' - }).when('/configuration/bindings', { - templateUrl : 'partials/configuration.html', - controller : 'ConfigurationPageController', - title : 'Configuration' }).when('/configuration/services', { templateUrl : 'partials/configuration.html', controller : 'ConfigurationPageController', @@ -366,4 +362,4 @@ angular.module('PaperUI', [ 'PaperUI.controllers', 'PaperUI.controllers.control' $rootScope.advancedMode = advancedMode === 'true'; } -} ]); \ No newline at end of file +} ]); diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/controllers.configuration.bindings.js b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/controllers.configuration.bindings.js new file mode 100644 index 00000000000..993dced22d8 --- /dev/null +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/controllers.configuration.bindings.js @@ -0,0 +1,184 @@ +angular.module('PaperUI.controllers.configuration.bindings', [ 'ngRoute', 'PaperUI.directive.searchField' ]).config([ '$routeProvider', function($routeProvider) { + // Configure the routes for this controller + $routeProvider.when('/configuration/bindings', { + templateUrl : 'partials/configuration.bindings.html', + controller : 'BindingController', + title : 'Configuration' + }).when('/configuration/bindings/:bindingId', { + templateUrl : 'partials/configuration.binding.html', + controller : 'BindingDetailController', + title : 'Configuration' + }); +} ]).controller('BindingController', function($scope, $location, $mdDialog, bindingRepository, extensionService) { + /** + * This is the main binding controller to display all bindings + */ + $scope.navigateTo = function(path) { + $location.path(path); + } + + $scope.bindings = []; + $scope.extensionServiceAvailable = false; + + extensionService.isAvailable(function(available) { + $scope.extensionServiceAvailable = available; + }) + + $scope.setSubtitle([ 'Bindings' ]); + $scope.setHeaderText('Shows all installed bindings.'); + $scope.refresh = function() { + bindingRepository.getAll(function(bindings) { + $scope.bindings = bindings; + }, true); + }; + + $scope.configure = function(binding, event) { + event.stopPropagation(); + $mdDialog.show({ + controller : 'ConfigureBindingDialogController', + templateUrl : 'partials/dialog.configurebinding.html', + targetEvent : event, + hasBackdrop : true, + locals : { + binding : binding + } + }); + } + + $scope.isConfigurable = function(binding) { + return binding.configDescriptionURI ? true : false; + } + + $scope.refresh(); + +}).controller('BindingDetailController', function($scope, $location, $mdExpansionPanel, $mdDialog, thingTypeRepository, bindingRepository, extensionService) { + var bindingId = $scope.path[3]; + $scope.filter = { + text : '' + }; + + $scope.navigateTo = function(path) { + $location.path(path); + } + + $scope.filterItems = function(lookupFields, searchText) { + return function(item) { + if (searchText && searchText.length > 0) { + for (var i = 0; i < lookupFields.length; i++) { + if (item[lookupFields[i]] && item[lookupFields[i]].toUpperCase().indexOf(searchText.toUpperCase()) != -1) { + return true; + } + } + return false + } + return true; + } + } + + $scope.clearFilter = function(event) { + if (!event || event.keyCode === 27) { + $scope.filter.text = ''; + } + } + + $scope.binding = undefined; + bindingRepository.getOne(function(binding) { + return binding.id === bindingId; + }, function(binding) { + $scope.setSubtitle([ 'Bindings', binding.name ]); + $scope.setHeaderText('Shows detailed binding information.'); + + $scope.binding = binding; + $scope.binding.thingTypes = []; + thingTypeRepository.getAll(function(thingTypes) { + angular.forEach(thingTypes, function(thingType) { + if (thingType.UID.split(':')[0] === binding.id) { + $scope.binding.thingTypes.push(thingType); + } + }); + }); + }); + + $scope.configure = function(event) { + $mdDialog.show({ + controller : 'ConfigureBindingDialogController', + templateUrl : 'partials/dialog.configurebinding.html', + targetEvent : event, + hasBackdrop : true, + locals : { + binding : $scope.binding + } + }); + } + + $scope.isConfigurable = function() { + return $scope.binding.configDescriptionURI ? true : false; + } +}).controller('ConfigureBindingDialogController', function($scope, $mdDialog, bindingRepository, bindingService, configService, configDescriptionService, toastService, binding) { + + $scope.binding = binding; + $scope.parameters = []; + $scope.config = {}; + + if (binding.configDescriptionURI) { + $scope.expertMode = false; + configDescriptionService.getByUri({ + uri : binding.configDescriptionURI + }, function(configDescription) { + if (configDescription) { + $scope.parameters = configService.getRenderingModel(configDescription.parameters, configDescription.parameterGroups); + $scope.configuration = configService.setConfigDefaults($scope.configuration, $scope.parameters); + $scope.configArray = configService.getConfigAsArray($scope.configuration, $scope.parameters); + } + }); + } + if (binding) { + bindingService.getConfigById({ + id : binding.id + }).$promise.then(function(config) { + $scope.configuration = configService.convertValues(config); + $scope.configuration = configService.setConfigDefaults($scope.configuration, $scope.parameters); + $scope.configArray = configService.getConfigAsArray($scope.configuration, $scope.parameters); + + }, function(failed) { + $scope.configuration = {}; + $scope.configArray = configService.getConfigAsArray($scope.configuration); + }); + } else { + $scope.newConfig = true; + $scope.serviceId = ''; + $scope.configuration = { + '' : '' + }; + $scope.configArray = []; + $scope.expertMode = true; + } + $scope.close = function() { + $mdDialog.hide(); + } + $scope.addParameter = function() { + $scope.configArray.push({ + name : '', + value : undefined + }); + } + $scope.save = function() { + if ($scope.expertMode) { + $scope.configuration = configService.getConfigAsObject($scope.configArray, $scope.parameters); + } + var configuration = configService.setConfigDefaults($scope.configuration, $scope.parameters, true); + bindingService.updateConfig({ + id : binding.id + }, configuration, function() { + $mdDialog.hide(); + toastService.showDefaultToast('Binding config updated.'); + }); + } + $scope.$watch('expertMode', function() { + if ($scope.expertMode) { + $scope.configArray = configService.getConfigAsArray($scope.configuration, $scope.parameters); + } else { + $scope.configuration = configService.getConfigAsObject($scope.configArray, $scope.parameters); + } + }); +}); \ No newline at end of file diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/controllers.configuration.js b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/controllers.configuration.js index 33bc7453a25..5d1b29a0613 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/controllers.configuration.js +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/controllers.configuration.js @@ -23,126 +23,6 @@ angular.module('PaperUI.controllers.configuration', [ 'PaperUI.constants', 'Pape } }; getThingTypes(); -}).controller('BindingController', function($scope, $mdDialog, bindingRepository) { - $scope.setSubtitle([ 'Bindings' ]); - $scope.setHeaderText('Shows all installed bindings.'); - $scope.refresh = function() { - bindingRepository.getAll(true); - }; - $scope.openBindingInfoDialog = function(bindingId, event) { - $mdDialog.show({ - controller : 'BindingInfoDialogController', - templateUrl : 'partials/dialog.bindinginfo.html', - targetEvent : event, - hasBackdrop : true, - locals : { - bindingId : bindingId - } - }); - } - $scope.configure = function(bindingId, configDescriptionURI, event) { - $mdDialog.show({ - controller : 'ConfigureBindingDialogController', - templateUrl : 'partials/dialog.configurebinding.html', - targetEvent : event, - hasBackdrop : true, - locals : { - bindingId : bindingId, - configDescriptionURI : configDescriptionURI - } - }); - } - bindingRepository.getAll(); -}).controller('BindingInfoDialogController', function($scope, $mdDialog, thingTypeRepository, bindingRepository, bindingId) { - $scope.binding = undefined; - bindingRepository.getOne(function(binding) { - return binding.id === bindingId; - }, function(binding) { - $scope.binding = binding; - $scope.binding.thingTypes = []; - thingTypeRepository.getAll(function(thingTypes) { - $.each(thingTypes, function(index, thingType) { - if (thingType.UID.split(':')[0] === binding.id) { - $scope.binding.thingTypes.push(thingType); - } - }); - }); - }); - $scope.close = function() { - $mdDialog.hide(); - } -}).controller('ConfigureBindingDialogController', function($scope, $mdDialog, bindingRepository, bindingService, configService, configDescriptionService, toastService, bindingId, configDescriptionURI) { - - $scope.binding = null; - $scope.parameters = []; - $scope.config = {}; - - if (configDescriptionURI) { - $scope.expertMode = false; - configDescriptionService.getByUri({ - uri : configDescriptionURI - }, function(configDescription) { - if (configDescription) { - $scope.parameters = configService.getRenderingModel(configDescription.parameters, configDescription.parameterGroups); - $scope.configuration = configService.setConfigDefaults($scope.configuration, $scope.parameters); - $scope.configArray = configService.getConfigAsArray($scope.configuration, $scope.parameters); - } - }); - } - if (bindingId) { - bindingRepository.getOne(function(binding) { - return binding.id === bindingId; - }, function(binding) { - $scope.binding = binding; - }); - bindingService.getConfigById({ - id : bindingId - }).$promise.then(function(config) { - $scope.configuration = configService.convertValues(config); - $scope.configuration = configService.setConfigDefaults($scope.configuration, $scope.parameters); - $scope.configArray = configService.getConfigAsArray($scope.configuration, $scope.parameters); - - }, function(failed) { - $scope.configuration = {}; - $scope.configArray = configService.getConfigAsArray($scope.configuration); - }); - } else { - $scope.newConfig = true; - $scope.serviceId = ''; - $scope.configuration = { - '' : '' - }; - $scope.configArray = []; - $scope.expertMode = true; - } - $scope.close = function() { - $mdDialog.hide(); - } - $scope.addParameter = function() { - $scope.configArray.push({ - name : '', - value : undefined - }); - } - $scope.save = function() { - if ($scope.expertMode) { - $scope.configuration = configService.getConfigAsObject($scope.configArray, $scope.parameters); - } - var configuration = configService.setConfigDefaults($scope.configuration, $scope.parameters, true); - bindingService.updateConfig({ - id : bindingId - }, configuration, function() { - $mdDialog.hide(); - toastService.showDefaultToast('Binding config updated.'); - }); - } - $scope.$watch('expertMode', function() { - if ($scope.expertMode) { - $scope.configArray = configService.getConfigAsArray($scope.configuration, $scope.parameters); - } else { - $scope.configuration = configService.getConfigAsObject($scope.configArray, $scope.parameters); - } - }); }).controller('ServicesController', function($scope, $mdDialog, serviceConfigService, toastService) { $scope.setSubtitle([ 'Services' ]); $scope.setHeaderText('Shows all configurable services.'); diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/directives/directive.searchField.js b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/directives/directive.searchField.js new file mode 100644 index 00000000000..5130be0b562 --- /dev/null +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/directives/directive.searchField.js @@ -0,0 +1,19 @@ +angular.module('PaperUI.directive.searchField', []) // +.directive('searchField', function() { + return { + restrict : 'E', + scope : { + model : '=', + placeholder : '=?' + }, + templateUrl : 'partials/directive.searchField.html', + link : function(scope, element, attrs, controllers) { + scope.placeholder = attrs.placeholder ? attrs.placeholder : 'Search' + scope.clearSearchField = function(event) { + if (!event || event.keyCode === 27) { + scope.model = ''; + } + } + } + } +}); \ No newline at end of file diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/services.rest.js b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/services.rest.js index 5b352986585..c3f437b9053 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/services.rest.js +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/services.rest.js @@ -400,8 +400,8 @@ angular.module('PaperUI.services.rest', [ 'PaperUI.constants', 'ngResource' ]).c url : restConfig.restPath + '/config-descriptions/:uri' }, }); -}).factory('extensionService', function($resource, restConfig) { - return $resource(restConfig.restPath + '/extensions', {}, { +}).factory('extensionService', function($resource, restConfig, $http) { + var extensionService = $resource(restConfig.restPath + '/extensions', {}, { getAll : { method : 'GET', isArray : true, @@ -448,6 +448,16 @@ angular.module('PaperUI.services.rest', [ 'PaperUI.constants', 'ngResource' ]).c url : restConfig.restPath + '/extensions/:id/uninstall' } }); + + extensionService.isAvailable = function(callback) { + $http.head(restConfig.restPath + '/extensions').then(function() { + callback(true); + }, function() { + callback(false); + }); + } + + return extensionService; }).factory('ruleService', function($resource, restConfig) { return $resource(restConfig.restPath + '/rules', {}, { getAll : { diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.binding.configuration.html b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.binding.configuration.html new file mode 100644 index 00000000000..4b924c71a39 --- /dev/null +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.binding.configuration.html @@ -0,0 +1,19 @@ +

+ Configure {{binding.name}} {{binding.id}} +

+
+
+
+
+ +
+ +
+ + {{expertMode ? 'Normal' : 'Expert'}} Mode +
+ + + Cancel + Save +
\ No newline at end of file diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.binding.html b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.binding.html new file mode 100644 index 00000000000..95381a3014b --- /dev/null +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.binding.html @@ -0,0 +1,19 @@ +
+
+ Close close +
+ +
+
+
+ edit +
+
+
+ +
+
+
+
+
+
diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.binding.overview.html b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.binding.overview.html new file mode 100644 index 00000000000..de50b2640c0 --- /dev/null +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.binding.overview.html @@ -0,0 +1,3 @@ +
{{::binding.name}}
+

+

Author: {{::binding.author}}

\ No newline at end of file diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.binding.thingtypes.html b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.binding.thingtypes.html new file mode 100644 index 00000000000..2bdfe9ada46 --- /dev/null +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.binding.thingtypes.html @@ -0,0 +1,27 @@ +
+
Supported Things
+ +
+ +
+ + + + +
{{::thingType.label}}
+
{{::thingType.UID}}
+ + + + +
{{::thingType.label}}
+
{{::thingType.UID}}
+ + + +
{{::thingType.description}}
+ + + + +
\ No newline at end of file diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.bindings.html b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.bindings.html new file mode 100644 index 00000000000..0d8c4949735 --- /dev/null +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.bindings.html @@ -0,0 +1,34 @@ +
+
+ refresh bindings +
+ +
+
+
+ add +
+
+
+ +
+
+
+
{{::binding.name.substring(0,1).toUpperCase()}}
+
+
+

+ {{::binding.name}} {{::binding.id}} +

+

{{::binding.author}}

+
+
+ edit + +
+
+
+
+
+
+
diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.html b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.html index f6e4ac13638..1f43867b18d 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.html +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/configuration.html @@ -12,6 +12,7 @@

{{binding.name}} {{binding.id}}

+

{{binding.author}}

Configure @@ -83,14 +84,14 @@

{{service.label}}

{{thing.thingTypeUID?thing.thingTypeUID.split(':')[1].substring(0,1).toUpperCase():''}}
-
+

{{thing.label}} {{thing.statusInfo.status}}

{{getThingTypeLabel(thing.thingTypeUID)}}

{{thing.UID}}

-
+
edit delete
@@ -127,9 +128,9 @@

{{thing.label}}

{{details?'hide':'show'}} properties -
-
-
+
+
+

@@ -152,12 +153,14 @@

Channels

{{channel.channelType.label?channel.channelType.label.substring(0,1).toUpperCase():'T'}}
-

{{channel.label?channel.label:channel.channelType.label}}

-

{{channel.id}}

-

- {{thing.UID + ':' + channel.id}}content_copy -

-

{{channel.itemType}}

+
+

{{channel.label?channel.label:channel.channelType.label}}

+

{{channel.id}}

+

+ {{thing.UID + ':' + channel.id}}content_copy +

+

{{channel.itemType}}

+
edit {{channel.showItems ? 'unfold_less':'unfold_more'}}
@@ -237,7 +240,7 @@

Configuration Parameters

{{type}} No matches found. {{group.label?group.label:group.name}} No matches found.
-
+

No items defined. @@ -251,14 +254,14 @@

Configuration Parameters

{{item.label?item.label.substring(0,1).toUpperCase():item.name.substring(0,1).toUpperCase()}}
-
+

{{item.label}} 

{{item.name}}content_copy

{{item.type}}

-
+
edit delete
diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/directive.searchField.html b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/directive.searchField.html new file mode 100644 index 00000000000..e413a7f3576 --- /dev/null +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/directive.searchField.html @@ -0,0 +1,3 @@ +search + +close diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/extensions.html b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/extensions.html index 733af05fb8f..60f0a2092f0 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/extensions.html +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/extensions.html @@ -16,8 +16,10 @@
{{extension.label.substring(0,1).toUpperCase()}}
-

{{extension.label}}

-

{{extension.id}} - {{extension.version}}

+
+

{{extension.label}}

+

{{extension.id}} - {{extension.version}}

+
Install Uninstall @@ -30,7 +32,7 @@

-
+
diff --git a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/include.inbox.html b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/include.inbox.html index 2348e4f017a..0d5c18866eb 100644 --- a/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/include.inbox.html +++ b/extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/include.inbox.html @@ -16,11 +16,13 @@
done
-

- {{discoveryResult.label}} IGNORED -

-

{{getThingTypeLabel(discoveryResult.thingTypeUID)}}

-

{{discoveryResult.thingUID}}

+
+

+ {{discoveryResult.label}} IGNORED +

+

{{getThingTypeLabel(discoveryResult.thingTypeUID)}}

+

{{discoveryResult.thingUID}}

+
visibility visibility_off delete