95 lines
2.2 KiB
TypeScript
95 lines
2.2 KiB
TypeScript
import { LitElement, css, html } from "lit";
|
|
import { customElement, property } from "lit/decorators";
|
|
import "../../../src/components/ha-card";
|
|
import "../../../src/dialogs/more-info/more-info-content";
|
|
import "../../../src/state-summary/state-card-content";
|
|
import "../ha-demo-options";
|
|
import type { HomeAssistant } from "../../../src/types";
|
|
|
|
@customElement("demo-more-info")
|
|
class DemoMoreInfo extends LitElement {
|
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
|
|
|
@property({ attribute: false }) public entityId!: string;
|
|
|
|
@property({ attribute: "show-config", type: Boolean })
|
|
public showConfig = false;
|
|
|
|
render() {
|
|
const state = this._getState(this.entityId, this.hass.states);
|
|
return html`
|
|
<div class="root">
|
|
<div id="card">
|
|
<ha-card>
|
|
<state-card-content
|
|
.stateObj=${state}
|
|
.hass=${this.hass}
|
|
in-dialog
|
|
></state-card-content>
|
|
|
|
<more-info-content
|
|
.hass=${this.hass}
|
|
.stateObj=${state}
|
|
></more-info-content>
|
|
</ha-card>
|
|
</div>
|
|
${this.showConfig ? html`<pre>${this._jsonEntity(state)}</pre>` : ""}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private _getState(entityId, states) {
|
|
return states[entityId];
|
|
}
|
|
|
|
private _jsonEntity(stateObj) {
|
|
// We are caching some things on stateObj
|
|
// (it sucks, we will remove in the future)
|
|
const tmp = {};
|
|
Object.keys(stateObj).forEach((key) => {
|
|
if (key[0] !== "_") {
|
|
tmp[key] = stateObj[key];
|
|
}
|
|
});
|
|
return JSON.stringify(tmp, null, 2);
|
|
}
|
|
|
|
static styles = css`
|
|
.root {
|
|
display: flex;
|
|
}
|
|
#card {
|
|
max-width: 400px;
|
|
width: 100vw;
|
|
}
|
|
ha-card {
|
|
width: 352px;
|
|
padding: 20px 24px;
|
|
}
|
|
state-card-content {
|
|
display: block;
|
|
margin-bottom: 16px;
|
|
}
|
|
pre {
|
|
width: 400px;
|
|
margin: 0 16px;
|
|
overflow: auto;
|
|
color: var(--primary-text-color);
|
|
}
|
|
@media only screen and (max-width: 800px) {
|
|
.root {
|
|
flex-direction: column;
|
|
}
|
|
pre {
|
|
margin: 16px 0;
|
|
}
|
|
}
|
|
`;
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
"demo-more-info": DemoMoreInfo;
|
|
}
|
|
}
|