diff --git a/src/panels/config/cloud/cloud-alexa-pref.ts b/src/panels/config/cloud/cloud-alexa-pref.ts new file mode 100644 index 0000000000..a076612f0d --- /dev/null +++ b/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()} + + +
+ With the Alexa integration for Home Assistant Cloud you'll be able to control all your Home Assistant devices via any Alexa-enabled device. + + This integration requires an Alexa-enabled device like the Amazon Echo. +
+ + `; + } + + 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` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "cloud-alexa-pref": CloudAlexaPref; + } +} + +customElements.define("cloud-alexa-pref", CloudAlexaPref); diff --git a/src/panels/config/cloud/cloud-google-pref.ts b/src/panels/config/cloud/cloud-google-pref.ts new file mode 100644 index 0000000000..19aaf7445d --- /dev/null +++ b/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()} + + +
+ 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. + + This integration requires a Google Assistant-enabled device like the Google Home or Android phone. +
+
+ Sync devices +
+ + `; + } + + 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` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "cloud-google-pref": CloudGooglePref; + } +} + +customElements.define("cloud-google-pref", CloudGooglePref); diff --git a/src/panels/config/cloud/data.ts b/src/panels/config/cloud/data.ts new file mode 100644 index 0000000000..afce1399d8 --- /dev/null +++ b/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({ type: "cloud/subscription" }); + +export const updatePref = ( + hass: HomeAssistant, + prefs: { + google_enabled?: boolean; + alexa_enabled?: boolean; + } +) => + hass.callWS({ + type: "cloud/update_prefs", + ...prefs, + }); diff --git a/src/panels/config/cloud/ha-config-cloud-account.js b/src/panels/config/cloud/ha-config-cloud-account.js index 3aabd609de..cba2d25987 100644 --- a/src/panels/config/cloud/ha-config-cloud-account.js +++ b/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; - }
@@ -115,56 +111,15 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {

- - -
- With the Alexa integration for Home Assistant Cloud you'll be able to control all your Home Assistant devices via any Alexa-enabled device. - -

This integration requires an Alexa-enabled device like the Amazon Echo.

-
- + - - -
- 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. - -

This integration requires a Google Assistant-enabled device like the Google Home or Android phone.

-
-
- Sync devices -
- + @@ -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); diff --git a/src/panels/config/cloud/types.ts b/src/panels/config/cloud/types.ts new file mode 100644 index 0000000000..98d8ff668e --- /dev/null +++ b/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; +}