Simplify list selection (#3148)

* water_heater: Use attr-for-selected for operation mode

* climate: Use attr-for-selected for operation, fan, swing mode

* fan: Use attr-for-selected for speed

* fan: skip extra property

* climate: drop extra property

* water_heater: avoid extra property

* media_player: drop extra variable for source and sound_mode

* water_heater: missed change

src/dialogs/more-info/controls/more-info-climate.js

@@ -200,14 +200,15 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
               >
                 <paper-listbox
                   slot="dropdown-content"
-                  selected="{{operationIndex}}"
+                  selected="[[stateObj.attributes.operation_mode]]"
+                  attr-for-selected="item-name"
+                  on-selected-changed="handleOperationmodeChanged"
                 >
                   <template
                     is="dom-repeat"
                     items="[[stateObj.attributes.operation_list]]"
-                    on-dom-change="handleOperationListUpdate"
                   >
-                    <paper-item
+                    <paper-item item-name$="[[item]]"
                       >[[_localizeOperationMode(localize, item)]]</paper-item
                     >
                   </template>
@@ -224,13 +225,19 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
               dynamic-align=""
               label="[[localize('ui.card.climate.fan_mode')]]"
             >
-              <paper-listbox slot="dropdown-content" selected="{{fanIndex}}">
+              <paper-listbox
+                slot="dropdown-content"
+                selected="[[stateObj.attributes.fan_mode]]"
+                attr-for-selected="item-name"
+                on-selected-changed="handleFanmodeChanged"
+              >
                 <template
                   is="dom-repeat"
                   items="[[stateObj.attributes.fan_list]]"
-                  on-dom-change="handleFanListUpdate"
                 >
-                  <paper-item>[[_localizeFanMode(localize, item)]]</paper-item>
+                  <paper-item item-name$="[[item]]"
+                    >[[_localizeFanMode(localize, item)]]
+                  </paper-item>
                 </template>
               </paper-listbox>
             </ha-paper-dropdown-menu>
@@ -244,13 +251,17 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
               dynamic-align=""
               label="[[localize('ui.card.climate.swing_mode')]]"
             >
-              <paper-listbox slot="dropdown-content" selected="{{swingIndex}}">
+              <paper-listbox
+                slot="dropdown-content"
+                selected="[[stateObj.attributes.swing_mode]]"
+                attr-for-selected="item-name"
+                on-selected-changed="handleSwingmodeChanged"
+              >
                 <template
                   is="dom-repeat"
                   items="[[stateObj.attributes.swing_list]]"
-                  on-dom-change="handleSwingListUpdate"
                 >
-                  <paper-item>[[item]]</paper-item>
+                  <paper-item item-name$="[[item]]">[[item]]</paper-item>
                 </template>
               </paper-listbox>
             </ha-paper-dropdown-menu>
@@ -297,23 +308,6 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
         observer: "stateObjChanged",
       },
 
-      operationIndex: {
-        type: Number,
-        value: -1,
-        observer: "handleOperationmodeChanged",
-      },
-
-      fanIndex: {
-        type: Number,
-        value: -1,
-        observer: "handleFanmodeChanged",
-      },
-
-      swingIndex: {
-        type: Number,
-        value: -1,
-        observer: "handleSwingmodeChanged",
-      },
       awayToggleChecked: Boolean,
       auxToggleChecked: Boolean,
       onToggleChecked: Boolean,
@@ -346,36 +340,6 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
     }
   }
 
-  handleOperationListUpdate() {
-    // force polymer to recognize selected item change (to update actual label)
-    this.operationIndex = -1;
-    if (this.stateObj.attributes.operation_list) {
-      this.operationIndex = this.stateObj.attributes.operation_list.indexOf(
-        this.stateObj.attributes.operation_mode
-      );
-    }
-  }
-
-  handleSwingListUpdate() {
-    // force polymer to recognize selected item change (to update actual label)
-    this.swingIndex = -1;
-    if (this.stateObj.attributes.swing_list) {
-      this.swingIndex = this.stateObj.attributes.swing_list.indexOf(
-        this.stateObj.attributes.swing_mode
-      );
-    }
-  }
-
-  handleFanListUpdate() {
-    // force polymer to recognize selected item change (to update actual label)
-    this.fanIndex = -1;
-    if (this.stateObj.attributes.fan_list) {
-      this.fanIndex = this.stateObj.attributes.fan_list.indexOf(
-        this.stateObj.attributes.fan_mode
-      );
-    }
-  }
-
   computeTemperatureStepSize(hass, stateObj) {
     if (stateObj.attributes.target_temp_step) {
       return stateObj.attributes.target_temp_step;
@@ -517,33 +481,27 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
     this.callServiceHelper(newVal ? "turn_on" : "turn_off", {});
   }
 
-  handleFanmodeChanged(fanIndex) {
-    // Selected Option will transition to '' before transitioning to new value
-    if (fanIndex === "" || fanIndex === -1) return;
-    const fanInput = this.stateObj.attributes.fan_list[fanIndex];
-    if (fanInput === this.stateObj.attributes.fan_mode) return;
-    this.callServiceHelper("set_fan_mode", { fan_mode: fanInput });
+  handleFanmodeChanged(ev) {
+    const oldVal = this.stateObj.attributes.fan_mode;
+    const newVal = ev.detail.value;
+    if (!newVal || oldVal === newVal) return;
+    this.callServiceHelper("set_fan_mode", { fan_mode: newVal });
   }
 
-  handleOperationmodeChanged(operationIndex) {
-    // Selected Option will transition to '' before transitioning to new value
-    if (operationIndex === "" || operationIndex === -1) return;
-    const operationInput = this.stateObj.attributes.operation_list[
-      operationIndex
-    ];
-    if (operationInput === this.stateObj.attributes.operation_mode) return;
-
+  handleOperationmodeChanged(ev) {
+    const oldVal = this.stateObj.attributes.operation_mode;
+    const newVal = ev.detail.value;
+    if (!newVal || oldVal === newVal) return;
     this.callServiceHelper("set_operation_mode", {
-      operation_mode: operationInput,
+      operation_mode: newVal,
     });
   }
 
-  handleSwingmodeChanged(swingIndex) {
-    // Selected Option will transition to '' before transitioning to new value
-    if (swingIndex === "" || swingIndex === -1) return;
-    const swingInput = this.stateObj.attributes.swing_list[swingIndex];
-    if (swingInput === this.stateObj.attributes.swing_mode) return;
-    this.callServiceHelper("set_swing_mode", { swing_mode: swingInput });
+  handleSwingmodeChanged(ev) {
+    const oldVal = this.stateObj.attributes.swing_mode;
+    const newVal = ev.detail.value;
+    if (!newVal || oldVal === newVal) return;
+    this.callServiceHelper("set_swing_mode", { swing_mode: newVal });
   }
 
   callServiceHelper(service, data) {

src/dialogs/more-info/controls/more-info-fan.js

@@ -49,12 +49,17 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
             dynamic-align=""
             label="[[localize('ui.card.fan.speed')]]"
           >
-            <paper-listbox slot="dropdown-content" selected="{{speedIndex}}">
+            <paper-listbox
+              slot="dropdown-content"
+              selected="[[stateObj.attributes.speed]]"
+              on-selected-changed="speedChanged"
+              attr-for-selected="item-name"
+            >
               <template
                 is="dom-repeat"
                 items="[[stateObj.attributes.speed_list]]"
               >
-                <paper-item>[[item]]</paper-item>
+                <paper-item item-name$="[[item]]">[[item]]</paper-item>
               </template>
             </paper-listbox>
           </ha-paper-dropdown-menu>
@@ -108,12 +113,6 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
         observer: "stateObjChanged",
       },
 
-      speedIndex: {
-        type: Number,
-        value: -1,
-        observer: "speedChanged",
-      },
-
       oscillationToggleChecked: {
         type: Boolean,
       },
@@ -124,9 +123,6 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
     if (newVal) {
       this.setProperties({
         oscillationToggleChecked: newVal.attributes.oscillating,
-        speedIndex: newVal.attributes.speed_list
-          ? newVal.attributes.speed_list.indexOf(newVal.attributes.speed)
-          : -1,
       });
     }
 
@@ -144,17 +140,15 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
     );
   }
 
-  speedChanged(speedIndex) {
-    var speedInput;
-    // Selected Option will transition to '' before transitioning to new value
-    if (speedIndex === "" || speedIndex === -1) return;
+  speedChanged(ev) {
+    var oldVal = this.stateObj.attributes.speed;
+    var newVal = ev.detail.value;
 
-    speedInput = this.stateObj.attributes.speed_list[speedIndex];
-    if (speedInput === this.stateObj.attributes.speed) return;
+    if (!newVal || oldVal === newVal) return;
 
     this.hass.callService("fan", "turn_on", {
       entity_id: this.stateObj.entity_id,
-      speed: speedInput,
+      speed: newVal,
     });
   }
 

src/dialogs/more-info/controls/more-info-media_player.js

@@ -157,7 +157,8 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
             <paper-listbox
               slot="dropdown-content"
               attr-for-selected="item-name"
-              selected="{{SourceInput}}"
+              selected="[[playerObj.source]]"
+              on-selected-changed="handleSourceChanged"
             >
               <template is="dom-repeat" items="[[playerObj.sourceList]]">
                 <paper-item item-name$="[[item]]">[[item]]</paper-item>
@@ -178,7 +179,8 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
               <paper-listbox
                 slot="dropdown-content"
                 attr-for-selected="item-name"
-                selected="{{SoundModeInput}}"
+                selected="[[playerObj.soundMode]]"
+                on-selected-changed="handleSoundModeChanged"
               >
                 <template is="dom-repeat" items="[[playerObj.soundModeList]]">
                   <paper-item item-name$="[[item]]">[[item]]</paper-item>
@@ -218,18 +220,6 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
         observer: "playerObjChanged",
       },
 
-      SourceInput: {
-        type: String,
-        value: "",
-        observer: "handleSourceChanged",
-      },
-
-      SoundModeInput: {
-        type: String,
-        value: "",
-        observer: "handleSoundModeChanged",
-      },
-
       ttsLoaded: {
         type: Boolean,
         computed: "computeTTSLoaded(hass)",
@@ -252,14 +242,6 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
   }
 
   playerObjChanged(newVal, oldVal) {
-    if (newVal && newVal.sourceList !== undefined) {
-      this.SourceInput = newVal.source;
-    }
-
-    if (newVal && newVal.soundModeList !== undefined) {
-      this.SoundModeInput = newVal.soundMode;
-    }
-
     if (oldVal) {
       setTimeout(() => {
         this.fire("iron-resize");
@@ -346,26 +328,26 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
     this.playerObj.nextTrack();
   }
 
-  handleSourceChanged(newVal, oldVal) {
-    // Selected Option will transition to '' before transitioning to new value
-    if (
-      oldVal &&
-      newVal &&
-      newVal !== this.playerObj.source &&
-      this.playerObj.supportsSelectSource
-    ) {
-      this.playerObj.selectSource(newVal);
-    }
+  handleSourceChanged(ev) {
+    if (!this.playerObj) return;
+
+    var oldVal = this.playerObj.source;
+    var newVal = ev.detail.value;
+
+    if (!newVal || oldVal === newVal) return;
+
+    this.playerObj.selectSource(newVal);
   }
 
-  handleSoundModeChanged(newVal, oldVal) {
-    if (
-      oldVal &&
-      newVal !== this.playerObj.soundMode &&
-      this.playerObj.supportsSelectSoundMode
-    ) {
-      this.playerObj.selectSoundMode(newVal);
-    }
+  handleSoundModeChanged(ev) {
+    if (!this.playerObj) return;
+
+    var oldVal = this.playerObj.soundMode;
+    var newVal = ev.detail.value;
+
+    if (!newVal || oldVal === newVal) return;
+
+    this.playerObj.selectSoundMode(newVal);
   }
 
   handleVolumeTap() {

src/dialogs/more-info/controls/more-info-water_heater.js

@@ -100,14 +100,15 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
               >
                 <paper-listbox
                   slot="dropdown-content"
-                  selected="{{operationIndex}}"
+                  selected="[[stateObj.attributes.operation_mode]]"
+                  attr-for-selected="item-name"
+                  on-selected-changed="handleOperationmodeChanged"
                 >
                   <template
                     is="dom-repeat"
                     items="[[stateObj.attributes.operation_list]]"
-                    on-dom-change="handleOperationListUpdate"
                   >
-                    <paper-item
+                    <paper-item item-name$="[[item]]"
                       >[[_localizeOperationMode(localize, item)]]</paper-item
                     >
                   </template>
@@ -146,11 +147,6 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
         observer: "stateObjChanged",
       },
 
-      operationIndex: {
-        type: Number,
-        value: -1,
-        observer: "handleOperationmodeChanged",
-      },
       awayToggleChecked: Boolean,
     };
   }
@@ -173,16 +169,6 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
     }
   }
 
-  handleOperationListUpdate() {
-    // force polymer to recognize selected item change (to update actual label)
-    this.operationIndex = -1;
-    if (this.stateObj.attributes.operation_list) {
-      this.operationIndex = this.stateObj.attributes.operation_list.indexOf(
-        this.stateObj.attributes.operation_mode
-      );
-    }
-  }
-
   computeTemperatureStepSize(hass, stateObj) {
     if (stateObj.attributes.target_temp_step) {
       return stateObj.attributes.target_temp_step;
@@ -239,16 +225,12 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
     this.callServiceHelper("set_away_mode", { away_mode: newVal });
   }
 
-  handleOperationmodeChanged(operationIndex) {
-    // Selected Option will transition to '' before transitioning to new value
-    if (operationIndex === "" || operationIndex === -1) return;
-    const operationInput = this.stateObj.attributes.operation_list[
-      operationIndex
-    ];
-    if (operationInput === this.stateObj.attributes.operation_mode) return;
-
+  handleOperationmodeChanged(ev) {
+    const oldVal = this.stateObj.attributes.operation_mode;
+    const newVal = ev.detail.value;
+    if (!newVal || oldVal === newVal) return;
     this.callServiceHelper("set_operation_mode", {
-      operation_mode: operationInput,
+      operation_mode: newVal,
     });
   }