Add hide functionatilty (#118)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mini-climate-card",
-  "version": "v2.4.5",
+  "version": "v2.5.0",
   "description": "a/c card for Home Assistant Lovelace UI",
   "keywords": [
     "home-assistant",

release_notes/v2.5.0.md

@@ -0,0 +1,6 @@
+## v2.5.0
+[![Downloads](https://img.shields.io/github/downloads/artem-sedykh/mini-climate-card/v2.5.0/total.svg)](https://github.com/artem-sedykh/mini-climate-card/releases/tag/v2.5.0)
+
+### Added
+- feature: add hide functionality to indicators by @regevbr and @adi90x
+- feature: hide can now be a function by @regevbr

src/components/indicators.js

@@ -60,11 +60,16 @@ export default class ClimateIndicators extends ScopedRegistryHost(LitElement) {
     if (!ClimateIndicators.elementDefinitionsLoaded) {
       return html``;
     }
+
+    const indicatorsToShow = Object.entries(this.indicators)
+      .map(entry => entry[1])
+      .filter(indicator => !indicator.hide);
+
     const context = this;
 
     return html`
      <div class='mc-indicators__container'>
-       ${Object.entries(this.indicators).map(i => context.renderIndicator(i[1]))}
+       ${indicatorsToShow.map(i => context.renderIndicator(i))}
      </div>
     `;
   }

src/components/temperature.js

@@ -16,7 +16,6 @@ export default class ClimateTemperature extends ScopedRegistryHost(LitElement) {
       changing: Boolean,
       target: Number,
       swapTemperatures: Boolean,
-      hideCurrentTemperature: Boolean,
     };
   }
 
@@ -33,7 +32,7 @@ export default class ClimateTemperature extends ScopedRegistryHost(LitElement) {
   }
 
   renderTemperature() {
-    if (this.temperature.value === undefined || this.hideCurrentTemperature)
+    if (this.temperature.value === undefined || this.temperature.hide)
       return '';
 
     if (this.swapTemperatures) {

src/main.js

@@ -59,7 +59,6 @@ class MiniClimate extends ScopedRegistryHost(LitElement) {
     this.temperature = {};
     this.targetTemperature = {};
     this.swapTemperatures = false;
-    this.hideCurrentTemperature = false;
     this.buttons = {};
     this.indicators = {};
     this.hvacMode = {};
@@ -152,7 +151,7 @@ class MiniClimate extends ScopedRegistryHost(LitElement) {
     const targetTemperatureEntity = this.hass.states[targetTemperatureEntityId];
 
     const temperature = new TemperatureObject(temperatureEntity, targetTemperatureEntity,
-      this.config);
+      this.config, this.climate);
 
     if (this.temperature.rawValue !== temperature.rawValue
       || this.temperature.target !== temperature.target || force) {
@@ -273,6 +272,14 @@ class MiniClimate extends ScopedRegistryHost(LitElement) {
     if (item.style)
       item.functions.style = compileTemplate(item.style, context);
 
+    if (item.hide) {
+      if (typeof item.hide === 'boolean') {
+        item.functions.hide = () => true;
+      } else {
+        item.functions.hide = compileTemplate(item.hide, context);
+      }
+    }
+
     return item;
   }
 
@@ -330,13 +337,58 @@ class MiniClimate extends ScopedRegistryHost(LitElement) {
         item.functions.icon.style = compileTemplate(item.icon.style, context);
     }
 
+    if (item.hide) {
+      if (typeof item.hide === 'boolean') {
+        item.functions.hide = () => true;
+      } else {
+        item.functions.hide = compileTemplate(item.hide, context);
+      }
+    }
+
+    return item;
+  }
+
+  getSecondaryInfoConfig(config) {
+    const item = {
+      ...config,
+    };
+
+    item.functions = item.functions || {};
+    const context = { ...config };
+
+    if (item.hide) {
+      if (typeof item.hide === 'boolean') {
+        item.functions.hide = () => true;
+      } else {
+        item.functions.hide = compileTemplate(item.hide, context);
+      }
+    }
+
+    return item;
+  }
+
+  getToggleConfig(config) {
+    const item = {
+      ...config,
+    };
+
+    item.functions = item.functions || {};
+    const context = { ...config };
+
+    if (item.hide) {
+      if (typeof item.hide === 'boolean') {
+        item.functions.hide = () => true;
+      } else {
+        item.functions.hide = compileTemplate(item.hide, context);
+      }
+    }
+
     return item;
   }
 
   getIndicatorsConfig(config) {
     return Object.entries(config.indicators || {})
-      .map(i => this.getIndicatorConfig(i[0], i[1] || {}, config))
-      .filter(i => !i.hide);
+      .map(i => this.getIndicatorConfig(i[0], i[1] || {}, config));
   }
 
   getTargetTemperatureConfig(config) {
@@ -425,12 +477,12 @@ class MiniClimate extends ScopedRegistryHost(LitElement) {
 
     this.config.hvac_mode = this.getHvacModeConfig(this.config);
 
-    this.config.toggle = {
+    this.config.toggle = this.getToggleConfig({
       icon: ICON.TOGGLE,
       hide: false,
       default: false,
       ...config.toggle || {},
-    };
+    });
 
     if (typeof config.secondary_info === 'string') {
       this.config.secondary_info = { type: config.secondary_info };
@@ -440,11 +492,11 @@ class MiniClimate extends ScopedRegistryHost(LitElement) {
         ...config.secondary_info || {},
       };
     }
+    this.config.secondary_info = this.getSecondaryInfoConfig(this.config.secondary_info);
 
     this.toggle = this.config.toggle.default;
 
     this.swapTemperatures = !!this.config.swap_temperatures;
-    this.hideCurrentTemperature = !!this.config.hide_current_temperature;
   }
 
   renderCtlWrap() {
@@ -471,8 +523,7 @@ class MiniClimate extends ScopedRegistryHost(LitElement) {
           .temperature=${this.temperature}
           .target=${this.targetTemperatureValue}
           .changing=${this.targetTemperatureChanging}
-          .swapTemperatures=${this.swapTemperatures}
-          .hideCurrentTemperature=${this.hideCurrentTemperature}>
+          .swapTemperatures=${this.swapTemperatures}>
         </mc-temperature>
     `;
   }
@@ -583,11 +634,16 @@ class MiniClimate extends ScopedRegistryHost(LitElement) {
   }
 
   renderToggleButton() {
-    if (this.config.buttons.filter(b => !b.hide && b.location !== 'main').length === 0)
-      return '';
+    if (Object.entries(this.buttons)
+      .map(entry => entry[1])
+      .filter(button => !button.hide && button.location !== 'main')
+      .length === 0)
+      return html``;
 
-    if (this.config.toggle.hide)
-      return '';
+    if (this.config.toggle.functions.hide
+      && this.config.toggle.functions.hide(this.climate.entity, this.climate.mode)) {
+      return html``;
+    }
 
     return html`
         <ha-icon-button class='toggle-button ${this.toggleButtonCls()}'
@@ -608,9 +664,14 @@ class MiniClimate extends ScopedRegistryHost(LitElement) {
   }
 
   renderSecondaryInfo() {
-    if (this.climate.isUnavailable || this.config.secondary_info.hide)
+    if (this.climate.isUnavailable)
       return html``;
 
+    if (this.config.secondary_info.functions.hide
+      && this.config.secondary_info.functions.hide(this.climate.entity, this.climate.mode)) {
+      return html``;
+    }
+
     return html`
       <div class='entity__secondary_info ellipsis'>
         <mc-secondary-info

src/models/button.js

@@ -30,7 +30,12 @@ export default class ButtonObject {
   }
 
   get hide() {
-    return this.config.hide;
+    if (this.config.functions.hide) {
+      return this.config.functions.hide(this.state, this.entity,
+        this.climate.entity, this.climate.mode);
+    }
+
+    return false;
   }
 
   get icon() {

src/models/hvac-mode.js

@@ -8,7 +8,12 @@ export default class HvacModeObject {
   }
 
   get hide() {
-    return this.config.hide;
+    if (this.config.functions.hide) {
+      return this.config.functions.hide(this.state, this.entity,
+        this.climate.entity, this.climate.mode);
+    }
+
+    return false;
   }
 
   get originalState() {

src/models/indicator.js

@@ -56,4 +56,13 @@ export default class IndicatorObject {
 
     return {};
   }
+
+  get hide() {
+    if (this.config.functions.hide) {
+      return this.config.functions.hide(this.value, this.entity,
+        this.climate.entity, this.climate.mode);
+    }
+
+    return false;
+  }
 }

src/models/temperature.js

@@ -1,10 +1,20 @@
-import { getEntityValue, round } from '../utils/utils';
+import { compileTemplate, getEntityValue, round } from '../utils/utils';
 
 export default class TemperatureObject {
-  constructor(temperatureEntity, targetTemperatureEntity, config) {
+  constructor(temperatureEntity, targetTemperatureEntity, config, climate) {
+    this.climate = climate || {};
     this.temperatureEntity = temperatureEntity || {};
     this.targetTemperatureEntity = targetTemperatureEntity || {};
     this.config = config;
+    if (this.config.hide_current_temperature) {
+      if (typeof this.config.hide_current_temperature === 'boolean') {
+        this.shouldHideCurrentTemperature = () => true;
+      } else {
+        this.shouldHideCurrentTemperature = compileTemplate(this.config.hide_current_temperature);
+      }
+    } else {
+      this.shouldHideCurrentTemperature = () => false;
+    }
   }
 
   get unit() {
@@ -40,4 +50,9 @@ export default class TemperatureObject {
   get rawValue() {
     return getEntityValue(this.temperatureEntity, this.config.temperature.source);
   }
+
+  get hide() {
+    return this.shouldHideCurrentTemperature(this.value, this.temperatureEntity,
+      this.targetTemperatureEntity, this.climate.entity, this.climate.mode);
+  }
 }