diff --git a/README.md b/README.md index 8b05826..ed634ce 100644 --- a/README.md +++ b/README.md @@ -17,11 +17,11 @@ For installation instructions [see this guide](https://github.com/thomasloven/ha | Name | Type | Default | Description | ---- | ---- | ------- | ----------- | type | string | **Required** | `custom:state-switch` -| entity | string | **Required** | Controlling entity id, `user` or `browser` +| entity | string | **Required** | Controlling entity id, `hash`, `user` or `browser` | states | object | **Required** | Map of states to cards to display | default | string | none | State to use as default -The `entity` parameter can take three different types of value +The `entity` parameter can take four different types of value ### Entity\_id If the `entity` parameter is set to an entity id, which card is displayed will depend on the state of that entity. @@ -72,6 +72,48 @@ Note that the words `on` and `off` are magic in yaml, so if the entity is e.g. a Light is off ``` +### hash +If the `entity` parameter is set to `hash`, which card is displayed will depend on the "hash" part of the current URL - i.e. whatever comes after an optional `#` symbol in the current page URL. + +This allows for controlling the view on a browser-window to browser-window basis, and without needing a controlling entity. + +```yaml + cards: + - type: horizontal-stack + cards: + - type: entity-button + entity: light.my_dummy + tap_action: + action: navigate + navigation_path: "#p1" + - type: entity-button + entity: light.my_dummy + tap_action: + action: navigate + navigation_path: "#p2" + - type: entity-button + entity: light.my_dummy + tap_action: + action: navigate + navigation_path: "#p2" + - type: custom:state-switch + entity: hash + default: p1 + states: + p1: + type: markdown + content: | + # Page 1 + p2: + type: markdown + content: | + # Page 2 + p3: + type: markdown + content: | + # Page 3 +``` + ### user If the `entity` parameter is set to `user`, which card is displayed will depend on the currently logged in users username. diff --git a/state-switch.js b/state-switch.js index 6752a40..55221bb 100644 --- a/state-switch.js +++ b/state-switch.js @@ -18,6 +18,10 @@ class StateSwitch extends cardTools.litElement() { title: "Device ID", content: `Your device id is: \`${cardTools.deviceID()}\``, }); + + if(config.entity === 'hash') { + window.addEventListener("location-changed", () => this.updateCard()); + } } render() { @@ -26,9 +30,7 @@ class StateSwitch extends cardTools.litElement() { `; } - set hass(hass) { - if(!hass) return; - + updateCard() { const lastCard = this.currentCard; if (this.config.entity === 'user') { this.currentCard = this.cards[hass.user.name] @@ -38,6 +40,9 @@ class StateSwitch extends cardTools.litElement() { || ((this.config.default) ? this.cards[this.config.default] : this.idCard); + } else if(this.config.entity == 'hash') { + this.currentCard = this.cards[location.hash.substr(1)] + || this.cards[this.config.default]; } else { let state = hass.states[this.config.entity]; this.currentCard = ((state)?this.cards[state.state]:null) @@ -45,6 +50,12 @@ class StateSwitch extends cardTools.litElement() { } if(this.currentCard != lastCard) this.requestUpdate(); + } + + set hass(hass) { + if(!hass) return; + + this.updateCard(); for(var k in this.cards) this.cards[k].hass = hass;