mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-22 00:36:34 +00:00
Convert weather-forecast to LitElement (#3623)
* Convert weather-forecast to LitElement Part of https://github.com/home-assistant/home-assistant-polymer/issues/2095 Not sure how RTL works and how to apply it. Also, thinking I should update if the forecast changes and not just the state. Input? * Revert "Convert weather-forecast to LitElement" This reverts commit e1893b0a83f5973df7a28e5d30c3d4d0496155a1. * Convert weather-forecast to LitElement Part of https://github.com/home-assistant/home-assistant-polymer/issues/2095 Not sure how RTL works and how to apply it. Also, thinking I should update if the forecast changes and not just the state. Input? * address review comments and add types * address review comments
This commit is contained in:
Ian Richardson
Paulus Schoutsen
parent
46968bb565
commit
8e0c39e451
@ -1,24 +0,0 @@
|
||||
import "../../../cards/ha-weather-card";
|
||||
|
||||
import LegacyWrapperCard from "./hui-legacy-wrapper-card";
|
||||
|
||||
class HuiWeatherForecastCard extends LegacyWrapperCard {
|
||||
static async getConfigElement() {
|
||||
await import(/* webpackChunkName: "hui-weather-forecast-card-editor" */ "../editor/config-elements/hui-weather-forecast-card-editor");
|
||||
return document.createElement("hui-weather-forecast-card-editor");
|
||||
}
|
||||
|
||||
static getStubConfig() {
|
||||
return {};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super("ha-weather-card", "weather");
|
||||
}
|
||||
|
||||
getCardSize() {
|
||||
return 4;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-weather-forecast-card", HuiWeatherForecastCard);
|
||||
433
src/panels/lovelace/cards/hui-weather-forecast-card.ts
Normal file
433
src/panels/lovelace/cards/hui-weather-forecast-card.ts
Normal file
@ -0,0 +1,433 @@
|
||||
import {
|
||||
html,
|
||||
LitElement,
|
||||
PropertyValues,
|
||||
TemplateResult,
|
||||
css,
|
||||
CSSResult,
|
||||
property,
|
||||
customElement,
|
||||
} from "lit-element";
|
||||
|
||||
import "../../../components/ha-card";
|
||||
import "../components/hui-warning";
|
||||
|
||||
import isValidEntityId from "../../../common/entity/valid_entity_id";
|
||||
import computeStateName from "../../../common/entity/compute_state_name";
|
||||
|
||||
import { HomeAssistant } from "../../../types";
|
||||
import { hasConfigOrEntityChanged } from "../common/has-changed";
|
||||
import { LovelaceCard, LovelaceCardEditor } from "../types";
|
||||
import { WeatherForecastCardConfig } from "./types";
|
||||
import { computeRTL } from "../../../common/util/compute_rtl";
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import { toggleAttribute } from "../../../common/dom/toggle_attribute";
|
||||
|
||||
const cardinalDirections = [
|
||||
"N",
|
||||
"NNE",
|
||||
"NE",
|
||||
"ENE",
|
||||
"E",
|
||||
"ESE",
|
||||
"SE",
|
||||
"SSE",
|
||||
"S",
|
||||
"SSW",
|
||||
"SW",
|
||||
"WSW",
|
||||
"W",
|
||||
"WNW",
|
||||
"NW",
|
||||
"NNW",
|
||||
"N",
|
||||
];
|
||||
|
||||
const weatherIcons = {
|
||||
"clear-night": "hass:weather-night",
|
||||
cloudy: "hass:weather-cloudy",
|
||||
exceptional: "hass:alert-circle-outline",
|
||||
fog: "hass:weather-fog",
|
||||
hail: "hass:weather-hail",
|
||||
lightning: "hass:weather-lightning",
|
||||
"lightning-rainy": "hass:weather-lightning-rainy",
|
||||
partlycloudy: "hass:weather-partly-cloudy",
|
||||
pouring: "hass:weather-pouring",
|
||||
rainy: "hass:weather-rainy",
|
||||
snowy: "hass:weather-snowy",
|
||||
"snowy-rainy": "hass:weather-snowy-rainy",
|
||||
sunny: "hass:weather-sunny",
|
||||
windy: "hass:weather-windy",
|
||||
"windy-variant": "hass:weather-windy-variant",
|
||||
};
|
||||
|
||||
@customElement("hui-weather-forecast-card")
|
||||
class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
|
||||
public static async getConfigElement(): Promise<LovelaceCardEditor> {
|
||||
await import(/* webpackChunkName: "hui-weather-forecast-card-editor" */ "../editor/config-elements/hui-weather-forecast-card-editor");
|
||||
return document.createElement("hui-weather-forecast-card-editor");
|
||||
}
|
||||
public static getStubConfig(): object {
|
||||
return { entity: "" };
|
||||
}
|
||||
|
||||
@property() public hass?: HomeAssistant;
|
||||
|
||||
@property() private _config?: WeatherForecastCardConfig;
|
||||
|
||||
public getCardSize(): number {
|
||||
return 4;
|
||||
}
|
||||
|
||||
public setConfig(config: WeatherForecastCardConfig): void {
|
||||
if (!config || !config.entity) {
|
||||
throw new Error("Invalid card configuration");
|
||||
}
|
||||
if (!isValidEntityId(config.entity)) {
|
||||
throw new Error("Invalid Entity");
|
||||
}
|
||||
|
||||
this._config = config;
|
||||
}
|
||||
|
||||
protected updated(changedProps: PropertyValues): void {
|
||||
super.updated(changedProps);
|
||||
if (changedProps.has("hass")) {
|
||||
toggleAttribute(this, "rtl", computeRTL(this.hass!));
|
||||
}
|
||||
}
|
||||
|
||||
protected render(): TemplateResult | void {
|
||||
if (!this._config || !this.hass) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
const stateObj = this.hass.states[this._config.entity];
|
||||
|
||||
if (!stateObj) {
|
||||
return html`
|
||||
<hui-warning
|
||||
>${this.hass.localize(
|
||||
"ui.panel.lovelace.warning.entity_not_found",
|
||||
"entity",
|
||||
this._config.entity
|
||||
)}</hui-warning
|
||||
>
|
||||
`;
|
||||
}
|
||||
|
||||
const forecast = stateObj.attributes.forecast
|
||||
? stateObj.attributes.forecast.slice(0, 5)
|
||||
: undefined;
|
||||
|
||||
return html`
|
||||
<ha-card @click="${this.handleClick}">
|
||||
<div class="header">
|
||||
${this.hass.localize(`state.weather.${stateObj.state}`) ||
|
||||
stateObj.state}
|
||||
<div class="name">
|
||||
${(this._config && this._config.name) || computeStateName(stateObj)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="now">
|
||||
<div class="main">
|
||||
${stateObj.state in weatherIcons
|
||||
? html`
|
||||
<ha-icon icon="${weatherIcons[stateObj.state]}"></ha-icon>
|
||||
`
|
||||
: ""}
|
||||
<div class="temp">
|
||||
${stateObj.attributes.temperature}<span
|
||||
>${this.getUnit("temperature")}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="attributes">
|
||||
${this._showValue(stateObj.attributes.pressure)
|
||||
? html`
|
||||
<div>
|
||||
${this.hass.localize(
|
||||
"ui.card.weather.attributes.air_pressure"
|
||||
)}:
|
||||
<span class="measurand">
|
||||
${stateObj.attributes.pressure}
|
||||
${this.getUnit("air_pressure")}
|
||||
</span>
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
${this._showValue(stateObj.attributes.humidity)
|
||||
? html`
|
||||
<div>
|
||||
${this.hass.localize(
|
||||
"ui.card.weather.attributes.humidity"
|
||||
)}:
|
||||
<span class="measurand"
|
||||
>${stateObj.attributes.humidity} %</span
|
||||
>
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
${this._showValue(stateObj.attributes.wind_speed)
|
||||
? html`
|
||||
<div>
|
||||
${this.hass.localize(
|
||||
"ui.card.weather.attributes.wind_speed"
|
||||
)}:
|
||||
<span class="measurand">
|
||||
${stateObj.attributes.wind_speed}
|
||||
${this.getUnit("length")}/h
|
||||
</span>
|
||||
${this.getWindBearing(stateObj.attributes.wind_bearing)}
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
</div>
|
||||
${forecast
|
||||
? html`
|
||||
<div class="forecast">
|
||||
${forecast.map(
|
||||
(item) => html`
|
||||
<div>
|
||||
<div class="weekday">
|
||||
${new Date(item.datetime).toLocaleDateString(
|
||||
this.hass!.language,
|
||||
{ weekday: "short" }
|
||||
)}<br />
|
||||
${!this._showValue(item.templow)
|
||||
? html`
|
||||
${new Date(item.datetime).toLocaleTimeString(
|
||||
this.hass!.language,
|
||||
{ hour: "numeric" }
|
||||
)}
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
${this._showValue(item.condition)
|
||||
? html`
|
||||
<div class="icon">
|
||||
<ha-icon
|
||||
.icon="${weatherIcons[item.condition]}"
|
||||
></ha-icon>
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
${this._showValue(item.temperature)
|
||||
? html`
|
||||
<div class="temp">
|
||||
${item.temperature}
|
||||
${this.getUnit("temperature")}
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
${this._showValue(item.templow)
|
||||
? html`
|
||||
<div class="templow">
|
||||
${item.templow} ${this.getUnit("temperature")}
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
${this._showValue(item.precipitation)
|
||||
? html`
|
||||
<div class="precipitation">
|
||||
${item.precipitation}
|
||||
${this.getUnit("precipitation")}
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
protected shouldUpdate(changedProps: PropertyValues): boolean {
|
||||
return hasConfigOrEntityChanged(this, changedProps);
|
||||
}
|
||||
|
||||
private handleClick(): 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 windBearingToText(degree: string): string {
|
||||
const degreenum = parseInt(degree, 10);
|
||||
if (isFinite(degreenum)) {
|
||||
// tslint:disable-next-line: no-bitwise
|
||||
return cardinalDirections[(((degreenum + 11.25) / 22.5) | 0) % 16];
|
||||
}
|
||||
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})`;
|
||||
}
|
||||
return ``;
|
||||
}
|
||||
|
||||
private _showValue(item: string): boolean {
|
||||
return typeof item !== "undefined" && item !== null;
|
||||
}
|
||||
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
:host {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-left: 16px;
|
||||
font-size: 16px;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
:host([rtl]) .name {
|
||||
margin-left: 0px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.now {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.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;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
:host([rtl]) .main .temp {
|
||||
direction: ltr;
|
||||
margin-right: 28px;
|
||||
}
|
||||
|
||||
.main .temp span {
|
||||
font-size: 24px;
|
||||
line-height: 1em;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.measurand {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
:host([rtl]) .measurand {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.forecast {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.forecast div {
|
||||
flex: 0 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.forecast .icon {
|
||||
margin: 4px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:host([rtl]) .forecast .temp {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.weekday {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.attributes,
|
||||
.templow,
|
||||
.precipitation {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
:host([rtl]) .precipitation {
|
||||
direction: ltr;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"hui-weather-forecast-card": HuiWeatherForecastCard;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user