Merge pull request #9692 from home-assistant/dev

2025-07-18 23:06:40 +00:00 · 2021-08-02 21:10:24 -07:00 · 2021-08-02 21:10:24 -07:00 · e09ef7862e
commit e09ef7862e
parent ba20aef206 85420304d0
7 changed files with 127 additions and 47 deletions
--- a/setup.py
+++ b/setup.py
@ -2,7 +2,7 @@ from setuptools import setup, find_packages

 setup(
    name="home-assistant-frontend",
-    version="20210802.0",
+    version="20210803.0",
    description="The Home Assistant frontend",
    url="https://github.com/home-assistant/frontend",
    author="The Home Assistant Authors",
--- a/src/onboarding/onboarding-core-config.ts
+++ b/src/onboarding/onboarding-core-config.ts
@ -8,6 +8,7 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
+import { createCurrencyListEl } from "../components/currency-datalist";
 import "../components/map/ha-locations-editor";
 import type { MarkerLocation } from "../components/map/ha-locations-editor";
 import { createTimezoneListEl } from "../components/timezone-datalist";
@ -16,11 +17,12 @@ import {
  detectCoreConfig,
  saveCoreConfig,
 } from "../data/core";
+import { SYMBOL_TO_ISO } from "../data/currency";
 import { onboardCoreConfigStep } from "../data/onboarding";
 import type { PolymerChangedEvent } from "../polymer-types";
 import type { HomeAssistant } from "../types";

-const amsterdam = [52.3731339, 4.8903147];
+const amsterdam: [number, number] = [52.3731339, 4.8903147];
 const mql = matchMedia("(prefers-color-scheme: dark)");

@customElement("onboarding-core-config")
@ -31,15 +33,17 @@ class OnboardingCoreConfig extends LitElement {

  @state() private _working = false;

-  @state() private _name!: ConfigUpdateValues["location_name"];
+  @state() private _name?: ConfigUpdateValues["location_name"];

-  @state() private _location!: [number, number];
+  @state() private _location?: [number, number];

-  @state() private _elevation!: string;
+  @state() private _elevation?: string;

-  @state() private _unitSystem!: ConfigUpdateValues["unit_system"];
+  @state() private _unitSystem?: ConfigUpdateValues["unit_system"];

-  @state() private _timeZone!: string;
+  @state() private _currency?: ConfigUpdateValues["currency"];
+
+  @state() private _timeZone?: string;

  protected render(): TemplateResult {
    return html`
@ -159,6 +163,35 @@ class OnboardingCoreConfig extends LitElement {
        </paper-radio-group>
      </div>

+      <div class="row">
+            <div class="flex">
+              ${this.hass.localize(
+                "ui.panel.config.core.section.core.core_config.currency"
+              )}<br />
+              <a
+                href="https://en.wikipedia.org/wiki/ISO_4217#Active_codes"
+                target="_blank"
+                rel="noopener noreferrer"
+                >${this.hass.localize(
+                  "ui.panel.config.core.section.core.core_config.find_currency_value"
+                )}</a
+              >
+            </div>
+
+            <paper-input
+              class="flex"
+              .label=${this.hass.localize(
+                "ui.panel.config.core.section.core.core_config.currency"
+              )}
+              name="currency"
+              list="currencies"
+              .disabled=${this._working}
+              .value=${this._currencyValue}
+              @value-changed=${this._handleChange}
+            ></paper-input>
+          </div>
+        </div>
+
      <div class="footer">
        <mwc-button @click=${this._save} .disabled=${this._working}>
          ${this.onboardingLocalize(
@ -180,10 +213,15 @@ class OnboardingCoreConfig extends LitElement {
        this._save(ev);
      }
    });
-    const input = this.shadowRoot!.querySelector(
+    const tzInput = this.shadowRoot!.querySelector(
      "[name=timeZone]"
    ) as PaperInputElement;
-    input.inputElement.appendChild(createTimezoneListEl());
+    tzInput.inputElement.appendChild(createTimezoneListEl());
+
+    const cInput = this.shadowRoot!.querySelector(
+      "[name=currency]"
+    ) as PaperInputElement;
+    cInput.inputElement.appendChild(createCurrencyListEl());
  }

  private get _nameValue() {
@ -210,6 +248,10 @@ class OnboardingCoreConfig extends LitElement {
    return this._unitSystem !== undefined ? this._unitSystem : "metric";
  }

+  private get _currencyValue() {
+    return this._currency !== undefined ? this._currency : "";
+  }
+
  private _markerLocation = memoizeOne(
    (location: [number, number]): MarkerLocation[] => [
      {
@ -223,7 +265,16 @@ class OnboardingCoreConfig extends LitElement {

  private _handleChange(ev: PolymerChangedEvent<string>) {
    const target = ev.currentTarget as PaperInputElement;
-    this[`_${target.name}`] = target.value;
+
+    let value = target.value;
+
+    if (target.name === "currency" && value) {
+      if (value in SYMBOL_TO_ISO) {
+        value = SYMBOL_TO_ISO[value];
+      }
+    }
+
+    this[`_${target.name}`] = value;
  }

  private _locationChanged(ev) {
@ -240,6 +291,7 @@ class OnboardingCoreConfig extends LitElement {
    this._working = true;
    try {
      const values = await detectCoreConfig(this.hass);
+
      if (values.latitude && values.longitude) {
        this._location = [Number(values.latitude), Number(values.longitude)];
      }
@ -252,6 +304,9 @@ class OnboardingCoreConfig extends LitElement {
      if (values.time_zone) {
        this._timeZone = values.time_zone;
      }
+      if (values.currency) {
+        this._currency = values.currency;
+      }
    } catch (err) {
      alert(`Failed to detect location information: ${err.message}`);
    } finally {
@ -271,6 +326,7 @@ class OnboardingCoreConfig extends LitElement {
        elevation: Number(this._elevationValue),
        unit_system: this._unitSystemValue,
        time_zone: this._timeZoneValue || "UTC",
+        currency: this._currencyValue || "EUR",
      });
      const result = await onboardCoreConfigStep(this.hass);
      fireEvent(this, "onboarding-step", {
@ -311,6 +367,9 @@ class OnboardingCoreConfig extends LitElement {
        margin-top: 16px;
        text-align: right;
      }
+      a {
+        color: var(--primary-color);
+      }
    `;
  }
 }
--- a/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts
+++ b/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts
@ -58,6 +58,11 @@ export class DialogEnergyDeviceSettings
        @closed=${this.closeDialog}
      >
        ${this._error ? html`<p class="error">${this._error}</p>` : ""}
+        <div>
+          ${this.hass.localize(
+            `ui.panel.config.energy.device_consumption.dialog.selected_stat_intro`
+          )}
+        </div>

        <ha-statistic-picker
          .hass=${this.hass}
--- a/src/panels/energy/ha-panel-energy.ts
+++ b/src/panels/energy/ha-panel-energy.ts
@ -13,7 +13,6 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import "../../components/ha-menu-button";
 import "../../layouts/ha-app-layout";
-import { mdiCog } from "@mdi/js";

 import { haStyle } from "../../resources/styles";
 import "../lovelace/views/hui-view";
@ -60,13 +59,11 @@ class PanelEnergy extends LitElement {
      <ha-app-layout>
        <app-header fixed slot="header">
          <app-toolbar>
-            <div class="nav-title">
-              <ha-menu-button
-                .hass=${this.hass}
-                .narrow=${this.narrow}
-              ></ha-menu-button>
-              <div main-title>${this.hass.localize("panel.energy")}</div>
-            </div>
+            <ha-menu-button
+              .hass=${this.hass}
+              .narrow=${this.narrow}
+            ></ha-menu-button>
+            <div main-title>${this.hass.localize("panel.energy")}</div>
            ${this.narrow
              ? ""
              : html`
@ -75,11 +72,6 @@ class PanelEnergy extends LitElement {
                    collectionKey="energy_dashboard"
                  ></hui-energy-period-selector>
                `}
-            <a href="/config/energy?historyBack=1">
-              <mwc-icon-button>
-                <ha-svg-icon .path=${mdiCog}></ha-svg-icon>
-              </mwc-icon-button>
-            </a>
          </app-toolbar>
        </app-header>
        <hui-view
@ -128,12 +120,9 @@ class PanelEnergy extends LitElement {
          display: flex;
          justify-content: space-between;
        }
-        .nav-title {
-          display: flex;
-          align-items: center;
-        }
        hui-energy-period-selector {
-          width: 300px;
+          width: 100%;
+          padding-left: 16px;
        }
      `,
    ];
--- a/src/panels/lovelace/components/hui-energy-period-selector.ts
+++ b/src/panels/lovelace/components/hui-energy-period-selector.ts
@ -1,5 +1,5 @@
 import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
-import { endOfToday, addDays, endOfDay, isToday, isYesterday } from "date-fns";
+import { endOfToday, addDays, endOfDay, isToday, startOfToday } from "date-fns";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
@ -9,6 +9,7 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../../types";
 import "@material/mwc-icon-button/mwc-icon-button";
 import "../../../components/ha-svg-icon";
+import "@material/mwc-button/mwc-button";

@customElement("hui-energy-period-selector")
 export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
@ -33,29 +34,34 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
      return html``;
    }

-    const isStartToday = isToday(this._startDate);
-    let label;
-    if (isStartToday) {
-      label = "Today";
-    } else if (isYesterday(this._startDate)) {
-      label = "Yesterday";
-    } else {
-      label = formatDate(this._startDate, this.hass.locale);
-    }
-
    return html`
      <div class="row">
+        <div class="label">
+          ${formatDate(this._startDate, this.hass.locale)}
+        </div>
+
        <mwc-icon-button label="Previous Day" @click=${this._pickPreviousDay}>
          <ha-svg-icon .path=${mdiChevronLeft}></ha-svg-icon>
        </mwc-icon-button>
-        <div class="label">${label}</div>
        <mwc-icon-button label="Next Day" @click=${this._pickNextDay}>
          <ha-svg-icon .path=${mdiChevronRight}></ha-svg-icon>
        </mwc-icon-button>
+
+        <mwc-button
+          dense
+          outlined
+          .disabled=${isToday(this._startDate)}
+          @click=${this._pickToday}
+          >Today</mwc-button
+        >
      </div>
    `;
  }

+  private _pickToday() {
+    this._setDate(startOfToday());
+  }
+
  private _pickPreviousDay() {
    this._setDate(addDays(this._startDate!, -1));
  }
@ -83,12 +89,30 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
      .row {
        display: flex;
        align-items: center;
+        justify-content: flex-end;
      }
      .label {
-        flex: 1;
+        padding: 0 8px;
        text-align: center;
        font-size: 20px;
      }
+      mwc-icon-button {
+        --mdc-icon-button-size: 28px;
+      }
+      mwc-button {
+        padding-left: 8px;
+        --mdc-theme-primary: currentColor;
+        --mdc-button-outline-color: currentColor;
+
+        --mdc-button-disabled-outline-color: rgba(
+          var(--rgb-text-primary-color),
+          0.5
+        );
+        --mdc-button-disabled-ink-color: rgba(
+          var(--rgb-text-primary-color),
+          0.5
+        );
+      }
    `;
  }
 }
--- a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
@ -60,9 +60,9 @@ export class HuiViewEditor extends LitElement {

  get _type(): string {
    if (!this._config) {
-      return "masonary";
+      return "masonry";
    }
-    return this._config.panel ? "panel" : this._config.type || "masonary";
+    return this._config.panel ? "panel" : this._config.type || "masonry";
  }

  set config(config: LovelaceViewConfig) {
@ -125,7 +125,7 @@ export class HuiViewEditor extends LitElement {
            attr-for-selected="type"
            @iron-select=${this._typeChanged}
          >
-            ${["masonary", "sidebar", "panel"].map(
+            ${["masonry", "sidebar", "panel"].map(
              (type) => html`<paper-item .type=${type}>
                ${this.hass.localize(
                  `ui.panel.lovelace.editor.edit_view.types.${type}`
@ -167,7 +167,7 @@ export class HuiViewEditor extends LitElement {
      ...this._config,
    };
    delete newConfig.panel;
-    if (selected === "masonary") {
+    if (selected === "masonry") {
      delete newConfig.type;
    } else {
      newConfig.type = selected;
--- a/src/translations/en.json
+++ b/src/translations/en.json
@ -1052,7 +1052,10 @@
            "sub": "Tracking the energy usage of individual devices allows Home Assistant to break down your energy usage by device.",
            "learn_more": "More information on how to get started.",
            "add_stat": "Pick entity to track energy of",
-            "selected_stat": "Tracking energy for"
+            "selected_stat": "Tracking energy for",
+            "dialog": {
+              "selected_stat_intro": "Select the entity that represents the device energy usage."
+            }
          }
        },
        "helpers": {
@ -2943,7 +2946,7 @@
            },
            "type": "View type",
            "types": {
-              "masonary": "Masonary (default)",
+              "masonry": "Masonry (default)",
              "sidebar": "Sidebar",
              "panel": "Panel (1 card)"
            }