From 81088e0d070ded316457d69d39eb94729963f0a6 Mon Sep 17 00:00:00 2001
From: Joakim Plate <elupus@ecce.se>
Date: Fri, 3 May 2019 17:54:38 +0200
Subject: [PATCH] Simplify list selection 2 (#3156)

* light: use attr-for-selected for effect

* vacuum: use attr-for-selection for speed
---
 .../more-info/controls/more-info-light.js     | 34 +++++++------------
 .../more-info/controls/more-info-vacuum.js    | 27 +++++++--------
 2 files changed, 24 insertions(+), 37 deletions(-)

diff --git a/src/dialogs/more-info/controls/more-info-light.js b/src/dialogs/more-info/controls/more-info-light.js
index 682f2e1e2c..d75c11dccb 100644
--- a/src/dialogs/more-info/controls/more-info-light.js
+++ b/src/dialogs/more-info/controls/more-info-light.js
@@ -182,12 +182,17 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
             dynamic-align=""
             label="[[localize('ui.card.light.effect')]]"
           >
-            <paper-listbox slot="dropdown-content" selected="{{effectIndex}}">
+            <paper-listbox
+              slot="dropdown-content"
+              selected="[[stateObj.attributes.effect]]"
+              on-selected-changed="effectChanged"
+              attr-for-selected="item-name"
+            >
               <template
                 is="dom-repeat"
                 items="[[stateObj.attributes.effect_list]]"
               >
-                <paper-item>[[item]]</paper-item>
+                <paper-item item-name$="[[item]]">[[item]]</paper-item>
               </template>
             </paper-listbox>
           </ha-paper-dropdown-menu>
@@ -212,12 +217,6 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
         observer: "stateObjChanged",
       },
 
-      effectIndex: {
-        type: Number,
-        value: -1,
-        observer: "effectChanged",
-      },
-
       brightnessSliderValue: {
         type: Number,
         value: 0,
@@ -264,13 +263,6 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
           s: newVal.attributes.hs_color[1] / 100,
         };
       }
-      if (newVal.attributes.effect_list) {
-        props.effectIndex = newVal.attributes.effect_list.indexOf(
-          newVal.attributes.effect
-        );
-      } else {
-        props.effectIndex = -1;
-      }
     }
 
     this.setProperties(props);
@@ -293,17 +285,15 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
     return classes.join(" ");
   }
 
-  effectChanged(effectIndex) {
-    var effectInput;
-    // Selected Option will transition to '' before transitioning to new value
-    if (effectIndex === "" || effectIndex === -1) return;
+  effectChanged(ev) {
+    var oldVal = this.stateObj.attributes.effect;
+    var newVal = ev.detail.value;
 
-    effectInput = this.stateObj.attributes.effect_list[effectIndex];
-    if (effectInput === this.stateObj.attributes.effect) return;
+    if (!newVal || oldVal === newVal) return;
 
     this.hass.callService("light", "turn_on", {
       entity_id: this.stateObj.entity_id,
-      effect: effectInput,
+      effect: newVal,
     });
   }
 
diff --git a/src/dialogs/more-info/controls/more-info-vacuum.js b/src/dialogs/more-info/controls/more-info-vacuum.js
index b1c196b88d..d712467163 100644
--- a/src/dialogs/more-info/controls/more-info-vacuum.js
+++ b/src/dialogs/more-info/controls/more-info-vacuum.js
@@ -109,12 +109,17 @@ class MoreInfoVacuum extends PolymerElement {
             dynamic-align=""
             label="Fan speed"
           >
-            <paper-listbox slot="dropdown-content" selected="{{fanSpeedIndex}}">
+            <paper-listbox
+              slot="dropdown-content"
+              selected="[[stateObj.attributes.fan_speed]]"
+              on-selected-changed="fanSpeedChanged"
+              attr-for-selected="item-name"
+            >
               <template
                 is="dom-repeat"
                 items="[[stateObj.attributes.fan_speed_list]]"
               >
-                <paper-item>[[item]]</paper-item>
+                <paper-item item-name$="[[item]]">[[item]]</paper-item>
               </template>
             </paper-listbox>
           </ha-paper-dropdown-menu>
@@ -150,12 +155,6 @@ class MoreInfoVacuum extends PolymerElement {
       stateObj: {
         type: Object,
       },
-
-      fanSpeedIndex: {
-        type: Number,
-        value: -1,
-        observer: "fanSpeedChanged",
-      },
     };
   }
 
@@ -206,17 +205,15 @@ class MoreInfoVacuum extends PolymerElement {
     );
   }
 
-  fanSpeedChanged(fanSpeedIndex) {
-    var fanSpeedInput;
-    // Selected Option will transition to '' before transitioning to new value
-    if (fanSpeedIndex === "" || fanSpeedIndex === -1) return;
+  fanSpeedChanged(ev) {
+    var oldVal = this.stateObj.attributes.fan_speed;
+    var newVal = ev.detail.value;
 
-    fanSpeedInput = this.stateObj.attributes.fan_speed_list[fanSpeedIndex];
-    if (fanSpeedInput === this.stateObj.attributes.fan_speed) return;
+    if (!newVal || oldVal === newVal) return;
 
     this.hass.callService("vacuum", "set_fan_speed", {
       entity_id: this.stateObj.entity_id,
-      fan_speed: fanSpeedInput,
+      fan_speed: newVal,
     });
   }