20210224.0

hassio/src/hassio-router.ts

@@ -23,7 +23,7 @@ class HassioRouter extends HassRouterPage {
   protected routerOptions: RouterOptions = {
     // Hass.io has a page with tabs, so we route all non-matching routes to it.
     defaultPage: "dashboard",
-    initialLoad: () => this._fetchData(),
+    initialLoad: () => this._redirectIngress(),
     showLoading: true,
     routes: {
       dashboard: {
@@ -50,7 +50,13 @@ class HassioRouter extends HassRouterPage {
 
   protected updatePageEl(el) {
     // the tabs page does its own routing so needs full route.
-    const route = el.nodeName === "HASSIO-PANEL" ? this.route : this.routeTail;
+    const hassioPanel = el.nodeName === "HASSIO-PANEL";
+    const route = hassioPanel ? this.route : this.routeTail;
+
+    if (hassioPanel && this.panel.config?.ingress) {
+      this._redirectIngress();
+      return;
+    }
 
     el.hass = this.hass;
     el.narrow = this.narrow;
@@ -63,15 +69,14 @@ class HassioRouter extends HassRouterPage {
     }
   }
 
-  private async _fetchData() {
+  private async _redirectIngress() {
     if (this.panel.config && this.panel.config.ingress) {
-      this._redirectIngress(this.panel.config.ingress);
+      this.route = {
+        prefix: "/hassio",
+        path: `/ingress/${this.panel.config.ingress}`,
+      };
     }
   }
-
-  private _redirectIngress(addonSlug: string) {
-    this.route = { prefix: "/hassio", path: `/ingress/${addonSlug}` };
-  }
 }
 
 declare global {

package.json

@@ -23,6 +23,14 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@braintree/sanitize-url": "^5.0.0",
+    "@codemirror/commands": "^0.17.2",
+    "@codemirror/gutter": "^0.17.2",
+    "@codemirror/highlight": "^0.17.2",
+    "@codemirror/legacy-modes": "^0.17.1",
+    "@codemirror/state": "^0.17.1",
+    "@codemirror/stream-parser": "^0.17.1",
+    "@codemirror/text": "^0.17.2",
+    "@codemirror/view": "^0.17.7",
     "@formatjs/intl-getcanonicallocales": "^1.4.6",
     "@formatjs/intl-pluralrules": "^3.4.10",
     "@fullcalendar/common": "5.1.0",
@@ -177,7 +185,7 @@
     "eslint": "^6.8.0",
     "eslint-config-airbnb-typescript": "^7.2.1",
     "eslint-config-prettier": "^6.10.1",
-    "eslint-import-resolver-webpack": "^0.12.2",
+    "eslint-import-resolver-webpack": "^0.13.0",
     "eslint-plugin-disable": "^2.0.1",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-lit": "^1.2.0",
@@ -213,16 +221,16 @@
     "sinon": "^7.3.1",
     "source-map-url": "^0.4.0",
     "systemjs": "^6.3.2",
-    "terser-webpack-plugin": "^5.0.0",
+    "terser-webpack-plugin": "^5.1.1",
     "ts-lit-plugin": "^1.2.1",
     "ts-mocha": "^7.0.0",
     "typescript": "^4.0.3",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
-    "webpack": "5.1.3",
-    "webpack-cli": "4.1.0",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-manifest-plugin": "~3.0.0",
+    "webpack": "^5.24.1",
+    "webpack-cli": "^4.5.0",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-manifest-plugin": "^3.0.0",
     "workbox-build": "^5.1.3"
   },
   "_comment": "Polymer fixed to 3.1 because 3.2 throws on logbook page",

setup.py

@@ -2,7 +2,7 @@
 
 setup(
     name="home-assistant-frontend",
-    version="20210222.0",
+    version="20210224.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

src/common/config/version.ts

@@ -5,11 +5,15 @@ export const atLeastVersion = (
   patch?: number
 ): boolean => {
   const [haMajor, haMinor, haPatch] = version.split(".", 3);
+
   return (
     Number(haMajor) > major ||
-    (Number(haMajor) === major && Number(haMinor) >= minor) ||
+    (Number(haMajor) === major && (patch === undefined
+      ? Number(haMinor) >= minor
+      : Number(haMinor) > minor)) ||
     (patch !== undefined &&
-      Number(haMajor) === major && Number(haMinor) === minor &&
+      Number(haMajor) === major &&
+      Number(haMinor) === minor &&
       Number(haPatch) >= patch)
   );
 };

src/common/entity/battery_icon.ts

@@ -8,12 +8,19 @@ export const batteryIcon = (
   const battery = Number(batteryState.state);
   const battery_charging =
     batteryChargingState && batteryChargingState.state === "on";
+  let icon = "hass:battery";
 
   if (isNaN(battery)) {
-    return "hass:battery-unknown";
+    if (batteryState.state === "off") {
+      icon += "-full";
+    } else if (batteryState.state === "on") {
+      icon += "-alert";
+    } else {
+      icon += "-unknown";
+    }
+    return icon;
   }
 
-  let icon = "hass:battery";
   const batteryRound = Math.round(battery / 10) * 10;
   if (battery_charging && battery > 10) {
     icon += `-charging-${batteryRound}`;

src/common/style/icon_color_css.ts

@@ -15,7 +15,7 @@ export const iconColorCSS = css`
   ha-icon[data-domain="media_player"][data-state="on"],
   ha-icon[data-domain="media_player"][data-state="paused"],
   ha-icon[data-domain="media_player"][data-state="playing"],
-  ha-icon[data-domain="script"][data-state="running"],
+  ha-icon[data-domain="script"][data-state="on"],
   ha-icon[data-domain="sun"][data-state="above_horizon"],
   ha-icon[data-domain="switch"][data-state="on"],
   ha-icon[data-domain="timer"][data-state="active"],

src/components/entity/state-badge.ts

@@ -115,7 +115,7 @@ export class StateBadge extends LitElement {
             // eslint-disable-next-line
             console.warn(errorMessage);
           }
-          // lowest brighntess will be around 50% (that's pretty dark)
+          // lowest brightness will be around 50% (that's pretty dark)
           iconStyle.filter = `brightness(${(brightness + 245) / 5}%)`;
         }
       }

src/components/ha-addon-picker.ts

@@ -0,0 +1,148 @@
+import {
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  property,
+  query,
+  TemplateResult,
+} from "lit-element";
+import { isComponentLoaded } from "../common/config/is_component_loaded";
+import { fireEvent } from "../common/dom/fire_event";
+import { compare } from "../common/string/compare";
+import { HassioAddonInfo } from "../data/hassio/addon";
+import { fetchHassioSupervisorInfo } from "../data/hassio/supervisor";
+import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
+import { PolymerChangedEvent } from "../polymer-types";
+import { HomeAssistant } from "../types";
+import { HaComboBox } from "./ha-combo-box";
+
+const rowRenderer = (
+  root: HTMLElement,
+  _owner,
+  model: { item: HassioAddonInfo }
+) => {
+  if (!root.firstElementChild) {
+    root.innerHTML = `
+    <style>
+      paper-item {
+        margin: -10px 0;
+        padding: 0;
+      }
+    </style>
+    <paper-item>
+      <paper-item-body two-line="">
+        <div class='name'>[[item.name]]</div>
+        <div secondary>[[item.slug]]</div>
+      </paper-item-body>
+    </paper-item>
+    `;
+  }
+
+  root.querySelector(".name")!.textContent = model.item.name;
+  root.querySelector("[secondary]")!.textContent = model.item.slug;
+};
+
+@customElement("ha-addon-picker")
+class HaAddonPicker extends LitElement {
+  public hass!: HomeAssistant;
+
+  @property() public label?: string;
+
+  @property() public value = "";
+
+  @internalProperty() private _addons?: HassioAddonInfo[];
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @query("ha-combo-box") private _comboBox!: HaComboBox;
+
+  public open() {
+    this._comboBox?.open();
+  }
+
+  public focus() {
+    this._comboBox?.focus();
+  }
+
+  protected firstUpdated() {
+    this._getAddons();
+  }
+
+  protected render(): TemplateResult {
+    if (!this._addons) {
+      return html``;
+    }
+    return html`
+      <ha-combo-box
+        .hass=${this.hass}
+        .label=${this.label === undefined && this.hass
+          ? this.hass.localize("ui.components.addon-picker.addon")
+          : this.label}
+        .value=${this._value}
+        .renderer=${rowRenderer}
+        .items=${this._addons}
+        item-value-path="slug"
+        item-id-path="slug"
+        item-label-path="name"
+        @value-changed=${this._addonChanged}
+      ></ha-combo-box>
+    `;
+  }
+
+  private async _getAddons() {
+    try {
+      if (isComponentLoaded(this.hass, "hassio")) {
+        const supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
+        this._addons = supervisorInfo.addons.sort((a, b) =>
+          compare(a.name, b.name)
+        );
+      } else {
+        showAlertDialog(this, {
+          title: this.hass.localize(
+            "ui.componencts.addon-picker.error.no_supervisor.title"
+          ),
+          text: this.hass.localize(
+            "ui.componencts.addon-picker.error.no_supervisor.description"
+          ),
+        });
+      }
+    } catch (error) {
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.componencts.addon-picker.error.fetch_addons.title"
+        ),
+        text: this.hass.localize(
+          "ui.componencts.addon-picker.error.fetch_addons.description"
+        ),
+      });
+    }
+  }
+
+  private get _value() {
+    return this.value || "";
+  }
+
+  private _addonChanged(ev: PolymerChangedEvent<string>) {
+    ev.stopPropagation();
+    const newValue = ev.detail.value;
+
+    if (newValue !== this._value) {
+      this._setValue(newValue);
+    }
+  }
+
+  private _setValue(value: string) {
+    this.value = value;
+    setTimeout(() => {
+      fireEvent(this, "value-changed", { value });
+      fireEvent(this, "change");
+    }, 0);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-addon-picker": HaAddonPicker;
+  }
+}

src/components/ha-area-picker.ts

@@ -140,7 +140,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
         this._devices = devices;
       }),
       subscribeEntityRegistry(this.hass.connection!, (entities) => {
-        this._entities = entities;
+        this._entities = entities.filter((entity) => entity.area_id);
       }),
     ];
   }
@@ -193,11 +193,14 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
           deviceEntityLookup[entity.device_id].push(entity);
         }
         inputDevices = devices;
-        inputEntities = entities.filter((entity) => entity.area_id);
-      } else if (deviceFilter) {
-        inputDevices = devices;
-      } else if (entityFilter) {
-        inputEntities = entities.filter((entity) => entity.area_id);
+        inputEntities = entities;
+      } else {
+        if (deviceFilter) {
+          inputDevices = devices;
+        }
+        if (entityFilter) {
+          inputEntities = entities;
+        }
       }
 
       if (includeDomains) {