Allow toggling cloud integrations (#1690)

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

@@ -1,6 +1,7 @@
 import '@polymer/paper-button/paper-button.js';
 import '@polymer/paper-card/paper-card.js';
 import '@polymer/paper-item/paper-item-body.js';
+import '@polymer/paper-toggle-button/paper-toggle-button.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
@@ -61,6 +62,11 @@ class HaConfigCloudAccount extends EventsMixin(PolymerElement) {
       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">
@@ -108,6 +114,10 @@ class HaConfigCloudAccount extends EventsMixin(PolymerElement) {
           </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>
@@ -125,6 +135,10 @@ class HaConfigCloudAccount extends EventsMixin(PolymerElement) {
           </paper-card>
 
           <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>
@@ -142,7 +156,11 @@ class HaConfigCloudAccount extends EventsMixin(PolymerElement) {
               <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]]" path="cloud/google_actions/sync">Sync devices</ha-call-api-button>
+              <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>
@@ -214,6 +232,26 @@ class HaConfigCloudAccount extends EventsMixin(PolymerElement) {
 
     return 'Unable to determine subscription status.';
   }
+
+  _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);