This repository has been archived by the owner on May 7, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 783
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Paper UI: modularize things view with smaller components (#6340)
* Introduce Magic online/offline toggle thing * Paper UI: listen for thing status changes, too * Paper UI: refactor things view to component style * Split things view into smaller components, add thing status changed listener Signed-off-by: Henning Treu <henning.treu@telekom.de>
- Loading branch information
1 parent
558a8dc
commit 493a0a1
Showing
21 changed files
with
366 additions
and
155 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
66 changes: 66 additions & 0 deletions
66
.../src/main/java/org/eclipse/smarthome/magic/binding/handler/MagicOnlineOfflineHandler.java
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| /** | ||
| * Copyright (c) 2014,2018 Contributors to the Eclipse Foundation | ||
| * | ||
| * See the NOTICE file(s) distributed with this work for additional | ||
| * information regarding copyright ownership. | ||
| * | ||
| * This program and the accompanying materials are made available under the | ||
| * terms of the Eclipse Public License 2.0 which is available at | ||
| * http://www.eclipse.org/legal/epl-2.0 | ||
| * | ||
| * SPDX-License-Identifier: EPL-2.0 | ||
| */ | ||
| package org.eclipse.smarthome.magic.binding.handler; | ||
|
|
||
| import java.math.BigDecimal; | ||
| import java.util.concurrent.ScheduledFuture; | ||
| import java.util.concurrent.TimeUnit; | ||
|
|
||
| import org.eclipse.smarthome.core.thing.ChannelUID; | ||
| import org.eclipse.smarthome.core.thing.Thing; | ||
| import org.eclipse.smarthome.core.thing.ThingStatus; | ||
| import org.eclipse.smarthome.core.thing.binding.BaseThingHandler; | ||
| import org.eclipse.smarthome.core.types.Command; | ||
|
|
||
| /** | ||
| * The {@link MagicOnlineOfflineHandler} is responsible for handling commands, which are | ||
| * sent to one of the channels. | ||
| * | ||
| * @author Henning Treu - Initial contribution | ||
| */ | ||
| public class MagicOnlineOfflineHandler extends BaseThingHandler { | ||
|
|
||
| private static final String TOGGLE_TIME = "toggleTime"; | ||
|
|
||
| private ScheduledFuture<?> toggleJob; | ||
|
|
||
| public MagicOnlineOfflineHandler(Thing thing) { | ||
| super(thing); | ||
| } | ||
|
|
||
| @Override | ||
| public void handleCommand(ChannelUID channelUID, Command command) { | ||
| } | ||
|
|
||
| @Override | ||
| public void initialize() { | ||
| int toggleTime = ((BigDecimal) getConfig().get(TOGGLE_TIME)).intValue(); | ||
|
|
||
| toggleJob = scheduler.scheduleWithFixedDelay(() -> { | ||
| if (getThing().getStatus() == ThingStatus.ONLINE) { | ||
| updateStatus(ThingStatus.OFFLINE); | ||
| } else if (getThing().getStatus() != ThingStatus.ONLINE) { | ||
| updateStatus(ThingStatus.ONLINE); | ||
| } | ||
| }, 0, toggleTime, TimeUnit.SECONDS); | ||
| } | ||
|
|
||
| @Override | ||
| public void dispose() { | ||
| if (toggleJob != null) { | ||
| toggleJob.cancel(true); | ||
| toggleJob = null; | ||
| } | ||
| super.dispose(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
...sions/ui/org.eclipse.smarthome.ui.paper/web-src/js/things/component.thing.statusInfo.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <small class="badge" ng-class="$ctrl.statusInfo.status.toLowerCase()">{{$ctrl.statusInfo.status}}</small> |
11 changes: 11 additions & 0 deletions
11
extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/things/component.thing.statusInfo.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| ; | ||
| (function() { | ||
| 'use strict'; | ||
|
|
||
| angular.module('PaperUI.things').component('thingStatus', { | ||
| bindings : { | ||
| statusInfo : '<' | ||
| }, | ||
| templateUrl : 'partials/things/component.thing.statusInfo.html' | ||
| }); | ||
| })() |
18 changes: 18 additions & 0 deletions
18
...ions/ui/org.eclipse.smarthome.ui.paper/web-src/js/things/component.things-list-entry.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <div class="thing fab-item text-left" data-thing-uid="{{$ctrl.thing.UID}}" ng-click="$ctrl.navigateTo('view/' + $ctrl.thing.UID)"> | ||
| <div class="circle">{{$ctrl.thing.thingTypeUID?$ctrl.thing.thingTypeUID.split(':')[1].substring(0,1).toUpperCase():''}}</div> | ||
| <div class="cbody item-content"> | ||
| <div class="description"> | ||
| <h3> | ||
| {{$ctrl.thing.label}} | ||
| <thing-status status-info="$ctrl.thing.statusInfo"></thing-status> | ||
| </h3> | ||
| <p>{{$ctrl.getThingTypeLabel()}}</p> | ||
| <p>{{$ctrl.thing.UID}}</p> | ||
| </div> | ||
| <div class="actions"> | ||
| <i class="material-icons" ng-click="$ctrl.navigateTo('edit/' + $ctrl.thing.UID)" aria-label="Edit">edit</i> | ||
| <i class="material-icons" ng-click="$ctrl.remove($ctrl.thing, $event)" aria-label="Delete">delete</i> | ||
| </div> | ||
| </div> | ||
| <hr class="border-line" ng-show="!$last" /> | ||
| </div> |
76 changes: 76 additions & 0 deletions
76
...nsions/ui/org.eclipse.smarthome.ui.paper/web-src/js/things/component.things-list-entry.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| ; | ||
| (function() { | ||
| 'use strict'; | ||
|
|
||
| angular.module('PaperUI.things').component('thingEntry', { | ||
| bindings : { | ||
| thing : '<' | ||
| }, | ||
| templateUrl : 'partials/things/component.things-list-entry.html', | ||
| controller : ThingEntryController | ||
|
|
||
| }); | ||
|
|
||
| ThingEntryController.$inject = [ '$location', '$timeout', '$mdDialog', 'thingTypeRepository', 'eventService' ]; | ||
|
|
||
| function ThingEntryController($location, $timeout, $mdDialog, thingTypeRepository, eventService) { | ||
| var ctrl = this; | ||
| this.thingTypes = []; | ||
|
|
||
| this.getThingTypeLabel = getThingTypeLabel; | ||
| this.navigateTo = navigateTo; | ||
| this.remove = remove; | ||
|
|
||
| this.$onInit = activate; | ||
| this.$onDestroy = dispose; | ||
|
|
||
| function activate() { | ||
| eventService.onEvent('smarthome/things/' + ctrl.thing.UID + '/statuschanged', function(topic, statusInfo) { | ||
| $timeout(function() { | ||
| ctrl.thing.statusInfo = statusInfo[0]; | ||
| }, 0); | ||
| }); | ||
|
|
||
| return refreshThingTypes(); | ||
| } | ||
|
|
||
| function dispose() { | ||
| eventService.removeListener('smarthome/things/' + ctrl.thing.UID + '/statuschanged'); | ||
| } | ||
|
|
||
| function navigateTo(path) { | ||
| if (path.startsWith("/")) { | ||
| $location.path(path); | ||
| } else { | ||
| $location.path('configuration/things/' + path); | ||
| } | ||
| } | ||
|
|
||
| function getThingTypeLabel() { | ||
| var thingType = ctrl.thingTypes[ctrl.thing.thingTypeUID] | ||
| return thingType ? thingType.label : ''; | ||
| } | ||
|
|
||
| function refreshThingTypes() { | ||
| return thingTypeRepository.getAll(function(thingTypes) { | ||
| angular.forEach(thingTypes, function(thingType) { | ||
| ctrl.thingTypes[thingType.UID] = thingType; | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| function remove(thing, event) { | ||
| event.stopImmediatePropagation(); | ||
| $mdDialog.show({ | ||
| controller : 'RemoveThingDialogController', | ||
| templateUrl : 'partials/things/dialog.removething.html', | ||
| targetEvent : event, | ||
| hasBackdrop : true, | ||
| locals : { | ||
| thing : thing | ||
| } | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| })() |
39 changes: 39 additions & 0 deletions
39
extensions/ui/org.eclipse.smarthome.ui.paper/web-src/js/things/component.things-list.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| <section class="fill-height configMain"> | ||
| <div class="things white-bg"> | ||
| <div class="header-toolbar"> | ||
| <md-button ng-click="$ctrl.refresh()" aria-label="Refresh"> <i class="material-icons">refresh</i></md-button> | ||
| </div> | ||
| <div class="section-header"> | ||
| <div class="container"> | ||
| <div class="toolbar"> | ||
| <md-button class="md-fab" ng-click="$ctrl.navigateTo('/inbox/setup')" aria-label="Add"> <i class="material-icons">add</i></md-button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="search itemSearch" layout="row" layout-align="center center"> | ||
| <div layout="row" flex="85" class="searchControl" layout-align="start center"> | ||
| <i ng-style="{'font-size': '24px'}" class="material-icons">search</i> | ||
| <md-input-container flex="90" md-no-float class="md-block searchBox"> <input ng-model="searchText" type="text" placeholder="Search"> </md-input-container> | ||
| <i ng-click="searchText = undefined" ng-class="{'vhidden': !searchText}" ng-style="{'font-size': '24px'}" class="material-icons clickable">close</i> | ||
| </div> | ||
| <div layout="row" flex="15" class="controls" layout-align="start center" ng-init="showMore=false"> | ||
| <i class="material-icons clickable" ng-click="showMore=!showMore">{{showMore?'unfold_less':'unfold_more'}}</i> | ||
| <button class="md-button clickable" ng-click="$ctrl.clearAll()">clear</button> | ||
| </div> | ||
| </div> | ||
| <div class="row" ng-show="showMore" class="searchBox" search-filters> | ||
| <md-autocomplete md-no-cache config='{"index":0,"targetField":"bindingType","sourceField":"id"}' class="col-xs-12 md-filter" md-min-length="0" md-selected-item="selectedOptions[0].value" md-item-text="binding.name" md-search-text="searchType" md-items="binding in searchInOptions($ctrl.bindings,['name'],searchType) | orderBy:'name'" placeholder="Filter by binding"> <md-item-template> <span md-highlight-text="searchType" md-highlight-flags="^i">{{binding.name}}</span> </md-item-template> <md-not-found> No matches found. </md-not-found> </md-autocomplete> | ||
| </div> | ||
| <div class="container thingContainer"> | ||
| <p class="text-center" ng-show="$ctrl.things.length == 0"> | ||
| No things configured yet. | ||
| <button class="md-button" ng-click="$ctrl.navigateTo('/inbox/setup')">Add Things</button> | ||
| </p> | ||
| <div class="things"> | ||
| <div class="clickable" ng-class="{'new':newThingUID==thing.UID,'lastThing':$last}" ng-repeat="thing in $ctrl.things | filter:filterItems(['label','UID'])| orderBy:'label'"> | ||
| <thing-entry thing="thing"></thing-entry> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> |
Oops, something went wrong.