20190427.0

hassio/src/addon-view/hassio-addon-info.js

@@ -1,6 +1,7 @@
 import "@polymer/iron-icon/iron-icon";
 import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
+import "@polymer/paper-tooltip/paper-tooltip";
 import "@polymer/paper-toggle-button/paper-toggle-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -109,10 +110,18 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
           margin: 16px 0;
           display: block;
         }
+        .state {
+          display: flex;
+          margin: 8px 0;
+        }
         .state div {
           width: 180px;
           display: inline-block;
         }
+        .state iron-icon {
+          width: 16px;
+          color: var(--secondary-text-color);
+        }
         paper-toggle-button {
           display: inline;
         }
@@ -156,6 +165,9 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
           margin-right: 4px;
           --iron-icon-height: 45px;
         }
+        .protection-enable mwc-button {
+          --mdc-theme-primary: white;
+        }
       </style>
 
       <template is="dom-if" if="[[computeUpdateAvailable(addon)]]">
@@ -188,6 +200,18 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
         </paper-card>
       </template>
 
+      <template is="dom-if" if="[[!addon.protected]]">
+        <paper-card heading="Warning: Protection mode is disabled!" class="warning">
+          <div class="card-content">
+            Protection mode on this add-on is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this add-on.
+          </div>
+          <div class="card-actions protection-enable">
+              <mwc-button on-click="protectionToggled">Enable Protection mode</mwc-button>
+            </div>
+          </div>
+        </paper-card>
+      </template>
+
       <paper-card>
         <div class="card-content">
           <div class="addon-header">
@@ -226,22 +250,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
               <img src="/api/hassio/addons/[[addonSlug]]/logo" />
             </a>
           </template>
-          <template is="dom-if" if="[[!addon.protected]]">
-            <paper-card heading="Warning: Protection mode is disabled!" class="warning">
-              <div class="card-content">
-                Protection mode on this add-on is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this add-on.
-              </div>
-              <div class="card-actions">
-                  <mwc-button on-click="protectionToggled">Enable Protection mode</mwc-button>
-                </div>
-              </div>
-            </paper-card>
-          </template>
           <div class="security">
-              <h3>Add-on Security Rating</h3>
-              <div class="description light-color">
-                Hass.io provides a security rating to each of the add-ons, which indicates the risks involved when using this add-on. The more access an add-on requires on your system, the lower the score, thus raising the possible security risks.
-              </div>
               <ha-label-badge
                 class$="[[computeSecurityClassName(addon.rating)]]"
                 on-click="showMoreInfo"
@@ -348,22 +357,32 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
                 checked="[[addon.auto_update]]"
               ></paper-toggle-button>
             </div>
-            <div class="state">
-              <div>Protection mode</div>
-              <paper-toggle-button
-                on-change="protectionToggled"
-                checked="[[addon.protected]]"
-              ></paper-toggle-button>
-            </div>
             <template is="dom-if" if="[[addon.ingress]]">
               <div class="state">
-                <div>Show in Sidebar</div>
+                <div>Show in sidebar</div>
                 <paper-toggle-button
                   on-change="panelToggled"
                   checked="[[addon.ingress_panel]]"
+                  disabled="[[_computeCannotIngressSidebar(hass, addon)]]"
                 ></paper-toggle-button>
+                <template is="dom-if" if="[[_computeCannotIngressSidebar(hass, addon)]]">
+                  <span>This option requires Home Assistant 0.92 or later.</span>
+                </template>
               </div>
             </template>
+            <div class="state">
+              <div>
+                Protection mode
+                <span>
+                  <iron-icon icon="hassio:information"></iron-icon>
+                  <paper-tooltip>Grant the add-on elevated system access.</paper-tooltip>
+                </span>
+              </div>
+              <paper-toggle-button
+                on-change="protectionToggled"
+                checked="[[addon.protected]]"
+              ></paper-toggle-button>
+            </div>
           </template>
         </div>
         <div class="card-actions">
@@ -580,5 +599,14 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
         this.fire("hass-api-called", eventData);
       });
   }
+
+  _computeCannotIngressSidebar(hass, addon) {
+    return !addon.ingress || !this._computeHA92plus(hass);
+  }
+
+  _computeHA92plus(hass) {
+    const [major, minor] = hass.config.version.split(".", 2);
+    return Number(major) > 0 || (major === "0" && Number(minor) >= 92);
+  }
 }
 customElements.define("hassio-addon-info", HassioAddonInfo);

setup.py

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

src/cards/ha-media_player-card.js

@@ -279,6 +279,14 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
     }
 
     // We have a new picture url
+    // If entity picture is non-relative, we use that url directly.
+    if (picture.substr(0, 1) !== "/") {
+      this._coverShowing = true;
+      this._coverLoadError = false;
+      this.$.cover.style.backgroundImage = `url(${picture})`;
+      return;
+    }
+
     try {
       const {
         content_type: contentType,

src/common/dom/stop_propagation.ts

@@ -0,0 +1 @@
+export const stopPropagation = (ev) => ev.stopPropagation();

src/components/ha-date-input.ts

@@ -0,0 +1,126 @@
+import {
+  html,
+  css,
+  LitElement,
+  TemplateResult,
+  property,
+  customElement,
+} from "lit-element";
+
+import "@polymer/paper-input/paper-input";
+// tslint:disable-next-line:no-duplicate-imports
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
+
+@customElement("ha-date-input")
+export class HaDateInput extends LitElement {
+  @property() public year?: string;
+  @property() public month?: string;
+  @property() public day?: string;
+  @property({ type: Boolean }) public disabled = false;
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        font-family: var(--paper-font-common-base_-_font-family);
+        -webkit-font-smoothing: var(
+          --paper-font-common-base_-_-webkit-font-smoothing
+        );
+      }
+
+      paper-input {
+        width: 30px;
+        text-align: center;
+        --paper-input-container-input_-_-moz-appearance: textfield;
+        --paper-input-container-input-webkit-spinner_-_-webkit-appearance: none;
+        --paper-input-container-input-webkit-spinner_-_margin: 0;
+        --paper-input-container-input-webkit-spinner_-_display: none;
+      }
+
+      paper-input#year {
+        width: 50px;
+      }
+
+      .date-input-wrap {
+        display: flex;
+        flex-direction: row;
+      }
+    `;
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="date-input-wrap">
+        <paper-input
+          id="year"
+          type="number"
+          .value=${this.year}
+          @change=${this._formatYear}
+          maxlength="4"
+          max="9999"
+          min="0"
+          .disabled=${this.disabled}
+          no-label-float
+        >
+          <span suffix="" slot="suffix">-</span>
+        </paper-input>
+        <paper-input
+          id="month"
+          type="number"
+          .value=${this.month}
+          @change=${this._formatMonth}
+          maxlength="2"
+          max="12"
+          min="1"
+          .disabled=${this.disabled}
+          no-label-float
+        >
+          <span suffix="" slot="suffix">-</span>
+        </paper-input>
+        <paper-input
+          id="day"
+          type="number"
+          .value=${this.day}
+          @change=${this._formatDay}
+          maxlength="2"
+          max="31"
+          min="1"
+          .disabled=${this.disabled}
+          no-label-float
+        >
+        </paper-input>
+      </div>
+    `;
+  }
+
+  private _formatYear() {
+    const yearElement = this.shadowRoot!.getElementById(
+      "year"
+    ) as PaperInputElement;
+    this.year = yearElement.value!;
+  }
+
+  private _formatMonth() {
+    const monthElement = this.shadowRoot!.getElementById(
+      "month"
+    ) as PaperInputElement;
+    this.month = ("0" + monthElement.value!).slice(-2);
+  }
+
+  private _formatDay() {
+    const dayElement = this.shadowRoot!.getElementById(
+      "day"
+    ) as PaperInputElement;
+    this.day = ("0" + dayElement.value!).slice(-2);
+  }
+
+  get value() {
+    return `${this.year}-${this.month}-${this.day}`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-date-input": HaDateInput;
+  }
+}

src/components/paper-time-input.js

@@ -23,7 +23,7 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
-class PaperTimeInput extends PolymerElement {
+export class PaperTimeInput extends PolymerElement {
   static get template() {
     return html`
       <style>

src/data/config_entries.ts

@@ -6,6 +6,12 @@ export interface FieldSchema {
   optional: boolean;
 }
 
+export interface ConfigFlowProgress {
+  flow_id: string;
+  handler: string;
+  context: { [key: string]: any };
+}
+
 export interface ConfigFlowStepForm {
   type: "form";
   flow_id: string;
@@ -62,3 +68,9 @@ export const handleConfigFlowStep = (
 
 export const deleteConfigFlow = (hass: HomeAssistant, flowId: string) =>
   hass.callApi("DELETE", `config/config_entries/flow/${flowId}`);
+
+export const getConfigFlowsInProgress = (hass: HomeAssistant) =>
+  hass.callApi<ConfigFlowProgress[]>("GET", "config/config_entries/flow");
+
+export const getConfigFlowHandlers = (hass: HomeAssistant) =>
+  hass.callApi<string[]>("GET", "config/config_entries/flow_handlers");

src/data/input-select.ts

@@ -1,6 +1,6 @@
 import { HomeAssistant } from "../types";
 
-export const setOption = (
+export const setInputSelectOption = (
   hass: HomeAssistant,
   entity: string,
   option: string

src/data/input_datetime.ts

@@ -0,0 +1,11 @@
+import { HomeAssistant } from "../types";
+
+export const setInputDateTimeValue = (
+  hass: HomeAssistant,
+  entityId: string,
+  time: string | undefined = undefined,
+  date: string | undefined = undefined
+) => {
+  const param = { entity_id: entityId, time, date };
+  hass.callService(entityId.split(".", 1)[0], "set_datetime", param);
+};