${this.badgeIcon
? html` - ${this.hass.localize( - "ui.panel.config.integrations.config_entry.no_devices" - )} -
- ` - : html` -
- 
+ 
+ 
-
- ${stateObj.attributes.temperature}${this.getUnit("temperature")}
+ => {
- const endTime = new Date();
- const startTime = new Date();
- startTime.setHours(endTime.getHours() - hours);
-
- const stateHistory = await fetchRecent(hass, entity, startTime, endTime);
-
- if (stateHistory.length < 1 || stateHistory[0].length < 1) {
- return undefined;
- }
-
- const coords = coordinates(stateHistory[0], hours, 500, detail);
-
- return coords;
-};
diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts
index 5f006a5ce7..3b22b8074a 100644
--- a/src/panels/lovelace/components/hui-card-options.ts
+++ b/src/panels/lovelace/components/hui-card-options.ts
@@ -157,7 +157,7 @@ export class HuiCardOptions extends LitElement {
}
paper-item.delete-item {
- color: var(--google-red-500);
+ color: var(--error-color);
}
`;
}
diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts
index abc946bbce..fe154e0775 100644
--- a/src/panels/lovelace/components/hui-generic-entity-row.ts
+++ b/src/panels/lovelace/components/hui-generic-entity-row.ts
@@ -112,6 +112,16 @@ class HuiGenericEntityRow extends LitElement {
: this.hass.localize(
"ui.panel.lovelace.cards.entities.never_triggered"
)
+ : this.config.secondary_info === "position" &&
+ stateObj.attributes.current_position !== undefined
+ ? `${this.hass.localize("ui.card.cover.position")}: ${
+ stateObj.attributes.current_position
+ }`
+ : this.config.secondary_info === "tilt-position" &&
+ stateObj.attributes.current_tilt_position !== undefined
+ ? `${this.hass.localize("ui.card.cover.tilt_position")}: ${
+ stateObj.attributes.current_tilt_position
+ }`
: "")}
`
diff --git a/src/panels/lovelace/create-element/create-row-element.ts b/src/panels/lovelace/create-element/create-row-element.ts
index e29f8ea9b8..80533bf0e5 100644
--- a/src/panels/lovelace/create-element/create-row-element.ts
+++ b/src/panels/lovelace/create-element/create-row-element.ts
@@ -41,6 +41,7 @@ const LAZY_LOAD_TYPES = {
cast: () => import("../special-rows/hui-cast-row"),
buttons: () => import("../special-rows/hui-buttons-row"),
attribute: () => import("../special-rows/hui-attribute-row"),
+ text: () => import("../special-rows/hui-text-row"),
};
const DOMAIN_TO_ELEMENT_TYPE = {
_domain_not_found: "text",
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 0c8550f39a..eb0e767a18 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
@@ -10,12 +10,18 @@ import {
} from "lit-element";
import { classMap } from "lit-html/directives/class-map";
import { until } from "lit-html/directives/until";
+import memoizeOne from "memoize-one";
+import * as Fuse from "fuse.js";
+
+import { CardPickTarget } from "../types";
+import { LovelaceCard } from "../../types";
+import { LovelaceCardConfig, LovelaceConfig } from "../../../../data/lovelace";
import { fireEvent } from "../../../../common/dom/fire_event";
import { UNAVAILABLE_STATES } from "../../../../data/entity";
-import { LovelaceCardConfig, LovelaceConfig } from "../../../../data/lovelace";
import {
- customCards,
CUSTOM_TYPE_PREFIX,
+ CustomCardEntry,
+ customCards,
getCustomCardEntry,
} from "../../../../data/lovelace_custom_cards";
import { HomeAssistant } from "../../../../types";
@@ -24,9 +30,22 @@ import {
computeUsedEntities,
} from "../../common/compute-unused-entities";
import { createCardElement } from "../../create-element/create-card-element";
-import { LovelaceCard } from "../../types";
import { getCardStubConfig } from "../get-card-stub-config";
-import { CardPickTarget } from "../types";
+
+import "../../../../common/search/search-input";
+
+interface Card {
+ type: string;
+ name?: string;
+ description?: string;
+ noElement?: boolean;
+ isCustom?: boolean;
+}
+
+interface CardElement {
+ card: Card;
+ element: TemplateResult;
+}
const previewCards: string[] = [
"alarm-panel",
@@ -63,14 +82,40 @@ const nonPreviewCards: string[] = [
export class HuiCardPicker extends LitElement {
@property() public hass?: HomeAssistant;
+ @property() private _cards: CardElement[] = [];
+
public lovelace?: LovelaceConfig;
public cardPicked?: (cardConf: LovelaceCardConfig) => void;
+ private _filter?: string;
+
private _unusedEntities?: string[];
private _usedEntities?: string[];
+ private _filterCards = memoizeOne(
+ (cardElements: CardElement[], filter?: string): CardElement[] => {
+ if (filter) {
+ let cards = cardElements.map(
+ (cardElement: CardElement) => cardElement.card
+ );
+ const options: Fuse.FuseOptions
+ ${stateObj.state in weatherImages
+ ? html`
+ 
+ `
+ : html`
+
+ ${forecast
+ ? html`
+
+
-
+ ${this._config.name || computeStateName(stateObj)}
+
+
+ ${this.hass.localize(`state.weather.${stateObj.state}`) ||
+ stateObj.state}
- ${this._showValue(stateObj.attributes.pressure)
- ? html`
-
+
- ${this.hass.localize(
- "ui.card.weather.attributes.air_pressure"
- )}:
-
- ${stateObj.attributes.pressure}
- ${this.getUnit("air_pressure")}
-
-
- `
- : ""}
- ${this._showValue(stateObj.attributes.humidity)
- ? html`
-
- ${this.hass.localize(
- "ui.card.weather.attributes.humidity"
- )}:
- ${stateObj.attributes.humidity} %
-
- `
- : ""}
- ${this._showValue(stateObj.attributes.wind_speed)
- ? html`
-
- ${this.hass.localize(
- "ui.card.weather.attributes.wind_speed"
- )}:
-
- ${stateObj.attributes.wind_speed}
- ${this.getUnit("length")}/h
-
- ${this.getWindBearing(stateObj.attributes.wind_bearing)}
-
- `
- : ""}
+
+
- ${forecast
- ? html`
-
+ ${stateObj.attributes.temperature}${getWeatherUnit(this.hass, "temperature")}
+
+
+ ${getSecondaryWeatherAttribute(this.hass, stateObj)}
- ${forecast.map(
- (item) => html`
-
- `
- : ""}
-
- `
- )}
-
- ${new Date(item.datetime).toLocaleDateString(
- this.hass!.language,
- { weekday: "short" }
- )}
- ${!this._showValue(item.templow) - ? html` - ${new Date(item.datetime).toLocaleTimeString( - this.hass!.language, - { - hour: "numeric", - } - )} - ` - : ""} -
- ${this._showValue(item.condition)
- ? html`
- - ${!this._showValue(item.templow) - ? html` - ${new Date(item.datetime).toLocaleTimeString( - this.hass!.language, - { - hour: "numeric", - } - )} - ` - : ""} -
-
- `
- : ""}
- ${this._showValue(item.temperature)
- ? html`
-
- ${item.temperature}
- ${this.getUnit("temperature")}
-
- `
- : ""}
- ${this._showValue(item.templow)
- ? html`
-
- ${item.templow} ${this.getUnit("temperature")}
-
- `
- : ""}
- ${this._showValue(item.precipitation)
- ? html`
-
- ${item.precipitation}
- ${this.getUnit("precipitation")}
-
- `
- : ""}
-
+ ${forecast.map(
+ (item) => html`
+
+ `
+ : ""}
`;
}
@@ -292,177 +274,239 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
return hasConfigOrEntityChanged(this, changedProps);
}
+ protected firstUpdated(): void {
+ this._attachObserver();
+ }
+
private _handleAction(): void {
fireEvent(this, "hass-more-info", { entityId: this._config!.entity });
}
- private getUnit(measure: string): string {
- const lengthUnit = this.hass!.config.unit_system.length || "";
- switch (measure) {
- case "air_pressure":
- return lengthUnit === "km" ? "hPa" : "inHg";
- case "length":
- return lengthUnit;
- case "precipitation":
- return lengthUnit === "km" ? "mm" : "in";
- default:
- return this.hass!.config.unit_system[measure] || "";
+ private _attachObserver(): void {
+ if (typeof ResizeObserver !== "function") {
+ import("resize-observer").then((modules) => {
+ modules.install();
+ this._attachObserver();
+ });
+ return;
}
+
+ this._resizeObserver = new ResizeObserver(
+ debounce(() => this._measureCard(), 250, false)
+ );
+
+ const card = this.shadowRoot!.querySelector("ha-card");
+ // If we show an error or warning there is no ha-card
+ if (!card) {
+ return;
+ }
+ this._resizeObserver.observe(card);
}
- private windBearingToText(degree: string): string {
- const degreenum = parseInt(degree, 10);
- if (isFinite(degreenum)) {
- // eslint-disable-next-line no-bitwise
- return cardinalDirections[(((degreenum + 11.25) / 22.5) | 0) % 16];
+ private _measureCard() {
+ this._narrow = this.offsetWidth < 375;
+ if (this.offsetWidth < 300) {
+ this.setAttribute("verynarrow", "");
+ } else {
+ this.removeAttribute("verynarrow");
}
- return degree;
- }
-
- private getWindBearing(bearing: string): string {
- if (bearing != null) {
- const cardinalDirection = this.windBearingToText(bearing);
- return `(${
- this.hass!.localize(
- `ui.card.weather.cardinal_direction.${cardinalDirection.toLowerCase()}`
- ) || cardinalDirection
- })`;
+ if (this.offsetWidth < 200) {
+ this.setAttribute("veryverynarrow", "");
+ } else {
+ this.removeAttribute("veryverynarrow");
}
- return ``;
- }
-
- private _showValue(item: string): boolean {
- return typeof item !== "undefined" && item !== null;
}
static get styles(): CSSResult {
return css`
:host {
+ display: block;
+ }
+
+ ha-card {
cursor: pointer;
+ padding: 16px;
}
.content {
- padding: 0 20px 20px;
- }
-
- ha-icon {
- color: var(--paper-item-icon-color);
- }
-
- .header {
- font-family: var(--paper-font-headline_-_font-family);
- -webkit-font-smoothing: var(
- --paper-font-headline_-_-webkit-font-smoothing
- );
- font-size: var(--paper-font-headline_-_font-size);
- font-weight: var(--paper-font-headline_-_font-weight);
- letter-spacing: var(--paper-font-headline_-_letter-spacing);
- line-height: var(--paper-font-headline_-_line-height);
- text-rendering: var(
- --paper-font-common-expensive-kerning_-_text-rendering
- );
- opacity: var(--dark-primary-opacity);
- padding: 24px 16px 16px;
display: flex;
- align-items: baseline;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ align-items: center;
}
- .name {
- margin-left: 16px;
- font-size: 16px;
- color: var(--secondary-text-color);
+ .icon-info {
+ display: flex;
+ align-items: center;
+ min-width: 0;
+ flex: 1;
}
- :host([rtl]) .name {
- margin-left: 0px;
+ .weather-image,
+ .weather-icon {
+ flex: 0 0 66px;
margin-right: 16px;
}
- .now {
+ .weather-icon {
+ --iron-icon-width: 66px;
+ --iron-icon-height: 66px;
+ }
+
+ .info {
+ overflow: hidden;
+ }
+
+ .name {
+ font-size: 16px;
+ color: var(--secondary-text-color);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .state {
+ font-size: 28px;
+ line-height: 1.2;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .temp-attribute {
display: flex;
- justify-content: space-between;
- align-items: center;
- flex-wrap: wrap;
+ flex-direction: column;
+ align-items: flex-end;
}
- .main {
- display: flex;
- align-items: center;
- margin-right: 32px;
- }
-
- :host([rtl]) .main {
- margin-right: 0px;
- }
-
- .main ha-icon {
- --iron-icon-height: 72px;
- --iron-icon-width: 72px;
- margin-right: 8px;
- }
-
- :host([rtl]) .main ha-icon {
- margin-right: 0px;
- }
-
- .main .temp {
- font-size: 52px;
- line-height: 1em;
+ .temp-attribute .temp {
position: relative;
+ font-size: 38px;
+ line-height: 1;
+ margin-right: 24px;
}
- :host([rtl]) .main .temp {
- direction: ltr;
- margin-right: 28px;
- }
-
- .main .temp span {
- font-size: 24px;
- line-height: 1em;
+ .temp-attribute .temp span {
position: absolute;
+ font-size: 24px;
top: 4px;
}
- .measurand {
- display: inline-block;
- }
-
- :host([rtl]) .measurand {
- direction: ltr;
- }
-
.forecast {
- margin-top: 16px;
display: flex;
justify-content: space-between;
+ padding-top: 16px;
}
- .forecast div {
- flex: 0 0 auto;
+ .forecast > div {
text-align: center;
}
- .forecast .icon {
+ .forecast .icon,
+ .forecast .temp {
margin: 4px 0;
- text-align: center;
}
- :host([rtl]) .forecast .temp {
- direction: ltr;
+ .forecast .temp {
+ font-size: 16px;
}
- .weekday {
- font-weight: bold;
+ .forecast-image-icon {
+ padding-top: 4px;
+ padding-bottom: 4px;
}
- .attributes,
- .templow,
- .precipitation {
+ .forecast-image {
+ width: 40px;
+ }
+
+ .forecast-icon {
+ --iron-icon-width: 40px;
+ --iron-icon-height: 40px;
+ }
+
+ .attribute {
+ line-height: 1;
+ }
+
+ .attribute,
+ .templow {
color: var(--secondary-text-color);
}
- :host([rtl]) .precipitation {
- direction: ltr;
+ :host([narrow]) .weather-image {
+ flex: 0 0 58px;
+ }
+
+ :host([narrow]) .weather-icon {
+ --iron-icon-width: 58px;
+ --iron-icon-height: 58px;
+ }
+
+ :host([narrow]) .state {
+ font-size: 22px;
+ }
+
+ :host([narrow]) .temp-attribute .temp {
+ font-size: 44px;
+ margin-right: 18px;
+ }
+
+ :host([narrow]) .temp-attribute .temp span {
+ font-size: 18px;
+ top: 3px;
+ }
+
+ :host([narrow]) .attribute {
+ display: none;
+ }
+
+ :host([narrow]) .forecast {
+ justify-content: space-around;
+ }
+
+ :host([veryVeryNarrow]) .content {
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ :host([veryNarrow]) .icon-info {
+ flex: initial;
+ }
+
+ :host([narrow]) .weather-image {
+ flex: 0 0 48px;
+ }
+
+ :host([narrow]) .weather-icon {
+ --iron-icon-width: 48px;
+ --iron-icon-height: 48px;
+ }
+
+ :host([veryNarrow]) .info {
+ display: none;
+ }
+
+ :host([veryNarrow]) .temp-attribute .temp {
+ font-size: 36px;
+ }
+
+ :host([veryNarrow]) .temp-attribute .temp span {
+ top: 2px;
+ }
+
+ :host([veryVeryNarrow]) .temp-attribute {
+ padding-top: 4px;
+ }
+
+ .unavailable {
+ height: 100px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 16px;
+ padding: 10px 20px;
+ text-align: center;
}
`;
}
diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts
index 8fb6bfeb7e..5dd1c46ac1 100644
--- a/src/panels/lovelace/cards/types.ts
+++ b/src/panels/lovelace/cards/types.ts
@@ -29,7 +29,12 @@ export interface EntityCardConfig extends LovelaceCardConfig {
export interface EntitiesCardEntityConfig extends EntityConfig {
type?: string;
- secondary_info?: "entity-id" | "last-changed";
+ secondary_info?:
+ | "entity-id"
+ | "last-changed"
+ | "last-triggered"
+ | "position"
+ | "tilt-position";
action_name?: string;
service?: string;
service_data?: object;
@@ -269,4 +274,5 @@ export interface ThermostatCardConfig extends LovelaceCardConfig {
export interface WeatherForecastCardConfig extends LovelaceCardConfig {
entity: string;
name?: string;
+ show_forecast?: boolean;
}
diff --git a/src/panels/lovelace/common/generate-lovelace-config.ts b/src/panels/lovelace/common/generate-lovelace-config.ts
index a5aafbadeb..6190d6e4fb 100644
--- a/src/panels/lovelace/common/generate-lovelace-config.ts
+++ b/src/panels/lovelace/common/generate-lovelace-config.ts
@@ -41,6 +41,7 @@ import {
} from "../cards/types";
import { processEditorEntities } from "../editor/process-editor-entities";
import { LovelaceRowConfig, WeblinkConfig } from "../entity-rows/types";
+import { domainToName } from "../../../data/integration";
const DEFAULT_VIEW_ENTITY_ID = "group.default_view";
const DOMAINS_BADGES = [
@@ -301,7 +302,7 @@ const generateViewConfig = (
entities[entityId],
]),
{
- title: localize(`domain.${domain}`),
+ title: domainToName(localize, domain),
}
)
);
diff --git a/src/panels/lovelace/common/graph/get-history-coordinates.ts b/src/panels/lovelace/common/graph/get-history-coordinates.ts
deleted file mode 100644
index 9e0d2ba864..0000000000
--- a/src/panels/lovelace/common/graph/get-history-coordinates.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { fetchRecent } from "../../../../data/history";
-import { HomeAssistant } from "../../../../types";
-import { coordinates } from "./coordinates";
-
-export const getHistoryCoordinates = async (
- hass: HomeAssistant,
- entity: string,
- hours: number,
- detail: number
-): Promise
+
+ `
+ )}
+
+ ${hourly
+ ? html`
+ ${new Date(item.datetime).toLocaleTimeString(
+ this.hass!.language,
+ {
+ hour: "numeric",
+ }
+ )}
+ `
+ : html`
+ ${new Date(item.datetime).toLocaleDateString(
+ this.hass!.language,
+ { weekday: "short" }
+ )}
+ `}
+
+ ${item.condition !== undefined && item.condition !== null
+ ? html`
+
+ ${item.condition in weatherImages
+ ? html`
+ 
+ `
+ : item.condition in weatherIcons
+ ? html`
+
+ `
+ : ""}
+ ${item.temperature !== undefined &&
+ item.temperature !== null
+ ? html`
+
+ ${item.temperature}°
+
+ `
+ : ""}
+ ${item.templow !== undefined && item.templow !== null
+ ? html`
+
+ ${item.templow}°
+
+ `
+ : ""}
+
- ${previewCards.map((type: string) => {
- return html`
- ${until(
- this._renderCardElement(type),
- html`
-
- ${customCards.length
- ? html`
-
-
- `
- )}
- `;
- })}
- ${nonPreviewCards.map((type: string) => {
- return html`
- ${until(
- this._renderCardElement(type, true),
- html`
-
-
- `
- )}
- `;
- })}
+ ${this._filterCards(this._cards, this._filter).map(
+ (cardElement: CardElement) => cardElement.element
+ )}
- ${customCards.map((card) => {
- return html`
- ${until(
- this._renderCardElement(card.type, true, true),
- html`
-
- `
- : ""}
-
- `
- )}
- `;
- })}
- ({
+ type,
+ name: this.hass!.localize(`ui.panel.lovelace.editor.card.${type}.name`),
+ description: this.hass!.localize(
+ `ui.panel.lovelace.editor.card.${type}.description`
+ ),
+ }))
+ .concat(
+ nonPreviewCards.map((type: string) => ({
+ type,
+ name: this.hass!.localize(
+ `ui.panel.lovelace.editor.card.${type}.name`
+ ),
+ description: this.hass!.localize(
+ `ui.panel.lovelace.editor.card.${type}.description`
+ ),
+ noElement: true,
+ }))
+ );
+ if (customCards.length > 0) {
+ cards = cards.concat(
+ customCards.map((ccard: CustomCardEntry) => ({
+ type: ccard.type,
+ name: ccard.name,
+ description: ccard.description,
+ noElement: true,
+ isCustom: true,
+ }))
+ );
+ }
+ this._cards = cards.map((card: Card) => ({
+ card: card,
+ element: html`${until(
+ this._renderCardElement(card),
+ html`
+ {
+ private async _renderCardElement(card: Card): Promise {
+ let { type } = card;
+ const { noElement, isCustom, name, description } = card;
const customCard = isCustom ? getCustomCardEntry(type) : undefined;
if (isCustom) {
type = `${CUSTOM_TYPE_PREFIX}${type}`;
@@ -324,18 +384,14 @@ export class HuiCardPicker extends LitElement {
this.hass!.localize(
`ui.panel.lovelace.editor.cardpicker.no_description`
)
- : this.hass!.localize(
- `ui.panel.lovelace.editor.card.${cardConfig.type}.description`
- )}
+ : description}
+
+ `
+ )}`,
+ }));
+ }
+
+ private _handleSearchChange(ev: CustomEvent) {
+ this._filter = ev.detail.value;
this.requestUpdate();
}
@@ -194,6 +255,7 @@ export class HuiCardPicker extends LitElement {
.card {
height: 100%;
+ max-width: 500px;
display: flex;
flex-direction: column;
border-radius: 4px;
@@ -279,11 +341,9 @@ export class HuiCardPicker extends LitElement {
return element;
}
- private async _renderCardElement(
- type: string,
- noElement = false,
- isCustom = false
- ): Promise
${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`
- )}
+ : name}
+
+