Home-Assistant
/
frontend
mirror of https://github.com/home-assistant/frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add support to add all device entities to Lovelace (#4356) 

* Add support to add all device entities to Lovelace

* Reload config when it was changed while Lovelace was not active

* Localize

* Update ha-panel-lovelace.ts

* Move to device entities card

* Move Lovelace logic to lovelace combine with unused entities

* Unused imports

* Added suggestions and support for YAML mode
pull/4374/head
Bram Kragten 2019-12-23 10:39:17 +01:00 committed by GitHub
parent 83880791b1
commit 15a2790b9f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 491 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/ha-yaml-editor.ts
View File

@ -1,7 +1,10 @@
import { safeDump, safeLoad } from "js-yaml";
import "./ha-code-editor";
import { LitElement, property, customElement, html } from "lit-element";
import { LitElement, property, customElement, html, query } from "lit-element";
import { fireEvent } from "../common/dom/fire_event";
import { afterNextRender } from "../common/util/render-status";
// tslint:disable-next-line
import { HaCodeEditor } from "./ha-code-editor";
const isEmpty = (obj: object) => {
for (const key in obj) {
@ -18,14 +21,23 @@ export class HaYamlEditor extends LitElement {
@property() public isValid = true;
@property() public label?: string;
@property() private _yaml?: string;
@query("ha-code-editor") private _editor?: HaCodeEditor;
protected firstUpdated() {
public setValue(value) {
try {
this._yaml =
this.value && !isEmpty(this.value) ? safeDump(this.value) : "";
this._yaml = value && !isEmpty(value) ? safeDump(value) : "";
} catch (err) {
alert(`There was an error converting to YAML: ${err}`);
}
afterNextRender(() => {
if (this._editor?.codemirror) {
this._editor.codemirror.refresh();
}
});
}
protected firstUpdated() {
this.setValue(this.value);
}
protected render() {

22
src/panels/config/devices/device-detail/ha-device-entities-card.ts
View File

@ -27,6 +27,7 @@ import { domainIcon } from "../../../../common/entity/domain_icon";
// tslint:disable-next-line
import { HaSwitch } from "../../../../components/ha-switch";
import { EntityRegistryStateEntry } from "../ha-config-device-page";
import { addEntitiesToLovelaceView } from "../../../lovelace/editor/add-entities-to-view";
@customElement("ha-device-entities-card")
export class HaDeviceEntitiesCard extends LitElement {
@ -49,7 +50,8 @@ export class HaDeviceEntitiesCard extends LitElement {
</ha-switch>
</paper-item>
${this.entities.length
? this.entities.map((entry: EntityRegistryStateEntry) => {
? html`
${this.entities.map((entry: EntityRegistryStateEntry) => {
if (!this._showDisabled && entry.disabled_by) {
return "";
}
@ -93,7 +95,15 @@ export class HaDeviceEntitiesCard extends LitElement {
</div>
</paper-icon-item>
`;
})
})}
<div class="card-actions">
<mwc-button @click=${this._addToLovelaceView}>
${this.hass.localize(
"ui.panel.config.devices.entities.add_entities_lovelace"
)}
</mwc-button>
</div>
`
: html`
<div class="config-entry-row">
<paper-item-body two-line>
@ -125,6 +135,14 @@ export class HaDeviceEntitiesCard extends LitElement {
fireEvent(this, "hass-more-info", { entityId: entry.entity_id });
}
private _addToLovelaceView(): void {
addEntitiesToLovelaceView(
this,
this.hass,
this.entities.map((entity) => entity.entity_id)
);
}
static get styles(): CSSResult {
return css`
ha-icon {

4
src/panels/config/devices/ha-config-device-page.ts
View File

@ -156,7 +156,9 @@ export class HaConfigDevicePage extends LitElement {
${entities.length
? html`
<div class="header">
${this.hass.localize("ui.panel.config.devices.entities")}
${this.hass.localize(
"ui.panel.config.devices.entities.entities"
)}
</div>
<ha-device-entities-card
.hass=${this.hass}

9
src/panels/lovelace/common/generate-lovelace-config.ts
View File

@ -97,8 +97,8 @@ const splitByAreas = (
};
};
const computeCards = (
states: Array<[string, HassEntity]>,
export const computeCards = (
states: Array<[string, HassEntity?]>,
entityCardOptions: Partial<EntitiesCardConfig>
): LovelaceCardConfig[] => {
const cards: LovelaceCardConfig[] = [];
@ -132,6 +132,11 @@ const computeCards = (
title: stateObj.attributes.friendly_name,
refresh_interval: stateObj.attributes.refresh,
});
} else if (domain === "light") {
cards.push({
type: "light",
entity: entityId,
});
} else if (domain === "media_player") {
cards.push({
type: "media-control",

3
src/panels/lovelace/components/hui-card-options.ts
View File

@ -142,7 +142,8 @@ export class HuiCardOptions extends LitElement {
private _editCard(): void {
showEditCardDialog(this, {
lovelace: this.lovelace!,
lovelaceConfig: this.lovelace!.config,
saveConfig: this.lovelace!.saveConfig,
path: this.path!,
});
}

60
src/panels/lovelace/editor/add-entities-to-view.ts Normal file
View File

@ -0,0 +1,60 @@
import { HomeAssistant } from "../../../types";
import {
LovelaceConfig,
fetchConfig,
saveConfig,
} from "../../../data/lovelace";
import { showSelectViewDialog } from "./select-view/show-select-view-dialog";
import { showSuggestCardDialog } from "./card-editor/show-suggest-card-dialog";
export const addEntitiesToLovelaceView = async (
element: HTMLElement,
hass: HomeAssistant,
entities: string[],
lovelaceConfig?: LovelaceConfig,
saveConfigFunc?: (newConfig: LovelaceConfig) => void
) => {
if ((hass!.panels.lovelace?.config as any)?.mode === "yaml") {
showSuggestCardDialog(element, {
entities,
});
return;
}
if (!lovelaceConfig) {
try {
lovelaceConfig = await fetchConfig(hass.connection, false);
} catch {
alert(
hass.localize(
"ui.panel.lovelace.editor.add_entities.generated_unsupported"
)
);
return;
}
}
showSelectViewDialog(element, {
lovelaceConfig,
viewSelectedCallback: (view) => {
if (!saveConfigFunc) {
saveConfigFunc = async (newConfig: LovelaceConfig): Promise<void> => {
try {
await saveConfig(hass!, newConfig);
} catch {
alert(
hass.localize(
"ui.panel.config.devices.add_entities.saving_failed"
)
);
}
};
}
showSuggestCardDialog(element, {
lovelaceConfig: lovelaceConfig!,
saveConfig: saveConfigFunc,
path: [view],
entities,
});
},
});
};

13
src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
View File

@ -24,6 +24,7 @@ import { addCard, replaceCard } from "../config-util";
import "../../../../components/dialog/ha-paper-dialog";
import { haStyleDialog } from "../../../../resources/styles";
import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
declare global {
// for fire event
@ -38,7 +39,7 @@ declare global {
@customElement("hui-dialog-edit-card")
export class HuiDialogEditCard extends LitElement {
@property() protected hass?: HomeAssistant;
@property() protected hass!: HomeAssistant;
@property() private _params?: EditCardDialogParams;
@ -51,7 +52,7 @@ export class HuiDialogEditCard extends LitElement {
public async showDialog(params: EditCardDialogParams): Promise<void> {
this._params = params;
const [view, card] = params.path;
this._viewConfig = params.lovelace.config.views[view];
this._viewConfig = params.lovelaceConfig.views[view];
this._cardConfig =
card !== undefined ? this._viewConfig.cards![card] : undefined;
}
@ -283,22 +284,22 @@ export class HuiDialogEditCard extends LitElement {
}
private async _save(): Promise<void> {
const lovelace = this._params!.lovelace;
this._saving = true;
await lovelace.saveConfig(
await this._params!.saveConfig(
this._params!.path.length === 1
? addCard(
lovelace.config,
this._params!.lovelaceConfig,
this._params!.path as [number],
this._cardConfig!
)
: replaceCard(
lovelace.config,
this._params!.lovelaceConfig,
this._params!.path as [number, number],
this._cardConfig!
)
);
this._saving = false;
showSaveSuccessToast(this, this.hass);
this._close();
}
}

215
src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts Executable file
View File

@ -0,0 +1,215 @@
import {
css,
html,
LitElement,
TemplateResult,
CSSResultArray,
customElement,
property,
query,
} from "lit-element";
import { HomeAssistant } from "../../../../types";
import { LovelaceCardConfig } from "../../../../data/lovelace";
import "./hui-card-editor";
import "./hui-card-preview";
import "./hui-card-picker";
import { addCards } from "../config-util";
import "../../../../components/ha-yaml-editor";
import "../../../../components/dialog/ha-paper-dialog";
import { haStyleDialog } from "../../../../resources/styles";
import { showEditCardDialog } from "./show-edit-card-dialog";
import { computeCards } from "../../common/generate-lovelace-config";
import { SuggestCardDialogParams } from "./show-suggest-card-dialog";
import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
// tslint:disable-next-line
import { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
// tslint:disable-next-line
import { HaYamlEditor } from "../../../../components/ha-yaml-editor";
@customElement("hui-dialog-suggest-card")
export class HuiDialogSuggestCard extends LitElement {
@property() protected hass!: HomeAssistant;
@property() private _params?: SuggestCardDialogParams;
@property() private _cardConfig?: LovelaceCardConfig[];
@property() private _saving: boolean = false;
@property() private _yamlMode: boolean = false;
@query("ha-paper-dialog") private _dialog?: HaPaperDialog;
@query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
public async showDialog(params: SuggestCardDialogParams): Promise<void> {
this._params = params;
this._yamlMode =
(this.hass.panels.lovelace?.config as any)?.mode === "yaml";
this._cardConfig =
params.cardConfig ||
computeCards(
params.entities.map((entityId) => [
entityId,
this.hass.states[entityId],
]),
{}
);
if (this._dialog) {
this._dialog.open();
}
if (this._yamlEditor) {
this._yamlEditor.setValue(this._cardConfig);
}
}
protected render(): TemplateResult | void {
return html`
<ha-paper-dialog with-backdrop opened>
<h2>
${this.hass!.localize("ui.panel.lovelace.editor.suggest_card.header")}
</h2>
<paper-dialog-scrollable>
${this._cardConfig
? html`
<div class="element-preview">
${this._cardConfig.map(
(cardConfig) => html`
<hui-card-preview
.hass="${this.hass}"
.config="${cardConfig}"
></hui-card-preview>
`
)}
</div>
`
: ""}
${this._yamlMode && this._cardConfig
? html`
<div class="editor">
<ha-yaml-editor .value=${this._cardConfig}></ha-yaml-editor>
</div>
`
: ""}
</paper-dialog-scrollable>
<div class="paper-dialog-buttons">
<mwc-button @click="${this._close}">
${this._yamlMode
? this.hass!.localize("ui.common.close")
: this.hass!.localize("ui.common.cancel")}
</mwc-button>
${!this._yamlMode
? html`
<mwc-button @click="${this._pickCard}"
>${this.hass!.localize(
"ui.panel.lovelace.editor.suggest_card.create_own"
)}</mwc-button
>
<mwc-button ?disabled="${this._saving}" @click="${this._save}">
${this._saving
? html`
<paper-spinner active alt="Saving"></paper-spinner>
`
: this.hass!.localize(
"ui.panel.lovelace.editor.suggest_card.add"
)}
</mwc-button>
`
: ""}
</div>
</ha-paper-dialog>
`;
}
static get styles(): CSSResultArray {
return [
haStyleDialog,
css`
@media all and (max-width: 450px), all and (max-height: 500px) {
/* overrule the ha-style-dialog max-height on small screens */
ha-paper-dialog {
max-height: 100%;
height: 100%;
}
}
@media all and (min-width: 850px) {
ha-paper-dialog {
width: 845px;
}
}
ha-paper-dialog {
max-width: 845px;
}
mwc-button paper-spinner {
width: 14px;
height: 14px;
margin-right: 20px;
}
.hidden {
display: none;
}
.element-preview {
position: relative;
}
hui-card-preview {
padding-top: 8px;
margin: 4px auto;
max-width: 390px;
display: block;
width: 100%;
}
.editor {
padding-top: 16px;
}
`,
];
}
private _close(): void {
this._dialog!.close();
this._params = undefined;
this._cardConfig = undefined;
this._yamlMode = false;
}
private _pickCard(): void {
if (
!this._params?.lovelaceConfig ||
!this._params?.path ||
!this._params?.saveConfig
) {
return;
}
showEditCardDialog(this, {
lovelaceConfig: this._params!.lovelaceConfig,
saveConfig: this._params!.saveConfig,
path: this._params!.path,
entities: this._params!.entities,
});
this._close();
}
private async _save(): Promise<void> {
if (
!this._params?.lovelaceConfig ||
!this._params?.path ||
!this._params?.saveConfig ||
!this._cardConfig
) {
return;
}
this._saving = true;
await this._params!.saveConfig(
addCards(
this._params!.lovelaceConfig,
this._params!.path as [number],
this._cardConfig
)
);
this._saving = false;
showSaveSuccessToast(this, this.hass);
this._close();
}
}
declare global {
interface HTMLElementTagNameMap {
"hui-dialog-suggest-card": HuiDialogSuggestCard;
}
}

35
src/panels/lovelace/editor/card-editor/show-edit-card-dialog.ts
View File

@ -1,40 +1,25 @@
import { fireEvent } from "../../../../common/dom/fire_event";
import { Lovelace } from "../../types";
declare global {
// for fire event
interface HASSDomEvents {
"show-edit-card": EditCardDialogParams;
}
}
let registeredDialog = false;
const dialogShowEvent = "show-edit-card";
const dialogTag = "hui-dialog-edit-card";
import { LovelaceConfig } from "../../../../data/lovelace";
export interface EditCardDialogParams {
lovelace: Lovelace;
lovelaceConfig: LovelaceConfig;
saveConfig: (config: LovelaceConfig) => void;
path: [number] | [number, number];
entities?: string[]; // We can pass entity id's that will be added to the config when a card is picked
}
const registerEditCardDialog = (element: HTMLElement): Event =>
fireEvent(element, "register-dialog", {
dialogShowEvent,
dialogTag,
dialogImport: () =>
const importEditCardDialog = () =>
import(
/* webpackChunkName: "hui-dialog-edit-card" */ "./hui-dialog-edit-card"
),
});
);
export const showEditCardDialog = (
element: HTMLElement,
editCardDialogParams: EditCardDialogParams
): void => {
if (!registeredDialog) {
registeredDialog = true;
registerEditCardDialog(element);
}
fireEvent(element, dialogShowEvent, editCardDialogParams);
fireEvent(element, "show-dialog", {
dialogTag: "hui-dialog-edit-card",
dialogImport: importEditCardDialog,
dialogParams: editCardDialogParams,
});
};

26
src/panels/lovelace/editor/card-editor/show-suggest-card-dialog.ts Normal file
View File

@ -0,0 +1,26 @@
import { fireEvent } from "../../../../common/dom/fire_event";
import { LovelaceConfig, LovelaceCardConfig } from "../../../../data/lovelace";
export interface SuggestCardDialogParams {
lovelaceConfig?: LovelaceConfig;
saveConfig?: (config: LovelaceConfig) => void;
path?: [number];
entities: string[]; // We can pass entity id's that will be added to the config when a card is picked
cardConfig?: LovelaceCardConfig[]; // We can pass a suggested config
}
const importsuggestCardDialog = () =>
import(
/* webpackChunkName: "hui-dialog-suggest-card" */ "./hui-dialog-suggest-card"
);
export const showSuggestCardDialog = (
element: HTMLElement,
suggestCardDialogParams: SuggestCardDialogParams
): void => {
fireEvent(element, "show-dialog", {
dialogTag: "hui-dialog-suggest-card",
dialogImport: importsuggestCardDialog,
dialogParams: suggestCardDialogParams,
});
};

30
src/panels/lovelace/editor/config-util.ts
View File

@ -34,6 +34,36 @@ export const addCard = (
};
};
export const addCards = (
config: LovelaceConfig,
path: [number],
cardConfigs: LovelaceCardConfig[]
): LovelaceConfig => {
const [viewIndex] = path;
const views: LovelaceViewConfig[] = [];
config.views.forEach((viewConf, index) => {
if (index !== viewIndex) {
views.push(config.views[index]);
return;
}
const cards = viewConf.cards
? [...viewConf.cards, ...cardConfigs]
: [...cardConfigs];
views.push({
...viewConf,
cards,
});
});
return {
...config,
views,
};
};
export const replaceCard = (
config: LovelaceConfig,
path: [number, number],

6
src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts
View File

@ -30,8 +30,8 @@ export class HuiDialogSelectView extends LitElement {
toggleAttribute(
this,
"hide-icons",
this._params!.lovelace!.config
? !this._params!.lovelace!.config.views.some((view) => view.icon)
this._params?.lovelaceConfig
? !this._params.lovelaceConfig.views.some((view) => view.icon)
: true
);
}
@ -48,7 +48,7 @@ export class HuiDialogSelectView extends LitElement {
>
<h2>Choose a view</h2>
<hui-views-list
.lovelaceConfig=${this._params!.lovelace.config}
.lovelaceConfig=${this._params!.lovelaceConfig}
@view-selected=${this._selectView}>
</hui-view-list>
</ha-paper-dialog>

4
src/panels/lovelace/editor/select-view/show-select-view-dialog.ts
View File

@ -1,8 +1,8 @@
import { fireEvent } from "../../../../common/dom/fire_event";
import { Lovelace } from "../../types";
import { LovelaceConfig } from "../../../../data/lovelace";
export interface SelectViewDialogParams {
lovelace: Lovelace;
lovelaceConfig: LovelaceConfig;
viewSelectedCallback: (view: number) => void;
}

39
src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts
View File

@ -30,19 +30,18 @@ import { computeDomain } from "../../../../common/entity/compute_domain";
import { computeRTL } from "../../../../common/util/compute_rtl";
import { computeUnusedEntities } from "../../common/compute-unused-entities";
import { showSelectViewDialog } from "../select-view/show-select-view-dialog";
import { showEditCardDialog } from "../card-editor/show-edit-card-dialog";
import { HomeAssistant } from "../../../../types";
import { Lovelace } from "../../types";
import { LovelaceConfig } from "../../../../data/lovelace";
import { fireEvent } from "../../../../common/dom/fire_event";
import { addEntitiesToLovelaceView } from "../add-entities-to-view";
@customElement("hui-unused-entities")
export class HuiUnusedEntities extends LitElement {
@property() public lovelace?: Lovelace;
@property() public hass?: HomeAssistant;
@property() public hass!: HomeAssistant;
@property() public narrow?: boolean;
@ -156,23 +155,18 @@ export class HuiUnusedEntities extends LitElement {
};
})}
.id=${"entity_id"}
.selectable=${this.lovelace!.mode === "storage"}
selectable
@selection-changed=${this._handleSelectionChanged}
></ha-data-table>
${this.lovelace.mode === "storage"
? html`
<ha-fab
class="${classMap({
rtl: computeRTL(this.hass),
})}"
icon="hass:plus"
label="${this.hass.localize(
"ui.panel.lovelace.editor.edit_card.add"
)}"
@click="${this._selectView}"
label="${this.hass.localize("ui.panel.lovelace.editor.edit_card.add")}"
@click="${this._addToLovelaceView}"
></ha-fab>
`
: ""}
`;
}
@ -206,19 +200,14 @@ export class HuiUnusedEntities extends LitElement {
});
}
private _selectView(): void {
showSelectViewDialog(this, {
lovelace: this.lovelace!,
viewSelectedCallback: (view) => this._addCard(view),
});
}
private _addCard(view: number): void {
showEditCardDialog(this, {
lovelace: this.lovelace!,
path: [view],
entities: this._selectedEntities,
});
private _addToLovelaceView(): void {
addEntitiesToLovelaceView(
this,
this.hass,
this._selectedEntities,
this.lovelace!.config,
this.lovelace!.saveConfig
);
}
static get styles(): CSSResult {

12
src/panels/lovelace/ha-panel-lovelace.ts
View File

@ -50,6 +50,7 @@ class LovelacePanel extends LitElement {
private mqls?: MediaQueryList[];
private _ignoreNextUpdateEvent = false;
private _fetchConfigOnConnect = false;
constructor() {
super();
@ -160,6 +161,9 @@ class LovelacePanel extends LitElement {
// to the states panel to make sure new entities are shown.
this._state = "loading";
this._regenerateConfig();
} else if (this._fetchConfigOnConnect) {
// Config was changed when we were not at the lovelace panel
this._fetchConfig(false);
}
}
@ -191,6 +195,12 @@ class LovelacePanel extends LitElement {
this._ignoreNextUpdateEvent = false;
return;
}
if (!this.isConnected) {
// We can't fire events from an element that is connected
// Make sure we fetch the config as soon as the user goes back to Lovelace
this._fetchConfigOnConnect = true;
return;
}
showToast(this, {
message: this.hass!.localize("ui.panel.lovelace.changed_toast.message"),
action: {
@ -206,7 +216,7 @@ class LovelacePanel extends LitElement {
this._fetchConfig(true);
}
private async _fetchConfig(forceDiskRefresh) {
private async _fetchConfig(forceDiskRefresh: boolean) {
let conf: LovelaceConfig;
let confMode: Lovelace["mode"] = this.panel!.config.mode;
let confProm: Promise<LovelaceConfig>;

3
src/panels/lovelace/views/hui-view.ts
View File

@ -240,7 +240,8 @@ export class HUIView extends LitElement {
private _addCard(): void {
showEditCardDialog(this, {
lovelace: this.lovelace!,
lovelaceConfig: this.lovelace!.config,
saveConfig: this.lovelace!.saveConfig,
path: [this.index!],
});
}

15
src/translations/en.json
View File

@ -516,6 +516,7 @@
"common": {
"loading": "Loading",
"cancel": "Cancel",
"close": "Close",
"save": "Save",
"yes": "Yes",
"no": "No",
@ -1227,7 +1228,11 @@
"device_not_found": "Device not found.",
"info": "Device info",
"details": "Here are all the details of your device.",
"entities": {
"entities": "Entities",
"add_entities_lovelace": "Add all device entities to Lovelace",
"none": "This device has no entities"
},
"automations": "Automations",
"confirm_rename_entity_ids": "Do you also want to rename the entity id's of your entities?",
"data_table": {
@ -1529,6 +1534,11 @@
"domain": "Domain",
"last_changed": "Last Changed"
},
"add_entities": {
"yaml_unsupported": "You can not use this function when using Lovelace in YAML mode.",
"generated_unsupported": "You can only use this function when you have taken control of Lovelace.",
"saving_failed": "Saving Lovelace config failed."
},
"views": {
"confirm_delete": "Are you sure you want to delete this view?",
"existing_cards": "You can't delete a view that has cards in it. Remove the cards first."
@ -1584,6 +1594,11 @@
"move": "Move to View",
"options": "More options"
},
"suggest_card": {
"header": "We created a suggestion for you",
"create_own": "Create your own",
"add": "Add to Lovelace"
},
"save_config": {
"header": "Take control of your Lovelace UI",
"para": "By default Home Assistant will maintain your user interface, updating it when new entities or Lovelace components become available. If you take control we will no longer make changes automatically for you.",