Add toggle for camera view in area card (#10810)

Co-authored-by: Zack Barett <arnett.zackary@gmail.com>
This commit is contained in:
Bram Kragten 2021-12-06 18:02:32 +01:00 committed by GitHub
parent 66df15007a
commit d6b9b16f02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 35 additions and 8 deletions

View File

@ -25,6 +25,7 @@ import { computeDomain } from "../../../common/entity/compute_domain";
import { domainIcon } from "../../../common/entity/domain_icon"; import { domainIcon } from "../../../common/entity/domain_icon";
import { navigate } from "../../../common/navigate"; import { navigate } from "../../../common/navigate";
import { formatNumber } from "../../../common/number/format_number"; import { formatNumber } from "../../../common/number/format_number";
import { subscribeOne } from "../../../common/util/subscribe-one";
import "../../../components/entity/state-badge"; import "../../../components/entity/state-badge";
import "../../../components/ha-card"; import "../../../components/ha-card";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
@ -83,8 +84,11 @@ export class HuiAreaCard
return document.createElement("hui-area-card-editor"); return document.createElement("hui-area-card-editor");
} }
public static getStubConfig(): AreaCardConfig { public static async getStubConfig(
return { type: "area", area: "" }; hass: HomeAssistant
): Promise<AreaCardConfig> {
const areas = await subscribeOne(hass.connection, subscribeAreaRegistry);
return { type: "area", area: areas[0]?.area_id || "" };
} }
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@ -358,7 +362,7 @@ export class HuiAreaCard
}); });
let cameraEntityId: string | undefined; let cameraEntityId: string | undefined;
if ("camera" in entitiesByDomain) { if (this._config.show_camera && "camera" in entitiesByDomain) {
cameraEntityId = entitiesByDomain.camera[0].entity_id; cameraEntityId = entitiesByDomain.camera[0].entity_id;
} }

View File

@ -79,6 +79,7 @@ export interface EntitiesCardConfig extends LovelaceCardConfig {
export interface AreaCardConfig extends LovelaceCardConfig { export interface AreaCardConfig extends LovelaceCardConfig {
area: string; area: string;
navigation_path?: string; navigation_path?: string;
show_camera?: boolean;
} }
export interface ButtonCardConfig extends LovelaceCardConfig { export interface ButtonCardConfig extends LovelaceCardConfig {

View File

@ -1,7 +1,7 @@
import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-input";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { assert, assign, object, optional, string } from "superstruct"; import { assert, assign, boolean, object, optional, string } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-area-picker"; import "../../../../components/ha-area-picker";
import { HomeAssistant } from "../../../../types"; import { HomeAssistant } from "../../../../types";
@ -11,6 +11,8 @@ import { LovelaceCardEditor } from "../../types";
import { baseLovelaceCardConfig } from "../structs/base-card-struct"; import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import { EditorTarget } from "../types"; import { EditorTarget } from "../types";
import { configElementStyle } from "./config-elements-style"; import { configElementStyle } from "./config-elements-style";
import "../../../../components/ha-formfield";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
const cardConfigStruct = assign( const cardConfigStruct = assign(
baseLovelaceCardConfig, baseLovelaceCardConfig,
@ -18,6 +20,7 @@ const cardConfigStruct = assign(
area: optional(string()), area: optional(string()),
navigation_path: optional(string()), navigation_path: optional(string()),
theme: optional(string()), theme: optional(string()),
show_camera: optional(boolean()),
}) })
); );
@ -47,6 +50,10 @@ export class HuiAreaCardEditor
return this._config!.theme || ""; return this._config!.theme || "";
} }
get _show_camera(): boolean {
return this._config!.show_camera || false;
}
protected render(): TemplateResult { protected render(): TemplateResult {
if (!this.hass || !this._config) { if (!this.hass || !this._config) {
return html``; return html``;
@ -64,6 +71,18 @@ export class HuiAreaCardEditor
)} )}
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
></ha-area-picker> ></ha-area-picker>
<ha-formfield
.label=${this.hass.localize(
"ui.panel.lovelace.editor.card.area.show_camera"
)}
.dir=${computeRTLDirection(this.hass)}
>
<ha-switch
.checked=${this._show_camera}
.configValue=${"show_camera"}
@change=${this._valueChanged}
></ha-switch>
</ha-formfield>
<paper-input <paper-input
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.panel.lovelace.editor.action-editor.navigation_path" "ui.panel.lovelace.editor.action-editor.navigation_path"
@ -88,7 +107,8 @@ export class HuiAreaCardEditor
return; return;
} }
const target = ev.target! as EditorTarget; const target = ev.target! as EditorTarget;
const value = ev.detail.value; const value =
target.checked !== undefined ? target.checked : ev.detail.value;
if (this[`_${target.configValue}`] === value) { if (this[`_${target.configValue}`] === value) {
return; return;

View File

@ -13,7 +13,7 @@ export const getCardStubConfig = async (
const elClass = await getCardElementClass(type); const elClass = await getCardElementClass(type);
if (elClass && elClass.getStubConfig) { if (elClass && elClass.getStubConfig) {
const classStubConfig = elClass.getStubConfig( const classStubConfig = await elClass.getStubConfig(
hass, hass,
entities, entities,
entitiesFallback entitiesFallback

View File

@ -13,7 +13,7 @@ export const getHeaderFooterStubConfig = async (
const elClass = await getHeaderFooterElementClass(type); const elClass = await getHeaderFooterElementClass(type);
if (elClass && elClass.getStubConfig) { if (elClass && elClass.getStubConfig) {
const classStubConfig = elClass.getStubConfig( const classStubConfig = await elClass.getStubConfig(
hass, hass,
entities, entities,
entitiesFallback entitiesFallback

View File

@ -91,6 +91,7 @@ export const coreCards: Card[] = [
}, },
{ {
type: "area", type: "area",
showElement: true,
}, },
{ {
type: "conditional", type: "conditional",

View File

@ -3255,7 +3255,8 @@
}, },
"area": { "area": {
"name": "Area", "name": "Area",
"description": "The Area card automatically displays entities of a specific area." "description": "The Area card automatically displays entities of a specific area.",
"show_camera": "Show camera feed instead of area image"
}, },
"calendar": { "calendar": {
"name": "Calendar", "name": "Calendar",