149 lines
3.4 KiB
JavaScript
149 lines
3.4 KiB
JavaScript
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.addEventListener("click", () => {
|
|
fireEvent("hass-more-info", {entityId: conf.entity}, this);
|
|
});
|
|
} else if (head) {
|
|
el.addEventListener("click", () => this.open = !this.open);
|
|
el.classList.add("fold-toggle");
|
|
}
|
|
|
|
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"
|
|
?open=${this.open}
|
|
>
|
|
<div id="entity">
|
|
${this._head}
|
|
</div>
|
|
<div id="toggle">
|
|
<ha-icon
|
|
@click="${(ev) => {
|
|
ev.stopPropagation();
|
|
this.open = !this.open;
|
|
}
|
|
}"
|
|
icon=${this.open ? "mdi:chevron-up" : "mdi:chevron-down"}
|
|
class="fold-toggle"
|
|
></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;
|
|
}
|
|
.fold-toggle {
|
|
cursor: s-resize;
|
|
}
|
|
.fold-toggle[open], #head[open] .fold-toggle{
|
|
cursor: n-resize;
|
|
}
|
|
|
|
`;
|
|
}
|
|
|
|
}
|
|
|
|
customElements.define('fold-entity-row', FoldEntityRow);
|