- Save
+ Save
`;
diff --git a/hassio/src/addon-view/hassio-addon-config.js b/hassio/src/addon-view/hassio-addon-config.js
index cdcaf8060d..a4061b8899 100644
--- a/hassio/src/addon-view/hassio-addon-config.js
+++ b/hassio/src/addon-view/hassio-addon-config.js
@@ -1,5 +1,5 @@
import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -50,8 +50,8 @@ class HassioAddonConfig extends PolymerElement {
data="[[resetData]]"
>Reset to defaults
-
- Enable Protection mode
+ Enable Protection mode
@@ -250,7 +250,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
- Uninstall Uninstall
Open web UI Open web UI
`;
diff --git a/hassio/src/addon-view/hassio-addon-network.js b/hassio/src/addon-view/hassio-addon-network.js
index 7cfb15f5a0..569972c81f 100644
--- a/hassio/src/addon-view/hassio-addon-network.js
+++ b/hassio/src/addon-view/hassio-addon-network.js
@@ -60,7 +60,7 @@ class HassioAddonNetwork extends EventsMixin(PolymerElement) {
data="[[resetData]]"
>Reset to defaults
- Save
+ Save
`;
diff --git a/hassio/src/dashboard/hassio-hass-update.js b/hassio/src/dashboard/hassio-hass-update.js
index 20c224cb3e..aff95e523a 100644
--- a/hassio/src/dashboard/hassio-hass-update.js
+++ b/hassio/src/dashboard/hassio-hass-update.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -56,7 +56,7 @@ class HassioHassUpdate extends PolymerElement {
- Refresh
+ Refresh
- Create Create
diff --git a/hassio/src/system/hassio-host-info.js b/hassio/src/system/hassio-host-info.js
index 0b650e3e48..ac19fcb519 100644
--- a/hassio/src/system/hassio-host-info.js
+++ b/hassio/src/system/hassio-host-info.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -39,7 +39,7 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
color: var(--google-red-500);
margin-top: 16px;
}
- paper-button.info {
+ mwc-button.info {
max-width: calc(50% - 12px);
}
table.info {
@@ -67,13 +67,13 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
- Error: [[errors]]
diff --git a/hassio/src/system/hassio-supervisor-info.js b/hassio/src/system/hassio-supervisor-info.js
index 9671d016e8..88a2f58f72 100644
--- a/hassio/src/system/hassio-supervisor-info.js
+++ b/hassio/src/system/hassio-supervisor-info.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -80,11 +80,11 @@ class HassioSupervisorInfo extends EventsMixin(PolymerElement) {
>
-
- Refresh
+ Refresh
-
+
) {
+ event.stopPropagation();
+ const curValue = (event.currentTarget as any).curValue;
+ const newValue = event.detail.value;
+ if (
+ newValue === curValue ||
+ (newValue !== "" && !isValidEntityId(newValue))
+ ) {
+ return;
+ }
+ if (newValue === "") {
+ this._updateEntities(
+ this._currentEntities.filter((ent) => ent !== curValue)
+ );
+ } else {
+ this._updateEntities(
+ this._currentEntities.map((ent) => (ent === curValue ? newValue : ent))
+ );
+ }
+ }
+
+ private async _addEntity(event: PolymerChangedEvent) {
+ event.stopPropagation();
+ const toAdd = event.detail.value;
+ (event.currentTarget as any).value = "";
+ if (!toAdd) {
+ return;
+ }
+ const currentEntities = this._currentEntities;
+ if (currentEntities.includes(toAdd)) {
+ return;
+ }
+
+ this._updateEntities([...currentEntities, toAdd]);
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-entities-picker": HaEntitiesPickerLight;
+ }
+}
diff --git a/src/components/entity/ha-entity-picker.js b/src/components/entity/ha-entity-picker.js
deleted file mode 100644
index bc4765d8d7..0000000000
--- a/src/components/entity/ha-entity-picker.js
+++ /dev/null
@@ -1,179 +0,0 @@
-import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-item/paper-item-body";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@vaadin/vaadin-combo-box/vaadin-combo-box-light";
-
-import "./state-badge";
-
-import computeStateName from "../../common/entity/compute_state_name";
-import LocalizeMixin from "../../mixins/localize-mixin";
-import EventsMixin from "../../mixins/events-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HaEntityPicker extends EventsMixin(LocalizeMixin(PolymerElement)) {
- static get template() {
- return html`
-
-
-
- Clear
- Toggle
-
-
-
-
-
-
-
-
-
- `;
- }
-
- static get properties() {
- return {
- allowCustomEntity: {
- type: Boolean,
- value: false,
- },
- hass: {
- type: Object,
- observer: "_hassChanged",
- },
- _hass: Object,
- _states: {
- type: Array,
- computed: "_computeStates(_hass, domainFilter, entityFilter)",
- },
- autofocus: Boolean,
- label: {
- type: String,
- },
- value: {
- type: String,
- notify: true,
- },
- opened: {
- type: Boolean,
- value: false,
- observer: "_openedChanged",
- },
- domainFilter: {
- type: String,
- value: null,
- },
- entityFilter: {
- type: Function,
- value: null,
- },
- disabled: Boolean,
- };
- }
-
- _computeLabel(label, localize) {
- return label === undefined
- ? localize("ui.components.entity.entity-picker.entity")
- : label;
- }
-
- _computeStates(hass, domainFilter, entityFilter) {
- if (!hass) return [];
-
- let entityIds = Object.keys(hass.states);
-
- if (domainFilter) {
- entityIds = entityIds.filter(
- (eid) => eid.substr(0, eid.indexOf(".")) === domainFilter
- );
- }
-
- let entities = entityIds.sort().map((key) => hass.states[key]);
-
- if (entityFilter) {
- entities = entities.filter(entityFilter);
- }
-
- return entities;
- }
-
- _computeStateName(state) {
- return computeStateName(state);
- }
-
- _openedChanged(newVal) {
- if (!newVal) {
- this._hass = this.hass;
- }
- }
-
- _hassChanged(newVal) {
- if (!this.opened) {
- this._hass = newVal;
- }
- }
-
- _computeToggleIcon(opened) {
- return opened ? "hass:menu-up" : "hass:menu-down";
- }
-
- _fireChanged(ev) {
- ev.stopPropagation();
- this.fire("change");
- }
-}
-
-customElements.define("ha-entity-picker", HaEntityPicker);
diff --git a/src/components/entity/ha-entity-picker.ts b/src/components/entity/ha-entity-picker.ts
new file mode 100644
index 0000000000..53f0b74db2
--- /dev/null
+++ b/src/components/entity/ha-entity-picker.ts
@@ -0,0 +1,201 @@
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-item/paper-icon-item";
+import "@polymer/paper-item/paper-item-body";
+import "@vaadin/vaadin-combo-box/vaadin-combo-box-light";
+import memoizeOne from "memoize-one";
+
+import "./state-badge";
+
+import computeStateName from "../../common/entity/compute_state_name";
+import {
+ LitElement,
+ TemplateResult,
+ html,
+ css,
+ CSSResult,
+ property,
+ PropertyValues,
+} from "lit-element";
+import { HomeAssistant } from "../../types";
+import { HassEntity } from "home-assistant-js-websocket";
+import { PolymerChangedEvent } from "../../polymer-types";
+import { fireEvent } from "../../common/dom/fire_event";
+
+export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
+
+const rowRenderer = (
+ root: HTMLElement,
+ _owner,
+ model: { item: HassEntity }
+) => {
+ if (!root.firstElementChild) {
+ root.innerHTML = `
+
+
+
+
+
+ `;
+ }
+
+ root.querySelector("state-badge")!.stateObj = model.item;
+ root.querySelector(".name")!.textContent = computeStateName(model.item);
+ root.querySelector("[secondary]")!.textContent = model.item.entity_id;
+};
+
+class HaEntityPicker extends LitElement {
+ @property({ type: Boolean }) public autofocus?: boolean;
+ @property({ type: Boolean }) public disabled?: boolean;
+ @property({ type: Boolean, attribute: "allow-custom-entity" })
+ public allowCustomEntity;
+ @property() public hass?: HomeAssistant;
+ @property() public label?: string;
+ @property() public value?: string;
+ @property({ attribute: "domain-filter" }) public domainFilter?: string;
+ @property() public entityFilter?: HaEntityPickerEntityFilterFunc;
+ @property({ type: Boolean }) private _opened?: boolean;
+ @property() private _hass?: HomeAssistant;
+
+ private _getStates = memoizeOne(
+ (
+ hass: this["hass"],
+ domainFilter: this["domainFilter"],
+ entityFilter: this["entityFilter"]
+ ) => {
+ let states: HassEntity[] = [];
+
+ if (!hass) {
+ return [];
+ }
+ let entityIds = Object.keys(hass.states);
+
+ if (domainFilter) {
+ entityIds = entityIds.filter(
+ (eid) => eid.substr(0, eid.indexOf(".")) === domainFilter
+ );
+ }
+
+ states = entityIds.sort().map((key) => hass!.states[key]);
+
+ if (entityFilter) {
+ states = states.filter(
+ (stateObj) =>
+ // We always want to include the entity of the current value
+ stateObj.entity_id === this.value || entityFilter!(stateObj)
+ );
+ }
+ return states;
+ }
+ );
+
+ protected updated(changedProps: PropertyValues) {
+ super.updated(changedProps);
+
+ if (changedProps.has("hass") && !this._opened) {
+ this._hass = this.hass;
+ }
+ }
+
+ protected render(): TemplateResult | void {
+ const states = this._getStates(
+ this._hass,
+ this.domainFilter,
+ this.entityFilter
+ );
+
+ return html`
+
+
+ ${this.value
+ ? html`
+
+ Clear
+
+ `
+ : ""}
+ ${states.length > 0
+ ? html`
+
+ Toggle
+
+ `
+ : ""}
+
+
+ `;
+ }
+
+ private get _value() {
+ return this.value || "";
+ }
+
+ private _openedChanged(ev: PolymerChangedEvent) {
+ this._opened = ev.detail.value;
+ }
+
+ private _valueChanged(ev: PolymerChangedEvent) {
+ const newValue = ev.detail.value;
+ if (newValue !== this._value) {
+ this.value = ev.detail.value;
+ setTimeout(() => {
+ fireEvent(this, "value-changed", { value: this.value });
+ fireEvent(this, "change");
+ }, 0);
+ }
+ }
+
+ static get styles(): CSSResult {
+ return css`
+ paper-input > paper-icon-button {
+ width: 24px;
+ height: 24px;
+ padding: 2px;
+ color: var(--secondary-text-color);
+ }
+ [hidden] {
+ display: none;
+ }
+ `;
+ }
+}
+
+customElements.define("ha-entity-picker", HaEntityPicker);
diff --git a/src/components/ha-card.js b/src/components/ha-card.js
deleted file mode 100644
index 44e58f43e9..0000000000
--- a/src/components/ha-card.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import "@polymer/paper-styles/element-styles/paper-material-styles";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-class HaCard extends PolymerElement {
- static get template() {
- return html`
-
-
-
-
[[_computeLabel(stateObj.state, _interceptable)]] [[_computeLabel(stateObj.state, _interceptable)]]
`;
}
diff --git a/src/components/user/ha-user-badge.ts b/src/components/user/ha-user-badge.ts
new file mode 100644
index 0000000000..a4bb8a5a31
--- /dev/null
+++ b/src/components/user/ha-user-badge.ts
@@ -0,0 +1,77 @@
+import {
+ LitElement,
+ TemplateResult,
+ css,
+ CSSResult,
+ html,
+ property,
+ customElement,
+} from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
+import { User } from "../../data/auth";
+import { CurrentUser } from "../../types";
+
+const computeInitials = (name: string) => {
+ if (!name) {
+ return "user";
+ }
+ return (
+ name
+ .trim()
+ // Split by space and take first 3 words
+ .split(" ")
+ .slice(0, 3)
+ // Of each word, take first letter
+ .map((s) => s.substr(0, 1))
+ .join("")
+ );
+};
+
+@customElement("ha-user-badge")
+class StateBadge extends LitElement {
+ @property() public user?: User | CurrentUser;
+
+ protected render(): TemplateResult | void {
+ const user = this.user;
+
+ const initials = user ? computeInitials(user.name) : "?";
+
+ return html`
+
+
+
+ No user
+
+ ${this._sortedUsers(this.users).map(
+ (user) => html`
+
+
+ `
+ )}
+
+
+ `;
+ }
+
+ private get _value() {
+ return this.value || "";
+ }
+
+ protected firstUpdated(changedProps) {
+ super.firstUpdated(changedProps);
+ if (this.users === undefined) {
+ fetchUsers(this.hass!).then((users) => {
+ this.users = users;
+ });
+ }
+ }
+
+ private _userChanged(ev) {
+ const newValue = ev.detail.item.dataset.userId;
+
+ if (newValue !== this._value) {
+ this.value = ev.detail.value;
+ setTimeout(() => {
+ fireEvent(this, "value-changed", { value: newValue });
+ fireEvent(this, "change");
+ }, 0);
+ }
+ }
+
+ static get styles(): CSSResult {
+ return css`
+ :host {
+ display: inline-block;
+ }
+ paper-dropdown-menu-light {
+ display: block;
+ }
+ paper-listbox {
+ min-width: 200px;
+ }
+ paper-icon-item {
+ cursor: pointer;
+ }
+ `;
+ }
+}
+
+customElements.define("ha-user-picker", HaEntityPicker);
diff --git a/src/data/auth.ts b/src/data/auth.ts
index 52c3af9099..4ec1e57146 100644
--- a/src/data/auth.ts
+++ b/src/data/auth.ts
@@ -1,5 +1,26 @@
+import { HomeAssistant } from "../types";
+
export interface AuthProvider {
name: string;
id: string;
type: string;
}
+
+interface Credential {
+ type: string;
+}
+
+export interface User {
+ id: string;
+ name: string;
+ is_owner: boolean;
+ is_active: boolean;
+ system_generated: boolean;
+ group_ids: string[];
+ credentials: Credential[];
+}
+
+export const fetchUsers = async (hass: HomeAssistant) =>
+ hass.callWS({
+ type: "config/auth/list",
+ });
diff --git a/src/data/camera.ts b/src/data/camera.ts
new file mode 100644
index 0000000000..cde6abb596
--- /dev/null
+++ b/src/data/camera.ts
@@ -0,0 +1,12 @@
+import { HomeAssistant } from "../types";
+
+export interface CameraThumbnail {
+ content_type: string;
+ content: string;
+}
+
+export const fetchThumbnail = (hass: HomeAssistant, entityId: string) =>
+ hass.callWS({
+ type: "camera_thumbnail",
+ entity_id: entityId,
+ });
diff --git a/src/data/lovelace.ts b/src/data/lovelace.ts
index 84edaa0472..fa638acb85 100644
--- a/src/data/lovelace.ts
+++ b/src/data/lovelace.ts
@@ -5,7 +5,6 @@ export interface LovelaceConfig {
views: LovelaceViewConfig[];
background?: string;
resources?: Array<{ type: "css" | "js" | "module" | "html"; url: string }>;
- excluded_entities?: string[];
}
export interface LovelaceViewConfig {
@@ -34,7 +33,10 @@ export interface ToggleActionConfig {
export interface CallServiceActionConfig {
action: "call-service";
service: string;
- service_data?: { [key: string]: any };
+ service_data?: {
+ entity_id?: string | [string];
+ [key: string]: any;
+ };
}
export interface NavigateActionConfig {
diff --git a/src/data/ws-user.ts b/src/data/ws-user.ts
index 66be784eb8..2e171b8dab 100644
--- a/src/data/ws-user.ts
+++ b/src/data/ws-user.ts
@@ -3,12 +3,17 @@ import {
Connection,
getCollection,
} from "home-assistant-js-websocket";
-import { User } from "../types";
+import { CurrentUser } from "../types";
export const userCollection = (conn: Connection) =>
- getCollection(conn, "_usr", () => getUser(conn) as Promise, undefined);
+ getCollection(
+ conn,
+ "_usr",
+ () => getUser(conn) as Promise,
+ undefined
+ );
export const subscribeUser = (
conn: Connection,
- onChange: (user: User) => void
+ onChange: (user: CurrentUser) => void
) => userCollection(conn).subscribe(onChange);
diff --git a/src/data/zha.ts b/src/data/zha.ts
index f5a67dbb12..8c50b82f3c 100644
--- a/src/data/zha.ts
+++ b/src/data/zha.ts
@@ -7,8 +7,19 @@ export interface ZHADeviceEntity extends HassEntity {
};
}
-export interface ZHAEntities {
- [key: string]: HassEntity[];
+export interface ZHAEntityReference extends HassEntity {
+ name: string;
+}
+
+export interface ZHADevice {
+ name: string;
+ ieee: string;
+ manufacturer: string;
+ model: string;
+ quirk_applied: boolean;
+ quirk_class: string;
+ entities: ZHAEntityReference[];
+ manufacturer_code: number;
}
export interface Attribute {
@@ -19,6 +30,7 @@ export interface Attribute {
export interface Cluster {
name: string;
id: number;
+ endpoint_id: number;
type: string;
}
@@ -29,7 +41,8 @@ export interface Command {
}
export interface ReadAttributeServiceData {
- entity_id: string;
+ ieee: string;
+ endpoint_id: number;
cluster_id: number;
cluster_type: string;
attribute: number;
@@ -41,64 +54,60 @@ export const reconfigureNode = (
ieeeAddress: string
): Promise =>
hass.callWS({
- type: "zha/nodes/reconfigure",
+ type: "zha/devices/reconfigure",
ieee: ieeeAddress,
});
export const fetchAttributesForCluster = (
hass: HomeAssistant,
- entityId: string,
ieeeAddress: string,
+ endpointId: number,
clusterId: number,
clusterType: string
): Promise =>
hass.callWS({
- type: "zha/entities/clusters/attributes",
- entity_id: entityId,
+ type: "zha/devices/clusters/attributes",
ieee: ieeeAddress,
+ endpoint_id: endpointId,
cluster_id: clusterId,
cluster_type: clusterType,
});
+export const fetchDevices = (hass: HomeAssistant): Promise =>
+ hass.callWS({
+ type: "zha/devices",
+ });
+
export const readAttributeValue = (
hass: HomeAssistant,
data: ReadAttributeServiceData
): Promise => {
return hass.callWS({
...data,
- type: "zha/entities/clusters/attributes/value",
+ type: "zha/devices/clusters/attributes/value",
});
};
export const fetchCommandsForCluster = (
hass: HomeAssistant,
- entityId: string,
ieeeAddress: string,
+ endpointId: number,
clusterId: number,
clusterType: string
): Promise =>
hass.callWS({
- type: "zha/entities/clusters/commands",
- entity_id: entityId,
+ type: "zha/devices/clusters/commands",
ieee: ieeeAddress,
+ endpoint_id: endpointId,
cluster_id: clusterId,
cluster_type: clusterType,
});
export const fetchClustersForZhaNode = (
hass: HomeAssistant,
- entityId: string,
ieeeAddress: string
): Promise =>
hass.callWS({
- type: "zha/entities/clusters",
- entity_id: entityId,
+ type: "zha/devices/clusters",
ieee: ieeeAddress,
});
-
-export const fetchEntitiesForZhaNode = (
- hass: HomeAssistant
-): Promise =>
- hass.callWS({
- type: "zha/entities",
- });
diff --git a/src/dialogs/ha-store-auth-card.js b/src/dialogs/ha-store-auth-card.js
index 9284e175f0..d63d805498 100644
--- a/src/dialogs/ha-store-auth-card.js
+++ b/src/dialogs/ha-store-auth-card.js
@@ -18,6 +18,10 @@ class HaStoreAuth extends LocalizeMixin(PolymerElement) {
right: 16px;
}
+ .card-content {
+ color: var(--primary-text-color);
+ }
+
.card-actions {
text-align: right;
border-top: 0;
@@ -33,11 +37,11 @@ class HaStoreAuth extends LocalizeMixin(PolymerElement) {
diff --git a/src/dialogs/more-info/controls/more-info-alarm_control_panel.js b/src/dialogs/more-info/controls/more-info-alarm_control_panel.js
index 5f1d186474..900b1dc1d4 100644
--- a/src/dialogs/more-info/controls/more-info-alarm_control_panel.js
+++ b/src/dialogs/more-info/controls/more-info-alarm_control_panel.js
@@ -1,5 +1,5 @@
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-input/paper-input";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -27,15 +27,14 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(
display: flex;
flex-direction: column;
}
- .pad paper-button {
+ .pad mwc-button {
width: 80px;
}
- .actions paper-button {
+ .actions mwc-button {
min-width: 160px;
margin-bottom: 16px;
- color: var(--primary-color);
}
- paper-button.disarm {
+ mwc-button.disarm {
color: var(--google-red-500);
}
@@ -51,87 +50,87 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(
@@ -139,7 +138,7 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(
+
+ `;
+ }
+
+ private _backTapped(): void {
+ history.back();
+ }
+
+ static get styles(): CSSResultArray {
+ return [
+ css`
+ .content {
+ height: calc(100% - 64px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hass-error-screen": HassErrorScreen;
+ }
+}
diff --git a/src/layouts/hass-loading-screen.js b/src/layouts/hass-loading-screen.js
deleted file mode 100644
index d97813833b..0000000000
--- a/src/layouts/hass-loading-screen.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-spinner/paper-spinner-lite";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/ha-menu-button";
-
-class HassLoadingScreen extends PolymerElement {
- static get template() {
- return html`
-
-
-
+
+
+
+
+
+
+
+
+ `;
+ }
+
+ private _backTapped(): void {
+ history.back();
+ }
+
+ static get styles(): CSSResult {
+ return haStyle;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hass-subpage": HassSubpage;
+ }
+}
diff --git a/src/layouts/partial-panel-resolver.ts b/src/layouts/partial-panel-resolver.ts
index db43495ebb..3503c79a2c 100644
--- a/src/layouts/partial-panel-resolver.ts
+++ b/src/layouts/partial-panel-resolver.ts
@@ -1,6 +1,7 @@
import { LitElement, html, PropertyValues, property } from "lit-element";
import "./hass-loading-screen";
+import "./hass-error-screen";
import { HomeAssistant, Panel, PanelElement, Route } from "../types";
// Cache of panel loading promises.
@@ -122,11 +123,10 @@ class PartialPanelResolver extends LitElement {
if (this._error) {
return html`
diff --git a/src/panels/config/area_registry/dialog-area-registry-detail.ts b/src/panels/config/area_registry/dialog-area-registry-detail.ts
index bf8e0d8425..4fd01bf688 100644
--- a/src/panels/config/area_registry/dialog-area-registry-detail.ts
+++ b/src/panels/config/area_registry/dialog-area-registry-detail.ts
@@ -12,7 +12,7 @@ import "@polymer/paper-input/paper-input";
import { AreaRegistryDetailDialogParams } from "./show-dialog-area-registry-detail";
import { PolymerChangedEvent } from "../../../polymer-types";
-import { haStyleDialog } from "../../../resources/ha-style";
+import { haStyleDialog } from "../../../resources/styles";
import { HomeAssistant } from "../../../types";
import { AreaRegistryEntryMutableParams } from "../../../data/area_registry";
@@ -51,7 +51,13 @@ class DialogAreaDetail extends LitElement {
opened
@opened-changed="${this._openedChanged}"
>
-
+
+ `
+ )}
+
+
+ `;
+ }
+
+ private _entityFilter: HaEntityPickerEntityFilterFunc = (
+ stateObj: HassEntity
+ ) => !this.value || !this.value.includes(stateObj.entity_id);
+
+ private get _currentEntities() {
+ return this.value || [];
+ }
+
+ private async _updateEntities(entities) {
+ fireEvent(this, "value-changed", {
+ value: entities,
+ });
+
+ this.value = entities;
+ }
+
+ private _entityChanged(event: PolymerChangedEvent[[_computeStateName(item)]]
- [[item.entity_id]]
- [[_computeStateName(item)]]
+ [[item.entity_id]]
+ [[header]]
-
- ${this.header}
+ Home Assistant
${hass.user
? html`
- 2,
- })}"
- >
- 2,
+ })}"
+ >
+ ${initials}
+
+ `;
+ }
+
+ static get styles(): CSSResult {
+ return css`
+ .profile-badge {
+ display: inline-block;
+ box-sizing: border-box;
+ width: 40px;
+ line-height: 40px;
+ border-radius: 50%;
+ text-align: center;
+ background-color: var(--light-primary-color);
+ text-decoration: none;
+ color: var(--primary-text-color);
+ overflow: hidden;
+ }
+
+ .profile-badge.long {
+ font-size: 80%;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-user-badge": StateBadge;
+ }
+}
diff --git a/src/components/user/ha-user-picker.ts b/src/components/user/ha-user-picker.ts
new file mode 100644
index 0000000000..9fcc6db530
--- /dev/null
+++ b/src/components/user/ha-user-picker.ts
@@ -0,0 +1,104 @@
+import "@polymer/paper-icon-button/paper-icon-button";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-item/paper-icon-item";
+import "@polymer/paper-item/paper-item-body";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
+import "@polymer/paper-listbox/paper-listbox";
+import memoizeOne from "memoize-one";
+import {
+ LitElement,
+ TemplateResult,
+ html,
+ css,
+ CSSResult,
+ property,
+} from "lit-element";
+import { HomeAssistant } from "../../types";
+import { fireEvent } from "../../common/dom/fire_event";
+import { User, fetchUsers } from "../../data/auth";
+import compare from "../../common/string/compare";
+
+class HaEntityPicker extends LitElement {
+ public hass?: HomeAssistant;
+ @property() public label?: string;
+ @property() public value?: string;
+ @property() public users?: User[];
+
+ private _sortedUsers = memoizeOne((users?: User[]) => {
+ if (!users || users.length === 1) {
+ return users || [];
+ }
+ const sorted = [...users];
+ sorted.sort((a, b) => compare(a.name, b.name));
+ return sorted;
+ });
+
+ protected render(): TemplateResult | void {
+ return html`
+ [[localize('ui.auth_store.ask')]]
- [[localize('ui.auth_store.decline')]] [[localize('ui.auth_store.decline')]]
- [[localize('ui.auth_store.confirm')]] [[localize('ui.auth_store.confirm')]]
- 1 1
- 4 4
- 7 7
- 2 2
- 5 5
- 8 8
- 0 0
- 3 3
- 6 6
- 9 9
-
[[localize('ui.card.alarm_control_panel.clear_code')]]
-
+
-
[[localize('ui.card.alarm_control_panel.disarm')]]
-
+
-
[[localize('ui.card.alarm_control_panel.arm_home')]]
-
-
+
[[localize('ui.card.alarm_control_panel.arm_away')]]
-
+
`;
diff --git a/src/dialogs/more-info/controls/more-info-automation.js b/src/dialogs/more-info/controls/more-info-automation.js
index d65471f87d..d766184ee1 100644
--- a/src/dialogs/more-info/controls/more-info-automation.js
+++ b/src/dialogs/more-info/controls/more-info-automation.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -10,10 +10,6 @@ class MoreInfoAutomation extends LocalizeMixin(PolymerElement) {
static get template() {
return html`
-
-
-
-
- `;
- }
-
- static get properties() {
- return {
- title: {
- type: String,
- value: "Home Assistant",
- },
-
- error: {
- type: String,
- value: "Oops! It looks like something went wrong.",
- },
- };
- }
-
- backTapped() {
- history.back();
- }
-}
-
-customElements.define("hass-error-screen", HassErrorScreen);
diff --git a/src/layouts/hass-error-screen.ts b/src/layouts/hass-error-screen.ts
new file mode 100644
index 0000000000..ac382d2b37
--- /dev/null
+++ b/src/layouts/hass-error-screen.ts
@@ -0,0 +1,54 @@
+import {
+ LitElement,
+ CSSResultArray,
+ css,
+ TemplateResult,
+ html,
+ property,
+ customElement,
+} from "lit-element";
+import "@material/mwc-button";
+import "./hass-subpage";
+
+@customElement("hass-error-screen")
+class HassErrorScreen extends LitElement {
+ @property()
+ public error?: string;
+
+ protected render(): TemplateResult | void {
+ return html`
+ [[title]]
- go back
- [[error]]
-
+
+ go back
+
+
+
-
-
-
- `;
- }
-
- static get properties() {
- return {
- narrow: {
- type: Boolean,
- value: false,
- },
-
- showMenu: {
- type: Boolean,
- value: false,
- },
-
- title: {
- type: String,
- value: "",
- },
- };
- }
-}
-
-customElements.define("hass-loading-screen", HassLoadingScreen);
diff --git a/src/layouts/hass-loading-screen.ts b/src/layouts/hass-loading-screen.ts
new file mode 100644
index 0000000000..f67d376e1f
--- /dev/null
+++ b/src/layouts/hass-loading-screen.ts
@@ -0,0 +1,56 @@
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-spinner/paper-spinner-lite";
+import {
+ LitElement,
+ TemplateResult,
+ html,
+ property,
+ CSSResultArray,
+ css,
+ customElement,
+} from "lit-element";
+import "../components/ha-menu-button";
+import { haStyle } from "../resources/styles";
+
+@customElement("hass-loading-screen")
+class HassLoadingScreen extends LitElement {
+ @property({ type: Boolean })
+ public narrow?: boolean;
+
+ @property({ type: Boolean })
+ public showMenu?: boolean;
+
+ protected render(): TemplateResult | void {
+ return html`
+ [[title]]
-
-
-
+
+ `;
+ }
+
+ static get styles(): CSSResultArray {
+ return [
+ haStyle,
+ css`
+ .content {
+ height: calc(100% - 64px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hass-loading-screen": HassLoadingScreen;
+ }
+}
diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
new file mode 100644
index 0000000000..8895df0e74
--- /dev/null
+++ b/src/layouts/hass-subpage.ts
@@ -0,0 +1,52 @@
+import "@polymer/app-layout/app-header-layout/app-header-layout";
+import "@polymer/app-layout/app-header/app-header";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-icon-button/paper-icon-button";
+import {
+ LitElement,
+ property,
+ TemplateResult,
+ html,
+ customElement,
+ CSSResult,
+} from "lit-element";
+import { haStyle } from "../resources/styles";
+
+@customElement("hass-subpage")
+class HassSubpage extends LitElement {
+ @property()
+ public header?: string;
+
+ protected render(): TemplateResult | void {
+ return html`
+ ${this.header}
+
-
${this._params.entry ? this._params.entry.name : "New Area"}
++ ${this._params.entry + ? this._params.entry.name + : this.hass.localize( + "ui.panel.config.area_registry.editor.default_name" + )} +
- Looks like you have no areas yet!
-
- CREATE AREA
+ ${this.hass.localize(
+ "ui.panel.config.area_registry.picker.no_areas"
+ )}
+
+ ${this.hass.localize(
+ "ui.panel.config.area_registry.picker.create_area"
+ )}
+
`
: html``}
diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts
index aca9d44726..b2ad95173d 100644
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/src/panels/config/automation/ha-automation-editor.ts
@@ -11,6 +11,7 @@ import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-fab/paper-fab";
+import { classMap } from "lit-html/directives/class-map";
import { h, render } from "preact";
@@ -21,10 +22,11 @@ import Automation from "../js/automation";
import unmountPreact from "../../../common/preact/unmount";
import computeStateName from "../../../common/entity/compute_state_name";
-import { haStyle } from "../../../resources/ha-style";
+import { haStyle } from "../../../resources/styles";
import { HomeAssistant } from "../../../types";
import { AutomationEntity, AutomationConfig } from "../../../data/automation";
import { navigate } from "../../../common/navigate";
+import { computeRTL } from "../../../common/util/compute_rtl";
function AutomationEditor(mountEl, props, mergeEl) {
return render(h(Automation, props), mountEl, mergeEl);
@@ -92,7 +94,12 @@ class HaAutomationEditor extends LitElement {
${this._errors}
`
: ""}
-
+
@@ -99,10 +96,10 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
diff --git a/src/panels/config/cloud/ha-config-cloud-forgot-password.js b/src/panels/config/cloud/ha-config-cloud-forgot-password.js
index 847ebfcb9b..1e8668c756 100644
--- a/src/panels/config/cloud/ha-config-cloud-forgot-password.js
+++ b/src/panels/config/cloud/ha-config-cloud-forgot-password.js
@@ -17,6 +17,7 @@ class HaConfigCloudForgotPassword extends EventsMixin(PolymerElement) {
@@ -55,12 +58,13 @@ class HaUserEditor extends EventsMixin(
diff --git a/src/panels/dev-info/dialog-system-log-detail.ts b/src/panels/dev-info/dialog-system-log-detail.ts
index 10dcfdfff8..52666522ed 100644
--- a/src/panels/dev-info/dialog-system-log-detail.ts
+++ b/src/panels/dev-info/dialog-system-log-detail.ts
@@ -11,7 +11,7 @@ import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import { SystemLogDetailDialogParams } from "./show-dialog-system-log-detail";
import { PolymerChangedEvent } from "../../polymer-types";
-import { haStyleDialog } from "../../resources/ha-style";
+import { haStyleDialog } from "../../resources/styles";
class DialogSystemLogDetail extends LitElement {
private _params?: SystemLogDetailDialogParams;
diff --git a/src/panels/dev-info/error-log-card.ts b/src/panels/dev-info/error-log-card.ts
index 88e3208c7d..46b4274492 100644
--- a/src/panels/dev-info/error-log-card.ts
+++ b/src/panels/dev-info/error-log-card.ts
@@ -7,7 +7,7 @@ import {
TemplateResult,
} from "lit-element";
import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import { HomeAssistant } from "../../types";
import { fetchErrorLog } from "../../data/error_log";
@@ -34,9 +34,9 @@ class ErrorLogCard extends LitElement {
>
`
: html`
-
-
[[localize('ui.panel.config.users.editor.delete_user')]]
-
+
Unable to remove system generated users.
diff --git a/src/panels/config/zha/functions.ts b/src/panels/config/zha/functions.ts
new file mode 100644
index 0000000000..e5475280ea
--- /dev/null
+++ b/src/panels/config/zha/functions.ts
@@ -0,0 +1,7 @@
+export const formatAsPaddedHex = (value: string | number): string => {
+ let hex = value;
+ if (typeof value === "string") {
+ hex = parseInt(value, 16);
+ }
+ return "0x" + hex.toString(16).padStart(4, "0");
+};
diff --git a/src/panels/config/zha/ha-config-zha.ts b/src/panels/config/zha/ha-config-zha.ts
index 25b61a1f2a..ef9c06b59e 100755
--- a/src/panels/config/zha/ha-config-zha.ts
+++ b/src/panels/config/zha/ha-config-zha.ts
@@ -13,13 +13,9 @@ import { HASSDomEvent } from "../../../common/dom/fire_event";
import { Cluster } from "../../../data/zha";
import "../../../layouts/ha-app-layout";
import "../../../components/ha-paper-icon-button-arrow-prev";
-import { haStyle } from "../../../resources/ha-style";
+import { haStyle } from "../../../resources/styles";
import { HomeAssistant } from "../../../types";
-import {
- ZHAClusterSelectedParams,
- ZHAEntitySelectedParams,
- ZHANodeSelectedParams,
-} from "./types";
+import { ZHAClusterSelectedParams, ZHANodeSelectedParams } from "./types";
import "./zha-cluster-attributes";
import "./zha-cluster-commands";
import "./zha-network";
@@ -30,14 +26,12 @@ export class HaConfigZha extends LitElement {
public isWide?: boolean;
private _selectedNode?: HassEntity;
private _selectedCluster?: Cluster;
- private _selectedEntity?: HassEntity;
static get properties(): PropertyDeclarations {
return {
hass: {},
isWide: {},
_selectedCluster: {},
- _selectedEntity: {},
_selectedNode: {},
};
}
@@ -64,7 +58,6 @@ export class HaConfigZha extends LitElement {
.hass="${this.hass}"
@zha-cluster-selected="${this._onClusterSelected}"
@zha-node-selected="${this._onNodeSelected}"
- @zha-entity-selected="${this._onEntitySelected}"
>
${this._selectedCluster
? html`
@@ -72,7 +65,6 @@ export class HaConfigZha extends LitElement {
.isWide="${this.isWide}"
.hass="${this.hass}"
.selectedNode="${this._selectedNode}"
- .selectedEntity="${this._selectedEntity}"
.selectedCluster="${this._selectedCluster}"
>
@@ -80,7 +72,6 @@ export class HaConfigZha extends LitElement {
.isWide="${this.isWide}"
.hass="${this.hass}"
.selectedNode="${this._selectedNode}"
- .selectedEntity="${this._selectedEntity}"
.selectedCluster="${this._selectedCluster}"
>
`
@@ -100,13 +91,6 @@ export class HaConfigZha extends LitElement {
): void {
this._selectedNode = selectedNodeEvent.detail.node;
this._selectedCluster = undefined;
- this._selectedEntity = undefined;
- }
-
- private _onEntitySelected(
- selectedEntityEvent: HASSDomEvent
- ): void {
- this._selectedEntity = selectedEntityEvent.detail.entity;
}
static get styles(): CSSResult[] {
diff --git a/src/panels/config/zha/types.ts b/src/panels/config/zha/types.ts
index 23bc9f74d7..1f006964d7 100644
--- a/src/panels/config/zha/types.ts
+++ b/src/panels/config/zha/types.ts
@@ -1,4 +1,3 @@
-import { HassEntity } from "home-assistant-js-websocket";
import { ZHADeviceEntity, Cluster } from "../../../data/zha";
export interface PickerTarget extends EventTarget {
@@ -17,7 +16,8 @@ export interface ChangeEvent {
}
export interface SetAttributeServiceData {
- entity_id: string;
+ ieee: string;
+ endpoint_id: number;
cluster_id: number;
cluster_type: string;
attribute: number;
@@ -26,17 +26,14 @@ export interface SetAttributeServiceData {
}
export interface IssueCommandServiceData {
- entity_id: string;
+ ieee: string;
+ endpoint_id: number;
cluster_id: number;
cluster_type: string;
command: number;
command_type: string;
}
-export interface ZHAEntitySelectedParams {
- entity: HassEntity;
-}
-
export interface ZHANodeSelectedParams {
node: ZHADeviceEntity;
}
diff --git a/src/panels/config/zha/zha-cluster-attributes.ts b/src/panels/config/zha/zha-cluster-attributes.ts
index d19354cdcd..c59126cbf2 100644
--- a/src/panels/config/zha/zha-cluster-attributes.ts
+++ b/src/panels/config/zha/zha-cluster-attributes.ts
@@ -7,10 +7,9 @@ import {
CSSResult,
css,
} from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-icon-button/paper-icon-button";
-import { HassEntity } from "home-assistant-js-websocket";
import "../../../components/buttons/ha-call-service-button";
import "../../../components/ha-service-description";
import {
@@ -19,9 +18,9 @@ import {
fetchAttributesForCluster,
ReadAttributeServiceData,
readAttributeValue,
- ZHADeviceEntity,
+ ZHADevice,
} from "../../../data/zha";
-import { haStyle } from "../../../resources/ha-style";
+import { haStyle } from "../../../resources/styles";
import { HomeAssistant } from "../../../types";
import "../ha-config-section";
import {
@@ -29,13 +28,13 @@ import {
ItemSelectedEvent,
SetAttributeServiceData,
} from "./types";
+import { formatAsPaddedHex } from "./functions";
export class ZHAClusterAttributes extends LitElement {
public hass?: HomeAssistant;
public isWide?: boolean;
public showHelp: boolean;
- public selectedNode?: HassEntity;
- public selectedEntity?: ZHADeviceEntity;
+ public selectedNode?: ZHADevice;
public selectedCluster?: Cluster;
private _attributes: Attribute[];
private _selectedAttributeIndex: number;
@@ -57,7 +56,6 @@ export class ZHAClusterAttributes extends LitElement {
isWide: {},
showHelp: {},
selectedNode: {},
- selectedEntity: {},
selectedCluster: {},
_attributes: {},
_selectedAttributeIndex: {},
@@ -105,7 +103,10 @@ export class ZHAClusterAttributes extends LitElement {
${this._attributes.map(
(entry) => html`
${entry.name + " (id: " + entry.id + ")"} ${entry.name +
+ " (id: " +
+ formatAsPaddedHex(entry.id) +
+ ")"}
`
)}
@@ -148,8 +149,8 @@ export class ZHAClusterAttributes extends LitElement {
>
- Get Zigbee Attribute Get Zigbee Attribute
{
- if (this.selectedEntity && this.selectedCluster && this.hass) {
+ if (this.selectedNode && this.selectedCluster && this.hass) {
this._attributes = await fetchAttributesForCluster(
this.hass,
- this.selectedEntity!.entity_id,
- this.selectedEntity!.device_info!.identifiers[0][1],
+ this.selectedNode!.ieee,
+ this.selectedCluster!.endpoint_id,
this.selectedCluster!.id,
this.selectedCluster!.type
);
+ this._attributes.sort((a, b) => {
+ return a.name.localeCompare(b.name);
+ });
}
}
private _computeReadAttributeServiceData():
| ReadAttributeServiceData
| undefined {
- if (!this.selectedEntity || !this.selectedCluster || !this.selectedNode) {
+ if (!this.selectedCluster || !this.selectedNode) {
return;
}
return {
- entity_id: this.selectedEntity!.entity_id,
+ ieee: this.selectedNode!.ieee,
+ endpoint_id: this.selectedCluster!.endpoint_id,
cluster_id: this.selectedCluster!.id,
cluster_type: this.selectedCluster!.type,
attribute: this._attributes[this._selectedAttributeIndex].id,
manufacturer: this._manufacturerCodeOverride
? parseInt(this._manufacturerCodeOverride as string, 10)
- : this.selectedNode!.attributes.manufacturer_code,
+ : this.selectedNode!.manufacturer_code,
};
}
private _computeSetAttributeServiceData():
| SetAttributeServiceData
| undefined {
- if (!this.selectedEntity || !this.selectedCluster || !this.selectedNode) {
+ if (!this.selectedCluster || !this.selectedNode) {
return;
}
return {
- entity_id: this.selectedEntity!.entity_id,
+ ieee: this.selectedNode!.ieee,
+ endpoint_id: this.selectedCluster!.endpoint_id,
cluster_id: this.selectedCluster!.id,
cluster_type: this.selectedCluster!.type,
attribute: this._attributes[this._selectedAttributeIndex].id,
value: this._attributeValue,
manufacturer: this._manufacturerCodeOverride
? parseInt(this._manufacturerCodeOverride as string, 10)
- : this.selectedNode!.attributes.manufacturer_code,
+ : this.selectedNode!.manufacturer_code,
};
}
@@ -306,8 +312,7 @@ export class ZHAClusterAttributes extends LitElement {
[hidden] {
display: none;
}
-
- `,
+ `,
];
}
}
diff --git a/src/panels/config/zha/zha-cluster-commands.ts b/src/panels/config/zha/zha-cluster-commands.ts
index 398a7ff3d6..28a68af9ab 100644
--- a/src/panels/config/zha/zha-cluster-commands.ts
+++ b/src/panels/config/zha/zha-cluster-commands.ts
@@ -8,16 +8,15 @@ import {
css,
} from "lit-element";
import "@polymer/paper-card/paper-card";
-import { HassEntity } from "home-assistant-js-websocket";
import "../../../components/buttons/ha-call-service-button";
import "../../../components/ha-service-description";
import {
Cluster,
Command,
fetchCommandsForCluster,
- ZHADeviceEntity,
+ ZHADevice,
} from "../../../data/zha";
-import { haStyle } from "../../../resources/ha-style";
+import { haStyle } from "../../../resources/styles";
import { HomeAssistant } from "../../../types";
import "../ha-config-section";
import {
@@ -25,12 +24,12 @@ import {
IssueCommandServiceData,
ItemSelectedEvent,
} from "./types";
+import { formatAsPaddedHex } from "./functions";
export class ZHAClusterCommands extends LitElement {
public hass?: HomeAssistant;
public isWide?: boolean;
- public selectedNode?: HassEntity;
- public selectedEntity?: ZHADeviceEntity;
+ public selectedNode?: ZHADevice;
public selectedCluster?: Cluster;
private _showHelp: boolean;
private _commands: Command[];
@@ -50,7 +49,6 @@ export class ZHAClusterCommands extends LitElement {
hass: {},
isWide: {},
selectedNode: {},
- selectedEntity: {},
selectedCluster: {},
_showHelp: {},
_commands: {},
@@ -97,7 +95,10 @@ export class ZHAClusterCommands extends LitElement {
${this._commands.map(
(entry) => html`
${entry.name + " (id: " + entry.id + ")"} ${entry.name +
+ " (id: " +
+ formatAsPaddedHex(entry.id) +
+ ")"}
`
)}
@@ -146,25 +147,29 @@ export class ZHAClusterCommands extends LitElement {
}
private async _fetchCommandsForCluster(): Promise {
- if (this.selectedEntity && this.selectedCluster && this.hass) {
+ if (this.selectedNode && this.selectedCluster && this.hass) {
this._commands = await fetchCommandsForCluster(
this.hass,
- this.selectedEntity!.entity_id,
- this.selectedEntity!.device_info!.identifiers[0][1],
+ this.selectedNode!.ieee,
+ this.selectedCluster!.endpoint_id,
this.selectedCluster!.id,
this.selectedCluster!.type
);
+ this._commands.sort((a, b) => {
+ return a.name.localeCompare(b.name);
+ });
}
}
private _computeIssueClusterCommandServiceData():
| IssueCommandServiceData
| undefined {
- if (!this.selectedEntity || !this.selectedCluster) {
+ if (!this.selectedNode || !this.selectedCluster) {
return;
}
return {
- entity_id: this.selectedEntity!.entity_id,
+ ieee: this.selectedNode!.ieee,
+ endpoint_id: this.selectedCluster!.endpoint_id,
cluster_id: this.selectedCluster!.id,
cluster_type: this.selectedCluster!.type,
command: this._commands[this._selectedCommandIndex].id,
@@ -257,8 +262,7 @@ export class ZHAClusterCommands extends LitElement {
[hidden] {
display: none;
}
-
- `,
+ `,
];
}
}
diff --git a/src/panels/config/zha/zha-clusters.ts b/src/panels/config/zha/zha-clusters.ts
index d580cc49c6..bbabf3e2fa 100644
--- a/src/panels/config/zha/zha-clusters.ts
+++ b/src/panels/config/zha/zha-clusters.ts
@@ -11,15 +11,12 @@ import "@polymer/paper-card/paper-card";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/buttons/ha-call-service-button";
import "../../../components/ha-service-description";
-import {
- Cluster,
- fetchClustersForZhaNode,
- ZHADeviceEntity,
-} from "../../../data/zha";
-import { haStyle } from "../../../resources/ha-style";
+import { Cluster, fetchClustersForZhaNode, ZHADevice } from "../../../data/zha";
+import { haStyle } from "../../../resources/styles";
import { HomeAssistant } from "../../../types";
import "../ha-config-section";
import { ItemSelectedEvent } from "./types";
+import { formatAsPaddedHex } from "./functions";
declare global {
// for fire event
@@ -31,14 +28,16 @@ declare global {
}
const computeClusterKey = (cluster: Cluster): string => {
- return `${cluster.name} (id: ${cluster.id}, type: ${cluster.type})`;
+ return `${cluster.name} (Endpoint id: ${
+ cluster.endpoint_id
+ }, Id: ${formatAsPaddedHex(cluster.id)}, Type: ${cluster.type})`;
};
export class ZHAClusters extends LitElement {
public hass?: HomeAssistant;
public isWide?: boolean;
public showHelp: boolean;
- public selectedEntity?: ZHADeviceEntity;
+ public selectedDevice?: ZHADevice;
private _selectedClusterIndex: number;
private _clusters: Cluster[];
@@ -54,14 +53,14 @@ export class ZHAClusters extends LitElement {
hass: {},
isWide: {},
showHelp: {},
- selectedEntity: {},
+ selectedDevice: {},
_selectedClusterIndex: {},
_clusters: {},
};
}
protected updated(changedProperties: PropertyValues): void {
- if (changedProperties.has("selectedEntity")) {
+ if (changedProperties.has("selectedDevice")) {
this._clusters = [];
this._selectedClusterIndex = -1;
fireEvent(this, "zha-cluster-selected", {
@@ -103,9 +102,11 @@ export class ZHAClusters extends LitElement {
if (this.hass) {
this._clusters = await fetchClustersForZhaNode(
this.hass,
- this.selectedEntity!.entity_id,
- this.selectedEntity!.device_info!.identifiers[0][1]
+ this.selectedDevice!.ieee
);
+ this._clusters.sort((a, b) => {
+ return a.name.localeCompare(b.name);
+ });
}
}
diff --git a/src/panels/config/zha/zha-device-card.ts b/src/panels/config/zha/zha-device-card.ts
new file mode 100644
index 0000000000..d68d724ecb
--- /dev/null
+++ b/src/panels/config/zha/zha-device-card.ts
@@ -0,0 +1,118 @@
+import {
+ html,
+ LitElement,
+ property,
+ TemplateResult,
+ CSSResult,
+ css,
+} from "lit-element";
+import "@polymer/paper-item/paper-icon-item";
+import "@polymer/paper-item/paper-item-body";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { haStyle } from "../../../resources/styles";
+import { HomeAssistant } from "../../../types";
+
+import "../../../components/entity/state-badge";
+import { ZHADevice } from "../../../data/zha";
+
+class ZHADeviceCard extends LitElement {
+ @property() public hass?: HomeAssistant;
+ @property() public narrow?: boolean;
+ @property() public device?: ZHADevice;
+
+ protected render(): TemplateResult | void {
+ return html`
+
+
+ `;
+ }
+
+ private _openMoreInfo(ev: MouseEvent): void {
+ fireEvent(this, "hass-more-info", {
+ entityId: (ev.currentTarget as any).entity.entity_id,
+ });
+ }
+
+ static get styles(): CSSResult[] {
+ return [
+ haStyle,
+ css`
+ :host(:not([narrow])) .device-entities {
+ max-height: 225px;
+ overflow: auto;
+ }
+ paper-card {
+ flex: 1 0 100%;
+ padding-bottom: 10px;
+ min-width: 0;
+ }
+ .device {
+ width: 30%;
+ }
+ .label {
+ font-weight: bold;
+ }
+ .info {
+ color: var(--secondary-text-color);
+ font-weight: bold;
+ }
+ dl dt {
+ float: left;
+ width: 100px;
+ text-align: left;
+ }
+ dt dd {
+ margin-left: 10px;
+ text-align: left;
+ }
+ paper-icon-item {
+ cursor: pointer;
+ padding-top: 4px;
+ padding-bottom: 4px;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "zha-device-card": ZHADeviceCard;
+ }
+}
+
+customElements.define("zha-device-card", ZHADeviceCard);
diff --git a/src/panels/config/zha/zha-entities.ts b/src/panels/config/zha/zha-entities.ts
deleted file mode 100644
index 9b6f373f07..0000000000
--- a/src/panels/config/zha/zha-entities.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-import {
- html,
- LitElement,
- PropertyDeclarations,
- PropertyValues,
- TemplateResult,
- CSSResult,
- css,
-} from "lit-element";
-import "@polymer/paper-button/paper-button";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import { HassEntity } from "home-assistant-js-websocket";
-import { fireEvent } from "../../../common/dom/fire_event";
-import { fetchEntitiesForZhaNode } from "../../../data/zha";
-import { haStyle } from "../../../resources/ha-style";
-import { HomeAssistant } from "../../../types";
-import { ItemSelectedEvent } from "./types";
-
-declare global {
- // for fire event
- interface HASSDomEvents {
- "zha-entity-selected": {
- entity?: HassEntity;
- };
- }
-}
-
-export class ZHAEntities extends LitElement {
- public hass?: HomeAssistant;
- public showHelp?: boolean;
- public selectedNode?: HassEntity;
- private _selectedEntityIndex: number;
- private _entities: HassEntity[];
-
- constructor() {
- super();
- this._entities = [];
- this._selectedEntityIndex = -1;
- }
-
- static get properties(): PropertyDeclarations {
- return {
- hass: {},
- showHelp: {},
- selectedNode: {},
- _selectedEntityIndex: {},
- _entities: {},
- };
- }
-
- protected updated(changedProperties: PropertyValues): void {
- if (changedProperties.has("selectedNode")) {
- this._entities = [];
- this._selectedEntityIndex = -1;
- fireEvent(this, "zha-entity-selected", {
- entity: undefined,
- });
- this._fetchEntitiesForZhaNode();
- }
- super.update(changedProperties);
- }
-
- protected render(): TemplateResult | void {
- return html`
- {
- if (this.hass) {
- const fetchedEntities = await fetchEntitiesForZhaNode(this.hass);
- this._entities = fetchedEntities[this.selectedNode!.attributes.ieee];
- }
- }
-
- private _selectedEntityChanged(event: ItemSelectedEvent): void {
- this._selectedEntityIndex = event.target!.selected;
- fireEvent(this, "zha-entity-selected", {
- entity: this._entities[this._selectedEntityIndex],
- });
- }
-
- private _showEntityInformation(): void {
- fireEvent(this, "hass-more-info", {
- entityId: this._entities[this._selectedEntityIndex].entity_id,
- });
- }
-
- static get styles(): CSSResult[] {
- return [
- haStyle,
- css`
- .flex {
- -ms-flex: 1 1 0.000000001px;
- -webkit-flex: 1;
- flex: 1;
- -webkit-flex-basis: 0.000000001px;
- flex-basis: 0.000000001px;
- }
-
- .node-picker {
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- -ms-flex-direction: row;
- -webkit-flex-direction: row;
- flex-direction: row;
- -ms-flex-align: center;
- -webkit-align-items: center;
- align-items: center;
- padding-left: 28px;
- padding-right: 28px;
- padding-bottom: 10px;
- }
- .actions {
- border-top: 1px solid #e8e8e8;
- padding: 5px 16px;
- position: relative;
- }
- .actions paper-button:not([disabled]) {
- color: var(--primary-color);
- font-weight: 500;
- }
- .helpText {
- color: grey;
- padding: 16px;
- }
- `,
- ];
- }
-}
-
-declare global {
- interface HTMLElementTagNameMap {
- "zha-entities": ZHAEntities;
- }
-}
-
-customElements.define("zha-entities", ZHAEntities);
diff --git a/src/panels/config/zha/zha-network.ts b/src/panels/config/zha/zha-network.ts
index bbd70a1629..87cf043838 100644
--- a/src/panels/config/zha/zha-network.ts
+++ b/src/panels/config/zha/zha-network.ts
@@ -6,12 +6,12 @@ import {
CSSResult,
css,
} from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-icon-button/paper-icon-button";
import "../../../components/buttons/ha-call-service-button";
import "../../../components/ha-service-description";
-import { haStyle } from "../../../resources/ha-style";
+import { haStyle } from "../../../resources/styles";
import { HomeAssistant } from "../../../types";
import "../ha-config-section";
@@ -102,8 +102,7 @@ export class ZHANetwork extends LitElement {
[hidden] {
display: none;
}
-
- `,
+ `,
];
}
}
diff --git a/src/panels/config/zha/zha-node.ts b/src/panels/config/zha/zha-node.ts
index 2c2a680b10..0cd4e6777e 100644
--- a/src/panels/config/zha/zha-node.ts
+++ b/src/panels/config/zha/zha-node.ts
@@ -4,36 +4,30 @@ import {
PropertyDeclarations,
TemplateResult,
CSSResult,
+ PropertyValues,
css,
} from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
-import { HassEntity } from "home-assistant-js-websocket";
-import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
-import computeStateName from "../../../common/entity/compute_state_name";
-import sortByName from "../../../common/entity/states_sort_by_name";
+import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/buttons/ha-call-service-button";
import "../../../components/ha-service-description";
-import { haStyle } from "../../../resources/ha-style";
+import { haStyle } from "../../../resources/styles";
import { HomeAssistant } from "../../../types";
import "../ha-config-section";
-import {
- ItemSelectedEvent,
- NodeServiceData,
- ZHAEntitySelectedParams,
-} from "./types";
+import { ItemSelectedEvent, NodeServiceData } from "./types";
import "./zha-clusters";
-import "./zha-entities";
-import { reconfigureNode } from "../../../data/zha";
+import "./zha-device-card";
+import { reconfigureNode, fetchDevices, ZHADevice } from "../../../data/zha";
declare global {
// for fire event
interface HASSDomEvents {
"zha-node-selected": {
- node?: HassEntity;
+ node?: ZHADevice;
};
}
}
@@ -43,10 +37,9 @@ export class ZHANode extends LitElement {
public isWide?: boolean;
private _showHelp: boolean;
private _selectedNodeIndex: number;
- private _selectedNode?: HassEntity;
- private _selectedEntity?: HassEntity;
+ private _selectedNode?: ZHADevice;
private _serviceData?: {};
- private _nodes: HassEntity[];
+ private _nodes: ZHADevice[];
constructor() {
super();
@@ -62,13 +55,31 @@ export class ZHANode extends LitElement {
_showHelp: {},
_selectedNodeIndex: {},
_selectedNode: {},
+ _entities: {},
_serviceData: {},
- _selectedEntity: {},
+ _nodes: {},
};
}
+ public firstUpdated(changedProperties: PropertyValues): void {
+ super.firstUpdated(changedProperties);
+ if (this._nodes.length === 0) {
+ this._fetchDevices();
+ }
+ this.addEventListener("hass-service-called", (ev) =>
+ this.serviceCalled(ev)
+ );
+ }
+
+ protected serviceCalled(ev): void {
+ // Check if this is for us
+ if (ev.detail.success && ev.detail.service === "remove") {
+ this._selectedNodeIndex = -1;
+ this._fetchDevices();
+ }
+ }
+
protected render(): TemplateResult | void {
- this._nodes = this._computeNodes(this.hass);
return html`
`;
@@ -123,11 +142,8 @@ export class ZHANode extends LitElement {
private _renderNodeActions(): TemplateResult {
return html`
Entity Information Entity Information
+
+
+ -
+
- IEEE: +
- ${this.device!.ieee} +
- Quirk applied: +
- ${this.device!.quirk_applied} +
- Quirk: +
- ${this.device!.quirk_class} +
+ ${this.device!.entities.map(
+ (entity) => html`
+
+
+
+
+ `
+ )}
+
+ ${entity.name}
+ ${entity.entity_id}
+
-
-
- ${this._entities.map(
- (entry) => html`
- ${entry.entity_id}
- `
- )}
-
-
-
- ${this.showHelp
- ? html`
-
- Select entity to view per-entity options
-
- `
- : ""}
- ${this._selectedEntityIndex !== -1
- ? html`
-
- Entity Information
-
- `
- : ""}
- `;
- }
-
- private async _fetchEntitiesForZhaNode(): Promise
@@ -94,12 +105,11 @@ export class ZHANode extends LitElement {
${this._nodes.map(
(entry) => html`
- ${this._computeSelectCaption(entry)}
+ ${entry.name}
`
)}
@@ -112,9 +122,18 @@ export class ZHANode extends LitElement {
`
: ""}
+ ${this._selectedNodeIndex !== -1
+ ? html`
+
- Node Information
- Reconfigure Node Reconfigure Node
${this._showHelp
? html`
@@ -158,22 +174,11 @@ export class ZHANode extends LitElement {
`;
}
- private _renderEntities(): TemplateResult {
- return html`
- {
if (this.hass) {
- await reconfigureNode(this.hass, this._selectedNode!.attributes.ieee);
+ await reconfigureNode(this.hass, this._selectedNode!.ieee);
}
}
- private _showNodeInformation(): void {
- fireEvent(this, "hass-more-info", {
- entityId: this._selectedNode!.entity_id,
- });
- }
-
private _computeNodeServiceData(): NodeServiceData {
return {
- ieee_address: this._selectedNode!.attributes.ieee,
+ ieee_address: this._selectedNode!.ieee,
};
}
- private _computeSelectCaption(stateObj: HassEntity): string {
- return (
- computeStateName(stateObj) + " (Node:" + stateObj.attributes.ieee + ")"
- );
- }
-
- private _computeNodes(hass?: HomeAssistant): HassEntity[] {
- if (hass) {
- return Object.keys(hass.states)
- .map((key) => hass.states[key])
- .filter((ent) => ent.entity_id.match("zha[.]"))
- .sort(sortByName);
- } else {
- return [];
- }
- }
-
- private _onEntitySelected(
- entitySelectedEvent: HASSDomEvent
- ): void {
- this._selectedEntity = entitySelectedEvent.detail.entity;
+ private async _fetchDevices() {
+ this._nodes = (await fetchDevices(this.hass!)).sort((a, b) => {
+ return a.name.localeCompare(b.name);
+ });
}
static get styles(): CSSResult[] {
@@ -287,6 +268,17 @@ export class ZHANode extends LitElement {
padding-bottom: 10px;
}
+ .card {
+ box-sizing: border-box;
+ display: flex;
+ flex: 1 0 300px;
+ min-width: 0;
+ max-width: 600px;
+ padding-left: 28px;
+ padding-right: 28px;
+ padding-bottom: 10px;
+ }
+
ha-service-description {
display: block;
color: grey;
diff --git a/src/panels/config/zwave/ha-config-zwave.js b/src/panels/config/zwave/ha-config-zwave.js
index 8a03b610ae..81f536dfb4 100644
--- a/src/panels/config/zwave/ha-config-zwave.js
+++ b/src/panels/config/zwave/ha-config-zwave.js
@@ -236,8 +236,8 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
hidden$="[[!showHelp]]"
>
- Node Information Node Information
@@ -277,8 +277,8 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
hidden$="[[!showHelp]]"
>
-
diff --git a/src/panels/config/zwave/zwave-log.js b/src/panels/config/zwave/zwave-log.js
index 3c3269e31c..a0524d08a9 100644
--- a/src/panels/config/zwave/zwave-log.js
+++ b/src/panels/config/zwave/zwave-log.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-checkbox/paper-checkbox";
import "@polymer/paper-input/paper-input";
@@ -42,8 +42,8 @@ class OzwLog extends EventsMixin(PolymerElement) {
- Load
- Tail
+ Load
+ Tail
`;
diff --git a/src/panels/dev-event/ha-panel-dev-event.js b/src/panels/dev-event/ha-panel-dev-event.js
index 9fddd75adf..8ad0511d49 100644
--- a/src/panels/dev-event/ha-panel-dev-event.js
+++ b/src/panels/dev-event/ha-panel-dev-event.js
@@ -2,7 +2,7 @@ import "@polymer/app-layout/app-header-layout/app-header-layout";
import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-input/paper-textarea";
import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -68,9 +68,7 @@ class HaPanelDevEvent extends EventsMixin(PolymerElement) {
label="Event Data (JSON, optional)"
value="{{eventData}}"
>
- Fire Event
+ Fire Event
${this._errorLog}
diff --git a/src/panels/dev-info/ha-panel-dev-info.ts b/src/panels/dev-info/ha-panel-dev-info.ts
index b19a134cf5..200bf3baba 100644
--- a/src/panels/dev-info/ha-panel-dev-info.ts
+++ b/src/panels/dev-info/ha-panel-dev-info.ts
@@ -12,7 +12,7 @@ import "@polymer/app-layout/app-toolbar/app-toolbar";
import "../../components/ha-menu-button";
import { HomeAssistant } from "../../types";
-import { haStyle } from "../../resources/ha-style";
+import { haStyle } from "../../resources/styles";
import "./system-log-card";
import "./error-log-card";
@@ -138,9 +138,9 @@ class HaPanelDevInfo extends LitElement {
${nonDefaultLinkText}
-
+
`
);
} else {
@@ -120,6 +122,12 @@ class SystemHealthCard extends LitElement {
td:first-child {
width: 33%;
}
+
+ .loading-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
`;
}
}
diff --git a/src/panels/dev-info/system-log-card.ts b/src/panels/dev-info/system-log-card.ts
index 11104a5dc5..59c11ca61c 100644
--- a/src/panels/dev-info/system-log-card.ts
+++ b/src/panels/dev-info/system-log-card.ts
@@ -137,9 +137,10 @@ class SystemLogCard extends LitElement {
}
.loading-container {
- @apply --layout-vertical;
- @apply --layout-center-center;
height: 100px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
`;
}
diff --git a/src/panels/dev-mqtt/ha-panel-dev-mqtt.js b/src/panels/dev-mqtt/ha-panel-dev-mqtt.js
index 2d8647179e..7d539f1eb4 100644
--- a/src/panels/dev-mqtt/ha-panel-dev-mqtt.js
+++ b/src/panels/dev-mqtt/ha-panel-dev-mqtt.js
@@ -1,7 +1,7 @@
import "@polymer/app-layout/app-header-layout/app-header-layout";
import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-input/paper-textarea";
@@ -33,7 +33,7 @@ class HaPanelDevMqtt extends PolymerElement {
display: block;
}
- paper-button {
+ mwc-button {
background-color: white;
}
@@ -69,7 +69,7 @@ class HaPanelDevMqtt extends PolymerElement {
>
- Publish
+ Publish
diff --git a/src/panels/dev-service/ha-panel-dev-service.js b/src/panels/dev-service/ha-panel-dev-service.js
index f249a5de69..6505f1dc02 100644
--- a/src/panels/dev-service/ha-panel-dev-service.js
+++ b/src/panels/dev-service/ha-panel-dev-service.js
@@ -1,7 +1,7 @@
import "@polymer/app-layout/app-header-layout/app-header-layout";
import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-input/paper-textarea";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -131,11 +131,8 @@ class HaPanelDevService extends PolymerElement {
autocomplete="off"
spellcheck="false"
>
- Current entities
diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts index aab241299b..abc02ce398 100644 --- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts +++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts @@ -2,8 +2,10 @@ import { html, LitElement, PropertyValues, - PropertyDeclarations, TemplateResult, + CSSResult, + css, + property, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; @@ -17,10 +19,7 @@ import { import "../../../components/ha-card"; import "../../../components/ha-label-badge"; -import { - createErrorCardConfig, - createErrorCardElement, -} from "./hui-error-card"; +import "../components/hui-warning"; const ICONS = { armed_away: "hass:shield-lock", @@ -50,20 +49,20 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { return { states: ["arm_home", "arm_away"] }; } - public hass?: HomeAssistant; - private _config?: Config; - private _code?: string; - - static get properties(): PropertyDeclarations { - return { - hass: {}, - _config: {}, - _code: {}, - }; - } + @property() public hass?: HomeAssistant; + @property() private _config?: Config; + @property() private _code?: string; public getCardSize(): number { - return 4; + if (!this._config || !this.hass) { + return 0; + } + + const stateObj = this.hass.states[this._config.entity]; + + return !stateObj || stateObj.attributes.code_format !== FORMAT_NUMBER + ? 3 + : 8; } public setConfig(config: Config): void { @@ -105,16 +104,18 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { const stateObj = this.hass.states[this._config.entity]; if (!stateObj) { - const element = createErrorCardElement( - createErrorCardConfig("Entity not Found!", this._config) - ); return html` - ${element} +
- Entity not available: ${this._config.entity}
-
- `
- : html`
-
-
- ${error}
- `
- : html`
-
-
-
-
-
- `}
+
-
-
- ${stateObj.state}
- ${this._config.unit ||
- stateObj.attributes.unit_of_measurement ||
- ""}
-
-
- ${this._config.name || computeStateName(stateObj)}
-
-
+
+
+
+
+
+
+ ${stateObj.state}
+ ${this._config.unit ||
+ stateObj.attributes.unit_of_measurement ||
+ ""}
+
+
+ ${this._config.name || computeStateName(stateObj)}
+
+
-
+ ${entityConf.entity}
- Entity Not Available
-
+
- Entity not available: ${this._config.entity}
-
- `
- : html`
-
-
- `}
+
-
-
- ${this._config.name || computeStateName(stateObj)}
-
-
+
+
+
+ ${this._config.name || computeStateName(stateObj)}
+
+
- Entity: ${this._config.entity} - Has no Unit of Measurement and
- therefore can not display a line graph.
-
+ return html`
+
- Entity not available: ${this._config.entity}
-
- `
- : html`
-
-
-
-
-
- ${this._config.name || computeStateName(stateObj)}
-
-
- ${stateObj.state}
- ${this._config.unit ||
- stateObj.attributes.unit_of_measurement}
-
- ${graph}
+
+
+
+
+ ${this._config.name || computeStateName(stateObj)}
+
+
+ ${stateObj.state}
+ ${this._config.unit ||
+ stateObj.attributes.unit_of_measurement}
+
+ ${graph}
- Entity not available: ${this._config.entity}
-
-
- ${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.edit"
- )}
@@ -92,7 +95,11 @@ export class HuiCardOptions extends LitElement {
@click="${this._cardUp}"
?disabled="${this.path![1] === 0}"
>
-
+
Entity not available: [[config.entity]]
+
- 
-
-
- `;
- }
-
- static get styleTemplate() {
- return html`
-
- `;
- }
-
- static get properties() {
- return {
- hass: {
- type: Object,
- observer: "_hassChanged",
- },
- entity: String,
- image: String,
- stateImage: Object,
- cameraImage: String,
- aspectRatio: String,
- filter: String,
- stateFilter: Object,
- _imageSrc: String,
- };
- }
-
- static get observers() {
- return ["_configChanged(image, stateImage, cameraImage, aspectRatio)"];
- }
-
- connectedCallback() {
- super.connectedCallback();
- if (this.cameraImage) {
- this.timer = setInterval(
- () => this._updateCameraImageSrc(),
- UPDATE_INTERVAL
- );
- }
- }
-
- disconnectedCallback() {
- super.disconnectedCallback();
- clearInterval(this.timer);
- }
-
- _configChanged(image, stateImage, cameraImage, aspectRatio) {
- const ratio = parseAspectRatio(aspectRatio);
-
- if (ratio && ratio.w > 0 && ratio.h > 0) {
- this.$.wrapper.style.paddingBottom = `${(
- (100 * ratio.h) /
- ratio.w
- ).toFixed(2)}%`;
- this.$.wrapper.classList.add("ratio");
- }
-
- if (cameraImage) {
- this._updateCameraImageSrc();
- } else if (image && !stateImage) {
- this._imageSrc = image;
- }
- }
-
- _onImageError() {
- this._imageSrc = null;
- this.$.image.classList.add("hidden");
- if (!this.$.wrapper.classList.contains("ratio")) {
- this.$.brokenImage.style.setProperty(
- "height",
- `${this._lastImageHeight || "100"}px`
- );
- }
- this.$.brokenImage.classList.remove("hidden");
- }
-
- _onImageLoad() {
- this.$.image.classList.remove("hidden");
- this.$.brokenImage.classList.add("hidden");
- if (!this.$.wrapper.classList.contains("ratio")) {
- this._lastImageHeight = this.$.image.offsetHeight;
- }
- }
-
- _hassChanged(hass) {
- if (this.cameraImage || !this.entity) {
- return;
- }
-
- const stateObj = hass.states[this.entity];
- const newState = !stateObj ? "unavailable" : stateObj.state;
-
- if (newState === this._currentState) return;
- this._currentState = newState;
-
- this._updateStateImage();
- this._updateStateFilter(stateObj);
- }
-
- _updateStateImage() {
- if (!this.stateImage) {
- this._imageFallback = true;
- return;
- }
- const stateImg = this.stateImage[this._currentState];
- this._imageSrc = stateImg || this.image;
- this._imageFallback = !stateImg;
- }
-
- _updateStateFilter(stateObj) {
- let filter;
- if (!this.stateFilter) {
- filter = this.filter;
- } else {
- filter = this.stateFilter[this._currentState] || this.filter;
- }
-
- const isOff = !stateObj || STATES_OFF.includes(stateObj.state);
- this.$.image.style.filter =
- filter || (isOff && this._imageFallback && DEFAULT_FILTER) || "";
- }
-
- async _updateCameraImageSrc() {
- try {
- const { content_type: contentType, content } = await this.hass.callWS({
- type: "camera_thumbnail",
- entity_id: this.cameraImage,
- });
- this._imageSrc = `data:${contentType};base64, ${content}`;
- this._onImageLoad();
- } catch (err) {
- this._onImageError();
- }
- }
-}
-
-customElements.define("hui-image", HuiImage);
diff --git a/src/panels/lovelace/components/hui-image.ts b/src/panels/lovelace/components/hui-image.ts
new file mode 100644
index 0000000000..04a12f34d8
--- /dev/null
+++ b/src/panels/lovelace/components/hui-image.ts
@@ -0,0 +1,225 @@
+import "@polymer/paper-toggle-button/paper-toggle-button";
+
+import { STATES_OFF } from "../../../common/const";
+
+import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
+import {
+ LitElement,
+ TemplateResult,
+ html,
+ property,
+ CSSResult,
+ css,
+ PropertyValues,
+ query,
+} from "lit-element";
+import { HomeAssistant } from "../../../types";
+import { styleMap } from "lit-html/directives/style-map";
+import { classMap } from "lit-html/directives/class-map";
+import { b64toBlob } from "../../../common/file/b64-to-blob";
+import { fetchThumbnail } from "../../../data/camera";
+
+const UPDATE_INTERVAL = 10000;
+const DEFAULT_FILTER = "grayscale(100%)";
+
+export interface StateSpecificConfig {
+ [state: string]: string;
+}
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HuiImage extends LitElement {
+ @property() public hass?: HomeAssistant;
+ @property() public entity?: string;
+ @property() public image?: string;
+ @property() public stateImage?: StateSpecificConfig;
+ @property() public cameraImage?: string;
+ @property() public aspectRatio?: string;
+ @property() public filter?: string;
+ @property() public stateFilter?: StateSpecificConfig;
+
+ @property() private _loadError?: boolean;
+ @property() private _cameraImageSrc?: string;
+ @query("img") private _image!: HTMLImageElement;
+ private _lastImageHeight?: number;
+ private _cameraUpdater?: number;
+ private _attached?: boolean;
+
+ public connectedCallback() {
+ super.connectedCallback();
+ this._attached = true;
+ this._startUpdateCameraInterval();
+ }
+
+ public disconnectedCallback() {
+ super.disconnectedCallback();
+ this._attached = false;
+ this._stopUpdateCameraInterval();
+ }
+
+ protected render(): TemplateResult | void {
+ const ratio = this.aspectRatio ? parseAspectRatio(this.aspectRatio) : null;
+ const stateObj =
+ this.hass && this.entity ? this.hass.states[this.entity] : undefined;
+ const state = stateObj ? stateObj.state : "unavailable";
+
+ // Figure out image source to use
+ let imageSrc: string | undefined;
+ // Track if we are we using a fallback image, used for filter.
+ let imageFallback = !this.stateImage;
+
+ if (this.cameraImage) {
+ imageSrc = this._cameraImageSrc;
+ } else if (this.stateImage) {
+ const stateImage = this.stateImage[state];
+
+ if (stateImage) {
+ imageSrc = stateImage;
+ } else {
+ imageSrc = this.image;
+ imageFallback = true;
+ }
+ } else {
+ imageSrc = this.image;
+ }
+
+ // Figure out filter to use
+ let filter = this.filter || "";
+
+ if (this.stateFilter && this.stateFilter[state]) {
+ filter = this.stateFilter[state];
+ }
+
+ if (!filter && this.entity) {
+ const isOff = !stateObj || STATES_OFF.includes(state);
+ filter = isOff && imageFallback ? DEFAULT_FILTER : "";
+ }
+
+ return html`
+ 0 && ratio.h > 0
+ ? `${((100 * ratio.h) / ratio.w).toFixed(2)}%`
+ : "",
+ })}
+ class=${classMap({
+ ratio: Boolean(ratio && ratio.w > 0 && ratio.h > 0),
+ })}
+ >
+ 
+
+
+ `;
+ }
+
+ protected updated(changedProps: PropertyValues): void {
+ if (changedProps.has("cameraImage")) {
+ this._updateCameraImageSrc();
+ this._startUpdateCameraInterval();
+ return;
+ }
+ }
+
+ private _startUpdateCameraInterval() {
+ this._stopUpdateCameraInterval();
+ if (this.cameraImage && this._attached) {
+ this._cameraUpdater = window.setInterval(
+ () => this._updateCameraImageSrc(),
+ UPDATE_INTERVAL
+ );
+ }
+ }
+
+ private _stopUpdateCameraInterval() {
+ if (this._cameraUpdater) {
+ clearInterval(this._cameraUpdater);
+ }
+ }
+
+ private _onImageError() {
+ this._loadError = true;
+ }
+
+ private async _onImageLoad() {
+ this._loadError = false;
+ await this.updateComplete;
+ this._lastImageHeight = this._image.offsetHeight;
+ }
+
+ private async _updateCameraImageSrc() {
+ if (!this.hass || !this.cameraImage) {
+ return;
+ }
+ try {
+ const { content_type: contentType, content } = await fetchThumbnail(
+ this.hass,
+ this.cameraImage
+ );
+ if (this._cameraImageSrc) {
+ URL.revokeObjectURL(this._cameraImageSrc);
+ }
+ this._cameraImageSrc = URL.createObjectURL(
+ b64toBlob(content, contentType)
+ );
+ this._onImageLoad();
+ } catch (err) {
+ this._onImageError();
+ }
+ }
+
+ static get styles(): CSSResult {
+ return css`
+ img {
+ display: block;
+ height: auto;
+ transition: filter 0.2s linear;
+ width: 100%;
+ }
+
+ .ratio {
+ position: relative;
+ width: 100%;
+ height: 0;
+ }
+
+ .ratio img,
+ .ratio div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+
+ #brokenImage {
+ background: grey url("/static/images/image-broken.svg") center/36px
+ no-repeat;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-image": HuiImage;
+ }
+}
+
+customElements.define("hui-image", HuiImage);
diff --git a/src/panels/lovelace/components/hui-theme-select-editor.ts b/src/panels/lovelace/components/hui-theme-select-editor.ts
index 98bc7687ad..318e42add8 100644
--- a/src/panels/lovelace/components/hui-theme-select-editor.ts
+++ b/src/panels/lovelace/components/hui-theme-select-editor.ts
@@ -4,7 +4,7 @@ import {
PropertyDeclarations,
TemplateResult,
} from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import { HomeAssistant } from "../../../types";
import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
diff --git a/src/panels/lovelace/components/hui-warning.ts b/src/panels/lovelace/components/hui-warning.ts
new file mode 100644
index 0000000000..7bbbe1af67
--- /dev/null
+++ b/src/panels/lovelace/components/hui-warning.ts
@@ -0,0 +1,34 @@
+import {
+ html,
+ LitElement,
+ TemplateResult,
+ CSSResult,
+ css,
+ customElement,
+} from "lit-element";
+
+@customElement("hui-warning")
+export class HuiWarning extends LitElement {
+ protected render(): TemplateResult | void {
+ return html`
+ [[_getMessage(notification)]]
- ${this.notifications.length}
+
+ `
+ : ""}
+ `;
+ }
+
+ static get styles(): CSSResult[] {
+ return [
+ css`
+ :host {
+ position: relative;
+ }
+
+ .indicator {
+ position: absolute;
+ top: 0px;
+ right: -3px;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background: var(--accent-color);
+ pointer-events: none;
+ z-index: 1;
+ }
+
+ .indicator > div {
+ right: 7px;
+ top: 3px;
+ position: absolute;
+ font-size: 0.55em;
+ }
+ `,
+ ];
+ }
+
+ private _clicked() {
+ this.opened = true;
+ fireEvent(this, "opened-changed", { value: this.opened });
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-notifications-button": HuiNotificationsButton;
+ }
+}
+
+customElements.define("hui-notifications-button", HuiNotificationsButton);
diff --git a/src/panels/lovelace/components/notifications/hui-persistent-notification-item.js b/src/panels/lovelace/components/notifications/hui-persistent-notification-item.js
index b4db796b4c..d763ab3838 100644
--- a/src/panels/lovelace/components/notifications/hui-persistent-notification-item.js
+++ b/src/panels/lovelace/components/notifications/hui-persistent-notification-item.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-tooltip/paper-tooltip";
@@ -49,8 +49,8 @@ export class HuiPersistentNotificationItem extends LocalizeMixin(
${cards.map((card) => {
return html`
- ${card.name}
+
+ ${card.name}
+
`;
})}
@@ -65,11 +62,13 @@ export class HuiCardPicker extends LitElement {
flex-wrap: wrap;
margin-bottom: 10px;
}
- .cards-container paper-button {
+ .cards-container mwc-button {
flex: 1 0 25%;
+ margin: 4px;
}
+
@media all and (max-width: 450px), all and (max-height: 500px) {
- .cards-container paper-button {
+ .cards-container mwc-button {
flex: 1 0 33%;
}
}
diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts
index fa1b628d39..56ad4f6695 100644
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts
@@ -9,7 +9,7 @@ import {
import "@polymer/paper-dialog/paper-dialog";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import { haStyleDialog } from "../../../../resources/ha-style";
+import { haStyleDialog } from "../../../../resources/styles";
import "./hui-card-picker";
import { HomeAssistant } from "../../../../types";
@@ -41,7 +41,7 @@ export class HuiDialogPickCard extends LitElement {
>
`;
diff --git a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
index 0022c045b2..bf2f7df114 100644
--- a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
@@ -10,14 +10,14 @@ import {
import { classMap } from "lit-html/directives/class-map";
import yaml from "js-yaml";
-import { haStyleDialog } from "../../../../resources/ha-style";
+import { haStyleDialog } from "../../../../resources/styles";
import "@polymer/paper-spinner/paper-spinner";
import "@polymer/paper-dialog/paper-dialog";
// This is not a duplicate import, one is for types, one is for element.
// tslint:disable-next-line
import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import { HomeAssistant } from "../../../../types";
import { LovelaceCardConfig } from "../../../../data/lovelace";
@@ -36,6 +36,7 @@ import { ConfigValue, ConfigError } from "../types";
import { EntityConfig } from "../../entity-rows/types";
import { getCardElementTag } from "../../common/get-card-element-tag";
import { addCard, replaceCard } from "../config-util";
+import { afterNextRender } from "../../../../common/util/render-status";
declare global {
interface HASSDomEvents {
@@ -119,6 +120,7 @@ export class HuiEditCard extends LitElement {
? this._configElement
: html`
@@ -159,7 +162,7 @@ export class HuiEditCard extends LitElement {
${!this._loading
? html`
`
: ""}
@@ -195,9 +198,11 @@ export class HuiEditCard extends LitElement {
this._loading = false;
this._resizeDialog();
if (!this._uiEditor) {
- setTimeout(() => {
+ afterNextRender(() => {
this.yamlEditor.codemirror.refresh();
- }, 1);
+ this._resizeDialog();
+ this.yamlEditor.codemirror.focus();
+ });
}
}
@@ -410,6 +415,10 @@ export class HuiEditCard extends LitElement {
return [
haStyleDialog,
css`
+ :host {
+ --code-mirror-max-height: calc(100vh - 176px);
+ }
+
@media all and (max-width: 450px), all and (max-height: 500px) {
/* overrule the ha-style-dialog max-height on small screens */
paper-dialog {
@@ -455,12 +464,14 @@ export class HuiEditCard extends LitElement {
.content {
flex-direction: row;
}
- .content .element-editor {
- flex: auto;
+ .content > * {
+ flex-basis: 0;
+ flex-grow: 1;
+ flex-shrink: 1;
+ min-width: 0;
}
.content hui-card-preview {
margin: 0 10px;
- flex: 490px;
max-width: 490px;
}
}
@@ -468,7 +479,7 @@ export class HuiEditCard extends LitElement {
.margin-bot {
margin-bottom: 24px;
}
- paper-button paper-spinner {
+ mwc-button paper-spinner {
width: 14px;
height: 14px;
margin-right: 20px;
diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts
index f93662bb99..d8575d77d5 100644
--- a/src/panels/lovelace/editor/hui-dialog-save-config.ts
+++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts
@@ -12,9 +12,9 @@ import "@polymer/paper-dialog/paper-dialog";
// This is not a duplicate import, one is for types, one is for element.
// tslint:disable-next-line
import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
-import { haStyleDialog } from "../../../resources/ha-style";
+import { haStyleDialog } from "../../../resources/styles";
import { HomeAssistant } from "../../../types";
@@ -65,22 +65,19 @@ export class HuiSaveConfig extends LitElement {
@@ -133,7 +130,7 @@ export class HuiSaveConfig extends LitElement {
paper-spinner[active] {
display: block;
}
- paper-button paper-spinner {
+ mwc-button paper-spinner {
width: 14px;
height: 14px;
margin-right: 20px;
diff --git a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
index eb8d89deb4..72e121e563 100644
--- a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
+++ b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
@@ -11,10 +11,10 @@ import "@polymer/paper-dialog/paper-dialog";
// This is not a duplicate import, one is for types, one is for element.
// tslint:disable-next-line
import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import { haStyleDialog } from "../../../../resources/ha-style";
+import { haStyleDialog } from "../../../../resources/styles";
import "./hui-lovelace-editor";
import { HomeAssistant } from "../../../../types";
@@ -67,10 +67,10 @@ export class HuiDialogEditLovelace extends LitElement {
>
@@ -147,7 +147,7 @@ export class HuiDialogEditLovelace extends LitElement {
paper-dialog {
max-width: 650px;
}
- paper-button paper-spinner {
+ mwc-button paper-spinner {
width: 14px;
height: 14px;
margin-right: 20px;
diff --git a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
index 767f86e88c..721aab61e4 100644
--- a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
@@ -15,10 +15,10 @@ import "@polymer/paper-icon-button/paper-icon-button.js";
// This is not a duplicate import, one is for types, one is for element.
// tslint:disable-next-line
import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import { haStyleDialog } from "../../../../resources/ha-style";
+import { haStyleDialog } from "../../../../resources/styles";
import "../../components/hui-entity-editor";
import "./hui-view-editor";
@@ -144,10 +144,10 @@ export class HuiEditView extends LitElement {
>
`
: ""}
- ${this.hass!.localize("ui.common.cancel")} ${this.hass!.localize("ui.common.cancel")}
-
@@ -155,7 +155,7 @@ export class HuiEditView extends LitElement {
?active="${this._saving}"
alt="Saving"
>
- ${this.hass!.localize("ui.common.save")}
${stateObj.attributes.device_class === "timestamp"
@@ -73,13 +71,11 @@ class HuiSensorEntityRow extends LitElement implements EntityRow {
`;
}
- private renderStyle(): TemplateResult {
- return html`
-
+ static get styles(): CSSResult {
+ return css`
+ div {
+ text-align: right;
+ }
`;
}
}
diff --git a/src/panels/lovelace/entity-rows/hui-text-entity-row.ts b/src/panels/lovelace/entity-rows/hui-text-entity-row.ts
index e30bdf27e5..5fd9f2f442 100644
--- a/src/panels/lovelace/entity-rows/hui-text-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-text-entity-row.ts
@@ -1,27 +1,22 @@
import {
html,
LitElement,
- PropertyDeclarations,
TemplateResult,
+ property,
+ CSSResult,
+ css,
} from "lit-element";
import "../components/hui-generic-entity-row";
-import "./hui-error-entity-row";
+import "../components/hui-warning";
import computeStateDisplay from "../../../common/entity/compute_state_display";
import { HomeAssistant } from "../../../types";
import { EntityRow, EntityConfig } from "./types";
class HuiTextEntityRow extends LitElement implements EntityRow {
- public hass?: HomeAssistant;
- private _config?: EntityConfig;
-
- static get properties(): PropertyDeclarations {
- return {
- hass: {},
- _config: {},
- };
- }
+ @property() public hass?: HomeAssistant;
+ @property() private _config?: EntityConfig;
public setConfig(config: EntityConfig): void {
if (!config) {
@@ -39,14 +34,17 @@ class HuiTextEntityRow extends LitElement implements EntityRow {
if (!stateObj) {
return html`
- ${this.hass.localize(
+ "ui.panel.lovelace.warning.entity_not_found",
+ "entity",
+ this._config.entity
+ )}
`;
}
return html`
- ${this.renderStyle()}
${computeStateDisplay(
@@ -59,13 +57,11 @@ class HuiTextEntityRow extends LitElement implements EntityRow {
`;
}
- private renderStyle(): TemplateResult {
- return html`
-
+ static get styles(): CSSResult {
+ return css`
+ div {
+ text-align: right;
+ }
`;
}
}
diff --git a/src/panels/lovelace/entity-rows/hui-timer-entity-row.js b/src/panels/lovelace/entity-rows/hui-timer-entity-row.js
deleted file mode 100644
index fbcfd143d5..0000000000
--- a/src/panels/lovelace/entity-rows/hui-timer-entity-row.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/hui-generic-entity-row";
-
-import timerTimeRemaining from "../../../common/entity/timer_time_remaining";
-import secondsToDuration from "../../../common/datetime/seconds_to_duration";
-
-class HuiTimerEntityRow extends PolymerElement {
- static get template() {
- return html`
-
- ${this.timerControlTemplate}
-
- `;
- }
-
- static get timerControlTemplate() {
- return html`
- ${this.hass.localize(
+ "ui.panel.lovelace.warning.entity_not_found",
+ "entity",
+ this._config.entity
+ )}
+ `;
+ }
+
+ return html`
+
+
+ `;
+ }
+
+ protected updated(changedProps: PropertyValues) {
+ super.updated(changedProps);
+
+ if (changedProps.has("hass")) {
+ const stateObj = this.hass!.states[this._config!.entity];
+ const oldHass = changedProps.get("hass") as this["hass"];
+ const oldStateObj = oldHass
+ ? oldHass.states[this._config!.entity]
+ : undefined;
+
+ if (oldStateObj !== stateObj) {
+ this._startInterval(stateObj);
+ } else if (!stateObj) {
+ this._clearInterval();
+ }
+ }
+ }
+
+ private _clearInterval(): void {
+ if (this._interval) {
+ window.clearInterval(this._interval);
+ this._interval = undefined;
+ }
+ }
+
+ private _startInterval(stateObj: HassEntity): void {
+ this._clearInterval();
+ this._calculateRemaining(stateObj);
+
+ if (stateObj.state === "active") {
+ this._interval = window.setInterval(
+ () => this._calculateRemaining(stateObj),
+ 1000
+ );
+ }
+ }
+
+ private _calculateRemaining(stateObj: HassEntity): void {
+ this._timeRemaining = timerTimeRemaining(stateObj);
+ }
+
+ private _computeDisplay(stateObj: HassEntity): string | null {
+ if (!stateObj) {
+ return null;
+ }
+
+ if (stateObj.state === "idle" || this._timeRemaining === 0) {
+ return this.hass!.localize("state.timer." + stateObj.state);
+ }
+
+ let display = secondsToDuration(this._timeRemaining || 0);
+
+ if (stateObj.state === "paused") {
+ display += ` (${this.hass!.localize("state.timer.paused")})`;
+ }
+
+ return display;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-timer-entity-row": HuiTimerEntityRow;
+ }
+}
+
+customElements.define("hui-timer-entity-row", HuiTimerEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts b/src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts
index f5a7848835..e91a47e460 100644
--- a/src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts
@@ -7,7 +7,7 @@ import {
import "../components/hui-generic-entity-row";
import "../../../components/entity/ha-entity-toggle";
-import "./hui-error-entity-row";
+import "../components/hui-warning";
import computeStateDisplay from "../../../common/entity/compute_state_display";
import { HomeAssistant } from "../../../types";
@@ -40,9 +40,13 @@ class HuiToggleEntityRow extends LitElement implements EntityRow {
if (!stateObj) {
return html`
- ${this.hass.localize(
+ "ui.panel.lovelace.warning.entity_not_found",
+ "entity",
+ this._config.entity
+ )}
`;
}
diff --git a/src/panels/lovelace/ha-panel-lovelace.ts b/src/panels/lovelace/ha-panel-lovelace.ts
index 5e1accff3d..1b9d3edbd0 100644
--- a/src/panels/lovelace/ha-panel-lovelace.ts
+++ b/src/panels/lovelace/ha-panel-lovelace.ts
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import { fetchConfig, LovelaceConfig, saveConfig } from "../../data/lovelace";
import "../../layouts/hass-loading-screen";
@@ -73,21 +73,13 @@ class LovelacePanel extends LitElement {
if (state === "error") {
return html`
-
- Reload Lovelace
+ Reload Lovelace
`;
}
@@ -95,6 +87,7 @@ class LovelacePanel extends LitElement {
if (state === "yaml-editor") {
return html`
Save
- Save
+
@@ -88,9 +95,7 @@ class LovelaceFullConfigEditor extends LitElement {
app-header-layout {
height: 100vh;
}
- paper-button {
- font-size: 16px;
- }
+
app-toolbar {
background-color: var(--dark-background-color, #455a64);
color: var(--dark-text-color);
@@ -102,7 +107,6 @@ class LovelaceFullConfigEditor extends LitElement {
.content {
height: calc(100vh - 68px);
- direction: ltr;
}
hui-code-editor {
@@ -111,12 +115,13 @@ class LovelaceFullConfigEditor extends LitElement {
.save-button {
opacity: 0;
- margin-left: -16px;
- margin-top: -4px;
- transition: opacity 1.5s;
+ margin-left: -21px;
+ transition: all 1.5s;
}
.saved {
+ margin-left: initial;
+ margin-right: -8px;
opacity: 1;
}
`,
@@ -146,7 +151,9 @@ class LovelaceFullConfigEditor extends LitElement {
}
}
window.onbeforeunload = null;
- this.closeEditor!();
+ if (this.closeEditor) {
+ this.closeEditor();
+ }
}
private async _handleSave() {
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 890a151b3b..66cb1ad135 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -14,7 +14,7 @@ import "@polymer/app-layout/app-scroll-effects/effects/waterfall";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/app-route/app-route";
import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-menu-button/paper-menu-button";
@@ -188,8 +188,8 @@ class HUIRoot extends LitElement {
- ${this._config.action_name} ${this._config.action_name}
`;
@@ -67,9 +67,7 @@ class HuiCallServiceRow extends LitElement implements EntityRow {
overflow: hidden;
text-overflow: ellipsis;
}
- paper-button {
- color: var(--primary-color);
- font-weight: 500;
+ mwc-button {
margin-right: -0.57em;
}
diff --git a/src/panels/mailbox/ha-dialog-show-audio-message.js b/src/panels/mailbox/ha-dialog-show-audio-message.js
index c105f1f73a..6ac06c5c8a 100644
--- a/src/panels/mailbox/ha-dialog-show-audio-message.js
+++ b/src/panels/mailbox/ha-dialog-show-audio-message.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-dialog/paper-dialog";
import "@polymer/paper-spinner/paper-spinner";
import { html } from "@polymer/polymer/lib/utils/html-tag";
diff --git a/src/panels/mailbox/ha-panel-mailbox.js b/src/panels/mailbox/ha-panel-mailbox.js
index 2d10df3961..9a75bb124f 100644
--- a/src/panels/mailbox/ha-panel-mailbox.js
+++ b/src/panels/mailbox/ha-panel-mailbox.js
@@ -1,7 +1,7 @@
import "@polymer/app-layout/app-header-layout/app-header-layout";
import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-input/paper-textarea";
import "@polymer/paper-item/paper-item-body";
diff --git a/src/panels/profile/ha-change-password-card.js b/src/panels/profile/ha-change-password-card.js
index 75e7c45d68..8164f93fa5 100644
--- a/src/panels/profile/ha-change-password-card.js
+++ b/src/panels/profile/ha-change-password-card.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-dialog/paper-dialog";
import "@polymer/paper-spinner/paper-spinner";
import "@polymer/paper-card/paper-card";
@@ -78,8 +78,8 @@ class HaChangePasswordCard extends LocalizeMixin(PolymerElement) {
[[localize('ui.panel.profile.change_password.submit')]] [[localize('ui.panel.profile.change_password.submit')]]
diff --git a/src/panels/profile/ha-long-lived-access-tokens-card.js b/src/panels/profile/ha-long-lived-access-tokens-card.js
index 3493bc20bd..3a582d993f 100644
--- a/src/panels/profile/ha-long-lived-access-tokens-card.js
+++ b/src/panels/profile/ha-long-lived-access-tokens-card.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -61,9 +61,9 @@ class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
[[localize('ui.panel.profile.mfa_setup.submit')]] [[localize('ui.panel.profile.mfa_setup.submit')]]
diff --git a/src/panels/profile/ha-mfa-modules-card.js b/src/panels/profile/ha-mfa-modules-card.js
index 50d07606f5..f791f200ef 100644
--- a/src/panels/profile/ha-mfa-modules-card.js
+++ b/src/panels/profile/ha-mfa-modules-card.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-item/paper-item";
@@ -36,9 +36,7 @@ class HaMfaModulesCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
max-width: 600px;
margin: 16px auto;
}
- paper-button {
- color: var(--primary-color);
- font-weight: 500;
+ mwc-button {
margin-right: -0.57em;
}
@@ -50,13 +48,13 @@ class HaMfaModulesCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
[[localize('ui.panel.profile.mfa.disable')]] [[localize('ui.panel.profile.mfa.disable')]]
- [[localize('ui.panel.profile.mfa.enable')]] [[localize('ui.panel.profile.mfa.enable')]]
diff --git a/src/panels/profile/ha-panel-profile.js b/src/panels/profile/ha-panel-profile.js
index b07f16b943..f6672183c5 100644
--- a/src/panels/profile/ha-panel-profile.js
+++ b/src/panels/profile/ha-panel-profile.js
@@ -3,7 +3,7 @@ import "@polymer/app-layout/app-header/app-header";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-item/paper-item";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -86,8 +86,8 @@ class HaPanelProfile extends EventsMixin(LocalizeMixin(PolymerElement)) {
>
--google-blue-500: #4285f4;
--google-green-500: #0f9d58;
--google-yellow-500: #f4b400;
+ --paper-spinner-color: var(--primary-color);
/* for paper-slider */
--paper-green-400: #66bb6a;
@@ -212,6 +120,9 @@ documentContainer.innerHTML = `
--paper-slider-secondary-color: var(--slider-secondary-color);
--paper-slider-container-color: var(--slider-bar-color);
--ha-paper-slider-pin-font-size: 15px;
+
+ /* mwc */
+ --mdc-theme-primary: var(--primary-color);
}
diff --git a/src/resources/styles.ts b/src/resources/styles.ts
new file mode 100644
index 0000000000..66a8b2adc7
--- /dev/null
+++ b/src/resources/styles.ts
@@ -0,0 +1,88 @@
+import { css } from "lit-element";
+
+export const haStyle = css`
+ :host {
+ @apply --paper-font-body1;
+ }
+
+ app-header-layout,
+ ha-app-layout {
+ background-color: var(--primary-background-color);
+ }
+
+ app-header,
+ app-toolbar {
+ background-color: var(--primary-color);
+ font-weight: 400;
+ color: var(--text-primary-color, white);
+ }
+
+ app-toolbar ha-menu-button + [main-title],
+ app-toolbar paper-icon-button + [main-title] {
+ margin-left: 24px;
+ }
+
+ h1 {
+ @apply --paper-font-title;
+ }
+
+ button.link {
+ background: none;
+ color: inherit;
+ border: none;
+ padding: 0;
+ font: inherit;
+ text-align: left;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+ .card-actions a {
+ text-decoration: none;
+ }
+
+ .card-actions .warning {
+ --mdc-theme-primary: var(--google-red-500);
+ }
+`;
+
+export const haStyleDialog = css`
+ /* prevent clipping of positioned elements */
+ paper-dialog-scrollable {
+ --paper-dialog-scrollable: {
+ -webkit-overflow-scrolling: auto;
+ }
+ }
+
+ /* force smooth scrolling for iOS 10 */
+ paper-dialog-scrollable.can-scroll {
+ --paper-dialog-scrollable: {
+ -webkit-overflow-scrolling: touch;
+ }
+ }
+
+ .paper-dialog-buttons {
+ align-items: flex-end;
+ padding: 8px;
+ }
+
+ .paper-dialog-buttons .warning {
+ --mdc-theme-primary: var(--google-red-500);
+ }
+
+ @media all and (max-width: 450px), all and (max-height: 500px) {
+ paper-dialog {
+ margin: 0;
+ width: 100% !important;
+ max-height: calc(100% - 64px);
+
+ position: fixed !important;
+ bottom: 0px;
+ left: 0px;
+ right: 0px;
+ overflow: scroll;
+ border-bottom-left-radius: 0px;
+ border-bottom-right-radius: 0px;
+ }
+ }
+`;
diff --git a/src/state-summary/state-card-configurator.js b/src/state-summary/state-card-configurator.js
index 4b8449ff40..5cc66cf4f5 100644
--- a/src/state-summary/state-card-configurator.js
+++ b/src/state-summary/state-card-configurator.js
@@ -1,5 +1,5 @@
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -15,9 +15,7 @@ class StateCardConfigurator extends LocalizeMixin(PolymerElement) {
return html`
[[_computeDisplay(_stateObj, _timeRemaining)]]
- `;
- }
-
- static get properties() {
- return {
- hass: Object,
- _config: Object,
- _stateObj: {
- type: Object,
- computed: "_computeStateObj(hass.states, _config.entity)",
- observer: "_stateObjChanged",
- },
- _timeRemaining: Number,
- };
- }
-
- disconnectedCallback() {
- super.disconnectedCallback();
- this._clearInterval();
- }
-
- _stateObjChanged(stateObj) {
- if (stateObj) {
- this._startInterval(stateObj);
- } else {
- this._clearInterval();
- }
- }
-
- _clearInterval() {
- if (this._updateRemaining) {
- clearInterval(this._updateRemaining);
- this._updateRemaining = null;
- }
- }
-
- _startInterval(stateObj) {
- this._clearInterval();
- this._calculateRemaining(stateObj);
-
- if (stateObj.state === "active") {
- this._updateRemaining = setInterval(
- () => this._calculateRemaining(this._stateObj),
- 1000
- );
- }
- }
-
- _calculateRemaining(stateObj) {
- this._timeRemaining = timerTimeRemaining(stateObj);
- }
-
- _computeDisplay(stateObj, time) {
- if (!stateObj) return null;
-
- if (stateObj.state === "idle" || time === 0) return stateObj.state;
-
- let display = secondsToDuration(time);
-
- if (stateObj.state === "paused") {
- display += " (paused)";
- }
-
- return display;
- }
-
- _computeStateObj(states, entityId) {
- return states && entityId in states ? states[entityId] : null;
- }
-
- setConfig(config) {
- if (!config || !config.entity) {
- throw new Error("Entity not configured.");
- }
- this._config = config;
- }
-}
-customElements.define("hui-timer-entity-row", HuiTimerEntityRow);
diff --git a/src/panels/lovelace/entity-rows/hui-timer-entity-row.ts b/src/panels/lovelace/entity-rows/hui-timer-entity-row.ts
new file mode 100644
index 0000000000..7e7383961d
--- /dev/null
+++ b/src/panels/lovelace/entity-rows/hui-timer-entity-row.ts
@@ -0,0 +1,128 @@
+import {
+ html,
+ LitElement,
+ TemplateResult,
+ property,
+ PropertyValues,
+} from "lit-element";
+
+import "../components/hui-generic-entity-row";
+import "../components/hui-warning";
+
+import timerTimeRemaining from "../../../common/entity/timer_time_remaining";
+import secondsToDuration from "../../../common/datetime/seconds_to_duration";
+import { HomeAssistant } from "../../../types";
+import { EntityConfig } from "./types";
+import { HassEntity } from "home-assistant-js-websocket";
+
+class HuiTimerEntityRow extends LitElement {
+ @property() public hass?: HomeAssistant;
+ @property() private _config?: EntityConfig;
+ @property() private _timeRemaining?: number;
+ private _interval?: number;
+
+ public setConfig(config: EntityConfig): void {
+ if (!config) {
+ throw new Error("Configuration error");
+ }
+ this._config = config;
+ }
+
+ public disconnectedCallback(): void {
+ super.disconnectedCallback();
+ this._clearInterval();
+ }
+
+ protected render(): TemplateResult | void {
+ if (!this._config || !this.hass) {
+ return html``;
+ }
+
+ const stateObj = this.hass.states[this._config.entity];
+
+ if (!stateObj) {
+ return html`
+ ${this._computeDisplay(stateObj)}
+ Edit Config
- ${this.config.title || "Home Assistant"}
${this._config.name}
-
-
+
[[localize('ui.panel.profile.long_lived_access_tokens.create')]]
-
+
`;
diff --git a/src/panels/profile/ha-mfa-module-setup-flow.js b/src/panels/profile/ha-mfa-module-setup-flow.js
index 27f7da490e..f8feef4a72 100644
--- a/src/panels/profile/ha-mfa-module-setup-flow.js
+++ b/src/panels/profile/ha-mfa-module-setup-flow.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import "@polymer/paper-dialog/paper-dialog";
import "@polymer/paper-spinner/paper-spinner";
@@ -107,13 +107,13 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
- [[module.id]]
-
- [[localize('ui.panel.profile.logout')]] [[localize('ui.panel.profile.logout')]]
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index 0c7e1f45ae..85e9b17d75 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -1,99 +1,6 @@
import "@polymer/paper-styles/paper-styles";
import "@polymer/polymer/polymer-legacy";
-import { css } from "lit-element";
-
-export const haStyle = css`
- :host {
- @apply --paper-font-body1;
- }
-
- app-header-layout,
- ha-app-layout {
- background-color: var(--primary-background-color);
- }
-
- app-header,
- app-toolbar {
- background-color: var(--primary-color);
- font-weight: 400;
- color: var(--text-primary-color, white);
- }
-
- app-toolbar ha-menu-button + [main-title],
- app-toolbar paper-icon-button + [main-title] {
- margin-left: 24px;
- }
-
- h1 {
- @apply --paper-font-title;
- }
-
- button.link {
- background: none;
- color: inherit;
- border: none;
- padding: 0;
- font: inherit;
- text-align: left;
- text-decoration: underline;
- cursor: pointer;
- }
-
- .card-actions a {
- text-decoration: none;
- }
-
- .card-actions paper-button:not([disabled]),
- .card-actions ha-progress-button:not([disabled]),
- .card-actions ha-call-api-button:not([disabled]),
- .card-actions ha-call-service-button:not([disabled]) {
- color: var(--primary-color);
- font-weight: 500;
- }
-
- .card-actions paper-button.warning:not([disabled]),
- .card-actions ha-call-api-button.warning:not([disabled]),
- .card-actions ha-call-service-button.warning:not([disabled]) {
- color: var(--google-red-500);
- }
-
- .card-actions paper-button[primary] {
- background-color: var(--primary-color);
- color: var(--text-primary-color);
- }
-`;
-
-export const haStyleDialog = css`
- /* prevent clipping of positioned elements */
- paper-dialog-scrollable {
- --paper-dialog-scrollable: {
- -webkit-overflow-scrolling: auto;
- }
- }
-
- /* force smooth scrolling for iOS 10 */
- paper-dialog-scrollable.can-scroll {
- --paper-dialog-scrollable: {
- -webkit-overflow-scrolling: touch;
- }
- }
-
- @media all and (max-width: 450px), all and (max-height: 500px) {
- paper-dialog {
- margin: 0;
- width: 100% !important;
- max-height: calc(100% - 64px);
-
- position: fixed !important;
- bottom: 0px;
- left: 0px;
- right: 0px;
- overflow: scroll;
- border-bottom-left-radius: 0px;
- border-bottom-right-radius: 0px;
- }
- }
-`;
+import { haStyle, haStyleDialog } from "./styles";
const documentContainer = document.createElement("template");
documentContainer.setAttribute("style", "display: none;");
@@ -172,6 +79,7 @@ documentContainer.innerHTML = `