mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-28 19:56:42 +00:00
Merge pull request #4671 from home-assistant/device-page-fixes
Device info page fixes
This commit is contained in:
Bram Kragten
GitHub
commit
2f86b6ec3d
@ -55,6 +55,10 @@ export class HaChips extends LitElement {
|
|||||||
static get styles(): CSSResult {
|
static get styles(): CSSResult {
|
||||||
return css`
|
return css`
|
||||||
${unsafeCSS(chipStyles)}
|
${unsafeCSS(chipStyles)}
|
||||||
|
.mdc-chip {
|
||||||
|
background-color: rgba(var(--rgb-primary-text-color), 0.15);
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,11 @@
|
|||||||
import { LitElement, TemplateResult, html, property } from "lit-element";
|
import {
|
||||||
|
LitElement,
|
||||||
|
TemplateResult,
|
||||||
|
html,
|
||||||
|
property,
|
||||||
|
CSSResult,
|
||||||
|
css,
|
||||||
|
} from "lit-element";
|
||||||
import { HomeAssistant } from "../../../../types";
|
import { HomeAssistant } from "../../../../types";
|
||||||
import { DeviceAutomation } from "../../../../data/device_automation";
|
import { DeviceAutomation } from "../../../../data/device_automation";
|
||||||
|
|
||||||
@ -76,4 +83,12 @@ export abstract class HaDeviceAutomationCard<
|
|||||||
data[this.type] = [automation];
|
data[this.type] = [automation];
|
||||||
showAutomationEditor(this, data);
|
showAutomationEditor(this, data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static get styles(): CSSResult {
|
||||||
|
return css`
|
||||||
|
h3 {
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -113,7 +113,9 @@ export class DialogDeviceAutomation extends LitElement {
|
|||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
`
|
`
|
||||||
: html``}
|
: this.hass.localize(
|
||||||
|
"ui.panel.config.devices.automation.no_device_automations"
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<mwc-button slot="primaryAction" @click="${this._close}">
|
<mwc-button slot="primaryAction" @click="${this._close}">
|
||||||
Close
|
Close
|
||||||
@ -126,54 +128,17 @@ export class DialogDeviceAutomation extends LitElement {
|
|||||||
this._params = undefined;
|
this._params = undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
static get styles(): CSSResult[] {
|
static get styles(): CSSResult {
|
||||||
return [
|
return css`
|
||||||
css`
|
ha-dialog {
|
||||||
|
--mdc-dialog-title-ink-color: var(--primary-text-color);
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 600px) {
|
||||||
ha-dialog {
|
ha-dialog {
|
||||||
--mdc-dialog-title-ink-color: var(--primary-text-color);
|
--mdc-dialog-min-width: 600px;
|
||||||
--justify-action-buttons: space-between;
|
|
||||||
}
|
}
|
||||||
@media only screen and (min-width: 600px) {
|
}
|
||||||
ha-dialog {
|
`;
|
||||||
--mdc-dialog-min-width: 600px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.form {
|
|
||||||
padding-bottom: 24px;
|
|
||||||
}
|
|
||||||
.location {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.location > * {
|
|
||||||
flex-grow: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
.location > *:first-child {
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
.location > *:last-child {
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
ha-location-editor {
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
ha-user-picker {
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
mwc-button.warning {
|
|
||||||
--mdc-theme-primary: var(--google-red-500);
|
|
||||||
}
|
|
||||||
.error {
|
|
||||||
color: var(--google-red-500);
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -41,6 +41,7 @@ import { RelatedResult, findRelated } from "../../../data/search";
|
|||||||
import { SceneEntities, showSceneEditor } from "../../../data/scene";
|
import { SceneEntities, showSceneEditor } from "../../../data/scene";
|
||||||
import { navigate } from "../../../common/navigate";
|
import { navigate } from "../../../common/navigate";
|
||||||
import { showDeviceAutomationDialog } from "./device-detail/show-dialog-device-automation";
|
import { showDeviceAutomationDialog } from "./device-detail/show-dialog-device-automation";
|
||||||
|
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
|
||||||
|
|
||||||
export interface EntityRegistryStateEntry extends EntityRegistryEntry {
|
export interface EntityRegistryStateEntry extends EntityRegistryEntry {
|
||||||
stateName?: string;
|
stateName?: string;
|
||||||
@ -152,144 +153,165 @@ export class HaConfigDevicePage extends LitElement {
|
|||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<ha-card
|
${
|
||||||
.header=${this.hass.localize(
|
isComponentLoaded(this.hass, "automation")
|
||||||
"ui.panel.config.devices.automation.automations"
|
? html`
|
||||||
)}
|
<ha-card
|
||||||
>${
|
.header=${this.hass.localize(
|
||||||
this._related?.automation?.length
|
"ui.panel.config.devices.automation.automations"
|
||||||
? this._related.automation.map((automation) => {
|
)}
|
||||||
const state = this.hass.states[automation];
|
>${this._related?.automation?.length
|
||||||
return state
|
? this._related.automation.map((automation) => {
|
||||||
? html`
|
const state = this.hass.states[automation];
|
||||||
<div>
|
return state
|
||||||
<paper-item
|
? html`
|
||||||
.automation=${state}
|
<div>
|
||||||
@click=${this._openAutomation}
|
<paper-item
|
||||||
.disabled=${!state.attributes.id}
|
.automation=${state}
|
||||||
>
|
@click=${this._openAutomation}
|
||||||
<paper-item-body>
|
.disabled=${!state.attributes.id}
|
||||||
${state.attributes.friendly_name ||
|
>
|
||||||
automation}
|
<paper-item-body>
|
||||||
</paper-item-body>
|
${state.attributes.friendly_name ||
|
||||||
<ha-icon-next></ha-icon-next>
|
automation}
|
||||||
</paper-item>
|
</paper-item-body>
|
||||||
${!state.attributes.id
|
<ha-icon-next></ha-icon-next>
|
||||||
? html`
|
</paper-item>
|
||||||
<paper-tooltip
|
${!state.attributes.id
|
||||||
>${this.hass.localize(
|
? html`
|
||||||
"ui.panel.config.devices.cant_edit"
|
<paper-tooltip
|
||||||
)}
|
>${this.hass.localize(
|
||||||
</paper-tooltip>
|
"ui.panel.config.devices.cant_edit"
|
||||||
`
|
)}
|
||||||
: ""}
|
</paper-tooltip>
|
||||||
</div>
|
`
|
||||||
`
|
: ""}
|
||||||
: "";
|
</div>
|
||||||
})
|
`
|
||||||
: html`
|
: "";
|
||||||
<paper-item class="no-link"
|
})
|
||||||
>${this.hass.localize(
|
: html`
|
||||||
"ui.panel.config.devices.automation.no_automations"
|
<paper-item class="no-link"
|
||||||
)}</paper-item
|
>${this.hass.localize(
|
||||||
>
|
"ui.panel.config.devices.automation.no_automations"
|
||||||
`
|
)}</paper-item
|
||||||
}
|
>
|
||||||
<div class="card-actions">
|
`}
|
||||||
<mwc-button @click=${this._showAutomationDialog}>
|
<div class="card-actions">
|
||||||
${this.hass.localize(
|
<mwc-button @click=${this._showAutomationDialog}>
|
||||||
"ui.panel.config.devices.automation.create"
|
${this.hass.localize(
|
||||||
)}
|
"ui.panel.config.devices.automation.create"
|
||||||
</mwc-button>
|
)}
|
||||||
</div>
|
</mwc-button>
|
||||||
</ha-card>
|
</div>
|
||||||
|
</ha-card>
|
||||||
|
`
|
||||||
|
: ""
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<ha-card
|
${
|
||||||
.header=${this.hass.localize(
|
isComponentLoaded(this.hass, "scene")
|
||||||
"ui.panel.config.devices.scene.scenes"
|
? html`
|
||||||
)}
|
<ha-card
|
||||||
>${
|
.header=${this.hass.localize(
|
||||||
this._related?.scene?.length
|
"ui.panel.config.devices.scene.scenes"
|
||||||
? this._related.scene.map((scene) => {
|
)}
|
||||||
const state = this.hass.states[scene];
|
>${this._related?.scene?.length
|
||||||
return state
|
? this._related.scene.map((scene) => {
|
||||||
? html`
|
const state = this.hass.states[scene];
|
||||||
<div>
|
return state
|
||||||
<paper-item
|
? html`
|
||||||
.scene=${state}
|
<div>
|
||||||
@click=${this._openScene}
|
<paper-item
|
||||||
.disabled=${!state.attributes.id}
|
.scene=${state}
|
||||||
>
|
@click=${this._openScene}
|
||||||
<paper-item-body>
|
.disabled=${!state.attributes.id}
|
||||||
${state.attributes.friendly_name || scene}
|
>
|
||||||
</paper-item-body>
|
<paper-item-body>
|
||||||
<ha-icon-next></ha-icon-next>
|
${state.attributes.friendly_name ||
|
||||||
</paper-item>
|
scene}
|
||||||
${!state.attributes.id
|
</paper-item-body>
|
||||||
? html`
|
<ha-icon-next></ha-icon-next>
|
||||||
<paper-tooltip
|
</paper-item>
|
||||||
>${this.hass.localize(
|
${!state.attributes.id
|
||||||
"ui.panel.config.devices.cant_edit"
|
? html`
|
||||||
)}
|
<paper-tooltip
|
||||||
</paper-tooltip>
|
>${this.hass.localize(
|
||||||
`
|
"ui.panel.config.devices.cant_edit"
|
||||||
: ""}
|
)}
|
||||||
</div>
|
</paper-tooltip>
|
||||||
`
|
`
|
||||||
: "";
|
: ""}
|
||||||
})
|
</div>
|
||||||
: html`
|
`
|
||||||
<paper-item class="no-link"
|
: "";
|
||||||
>${this.hass.localize(
|
})
|
||||||
"ui.panel.config.devices.scene.no_scenes"
|
: html`
|
||||||
)}</paper-item
|
<paper-item class="no-link"
|
||||||
>
|
>${this.hass.localize(
|
||||||
`
|
"ui.panel.config.devices.scene.no_scenes"
|
||||||
}
|
)}</paper-item
|
||||||
<div class="card-actions">
|
>
|
||||||
<mwc-button @click=${this._createScene}>
|
`}
|
||||||
${this.hass.localize(
|
${entities.length
|
||||||
"ui.panel.config.devices.scene.create"
|
? html`
|
||||||
)} </mwc-button>
|
<div class="card-actions">
|
||||||
</div>
|
<mwc-button @click=${this._createScene}>
|
||||||
</ha-card>
|
${this.hass.localize(
|
||||||
<ha-card
|
"ui.panel.config.devices.scene.create"
|
||||||
.header=${this.hass.localize(
|
)}
|
||||||
"ui.panel.config.devices.script.scripts"
|
</mwc-button>
|
||||||
)}
|
</div>
|
||||||
>${
|
`
|
||||||
this._related?.script?.length
|
: ""}
|
||||||
? this._related.script.map((script) => {
|
</ha-card>
|
||||||
const state = this.hass.states[script];
|
`
|
||||||
return state
|
: ""
|
||||||
? html`
|
}
|
||||||
<paper-item
|
${
|
||||||
.script=${script}
|
isComponentLoaded(this.hass, "script")
|
||||||
@click=${this._openScript}
|
? html`
|
||||||
|
<ha-card
|
||||||
|
.header=${this.hass.localize(
|
||||||
|
"ui.panel.config.devices.script.scripts"
|
||||||
|
)}
|
||||||
|
>${this._related?.script?.length
|
||||||
|
? this._related.script.map((script) => {
|
||||||
|
const state = this.hass.states[script];
|
||||||
|
return state
|
||||||
|
? html`
|
||||||
|
<paper-item
|
||||||
|
.script=${script}
|
||||||
|
@click=${this._openScript}
|
||||||
|
>
|
||||||
|
<paper-item-body>
|
||||||
|
${state.attributes.friendly_name ||
|
||||||
|
script}
|
||||||
|
</paper-item-body>
|
||||||
|
<ha-icon-next></ha-icon-next>
|
||||||
|
</paper-item>
|
||||||
|
`
|
||||||
|
: "";
|
||||||
|
})
|
||||||
|
: html`
|
||||||
|
<paper-item class="no-link">
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.devices.script.no_scripts"
|
||||||
|
)}</paper-item
|
||||||
>
|
>
|
||||||
<paper-item-body>
|
`}
|
||||||
${state.attributes.friendly_name || script}
|
<div class="card-actions">
|
||||||
</paper-item-body>
|
<mwc-button @click=${this._showScriptDialog}>
|
||||||
<ha-icon-next></ha-icon-next>
|
${this.hass.localize(
|
||||||
</paper-item>
|
"ui.panel.config.devices.script.create"
|
||||||
`
|
)}
|
||||||
: "";
|
</mwc-button>
|
||||||
})
|
</div>
|
||||||
: html`
|
</ha-card>
|
||||||
<paper-item class="no-link">
|
`
|
||||||
${this.hass.localize(
|
: ""
|
||||||
"ui.panel.config.devices.script.no_scripts"
|
}
|
||||||
)}</paper-item
|
|
||||||
>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
<div class="card-actions">
|
|
||||||
<mwc-button @click=${this._showScriptDialog}>
|
|
||||||
${this.hass.localize("ui.panel.config.devices.script.create")}
|
|
||||||
</mwc-button>
|
|
||||||
</div>
|
|
||||||
</ha-card>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -50,6 +50,10 @@ class HaConfigScene extends HassRouterPage {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
public disconnectedCallback() {
|
||||||
|
super.disconnectedCallback();
|
||||||
|
}
|
||||||
|
|
||||||
protected updatePageEl(pageEl, changedProps: PropertyValues) {
|
protected updatePageEl(pageEl, changedProps: PropertyValues) {
|
||||||
pageEl.hass = this.hass;
|
pageEl.hass = this.hass;
|
||||||
pageEl.narrow = this.narrow;
|
pageEl.narrow = this.narrow;
|
||||||
@ -65,6 +69,7 @@ class HaConfigScene extends HassRouterPage {
|
|||||||
(!changedProps || changedProps.has("route")) &&
|
(!changedProps || changedProps.has("route")) &&
|
||||||
this._currentPage === "edit"
|
this._currentPage === "edit"
|
||||||
) {
|
) {
|
||||||
|
pageEl.creatingNew = undefined;
|
||||||
const sceneId = this.routeTail.path.substr(1);
|
const sceneId = this.routeTail.path.substr(1);
|
||||||
pageEl.creatingNew = sceneId === "new" ? true : false;
|
pageEl.creatingNew = sceneId === "new" ? true : false;
|
||||||
pageEl.scene =
|
pageEl.scene =
|
||||||
|
|||||||
@ -86,7 +86,7 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
|
|||||||
@property() private _entityRegistryEntries: EntityRegistryEntry[] = [];
|
@property() private _entityRegistryEntries: EntityRegistryEntry[] = [];
|
||||||
private _storedStates: SceneEntities = {};
|
private _storedStates: SceneEntities = {};
|
||||||
private _unsubscribeEvents?: () => void;
|
private _unsubscribeEvents?: () => void;
|
||||||
private _deviceEntityLookup: DeviceEntitiesLookup = {};
|
@property() private _deviceEntityLookup: DeviceEntitiesLookup = {};
|
||||||
private _activateContextId?: string;
|
private _activateContextId?: string;
|
||||||
|
|
||||||
private _getEntitiesDevices = memoizeOne(
|
private _getEntitiesDevices = memoizeOne(
|
||||||
@ -411,8 +411,8 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
|
|||||||
entities: {},
|
entities: {},
|
||||||
...initData,
|
...initData,
|
||||||
};
|
};
|
||||||
|
this._initEntities(this._config);
|
||||||
if (initData) {
|
if (initData) {
|
||||||
this._initEntities(this._config);
|
|
||||||
this._dirty = true;
|
this._dirty = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -433,6 +433,12 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
|
|||||||
) {
|
) {
|
||||||
this._deviceEntityLookup[entity.device_id].push(entity.entity_id);
|
this._deviceEntityLookup[entity.device_id].push(entity.entity_id);
|
||||||
}
|
}
|
||||||
|
if (
|
||||||
|
this._entities.includes(entity.entity_id) &&
|
||||||
|
!this._devices.includes(entity.device_id)
|
||||||
|
) {
|
||||||
|
this._devices = [...this._devices, entity.device_id];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1286,7 +1286,8 @@
|
|||||||
},
|
},
|
||||||
"actions": {
|
"actions": {
|
||||||
"caption": "When something is triggered..."
|
"caption": "When something is triggered..."
|
||||||
}
|
},
|
||||||
|
"no_device_automations": "There are no automations available for this device."
|
||||||
},
|
},
|
||||||
"script": {
|
"script": {
|
||||||
"scripts": "Scripts",
|
"scripts": "Scripts",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user