Add a custom widget configuration type of "thing" that generates a th…

…ing picker. Also, add things to the OHService API.
hww3 · Aug 10, 2018 · 401c8e8 · 401c8e8
1 parent c5a8a7c
commit 401c8e8
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 15 deletions.
diff --git a/web/app/dashboard/dashboard.edit.controller.js b/web/app/dashboard/dashboard.edit.controller.js
@@ -84,7 +84,7 @@ angular.module('app')
             };
 
 
-            OHService.reloadItems();
+            OHService.reloadData();
             iNoBounce.disable();
 
             $scope.widgetGalleryTooltip = TranslationService.translate('designer.addwidget.getmore.tooltip', 'Open the widget gallery to import more widgets');

diff --git a/web/app/dashboard/dashboard.view.controller.js b/web/app/dashboard/dashboard.view.controller.js
@@ -49,7 +49,7 @@
 
     function activate() {
         $timeout(function() {
-            OHService.reloadItems();
+            OHService.reloadData();
             OHService.getLocale();
         });
         if ($rootScope.settings.no_scrolling) iNoBounce.enable(); else iNoBounce.disable();
@@ -62,7 +62,7 @@
     }
 
     vm.refresh = function() {
-        OHService.reloadItems();
+        OHService.reloadData();
     };
 
     vm.goFullscreen = function() {

diff --git a/web/app/menu/menu.controller.js b/web/app/menu/menu.controller.js
@@ -22,7 +22,7 @@
             if ($rootScope.settings.no_scrolling) iNoBounce.enable(); else iNoBounce.disable();
             if ($routeParams.kiosk) $rootScope.kioskMode = ($routeParams.kiosk == 'on');
 
-            OHService.reloadItems();
+            OHService.reloadData();
         }
 
         if (!$rootScope.menucolumns)

diff --git a/web/app/services/openhab.service.js b/web/app/services/openhab.service.js
@@ -11,14 +11,18 @@
     function OHService($rootScope, $http, $q, $timeout, $interval, $filter, $location, SpeechService, tmhDynamicLocale, $translate) {
         this.getItem = getItem;
         this.getItems = getItems;
+        this.getThing = getThing;
+        this.getThingByUid = getThingByUid;
+        this.getThings = getThings;
         this.getLocale = getLocale;
         this.onUpdate = onUpdate;
         this.sendCmd = sendCmd;
         this.sendVoice = sendVoice;
-        this.reloadItems = reloadItems;
+        this.reloadData = reloadData;
 
         var liveUpdatesEnabled = false, prevAudioUrl = '', locale = null, eventSource = null;
 
+
         ////////////////
 
         function onUpdate(scope, name, callback) {
@@ -28,7 +32,7 @@
             //longPollUpdates(name);
         }
 
-        function loadItems() {
+        function loadData() {
             $http.get('/rest/items')
             .then(function (data) {
                 if (angular.isArray(data.data)) {
@@ -40,26 +44,60 @@
                     console.warn("Items not found? Retrying in 5 seconds");
                     $rootScope.reconnecting = true;
                     $rootScope.items = [];
-                    $timeout(loadItems, 5000);
+                    $timeout(loadData, 5000);
                 }
                 $rootScope.$emit('openhab-update');
             },
             function (err) {
                 console.warn("Error loading openHAB items... retrying in 5 seconds");
                 $rootScope.reconnecting = true;
-                $timeout(loadItems, 5000);
+                $timeout(loadData, 5000);
             });
+
+            $http.get('/rest/things')
+                .then(function (data) {
+                        if (angular.isArray(data.data)) {
+                            console.log("Loaded " + data.data.length + " openHAB things");
+                            $rootScope.reconnecting = false;
+                            $rootScope.things = data.data;
+                        } else {
+                            console.warn("Things not found? Retrying in 5 seconds");
+                            $rootScope.reconnecting = true;
+                            $rootScope.things = [];
+                            $timeout(loadData, 5000);
+                        }
+                        $rootScope.$emit('openhab-update');
+                    },
+                    function (err) {
+                        console.warn("Error loading openHAB things... retrying in 5 seconds");
+                        $rootScope.reconnecting = true;
+                        $timeout(loadData, 5000);
+                    });
         }
 
         function getItem(name) {
             var item = $filter('filter')($rootScope.items, {name: name}, true); 
             return (item) ? item[0] : null;
         }
 
+        function getThing(name) {
+            var thing = $filter('filter')($rootScope.things, {name: name}, true);
+            return (thing) ? thing[0] : null;
+        }
+
+        function getThingByUid(thingUid) {
+            var thing = $filter('filter')($rootScope.things, {UID: thingUid}, true);
+            return (thing) ? thing[0] : null;
+        }
+
         function getItems() {
             return $rootScope.items;
         }
 
+        function getThings() {
+            return $rootScope.things;
+        }
+
         /**
          * Sends command to openHAB
          * @param  {string} item Item's id
@@ -76,7 +114,7 @@
 
                 // should be handled by server push messages but their delivery is erratic
                 // so perform a full refresh every time a command is sent
-                //loadItems();
+                //loadData();
             });
         }
 
@@ -154,8 +192,8 @@
             });
         }
 
-        function reloadItems() {
-            loadItems();
+        function reloadData() {
+            loadData();
         }
 
         function registerEventSource() {
@@ -259,7 +297,7 @@
                     console.error('SSE error, closing EventSource');
                     liveUpdatesEnabled = false;
                     this.close();
-                    $timeout(loadItems, 5000);
+                    $timeout(loadData, 5000);
                 }
             }
         }

diff --git a/web/app/settings/settings.controller.js b/web/app/settings/settings.controller.js
@@ -89,6 +89,11 @@
             return item.type.startsWith('String');
         }
 
+        vm.isThingItem = function (item) {
+            return item.type.startsWith('Thing');
+        }
+
+
         vm.supportsSpeech = SpeechService.isSpeechRecognitionSupported();
 
         vm.supportsTheming = ($window.CSS && $window.CSS.supports && $window.CSS.supports('--a', 0));
@@ -113,7 +118,7 @@
 
             $timeout(function () {
                 vm.voices = SpeechService.getVoices();
-                OHService.reloadItems();
+                OHService.reloadData();
             }, 200);
 
             if (window.speechSynthesis && window.speechSynthesis.addEventListener) {

diff --git a/web/app/settings/settings.widgets.designer.controller.js b/web/app/settings/settings.widgets.designer.controller.js
@@ -58,7 +58,7 @@
         };
 
         $scope.refreshPreview = function () {
-            OHService.reloadItems();
+            OHService.reloadData();
             $timeout(function () {
                 $scope.$broadcast('rzSliderForceRender');
                 vm.previewmodel.row = 0;

diff --git a/web/app/settings/settings.widgets.designer.html b/web/app/settings/settings.widgets.designer.html
@@ -63,6 +63,7 @@ <h4 translate-keep-content translate="customwidgets.designer.settings.config">Co
                                             <option value="number" translate-keep-content translate="customwidgets.designer.settings.config.type.number">Number</option>
                                             <option value="checkbox" translate-keep-content translate="customwidgets.designer.settings.config.type.checkbox">Checkbox</option>
                                             <option value="item" translate-keep-content translate="customwidgets.designer.settings.config.type.item">Item</option>
+                                            <option value="thing" translate-keep-content translate="customwidgets.designer.settings.config.type.thing">Thing</option>
                                             <option value="color" translate-keep-content translate="customwidgets.designer.settings.config.type.color">Color</option>
                                             <option value="choice" translate-keep-content translate="customwidgets.designer.settings.config.type.choices">Choices</option>
                                             <option value="icon" translate-keep-content translate="customwidgets.designer.settings.config.type.icon">Icon</option>

diff --git a/web/app/widgets/template/template.settings.tpl.html b/web/app/widgets/template/template.settings.tpl.html
@@ -64,6 +64,7 @@ <h4 ng-if="setting.type === 'heading'">{{setting.label}}</h4>
                         <input ng-switch-when="number" type="number" ng-model="form.config[setting.id]" class="form-control" step="any" style="width: 120px">
                         <div ng-switch-when="checkbox" style="padding-top: 7px"><input type="checkbox" ng-model="form.config[setting.id]"> {{setting.description}}</div>
                         <item-picker ng-switch-when="item" ng-model="form.config[setting.id]"></item-picker>
+                        <thing-picker ng-switch-when="thing" ng-model="form.config[setting.id]"></thing-picker>
                         <select ng-switch-when="choice" ng-options="choice for choice in setting.choices.split(',')" ng-model="form.config[setting.id]" class="form-control"></select>
                         <icon-picker ng-switch-when="icon" iconset="form.config[setting.id + '_iconset']" icon="form.config[setting.id]"></icon-picker>
                         <div ng-switch-when="color" dab-model="form.config[setting.id]" web-colorpicker dab-width="20" dab-height="20" dab-radius="50" dab-vertical="4" dab-rotate="0" show-grayscale="true"></div>

diff --git a/web/app/widgets/template/template.widget.js b/web/app/widgets/template/template.widget.js
@@ -113,7 +113,7 @@
                 }).rendered.then(function () {
                     $timeout(function () {
                         $rootScope.$broadcast('openhab-update');
-                        OHService.reloadItems();
+                        OHService.reloadData();
                     });
                 });
             }

diff --git a/web/app/widgets/widgets.module.js b/web/app/widgets/widgets.module.js
@@ -18,6 +18,7 @@
     .directive('widgetIcon', WidgetIcon)
     .directive('itemTypeIcon', ItemTypeIcon)
     .directive('itemPicker', ItemPicker)
+    .directive('thingPicker', ThingPicker)
     .filter('themeValue', ThemeValueFilter)
 
 
@@ -187,6 +188,55 @@
         vm.placeholderText = TranslationService.translate('itempicker.placeholder', 'Search or select an openHAB item');
     }
 
+    ThingPicker.$inject = ['$filter', 'OHService'];
+
+    function ThingPicker($filter, OHService) {
+        var directive = {
+            bindToController: true,
+            link: link,
+            controller: ThingPickerController,
+            controllerAs: 'vm',
+            restrict: 'AE',
+            template:
+            '<ui-select ng-model="vm.selectedThing" theme="selectize" title="Choose an openHAB thing">' +
+            '  <ui-select-match placeholder="{{vm.placeholderText}}"><item-type-icon type="$select.selected.type"></item-type-icon>&nbsp;{{$select.selected.label}}</ui-select-match>' +
+            '  <ui-select-choices repeat="thing in vm.thinglist | filter: $select.search">' +
+            '    <div><item-type-icon type="thing.type"></item-type-icon>&nbsp;<span ng-bind-html="thing.label | highlight: $select.search"></div>' +
+            '    <small ng-bind-html="thing.UID | highlight: $select.search"></small>' +
+            '  </ui-select-choices>' +
+            '</ui-select>',
+            scope: {
+                ngModel: '=',
+                filterType: '@',
+/*
+                includeGroups: '=?'
+*/
+            }
+        };
+        return directive;
+
+        function link(scope, element, attrs) {
+        }
+    }
+    ThingPickerController.$inject = ['$scope', '$filter', 'OHService', 'TranslationService'];
+    function ThingPickerController ($scope, $filter, OHService, TranslationService) {
+        var vm = this;
+        vm.selectedThing = OHService.getThing(this.ngModel);
+        vm.thinglist = OHService.getThings();
+        if (this.filterType) {
+            vm.thinglist = $filter('filter')(vm.thinglist, function (thing) {
+                return !thing.thingTypeUID.indexOf(vm.filterType);
+            });
+        }
+
+        $scope.$watch("vm.selectedThing", function (newthing, oldvalue) {
+            if (newthing && newthing.UID)
+                $scope.vm.ngModel = newthing.UID;
+        });
+
+        vm.placeholderText = TranslationService.translate('thingpicker.placeholder', 'Search or select an openHAB thing');
+    }
+
     ThemeValueFilter.$inject = ['$window'];
     function ThemeValueFilter($window) {
         return fallbackToThemeValue;