add swing mode and fan mode (#3)

* add swing mode and fan mode

* add documentation

* fix combine mode

README.md

@@ -25,23 +25,25 @@ resources:
 
 ## Options
 
-| Name | Type | Required | Description
-| :---- | :---- | :---- | :----
-| type    | string | Yes  | `custom:climate-mode-entity-row`
-| entity  | string | Yes  | `domain.my_entity_id`
-| name    | string | No   | Override entity `friendly_name`
-| icon    | string | No   | Override entity `icon`
-| | | |
-| modes | object | Yes | Modes (see below)
+| Name   | Type   | Required | Description                      |
+| :----- | :----- | :------- | :------------------------------- |
+| type   | string | Yes      | `custom:climate-mode-entity-row` |
+| entity | string | Yes      | `domain.my_entity_id`            |
+| name   | string | No       | Override entity `friendly_name`  |
+| icon   | string | No       | Override entity `icon`           |
+|        |        |          |
+| modes  | object | Yes      | Modes (see below)                |
 
 ### Mode objects
 
-| Name | Type | Required | Description
-:---- | :---- | :---- | :----
-| icon        | string  | No | A icon for the mode
-| hvac_mode   | string  | No | A valid hvac_mode for the entity
-| preset_mode | string  | No | A valid preset_mode for the entity
-| color       | string  | No | Custom color for the icon when toggle
+| Name        | Type   | Required | Description                           |
+| :---------- | :----- | :------- | :------------------------------------ |
+| icon        | string | No       | A icon for the mode                   |
+| hvac_mode   | string | No       | A valid hvac_mode for the entity      |
+| preset_mode | string | No       | A valid preset_mode for the entity    |
+| fan_mode    | string | No       | A valid fan_mode for the entity       |
+| swing_mode  | string | No       | A valid swing_mode for the entity     |
+| color       | string | No       | Custom color for the icon when toggle |
 
 ## Example
 
@@ -53,16 +55,16 @@ resources:
 type: entities
 entities:
   - entity: climate.thermostat_kitchen
-    type: 'custom:climate-mode-entity-row'
+    type: "custom:climate-mode-entity-row"
     modes:
-      - hvac_mode: 'off'
-      - preset_mode: eco
-      - preset_mode: comfort
+      - hvac_mode: "off"
+      - preset_mode: "eco"
+      - preset_mode: "comfort"
 ```
 
 ### Custom config
 
-![Simple example](images/custom_example.png)
+![Custom example](images/custom_example.png)
 
 ```yaml
 type: entities
@@ -72,14 +74,49 @@ entities:
     name: My Thermostat
     icon: 'mdi:home'
     modes:
-      - hvac_mode: 'off'
-        icon: 'mdi:snowflake'
-        color: '#B3E5FC'
-      - preset_mode: eco
-        icon: 'mdi:moon-waxing-crescent'
-        color: '#9575CD'
-      - icon: 'mdi:weather-sunny'
-        preset_mode: comfort
-        color: '#FFC107'
+      - hvac_mode: "off"
+        icon: "mdi:snowflake"
+        color: "#B3E5FC"
+      - preset_mode: "eco"
+        icon: "mdi:moon-waxing-crescent"
+        color: "#9575CD"
+      - preset_mode: "comfort"
+        icon: "mdi:weather-sunny"
+        color: "#FFC107"
+```
+
+### Multi mode config
 
+You can combine or mix hvac_mode, preset_mode, fan_mode and swing_mode to build your custom controls.
+
+![Multi example](images/multi_example.png)
+
+```yaml
+type: entities
+entities:
+  - entity: climate.thermostat_kitchen
+    type: "custom:climate-mode-entity-row"
+    name: My Thermostat
+    icon: "mdi:home"
+    modes:
+      - icon: "mdi:brightness-auto"
+        hvac_mode: "heat"
+        fan_mode: "on_high"
+        swing_mode: "auto"
+        color: "#34c6eb"
+      - hvac_mode: "off"
+        icon: "mdi:snowflake"
+        color: "#B3E5FC"
+      - hvac_mode: "heat"
+        icon: "mdi:fire"
+        color: "#FFC107"
+      - fan_mode: "off"
+        swing_mode: "off"
+        icon: "mdi:fan-off"
+        color: "#FF6659"
+      - fan_mode: "on_high"
+        swing_mode: "auto"
+        icon: "mdi:fan"
+        color: "#76D275"
+        
 ```

climate-mode-entity-row.js

@@ -64,9 +64,10 @@
 
     renderMode(mode) {
       const isActive =
-        ((!mode.preset_mode || mode.preset_mode === this.state.preset_mode) &&
-          !mode.hvac_mode) ||
-        mode.hvac_mode === this.state.hvac_mode;
+        (!mode.preset_mode || mode.preset_mode === this.state.preset_mode) &&
+        (!mode.hvac_mode || mode.hvac_mode === this.state.hvac_mode) &&
+        (!mode.fan_mode || mode.fan_mode === this.state.fan_mode) &&
+        (!mode.swing_mode || mode.swing_mode === this.state.swing_mode);
 
       const onClick = () => this.setMode(mode);
 
@@ -99,6 +100,20 @@
           preset_mode: mode.preset_mode,
         });
       }
+
+      if (mode.fan_mode) {
+        this._hass.callService("climate", "set_fan_mode", {
+          entity_id: this._config.entity,
+          fan_mode: mode.fan_mode,
+        });
+      }
+
+      if (mode.swing_mode) {
+        this._hass.callService("climate", "set_swing_mode", {
+          entity_id: this._config.entity,
+          swing_mode: mode.swing_mode,
+        });
+      }
     }
 
     setConfig(config) {
@@ -115,11 +130,15 @@
 
       const hvac_mode = entity.state;
       const preset_mode = entity.attributes.preset_mode;
+      const fan_mode = entity.attributes.fan_mode;
+      const swing_mode = entity.attributes.swing_mode;
 
       this.state = {
         entity,
         hvac_mode,
         preset_mode,
+        fan_mode,
+        swing_mode,
       };
     }
   }