mirror of
https://github.com/home-assistant/frontend.git
synced 2025-04-26 06:17:20 +00:00
Simplify remote connection preferences (#10071)
* Simplify remote connection preferences * Remove unused CSS and strings
This commit is contained in:
Paulus Schoutsen
GitHub
parent
abc4816888
commit
224302cfef
@ -3,8 +3,8 @@ import { PlaceholderContainer } from "../panels/config/automation/thingtalk/dial
|
||||
import { HomeAssistant } from "../types";
|
||||
import { AutomationConfig } from "./automation";
|
||||
|
||||
interface CloudStatusBase {
|
||||
logged_in: boolean;
|
||||
interface CloudStatusNotLoggedIn {
|
||||
logged_in: false;
|
||||
cloud: "disconnected" | "connecting" | "connected";
|
||||
}
|
||||
|
||||
@ -44,7 +44,9 @@ export interface CloudPreferences {
|
||||
tts_default_voice: [string, string];
|
||||
}
|
||||
|
||||
export type CloudStatusLoggedIn = CloudStatusBase & {
|
||||
export interface CloudStatusLoggedIn {
|
||||
logged_in: true;
|
||||
cloud: "disconnected" | "connecting" | "connected";
|
||||
email: string;
|
||||
google_registered: boolean;
|
||||
google_entities: EntityFilter;
|
||||
@ -54,9 +56,9 @@ export type CloudStatusLoggedIn = CloudStatusBase & {
|
||||
remote_domain: string | undefined;
|
||||
remote_connected: boolean;
|
||||
remote_certificate: undefined | CertificateInformation;
|
||||
};
|
||||
}
|
||||
|
||||
export type CloudStatus = CloudStatusBase | CloudStatusLoggedIn;
|
||||
export type CloudStatus = CloudStatusNotLoggedIn | CloudStatusLoggedIn;
|
||||
|
||||
export interface SubscriptionInfo {
|
||||
human_description: string;
|
||||
|
||||
@ -6,6 +6,7 @@ import { property } from "lit/decorators";
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import "../../../../components/buttons/ha-call-api-button";
|
||||
import "../../../../components/ha-card";
|
||||
import "../../../../components/ha-alert";
|
||||
import type { HaSwitch } from "../../../../components/ha-switch";
|
||||
import { CloudStatusLoggedIn, updateCloudPref } from "../../../../data/cloud";
|
||||
import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
|
||||
@ -44,41 +45,40 @@ export class CloudGooglePref extends LitElement {
|
||||
</p>
|
||||
${google_enabled && !this.cloudStatus.google_registered
|
||||
? html`
|
||||
<h3 class="warning">
|
||||
${this.hass.localize(
|
||||
<ha-alert
|
||||
.title=${this.hass.localize(
|
||||
"ui.panel.config.cloud.account.google.not_configured_title"
|
||||
)}
|
||||
</h3>
|
||||
<p>
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.cloud.account.google.not_configured_text"
|
||||
)}
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://assistant.google.com/services/a/uid/00000091fd5fb875?hl=en-US"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.cloud.account.google.enable_ha_skill"
|
||||
)}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.nabucasa.com/config/google_assistant/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.cloud.account.google.config_documentation"
|
||||
)}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://assistant.google.com/services/a/uid/00000091fd5fb875?hl=en-US"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.cloud.account.google.enable_ha_skill"
|
||||
)}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.nabucasa.com/config/google_assistant/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.cloud.account.google.config_documentation"
|
||||
)}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</ha-alert>
|
||||
`
|
||||
: ""}
|
||||
${google_enabled
|
||||
|
||||
@ -4,6 +4,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import "../../../../components/ha-card";
|
||||
import "../../../../components/ha-alert";
|
||||
import "../../../../components/ha-switch";
|
||||
// eslint-disable-next-line
|
||||
import type { HaSwitch } from "../../../../components/ha-switch";
|
||||
@ -53,18 +54,22 @@ export class CloudRemotePref extends LitElement {
|
||||
"ui.panel.config.cloud.account.remote.title"
|
||||
)}
|
||||
>
|
||||
<div class="connection-status">
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.cloud.account.remote.${
|
||||
remote_connected
|
||||
? "connected"
|
||||
: remote_enabled
|
||||
? "reconnecting"
|
||||
: "not_connected"
|
||||
}`
|
||||
)}
|
||||
<div class="switch">
|
||||
<ha-switch
|
||||
.checked="${remote_enabled}"
|
||||
@change="${this._toggleChanged}"
|
||||
></ha-switch>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
${!remote_connected && remote_enabled
|
||||
? html`
|
||||
<ha-alert
|
||||
.title=${this.hass.localize(
|
||||
`ui.panel.config.cloud.account.remote.reconnecting`
|
||||
)}
|
||||
></ha-alert>
|
||||
`
|
||||
: ""}
|
||||
${this.hass.localize("ui.panel.config.cloud.account.remote.info")}
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.cloud.account.remote.${
|
||||
@ -81,25 +86,6 @@ export class CloudRemotePref extends LitElement {
|
||||
>
|
||||
https://${remote_domain}</a
|
||||
>.
|
||||
|
||||
<div class="remote-enabled">
|
||||
<h3>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.cloud.account.remote.remote_enabled.caption"
|
||||
)}
|
||||
</h3>
|
||||
<div class="remote-enabled-switch">
|
||||
<ha-switch
|
||||
.checked="${remote_enabled}"
|
||||
@change="${this._toggleChanged}"
|
||||
></ha-switch>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.cloud.account.remote.remote_enabled.description"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<a
|
||||
@ -158,6 +144,22 @@ export class CloudRemotePref extends LitElement {
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.switch {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
top: 24px;
|
||||
}
|
||||
:host([dir="rtl"]) .switch {
|
||||
right: auto;
|
||||
left: 24px;
|
||||
}
|
||||
.warning {
|
||||
font-weight: bold;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.warning ha-svg-icon {
|
||||
color: var(--warning-color);
|
||||
}
|
||||
.break-word {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
@ -179,25 +181,6 @@ export class CloudRemotePref extends LitElement {
|
||||
.spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.remote-enabled {
|
||||
display: flex;
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
.remote-enabled + p {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
h3 {
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
.remote-enabled h3 {
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
}
|
||||
.remote-enabled-switch {
|
||||
margin-top: 0.25em;
|
||||
margin-right: 7px;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -402,7 +402,14 @@ class HaPanelConfig extends HassRouterPage {
|
||||
private async _updateCloudStatus() {
|
||||
this._cloudStatus = await fetchCloudStatus(this.hass);
|
||||
|
||||
if (this._cloudStatus.cloud === "connecting") {
|
||||
if (
|
||||
// Relayer connecting
|
||||
this._cloudStatus.cloud === "connecting" ||
|
||||
// Remote connecting
|
||||
(this._cloudStatus.logged_in &&
|
||||
this._cloudStatus.prefs.remote_enabled &&
|
||||
!this._cloudStatus.remote_connected)
|
||||
) {
|
||||
setTimeout(() => this._updateCloudStatus(), 5000);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1974,15 +1974,11 @@
|
||||
"title": "Remote Control",
|
||||
"connected": "Connected",
|
||||
"not_connected": "Not Connected",
|
||||
"reconnecting": "Reconnecting",
|
||||
"reconnecting": "Not connected. Trying to reconnect.",
|
||||
"access_is_being_prepared": "Remote control is being prepared. We will notify you when it's ready.",
|
||||
"info": "Home Assistant Cloud provides a secure remote connection to your instance while away from home.",
|
||||
"instance_is_available": "Your instance is available at",
|
||||
"instance_will_be_available": "Your instance will be available at",
|
||||
"remote_enabled": {
|
||||
"caption": "Automatically connect",
|
||||
"description": "Enable this option to make sure that your Home Assistant instance is always remotely accessible."
|
||||
},
|
||||
"link_learn_how_it_works": "Learn how it works",
|
||||
"certificate_info": "Certificate Info"
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user