Split up cloud card (#1983)

* Split up cloud card

* Fix quotes

src/panels/config/cloud/cloud-alexa-pref.ts

@@ -0,0 +1,83 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-toggle-button/paper-toggle-button";
+// tslint:disable-next-line
+import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
+
+import { fireEvent } from "../../../common/dom/fire_event";
+import { HomeAssistant } from "../../../types";
+import { updatePref } from "./data";
+import { CloudStatusLoggedIn } from "./types";
+
+export class CloudAlexaPref extends LitElement {
+  public hass?: HomeAssistant;
+  public cloudStatus?: CloudStatusLoggedIn;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      cloudStatus: {},
+    };
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      ${this.renderStyle()}
+      <paper-card heading="Alexa">
+        <paper-toggle-button
+          .checked="${this.cloudStatus!.alexa_enabled}"
+          @change="${this._toggleChanged}"
+        ></paper-toggle-button>
+        <div class="card-content">
+          With the Alexa integration for Home Assistant Cloud you'll be able to control all your Home Assistant devices via any Alexa-enabled device.
+          <ul>
+            <li>
+              To activate, search in the Alexa app for the Home Assistant Smart Home skill.
+            </li>
+            <li>
+              <a href="https://www.home-assistant.io/cloud/alexa/" target="_blank">
+                Config documentation
+              </a>
+            </li>
+          </ul>
+          <em>This integration requires an Alexa-enabled device like the Amazon Echo.</em>
+        </div>
+      </paper-card>
+    `;
+  }
+
+  private async _toggleChanged(ev) {
+    const toggle = ev.target as PaperToggleButtonElement;
+    try {
+      await updatePref(this.hass!, { alexa_enabled: toggle.checked! });
+      fireEvent(this, "ha-refresh-cloud-status");
+    } catch (err) {
+      toggle.checked = !toggle.checked;
+    }
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        a {
+          color: var(--primary-color);
+        }
+        paper-card > paper-toggle-button {
+          position: absolute;
+          right: 8px;
+          top: 16px;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "cloud-alexa-pref": CloudAlexaPref;
+  }
+}
+
+customElements.define("cloud-alexa-pref", CloudAlexaPref);

src/panels/config/cloud/cloud-google-pref.ts

@@ -0,0 +1,97 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+import "@polymer/paper-button/paper-button";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-toggle-button/paper-toggle-button";
+// tslint:disable-next-line
+import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
+import "../../../components/buttons/ha-call-api-button";
+
+import { fireEvent } from "../../../common/dom/fire_event";
+import { HomeAssistant } from "../../../types";
+import { updatePref } from "./data";
+import { CloudStatusLoggedIn } from "./types";
+
+export class CloudGooglePref extends LitElement {
+  public hass?: HomeAssistant;
+  public cloudStatus?: CloudStatusLoggedIn;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      cloudStatus: {},
+    };
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      ${this.renderStyle()}
+      <paper-card heading="Google Assistant">
+        <paper-toggle-button
+          .checked="${this.cloudStatus!.google_enabled}"
+          @change="${this._toggleChanged}"
+        ></paper-toggle-button>
+        <div class="card-content">
+          With the Google Assistant integration for Home Assistant Cloud you'll be able to control all your Home Assistant devices via any Google Assistant-enabled device.
+          <ul>
+            <li>
+              <a href="https://assistant.google.com/services/a/uid/00000091fd5fb875" target="_blank">
+                Activate the Home Assistant skill for Google Assistant
+              </a>
+            </li>
+            <li>
+              <a href="https://www.home-assistant.io/cloud/google_assistant/" target="_blank">
+                Config documentation
+              </a>
+            </li>
+          </ul>
+          <em>This integration requires a Google Assistant-enabled device like the Google Home or Android phone.</em>
+        </div>
+        <div class="card-actions">
+          <ha-call-api-button
+            .hass="${this.hass}"
+            .disabled="${!this.cloudStatus!.google_enabled}"
+            path="cloud/google_actions/sync"
+          >Sync devices</ha-call-api-button>
+        </div>
+      </paper-card>
+    `;
+  }
+
+  private async _toggleChanged(ev) {
+    const toggle = ev.target as PaperToggleButtonElement;
+    try {
+      await updatePref(this.hass!, { google_enabled: toggle.checked! });
+      fireEvent(this, "ha-refresh-cloud-status");
+    } catch (err) {
+      toggle.checked = !toggle.checked;
+    }
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        a {
+          color: var(--primary-color);
+        }
+        paper-card > paper-toggle-button {
+          position: absolute;
+          right: 8px;
+          top: 16px;
+        }
+        ha-call-api-button {
+          color: var(--primary-color);
+          font-weight: 500;
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "cloud-google-pref": CloudGooglePref;
+  }
+}
+
+customElements.define("cloud-google-pref", CloudGooglePref);

src/panels/config/cloud/data.ts

@@ -0,0 +1,17 @@
+import { HomeAssistant } from "../../../types";
+import { SubscriptionInfo } from "./types";
+
+export const fetchSubscriptionInfo = (hass: HomeAssistant) =>
+  hass.callWS<SubscriptionInfo>({ type: "cloud/subscription" });
+
+export const updatePref = (
+  hass: HomeAssistant,
+  prefs: {
+    google_enabled?: boolean;
+    alexa_enabled?: boolean;
+  }
+) =>
+  hass.callWS({
+    type: "cloud/update_prefs",
+    ...prefs,
+  });

src/panels/config/cloud/ha-config-cloud-account.js

@@ -15,6 +15,10 @@ import formatDateTime from "../../../common/datetime/format_date_time";
 import EventsMixin from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 
+import { fetchSubscriptionInfo } from "./data";
+import "./cloud-alexa-pref";
+import "./cloud-google-pref";
+
 /*
  * @appliesMixin EventsMixin
  * @appliesMixin LocalizeMixin
@@ -61,14 +65,6 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
         color: var(--primary-color);
         font-weight: 500;
       }
-      a {
-        color: var(--primary-color);
-      }
-      paper-card > paper-toggle-button {
-        position: absolute;
-        right: 8px;
-        top: 16px;
-      }
     </style>
     <hass-subpage header="Home Assistant Cloud">
       <div class="content">
@@ -115,56 +111,15 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
             </p>
           </div>
 
-          <paper-card heading="Alexa">
+          <cloud-alexa-pref
-            <paper-toggle-button
+            hass="[[hass]]"
-              checked='[[cloudStatus.alexa_enabled]]'
+            cloud-status="[[cloudStatus]]"
-              on-change='_alexaChanged'
+          ></cloud-alexa-pref>
-            ></paper-toggle-button>
-            <div class="card-content">
-              With the Alexa integration for Home Assistant Cloud you'll be able to control all your Home Assistant devices via any Alexa-enabled device.
-              <ul>
-                <li>
-                  To activate, search in the Alexa app for the Home Assistant Smart Home skill.
-                </li>
-                <li>
-                  <a href="https://www.home-assistant.io/cloud/alexa/" target="_blank">
-                    Config documentation
-                  </a>
-                </li>
-              </ul>
-              <p><em>This integration requires an Alexa-enabled device like the Amazon Echo.</em></p>
-            </div>
-          </paper-card>
 
-          <paper-card heading="Google Assistant">
+          <cloud-google-pref
-            <paper-toggle-button
+            hass="[[hass]]"
-              checked='[[cloudStatus.google_enabled]]'
+            cloud-status="[[cloudStatus]]"
-              on-change='_googleChanged'
+          ></cloud-google-pref>
-            ></paper-toggle-button>
-            <div class="card-content">
-              With the Google Assistant integration for Home Assistant Cloud you'll be able to control all your Home Assistant devices via any Google Assistant-enabled device.
-              <ul>
-                <li>
-                  <a href="https://assistant.google.com/services/a/uid/00000091fd5fb875" target="_blank">
-                    Activate the Home Assistant skill for Google Assistant
-                  </a>
-                </li>
-                <li>
-                  <a href="https://www.home-assistant.io/cloud/google_assistant/" target="_blank">
-                    Config documentation
-                  </a>
-                </li>
-              </ul>
-              <p><em>This integration requires a Google Assistant-enabled device like the Google Home or Android phone.</em></p>
-            </div>
-            <div class="card-actions">
-              <ha-call-api-button
-                hass="[[hass]]"
-                disabled='[[!cloudStatus.google_enabled]]'
-                path="cloud/google_actions/sync"
-              >Sync devices</ha-call-api-button>
-            </div>
-          </paper-card>
         </ha-config-section>
       </div>
     </hass-subpage>
@@ -189,7 +144,7 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
   }
 
   async _fetchSubscriptionInfo() {
-    this._subscription = await this.hass.callWS({ type: "cloud/subscription" });
+    this._subscription = await fetchSubscriptionInfo;
     if (this._subscription.provider && this.cloudStatus.cloud !== "connected") {
       this.fire("ha-refresh-cloud-status");
     }
@@ -220,26 +175,6 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
 
     return description;
   }
-
-  _alexaChanged(ev) {
-    this._handleToggleChange("alexa_enabled", ev.target);
-  }
-
-  _googleChanged(ev) {
-    this._handleToggleChange("google_enabled", ev.target);
-  }
-
-  async _handleToggleChange(property, element) {
-    try {
-      await this.hass.callWS({
-        type: "cloud/update_prefs",
-        [property]: element.checked,
-      });
-      this.fire("ha-refresh-cloud-status");
-    } catch (err) {
-      element.checked = !element.checked;
-    }
-  }
 }
 
 customElements.define("ha-config-cloud-account", HaConfigCloudAccount);

src/panels/config/cloud/types.ts

@@ -0,0 +1,24 @@
+interface EntityFilter {
+  include_domains: string[];
+  include_entities: string[];
+  exclude_domains: string[];
+  exclude_entities: string[];
+}
+interface CloudStatusBase {
+  logged_in: boolean;
+  cloud: "disconnected" | "connecting" | "connected";
+}
+
+export type CloudStatusLoggedIn = CloudStatusBase & {
+  email: string;
+  google_enabled: boolean;
+  google_entities: EntityFilter;
+  alexa_enabled: boolean;
+  alexa_entities: EntityFilter;
+};
+
+export type CloudStatus = CloudStatusBase | CloudStatusLoggedIn;
+
+export interface SubscriptionInfo {
+  human_description: string;
+}