Climate range slider (#104)

🎉

bower.json

@@ -17,6 +17,7 @@
     "font-roboto-local": "~1.0.1",
     "paper-scroll-header-panel": "~1.0.16",
     "app-layout": "~0.10.2",
-    "fecha": "~2.2.0"
+    "fecha": "~2.2.0",
+    "paper-range-slider": "IftachSadeh/paper-range-slider#~0.1.1"
   }
 }

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

@@ -7,6 +7,7 @@
 <link rel='import' href='../../bower_components/paper-item/paper-item.html'>
 <link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
 <link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
+<link rel="import" href="../../bower_components/paper-range-slider/paper-range-slider.html">
 
 <dom-module id='more-info-climate'>
   <template>
@@ -14,6 +15,9 @@
     <style>
       :host {
         color: var(--primary-text-color);
+        --paper-input-container-input: {
+          text-transform: capitalize;
+        }
       }
 
       .container-away_mode,
@@ -46,22 +50,50 @@
         width: 100%;
       }
 
+      paper-range-slider {
+        width: 198px;
+        height: 2px;
+        margin-bottom: 16px;
+        --paper-range-slider-active-color: var(--primary-color);
+        --paper-range-slider-knob-color: var(--primary-color);
+        --paper-range-slider-pin-color: var(--primary-color);
+      }
+
       .single-row {
         padding: 8px 0;
       }
+
+      .capitalize {
+        text-transform: capitalize;
+      }
     </style>
 
     <div class$='[[computeClassNames(stateObj)]]'>
       <div class='container-temperature'>
         <div class='single-row'>
-          <div>Target Temperature</div>
+          <div hidden$='[[computeTargetTempHidden(stateObj)]]'>Target Temperature</div>
           <paper-slider
+            id="temp-slider"
             min='[[stateObj.attributes.min_temp]]'
             max='[[stateObj.attributes.max_temp]]'
-            step='0.5' pin
+            pin
+            step='0.5'
             value='[[stateObj.attributes.temperature]]'
+            hidden$='[[computeHideTempSlider(stateObj)]]'
             on-change='targetTemperatureSliderChanged'>
           </paper-slider>
+          <paper-range-slider
+            id="temp-range-slider"
+            min='[[stateObj.attributes.min_temp]]'
+            max='[[stateObj.attributes.max_temp]]'
+            pin
+            step='0.5'
+            value-min='[[stateObj.attributes.target_temp_low]]'
+            value-max='[[stateObj.attributes.target_temp_high]]'
+            value-diff-min='2'
+            hidden$='[[computeHideTempRangeSlider(stateObj)]]'
+            on-change='targetTemperatureRangeSliderChanged'>
+          </paper-range-slider>
         </div>
       </div>
 
@@ -84,7 +116,7 @@
             <paper-menu class="dropdown-content" selected="{{operationIndex}}">
               <template is='dom-repeat'
                         items='[[stateObj.attributes.operation_list]]'>
-                <paper-item>[[item]]</paper-item>
+                <paper-item class="capitalize">[[item]]</paper-item>
               </template>
             </paper-menu>
           </paper-dropdown-menu>
@@ -208,6 +240,19 @@ Polymer({
     }.bind(this), 500);
   },
 
+  computeTargetTempHidden: function (stateObj) {
+    return stateObj.attributes.operation_mode === 'off';
+  },
+
+  computeHideTempRangeSlider: function (stateObj) {
+    return stateObj.attributes.operation_mode !== 'auto';
+  },
+
+  computeHideTempSlider: function (stateObj) {
+    return stateObj.attributes.operation_mode === 'auto' ||
+        stateObj.attributes.operation_mode === 'off';
+  },
+
   computeClassNames: function (stateObj) {
     return 'more-info-climate ' + window.hassUtil.attributeClassNames(
       stateObj,
@@ -224,6 +269,20 @@ Polymer({
     this.callServiceHelper('set_temperature', { temperature: temperature });
   },
 
+  targetTemperatureRangeSliderChanged: function (ev) {
+    var targetTempLow = ev.currentTarget.valueMin;
+    var targetTempHigh = ev.currentTarget.valueMax;
+
+    if (targetTempLow === this.stateObj.attributes.target_temp_low &&
+        targetTempHigh === this.stateObj.attributes.target_temp_high) return;
+    this.callServiceHelper(
+      'set_temperature', {
+        target_temp_low: targetTempLow,
+        target_temp_high: targetTempHigh,
+      }
+    );
+  },
+
   targetHumiditySliderChanged: function (ev) {
     var humidity = ev.target.value;
 

src/state-summary/state-card-climate.html

@@ -25,12 +25,24 @@
       .current {
         color: var(--secondary-text-color);
       }
+
+      .operation-mode {
+        font-weight: bold;
+        text-transform: capitalize;
+      }
     </style>
 
     <div class='horizontal justified layout'>
       <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <div class='state'>
-        <div class='target'>[[computeTargetTemperature(stateObj)]]</div>
+        <div class='target'>
+          <span class="operation-mode">
+            [[stateObj.attributes.operation_mode]]
+          </span>
+          <span>
+            [[computeTargetTemperature(stateObj)]]
+          </span>
+        </div>
 
         <div class='current'>
           <span>Currently: </span>
@@ -52,14 +64,27 @@ Polymer({
       type: Boolean,
       value: false,
     },
-
     stateObj: {
       type: Object,
     },
   },
 
   computeTargetTemperature: function (stateObj) {
-    return stateObj.attributes.temperature + ' ' + stateObj.attributes.unit_of_measurement;
+    var stateTemp = '';
+
+    if (stateObj.attributes.operation_mode === 'off') {
+      stateTemp = '';
+    } else if (stateObj.attributes.operation_mode === 'auto') {
+      stateTemp = stateObj.attributes.target_temp_low + ' - ' +
+        stateObj.attributes.target_temp_high + ' ' +
+        stateObj.attributes.unit_of_measurement;
+    } else {
+      stateTemp = stateObj.attributes.temperature + ' ' +
+      stateObj.attributes.unit_of_measurement;
+    }
+
+    return stateTemp;
   },
+
 });
 </script>