Skip to content
This repository has been archived by the owner on May 7, 2020. It is now read-only.

Commit

Permalink
Show only state for disabled control items (#2007)
Browse files Browse the repository at this point in the history 
* Show state text for disabled items in ControlUI

Signed-off-by: Aoun Bukhari <bukhari@itemis.de>
  • Loading branch information
@aounhaider1 @kaikreuzer
aounhaider1 authored and kaikreuzer committed Aug 17, 2016
1 parent 22913de commit 81a0fdf
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 19 deletions.
6 changes: 6 additions & 0 deletions extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/controllers.control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -326,6 +326,9 @@ angular.module('PaperUI.controllers.control', []).controller('ControlPageControl
};

}).controller('SwitchItemController', function($scope, $timeout, itemService) {
if ($scope.item.state === 'UNDEF' || $scope.item.state === 'NULL') {
$scope.item.state = '-';
}
$scope.setOn = function(state) {
$scope.sendCommand(state);
}
Expand Down Expand Up @@ -371,6 +374,9 @@ angular.module('PaperUI.controllers.control', []).controller('ControlPageControl
});
}).controller('ColorItemController', function($scope, $timeout, $element, itemService) {

if ($scope.item.state === 'UNDEF' || $scope.item.state === 'NULL') {
$scope.item.state = '-';
}
function getStateAsObject(state) {
var stateParts = state.split(",");
if (stateParts.length == 3) {
Expand Down
43 changes: 26 additions & 17 deletions extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/control.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,11 @@ <h2>{{group.name}}</h2>
<div flex="60" layout="row" layout-align="end center" class="switch-widget" ng-if="!isOptionList(item)">
<md-switch class="md-default-theme" ng-disabled="isReadOnly(item)" ng-model="item.state" ng-change="setOn(item.state)" ng-true-value="'ON'" ng-false-value="'OFF'" aria-label={{item.label}}></md-switch>
</div>
<div flex="60" layout="row" layout-align="end center" class="dimmer-widget" ng-if="isReadOnly(item)">
<h2>{{item.state}}</h2>
</div>
</div>
<div layout="row" item-state-dropdown layout-align="end center" ng-if="isOptionList(item)"></div>
<div layout="row" item-state-dropdown layout-align="end center" ng-if="isOptionList(item) && !isReadOnly(item)"></div>
</div>
<div ng-switch-when="Dimmer" ng-controller="DimmerItemController">
<div layout="row" layout-align="start center" class="dimmer-widget">
Expand All @@ -52,20 +55,20 @@ <h2>{{group.name}}</h2>
<i class="material-icons">{{getIcon(item.category, 'brightness_medium')}}</i>{{getLabel(item.category, item.label, 'Dimmer')}}
</p>
</div>
<div ng-if="!isOptionList(item)" flex="60" layout="row" layout-align="end center" class="dimmer-widget">
<div ng-if="isReadOnly(item)" flex="60" layout="row" layout-align="end center" class="dimmer-widget">
<h2>{{item.state}}%</h2>
</div>
</div>
<md-slider ng-if="!isOptionList(item)" class="md-default-theme" style="height: 40px;" flex min="0" max="100" ng-model="item.state" ng-change="setBrightness(item.state)" aria-label={{item.label}}></md-slider>
<div layout="row" layout-align="start center" class="dimmer-widget" ng-if="showSwitch(item.category) && !isOptionList(item)">
<md-slider ng-if="!isOptionList(item) && !isReadOnly(item)" class="md-default-theme" style="height: 40px;" flex min="0" max="100" ng-model="item.state" ng-change="setBrightness(item.state)" aria-label={{item.label}}></md-slider>
<div layout="row" layout-align="start center" class="dimmer-widget" ng-if="showSwitch(item.category) && !isOptionList(item) && !isReadOnly(item)">
<div flex="40">
<p>Off/On</p>
</div>
<div flex="60" layout="row" layout-align="end center" class="dimmer-widget">
<md-switch class="md-default-theme" ng-model="on" ng-change="setOn(on)" ng-true-value="'ON'" ng-false-value="'OFF'" aria-label={{item.label}}></md-switch>
</div>
</div>
<div layout="row" item-state-dropdown layout-align="end center" ng-if="isOptionList(item)"></div>
<div layout="row" item-state-dropdown layout-align="end center" ng-if="isOptionList(item) && !isReadOnly(item)"></div>
</div>
<div ng-switch-when="Color" ng-controller="ColorItemController">
<div layout="row" layout-align="start center" class="dimmer-widget">
Expand All @@ -74,31 +77,34 @@ <h2>{{item.state}}%</h2>
<i class="material-icons">wb_incandescent</i>{{getLabel(item.category, null, 'Color')}}
</p>
</div>
<div ng-if="!isOptionList(item)" flex="60" layout="row" layout-align="end center" class="dimmer-widget">
<div ng-if="!isOptionList(item) && !isReadOnly(item)" flex="60" layout="row" layout-align="end center" class="dimmer-widget">

<md-slider class="hue md-default-theme" flex min="0" max="360" ng-model="hue" ng-change="setHue(hue)" aria-label="{{item.label}} hue"></md-slider>
</div>
</div>
<div ng-if="!isOptionList(item)" layout="row" layout-align="start center" class="dimmer-widget">
<div ng-if="!isOptionList(item) && !isReadOnly(item)" layout="row" layout-align="start center" class="dimmer-widget">
<div flex="40">
<p class="">Brightness</p>
</div>
<div flex="60" layout="row" layout-align="end center" class="dimmer-widget">
<md-slider class="md-default-theme" flex min="0" max="100" ng-model="brightness" ng-change="setBrightness(brightness)" aria-label="{{item.label}} brightness"></md-slider>
</div>
</div>
<div ng-if="!isOptionList(item)" layout="row" layout-align="start center" class="dimmer-widget">
<div ng-if="!isOptionList(item) && !isReadOnly(item)" layout="row" layout-align="start center" class="dimmer-widget">
<div flex="40">
<p class="">Saturation</p>
</div>
<div flex="60" layout="row" layout-align="end center" class="dimmer-widget">
<md-slider class="md-default-theme" flex min="0" max="100" ng-model="saturation" ng-change="setSaturation(saturation)" aria-label="{{item.label}} saturation"></md-slider>
</div>
</div>
<div layout="row" item-state-dropdown layout-align="end center" ng-if="isOptionList(item)"></div>
<div ng-if="isReadOnly(item)" flex="100" layout="row" layout-align="end center">
<h2>{{item.state}}</h2>
</div>
<div layout="row" item-state-dropdown layout-align="end center" ng-if="isOptionList(item) && !isReadOnly(item)"></div>
</div>
<div ng-switch-when="Number" ng-controller="NumberItemController">
<div ng-if="!isOptionList(item)">
<div>
<div layout="row" layout-align="start center">
<div flex="40" layout="row" layout-align="start center">
<p>
Expand All @@ -124,7 +130,7 @@ <h2 class="state edit" ng-if="!editMode" ng-click="editState()">{{getStateText(i
<span flex="15" class="text-right" ng-if="getMaxText(item)">{{getMaxText(item)}}</span>
</div>
</div>
<div layout="row" item-state-dropdown layout-align="end center" ng-if="isOptionList(item)"></div>
<div layout="row" item-state-dropdown layout-align="end center" ng-if="isOptionList(item) && !isReadOnly(item)"></div>
</div>
<div ng-switch-when="Rollershutter" ng-controller="RollershutterItemController">
<div layout="row" layout-align="start center">
Expand All @@ -150,7 +156,10 @@ <h2 class="state edit" ng-if="!editMode" ng-click="editState()">{{getStateText(i
</button>
</div>
</div>
<div layout="row" item-state-dropdown layout-align="end center" ng-if="isOptionList(item)"></div>
<div ng-if="isReadOnly(item)" flex="100" layout="row" layout-align="end center">
<h2>{{item.state}}</h2>
</div>
<div layout="row" item-state-dropdown layout-align="end center" ng-if="isOptionList(item) && !isReadOnly(item)"></div>
</div>
<div ng-switch-when="Player" ng-controller="PlayerItemController">
<div layout="row" layout-align="end center">
Expand Down Expand Up @@ -182,11 +191,11 @@ <h2 class="state edit" ng-if="!editMode" ng-click="editState()">{{getStateText(i
<i class="material-icons">{{getIcon(item.category)}}</i>{{getLabel(item.category, item.label, 'Contact')}}
</p>
</div>
<div ng-if="!isOptionList(item)" flex="60" layout="row" layout-align="end center">
<div ng-if="isReadOnly(item)" flex="60" layout="row" layout-align="end center">
<h2 class="state">{{getStateText(item)}}</h2>
</div>
</div>
<div layout="row" item-state-dropdown layout-align="end center" ng-if="isOptionList(item)"></div>
<div layout="row" item-state-dropdown layout-align="end center" ng-if="isOptionList(item) && !isReadOnly(item)"></div>
</div>
<div ng-switch-when="Location" ng-controller="LocationItemController">
<div layout="row" layout-align="start center">
Expand All @@ -199,7 +208,7 @@ <h2 class="state">{{getStateText(item)}}</h2>
<iframe width="100%" ng-src="{{url}}"></iframe>
</div>
</div>
<div layout="row" layout-align="start center" ng-if="!isOptionList(item)">
<div layout="row" layout-align="start center">
<div ng-show="isReadOnly(item)" layout="row" layout-align="end center">
<h2 class="state" ng-if="isReadOnly(item)">{{formattedState}}</h2>
</div>
Expand All @@ -211,7 +220,7 @@ <h2 class="state edit" ng-if="!editMode" ng-click="editState()">{{formattedState
</button>
</div>
</div>
<div layout="row" item-state-dropdown layout-align="end center" ng-if="isOptionList(item)"></div>
<div layout="row" item-state-dropdown layout-align="end center" ng-if="isOptionList(item) && !isReadOnly(item)"></div>
</div>
<div ng-switch-when="Image" ng-controller="ImageItemController">
<div layout-align="start center" layout="row">
Expand Down Expand Up @@ -257,7 +266,7 @@ <h2 class="state editable text-center" ng-if="!editMode" ng-click="editState()"
</div>

<!-- for option list selection -->
<div layout="row" layout-align="start center" ng-show="isOptionList(item)" item-state-dropdown></div>
<div layout="row" layout-align="start center" ng-show="isOptionList(item) && !isReadOnly(item)" item-state-dropdown></div>
</div>
</div>
</div>
Expand Down
3 changes: 1 addition & 2 deletions extensions/ui/org.eclipse.smarthome.ui.paper/web-src/partials/item.state.dropdown.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@

<div layout="row" layout-align="end center" flex="100">
<div class="container options">
<md-select placeholder="Select" class="controlSelect" ng-model="item.state" ng-change="optionListChanged()" ng-disabled="isReadOnly(item)" aria-label={{item.label}}> <md-option ng-value="option.value" ng-repeat="option in item.stateDescription.options"> {{option.label}} ({{option.value}}) </md-option> </md-select>
<md-select placeholder="Select" class="controlSelect" ng-model="item.state" ng-change="optionListChanged()" aria-label={{item.label}}> <md-option ng-value="option.value" ng-repeat="option in item.stateDescription.options"> {{option.label}} ({{option.value}}) </md-option> </md-select>
</div>
</div>

0 comments on commit 81a0fdf

Please sign in to comment.