diff --git a/README.md b/README.md index c562ea6..8b05826 100644 --- a/README.md +++ b/README.md @@ -3,15 +3,14 @@ state-switch Allows you to display different cards depending on the state of an entity, the currently logged in user or the current device-browser combination -This card requires [card-tools](https://github.com/thomasloven/lovelace-card-tools) to be installed. -  > Note in the animation above that the two browser windows have two different users logged in, which changes the rightmost card. ## Installation +This card requires [card-tools](https://github.com/thomasloven/lovelace-card-tools) to be installed. -Please read and follow this guide: [Lovelace Plugins](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins) +For installation instructions [see this guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins). ## Options diff --git a/state-switch.js b/state-switch.js index fb03154..6752a40 100644 --- a/state-switch.js +++ b/state-switch.js @@ -1,26 +1,27 @@ -var LitElement = LitElement || Object.getPrototypeOf(customElements.get('hui-error-entity-row')); -class StateSwitch extends LitElement { +customElements.whenDefined('card-tools').then(() => { +class StateSwitch extends cardTools.litElement() { setConfig(config) { + cardTools.checkVersion(0.3); this.config = config; this.cardSize = 1; this.cards = {} for(var k in this.config.states) { - this.cards[k] = window.cardTools.createCard(this.config.states[k]); + this.cards[k] = cardTools.createCard(this.config.states[k]); this.cardSize = Math.max(this.cardSize, this.cards[k].getCardSize()); } - this.idCard = window.cardTools.createCard({ + this.idCard = cardTools.createCard({ type: "markdown", title: "Device ID", - content: `Your device id is: \`${window.cardTools.deviceID}\``, + content: `Your device id is: \`${cardTools.deviceID()}\``, }); } render() { - return window.cardTools.litHtml` + return cardTools.litHtml()`