mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 18:26:35 +00:00
Add toggle for camera view in area card (#10810)
Co-authored-by: Zack Barett <arnett.zackary@gmail.com>
This commit is contained in:
parent
66df15007a
commit
d6b9b16f02
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
@ -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
|
||||||
|
@ -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
|
||||||
|
@ -91,6 +91,7 @@ export const coreCards: Card[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "area",
|
type: "area",
|
||||||
|
showElement: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "conditional",
|
type: "conditional",
|
||||||
|
@ -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",
|
||||||
|
Loading…
x
Reference in New Issue
Block a user