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

♻️ convert ha-attributes to lit-element (#4350)

Browse Source 
* ♻️ convert ha-attributes to lit-element

* Address comments

* inline items

* 🐛 Fix attribution display logic
This commit is contained in:
Ian Richardson 2020-01-09 03:22:23 -06:00 committed by Bram Kragten
parent ff270c4b7d
commit bf71b3a869
2 changed files with 97 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/ha-attributes.js
View File

@ -1,91 +0,0 @@
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import hassAttributeUtil from "../util/hass-attributes-util";
class HaAttributes extends PolymerElement {
static get template() {
return html`
<style include="iron-flex iron-flex-alignment"></style>
<style>
.data-entry .value {
max-width: 200px;
overflow-wrap: break-word;
}
.attribution {
color: var(--secondary-text-color);
text-align: right;
}
</style>
<div class="layout vertical">
<template
is="dom-repeat"
items="[[computeDisplayAttributes(stateObj, filtersArray)]]"
as="attribute"
>
<div class="data-entry layout justified horizontal">
<div class="key">[[formatAttribute(attribute)]]</div>
<div class="value">
[[formatAttributeValue(stateObj, attribute)]]
</div>
</div>
</template>
<div class="attribution" hidden$="[[!computeAttribution(stateObj)]]">
[[computeAttribution(stateObj)]]
</div>
</div>
`;
}
static get properties() {
return {
stateObj: {
type: Object,
},
extraFilters: {
type: String,
value: "",
},
filtersArray: {
type: Array,
computed: "computeFiltersArray(extraFilters)",
},
};
}
computeFiltersArray(extraFilters) {
return Object.keys(hassAttributeUtil.LOGIC_STATE_ATTRIBUTES).concat(
extraFilters ? extraFilters.split(",") : []
);
}
computeDisplayAttributes(stateObj, filtersArray) {
if (!stateObj) {
return [];
}
return Object.keys(stateObj.attributes).filter(function(key) {
return filtersArray.indexOf(key) === -1;
});
}
formatAttribute(attribute) {
return attribute.replace(/_/g, " ");
}
formatAttributeValue(stateObj, attribute) {
var value = stateObj.attributes[attribute];
if (value === null) return "-";
if (Array.isArray(value)) {
return value.join(", ");
}
return value instanceof Object ? JSON.stringify(value, null, 2) : value;
}
computeAttribution(stateObj) {
return stateObj.attributes.attribution;
}
}
customElements.define("ha-attributes", HaAttributes);

97
src/components/ha-attributes.ts Normal file
View File

@ -0,0 +1,97 @@
import {
property,
LitElement,
TemplateResult,
html,
CSSResult,
css,
customElement,
} from "lit-element";
import { HassEntity } from "home-assistant-js-websocket";
import hassAttributeUtil from "../util/hass-attributes-util";
@customElement("ha-attributes")
class HaAttributes extends LitElement {
@property() public stateObj?: HassEntity;
@property() public extraFilters?: string;
protected render(): TemplateResult | void {
if (!this.stateObj) {
return html``;
}
return html`
<div>
${this.computeDisplayAttributes(
Object.keys(hassAttributeUtil.LOGIC_STATE_ATTRIBUTES).concat(
this.extraFilters ? this.extraFilters.split(",") : []
)
).map(
(attribute) => html`
<div class="data-entry">
<div class="key">${attribute.replace(/_/g, " ")}</div>
<div class="value">
${this.formatAttributeValue(attribute)}
</div>
</div>
`
)}
${this.stateObj.attributes.attribution
? html`
<div class="attribution">
${this.stateObj.attributes.attribution}
</div>
`
: ""}
</div>
`;
}
static get styles(): CSSResult {
return css`
.data-entry {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.data-entry .value {
max-width: 200px;
overflow-wrap: break-word;
}
.attribution {
color: var(--secondary-text-color);
text-align: right;
}
`;
}
private computeDisplayAttributes(filtersArray: string[]): string[] {
if (!this.stateObj) {
return [];
}
return Object.keys(this.stateObj.attributes).filter((key) => {
return filtersArray.indexOf(key) === -1;
});
}
private formatAttributeValue(attribute: string): string {
if (!this.stateObj) {
return "-";
}
const value = this.stateObj.attributes[attribute];
if (value === null) {
return "-";
}
if (Array.isArray(value)) {
return value.join(", ");
}
return value instanceof Object ? JSON.stringify(value, null, 2) : value;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-attributes": HaAttributes;
}
}