diff --git a/src/data/weather.ts b/src/data/weather.ts index be668288d1..e3ef7fa9ec 100644 --- a/src/data/weather.ts +++ b/src/data/weather.ts @@ -436,3 +436,19 @@ export const getWeatherStateIcon = ( return undefined; }; + +const DAY_IN_MILLISECONDS = 86400000; + +export const isForecastHourly = ( + forecast?: ForecastAttribute[] +): boolean | undefined => { + if (forecast && forecast?.length && forecast?.length > 2) { + const date1 = new Date(forecast[1].datetime); + const date2 = new Date(forecast[2].datetime); + const timeDiff = date2.getTime() - date1.getTime(); + + return timeDiff < DAY_IN_MILLISECONDS; + } + + return undefined; +}; diff --git a/src/dialogs/more-info/controls/more-info-weather.ts b/src/dialogs/more-info/controls/more-info-weather.ts index f34308ff61..8d401f4cd7 100644 --- a/src/dialogs/more-info/controls/more-info-weather.ts +++ b/src/dialogs/more-info/controls/more-info-weather.ts @@ -33,7 +33,11 @@ import { formatDateWeekday } from "../../../common/datetime/format_date"; import { formatTimeWeekday } from "../../../common/datetime/format_time"; import { formatNumber } from "../../../common/number/format_number"; import "../../../components/ha-svg-icon"; -import { getWeatherUnit, getWind } from "../../../data/weather"; +import { + getWeatherUnit, + getWind, + isForecastHourly, +} from "../../../data/weather"; import { HomeAssistant } from "../../../types"; const weatherIcons = { @@ -82,6 +86,8 @@ class MoreInfoWeather extends LitElement { return html``; } + const hourly = isForecastHourly(this.stateObj.attributes.forecast); + return html`
@@ -169,48 +175,49 @@ class MoreInfoWeather extends LitElement {
${this.hass.localize("ui.card.weather.forecast")}:
- ${this.stateObj.attributes.forecast.map( - (item) => html` -
- ${item.condition - ? html` - - ` - : ""} - ${!this._showValue(item.templow) - ? html` -
- ${formatTimeWeekday( - new Date(item.datetime), - this.hass.locale - )} -
- ` - : ""} - ${this._showValue(item.templow) - ? html` -
- ${formatDateWeekday( - new Date(item.datetime), - this.hass.locale - )} -
-
- ${formatNumber(item.templow, this.hass.locale)} - ${getWeatherUnit(this.hass, "temperature")} -
- ` - : ""} -
- ${this._showValue(item.temperature) - ? `${formatNumber(item.temperature, this.hass.locale)} - ${getWeatherUnit(this.hass, "temperature")}` + ${this.stateObj.attributes.forecast.map((item) => + this._showValue(item.templow) || this._showValue(item.temperature) + ? html`
+ ${item.condition + ? html` + + ` : ""} -
-
- ` + ${hourly + ? html` +
+ ${formatTimeWeekday( + new Date(item.datetime), + this.hass.locale + )} +
+ ` + : html` +
+ ${formatDateWeekday( + new Date(item.datetime), + this.hass.locale + )} +
+ `} +
+ ${this._showValue(item.templow) + ? `${formatNumber(item.templow, this.hass.locale)} + ${getWeatherUnit(this.hass, "temperature")}` + : hourly + ? "" + : "—"} +
+
+ ${this._showValue(item.temperature) + ? `${formatNumber(item.temperature, this.hass.locale)} + ${getWeatherUnit(this.hass, "temperature")}` + : "—"} +
+
` + : "" )} ` : ""} diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts index 0d599a383a..7ec93b41e7 100644 --- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts +++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts @@ -24,6 +24,7 @@ import { getWeatherStateIcon, getWeatherUnit, getWind, + isForecastHourly, weatherAttrIcons, WeatherEntity, weatherSVGStyles, @@ -177,23 +178,15 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { : undefined; const weather = !forecast || this._config?.show_current !== false; - let hourly: boolean | undefined; + const hourly = isForecastHourly(forecast); let dayNight: boolean | undefined; - if (forecast?.length && forecast?.length > 2) { - const date1 = new Date(forecast[1].datetime); - const date2 = new Date(forecast[2].datetime); - const timeDiff = date2.getTime() - date1.getTime(); + if (hourly) { + const dateFirst = new Date(forecast![0].datetime); + const datelast = new Date(forecast![forecast!.length - 1].datetime); + const dayDiff = datelast.getTime() - dateFirst.getTime(); - hourly = timeDiff < DAY_IN_MILLISECONDS; - - if (hourly) { - const dateFirst = new Date(forecast[0].datetime); - const datelast = new Date(forecast[forecast.length - 1].datetime); - const dayDiff = datelast.getTime() - dateFirst.getTime(); - - dayNight = dayDiff > DAY_IN_MILLISECONDS; - } + dayNight = dayDiff > DAY_IN_MILLISECONDS; } const weatherStateIcon = getWeatherStateIcon(stateObj.state, this); @@ -288,69 +281,76 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { ${forecast ? html`
- ${forecast.map( - (item) => html` -
-
- ${dayNight - ? html` - ${new Date(item.datetime).toLocaleDateString( - this.hass!.language, - { weekday: "short" } - )} -
- ${item.daytime === undefined || item.daytime - ? this.hass!.localize("ui.card.weather.day") - : this.hass!.localize( - "ui.card.weather.night" - )}
-
- ` - : hourly - ? html` - ${formatTime( - new Date(item.datetime), - this.hass!.locale - )} - ` - : html` - ${new Date(item.datetime).toLocaleDateString( - this.hass!.language, - { weekday: "short" } - )} - `} -
- ${item.condition !== undefined && item.condition !== null - ? html` -
- ${getWeatherStateIcon( - item.condition, - this, - !(item.daytime || item.daytime === undefined) - )} -
- ` - : ""} - ${item.temperature !== undefined && - item.temperature !== null - ? html` -
- ${formatNumber( - item.temperature, - this.hass!.locale - )}° -
- ` - : ""} - ${item.templow !== undefined && item.templow !== null - ? html` -
- ${formatNumber(item.templow, this.hass!.locale)}° -
- ` - : ""} -
- ` + ${forecast.map((item) => + this._showValue(item.templow) || + this._showValue(item.temperature) + ? html` +
+
+ ${dayNight + ? html` + ${new Date(item.datetime).toLocaleDateString( + this.hass!.language, + { weekday: "short" } + )} +
+ ${item.daytime === undefined || item.daytime + ? this.hass!.localize( + "ui.card.weather.day" + ) + : this.hass!.localize( + "ui.card.weather.night" + )}
+
+ ` + : hourly + ? html` + ${formatTime( + new Date(item.datetime), + this.hass!.locale + )} + ` + : html` + ${new Date(item.datetime).toLocaleDateString( + this.hass!.language, + { weekday: "short" } + )} + `} +
+ ${this._showValue(item.condition) + ? html` +
+ ${getWeatherStateIcon( + item.condition!, + this, + !( + item.daytime || item.daytime === undefined + ) + )} +
+ ` + : ""} +
+ ${this._showValue(item.temperature) + ? html`${formatNumber( + item.temperature, + this.hass!.locale + )}°` + : "—"} +
+
+ ${this._showValue(item.templow) + ? html`${formatNumber( + item.templow!, + this.hass!.locale + )}°` + : hourly + ? "" + : "—"} +
+
+ ` + : "" )}
` @@ -402,6 +402,10 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { this._veryVeryNarrow = card.offsetWidth < 245; } + private _showValue(item?: any): boolean { + return typeof item !== "undefined" && item !== null; + } + static get styles(): CSSResultGroup { return [ weatherSVGStyles,