mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-28 11:46:42 +00:00
Update cloud card (#2919)
This commit is contained in:
Paulus Schoutsen
GitHub
parent
8c13e524b9
commit
bcade77075
@ -1,4 +1,51 @@
|
||||
import { HomeAssistant } from "../types";
|
||||
import { Webhook } from "./webhook";
|
||||
|
||||
export interface EntityFilter {
|
||||
include_domains: string[];
|
||||
include_entities: string[];
|
||||
exclude_domains: string[];
|
||||
exclude_entities: string[];
|
||||
}
|
||||
interface CloudStatusBase {
|
||||
logged_in: boolean;
|
||||
cloud: "disconnected" | "connecting" | "connected";
|
||||
}
|
||||
|
||||
interface CertificateInformation {
|
||||
common_name: string;
|
||||
expire_date: string;
|
||||
fingerprint: string;
|
||||
}
|
||||
|
||||
export type CloudStatusLoggedIn = CloudStatusBase & {
|
||||
email: string;
|
||||
google_entities: EntityFilter;
|
||||
google_domains: string[];
|
||||
alexa_entities: EntityFilter;
|
||||
alexa_domains: string[];
|
||||
prefs: {
|
||||
google_enabled: boolean;
|
||||
alexa_enabled: boolean;
|
||||
google_allow_unlock: boolean;
|
||||
cloudhooks: { [webhookId: string]: CloudWebhook };
|
||||
};
|
||||
remote_domain: string | undefined;
|
||||
remote_connected: boolean;
|
||||
remote_certificate: undefined | CertificateInformation;
|
||||
};
|
||||
|
||||
export type CloudStatus = CloudStatusBase | CloudStatusLoggedIn;
|
||||
|
||||
export interface SubscriptionInfo {
|
||||
human_description: string;
|
||||
}
|
||||
|
||||
export interface WebhookDialogParams {
|
||||
webhook: Webhook;
|
||||
cloudhook: CloudWebhook;
|
||||
disableHook: () => void;
|
||||
}
|
||||
|
||||
export interface CloudWebhook {
|
||||
webhook_id: string;
|
||||
@ -28,3 +75,19 @@ export const disconnectCloudRemote = (hass: HomeAssistant) =>
|
||||
hass.callWS({
|
||||
type: "cloud/remote/disconnect",
|
||||
});
|
||||
|
||||
export const fetchCloudSubscriptionInfo = (hass: HomeAssistant) =>
|
||||
hass.callWS<SubscriptionInfo>({ type: "cloud/subscription" });
|
||||
|
||||
export const updateCloudPref = (
|
||||
hass: HomeAssistant,
|
||||
prefs: {
|
||||
google_enabled?: boolean;
|
||||
alexa_enabled?: boolean;
|
||||
google_allow_unlock?: boolean;
|
||||
}
|
||||
) =>
|
||||
hass.callWS({
|
||||
type: "cloud/update_prefs",
|
||||
...prefs,
|
||||
});
|
||||
|
||||
@ -46,7 +46,8 @@ class MoreInfoCamera extends UpdatingElement {
|
||||
return;
|
||||
}
|
||||
// tslint:disable-next-line
|
||||
const Hls = ((await import("hls.js")) as any).default as HLSModule;
|
||||
const Hls = ((await import(/* webpackChunkName: "hls.js" */ "hls.js")) as any)
|
||||
.default as HLSModule;
|
||||
|
||||
if (Hls.isSupported()) {
|
||||
try {
|
||||
|
||||
@ -3,6 +3,8 @@ import {
|
||||
LitElement,
|
||||
PropertyDeclarations,
|
||||
TemplateResult,
|
||||
CSSResult,
|
||||
css,
|
||||
} from "lit-element";
|
||||
import "@material/mwc-button";
|
||||
import "@polymer/paper-card/paper-card";
|
||||
@ -12,9 +14,8 @@ import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-tog
|
||||
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
import { updatePref } from "./data";
|
||||
import { CloudStatusLoggedIn } from "./types";
|
||||
import "./cloud-exposed-entities";
|
||||
import { CloudStatusLoggedIn, updateCloudPref } from "../../../data/cloud";
|
||||
|
||||
export class CloudAlexaPref extends LitElement {
|
||||
public hass?: HomeAssistant;
|
||||
@ -35,7 +36,6 @@ export class CloudAlexaPref extends LitElement {
|
||||
const enabled = this.cloudStatus!.prefs.alexa_enabled;
|
||||
|
||||
return html`
|
||||
${this.renderStyle()}
|
||||
<paper-card heading="Alexa">
|
||||
<paper-toggle-button
|
||||
.checked="${enabled}"
|
||||
@ -51,7 +51,7 @@ export class CloudAlexaPref extends LitElement {
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.home-assistant.io/cloud/alexa/"
|
||||
href="https://www.nabucasa.com/config/amazon_alexa/"
|
||||
target="_blank"
|
||||
>
|
||||
Config documentation
|
||||
@ -80,25 +80,23 @@ export class CloudAlexaPref extends LitElement {
|
||||
private async _toggleChanged(ev) {
|
||||
const toggle = ev.target as PaperToggleButtonElement;
|
||||
try {
|
||||
await updatePref(this.hass!, { alexa_enabled: toggle.checked! });
|
||||
await updateCloudPref(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>
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
paper-card > paper-toggle-button {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 16px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,6 +3,8 @@ import {
|
||||
LitElement,
|
||||
PropertyDeclarations,
|
||||
TemplateResult,
|
||||
CSSResult,
|
||||
css,
|
||||
} from "lit-element";
|
||||
import "@material/mwc-button";
|
||||
import "@polymer/paper-card/paper-card";
|
||||
@ -13,9 +15,8 @@ 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";
|
||||
import "./cloud-exposed-entities";
|
||||
import { CloudStatusLoggedIn, updateCloudPref } from "../../../data/cloud";
|
||||
|
||||
export class CloudGooglePref extends LitElement {
|
||||
public hass?: HomeAssistant;
|
||||
@ -36,7 +37,6 @@ export class CloudGooglePref extends LitElement {
|
||||
const { google_enabled, google_allow_unlock } = this.cloudStatus.prefs;
|
||||
|
||||
return html`
|
||||
${this.renderStyle()}
|
||||
<paper-card heading="Google Assistant">
|
||||
<paper-toggle-button
|
||||
id="google_enabled"
|
||||
@ -58,7 +58,7 @@ export class CloudGooglePref extends LitElement {
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.home-assistant.io/cloud/google_assistant/"
|
||||
href="https://www.nabucasa.com/config/google_assistant/"
|
||||
target="_blank"
|
||||
>
|
||||
Config documentation
|
||||
@ -103,37 +103,35 @@ export class CloudGooglePref extends LitElement {
|
||||
private async _toggleChanged(ev) {
|
||||
const toggle = ev.target as PaperToggleButtonElement;
|
||||
try {
|
||||
await updatePref(this.hass!, { [toggle.id]: toggle.checked! });
|
||||
await updateCloudPref(this.hass!, { [toggle.id]: 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;
|
||||
}
|
||||
.unlock {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-top: 16px;
|
||||
}
|
||||
.unlock > div {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
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;
|
||||
}
|
||||
.unlock {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-top: 16px;
|
||||
}
|
||||
.unlock > div {
|
||||
flex: 1;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
148
src/panels/config/cloud/cloud-remote-pref.ts
Normal file
148
src/panels/config/cloud/cloud-remote-pref.ts
Normal file
@ -0,0 +1,148 @@
|
||||
import {
|
||||
html,
|
||||
LitElement,
|
||||
PropertyDeclarations,
|
||||
TemplateResult,
|
||||
customElement,
|
||||
CSSResult,
|
||||
css,
|
||||
} from "lit-element";
|
||||
import "@material/mwc-button";
|
||||
import "@polymer/paper-card/paper-card";
|
||||
import "@polymer/paper-toggle-button/paper-toggle-button";
|
||||
import "@polymer/paper-item/paper-item-body";
|
||||
// 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 {
|
||||
connectCloudRemote,
|
||||
disconnectCloudRemote,
|
||||
CloudStatusLoggedIn,
|
||||
} from "../../../data/cloud";
|
||||
import format_date_time from "../../../common/datetime/format_date_time";
|
||||
|
||||
@customElement("cloud-remote-pref")
|
||||
export class CloudRemotePref extends LitElement {
|
||||
public hass?: HomeAssistant;
|
||||
public cloudStatus?: CloudStatusLoggedIn;
|
||||
|
||||
static get properties(): PropertyDeclarations {
|
||||
return {
|
||||
hass: {},
|
||||
cloudStatus: {},
|
||||
};
|
||||
}
|
||||
|
||||
protected render(): TemplateResult | void {
|
||||
if (!this.cloudStatus) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
const {
|
||||
remote_connected,
|
||||
remote_domain,
|
||||
remote_certificate,
|
||||
} = this.cloudStatus;
|
||||
|
||||
return html`
|
||||
<paper-card heading="Remote Control">
|
||||
<paper-toggle-button
|
||||
.checked="${remote_connected}"
|
||||
@change="${this._toggleChanged}"
|
||||
></paper-toggle-button>
|
||||
<div class="card-content">
|
||||
Home Assistant Cloud provides you with a secure remote connection to
|
||||
your instance while away from home. Your instance
|
||||
${remote_connected ? "is" : "will be"} available at
|
||||
<a href="https://${remote_domain}" target="_blank">
|
||||
https://${remote_domain}</a
|
||||
>.
|
||||
${!remote_certificate
|
||||
? ""
|
||||
: html`
|
||||
<div class="data-row">
|
||||
<paper-item-body two-line>
|
||||
Certificate expiration date
|
||||
<div secondary>Will be automatically renewed</div>
|
||||
</paper-item-body>
|
||||
<div class="data-value">
|
||||
${format_date_time(
|
||||
new Date(remote_certificate.expire_date),
|
||||
this.hass!.language
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<paper-item-body>
|
||||
Certificate fingerprint
|
||||
</paper-item-body>
|
||||
<div class="data-value">
|
||||
${remote_certificate.fingerprint}
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<a href="https://www.nabucasa.com/config/remote/" target="_blank">
|
||||
<mwc-button>Learn how it works</mwc-button>
|
||||
</a>
|
||||
</div>
|
||||
</paper-card>
|
||||
`;
|
||||
}
|
||||
|
||||
private async _toggleChanged(ev) {
|
||||
const toggle = ev.target as PaperToggleButtonElement;
|
||||
|
||||
try {
|
||||
if (toggle.checked) {
|
||||
await connectCloudRemote(this.hass!);
|
||||
} else {
|
||||
await disconnectCloudRemote(this.hass!);
|
||||
}
|
||||
fireEvent(this, "ha-refresh-cloud-status");
|
||||
} catch (err) {
|
||||
toggle.checked = !toggle.checked;
|
||||
}
|
||||
}
|
||||
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
.data-row {
|
||||
display: flex;
|
||||
}
|
||||
.data-value {
|
||||
padding: 16px 0;
|
||||
}
|
||||
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;
|
||||
}
|
||||
.unlock {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-top: 16px;
|
||||
}
|
||||
.unlock > div {
|
||||
flex: 1;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"cloud-remote-pref": CloudRemotePref;
|
||||
}
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
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;
|
||||
google_allow_unlock?: boolean;
|
||||
}
|
||||
) =>
|
||||
hass.callWS({
|
||||
type: "cloud/update_prefs",
|
||||
...prefs,
|
||||
});
|
||||
@ -16,11 +16,10 @@ import formatDateTime from "../../../common/datetime/format_date_time";
|
||||
import EventsMixin from "../../../mixins/events-mixin";
|
||||
import LocalizeMixin from "../../../mixins/localize-mixin";
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
|
||||
import { fetchSubscriptionInfo } from "./data";
|
||||
import { fetchCloudSubscriptionInfo } from "../../../data/cloud";
|
||||
import "./cloud-alexa-pref";
|
||||
import "./cloud-google-pref";
|
||||
import { connectCloudRemote, disconnectCloudRemote } from "../../../data/cloud";
|
||||
import "./cloud-remote-pref";
|
||||
|
||||
let registeredWebhookDialog = false;
|
||||
|
||||
@ -98,25 +97,6 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
||||
<div class="status">[[cloudStatus.cloud]]</div>
|
||||
</div>
|
||||
|
||||
<div class="account-row">
|
||||
<paper-item-body two-line>
|
||||
Remote Access
|
||||
<div class="secondary">
|
||||
<a
|
||||
href="https://[[cloudStatus.remote_domain]]"
|
||||
target="_blank"
|
||||
>[[cloudStatus.remote_domain]]</a
|
||||
>
|
||||
</div>
|
||||
</paper-item-body>
|
||||
<div class="status">
|
||||
<paper-toggle-button
|
||||
checked="[[cloudStatus.remote_connected]]"
|
||||
on-change="_remoteChanged"
|
||||
></paper-toggle-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-actions">
|
||||
<a href="https://account.nabucasa.com" target="_blank"
|
||||
><mwc-button>Manage Account</mwc-button></a
|
||||
@ -144,6 +124,11 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<cloud-remote-pref
|
||||
hass="[[hass]]"
|
||||
cloud-status="[[cloudStatus]]"
|
||||
></cloud-remote-pref>
|
||||
|
||||
<cloud-alexa-pref
|
||||
hass="[[hass]]"
|
||||
cloud-status="[[cloudStatus]]"
|
||||
@ -195,24 +180,12 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
||||
}
|
||||
}
|
||||
|
||||
async _remoteChanged(ev) {
|
||||
const toggle = ev.target;
|
||||
|
||||
try {
|
||||
this.cloudStatus = toggle.checked
|
||||
? await connectCloudRemote(this.hass)
|
||||
: await disconnectCloudRemote(this.hass);
|
||||
} catch (err) {
|
||||
toggle.checked = !toggle.checked;
|
||||
}
|
||||
}
|
||||
|
||||
_computeRemoteConnected(connected) {
|
||||
return connected ? "Connected" : "Not Connected";
|
||||
}
|
||||
|
||||
async _fetchSubscriptionInfo() {
|
||||
this._subscription = await fetchSubscriptionInfo(this.hass);
|
||||
this._subscription = await fetchCloudSubscriptionInfo(this.hass);
|
||||
if (
|
||||
this._subscription.provider &&
|
||||
this.cloudStatus &&
|
||||
|
||||
@ -74,9 +74,10 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
|
||||
<span slot="header">Home Assistant Cloud</span>
|
||||
<div slot="introduction">
|
||||
<p>
|
||||
Home Assistant Cloud allow you to remotely and securely control
|
||||
your instance away from home. It also allows you to connect with
|
||||
cloud-only services like Amazon Alexa and Google Assistant.
|
||||
Home Assistant Cloud provides you with a secure remote
|
||||
connection to your instance while away from home. It also allows
|
||||
you to connect with cloud-only services: Amazon Alexa and Google
|
||||
Assistant.
|
||||
</p>
|
||||
<p>
|
||||
This service is run by our partner
|
||||
|
||||
@ -66,7 +66,7 @@ class HaConfigCloudRegister extends EventsMixin(PolymerElement) {
|
||||
The trial will give you access to all the benefits of Home Assistant Cloud, including:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Control Home Assistant away from home</li>
|
||||
<li>Control of Home Assistant away from home</li>
|
||||
<li>Integration with Google Assistant</li>
|
||||
<li>Integration with Amazon Alexa</li>
|
||||
<li>Easy integration with webhook-based apps like OwnTracks</li>
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
import { CloudWebhook } from "../../../data/cloud";
|
||||
import { Webhook } from "../../../data/webhook";
|
||||
|
||||
export 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_entities: EntityFilter;
|
||||
google_domains: string[];
|
||||
alexa_entities: EntityFilter;
|
||||
alexa_domains: string[];
|
||||
prefs: {
|
||||
google_enabled: boolean;
|
||||
alexa_enabled: boolean;
|
||||
google_allow_unlock: boolean;
|
||||
cloudhooks: { [webhookId: string]: CloudWebhook };
|
||||
};
|
||||
};
|
||||
|
||||
export type CloudStatus = CloudStatusBase | CloudStatusLoggedIn;
|
||||
|
||||
export interface SubscriptionInfo {
|
||||
human_description: string;
|
||||
}
|
||||
|
||||
export interface WebhookDialogParams {
|
||||
webhook: Webhook;
|
||||
cloudhook: CloudWebhook;
|
||||
disableHook: () => void;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user