mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-28 11:46: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 {
|
||||
return css`
|
||||
${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 { DeviceAutomation } from "../../../../data/device_automation";
|
||||
|
||||
@ -76,4 +83,12 @@ export abstract class HaDeviceAutomationCard<
|
||||
data[this.type] = [automation];
|
||||
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>
|
||||
<mwc-button slot="primaryAction" @click="${this._close}">
|
||||
Close
|
||||
@ -126,54 +128,17 @@ export class DialogDeviceAutomation extends LitElement {
|
||||
this._params = undefined;
|
||||
}
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
css`
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
ha-dialog {
|
||||
--mdc-dialog-title-ink-color: var(--primary-text-color);
|
||||
}
|
||||
@media only screen and (min-width: 600px) {
|
||||
ha-dialog {
|
||||
--mdc-dialog-title-ink-color: var(--primary-text-color);
|
||||
--justify-action-buttons: space-between;
|
||||
--mdc-dialog-min-width: 600px;
|
||||
}
|
||||
@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 { navigate } from "../../../common/navigate";
|
||||
import { showDeviceAutomationDialog } from "./device-detail/show-dialog-device-automation";
|
||||
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
|
||||
|
||||
export interface EntityRegistryStateEntry extends EntityRegistryEntry {
|
||||
stateName?: string;
|
||||
@ -152,144 +153,165 @@ export class HaConfigDevicePage extends LitElement {
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="column">
|
||||
<ha-card
|
||||
.header=${this.hass.localize(
|
||||
"ui.panel.config.devices.automation.automations"
|
||||
)}
|
||||
>${
|
||||
this._related?.automation?.length
|
||||
? this._related.automation.map((automation) => {
|
||||
const state = this.hass.states[automation];
|
||||
return state
|
||||
? html`
|
||||
<div>
|
||||
<paper-item
|
||||
.automation=${state}
|
||||
@click=${this._openAutomation}
|
||||
.disabled=${!state.attributes.id}
|
||||
>
|
||||
<paper-item-body>
|
||||
${state.attributes.friendly_name ||
|
||||
automation}
|
||||
</paper-item-body>
|
||||
<ha-icon-next></ha-icon-next>
|
||||
</paper-item>
|
||||
${!state.attributes.id
|
||||
? html`
|
||||
<paper-tooltip
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.devices.cant_edit"
|
||||
)}
|
||||
</paper-tooltip>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
`
|
||||
: "";
|
||||
})
|
||||
: html`
|
||||
<paper-item class="no-link"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.devices.automation.no_automations"
|
||||
)}</paper-item
|
||||
>
|
||||
`
|
||||
}
|
||||
<div class="card-actions">
|
||||
<mwc-button @click=${this._showAutomationDialog}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.devices.automation.create"
|
||||
)}
|
||||
</mwc-button>
|
||||
</div>
|
||||
</ha-card>
|
||||
${
|
||||
isComponentLoaded(this.hass, "automation")
|
||||
? html`
|
||||
<ha-card
|
||||
.header=${this.hass.localize(
|
||||
"ui.panel.config.devices.automation.automations"
|
||||
)}
|
||||
>${this._related?.automation?.length
|
||||
? this._related.automation.map((automation) => {
|
||||
const state = this.hass.states[automation];
|
||||
return state
|
||||
? html`
|
||||
<div>
|
||||
<paper-item
|
||||
.automation=${state}
|
||||
@click=${this._openAutomation}
|
||||
.disabled=${!state.attributes.id}
|
||||
>
|
||||
<paper-item-body>
|
||||
${state.attributes.friendly_name ||
|
||||
automation}
|
||||
</paper-item-body>
|
||||
<ha-icon-next></ha-icon-next>
|
||||
</paper-item>
|
||||
${!state.attributes.id
|
||||
? html`
|
||||
<paper-tooltip
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.devices.cant_edit"
|
||||
)}
|
||||
</paper-tooltip>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
`
|
||||
: "";
|
||||
})
|
||||
: html`
|
||||
<paper-item class="no-link"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.devices.automation.no_automations"
|
||||
)}</paper-item
|
||||
>
|
||||
`}
|
||||
<div class="card-actions">
|
||||
<mwc-button @click=${this._showAutomationDialog}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.devices.automation.create"
|
||||
)}
|
||||
</mwc-button>
|
||||
</div>
|
||||
</ha-card>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
<div class="column">
|
||||
<ha-card
|
||||
.header=${this.hass.localize(
|
||||
"ui.panel.config.devices.scene.scenes"
|
||||
)}
|
||||
>${
|
||||
this._related?.scene?.length
|
||||
? this._related.scene.map((scene) => {
|
||||
const state = this.hass.states[scene];
|
||||
return state
|
||||
? html`
|
||||
<div>
|
||||
<paper-item
|
||||
.scene=${state}
|
||||
@click=${this._openScene}
|
||||
.disabled=${!state.attributes.id}
|
||||
>
|
||||
<paper-item-body>
|
||||
${state.attributes.friendly_name || scene}
|
||||
</paper-item-body>
|
||||
<ha-icon-next></ha-icon-next>
|
||||
</paper-item>
|
||||
${!state.attributes.id
|
||||
? html`
|
||||
<paper-tooltip
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.devices.cant_edit"
|
||||
)}
|
||||
</paper-tooltip>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
`
|
||||
: "";
|
||||
})
|
||||
: html`
|
||||
<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(
|
||||
"ui.panel.config.devices.scene.create"
|
||||
)} </mwc-button>
|
||||
</div>
|
||||
</ha-card>
|
||||
<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}
|
||||
${
|
||||
isComponentLoaded(this.hass, "scene")
|
||||
? html`
|
||||
<ha-card
|
||||
.header=${this.hass.localize(
|
||||
"ui.panel.config.devices.scene.scenes"
|
||||
)}
|
||||
>${this._related?.scene?.length
|
||||
? this._related.scene.map((scene) => {
|
||||
const state = this.hass.states[scene];
|
||||
return state
|
||||
? html`
|
||||
<div>
|
||||
<paper-item
|
||||
.scene=${state}
|
||||
@click=${this._openScene}
|
||||
.disabled=${!state.attributes.id}
|
||||
>
|
||||
<paper-item-body>
|
||||
${state.attributes.friendly_name ||
|
||||
scene}
|
||||
</paper-item-body>
|
||||
<ha-icon-next></ha-icon-next>
|
||||
</paper-item>
|
||||
${!state.attributes.id
|
||||
? html`
|
||||
<paper-tooltip
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.devices.cant_edit"
|
||||
)}
|
||||
</paper-tooltip>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
`
|
||||
: "";
|
||||
})
|
||||
: html`
|
||||
<paper-item class="no-link"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.devices.scene.no_scenes"
|
||||
)}</paper-item
|
||||
>
|
||||
`}
|
||||
${entities.length
|
||||
? html`
|
||||
<div class="card-actions">
|
||||
<mwc-button @click=${this._createScene}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.devices.scene.create"
|
||||
)}
|
||||
</mwc-button>
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
</ha-card>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
${
|
||||
isComponentLoaded(this.hass, "script")
|
||||
? 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}
|
||||
</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
|
||||
>
|
||||
`
|
||||
}
|
||||
<div class="card-actions">
|
||||
<mwc-button @click=${this._showScriptDialog}>
|
||||
${this.hass.localize("ui.panel.config.devices.script.create")}
|
||||
</mwc-button>
|
||||
</div>
|
||||
</ha-card>
|
||||
`}
|
||||
<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>
|
||||
|
||||
@ -50,6 +50,10 @@ class HaConfigScene extends HassRouterPage {
|
||||
});
|
||||
});
|
||||
|
||||
public disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
}
|
||||
|
||||
protected updatePageEl(pageEl, changedProps: PropertyValues) {
|
||||
pageEl.hass = this.hass;
|
||||
pageEl.narrow = this.narrow;
|
||||
@ -65,6 +69,7 @@ class HaConfigScene extends HassRouterPage {
|
||||
(!changedProps || changedProps.has("route")) &&
|
||||
this._currentPage === "edit"
|
||||
) {
|
||||
pageEl.creatingNew = undefined;
|
||||
const sceneId = this.routeTail.path.substr(1);
|
||||
pageEl.creatingNew = sceneId === "new" ? true : false;
|
||||
pageEl.scene =
|
||||
|
||||
@ -86,7 +86,7 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
|
||||
@property() private _entityRegistryEntries: EntityRegistryEntry[] = [];
|
||||
private _storedStates: SceneEntities = {};
|
||||
private _unsubscribeEvents?: () => void;
|
||||
private _deviceEntityLookup: DeviceEntitiesLookup = {};
|
||||
@property() private _deviceEntityLookup: DeviceEntitiesLookup = {};
|
||||
private _activateContextId?: string;
|
||||
|
||||
private _getEntitiesDevices = memoizeOne(
|
||||
@ -411,8 +411,8 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
|
||||
entities: {},
|
||||
...initData,
|
||||
};
|
||||
this._initEntities(this._config);
|
||||
if (initData) {
|
||||
this._initEntities(this._config);
|
||||
this._dirty = true;
|
||||
}
|
||||
}
|
||||
@ -433,6 +433,12 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
|
||||
) {
|
||||
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": {
|
||||
"caption": "When something is triggered..."
|
||||
}
|
||||
},
|
||||
"no_device_automations": "There are no automations available for this device."
|
||||
},
|
||||
"script": {
|
||||
"scripts": "Scripts",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user