Add currency core configuration (#9620)

Co-authored-by: Joakim Sørensen <joasoe@gmail.com>
Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

package.json

@@ -107,7 +107,7 @@
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
     "hls.js": "^1.0.7",
-    "home-assistant-js-websocket": "^5.10.0",
+    "home-assistant-js-websocket": "^5.11.0",
     "idb-keyval": "^5.0.5",
     "intl-messageformat": "^9.6.16",
     "js-yaml": "^4.1.0",

src/components/currency-datalist.ts

@@ -0,0 +1,168 @@
+export const createCurrencyListEl = () => {
+  const list = document.createElement("datalist");
+  list.id = "currencies";
+  for (const currency of [
+    "AED",
+    "AFN",
+    "ALL",
+    "AMD",
+    "ANG",
+    "AOA",
+    "ARS",
+    "AUD",
+    "AWG",
+    "AZN",
+    "BAM",
+    "BBD",
+    "BDT",
+    "BGN",
+    "BHD",
+    "BIF",
+    "BMD",
+    "BND",
+    "BOB",
+    "BRL",
+    "BSD",
+    "BTN",
+    "BWP",
+    "BYR",
+    "BZD",
+    "CAD",
+    "CDF",
+    "CHF",
+    "CLP",
+    "CNY",
+    "COP",
+    "CRC",
+    "CUP",
+    "CVE",
+    "CZK",
+    "DJF",
+    "DKK",
+    "DOP",
+    "DZD",
+    "EGP",
+    "ERN",
+    "ETB",
+    "EUR",
+    "FJD",
+    "FKP",
+    "GBP",
+    "GEL",
+    "GHS",
+    "GIP",
+    "GMD",
+    "GNF",
+    "GTQ",
+    "GYD",
+    "HKD",
+    "HNL",
+    "HRK",
+    "HTG",
+    "HUF",
+    "IDR",
+    "ILS",
+    "INR",
+    "IQD",
+    "IRR",
+    "ISK",
+    "JMD",
+    "JOD",
+    "JPY",
+    "KES",
+    "KGS",
+    "KHR",
+    "KMF",
+    "KPW",
+    "KRW",
+    "KWD",
+    "KYD",
+    "KZT",
+    "LAK",
+    "LBP",
+    "LKR",
+    "LRD",
+    "LSL",
+    "LTL",
+    "LYD",
+    "MAD",
+    "MDL",
+    "MGA",
+    "MKD",
+    "MMK",
+    "MNT",
+    "MOP",
+    "MRO",
+    "MUR",
+    "MVR",
+    "MWK",
+    "MXN",
+    "MYR",
+    "MZN",
+    "NAD",
+    "NGN",
+    "NIO",
+    "NOK",
+    "NPR",
+    "NZD",
+    "OMR",
+    "PAB",
+    "PEN",
+    "PGK",
+    "PHP",
+    "PKR",
+    "PLN",
+    "PYG",
+    "QAR",
+    "RON",
+    "RSD",
+    "RUB",
+    "RWF",
+    "SAR",
+    "SBD",
+    "SCR",
+    "SDG",
+    "SEK",
+    "SGD",
+    "SHP",
+    "SLL",
+    "SOS",
+    "SRD",
+    "SSP",
+    "STD",
+    "SYP",
+    "SZL",
+    "THB",
+    "TJS",
+    "TMT",
+    "TND",
+    "TOP",
+    "TRY",
+    "TTD",
+    "TWD",
+    "TZS",
+    "UAH",
+    "UGX",
+    "USD",
+    "UYU",
+    "UZS",
+    "VEF",
+    "VND",
+    "VUV",
+    "WST",
+    "XAF",
+    "XCD",
+    "XOF",
+    "XPF",
+    "YER",
+    "ZAR",
+    "ZMK",
+    "ZWL",
+  ]) {
+    const option = document.createElement("option");
+    option.value = currency;
+    option.innerHTML = currency;
+    list.appendChild(option);
+  }
+  return list;
+};

src/data/core.ts

@@ -10,6 +10,7 @@ export interface ConfigUpdateValues {
   time_zone: string;
   external_url?: string | null;
   internal_url?: string | null;
+  currency?: string | null;
 }
 
 export interface CheckConfigResult {

src/data/currency.ts

@@ -0,0 +1,8 @@
+export const SYMBOL_TO_ISO = {
+  $: "USD",
+  "€": "EUR",
+  "¥": "JPY",
+  "£": "GBP",
+  "₽": "RUB",
+  "₹": "INR",
+};

src/fake_data/demo_config.ts

@@ -22,4 +22,5 @@ export const demoConfig: HassConfig = {
   state: STATE_RUNNING,
   internal_url: "http://homeassistant.local:8123",
   external_url: null,
+  currency: "USD",
 };

src/panels/config/core/ha-config-core-form.ts

@@ -7,11 +7,13 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { UNIT_C } from "../../../common/const";
+import { createCurrencyListEl } from "../../../components/currency-datalist";
 import "../../../components/ha-card";
 import "../../../components/map/ha-locations-editor";
 import type { MarkerLocation } from "../../../components/map/ha-locations-editor";
 import { createTimezoneListEl } from "../../../components/timezone-datalist";
 import { ConfigUpdateValues, saveCoreConfig } from "../../../data/core";
+import { SYMBOL_TO_ISO } from "../../../data/currency";
 import type { PolymerChangedEvent } from "../../../polymer-types";
 import type { HomeAssistant } from "../../../types";
 
@@ -23,6 +25,8 @@ class ConfigCoreForm extends LitElement {
 
   @state() private _location?: [number, number];
 
+  @state() private _currency?: string;
+
   @state() private _elevation?: string;
 
   @state() private _unitSystem?: ConfigUpdateValues["unit_system"];
@@ -143,6 +147,33 @@ class ConfigCoreForm extends LitElement {
               </paper-radio-button>
             </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 noreferer"
+                >${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=${disabled}
+              .value=${this._currencyValue}
+              @value-changed=${this._handleChange}
+            ></paper-input>
+          </div>
         </div>
         <div class="card-actions">
           <mwc-button @click=${this._save} .disabled=${disabled}>
@@ -157,10 +188,16 @@ class ConfigCoreForm extends LitElement {
 
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
-    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 _markerLocation = memoizeOne(
@@ -178,6 +215,12 @@ class ConfigCoreForm extends LitElement {
     ]
   );
 
+  private get _currencyValue() {
+    return this._currency !== undefined
+      ? this._currency
+      : this.hass.config.currency;
+  }
+
   private get _elevationValue() {
     return this._elevation !== undefined
       ? this._elevation
@@ -200,7 +243,15 @@ class ConfigCoreForm 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) {
@@ -223,12 +274,13 @@ class ConfigCoreForm extends LitElement {
       await saveCoreConfig(this.hass, {
         latitude: location[0],
         longitude: location[1],
+        currency: this._currencyValue,
         elevation: Number(this._elevationValue),
         unit_system: this._unitSystemValue,
         time_zone: this._timeZoneValue,
       });
     } catch (err) {
-      alert("FAIL");
+      alert(`Error saving config: ${err.message}`);
     } finally {
       this._working = false;
     }
@@ -258,6 +310,10 @@ class ConfigCoreForm extends LitElement {
       .card-actions {
         text-align: right;
       }
+
+      a {
+        color: var(--primary-color);
+      }
     `;
   }
 }

src/translations/en.json

@@ -1084,9 +1084,11 @@
                 "unit_system_metric": "Metric",
                 "imperial_example": "Fahrenheit, pounds",
                 "metric_example": "Celsius, kilograms",
+                "find_currency_value": "Find your value",
                 "save_button": "Save",
                 "external_url": "External URL",
-                "internal_url": "Internal URL"
+                "internal_url": "Internal URL",
+                "currency": "Currency"
               }
             }
           }

yarn.lock

@@ -8941,7 +8941,7 @@ fsevents@~2.3.1:
     gulp-rename: ^2.0.0
     gulp-zopfli-green: ^3.0.1
     hls.js: ^1.0.7
-    home-assistant-js-websocket: ^5.10.0
+    home-assistant-js-websocket: ^5.11.0
     html-minifier: ^4.0.0
     husky: ^1.3.1
     idb-keyval: ^5.0.5
@@ -9011,10 +9011,10 @@ fsevents@~2.3.1:
   languageName: unknown
   linkType: soft
 
-"home-assistant-js-websocket@npm:^5.10.0":
+"home-assistant-js-websocket@npm:^5.11.0":
-  version: 5.10.0
+  version: 5.11.0
-  resolution: "home-assistant-js-websocket@npm:5.10.0"
+  resolution: "home-assistant-js-websocket@npm:5.11.0"
-  checksum: 86c11025bbc1146dbc1e22492324170993c540d7744b89f19471a6e5400051fee053dd13cc1b3e46d0c61858ee2cba739681f820dc2b73cddd258e4ff04829f8
+  checksum: 7e493f2528a49a2ea8b35468a7c655f97627820542bd4dd841060ca7b34d0fc9c5b4b7cc22d0ba16f1f7932342fd5978c923fc6a213d2af05509ad8ff6912422
   languageName: node
   linkType: hard