Weather Card: Ability to choose Secondary Attribute (#5820)

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

@@ -200,7 +200,20 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
                 >
               </div>
               <div class="attribute">
-                ${getSecondaryWeatherAttribute(this.hass, stateObj)}
+                ${this._config.secondary_info_attribute !== undefined
+                  ? html`
+                      ${this.hass!.localize(
+                        `ui.card.weather.attributes.${this._config.secondary_info_attribute}`
+                      )}
+                      ${stateObj.attributes[
+                        this._config.secondary_info_attribute
+                      ]}
+                      ${getWeatherUnit(
+                        this.hass,
+                        this._config.secondary_info_attribute
+                      )}
+                    `
+                  : getSecondaryWeatherAttribute(this.hass, stateObj)}
               </div>
             </div>
           </div>

src/panels/lovelace/cards/types.ts

@@ -275,4 +275,5 @@ export interface WeatherForecastCardConfig extends LovelaceCardConfig {
   entity: string;
   name?: string;
   show_forecast?: boolean;
+  secondary_info_attribute?: string;
 }

src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts

@@ -22,6 +22,7 @@ const cardConfigStruct = struct({
   name: "string?",
   theme: "string?",
   show_forecast: "boolean?",
+  secondary_info_attribute: "string?",
 });
 
 const includeDomains = ["weather"];
@@ -54,6 +55,10 @@ export class HuiWeatherForecastCardEditor extends LitElement
     return this._config!.show_forecast || true;
   }
 
+  get _secondary_info_attribute(): string {
+    return this._config!.secondary_info_attribute || "";
+  }
+
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
@@ -93,12 +98,26 @@ export class HuiWeatherForecastCardEditor extends LitElement
             @value-changed=${this._valueChanged}
           ></hui-theme-select-editor>
         </div>
-        <ha-switch
-          .checked=${this._config!.show_forecast !== false}
-          .configValue=${"show_forecast"}
-          @change=${this._valueChanged}
-          >Show forecast</ha-switch
-        >
+        <div class="side-by-side">
+          <paper-input
+            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.secondary_info_attribute"
+            )} (${this.hass.localize(
+              "ui.panel.lovelace.editor.card.config.optional"
+            )})"
+            .value=${this._secondary_info_attribute}
+            .configValue=${"secondary_info_attribute"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <ha-switch
+            .checked=${this._config!.show_forecast !== false}
+            .configValue=${"show_forecast"}
+            @change=${this._valueChanged}
+            >${this.hass.localize(
+              "ui.panel.lovelace.editor.card.weather.show_forecast"
+            )}</ha-switch
+          >
+        </div>
       </div>
     `;
   }

src/translations/en.json

@@ -1841,7 +1841,8 @@
               "no_theme": "No theme",
               "unit": "Unit",
               "url": "Url",
-              "state": "State"
+              "state": "State",
+              "secondary_info_attribute": "Secondary Info Attribute"
             },
             "map": {
               "name": "Map",
@@ -1902,7 +1903,8 @@
             },
             "weather-forecast": {
               "name": "Weather Forecast",
-              "description": "The Weather Forecast card displays the weather. Very useful to include on interfaces that people display on the wall."
+              "description": "The Weather Forecast card displays the weather. Very useful to include on interfaces that people display on the wall.",
+              "show_forecast": "Show Forecast"
             }
           },
           "view": {