Add input boolean more info (#15675)

* Add input boolean more info

* Fix typings
This commit is contained in:
Paul Bottein 2023-03-02 11:11:43 +01:00 committed by GitHub
parent 15394516af
commit 000e2ef7fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 63 additions and 5 deletions

View File

@ -16,7 +16,12 @@ export const EDITABLE_DOMAINS_WITH_ID = ["scene", "automation"];
* */
export const EDITABLE_DOMAINS_WITH_UNIQUE_ID = ["script"];
/** Domains with with new more info design. */
export const DOMAINS_WITH_NEW_MORE_INFO = ["light", "siren", "switch"];
export const DOMAINS_WITH_NEW_MORE_INFO = [
"input_boolean",
"light",
"siren",
"switch",
];
/** Domains with separate more info dialog. */
export const DOMAINS_WITH_MORE_INFO = [
"alarm_control_panel",
@ -29,6 +34,7 @@ export const DOMAINS_WITH_MORE_INFO = [
"fan",
"group",
"humidifier",
"input_boolean",
"input_datetime",
"light",
"lock",

View File

@ -0,0 +1,51 @@
import { mdiPower, mdiPowerOff } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-attributes";
import type { HomeAssistant } from "../../../types";
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
import "../components/ha-more-info-state-header";
import "../components/ha-more-info-toggle";
@customElement("more-info-input_boolean")
class MoreInfoInputBoolean extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj?: HassEntity;
protected render(): TemplateResult | null {
if (!this.hass || !this.stateObj) {
return null;
}
return html`
<ha-more-info-state-header
.hass=${this.hass}
.stateObj=${this.stateObj}
></ha-more-info-state-header>
<div class="controls">
<ha-more-info-toggle
.stateObj=${this.stateObj}
.hass=${this.hass}
.iconPathOn=${mdiPower}
.iconPathOff=${mdiPowerOff}
></ha-more-info-toggle>
</div>
<ha-attributes
.hass=${this.hass}
.stateObj=${this.stateObj}
></ha-attributes>
`;
}
static get styles(): CSSResultGroup {
return moreInfoControlStyle;
}
}
declare global {
interface HTMLElementTagNameMap {
"more-info-input_boolean": MoreInfoInputBoolean;
}
}

View File

@ -1,8 +1,8 @@
import { mdiVolumeHigh, mdiVolumeOff } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-attributes";
import { LightEntity } from "../../../data/light";
import type { HomeAssistant } from "../../../types";
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
import "../components/ha-more-info-state-header";
@ -12,7 +12,7 @@ import "../components/ha-more-info-toggle";
class MoreInfoSiren extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj?: LightEntity;
@property({ attribute: false }) public stateObj?: HassEntity;
protected render(): TemplateResult | null {
if (!this.hass || !this.stateObj) {

View File

@ -1,8 +1,8 @@
import { mdiPower, mdiPowerOff } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-attributes";
import { LightEntity } from "../../../data/light";
import type { HomeAssistant } from "../../../types";
import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
import "../components/ha-more-info-state-header";
@ -12,7 +12,7 @@ import "../components/ha-more-info-toggle";
class MoreInfoSwitch extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj?: LightEntity;
@property({ attribute: false }) public stateObj?: HassEntity;
protected render(): TemplateResult | null {
if (!this.hass || !this.stateObj) {

View File

@ -16,6 +16,7 @@ const LAZY_LOADED_MORE_INFO_CONTROL = {
fan: () => import("./controls/more-info-fan"),
group: () => import("./controls/more-info-group"),
humidifier: () => import("./controls/more-info-humidifier"),
input_boolean: () => import("./controls/more-info-input_boolean"),
input_datetime: () => import("./controls/more-info-input_datetime"),
light: () => import("./controls/more-info-light"),
lock: () => import("./controls/more-info-lock"),