${computeDeviceName(device, this.hass)}
- ${areaName - ? this.hass.localize( - "ui.panel.config.integrations.config_entry.area", - "area", - areaName - ) + ${area + ? html` + ${this.hass.localize( + "ui.panel.config.integrations.config_entry.area", + "area", + area.name || "Unnamed Area" + )} + ` : ""} ` @@ -437,13 +450,6 @@ export class HaConfigDevicePage extends LitElement { return state ? computeStateName(state) : null; } - private _computeAreaName(areas, device): string | undefined { - if (!areas || !device || !device.area_id) { - return undefined; - } - return areas.find((area) => area.area_id === device.area_id).name; - } - private _onImageLoad(ev) { ev.target.style.display = "inline-block"; } @@ -648,6 +654,10 @@ export class HaConfigDevicePage extends LitElement { a { text-decoration: none; + color: var(--primary-color); + } + + ha-card a { color: var(--primary-text-color); } `; diff --git a/src/panels/config/integrations/ha-config-entries-dashboard.ts b/src/panels/config/integrations/ha-config-entries-dashboard.ts index 6a6bc4377e..0b6387d3fa 100644 --- a/src/panels/config/integrations/ha-config-entries-dashboard.ts +++ b/src/panels/config/integrations/ha-config-entries-dashboard.ts @@ -200,6 +200,15 @@ export class HaConfigManagerDashboard extends LitElement { href="/config/integrations/config_entry/${item.entry_id}" >
${this.hass.localize(
@@ -342,6 +351,14 @@ export class HaConfigManagerDashboard extends LitElement {
return states;
}
+ private _onImageLoad(ev) {
+ ev.target.style.visibility = "initial";
+ }
+
+ private _onImageError(ev) {
+ ev.target.style.visibility = "hidden";
+ }
+
static get styles(): CSSResult {
return css`
mwc-button {
@@ -355,6 +372,9 @@ export class HaConfigManagerDashboard extends LitElement {
cursor: pointer;
margin: 8px;
}
+ .configured {
+ padding-bottom: 24px;
+ }
.configured a {
color: var(--primary-text-color);
text-decoration: none;
@@ -375,6 +395,10 @@ export class HaConfigManagerDashboard extends LitElement {
.overflow {
width: 56px;
}
+ img {
+ width: 50px;
+ margin-right: 16px;
+ }
`;
}
}
diff --git a/src/panels/config/users/dialog-add-user.ts b/src/panels/config/users/dialog-add-user.ts
index e30d00eca3..f4f62402af 100644
--- a/src/panels/config/users/dialog-add-user.ts
+++ b/src/panels/config/users/dialog-add-user.ts
@@ -1,8 +1,7 @@
import "@material/mwc-button";
import "@polymer/paper-spinner/paper-spinner";
-
+import "../../../components/ha-switch";
import "../../../components/ha-dialog";
-import "../../../resources/ha-style";
import {
LitElement,
html,
@@ -10,6 +9,8 @@ import {
customElement,
property,
PropertyValues,
+ CSSResult,
+ css,
} from "lit-element";
import { HomeAssistant } from "../../../types";
import { PolymerChangedEvent } from "../../../polymer-types";
@@ -17,11 +18,12 @@ import { AddUserDialogParams } from "./show-dialog-add-user";
import {
User,
SYSTEM_GROUP_ID_USER,
- GROUPS,
createUser,
deleteUser,
+ SYSTEM_GROUP_ID_ADMIN,
} from "../../../data/user";
import { createAuthForUser } from "../../../data/auth";
+import { haStyleDialog } from "../../../resources/styles";
@customElement("dialog-add-user")
export class DialogAddUser extends LitElement {
@@ -33,14 +35,14 @@ export class DialogAddUser extends LitElement {
@property() private _name?: string;
@property() private _username?: string;
@property() private _password?: string;
- @property() private _group?: string;
+ @property() private _isAdmin?: boolean;
public showDialog(params: AddUserDialogParams) {
this._params = params;
this._name = "";
this._username = "";
this._password = "";
- this._group = SYSTEM_GROUP_ID_USER;
+ this._isAdmin = false;
this._error = undefined;
this._loading = false;
}
@@ -106,25 +108,10 @@ export class DialogAddUser extends LitElement {
@value-changed=${this._passwordChanged}
error-message="Required"
>
-
-
- ${GROUPS.map(
- (groupId) => html`
-
- ${this.hass.localize(`groups.${groupId}`)}
-
- `
- )}
-
-
- ${this._group === SYSTEM_GROUP_ID_USER
+
+ ${this.hass.localize("ui.panel.config.users.editor.admin")}
+
+ ${!this._isAdmin
? html`
The users group is a work in progress. The user will be unable @@ -191,8 +178,8 @@ export class DialogAddUser extends LitElement { this._password = ev.detail.value; } - private async _handleGroupChange(ev): Promise {
- this._group = ev.detail.item.getAttribute("group-id");
+ private async _adminChanged(ev): Promise {
+ this._isAdmin = ev.target.checked;
}
private async _createUser(ev) {
@@ -207,7 +194,7 @@ export class DialogAddUser extends LitElement {
let user: User;
try {
const userResponse = await createUser(this.hass, this._name, [
- this._group!,
+ this._isAdmin ? SYSTEM_GROUP_ID_ADMIN : SYSTEM_GROUP_ID_USER,
]);
user = userResponse.user;
} catch (err) {
@@ -233,6 +220,20 @@ export class DialogAddUser extends LitElement {
this._params!.userAddedCallback(user);
this._close();
}
+
+ static get styles(): CSSResult[] {
+ return [
+ haStyleDialog,
+ css`
+ ha-dialog {
+ --mdc-dialog-max-width: 500px;
+ }
+ ha-switch {
+ margin-top: 8px;
+ }
+ `,
+ ];
+ }
}
declare global {
diff --git a/src/panels/config/users/dialog-user-detail.ts b/src/panels/config/users/dialog-user-detail.ts
index b9ef3de155..7cc23b449b 100644
--- a/src/panels/config/users/dialog-user-detail.ts
+++ b/src/panels/config/users/dialog-user-detail.ts
@@ -10,20 +10,22 @@ import {
TemplateResult,
css,
} from "lit-element";
-import "../../../components/entity/ha-entities-picker";
-import "../../../components/user/ha-user-picker";
import { PolymerChangedEvent } from "../../../polymer-types";
import { haStyleDialog } from "../../../resources/styles";
import { HomeAssistant } from "../../../types";
import { UserDetailDialogParams } from "./show-dialog-user-detail";
+import "../../../components/ha-switch";
import { createCloseHeading } from "../../../components/ha-dialog";
-import { GROUPS, SYSTEM_GROUP_ID_USER } from "../../../data/user";
+import {
+ SYSTEM_GROUP_ID_ADMIN,
+ SYSTEM_GROUP_ID_USER,
+} from "../../../data/user";
@customElement("dialog-user-detail")
class DialogUserDetail extends LitElement {
@property() public hass!: HomeAssistant;
@property() private _name!: string;
- @property() private _group?: string;
+ @property() private _isAdmin?: boolean;
@property() private _error?: string;
@property() private _params?: UserDetailDialogParams;
@property() private _submitting: boolean = false;
@@ -32,7 +34,7 @@ class DialogUserDetail extends LitElement {
this._params = params;
this._error = undefined;
this._name = params.entry.name || "";
- this._group = params.entry.group_ids[0];
+ this._isAdmin = params.entry.group_ids[0] === SYSTEM_GROUP_ID_ADMIN;
await this.updateComplete;
}
@@ -55,31 +57,55 @@ class DialogUserDetail extends LitElement {
-
- ${GROUPS.map(
- (groupId) => html`
-
- ${this.hass.localize(`groups.${groupId}`)}
-
- `
- )}
-
-
- ${this._group === SYSTEM_GROUP_ID_USER
+ ${this.hass.localize("ui.panel.config.users.editor.admin")}
+
+ ${!this._isAdmin
? html`
The users group is a work in progress. The user will be unable @@ -88,34 +114,6 @@ class DialogUserDetail extends LitElement { limit access to administrators. ` : ""} -
-
@@ -129,21 +127,33 @@ class DialogUserDetail extends LitElement {
${user.system_generated
? html`
- The users group is a work in progress. The user will be unable @@ -191,8 +178,8 @@ export class DialogAddUser extends LitElement { this._password = ev.detail.value; } - private async _handleGroupChange(ev): Promise
${this._error}
`
: ""}
+
+ ${this.hass.localize("ui.panel.config.users.editor.id")}: ${user.id}
+
+
+ ${user.is_owner
+ ? html`
+ ${this.hass.localize(
+ "ui.panel.config.users.editor.owner"
+ )}
+ `
+ : ""}
+ ${user.system_generated
+ ? html`
+
+ ${this.hass.localize(
+ "ui.panel.config.users.editor.system_generated"
+ )}
+
+ `
+ : ""}
+ ${user.is_active
+ ? html`
+ ${this.hass.localize(
+ "ui.panel.config.users.editor.active"
+ )}
+ `
+ : ""}
+
The users group is a work in progress. The user will be unable @@ -88,34 +114,6 @@ class DialogUserDetail extends LitElement { limit access to administrators. ` : ""} -
| - ${this.hass.localize("ui.panel.config.users.editor.id")} - | -${user.id} | -
| - ${this.hass.localize("ui.panel.config.users.editor.owner")} - | -${user.is_owner} | -
| - ${this.hass.localize("ui.panel.config.users.editor.active")} - | -${user.is_active} | -
| - ${this.hass.localize( - "ui.panel.config.users.editor.system_generated" - )} - | -${user.system_generated} | -
+
+ ${this.hass!.localize("ui.panel.config.users.editor.update_user")}
+
+ ${user.system_generated
+ ? html`
+
+ ${this.hass.localize(
+ "ui.panel.config.users.editor.system_generated_users_not_editable"
+ )}
+
`
: ""}
-
+
+ ${this._footerElement}
+
+
+
+ ${this._config.name || computeStateName(stateObj)}
+
+
+
+
+ ${"attribute" in this._config
+ ? stateObj.attributes[this._config.attribute!] ||
+ this.hass.localize("state.default.unknown")
+ : this.hass.localize(`state.default.${stateObj.state}`) ||
+ this.hass.localize(
+ `state.${this._config.entity.split(".")[0]}.${
+ stateObj.state
+ }`
+ ) ||
+ stateObj.state}${showUnit
+ ? html`
+ ${this._config.unit ||
+ (this._config.attribute
+ ? ""
+ : stateObj.attributes.unit_of_measurement)}
+ `
+ : ""}
+
+
-
-
- ${this._config.name || computeStateName(stateObj)}
-
-
-
-
- ${stateObj.state}
- ${this._config.unit ||
- stateObj.attributes.unit_of_measurement}
-
- ${graph}
- ${this._GUImode
+ ${this.GUImode
? html`
`;
}
@@ -165,7 +168,7 @@ export class HuiCardEditor extends LitElement {
super.updated(changedProperties);
if (changedProperties.has("_GUImode")) {
- if (this._GUImode === false) {
+ if (this.GUImode === false) {
// Refresh code editor when switching to yaml mode
this._refreshYamlEditor(true);
}
@@ -245,6 +248,7 @@ export class HuiCardEditor extends LitElement {
this._handleUIConfigChanged(ev as UIConfigChangedEvent)
);
+ this.GUImode = true;
return;
} catch (err) {
if (err.message.startsWith("WARNING:")) {
@@ -252,7 +256,7 @@ export class HuiCardEditor extends LitElement {
} else {
this._error = err;
}
- this._GUImode = false;
+ this.GUImode = false;
} finally {
this._loading = false;
fireEvent(this, "iron-resize");
@@ -277,10 +281,6 @@ export class HuiCardEditor extends LitElement {
.warning {
color: #ffa726;
}
- .buttons {
- text-align: right;
- padding: 8px 0px;
- }
paper-spinner {
display: block;
margin: auto;
diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
index 78e279b095..b69ab18973 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
@@ -23,11 +23,17 @@ import {
calcUnusedEntities,
} from "../../common/compute-unused-entities";
import { UNKNOWN, UNAVAILABLE } from "../../../../data/entity";
+import {
+ customCards,
+ getCustomCardEntry,
+ CUSTOM_TYPE_PREFIX,
+} from "../../../../data/lovelace_custom_cards";
const previewCards: string[] = [
"alarm-panel",
"button",
"entities",
+ "entity",
"gauge",
"glance",
"history-graph",
@@ -99,6 +105,24 @@ export class HuiCardPicker extends LitElement {
`;
})}
+ ${customCards.length
+ ? html`
+
${this._loading
@@ -145,18 +160,6 @@ export class HuiCardEditor extends LitElement {
`
: ""}
-
+ ${customCards.map((card) => {
+ return html`
+ ${until(
+ this._renderCardElement(card.type, true, true),
+ html`
+
+ `
+ : ""}
+
+ `
+ )}
+ `;
+ })}
+ {
+ const customCard = isCustom ? getCustomCardEntry(type) : undefined;
+ if (isCustom) {
+ type = `${CUSTOM_TYPE_PREFIX}${type}`;
+ }
+
let element: LovelaceCard | undefined;
let cardConfig: LovelaceCardConfig = { type };
@@ -261,7 +291,7 @@ export class HuiCardPicker extends LitElement {
this._usedEntities!
);
- if (!noElement) {
+ if (!noElement || customCard?.preview) {
element = this._createCardElement(cardConfig);
}
}
@@ -273,20 +303,25 @@ export class HuiCardPicker extends LitElement {
description: !element || element.tagName === "HUI-ERROR-CARD",
})}"
>
- ${!element || element.tagName === "HUI-ERROR-CARD"
- ? html`
- ${this.hass!.localize(
- `ui.panel.lovelace.editor.card.${cardConfig.type}.description`
- )}
- `
- : html`
- ${element}
- `}
+ ${element && element.tagName !== "HUI-ERROR-CARD"
+ ? element
+ : customCard
+ ? customCard.description ||
+ this.hass!.localize(
+ `ui.panel.lovelace.editor.cardpicker.no_description`
+ )
+ : this.hass!.localize(
+ `ui.panel.lovelace.editor.card.${cardConfig.type}.description`
+ )}
- ${this.hass!.localize(
- `ui.panel.lovelace.editor.card.${cardConfig.type}.name`
- )}
+ ${customCard
+ ? `${this.hass!.localize(
+ "ui.panel.lovelace.editor.cardpicker.custom_card"
+ )}: ${customCard.name || customCard.type}`
+ : this.hass!.localize(
+ `ui.panel.lovelace.editor.card.${cardConfig.type}.name`
+ )}
+ ${this.hass.localize(
+ "ui.panel.lovelace.editor.card.map.dark_mode"
+ )}
+
+ ${this._badges.map((badgeConfig) => {
+ return html`
+
+ `
+ : ""}
-
- `;
- }
+
+ ${(supportsFeature(stateObj, SUPPORT_VOLUME_SET) ||
+ supportsFeature(stateObj, SUPPORT_VOLUME_BUTTONS)) &&
+ ![UNAVAILABLE, UNKNOWN, "off"].includes(stateObj.state)
+ ? html`
+
- ${supportsFeature(stateObj, SUPPORT_VOLUME_MUTE)
- ? html`
-
- ${!this._veryNarrow &&
- supportsFeature(stateObj, SUPPORT_PREVIOUS_TRACK)
+ ${supportsFeature(stateObj, SUPPORT_TURN_ON) &&
+ stateObj.state === "off"
? html`
-
+
+ `
+ : ""}
`;
}
@@ -316,6 +314,33 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
volume_level: ev.target.value / 100,
});
}
+
+ static get styles(): CSSResult {
+ return css`
+ :host {
+ display: block;
+ }
+ .flex {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+ .volume {
+ display: flex;
+ flex-grow: 2;
+ flex-shrink: 2;
+ }
+ .controls {
+ white-space: nowrap;
+ }
+ ha-slider {
+ flex-grow: 2;
+ flex-shrink: 2;
+ width: 100%;
+ margin: 0 -8px 0 1px;
+ }
+ `;
+ }
}
declare global {
diff --git a/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts b/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
new file mode 100644
index 0000000000..0bdb3786af
--- /dev/null
+++ b/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
@@ -0,0 +1,182 @@
+import {
+ html,
+ LitElement,
+ TemplateResult,
+ css,
+ CSSResult,
+ property,
+ customElement,
+ PropertyValues,
+} from "lit-element";
+
+import "../../../components/entity/state-badge";
+import "../components/hui-warning";
+
+import { LovelaceRow } from "./types";
+import { HomeAssistant, WeatherEntity } from "../../../types";
+import { EntitiesCardEntityConfig } from "../cards/types";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
+import {
+ weatherIcons,
+ getWeatherUnit,
+ weatherImages,
+} from "../../../data/weather";
+
+@customElement("hui-weather-entity-row")
+class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
+ @property() public hass?: HomeAssistant;
+ @property() private _config?: EntitiesCardEntityConfig;
+
+ public setConfig(config: EntitiesCardEntityConfig): void {
+ if (!config?.entity) {
+ throw new Error("Invalid Configuration: 'entity' required");
+ }
+
+ this._config = config;
+ }
+
+ protected shouldUpdate(changedProps: PropertyValues): boolean {
+ return hasConfigOrEntityChanged(this, changedProps);
+ }
+
+ protected render(): TemplateResult {
+ if (!this.hass || !this._config) {
+ return html``;
+ }
+
+ const stateObj = this.hass.states[this._config.entity] as WeatherEntity;
+
+ if (!stateObj) {
+ return html`
+
+ ${supportsFeature(stateObj, SUPPORT_VOLUME_MUTE)
+ ? html`
+
- static get styles(): CSSResult {
- return css`
- :host {
- display: block;
- }
- .flex {
- display: flex;
- align-items: center;
- padding-left: 48px;
- justify-content: space-between;
- }
- .volume {
- display: flex;
- flex-grow: 2;
- flex-shrink: 2;
- }
- .controls {
- white-space: nowrap;
- }
- ha-slider {
- flex-grow: 2;
- flex-shrink: 2;
- width: 100%;
- }
+
+ ${buttons}
+
+
+
+
+ ${stateObj.attributes.temperature}
+ ${getWeatherUnit(this.hass, "temperature")}
+
+
+ ${this._getSecondaryAttribute(stateObj)}
+
+
+ ${this._config.prefix} ${attribute || "-"} ${this._config.suffix}
+
+
+ ${this._config.action_name
+ ? this._config.action_name
+ : this.hass!.localize("ui.card.service.run")}
+
+ `;
+ }
+
+ static get styles(): CSSResult {
+ return css`
+ :host {
+ display: flex;
+ align-items: center;
+ }
+ ha-icon {
+ padding: 8px;
+ color: var(--paper-item-icon-color);
+ }
+ .flex {
+ flex: 1;
+ overflow: hidden;
+ margin-left: 16px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ .flex div {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ mwc-button {
+ margin-right: -0.57em;
+ }
+ `;
+ }
+
+ private _handleAction(ev: ActionHandlerEvent) {
+ handleAction(this, this.hass!, this._config!, ev.detail.action!);
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-button-row": HuiButtonRow;
+ }
+}
diff --git a/src/panels/lovelace/special-rows/hui-call-service-row.ts b/src/panels/lovelace/special-rows/hui-call-service-row.ts
index a1e20b5fb2..7f9fab6051 100644
--- a/src/panels/lovelace/special-rows/hui-call-service-row.ts
+++ b/src/panels/lovelace/special-rows/hui-call-service-row.ts
@@ -1,83 +1,34 @@
-import {
- html,
- LitElement,
- TemplateResult,
- customElement,
- property,
- css,
- CSSResult,
-} from "lit-element";
-import "@material/mwc-button";
+import { customElement } from "lit-element";
-import "../../../components/ha-icon";
-
-import { callService } from "../common/call-service";
-import { LovelaceRow, CallServiceConfig } from "../entity-rows/types";
-import { HomeAssistant } from "../../../types";
+import { CallServiceConfig } from "../entity-rows/types";
+import { HuiButtonRow } from "./hui-button-row";
@customElement("hui-call-service-row")
-class HuiCallServiceRow extends LitElement implements LovelaceRow {
- public hass?: HomeAssistant;
+export class HuiCallServiceRow extends HuiButtonRow {
+ public setConfig(config: any): void {
+ const callServiceConfig: CallServiceConfig = config;
- @property() private _config?: CallServiceConfig;
-
- public setConfig(config: CallServiceConfig): void {
- if (!config || !config.name || !config.service) {
+ if (!callServiceConfig) {
throw new Error("Error in card configuration.");
}
- this._config = { icon: "hass:remote", ...config };
- }
-
- protected render(): TemplateResult {
- if (!this._config) {
- return html``;
+ if (!callServiceConfig.name) {
+ throw new Error("Error in card configuration. No name specified.");
}
- return html`
- ${this._config.name}
+
- ${this._config.action_name
- ? this._config.action_name
- : this.hass!.localize("ui.card.service.run")}
-
- `;
- }
+ if (!callServiceConfig.service) {
+ throw new Error("Error in card configuration. No service specified.");
+ }
- static get styles(): CSSResult {
- return css`
- :host {
- display: flex;
- align-items: center;
- }
- ha-icon {
- padding: 8px;
- color: var(--paper-item-icon-color);
- }
- .flex {
- flex: 1;
- overflow: hidden;
- margin-left: 16px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- .flex div {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- mwc-button {
- margin-right: -0.57em;
- }
- `;
- }
-
- private _callService() {
- callService(this._config!, this.hass!);
+ super.setConfig({
+ tap_action: {
+ action: "call-service",
+ service: callServiceConfig.service,
+ service_data: callServiceConfig.service_data,
+ },
+ ...callServiceConfig,
+ type: "button",
+ });
}
}
diff --git a/src/panels/lovelace/special-rows/hui-conditional-row.ts b/src/panels/lovelace/special-rows/hui-conditional-row.ts
index e735f13870..e7caca11e3 100644
--- a/src/panels/lovelace/special-rows/hui-conditional-row.ts
+++ b/src/panels/lovelace/special-rows/hui-conditional-row.ts
@@ -13,7 +13,12 @@ class HuiConditionalRow extends HuiConditionalBase implements LovelaceRow {
throw new Error("No row configured.");
}
+ if (this._element && this._element.parentElement) {
+ this.removeChild(this._element);
+ }
+
this._element = createRowElement(config.row) as LovelaceRow;
+ this.appendChild(this._element);
}
}
diff --git a/src/panels/lovelace/views/hui-view.ts b/src/panels/lovelace/views/hui-view.ts
index e0d7c087de..9ecbeb3163 100644
--- a/src/panels/lovelace/views/hui-view.ts
+++ b/src/panels/lovelace/views/hui-view.ts
@@ -117,7 +117,11 @@ export class HUIView extends LitElement {
padding: 4px 4px 0;
transform: translateZ(0);
position: relative;
- background: var(--lovelace-background);
+ color: var(--primary-text-color);
+ background: var(
+ --lovelace-background,
+ var(--primary-background-color)
+ );
}
#badges {
diff --git a/src/panels/map/ha-entity-marker.js b/src/panels/map/ha-entity-marker.js
index fde1bc0997..d910b7b3a4 100644
--- a/src/panels/map/ha-entity-marker.js
+++ b/src/panels/map/ha-entity-marker.js
@@ -33,7 +33,7 @@ class HaEntityMarker extends EventsMixin(PolymerElement) {
}
- ${this._config.name}
-
+
[[entityName]]