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

Commit

Permalink
Support state options in control UI (#1888)
Browse files Browse the repository at this point in the history 
Signed-off-by: Aoun Bukhari <bukhari@itemis.de>
  • Loading branch information
@aounhaider1 @kaikreuzer
aounhaider1 authored and kaikreuzer committed Jul 26, 2016
1 parent 369e42b commit ea370b1
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 47 deletions.
15 changes: 14 additions & 1 deletion 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 @@ -103,6 +103,14 @@ angular.module('PaperUI.controllers.control', []).controller('ControlPageControl
for (var int = 0; int < $scope.data.items.length; int++) {
var item = $scope.data.items[int];
if (item.name === itemName) {
if (item.type && (item.type == "NumberItem" || item.groupType == "Number")) {
var parsedValue = Number(item.state);
if (isNaN(parsedValue)) {
item.state = null;
} else {
item.state = parsedValue;
}
}
return item;
}
}
Expand Down Expand Up @@ -513,4 +521,9 @@ angular.module('PaperUI.controllers.control', []).controller('ControlPageControl
$scope.init();
});
$scope.init();
});
}).directive('itemStateDropdown', function() {
return {
restrict : 'A',
templateUrl : "partials/item.state.dropdown.html"
};
})
8 changes: 8 additions & 0 deletions extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/controllers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,14 @@ angular.module('PaperUI.controllers', [ 'PaperUI.constants' ]).controller('BodyC
updateState = false;
}
}
if (item.type === "NumberItem" || item.groupType === "Number") {
var parsedValue = Number(state);
if (isNaN(parsedValue)) {
state = null;
} else {
state = parsedValue;
}
}

if (updateState) {
$scope.$apply(function(scope) {
Expand Down
88 changes: 42 additions & 46 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 @@ -39,10 +39,11 @@ <h2>{{group.name}}</h2>
<i class="material-icons">{{getIcon(item.category)}}</i>{{getLabel(item.category, item.label, 'Switch')}}
</p>
</div>
<div flex="60" layout="row" layout-align="end center" class="switch-widget">
<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>
<div layout="row" item-state-dropdown layout-align="end center" ng-if="isOptionList(item)"></div>
</div>
<div ng-switch-when="DimmerItem" ng-controller="DimmerItemController">
<div layout="row" layout-align="start center" class="dimmer-widget">
Expand All @@ -51,19 +52,20 @@ <h2>{{group.name}}</h2>
<i class="material-icons">{{getIcon(item.category, 'brightness_medium')}}</i>{{getLabel(item.category, item.label, 'Dimmer')}}
</p>
</div>
<div flex="60" layout="row" layout-align="end center" class="dimmer-widget">
<div ng-if="!isOptionList(item)" flex="60" layout="row" layout-align="end center" class="dimmer-widget">
<h2>{{item.state}}%</h2>
</div>
</div>
<md-slider 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)">
<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)">
<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>
<div ng-switch-when="ColorItem" ng-controller="ColorItemController">
<div layout="row" layout-align="start center" class="dimmer-widget">
Expand All @@ -72,53 +74,57 @@ <h2>{{item.state}}%</h2>
<i class="material-icons">wb_incandescent</i>{{getLabel(item.category, null, 'Color')}}
</p>
</div>
<div flex="60" layout="row" layout-align="end center" class="dimmer-widget">
<div ng-if="!isOptionList(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 layout="row" layout-align="start center" class="dimmer-widget">
<div ng-if="!isOptionList(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 layout="row" layout-align="start center" class="dimmer-widget">
<div ng-if="!isOptionList(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>
<div ng-switch-when="NumberItem" ng-controller="NumberItemController">
<div layout="row" layout-align="start center">
<div flex="40" layout="row" layout-align="start center">
<p>
<i class="material-icons">{{getIcon(item.category, 'trending_up')}}</i>{{getLabel(item.category, item.label, 'Value')}}
</p>
</div>
<div flex="60">
<div ng-show="isReadOnly(item)" layout="row" layout-align="end center">
<h2 class="state" ng-if="isReadOnly(item)">{{getStateText(item)}}</h2>
<div ng-if="!isOptionList(item)">
<div layout="row" layout-align="start center">
<div flex="40" layout="row" layout-align="start center">
<p>
<i class="material-icons">{{getIcon(item.category, 'trending_up')}}</i>{{getLabel(item.category, item.label, 'Value')}}
</p>
</div>
<div ng-show="!isReadOnly(item)" layout="row" layout-align="end center">
<h2 class="state edit" ng-if="!editMode" ng-click="editState()">{{getStateText(item)}}</h2>
<md-input-container ng-show="editMode"> <input ng-model="item.state" aria-label={{item.label}}></input> </md-input-container>
<button class="md-button" ng-show="editMode" ng-click="updateState()">
<i class="material-icons">check</i>
</button>
<div flex="60">
<div ng-show="isReadOnly(item)" layout="row" layout-align="end center">
<h2 class="state" ng-if="isReadOnly(item)">{{getStateText(item)}}</h2>
</div>
<div ng-show="!isReadOnly(item)" layout="row" layout-align="end center">
<h2 class="state edit" ng-if="!editMode" ng-click="editState()">{{getStateText(item)}}</h2>
<md-input-container ng-show="editMode"> <input ng-model="item.state" aria-label={{item.label}} type="number"></input> </md-input-container>
<button class="md-button" ng-show="editMode" ng-click="updateState()">
<i class="material-icons">check</i>
</button>
</div>
</div>
</div>
<div ng-show="!isReadOnly(item)" layout="row" layout-align="start center" class="number-control-widget">
<span flex="15" class="text-left" ng-if="getMinText(item)">{{getMinText(item)}}</span>
<md-slider class="md-default-theme" flex="70" min="{{item.stateDescription.minimum}}" max="{{item.stateDescription.maximum}}" step="{{item.stateDescription.step}}" ng-model="item.state" md-discrete="true" ng-if="getMinText(item) && getMaxText(item)" ng-change="sendCommand(item.state)" aria-label={{item.label}}></md-slider>
<span flex="15" class="text-right" ng-if="getMaxText(item)">{{getMaxText(item)}}</span>
</div>
</div>
<div ng-show="!isReadOnly(item)" layout="row" layout-align="start center" class="number-control-widget">
<span flex="15" class="text-left" ng-if="getMinText(item)">{{getMinText(item)}}</span>
<md-slider class="md-default-theme" flex="70" min="{{item.stateDescription.minimum}}" max="{{item.stateDescription.maximum}}" step="{{item.stateDescription.step}}" ng-model="item.state" md-discrete="true" ng-if="getMinText(item) && getMaxText(item)" ng-change="sendCommand(item.state)" aria-label={{item.label}}></md-slider>
<span flex="15" class="text-right" ng-if="getMaxText(item)">{{getMaxText(item)}}</span>
</div>
<div layout="row" item-state-dropdown layout-align="end center" ng-if="isOptionList(item)"></div>
</div>
<div ng-switch-when="RollershutterItem" ng-controller="RollershutterItemController">
<div layout="row" layout-align="start center">
Expand All @@ -127,15 +133,8 @@ <h2 class="state edit" ng-if="!editMode" ng-click="editState()">{{getStateText(i
<i class="material-icons">{{getIcon(item.category, 'format_align_justify')}}</i>{{getLabel(item.category, item.label, 'Position')}}
</p>
</div>
<div flex="60" layout="row" layout-align="end center">
<h2 class="state editable text-center" ng-if="!editMode" ng-click="editState()">{{item.state}} %</h2>
<md-input-container ng-show="editMode" flex aria-label={{item.label}}> <input ng-model="item.state" aria-label={{item.label}}></input> </md-input-container>
<button class="md-button" ng-show="editMode" ng-click="updateState()">
<i class="material-icons">check</i>
</button>
</div>
</div>
<div layout="row" layout-align="end center">
<div ng-if="!isOptionList(item)" layout="row" layout-align="end center">
<div flex="40" layout="row" layout-align="start center">
<p>Control</p>
</div>
Expand All @@ -151,6 +150,7 @@ <h2 class="state editable text-center" ng-if="!editMode" ng-click="editState()">
</button>
</div>
</div>
<div layout="row" item-state-dropdown layout-align="end center" ng-if="isOptionList(item)"></div>
</div>
<div ng-switch-when="PlayerItem" ng-controller="PlayerItemController">
<div layout="row" layout-align="end center">
Expand All @@ -176,16 +176,17 @@ <h2 class="state editable text-center" ng-if="!editMode" ng-click="editState()">
</div>
</div>
<div ng-switch-when="ContactItem" ng-controller="DefaultItemController">
<div layout="row" layout-align="end center">
<div layout="row" layout-align="start center">
<div flex="40" layout="row" layout-align="start center">
<p>
<i class="material-icons">{{getIcon(item.category)}}</i>{{getLabel(item.category, item.label, 'Contact')}}
</p>
</div>
<div flex="60" layout="row" layout-align="end center">
<div ng-if="!isOptionList(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>
<div ng-switch-when="LocationItem" ng-controller="LocationItemController">
<div layout="row" layout-align="start center">
Expand All @@ -198,7 +199,7 @@ <h2 class="state">{{getStateText(item)}}</h2>
<iframe width="100%" ng-src="{{url}}"></iframe>
</div>
</div>
<div layout="row" layout-align="start center">
<div layout="row" layout-align="start center" ng-if="!isOptionList(item)">
<div ng-show="isReadOnly(item)" layout="row" layout-align="end center">
<h2 class="state" ng-if="isReadOnly(item)">{{formattedState}}</h2>
</div>
Expand All @@ -210,6 +211,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>
<div ng-switch-when="ImageItem" ng-controller="ImageItemController">
<div layout-align="start center" layout="row">
Expand Down Expand Up @@ -247,21 +249,15 @@ <h2 class="state" ng-if="isReadOnly(item)">{{getStateText(item)}}</h2>
</div>
<div ng-show="!isReadOnly(item)" layout="row" layout-align="end center" flex="100">
<h2 class="state editable text-center" ng-if="!editMode" ng-click="editState()" flex>{{getStateText(item)}}</h2>
<md-input-container ng-show="editMode" flex> <input ng-model="item.state" aria-label={{item.label}}></input> </md-input-container>
<md-input-container ng-show="editMode" flex> <input ng-if="item.groupType=='Number'" type="number" ng-model="item.state" aria-label={{item.label}}></input> <input ng-if="item.groupType!='Number'" ng-model="item.state" aria-label={{item.label}}></input> </md-input-container>
<button class="md-button" ng-show="editMode" ng-click="updateState()">
<i class="material-icons">check</i>
</button>
</div>
</div>

<!-- for option list selection -->
<div layout="row" layout-align="start center" ng-show="isOptionList(item)">
<div layout="row" layout-align="end center" flex="100">
<div class="container options">
<md-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>
</div>
</div>
</div>
<div layout="row" layout-align="start center" ng-show="isOptionList(item)" item-state-dropdown></div>
</div>
</div>
</div>
Expand Down
7 changes: 7 additions & 0 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
@@ -0,0 +1,7 @@

<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>
</div>
</div>

0 comments on commit ea370b1

Please sign in to comment.