jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-31 13:07:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Convert generic row to LitElement/TS (#2636)

Browse Source
This commit is contained in:
Paulus Schoutsen 2019-01-30 13:14:33 -08:00 committed by GitHub
parent 7cb2b743fa
commit 75235ec544
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 125 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
src/panels/lovelace/components/hui-generic-entity-row.js
View File

@ -1,138 +0,0 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/entity/state-badge";
import "../../../components/ha-relative-time";
import "../../../components/ha-icon";
import computeStateName from "../../../common/entity/compute_state_name";
class HuiGenericEntityRow extends PolymerElement {
static get template() {
return html`
${this.styleTemplate}
<template is="dom-if" if="[[_stateObj]]">
${this.stateBadgeTemplate}
<div class="flex">${this.infoTemplate} <slot></slot></div>
</template>
<template is="dom-if" if="[[!_stateObj]]">
<div class="not-found">Entity not available: [[config.entity]]</div>
</template>
`;
}
static get styleTemplate() {
return html`
<style>
:host {
display: flex;
align-items: center;
}
.flex {
flex: 1;
margin-left: 16px;
display: flex;
justify-content: space-between;
align-items: center;
min-width: 0;
}
.info {
flex: 1 0 60px;
}
.info,
.info > * {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.flex ::slotted(*) {
margin-left: 8px;
min-width: 0;
}
.flex ::slotted([slot="secondary"]) {
margin-left: 0;
}
.secondary,
ha-relative-time {
display: block;
color: var(--secondary-text-color);
}
.not-found {
flex: 1;
background-color: yellow;
padding: 8px;
}
state-badge {
flex: 0 0 40px;
}
</style>
`;
}
static get stateBadgeTemplate() {
return html`
<state-badge
state-obj="[[_stateObj]]"
override-icon="[[config.icon]]"
></state-badge>
`;
}
static get infoTemplate() {
return html`
<div class="info">
[[_computeName(config.name, _stateObj)]]
<div class="secondary">
<template is="dom-if" if="[[showSecondary]]">
<template
is="dom-if"
if="[[_equals(config.secondary_info, 'entity-id')]]"
>
[[_stateObj.entity_id]]
</template>
<template
is="dom-if"
if="[[_equals(config.secondary_info, 'last-changed')]]"
>
<ha-relative-time
hass="[[hass]]"
datetime="[[_stateObj.last_changed]]"
></ha-relative-time>
</template>
</template>
<template is="dom-if" if="[[!showSecondary]">
<slot name="secondary"></slot>
</template>
</div>
</div>
`;
}
static get properties() {
return {
hass: Object,
config: Object,
_stateObj: {
type: Object,
computed: "_computeStateObj(hass.states, config.entity)",
},
showSecondary: {
type: Boolean,
value: true,
},
};
}
_equals(a, b) {
return a === b;
}
_computeStateObj(states, entityId) {
return states && entityId in states ? states[entityId] : null;
}
_computeName(name, stateObj) {
return name || computeStateName(stateObj);
}
}
customElements.define("hui-generic-entity-row", HuiGenericEntityRow);

125
src/panels/lovelace/components/hui-generic-entity-row.ts Normal file
View File

@ -0,0 +1,125 @@
import "../../../components/entity/state-badge";
import "../../../components/ha-relative-time";
import "../../../components/ha-icon";
import computeStateName from "../../../common/entity/compute_state_name";
import {
LitElement,
PropertyDeclarations,
html,
css,
CSSResult,
} from "lit-element";
import { HomeAssistant } from "../../../types";
import { EntitiesCardEntityConfig } from "../cards/hui-entities-card";
class HuiGenericEntityRow extends LitElement {
public hass?: HomeAssistant;
public config?: EntitiesCardEntityConfig;
public showSecondary: boolean;
constructor() {
super();
this.showSecondary = true;
}
protected render() {
if (!this.hass || !this.config) {
return html``;
}
const stateObj = this.config.entity
? this.hass.states[this.config.entity]
: undefined;
if (!stateObj) {
return html`
<div class="not-found">Entity not available: [[config.entity]]</div>
`;
}
return html`
<state-badge
.stateObj="${stateObj}"
.overrideIcon="${this.config.icon}"
></state-badge>
<div class="flex">
<div class="info">
${this.config.name || computeStateName(stateObj)}
<div class="secondary">
${!this.showSecondary
? html`
<slot name="secondary"></slot>
`
: this.config.secondary_info === "entity-id"
? stateObj.entity_id
: this.config.secondary_info === "last-changed"
? html`
<ha-relative-time
.hass="${this.hass}"
.datetime="${stateObj.last_changed}"
></ha-relative-time>
`
: ""}
</div>
</div>
<slot></slot>
</div>
`;
}
static get properties(): PropertyDeclarations {
return {
hass: {},
config: {},
showSecondary: {},
};
}
static get styles(): CSSResult {
return css`
:host {
display: flex;
align-items: center;
}
.flex {
flex: 1;
margin-left: 16px;
display: flex;
justify-content: space-between;
align-items: center;
min-width: 0;
}
.info {
flex: 1 0 60px;
}
.info,
.info > * {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.flex ::slotted(*) {
margin-left: 8px;
min-width: 0;
}
.flex ::slotted([slot="secondary"]) {
margin-left: 0;
}
.secondary,
ha-relative-time {
display: block;
color: var(--secondary-text-color);
}
.not-found {
flex: 1;
background-color: yellow;
padding: 8px;
}
state-badge {
flex: 0 0 40px;
}
`;
}
}
customElements.define("hui-generic-entity-row", HuiGenericEntityRow);