Split up cloud card (#1983)

* Split up cloud card

* Fix quotes
This commit is contained in:
Paulus Schoutsen 2018-11-05 09:59:19 +01:00 committed by GitHub
parent 1ca242405b
commit e5fe2950af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 234 additions and 78 deletions

View File

@ -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);

View File

@ -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);

View File

@ -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,
});

View File

@ -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">
<paper-toggle-button
checked='[[cloudStatus.alexa_enabled]]'
on-change='_alexaChanged'
></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>
<cloud-alexa-pref
hass="[[hass]]"
cloud-status="[[cloudStatus]]"
></cloud-alexa-pref>
<paper-card heading="Google Assistant">
<paper-toggle-button
checked='[[cloudStatus.google_enabled]]'
on-change='_googleChanged'
></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>
<cloud-google-pref
hass="[[hass]]"
cloud-status="[[cloudStatus]]"
></cloud-google-pref>
</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);

View File

@ -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;
}