Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added onclick-handler to heading #114

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

added onclick-handler to heading #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ resources:
| Key | Type | Description | Example |
| -------------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| heading | \_string | array\_ | The heading to display. Set to false to hide header (**Note**: Also remember to escape!). Can also be an array, with icons. | `heading: "\U0001F6CB Living room"` |
| heading_entity | \_string | array\_ | Entity to control on heading click. See heading entity section. | `heading: "\U0001F6CB Living room"` |
| background | _string_ | A valid CSS color to use as the background | `background: "#EDE7B0"`, `background: red` |
| color | _string_ | A valid CSS color to use as the text color | `color: "#EDE7B0"`, `color: red` |
| link | _string_ | A link, to a different view in HA for example | `link: /lovelace/living_room` |
Expand Down Expand Up @@ -68,6 +69,29 @@ type: custom:banner-card
heading: [mdi:shower, Bathroom, mdi:paper-roll]
```

### heading_entity
You can speficy an entity and optionally a custom action to execute if the user clicks on the heading. Example:
```yaml
- type: custom:banner-card
heading:
- mdi:shower
- Bathroom
heading_entity: switch.living_room
```

The example above toggles the switch `switch.living_room` on every click on the heading. As long as you don't specify a heading color, the heading color will automatically change depending on the entity state.

You can also specify a custom action action as described in [Using entity action](#using-entity-action):
```yaml
- type: custom:banner-card
heading:
- mdi:shower
- Bathroom
heading_entity:
entity: switch.living_room
action:
service: switch.turn_on
```
### map_state

You can use `map_state` to force a value or icon to be rendered when the entity has a certain state. It either supports a full object where you can override any key for the entity, like `value`, `name`, `unit` and so on, or a shorthand string that maps to `value`.
Expand Down
46 changes: 45 additions & 1 deletion src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ class BannerCard extends LitElement {
constructor() {
super();
this.config = {};
this.heading_entity = {};
this.entities = [];
this._hass = {};
}
Expand All @@ -79,6 +80,9 @@ class BannerCard extends LitElement {
"var(--bc-heading-color-light)",
"var(--bc-heading-color-dark)"
);

this.headerNotActiveColor = this.color;
this.headerActiveColor = `var(--paper-item-icon-active-color, ${this.color.match(/(var\(.+\))|(.+)/)[1]})`;

const rowSizeType = typeof config.row_size;
if (rowSizeType !== "undefined") {
Expand All @@ -101,6 +105,26 @@ class BannerCard extends LitElement {
this.entityValues = (this.entities || [])
.filter((conf) => filterEntity(conf, hass.states))
.map((conf) => this.parseEntity(conf));

if (this.config.heading_entity) {
if (typeof this.config.heading_entity === "string") {
this.heading_entity = this.parseEntity({
entity: this.config.heading_entity
});
} else {
this.heading_entity = this.parseEntity(this.config.heading_entity);
}

if (!this.config.color && this.color) {
// no user defined color specified BUT a heading entity
// -> colorize the heading depending on the heading entity state
if (this.heading_entity.state === "on") {
this.color = this.headerActiveColor;
} else {
this.color = this.headerNotActiveColor;
}
}
}
}

parseEntity(config) {
Expand Down Expand Up @@ -175,7 +199,27 @@ class BannerCard extends LitElement {
heading = [heading];
}

const onClick = () => this.config.link && this.navigate(this.config.link);
const onClick = () => {
if (this.config.link) {
this.navigate(this.config.link);
} else if (this.heading_entity.entity) {
if (this.heading_entity.action) {
const { service, ...serviceData } = this.heading_entity.action;
const [domain, action] = service.split(".");
this._hass.callService(domain, action, {
entity_id: this.heading_entity.entity,
...serviceData,
});
} else {
this._hass.callService(
this.heading_entity.domain,
"toggle",
{ entity_id: this.heading_entity.entity }
);
}
}
};

return html`
<h2 class="heading" @click=${onClick} style="color: ${this.color};">
${heading.map((fragment) => {
Expand Down