Icons in the item picker (#207)

Signed-off-by: Yannick Schaus <habpanel@schaus.net>
openhab · Jul 22, 2017 · 15afb58 · 15afb58
1 parent 661fea5
commit 15afb58
Showing 1 changed file with 41 additions and 4 deletions.
diff --git a/web/app/widgets/widgets.module.js b/web/app/widgets/widgets.module.js
@@ -16,6 +16,7 @@
     .factory('Widgets', WidgetsService)
     .directive('genericWidget', GenericWidgetDirective)
     .directive('widgetIcon', WidgetIcon)
+    .directive('itemTypeIcon', ItemTypeIcon)
     .directive('itemPicker', ItemPicker)
     .filter('themeValue', ThemeValueFilter)
 
@@ -99,6 +100,42 @@
         }
     }
 
+    function ItemTypeIcon() {
+        var directive = {
+            link: link,
+            restrict: 'AE',
+            template:
+                '<strong ng-if="type === \'Number\'" title="Number" style="font-size: 1.2em; line-height: 0.9em; margin: -0.2em 0.1em;">#</strong>' +
+                '<i ng-if="type !== \'Number\'" title="{{type}}" class="glyphicon glyphicon-{{getGlyph()}}"></i>',
+            scope: {
+                type: '='
+            }
+        };
+        return directive;
+
+        function link(scope, element, attrs) {
+            scope.getGlyph = function () {
+                switch (scope.type) {
+                   case 'Group': return 'th-large';
+                    case 'Switch': return 'off';
+                    case 'String': return 'font';
+                    case 'Number': return 'usd';
+                    case 'Color': return 'tint';
+                    case 'DateTime': return 'calendar';
+                    case 'Dimmer': return 'sort-by-attributes';
+                    case 'Rollershutter': return 'oil';
+                    case 'Contact': return 'resize-small';
+                    case 'Player': return 'fast-forward';
+                    case 'Image': return 'picture';
+                    case 'Location': return 'map-marker';
+                    case 'Call': return 'earphone';
+                    default: return 'asterisk';
+                }
+            };
+        }
+    }
+
+
     ItemPicker.$inject = ['$filter', 'OHService'];
 
     function ItemPicker($filter, OHService) {
@@ -110,9 +147,9 @@
             restrict: 'AE',
             template:
                 '<ui-select ng-model="vm.selectedItem" theme="selectize" title="Choose an openHAB item">' +
-                '  <ui-select-match placeholder="Search or select an openHAB item">{{$select.selected.name}}</ui-select-match>' +
+                '  <ui-select-match placeholder="Search or select an openHAB item"><item-type-icon type="$select.selected.type"></item-type-icon>&nbsp;{{$select.selected.name}}</ui-select-match>' +
                 '  <ui-select-choices repeat="item in vm.itemlist | filter: $select.search">' +
-                '    <div ng-bind-html="item.name | highlight: $select.search"></div>' +
+                '    <div><item-type-icon type="item.type"></item-type-icon>&nbsp;<span ng-bind-html="item.name | highlight: $select.search"></div>' +
                 '    <small ng-bind-html="item.label | highlight: $select.search"></small>' +
                 '  </ui-select-choices>' +
                 '</ui-select>',
@@ -135,9 +172,9 @@
         if (this.filterType) {
             vm.itemlist = $filter('filter')(vm.itemlist, function (item) {
                 if (vm.includeGroups) {
-                    return item.type.startsWith(vm.filterType) || item.type.startsWith('Group');
+                    return !item.type.indexOf(vm.filterType) || !item.type.indexOf('Group');
                 } else {
-                    return item.type.startsWith(vm.filterType);
+                    return !item.type.indexOf(vm.filterType);
                 }
             });
         }