more-info-climate.html use supported_features (#849)

* Added supported features for controls

* Improved supported features

* Removed lines resulted from rebase

* Fixed lint and review

* Added more supported_features and fixed fan mode bug

src/more-infos/more-info-climate.html

@@ -39,6 +39,8 @@
       .has-away_mode .container-away_mode,
       .has-aux_heat .container-aux_heat,
       .has-target_temperature .container-temperature,
+      .has-target_temperature_low .container-temperature,
+      .has-target_temperature_high .container-temperature,
       .has-target_humidity .container-humidity,
       .has-operation_mode .container-operation_list,
       .has-fan_mode .container-fan_list,
@@ -104,6 +106,8 @@
     </style>
 
     <div class$='[[computeClassNames(stateObj)]]'>
+
+      <template is='dom-if' if='[[supportsOn(stateObj)]]'>
         <div class='container-on'>
           <div class='center horizontal layout single-row'>
             <div class='flex'>On / Off</div>
@@ -113,12 +117,13 @@
             </paper-toggle-button>
           </div>
         </div>
+      </template>
 
       <div class='container-temperature'>
         <div class$='[[stateObj.attributes.operation_mode]]'>
-          <div hidden$='[[computeTargetTempHidden(stateObj)]]'>Target
+          <div hidden$='[[!supportsTemperatureControls(stateObj)]]'>Target
             Temperature</div>
-          <template is='dom-if' if='[[computeIncludeTempControl(stateObj)]]'>
+          <template is='dom-if' if='[[supportsTemperature(stateObj)]]'>
             <ha-climate-control
               value='[[stateObj.attributes.temperature]]'
               units='[[stateObj.attributes.unit_of_measurement]]'
@@ -129,7 +134,7 @@
               >
             </ha-climate-control>
           </template>
-          <template is='dom-if' if='[[computeIncludeTempRangeControl(stateObj)]]'>
+          <template is='dom-if' if='[[supportsTemperatureRange(stateObj)]]'>
             <ha-climate-control
               value='[[stateObj.attributes.target_temp_low]]'
               units='[[stateObj.attributes.unit_of_measurement]]'
@@ -154,6 +159,7 @@
         </div>
       </div>
 
+      <template is='dom-if' if='[[supportsHumidity(stateObj)]]'>
         <div class='container-humidity'>
           <div>Target Humidity</div>
             <div class="single-row">
@@ -169,7 +175,9 @@
               </paper-slider>
           </div>
         </div>
+      </template>
 
+      <template is='dom-if' if='[[supportsOperationMode(stateObj)]]'>
         <div class='container-operation_list'>
           <div class='controls'>
             <paper-dropdown-menu class='capitalize' label-float dynamic-align label='Operation'>
@@ -183,7 +191,9 @@
             </paper-dropdown-menu>
           </div>
         </div>
+      </template>
 
+      <template is='dom-if' if='[[supportsFanMode(stateObj)]]'>
         <div class='container-fan_list'>
           <paper-dropdown-menu label-float dynamic-align label='Fan Mode'>
             <paper-listbox slot="dropdown-content" selected="{{fanIndex}}">
@@ -195,7 +205,9 @@
             </paper-listbox>
           </paper-dropdown-menu>
         </div>
+      </template>
 
+      <template is='dom-if' if='[[supportsSwingMode(stateObj)]]'>
         <div class='container-swing_list'>
           <paper-dropdown-menu label-float dynamic-align label='Swing Mode'>
             <paper-listbox slot="dropdown-content" selected="{{swingIndex}}">
@@ -207,7 +219,9 @@
             </paper-listbox>
           </paper-dropdown-menu>
         </div>
+      </template>
 
+      <template is='dom-if' if='[[supportsAwayMode(stateObj)]]'>
         <div class='container-away_mode'>
           <div class='center horizontal layout single-row'>
             <div class='flex'>Away Mode</div>
@@ -217,7 +231,9 @@
             </paper-toggle-button>
           </div>
         </div>
+      </template>
 
+      <template is='dom-if' if='[[supportsAuxHeat(stateObj)]]'>
         <div class='container-aux_heat'>
           <div class='center horizontal layout single-row'>
             <div class='flex'>Aux Heat</div>
@@ -227,6 +243,7 @@
             </paper-toggle-button>
           </div>
         </div>
+      </template>
     </div>
   </template>
 </dom-module>
@@ -263,7 +280,6 @@ class MoreInfoClimate extends window.hassMixins.EventsMixin(Polymer.Element) {
         value: -1,
         observer: 'handleSwingmodeChanged',
       },
-
       awayToggleChecked: Boolean,
       auxToggleChecked: Boolean,
       onToggleChecked: Boolean,
@@ -309,7 +325,7 @@ class MoreInfoClimate extends window.hassMixins.EventsMixin(Polymer.Element) {
     this.fanIndex = -1;
     if (this.stateObj.attributes.fan_list) {
       this.fanIndex =
-          this.stateObj.attributes.fan_list.indexOf(this.stateObj.attributes.fan_list);
+          this.stateObj.attributes.fan_list.indexOf(this.stateObj.attributes.fan_mode);
     }
   }
 
@@ -322,19 +338,45 @@ class MoreInfoClimate extends window.hassMixins.EventsMixin(Polymer.Element) {
     return 0.5;
   }
 
-  computeTargetTempHidden(stateObj) {
+  supportsTemperatureControls(stateObj) {
-    return !stateObj.attributes.temperature &&
+    return this.supportsTemperature(stateObj) ||
-        !stateObj.attributes.target_temp_low &&
+      this.supportsTemperatureRange(stateObj);
-        !stateObj.attributes.target_temp_high;
   }
 
-  computeIncludeTempRangeControl(stateObj) {
+  supportsTemperature(stateObj) {
-    return stateObj.attributes.target_temp_low ||
+    return (stateObj.attributes.supported_features & 1) !== 0;
-        stateObj.attributes.target_temp_high;
   }
 
-  computeIncludeTempControl(stateObj) {
+  supportsTemperatureRange(stateObj) {
-    return stateObj.attributes.temperature;
+    return (stateObj.attributes.supported_features & 6) !== 0;
+  }
+
+  supportsHumidity(stateObj) {
+    return (stateObj.attributes.supported_features & 8) !== 0;
+  }
+
+  supportsFanMode(stateObj) {
+    return (stateObj.attributes.supported_features & 64) !== 0;
+  }
+
+  supportsOperationMode(stateObj) {
+    return (stateObj.attributes.supported_features & 128) !== 0;
+  }
+
+  supportsSwingMode(stateObj) {
+    return (stateObj.attributes.supported_features & 512) !== 0;
+  }
+
+  supportsAwayMode(stateObj) {
+    return (stateObj.attributes.supported_features & 1024) !== 0;
+  }
+
+  supportsAuxHeat(stateObj) {
+    return (stateObj.attributes.supported_features & 2048) !== 0;
+  }
+
+  supportsOn(stateObj) {
+    return (stateObj.attributes.supported_features & 4096) !== 0;
   }
 
   computeClassNames(stateObj) {