Support twice daily forecasts in weather-forecast-card (#6065)

Co-authored-by: Zack Arnett <arnett.zackary@gmail.com>

src/data/weather.ts

@@ -210,7 +210,10 @@ export const weatherSVGStyles = css`
   }
 `;
 
-export const getWeatherStateSVG = (state: string): SVGTemplateResult => {
+export const getWeatherStateSVG = (
+  state: string,
+  nightTime?: boolean
+): SVGTemplateResult => {
   return svg`
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -237,7 +240,14 @@ export const getWeatherStateSVG = (state: string): SVGTemplateResult => {
       : ""
   }
   ${
-    state === "partlycloudy"
+    state === "partlycloudy" && nightTime
+      ? svg`
+          <path
+            class="moon"
+            d="m14.981 4.2112c0 1.9244-1.56 3.4844-3.484 3.4844-1.9244 0-3.4844-1.56-3.4844-3.4844s1.56-3.484 3.4844-3.484c1.924 0 3.484 1.5596 3.484 3.484"
+          />
+        `
+      : state === "partlycloudy"
       ? svg`
           <path
             class="sun"
@@ -343,7 +353,8 @@ export const getWeatherStateSVG = (state: string): SVGTemplateResult => {
 
 export const getWeatherStateIcon = (
   state: string,
-  element: HTMLElement
+  element: HTMLElement,
+  nightTime?: boolean
 ): TemplateResult | undefined => {
   const userDefinedIcon = getComputedStyle(element).getPropertyValue(
     `--weather-icon-${state}`
@@ -360,7 +371,7 @@ export const getWeatherStateIcon = (
   }
 
   if (weatherSVGs.has(state)) {
-    return html`${getWeatherStateSVG(state)}`;
+    return html`${getWeatherStateSVG(state, nightTime)}`;
   }
 
   if (state in weatherIcons) {

src/panels/lovelace/cards/hui-weather-forecast-card.ts

@@ -163,6 +163,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         : undefined;
 
     let hourly: boolean | undefined;
+    let dayNight: boolean | undefined;
 
     if (forecast?.length && forecast?.length > 2) {
       const date1 = new Date(forecast[1].datetime);
@@ -170,6 +171,14 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
       const timeDiff = date2.getTime() - date1.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;
+      }
     }
 
     const weatherStateIcon = getWeatherStateIcon(stateObj.state, this);
@@ -235,7 +244,21 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
                   (item) => html`
                     <div>
                       <div>
-                        ${hourly
+                        ${dayNight
+                          ? html`
+                              ${new Date(item.datetime).toLocaleDateString(
+                                this.hass!.language,
+                                { weekday: "short" }
+                              )}
+                              <div class="daynight">
+                                ${item.daytime === undefined || item.daytime
+                                  ? this.hass!.localize("ui.card.weather.day")
+                                  : this.hass!.localize(
+                                      "ui.card.weather.night"
+                                    )}<br />
+                              </div>
+                            `
+                          : hourly
                           ? html`
                               ${new Date(item.datetime).toLocaleTimeString(
                                 this.hass!.language,
@@ -254,7 +277,11 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
                       ${item.condition !== undefined && item.condition !== null
                         ? html`
                             <div class="forecast-image-icon">
-                              ${getWeatherStateIcon(item.condition, this)}
+                              ${getWeatherStateIcon(
+                                item.condition,
+                                this,
+                                !(item.daytime || item.daytime === undefined)
+                              )}
                             </div>
                           `
                         : ""}
@@ -445,6 +472,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
 
         .attribute,
         .templow,
+        .daynight,
         .name {
           color: var(--secondary-text-color);
         }

src/translations/en.json

@@ -254,6 +254,8 @@
           "wnw": "WNW",
           "wsw": "WSW"
         },
+        "day": "Day",
+        "night": "Night",
         "forecast": "Forecast",
         "high": "High",
         "low": "Low"

src/types.ts

@@ -341,6 +341,7 @@ interface ForecastAttribute {
   precipitation_probability?: number;
   humidity?: number;
   condition?: string;
+  daytime?: boolean;
 }
 
 export type WeatherEntity = HassEntityBase & {