mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-19 07:16:39 +00:00
Allow to select a different dashboard when adding entities / moving cards (#6478)
This commit is contained in:
parent
c75207e391
commit
209dd9923f
@ -22,6 +22,8 @@ class HcLovelace extends LitElement {
|
||||
|
||||
@property() public viewPath?: string | number;
|
||||
|
||||
public urlPath?: string | null;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
const index = this._viewIndex;
|
||||
if (index === undefined) {
|
||||
@ -35,6 +37,7 @@ class HcLovelace extends LitElement {
|
||||
const lovelace: Lovelace = {
|
||||
config: this.lovelaceConfig,
|
||||
editMode: false,
|
||||
urlPath: this.urlPath!,
|
||||
enableFullEditMode: () => undefined,
|
||||
mode: "storage",
|
||||
language: "en",
|
||||
|
@ -87,6 +87,7 @@ export class HcMain extends HassElement {
|
||||
.hass=${this.hass}
|
||||
.lovelaceConfig=${this._lovelaceConfig}
|
||||
.viewPath=${this._lovelacePath}
|
||||
.urlPath=${this._urlPath}
|
||||
@config-refresh=${this._generateLovelaceConfig}
|
||||
></hc-lovelace>
|
||||
`;
|
||||
|
@ -14,13 +14,16 @@ import {
|
||||
} from "lit-element";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog";
|
||||
import { showMoveCardViewDialog } from "../editor/card-editor/show-move-card-view-dialog";
|
||||
import { swapCard } from "../editor/config-util";
|
||||
import { swapCard, moveCard, addCard, deleteCard } from "../editor/config-util";
|
||||
import { confDeleteCard } from "../editor/delete-card";
|
||||
import { Lovelace, LovelaceCard } from "../types";
|
||||
import { computeCardSize } from "../common/compute-card-size";
|
||||
import { mdiDotsVertical, mdiArrowDown, mdiArrowUp } from "@mdi/js";
|
||||
import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
|
||||
import { showSelectViewDialog } from "../editor/select-view/show-select-view-dialog";
|
||||
import { saveConfig } from "../../../data/lovelace";
|
||||
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
|
||||
import { showSaveSuccessToast } from "../../../util/toast-saved-success";
|
||||
|
||||
@customElement("hui-card-options")
|
||||
export class HuiCardOptions extends LitElement {
|
||||
@ -185,9 +188,39 @@ export class HuiCardOptions extends LitElement {
|
||||
}
|
||||
|
||||
private _moveCard(): void {
|
||||
showMoveCardViewDialog(this, {
|
||||
path: this.path!,
|
||||
lovelace: this.lovelace!,
|
||||
showSelectViewDialog(this, {
|
||||
lovelaceConfig: this.lovelace!.config,
|
||||
urlPath: this.lovelace!.urlPath,
|
||||
allowDashboardChange: true,
|
||||
header: this.hass!.localize("ui.panel.lovelace.editor.move_card.header"),
|
||||
viewSelectedCallback: async (urlPath, selectedDashConfig, viewIndex) => {
|
||||
if (urlPath === this.lovelace!.urlPath) {
|
||||
this.lovelace!.saveConfig(
|
||||
moveCard(this.lovelace!.config, this.path!, [viewIndex])
|
||||
);
|
||||
showSaveSuccessToast(this, this.hass!);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await saveConfig(
|
||||
this.hass!,
|
||||
urlPath,
|
||||
addCard(
|
||||
selectedDashConfig,
|
||||
[viewIndex],
|
||||
this.lovelace!.config.views[this.path![0]].cards![this.path![1]]
|
||||
)
|
||||
);
|
||||
this.lovelace!.saveConfig(
|
||||
deleteCard(this.lovelace!.config, this.path!)
|
||||
);
|
||||
showSaveSuccessToast(this, this.hass!);
|
||||
} catch (err) {
|
||||
showAlertDialog(this, {
|
||||
text: `Moving failed: ${err.message}`,
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -43,7 +43,7 @@ class HuiViewsList extends LitElement {
|
||||
<ha-icon .icon=${view.icon} slot="item-icon"></ha-icon>
|
||||
`
|
||||
: ""}
|
||||
${view.title || view.path}
|
||||
${view.title || view.path || "Unnamed view"}
|
||||
</paper-icon-item>
|
||||
`
|
||||
)}
|
||||
|
@ -2,69 +2,128 @@ import {
|
||||
fetchConfig,
|
||||
LovelaceConfig,
|
||||
saveConfig,
|
||||
fetchDashboards,
|
||||
LovelacePanelConfig,
|
||||
} from "../../../data/lovelace";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
import { showSuggestCardDialog } from "./card-editor/show-suggest-card-dialog";
|
||||
import { showSelectViewDialog } from "./select-view/show-select-view-dialog";
|
||||
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
|
||||
|
||||
export const addEntitiesToLovelaceView = async (
|
||||
element: HTMLElement,
|
||||
hass: HomeAssistant,
|
||||
entities: string[],
|
||||
lovelaceConfig?: LovelaceConfig,
|
||||
saveConfigFunc?: (newConfig: LovelaceConfig) => void
|
||||
entities: string[]
|
||||
) => {
|
||||
if ((hass!.panels.lovelace?.config as any)?.mode === "yaml") {
|
||||
const dashboards = await fetchDashboards(hass);
|
||||
|
||||
const storageDashs = dashboards.filter(
|
||||
(dashboard) => dashboard.mode === "storage"
|
||||
);
|
||||
|
||||
const mainLovelaceMode = (hass!.panels.lovelace
|
||||
?.config as LovelacePanelConfig)?.mode;
|
||||
|
||||
if (mainLovelaceMode !== "storage" && !storageDashs.length) {
|
||||
// no storage dashboards, just show the YAML config
|
||||
showSuggestCardDialog(element, {
|
||||
entities,
|
||||
yaml: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!lovelaceConfig) {
|
||||
|
||||
let lovelaceConfig;
|
||||
let urlPath: string | null = null;
|
||||
if (mainLovelaceMode === "storage") {
|
||||
try {
|
||||
lovelaceConfig = await fetchConfig(hass.connection, null, false);
|
||||
} catch {
|
||||
alert(
|
||||
hass.localize(
|
||||
"ui.panel.lovelace.editor.add_entities.generated_unsupported"
|
||||
)
|
||||
} catch (e) {
|
||||
// default dashboard is in generated mode
|
||||
}
|
||||
}
|
||||
|
||||
if (!lovelaceConfig && storageDashs.length) {
|
||||
// find first dashoard not in generated mode
|
||||
for (const storageDash of storageDashs) {
|
||||
try {
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
lovelaceConfig = await fetchConfig(
|
||||
hass.connection,
|
||||
storageDash.url_path,
|
||||
false
|
||||
);
|
||||
urlPath = storageDash.url_path;
|
||||
break;
|
||||
} catch (e) {
|
||||
// dashboard is in generated mode
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!lovelaceConfig) {
|
||||
if (dashboards.length > storageDashs.length) {
|
||||
// all storage dashboards are generated, but we have YAML dashboards just show the YAML config
|
||||
showSuggestCardDialog(element, {
|
||||
entities,
|
||||
yaml: true,
|
||||
});
|
||||
} else {
|
||||
// all storage dashboards are generated
|
||||
showAlertDialog(element, {
|
||||
text:
|
||||
"You don't seem to be in control of any dashboard, please take control first.",
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (!lovelaceConfig.views.length) {
|
||||
alert(
|
||||
"You don't have any Lovelace views, first create a view in Lovelace."
|
||||
);
|
||||
|
||||
if (!storageDashs.length && !lovelaceConfig.views?.length) {
|
||||
showAlertDialog(element, {
|
||||
text:
|
||||
"You don't have any Lovelace views, first create a view in Lovelace.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!saveConfigFunc) {
|
||||
saveConfigFunc = async (newConfig: LovelaceConfig): Promise<void> => {
|
||||
|
||||
if (!storageDashs.length && lovelaceConfig.views.length === 1) {
|
||||
showSuggestCardDialog(element, {
|
||||
lovelaceConfig: lovelaceConfig!,
|
||||
saveConfig: async (newConfig: LovelaceConfig): Promise<void> => {
|
||||
try {
|
||||
await saveConfig(hass!, null, newConfig);
|
||||
} catch {
|
||||
} catch (e) {
|
||||
alert(
|
||||
hass.localize("ui.panel.config.devices.add_entities.saving_failed")
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
if (lovelaceConfig.views.length === 1) {
|
||||
showSuggestCardDialog(element, {
|
||||
lovelaceConfig: lovelaceConfig!,
|
||||
saveConfig: saveConfigFunc,
|
||||
},
|
||||
path: [0],
|
||||
entities,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
showSelectViewDialog(element, {
|
||||
lovelaceConfig,
|
||||
viewSelectedCallback: (view) => {
|
||||
urlPath,
|
||||
allowDashboardChange: true,
|
||||
dashboards,
|
||||
viewSelectedCallback: (newUrlPath, selectedDashConfig, viewIndex) => {
|
||||
showSuggestCardDialog(element, {
|
||||
lovelaceConfig: lovelaceConfig!,
|
||||
saveConfig: saveConfigFunc,
|
||||
path: [view],
|
||||
lovelaceConfig: selectedDashConfig,
|
||||
saveConfig: async (newConfig: LovelaceConfig): Promise<void> => {
|
||||
try {
|
||||
await saveConfig(hass!, newUrlPath, newConfig);
|
||||
} catch {
|
||||
alert(
|
||||
hass.localize(
|
||||
"ui.panel.config.devices.add_entities.saving_failed"
|
||||
)
|
||||
);
|
||||
}
|
||||
},
|
||||
path: [viewIndex],
|
||||
entities,
|
||||
});
|
||||
},
|
||||
|
@ -1,101 +0,0 @@
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import {
|
||||
css,
|
||||
CSSResult,
|
||||
customElement,
|
||||
html,
|
||||
LitElement,
|
||||
internalProperty,
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
import "../../../../components/dialog/ha-paper-dialog";
|
||||
import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
|
||||
import type { PolymerChangedEvent } from "../../../../polymer-types";
|
||||
import "../../components/hui-views-list";
|
||||
import { moveCard } from "../config-util";
|
||||
import type { MoveCardViewDialogParams } from "./show-move-card-view-dialog";
|
||||
|
||||
@customElement("hui-dialog-move-card-view")
|
||||
export class HuiDialogMoveCardView extends LitElement {
|
||||
@internalProperty() private _params?: MoveCardViewDialogParams;
|
||||
|
||||
public async showDialog(params: MoveCardViewDialogParams): Promise<void> {
|
||||
this._params = params;
|
||||
await this.updateComplete;
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
if (!this._params) {
|
||||
return html``;
|
||||
}
|
||||
return html`
|
||||
<ha-paper-dialog
|
||||
with-backdrop
|
||||
opened
|
||||
@opened-changed="${this._openedChanged}"
|
||||
>
|
||||
<h2>Choose view to move card</h2>
|
||||
<hui-views-list
|
||||
.lovelaceConfig=${this._params!.lovelace.config}
|
||||
.selected=${this._params!.path![0]}
|
||||
@view-selected=${this._moveCard}
|
||||
>
|
||||
</hui-views-list>
|
||||
</ha-paper-dialog>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
paper-item {
|
||||
margin: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
paper-item[active] {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
paper-item[active]:before {
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
background-color: var(--primary-color);
|
||||
opacity: 0.12;
|
||||
transition: opacity 15ms linear;
|
||||
will-change: opacity;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
private get _dialog(): HaPaperDialog {
|
||||
return this.shadowRoot!.querySelector("ha-paper-dialog")!;
|
||||
}
|
||||
|
||||
private _moveCard(e: CustomEvent): void {
|
||||
const newView = e.detail.view;
|
||||
const path = this._params!.path!;
|
||||
if (newView === path[0]) {
|
||||
return;
|
||||
}
|
||||
|
||||
const lovelace = this._params!.lovelace!;
|
||||
lovelace.saveConfig(moveCard(lovelace.config, path, [newView!]));
|
||||
this._dialog.close();
|
||||
}
|
||||
|
||||
private _openedChanged(ev: PolymerChangedEvent<boolean>): void {
|
||||
if (!(ev.detail as any).value) {
|
||||
this._params = undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"hui-dialog-move-card-view": HuiDialogMoveCardView;
|
||||
}
|
||||
}
|
@ -12,7 +12,6 @@ import {
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
import "../../../../components/dialog/ha-paper-dialog";
|
||||
import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
|
||||
import "../../../../components/ha-yaml-editor";
|
||||
import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
|
||||
import { LovelaceCardConfig } from "../../../../data/lovelace";
|
||||
@ -27,7 +26,7 @@ import { SuggestCardDialogParams } from "./show-suggest-card-dialog";
|
||||
|
||||
@customElement("hui-dialog-suggest-card")
|
||||
export class HuiDialogSuggestCard extends LitElement {
|
||||
@property() protected hass!: HomeAssistant;
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@internalProperty() private _params?: SuggestCardDialogParams;
|
||||
|
||||
@ -35,16 +34,10 @@ export class HuiDialogSuggestCard extends LitElement {
|
||||
|
||||
@internalProperty() private _saving = false;
|
||||
|
||||
@internalProperty() private _yamlMode = false;
|
||||
|
||||
@query("ha-paper-dialog") private _dialog?: HaPaperDialog;
|
||||
|
||||
@query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
|
||||
|
||||
public async showDialog(params: SuggestCardDialogParams): Promise<void> {
|
||||
public showDialog(params: SuggestCardDialogParams): void {
|
||||
this._params = params;
|
||||
this._yamlMode =
|
||||
(this.hass.panels.lovelace?.config as any)?.mode === "yaml";
|
||||
this._cardConfig =
|
||||
params.cardConfig ||
|
||||
computeCards(
|
||||
@ -58,15 +51,15 @@ export class HuiDialogSuggestCard extends LitElement {
|
||||
if (!Object.isFrozen(this._cardConfig)) {
|
||||
this._cardConfig = deepFreeze(this._cardConfig);
|
||||
}
|
||||
if (this._dialog) {
|
||||
this._dialog.open();
|
||||
}
|
||||
if (this._yamlEditor) {
|
||||
this._yamlEditor.setValue(this._cardConfig);
|
||||
}
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
if (!this._params) {
|
||||
return html``;
|
||||
}
|
||||
return html`
|
||||
<ha-paper-dialog with-backdrop opened>
|
||||
<h2>
|
||||
@ -87,7 +80,7 @@ export class HuiDialogSuggestCard extends LitElement {
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
${this._yamlMode && this._cardConfig
|
||||
${this._params.yaml && this._cardConfig
|
||||
? html`
|
||||
<div class="editor">
|
||||
<ha-yaml-editor
|
||||
@ -99,11 +92,11 @@ export class HuiDialogSuggestCard extends LitElement {
|
||||
</paper-dialog-scrollable>
|
||||
<div class="paper-dialog-buttons">
|
||||
<mwc-button @click="${this._close}">
|
||||
${this._yamlMode
|
||||
${this._params.yaml
|
||||
? this.hass!.localize("ui.common.close")
|
||||
: this.hass!.localize("ui.common.cancel")}
|
||||
</mwc-button>
|
||||
${!this._yamlMode
|
||||
${!this._params.yaml
|
||||
? html`
|
||||
<mwc-button @click="${this._pickCard}"
|
||||
>${this.hass!.localize(
|
||||
@ -174,10 +167,8 @@ export class HuiDialogSuggestCard extends LitElement {
|
||||
}
|
||||
|
||||
private _close(): void {
|
||||
this._dialog!.close();
|
||||
this._params = undefined;
|
||||
this._cardConfig = undefined;
|
||||
this._yamlMode = false;
|
||||
}
|
||||
|
||||
private _pickCard(): void {
|
||||
|
@ -1,37 +0,0 @@
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import { Lovelace } from "../../types";
|
||||
|
||||
declare global {
|
||||
// for fire event
|
||||
interface HASSDomEvents {
|
||||
"show-move-card-view": MoveCardViewDialogParams;
|
||||
}
|
||||
}
|
||||
|
||||
let registeredDialog = false;
|
||||
|
||||
export interface MoveCardViewDialogParams {
|
||||
path: [number, number];
|
||||
lovelace: Lovelace;
|
||||
}
|
||||
|
||||
const registerEditCardDialog = (element: HTMLElement): Event =>
|
||||
fireEvent(element, "register-dialog", {
|
||||
dialogShowEvent: "show-move-card-view",
|
||||
dialogTag: "hui-dialog-move-card-view",
|
||||
dialogImport: () =>
|
||||
import(
|
||||
/* webpackChunkName: "hui-dialog-move-card-view" */ "./hui-dialog-move-card-view"
|
||||
),
|
||||
});
|
||||
|
||||
export const showMoveCardViewDialog = (
|
||||
element: HTMLElement,
|
||||
moveCardViewDialogParams: MoveCardViewDialogParams
|
||||
): void => {
|
||||
if (!registeredDialog) {
|
||||
registeredDialog = true;
|
||||
registerEditCardDialog(element);
|
||||
}
|
||||
fireEvent(element, "show-move-card-view", moveCardViewDialogParams);
|
||||
};
|
@ -3,6 +3,7 @@ import { LovelaceCardConfig, LovelaceConfig } from "../../../../data/lovelace";
|
||||
|
||||
export interface SuggestCardDialogParams {
|
||||
lovelaceConfig?: LovelaceConfig;
|
||||
yaml?: boolean;
|
||||
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
|
||||
|
@ -4,32 +4,46 @@ import {
|
||||
LitElement,
|
||||
internalProperty,
|
||||
TemplateResult,
|
||||
CSSResult,
|
||||
css,
|
||||
} from "lit-element";
|
||||
import { toggleAttribute } from "../../../../common/dom/toggle_attribute";
|
||||
import "../../../../components/dialog/ha-paper-dialog";
|
||||
import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
|
||||
import type { PolymerChangedEvent } from "../../../../polymer-types";
|
||||
import "../../components/hui-views-list";
|
||||
import type { SelectViewDialogParams } from "./show-select-view-dialog";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import { createCloseHeading } from "../../../../components/ha-dialog";
|
||||
import "../../../../components/ha-paper-dropdown-menu";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import {
|
||||
LovelaceDashboard,
|
||||
fetchDashboards,
|
||||
LovelaceConfig,
|
||||
fetchConfig,
|
||||
} from "../../../../data/lovelace";
|
||||
|
||||
@customElement("hui-dialog-select-view")
|
||||
export class HuiDialogSelectView extends LitElement {
|
||||
public hass!: HomeAssistant;
|
||||
|
||||
@internalProperty() private _params?: SelectViewDialogParams;
|
||||
|
||||
public async showDialog(params: SelectViewDialogParams): Promise<void> {
|
||||
@internalProperty() private _dashboards: LovelaceDashboard[] = [];
|
||||
|
||||
@internalProperty() private _urlPath?: string | null;
|
||||
|
||||
@internalProperty() private _config?: LovelaceConfig;
|
||||
|
||||
public showDialog(params: SelectViewDialogParams): void {
|
||||
this._config = params.lovelaceConfig;
|
||||
this._urlPath = params.urlPath;
|
||||
this._params = params;
|
||||
await this.updateComplete;
|
||||
if (this._params.allowDashboardChange) {
|
||||
this._getDashboards();
|
||||
}
|
||||
}
|
||||
|
||||
protected updated(changedProps) {
|
||||
super.updated(changedProps);
|
||||
toggleAttribute(
|
||||
this,
|
||||
"hide-icons",
|
||||
this._params?.lovelaceConfig
|
||||
? !this._params.lovelaceConfig.views.some((view) => view.icon)
|
||||
: true
|
||||
);
|
||||
public closeDialog(): void {
|
||||
this._params = undefined;
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
@ -37,35 +51,96 @@ export class HuiDialogSelectView extends LitElement {
|
||||
return html``;
|
||||
}
|
||||
return html`
|
||||
<ha-paper-dialog
|
||||
with-backdrop
|
||||
opened
|
||||
@opened-changed="${this._openedChanged}"
|
||||
<ha-dialog
|
||||
open
|
||||
@closed=${this.closeDialog}
|
||||
hideActions
|
||||
.heading=${createCloseHeading(
|
||||
this.hass,
|
||||
this._params.header ||
|
||||
this.hass.localize("ui.panel.lovelace.editor.select_view.header")
|
||||
)}
|
||||
>
|
||||
<h2>Choose a view</h2>
|
||||
<hui-views-list
|
||||
.lovelaceConfig=${this._params!.lovelaceConfig}
|
||||
${this._params.allowDashboardChange
|
||||
? html`<ha-paper-dropdown-menu
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.select_view.dashboard_label"
|
||||
)}
|
||||
dynamic-align
|
||||
.disabled=${!this._dashboards.length}
|
||||
>
|
||||
<paper-listbox
|
||||
slot="dropdown-content"
|
||||
.selected=${this._urlPath || this.hass.defaultPanel}
|
||||
@iron-select=${this._dashboardChanged}
|
||||
attr-for-selected="url-path"
|
||||
>
|
||||
<paper-item
|
||||
.urlPath=${"lovelace"}
|
||||
.disabled=${(this.hass.panels.lovelace?.config as any)
|
||||
?.mode === "yaml"}
|
||||
>
|
||||
Default
|
||||
</paper-item>
|
||||
${this._dashboards.map((dashboard) => {
|
||||
if (!this.hass.user!.is_admin && dashboard.require_admin) {
|
||||
return "";
|
||||
}
|
||||
return html`
|
||||
<paper-item
|
||||
.disabled=${dashboard.mode !== "storage"}
|
||||
.urlPath=${dashboard.url_path}
|
||||
>${dashboard.title}</paper-item
|
||||
>
|
||||
`;
|
||||
})}
|
||||
</paper-listbox>
|
||||
</ha-paper-dropdown-menu>`
|
||||
: ""}
|
||||
${this._config
|
||||
? html` <hui-views-list
|
||||
.lovelaceConfig=${this._config}
|
||||
@view-selected=${this._selectView}
|
||||
>
|
||||
</hui-views-list>
|
||||
</ha-paper-dialog>
|
||||
</hui-views-list>`
|
||||
: html`<div>No config found.</div>`}
|
||||
</ha-dialog>
|
||||
`;
|
||||
}
|
||||
|
||||
private get _dialog(): HaPaperDialog {
|
||||
return this.shadowRoot!.querySelector("ha-paper-dialog")!;
|
||||
private async _getDashboards() {
|
||||
this._dashboards =
|
||||
this._params!.dashboards || (await fetchDashboards(this.hass));
|
||||
}
|
||||
|
||||
private async _dashboardChanged(ev: CustomEvent) {
|
||||
let urlPath: string | null = ev.detail.item.urlPath;
|
||||
if (urlPath === this._urlPath) {
|
||||
return;
|
||||
}
|
||||
if (urlPath === "lovelace") {
|
||||
urlPath = null;
|
||||
}
|
||||
this._urlPath = urlPath;
|
||||
try {
|
||||
this._config = await fetchConfig(this.hass.connection, urlPath, false);
|
||||
} catch (e) {
|
||||
this._config = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
private _selectView(e: CustomEvent): void {
|
||||
const view: number = e.detail.view;
|
||||
this._params!.viewSelectedCallback(view);
|
||||
this._dialog.close();
|
||||
this._params!.viewSelectedCallback(this._urlPath!, this._config!, view);
|
||||
this.closeDialog();
|
||||
}
|
||||
|
||||
private _openedChanged(ev: PolymerChangedEvent<boolean>): void {
|
||||
if (!(ev.detail as any).value) {
|
||||
this._params = undefined;
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
ha-paper-dropdown-menu {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,9 +1,17 @@
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import { LovelaceConfig } from "../../../../data/lovelace";
|
||||
import { LovelaceConfig, LovelaceDashboard } from "../../../../data/lovelace";
|
||||
|
||||
export interface SelectViewDialogParams {
|
||||
lovelaceConfig: LovelaceConfig;
|
||||
viewSelectedCallback: (view: number) => void;
|
||||
allowDashboardChange: boolean;
|
||||
dashboards?: LovelaceDashboard[];
|
||||
urlPath?: string | null;
|
||||
header?: string;
|
||||
viewSelectedCallback: (
|
||||
urlPath: string | null,
|
||||
config: LovelaceConfig,
|
||||
view: number
|
||||
) => void;
|
||||
}
|
||||
|
||||
export const showSelectViewDialog = (
|
||||
|
@ -31,13 +31,14 @@ import type { LovelaceConfig } from "../../../../data/lovelace";
|
||||
import type { HomeAssistant } from "../../../../types";
|
||||
import { computeUnusedEntities } from "../../common/compute-unused-entities";
|
||||
import type { Lovelace } from "../../types";
|
||||
import { addEntitiesToLovelaceView } from "../add-entities-to-view";
|
||||
import "../../../../components/ha-svg-icon";
|
||||
import { mdiPlus } from "@mdi/js";
|
||||
import { showSuggestCardDialog } from "../card-editor/show-suggest-card-dialog";
|
||||
import { showSelectViewDialog } from "../select-view/show-select-view-dialog";
|
||||
|
||||
@customElement("hui-unused-entities")
|
||||
export class HuiUnusedEntities extends LitElement {
|
||||
@property({ attribute: false }) public lovelace?: Lovelace;
|
||||
@property({ attribute: false }) public lovelace!: Lovelace;
|
||||
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@ -48,7 +49,7 @@ export class HuiUnusedEntities extends LitElement {
|
||||
@internalProperty() private _selectedEntities: string[] = [];
|
||||
|
||||
private get _config(): LovelaceConfig {
|
||||
return this.lovelace!.config;
|
||||
return this.lovelace.config;
|
||||
}
|
||||
|
||||
private _columns = memoizeOne((narrow: boolean) => {
|
||||
@ -226,13 +227,27 @@ export class HuiUnusedEntities extends LitElement {
|
||||
}
|
||||
|
||||
private _addToLovelaceView(): void {
|
||||
addEntitiesToLovelaceView(
|
||||
this,
|
||||
this.hass,
|
||||
this._selectedEntities,
|
||||
this.lovelace!.config,
|
||||
this.lovelace!.saveConfig
|
||||
);
|
||||
if (this.lovelace.config.views.length === 1) {
|
||||
showSuggestCardDialog(this, {
|
||||
lovelaceConfig: this.lovelace.config!,
|
||||
saveConfig: this.lovelace.saveConfig,
|
||||
path: [0],
|
||||
entities: this._selectedEntities,
|
||||
});
|
||||
return;
|
||||
}
|
||||
showSelectViewDialog(this, {
|
||||
lovelaceConfig: this.lovelace.config,
|
||||
allowDashboardChange: false,
|
||||
viewSelectedCallback: (_urlPath, _selectedDashConfig, viewIndex) => {
|
||||
showSuggestCardDialog(this, {
|
||||
lovelaceConfig: this.lovelace.config!,
|
||||
saveConfig: this.lovelace.saveConfig,
|
||||
path: [viewIndex],
|
||||
entities: this._selectedEntities,
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
static get styles(): CSSResult {
|
||||
|
@ -327,6 +327,7 @@ class LovelacePanel extends LitElement {
|
||||
this.lovelace = {
|
||||
config,
|
||||
mode,
|
||||
urlPath: this.urlPath,
|
||||
editMode: this.lovelace ? this.lovelace.editMode : false,
|
||||
language: this.hass!.language,
|
||||
enableFullEditMode: () => {
|
||||
|
@ -17,6 +17,7 @@ declare global {
|
||||
export interface Lovelace {
|
||||
config: LovelaceConfig;
|
||||
editMode: boolean;
|
||||
urlPath: string | null;
|
||||
mode: "generated" | "yaml" | "storage";
|
||||
language: string;
|
||||
enableFullEditMode: () => void;
|
||||
|
@ -1941,6 +1941,13 @@
|
||||
"move": "Move to View",
|
||||
"options": "More options"
|
||||
},
|
||||
"move_card": {
|
||||
"header": "Choose a view to move the card to"
|
||||
},
|
||||
"select_view": {
|
||||
"header": "Choose a view",
|
||||
"dashboard_label": "Dashboard"
|
||||
},
|
||||
"suggest_card": {
|
||||
"header": "We created a suggestion for you",
|
||||
"create_own": "Pick different card",
|
||||
|
Loading…
x
Reference in New Issue
Block a user