purifier-card 2.0.1 → 2.1.1

package/.eslintrc.json

@@ -6,8 +6,7 @@
     "es6": true
   },
   "parserOptions": {
-    "ecmaVersion": 2018,
+    "ecmaVersion": 2020,
     "sourceType": "module"
-  },
-  "rules": {}
+  }
 }

package/.github/dependabot.yml

@@ -0,0 +1,14 @@
+version: 2
+updates:
+  # Maintain dependencies for GitHub Actions
+  - package-ecosystem: 'github-actions'
+    directory: '/'
+    schedule:
+      interval: 'monthly'
+
+  # Maintain dependencies for npm
+  - package-ecosystem: 'npm'
+    directory: '/'
+    schedule:
+      interval: 'monthly'
+    open-pull-requests-limit: 10

package/README.md

@@ -1,26 +1,4 @@
-> # 🇺🇦 UKRAINE NEEDS YOUR HELP NOW!
->
-> I'm the creator of this project and I'm Ukrainian.
->
-> **My country, Ukraine, [is being invaded by the Russian Federation, right now](https://www.bbc.com/news/world-europe-60504334)**. I've fled Kyiv and now I'm safe with my family in the western part of Ukraine. At least for now.
-> Russia is hitting target all over my country by ballistic missiles.
->
-> **Please, save me and help to save my country!**
->
-> Ukrainian National Bank opened [an account to Raise Funds for Ukraine’s Armed Forces](https://bank.gov.ua/en/news/all/natsionalniy-bank-vidkriv-spetsrahunok-dlya-zboru-koshtiv-na-potrebi-armiyi):
->
-> ```
-> SWIFT Code NBU: NBUA UA UX
-> JP MORGAN CHASE BANK, New York
-> SWIFT Code: CHASUS33
-> Account: 400807238
-> 383 Madison Avenue, New York, NY 10179, USA
-> IBAN: UA843000010000000047330992708
-> ```
->
-> You can also donate to [charity supporting Ukrainian army](https://savelife.in.ua/en/donate/).
->
-> **THANK YOU!**
+[![SWUbanner](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct-single.svg)](https://stand-with-ukraine.pp.ua/)
 
 # Purifier Card
 
@@ -95,6 +73,10 @@ stats:
   - attribute: motor_speed
     unit: RPM
     subtitle: Motor Speed
+  - value_template: >-
+      {{ (states('sensor.purifier_filter_life') | float(0) / 3600) | round(1) }}
+    unit: hours
+    subtitle: Filter Life
 shortcuts:
   - name: Silent
     icon: 'mdi:weather-night'
@@ -127,7 +109,7 @@ Here is what every option means:
 | `type`             | `string`  | **Required** | `custom:purifier-card`                           |
 | `entity`           | `string`  | **Required** | An entity_id within the `fan` domain.            |
 | `show_name`        | `boolean` | `true`       | Show friendly name of the purifier.              |
-| `show_status`      | `boolean` | `true`       | Show status of the purifier.                     |
+| `show_state`       | `boolean` | `true`       | Show state of the purifier.                      |
 | `show_preset_mode` | `boolean` | `true`       | Show preset mode of the purifier in the header.  |
 | `show_toolbar`     | `boolean` | `true`       | Show toolbar with shortcuts.                     |
 | `compact_view`     | `boolean` | `false`      | Compact view without image.                      |
@@ -148,12 +130,13 @@ Here is what every option means:
 
 You can use any attribute of purifier or even any entity by `entity_id` to display by stats section:
 
-| Name        |   Type   | Default  | Description                                          |
-| ----------- | :------: | -------- | ---------------------------------------------------- |
-| `entity_id` | `string` | Optional | An entity_id with state, i.e. `sensor.purifier_aqi`. |
-| `attribute` | `string` | Optional | Attribute name of the stat, i.e. `filter_left`.      |
-| `unit`      | `string` | Optional | Unit of measure, i.e. `hours`.                       |
-| `subtitle`  | `string` | Optional | Friendly name of the stat, i.e. `Filter`.            |
+| Name             |   Type   | Default  | Description                                          |
+| ---------------- | :------: | -------- | ---------------------------------------------------- |
+| `entity_id`      | `string` | Optional | An entity_id with state, i.e. `sensor.purifier_aqi`. |
+| `attribute`      | `string` | Optional | Attribute name of the stat, i.e. `filter_left`.      |
+| `value_template` | `string` | Optional | Jinja2 template returning a value.                   |
+| `unit`           | `string` | Optional | Unit of measure, i.e. `hours`.                       |
+| `subtitle`       | `string` | Optional | Friendly name of the stat, i.e. `Filter`.            |
 
 ### `shortcuts` object
 
@@ -174,6 +157,48 @@ The card will automatically try to figure out which one of shortcuts is currentl
 2. `entity`'s `percentage` attribute is equal to `shortcut`'s `percentage`.
 3. `entity`'s `preset_mode` attribute is equal to `shortcut`'s `preset_mode`.
 
+## Theming
+
+This card can be styled by changing the values of these CSS properties (globally or per-card via [`card-mod`][card-mod]):
+
+| Variable                    | Default value                                                    | Description                          |
+| --------------------------- | ---------------------------------------------------------------- | ------------------------------------ |
+| `--pc-background`           | `var(--ha-card-background, var(--card-background-color, white))` | Background of the card               |
+| `--pc-primary-text-color`   | `var(--primary-text-color)`                                      | Vacuum name, stats values, etc       |
+| `--pc-secondary-text-color` | `var(--secondary-text-color)`                                    | Status, stats units and titles, etc  |
+| `--pc-icon-color`           | `var(--secondary-text-color)`                                    | Colors of icons                      |
+| `--pc-slider-path-color`    | `var(--round-slider-path-color)`                                 | Color of the slider path             |
+| `--pc-slider-bar-color`     | `var(--round-slider-bar-color)`                                  | Color of the slider bar              |
+| `--pc-toolbar-background`   | `var(--vc-background)`                                           | Background of the toolbar            |
+| `--pc-toolbar-text-color`   | `var(--secondary-text-color)`                                    | Color of the toolbar texts           |
+| `--pc-toolbar-icon-color`   | `var(--secondary-text-color)`                                    | Color of the toolbar icons           |
+| `--pc-divider-color`        | `var(--entities-divider-color, var(--divider-color))`            | Color of dividers                    |
+| `--pc-spacing`              | `10px`                                                           | Paddings and margins inside the card |
+
+### Styling via theme
+
+Here is an example of customization via theme. Read more in the [Frontend documentation](https://www.home-assistant.io/integrations/frontend/).
+
+```yaml
+my-custom-theme:
+  pc-background: '#17A8F4'
+  pc-spacing: 5px
+```
+
+### Styling via card-mod
+
+You can use [`card-mod`][card-mod] to customize the card on per-card basis, like this:
+
+```yaml
+type: 'custom:purifier-card'
+style: |
+  ha-card {
+    --pc-background: #17A8F4;
+    --pc-spacing: 5px;
+  }
+  ...
+```
+
 ## Animations
 
 I've added an animation for this card to make it alive:
@@ -263,7 +288,7 @@ MIT © [Denys Dovhan][denysdovhan]
 
 [home-assistant]: https://www.home-assistant.io/
 [hacs]: https://hacs.xyz
-[preview-image]: https://user-images.githubusercontent.com/3459374/144429511-23d91a48-e296-4d68-a46c-48f3649bdcda.png
+[preview-image]: https://user-images.githubusercontent.com/3459374/164275676-504d92aa-2c61-4451-ae9b-23dad113ce14.png
 [latest-release]: https://github.com/denysdovhan/purifier-card/releases/latest
 [ha-scripts]: https://www.home-assistant.io/docs/scripts/
 [xiaomi-miio-favorite-levels]: https://www.home-assistant.io/integrations/xiaomi_miio/#service-xiaomi_miiofan_set_favorite_level-air-purifiers-only