Fix state icon for color_type: card and equal operators (#82)

* Fix state icon for color_type: card and equal operators * Fix missing icon when no icon in default config and state used
custom-cards · Apr 14, 2019 · 416fb89 · 416fb89
1 parent 59a1ccf
commit 416fb89
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -285,16 +285,16 @@ The definition order matters, the first item to match will be the one selected.
 
 Available operators:
 
-| Operator  | `value` example | Description                                      |
-| :-------: | --------------- | ------------------------------------------------ |
-|    `<`    | `5`             | State is inferior to `value`                     |
-|   `<=`    | `4`             | State is inferior or equal to `value`            |
-|   `==`    | `42`            | State is equal (`===` javascript) to `value`     |
-|   `>=`    | `32`            | State is superior or equal to `value`            |
-|    `>`    | `12`            | State is superior to `value`                     |
-|   `!=`    | `normal`        | State is not equal (`!==` javascript) to `value` |
-|  `regex`  | `'^norm.*$'`    | `value` regex applied to State does match        |
-| `default` | N/A             | If nothing matches, this is used                 |
+| Operator  | `value` example | Description                                     |
+| :-------: | --------------- | ----------------------------------------------- |
+|    `<`    | `5`             | State is inferior to `value`                    |
+|   `<=`    | `4`             | State is inferior or equal to `value`           |
+|   `==`    | `42`            | State is equal (`==` javascript) to `value`     |
+|   `>=`    | `32`            | State is superior or equal to `value`           |
+|    `>`    | `12`            | State is superior to `value`                    |
+|   `!=`    | `normal`        | State is not equal (`!=` javascript) to `value` |
+|  `regex`  | `'^norm.*$'`    | `value` regex applied to State does match       |
+| `default` | N/A             | If nothing matches, this is used                |
 
 
 ## Credits

diff --git a/button-card.js b/button-card.js
@@ -94,7 +94,7 @@
           if (elt.operator) {
             switch (elt.operator) {
               case '==':
-                return (state.state === elt.value)
+                return (state.state == elt.value)
               case '<=':
                 return (state.state <= elt.value)
               case '<':
@@ -104,7 +104,7 @@
               case '>':
                 return (state.state > elt.value)
               case '!=':
-                return (state.state !== elt.value)
+                return (state.state != elt.value)
               case 'regex':
                 return (state.state.match(elt.value))
               case 'default':
@@ -184,11 +184,12 @@
     cardColoredHtml(state, config) {
       const color = this.buildCssColorAttribute(state, config);
       const fontColor = this.getFontColorBasedOnBackgroundColor(color);
+      const icon = this.buildIcon(state, config);
       return html`
       <ha-card style="color: ${fontColor};" @tap="${ev => this._toggle(state, config)}">
         <button-card-button style="background-color: ${color}; ${config.card_style}">
         <div style="${config.card_style}">
-          ${config.icon ? html`<ha-icon style="width: ${config.size}; height: ${config.size};" icon="${config.icon}"></ha-icon>` : ''}
+          ${config.icon || icon ? html`<ha-icon style="width: ${config.size}; height: ${config.size};" icon="${icon}"></ha-icon>` : ''}
           ${config.name ? html`<span>${config.name}</span>` : ''}
           ${config.show_state ? html`<span>${state.state} ${state.attributes.unit_of_measurement ? state.attributes.unit_of_measurement : ''}</span>` : ''}
          </div>
@@ -204,7 +205,7 @@
       <ha-card @tap="${ev => this._toggle(state, config)}">
         <button-card-button style="${config.card_style}">
         <div style="${config.card_style}">
-          ${config.icon ? html`<ha-icon style="color: ${color}; width: ${config.size}; height: ${config.size};" icon="${icon}"></ha-icon>` : ''}
+          ${config.icon || icon ? html`<ha-icon style="color: ${color}; width: ${config.size}; height: ${config.size};" icon="${icon}"></ha-icon>` : ''}
           ${config.name ? html`<div>${config.name}</div>` : ''}
           ${config.show_state ? html`<div>${state.state} ${state.attributes.unit_of_measurement ? state.attributes.unit_of_measurement : ''}</div>` : ''}
         </div>