commit eb8e89c50117ae188132b461db34e71ea3a4d688 Author: Thomas Lovén Date: Wed Apr 10 09:44:03 2019 +0200 Initial commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..d575002 --- /dev/null +++ b/README.md @@ -0,0 +1,49 @@ +more-info-card +============== + +Display the more-info dialog of any entity as a lovelace card. + +# Installation instructions + +This card requires [card-tools](https://github.com/thomasloven/lovelace-card-tools) to be installed. + +For installation instructions [see this guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins). + +The recommended type of this plugin is: `js` + +### If you are using [custom\_updater](https://github.com/custom-components/custom_updater): +```yaml +resources: +- url: /customcards/github/thomasloven/card-tools.js + type: js +- url: /customcards/github/thomasloven/more-info-card.js + type: js +``` + +# Usage instructions + +```yaml +type: custom:more-info-card +entity: +title: +``` + +### `<entity_id>` +The entity to display + +### `<title>` +Card title + + +## Example + +``` +type: custom:more-info-card +entity: vacuum.xiaomi_vacuum_cleaner +title: Vacuum cleaner +``` + +![more-info-card](https://user-images.githubusercontent.com/1299821/55860664-10a41200-5b75-11e9-9729-5b740e27c467.jpg) + +--- +<a href="https://www.buymeacoffee.com/uqD6KHCdJ" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/white_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a> diff --git a/more-info-card.js b/more-info-card.js new file mode 100644 index 0000000..4516665 --- /dev/null +++ b/more-info-card.js @@ -0,0 +1,42 @@ +customElements.whenDefined('card-tools').then(() => { +let cardTools = customElements.get('card-tools'); +class MoreInfoCard extends cardTools.LitElement { + + setConfig(config) { + this.config = config; + } + + render() { + return cardTools.LitHtml` + <ha-card + .header = "${this.config.title}" + > + <more-info-controls + .dialogElement="${null}" + .canConfigure="${false}" + .hass="${this._hass}" + .stateObj="${this.state_obj}" + ></more-info-controls> + </ha-card> + `; + } + + firstUpdated() { + const mic = this.shadowRoot.querySelector("ha-card").querySelector("more-info-controls").shadowRoot; + mic.removeChild(mic.querySelector("app-toolbar")); + } + + set hass(hass) { + this._hass = hass; + this.state_obj = hass.states[this.config.entity]; + this.requestUpdate(); + } + + getCardSize() { + return 1; + } + +} +customElements.define('more-info-card', MoreInfoCard); +}); +