Total overhaul!
This commit is contained in:
parent
437fa1234d
commit
ce10936fea
1
.gitattributes
vendored
Normal file
1
.gitattributes
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
fold-entity-row.js binary
|
||||||
51
.github/ISSUE_TEMPLATE/bug-report.md
vendored
Normal file
51
.github/ISSUE_TEMPLATE/bug-report.md
vendored
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
---
|
||||||
|
name: Bug report
|
||||||
|
about: For reporting bugs or unexpected behavior of popup-card
|
||||||
|
title: ''
|
||||||
|
labels: ''
|
||||||
|
assignees: ''
|
||||||
|
---
|
||||||
|
|
||||||
|
My Home Assistant version: 0.XX.X
|
||||||
|
|
||||||
|
|
||||||
|
My lovelace configuration method (GUI or yaml):
|
||||||
|
|
||||||
|
|
||||||
|
What I am doing:
|
||||||
|
|
||||||
|
|
||||||
|
What I expected to happen:
|
||||||
|
|
||||||
|
|
||||||
|
What happened instead:
|
||||||
|
|
||||||
|
|
||||||
|
**Minimal** steps to reproduce:
|
||||||
|
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# The least ammount of code possible to reproduce my error
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# End of code
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
Error messages from the browser console:
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**By putting an X in the boxes ([ ]) below, I indicate that I:**
|
||||||
|
|
||||||
|
[ ] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
|
||||||
|
|
||||||
|
[ ] Have made sure I am using the latest version of popup-card.
|
||||||
|
|
||||||
|
[ ] Have made sure I am using the latest version of [card-tools](https://github.com/thomasloven/lovelace-card-tools).
|
||||||
|
|
||||||
|
[ ] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
|
||||||
|
|
||||||
|
[ ] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
|
||||||
7
.github/ISSUE_TEMPLATE/feature-request.md
vendored
Normal file
7
.github/ISSUE_TEMPLATE/feature-request.md
vendored
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
name: Feature request
|
||||||
|
about: For suggesting new features of popup-card
|
||||||
|
title: ''
|
||||||
|
labels: ''
|
||||||
|
assignees: ''
|
||||||
|
---
|
||||||
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
node_modules/
|
||||||
|
package-lock.json
|
||||||
|
package.json
|
||||||
|
webpack.config.js
|
||||||
42
Makefile
Normal file
42
Makefile
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
AUTHOR := Thomas Lovén
|
||||||
|
CARD_TOOLS := $(PWD)/../card-tools
|
||||||
|
|
||||||
|
PACKAGE := $(shell basename $(CURDIR))
|
||||||
|
PACKAGE := $(PACKAGE:lovelace-%=%)
|
||||||
|
DOCKER_CMD:=docker run --rm -v $(CARD_TOOLS):/card-tools:ro -v $(PWD):/usr/src/$(PACKAGE) -w="/usr/src/$(PACKAGE)" node:11
|
||||||
|
|
||||||
|
build: setup
|
||||||
|
$(DOCKER_CMD) npm run build
|
||||||
|
|
||||||
|
dev: setup
|
||||||
|
$(DOCKER_CMD) npm run watch
|
||||||
|
|
||||||
|
setup: package.json package-lock.json webpack.config.js
|
||||||
|
|
||||||
|
clean:
|
||||||
|
rm package.json package-lock.json webpack.config.js
|
||||||
|
rm -r node_modules
|
||||||
|
rm $(PACKAGE).js
|
||||||
|
|
||||||
|
define WEBPACK_CONFIG
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: './src/main.js',
|
||||||
|
mode: 'production',
|
||||||
|
output: {
|
||||||
|
filename: '$(PACKAGE).js',
|
||||||
|
path: path.resolve(__dirname)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
endef
|
||||||
|
export WEBPACK_CONFIG
|
||||||
|
webpack.config.js:
|
||||||
|
echo "$$WEBPACK_CONFIG" >> $@
|
||||||
|
|
||||||
|
package-lock.json:
|
||||||
|
$(DOCKER_CMD) npm install webpack webpack-cli --save-dev
|
||||||
|
|
||||||
|
package.json:
|
||||||
|
$(DOCKER_CMD) /bin/bash -c "npm set init.license 'MIT' && npm set init.author.name '$(AUTHOR)' && npm init -y"
|
||||||
|
$(DOCKER_CMD) sed -E -i -e '/^ +"main"/d' -e '/^ +"scripts"/a\ "build": "webpack",' -e '/^ +"scripts"/a\ "watch": "webpack --watch --mode=development",' -e '2a\ "private": true,' $@
|
||||||
163
README.md
163
README.md
@ -1,99 +1,134 @@
|
|||||||
fold-entity-row
|
fold-entity-row
|
||||||
========================
|
===============
|
||||||
|
|
||||||
Make a group from entities in a lovelace entities card - and fold them away when you don't want to see them.
|
Fold away and hide rows in lovelace [entities](https://www.home-assistant.io/lovelace/entities/) cards.
|
||||||
|
|
||||||
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).
|
For installation instructions [see this guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins).
|
||||||
|
|
||||||
## Options
|
Install `fold-entity-row.js` as a `module`.
|
||||||
|
|
||||||
| Name | Type | Default | Description
|
## Usage
|
||||||
| ---- | ---- | ------- | -----------
|
Add this to an entities card:
|
||||||
| type | string | **Required** | `custom:fold-entity-row`
|
|
||||||
| head | entity/object | **Required** | The entity or row that should be the header
|
|
||||||
| items | list | none | Entites or rows to put in the fold
|
|
||||||
| group_config | object | none | Extra options to put on each item in the list
|
|
||||||
| open | boolean | false | Set to true to have the fold opened by default
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
type: entities
|
type: entities
|
||||||
title: Folding entities
|
|
||||||
entities:
|
entities:
|
||||||
- light.bed_light
|
- light.bed_light
|
||||||
- type: custom:fold-entity-row
|
- type: custom:fold-entity-row
|
||||||
head: sensor.yr_symbol
|
head: light.bed_light
|
||||||
items:
|
entities:
|
||||||
- sensor.outside_humidity
|
|
||||||
- sensor.outside_temperature
|
|
||||||
- light.bed_light
|
- light.bed_light
|
||||||
- type: custom:fold-entity-row
|
- light.ceiling_lights
|
||||||
|
- light.kitchen_lights
|
||||||
|
```
|
||||||
|
|
||||||
|
This will show the row specified in `head:` with an arrow next to it. When clicked, the rows specified in `entities:` will be revealed.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Options
|
||||||
|
|
||||||
|
- `head:` and any row in `entities:` can be customized in exactly the same ways as ordinary [entities](https://www.home-assistant.io/lovelace/entities/) card rows.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
type: custom:fold-entity-row
|
||||||
head:
|
head:
|
||||||
type: section
|
type: section
|
||||||
label: Lights
|
label: Customizations
|
||||||
|
entities:
|
||||||
|
- light.bed_light
|
||||||
|
- entity: light.ceiling_lights
|
||||||
|
name: A light
|
||||||
|
- light.kitchen_lights
|
||||||
|
```
|
||||||
|
|
||||||
|
- Options specified in `group_config:` will be applied to all rows in the fold.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
type: custom:fold-entity-row
|
||||||
|
head:
|
||||||
|
type: section
|
||||||
|
label: group_config
|
||||||
group_config:
|
group_config:
|
||||||
secondary_info: last-changed
|
secondary_info: last-changed
|
||||||
items:
|
icon: mdi:desk-lamp
|
||||||
|
entities:
|
||||||
- light.bed_light
|
- light.bed_light
|
||||||
- light.ceiling_lights
|
- light.ceiling_lights
|
||||||
- light.kitchen_lights
|
- light.kitchen_lights
|
||||||
- light.bed_light
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
- The left side padding can be adjusted by the `padding:` parameter (value in pixels).
|
||||||
|
|
||||||
### Groups will populate the fold automatically
|
|
||||||
|
|
||||||
If the head is a group, `items:` will be ignored and the fold will instead be filled with the entities in the group.
|
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
type: entities
|
type: custom:fold-entity-row
|
||||||
title: Folding groups
|
head:
|
||||||
|
type: section
|
||||||
|
label: padding
|
||||||
|
padding: 5
|
||||||
entities:
|
entities:
|
||||||
- type: custom:fold-entity-row
|
- light.bed_light
|
||||||
|
- light.ceiling_lights
|
||||||
|
- light.kitchen_lights
|
||||||
|
```
|
||||||
|
|
||||||
|
- Setting `head:` to a group will populate the entities list with the entities of that group.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
type: custom:fold-entity-row
|
||||||
head: group.all_lights
|
head: group.all_lights
|
||||||
- type: custom:fold-entity-row
|
|
||||||
head: group.all_scripts
|
|
||||||
- type: custom:fold-entity-row
|
|
||||||
head: group.all_automations
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
- Setting `open:` to true will make the fold open by default.
|
||||||
|
|
||||||
|
|
||||||
#### Use with entity-filter
|
|
||||||
The `items` list can be populated by `entity-filter` using a trick:
|
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
type: entities
|
type: custom:fold-entity-row
|
||||||
title: Entity Filter Fold
|
head:
|
||||||
entities:
|
type: section
|
||||||
- type: custom:hui-entity-filter-card
|
label: open
|
||||||
|
open: true
|
||||||
entities:
|
entities:
|
||||||
- light.bed_light
|
- light.bed_light
|
||||||
- light.ceiling_lights
|
- light.ceiling_lights
|
||||||
- light.kitchen_lights
|
- light.kitchen_lights
|
||||||
state_filter:
|
|
||||||
- "on"
|
|
||||||
card:
|
|
||||||
type: custom:fold-entity-row
|
|
||||||
head:
|
|
||||||
type: section
|
|
||||||
label: Lit lamps
|
|
||||||
|
|
||||||
- type: custom:hui-entity-filter-card
|
|
||||||
entities:
|
|
||||||
- light.bed_light
|
|
||||||
- light.ceiling_lights
|
|
||||||
- light.kitchen_lights
|
|
||||||
state_filter:
|
|
||||||
- "off"
|
|
||||||
card:
|
|
||||||
type: custom:fold-entity-row
|
|
||||||
head:
|
|
||||||
type: section
|
|
||||||
label: Unlit lamps
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Advanced
|
||||||
|
|
||||||
|
- Folds can be nested
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
type: custom:fold-entity-row
|
||||||
|
head:
|
||||||
|
type: section
|
||||||
|
label: Nested
|
||||||
|
entities:
|
||||||
|
- type: custom:fold-entity-row
|
||||||
|
head: light.bed_light
|
||||||
|
entities:
|
||||||
|
- type: custom:fold-entity-row
|
||||||
|
head: light.bed_light
|
||||||
|
entities:
|
||||||
|
- light.bed_light
|
||||||
|
```
|
||||||
|
|
||||||
|
- Folds can be populated by any wrapping element that fills the `entities:` parameter, such as [auto-entities](https://github.com/thomasloven/lovelace-auto-entities)
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
type: custom:auto-entities
|
||||||
|
filter:
|
||||||
|
include:
|
||||||
|
- domain: sensor
|
||||||
|
card:
|
||||||
|
type: custom:fold-entity-row
|
||||||
|
head:
|
||||||
|
type: section
|
||||||
|
label: Automatically populated
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
<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>
|
||||||
|
|||||||
@ -1,41 +1,24 @@
|
|||||||
customElements.whenDefined('card-tools').then(() => {
|
!function(e){var t={};function i(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=e,i.c=t,i.d=function(e,t,n){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)i.d(n,o,function(t){return e[t]}.bind(null,o));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=0)}([function(e,t,i){"use strict";i.r(t);const n=Object.getPrototypeOf(customElements.get("home-assistant-main")),o=n.prototype.html,s=n.prototype.css;function r(e,t,i=null){if((e=new Event(e,{bubbles:!0,cancelable:!1,composed:!0})).detail=t||{},i)i.dispatchEvent(e);else{var n=document.querySelector("home-assistant");(n=(n=(n=(n=(n=(n=(n=(n=(n=(n=(n=n&&n.shadowRoot)&&n.querySelector("home-assistant-main"))&&n.shadowRoot)&&n.querySelector("app-drawer-layout partial-panel-resolver"))&&n.shadowRoot||n)&&n.querySelector("ha-panel-lovelace"))&&n.shadowRoot)&&n.querySelector("hui-root"))&&n.shadowRoot)&&n.querySelector("ha-app-layout #view"))&&n.firstElementChild)&&n.dispatchEvent(e)}}const a="custom:";function c(e,t){const i=document.createElement("hui-error-card");return i.setConfig({type:"error",error:e,config:t}),i}function l(e,t){if(!t||"object"!=typeof t||!t.type)return c(`No ${e} type configured`,t);let i=t.type;if(i=i.startsWith(a)?i.substr(a.length):`hui-${i}-${e}`,customElements.get(i))return function(e,t){const i=document.createElement(e);try{i.setConfig(t)}catch(e){return c(e,t)}return i}(i,t);const n=c(`Custom element doesn't exist: ${i}.`,t);n.style.display="None";const o=setTimeout(()=>{n.style.display=""},2e3);return customElements.whenDefined(i).then(()=>{clearTimeout(o),r("ll-rebuild",{},n)}),n}customElements.define("fold-entity-row",class extends n{static get properties(){return{hass:{},open:Boolean}}setConfig(e){this._config=Object.assign({},{open:!1,padding:20,group_config:{}},e),this.open=this._config.open,this._head=this._renderRow(this._config.head,!0);let t=this._config.items;this._config.entities&&(t=this._config.entities),"string"==typeof this._config.head&&this._config.head.startsWith("group.")&&(t=document.querySelector("home-assistant").hass.states[this._config.head].attributes.entity_id),t&&(this._entities=t.map(e=>this._renderRow(e)))}_renderRow(e,t=!1){e="string"==typeof e?{entity:e}:e,t||(e=Object.assign({},this._config.group_config,e));const i=function(e){const t=new Set(["call-service","divider","section","weblink"]);if(!e||"object"!=typeof e||!e.entity&&!e.type)return c("Invalid configuration given.",e);const i=e.type||"default";if(t.has(i)||i.startsWith(a))return l("row",e);const n=e.entity.split(".",1)[0];return Object.assign(e,{type:{alert:"toggle",automation:"toggle",climate:"climate",cover:"cover",fan:"toggle",group:"group",input_boolean:"toggle",input_number:"input-number",input_select:"input-select",input_text:"input-text",light:"toggle",lock:"lock",media_player:"media-player",remote:"toggle",scene:"scene",script:"script",sensor:"sensor",timer:"timer",switch:"toggle",vacuum:"toggle",water_heater:"climate",input_datetime:"input-datetime"}[n]||"text"}),l("entity-row",e)}(e);return e.entity&&!["input_number","input_select","input_text","input_datetime","scene","weblink"].includes(e.entity.split(".",1)[0])?(i.classList.add("state-card-dialog"),i.addEventListener("click",()=>{r("hass-more-info",{entityId:e.entity},this)})):t&&i.addEventListener("click",()=>this.open=!this.open),t&&"section"===e.type&&i.updateComplete.then(()=>{i.shadowRoot.querySelector(".divider").style.marginRight="-56px"}),i}render(){return this._head.hass=this.hass,this._entities&&this._entities.forEach(e=>e.hass=this.hass),o`
|
||||||
let cardTools = customElements.get('card-tools');
|
<div id="head">
|
||||||
class FoldEntityRow extends cardTools.LitElement {
|
<div id="entity">
|
||||||
|
|
||||||
static get properties() {
|
|
||||||
return {
|
|
||||||
_closed: Boolean,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return cardTools.LitHtml`
|
|
||||||
${this._renderStyle()}
|
|
||||||
<div id=head>
|
|
||||||
<div id=entity>
|
|
||||||
${this._head}
|
${this._head}
|
||||||
</div>
|
</div>
|
||||||
<div id=toggle>
|
<div id="toggle">
|
||||||
<ha-icon @click=${this._toggle} icon="${this._closed ? "mdi:chevron-down" : "mdi:chevron-up"}"></ha-icon>
|
<ha-icon
|
||||||
|
@click="${()=>this.open=!this.open}"
|
||||||
|
icon=${this.open?"mdi:chevron-up":"mdi:chevron-down"}
|
||||||
|
></ha-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id=items ?closed=${this._closed}>
|
<div id="items"
|
||||||
|
?open=${this.open}
|
||||||
|
style="
|
||||||
|
${this._config.padding?`padding-left: ${this._config.padding}px;`:""}
|
||||||
|
"
|
||||||
|
>
|
||||||
${this._entities}
|
${this._entities}
|
||||||
</div>
|
</div>
|
||||||
`;
|
`}static get styles(){return s`
|
||||||
}
|
|
||||||
|
|
||||||
_renderStyle() {
|
|
||||||
return cardTools.LitHtml`
|
|
||||||
<style>
|
|
||||||
#items {
|
|
||||||
padding: 0 0 0 40px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
[closed] > div {
|
|
||||||
overflow: hidden;
|
|
||||||
max-height: 0;
|
|
||||||
}
|
|
||||||
#head {
|
#head {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
@ -44,102 +27,25 @@ class FoldEntityRow extends cardTools.LitElement {
|
|||||||
width: 0px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
#toggle {
|
#toggle {
|
||||||
flex: 0 1 40px;
|
flex 0 1 40px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
#items {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
max-height: 0;
|
||||||
|
}
|
||||||
|
#items[open] {
|
||||||
|
overflow: none;
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
ha-icon {
|
ha-icon {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
}
|
}
|
||||||
</style>
|
.state-card-dialog {
|
||||||
`;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
`}})}]);
|
||||||
firstUpdated() {
|
|
||||||
this.hass = this._hass;
|
|
||||||
}
|
|
||||||
|
|
||||||
_toggle()
|
|
||||||
{
|
|
||||||
this._closed = !this._closed;
|
|
||||||
}
|
|
||||||
|
|
||||||
_renderElement(conf, options) {
|
|
||||||
conf = (typeof conf === "string") ? {entity: conf} : conf;
|
|
||||||
conf = Object.assign(conf, options);
|
|
||||||
const element = cardTools.createEntityRow(conf);
|
|
||||||
if(this._hass) element.hass = this._hass;
|
|
||||||
|
|
||||||
const DOMAINS_HIDE_MORE_INFO = [
|
|
||||||
"input_number",
|
|
||||||
"input_select",
|
|
||||||
"input_text",
|
|
||||||
"scene",
|
|
||||||
"weblink",
|
|
||||||
];
|
|
||||||
if (conf.entity && !DOMAINS_HIDE_MORE_INFO.includes(conf.entity.split(".")[0])) {
|
|
||||||
element.classList.add("state-card-dialog");
|
|
||||||
element.addEventListener("click", () => {
|
|
||||||
cardTools.moreInfo(conf.entity);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return element;
|
|
||||||
}
|
|
||||||
|
|
||||||
_renderHead(conf) {
|
|
||||||
const element = this._renderElement(conf);
|
|
||||||
|
|
||||||
// Stretch the line above section rows
|
|
||||||
if (conf.type && conf.type === "section") {
|
|
||||||
element.updateComplete.then(() => {
|
|
||||||
const divider = element.shadowRoot.querySelector(".divider");
|
|
||||||
divider.style.marginRight = "-53px";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return element;
|
|
||||||
}
|
|
||||||
|
|
||||||
_renderItem(conf, options) {
|
|
||||||
const element = this._renderElement(conf, options);
|
|
||||||
return cardTools.LitHtml`<div> ${element} </div>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
setConfig(config) {
|
|
||||||
if(!this._config) {
|
|
||||||
if(!cardTools) throw new Error(`Can't find card-tools. See https://github.com/thomasloven/lovelace-card-tools`);
|
|
||||||
cardTools.checkVersion(0.1);
|
|
||||||
this._config = config;
|
|
||||||
this._closed = !config.open;
|
|
||||||
|
|
||||||
this._head = this._renderHead(config.head);
|
|
||||||
}
|
|
||||||
|
|
||||||
const head = (typeof config.head === "string") ? config.head : config.head.entity;
|
|
||||||
let items = config.items
|
|
||||||
if (config.entities)
|
|
||||||
items = config.entities;
|
|
||||||
if (head && head.split('.')[0] === "group")
|
|
||||||
items = cardTools.hass.states[head].attributes.entity_id;
|
|
||||||
|
|
||||||
if(items)
|
|
||||||
this._entities = items.map((e) => this._renderItem(e, config.group_config));
|
|
||||||
this.requestUpdate();
|
|
||||||
}
|
|
||||||
|
|
||||||
set hass(hass) {
|
|
||||||
this._hass = hass;
|
|
||||||
this._head.hass = hass;
|
|
||||||
this.shadowRoot.querySelectorAll("#items > div > *").forEach((e) => e.hass = hass);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
customElements.define('fold-entity-row', FoldEntityRow);
|
|
||||||
});
|
|
||||||
|
|
||||||
window.setTimeout(() => {
|
|
||||||
if(customElements.get('card-tools')) return;
|
|
||||||
customElements.define('fold-entity-row', class extends HTMLElement{
|
|
||||||
setConfig() { throw new Error("Can't find card-tools. See https://github.com/thomasloven/lovelace-card-tools");}
|
|
||||||
});
|
|
||||||
}, 2000);
|
|
||||||
135
src/main.js
Normal file
135
src/main.js
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
import { LitElement, html, css } from "/card-tools/lit-element.js";
|
||||||
|
import { fireEvent } from "/card-tools/event.js";
|
||||||
|
import { createEntityRow } from "/card-tools/lovelace-element.js";
|
||||||
|
import { hass } from "/card-tools/hass.js";
|
||||||
|
|
||||||
|
class FoldEntityRow extends LitElement {
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
hass: {},
|
||||||
|
open: Boolean,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
setConfig(config) {
|
||||||
|
const defaults = {
|
||||||
|
open: false,
|
||||||
|
padding: 20,
|
||||||
|
group_config: {},
|
||||||
|
};
|
||||||
|
|
||||||
|
this._config = Object.assign({}, defaults, config);
|
||||||
|
this.open = this._config.open;
|
||||||
|
|
||||||
|
this._head = this._renderRow(this._config.head, true);
|
||||||
|
|
||||||
|
let items = this._config.items;
|
||||||
|
if (this._config.entities)
|
||||||
|
items = this._config.entities;
|
||||||
|
if (typeof this._config.head === "string" && this._config.head.startsWith("group."))
|
||||||
|
items = hass().states[this._config.head].attributes.entity_id;
|
||||||
|
if (items)
|
||||||
|
this._entities = items.map((e) => this._renderRow(e));
|
||||||
|
}
|
||||||
|
|
||||||
|
_renderRow(conf, head=false) {
|
||||||
|
conf = (typeof conf === "string") ? {entity: conf} : conf;
|
||||||
|
|
||||||
|
if (!head) {
|
||||||
|
conf = Object.assign({}, this._config.group_config, conf);
|
||||||
|
}
|
||||||
|
|
||||||
|
const DOMAINS_HIDE_MORE_INFO = [
|
||||||
|
"input_number",
|
||||||
|
"input_select",
|
||||||
|
"input_text",
|
||||||
|
"input_datetime",
|
||||||
|
"scene",
|
||||||
|
"weblink",
|
||||||
|
];
|
||||||
|
|
||||||
|
const el = createEntityRow(conf);
|
||||||
|
if (conf.entity && !DOMAINS_HIDE_MORE_INFO.includes(conf.entity.split(".",1)[0])) {
|
||||||
|
el.classList.add("state-card-dialog");
|
||||||
|
el.addEventListener("click", () => {
|
||||||
|
fireEvent("hass-more-info", {entityId: conf.entity}, this);
|
||||||
|
});
|
||||||
|
} else if (head) {
|
||||||
|
el.addEventListener("click", () => this.open = !this.open);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (head && conf.type === "section")
|
||||||
|
el.updateComplete.then(() => {
|
||||||
|
const divider = el.shadowRoot.querySelector(".divider");
|
||||||
|
divider.style.marginRight = "-56px";
|
||||||
|
});
|
||||||
|
|
||||||
|
return el;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
this._head.hass = this.hass;
|
||||||
|
if (this._entities)
|
||||||
|
this._entities.forEach((e) => e.hass = this.hass);
|
||||||
|
return html`
|
||||||
|
<div id="head">
|
||||||
|
<div id="entity">
|
||||||
|
${this._head}
|
||||||
|
</div>
|
||||||
|
<div id="toggle">
|
||||||
|
<ha-icon
|
||||||
|
@click="${() => this.open = !this.open}"
|
||||||
|
icon=${this.open ? "mdi:chevron-up" : "mdi:chevron-down"}
|
||||||
|
></ha-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="items"
|
||||||
|
?open=${this.open}
|
||||||
|
style="
|
||||||
|
${this._config.padding
|
||||||
|
? `padding-left: ${this._config.padding}px;`
|
||||||
|
: ''}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
${this._entities}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static get styles() {
|
||||||
|
return css`
|
||||||
|
#head {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
#entity {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
width: 0px;
|
||||||
|
}
|
||||||
|
#toggle {
|
||||||
|
flex 0 1 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
#items {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
max-height: 0;
|
||||||
|
}
|
||||||
|
#items[open] {
|
||||||
|
overflow: none;
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
|
ha-icon {
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
.state-card-dialog {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('fold-entity-row', FoldEntityRow);
|
||||||
Loading…
x
Reference in New Issue
Block a user