Mark with color while changing temperature and make temperature chang…

…ing less buggy. Fixes #21, #70, #41
nervetattoo · Dec 28, 2019 · d46189d · d46189d
1 parent cb0c520
commit d46189d
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -8,7 +8,8 @@
   "license": "MIT",
   "dependencies": {
     "debounce-fn": "^3.0.1",
-    "lit-element": "^2.2.1"
+    "lit-element": "^2.2.1",
+    "lodash.isequal": "^4.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",
@@ -29,7 +30,8 @@
   "scripts": {
     "release": "release-it",
     "test": "ava",
-    "build": "NODE_ENV=production rollup -c"
+    "build": "NODE_ENV=production rollup -c",
+    "dist": "yarn build && cp simple-thermostat.js $HA_MOUNT/www/simple-thermostat.js"
   },
   "husky": {
     "hooks": {

diff --git a/src/index.js b/src/index.js
@@ -1,14 +1,23 @@
 import { LitElement, html } from 'lit-element'
 import debounce from 'debounce-fn'
+import isEqual from 'lodash.isequal'
 
 import styles from './styles'
 import formatNumber from './formatNumber'
 import getEntityType from './getEntityType'
 
+const DUAL = 'dual'
+const SINGLE = 'single'
 const DEBOUNCE_TIMEOUT = 1000
 const STEP_SIZE = 0.5
 const DECIMALS = 1
-const UPDATE_PROPS = ['entity', 'sensors', '_values', 'modes']
+const UPDATE_PROPS = [
+  'entity',
+  'sensors',
+  '_values',
+  '_updatingValues',
+  'modes',
+]
 
 const MODE_TYPES = ['hvac', 'fan', 'preset', 'swing']
 
@@ -113,6 +122,7 @@ class SimpleThermostat extends LitElement {
       modes: Object,
       icon: String,
       _values: Object,
+      _updatingValues: Boolean,
       _mode: String,
       _hide: Object,
       name: String,
@@ -142,6 +152,7 @@ class SimpleThermostat extends LitElement {
     this.sensors = []
     this._stepSize = STEP_SIZE
     this._values = {}
+    this._updatingValues = false
     this._hide = DEFAULT_HIDE
     this.modeOptions = {
       names: true,
@@ -174,17 +185,29 @@ class SimpleThermostat extends LitElement {
     const attributes = entity.attributes
 
     this.entityType = getEntityType(attributes)
-    if (this.entityType === 'dual') {
-      this._values = {
+    let values
+    if (this.entityType === DUAL) {
+      values = {
         target_temp_low: attributes.target_temp_low,
         target_temp_high: attributes.target_temp_high,
       }
     } else {
-      this._values = {
+      values = {
         temperature: attributes.temperature,
       }
     }
 
+    // If we are updating the values, and they are now equal
+    // we can safely assume we've been able to update the set points
+    // in HA and remove the updating flag
+    // If we are not updating we take the values we get from HA
+    // because it means they changed elsewhere
+    if (this._updatingValues && isEqual(values, this._values)) {
+      this._updatingValues = false
+    } else if (!this._updatingValues) {
+      this._values = values
+    }
+
     const supportedModeType = type =>
       MODE_TYPES.includes(type) && attributes[`${type}_modes`]
     const buildBasicModes = items => {
@@ -306,7 +329,9 @@ class SimpleThermostat extends LitElement {
     return key in translations ? translations[key] : label
   }
 
-  render({ _hass, _hide, _values, config, entity, sensors } = this) {
+  render(
+    { _hass, _hide, _values, _updatingValues, config, entity, sensors } = this
+  ) {
     if (!entity) {
       return html`
         <ha-card class="not-found">
@@ -367,7 +392,11 @@ class SimpleThermostat extends LitElement {
                   </paper-icon-button>
 
                   <div @click=${() => this.openEntityPopover()}>
-                    <h3 class="current--value">
+                    <h3
+                      class="current--value ${_updatingValues
+                        ? 'updating'
+                        : ''}"
+                    >
                       ${formatNumber(value, config)}
                     </h3>
                   </div>
@@ -507,6 +536,7 @@ class SimpleThermostat extends LitElement {
   }
 
   setTemperature(change, field = 'temperature') {
+    this._updatingValues = true
     this._values = {
       ...this._values,
       [field]: this._values[field] + change,

diff --git a/src/styles.js b/src/styles.js
@@ -103,6 +103,9 @@ export default css`
     font-weight: 400;
     line-height: var(--st-font-size-xl);
   }
+  .current--value.updating {
+    color: var(--google-red-500);
+  }
   .current--unit {
     font-size: var(--st-font-size-m);
   }
@@ -158,4 +161,4 @@ export default css`
     --iron-icon-height: 24px;
     display: block;
   }
-`
+`
diff --git a/yarn.lock b/yarn.lock
@@ -2442,6 +2442,11 @@ lodash.get@^4.4.2:
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
   integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
 
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
+
 lodash.islength@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.islength/-/lodash.islength-4.0.1.tgz#4e9868d452575d750affd358c979543dc20ed577"