jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-18 23:06:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Show setting for auto connect seperately if currently connected (#9072)

Browse Source 
Co-authored-by: Philip Allgaier <mail@spacegaier.de>
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Paulus Schoutsen 2021-05-02 05:45:53 -07:00 committed by GitHub
parent ac5f85820f
commit 5d946778cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 70 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/panels/config/cloud/account/cloud-remote-pref.ts
View File

@ -24,7 +24,7 @@ import { showCloudCertificateDialog } from "../dialog-cloud-certificate/show-dia
@customElement("cloud-remote-pref")
export class CloudRemotePref extends LitElement {
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public cloudStatus?: CloudStatusLoggedIn;
@ -33,6 +33,8 @@ export class CloudRemotePref extends LitElement {
return html``;
}
const { remote_enabled } = this.cloudStatus.prefs;
const {
remote_connected,
remote_domain,
@ -42,12 +44,12 @@ export class CloudRemotePref extends LitElement {
if (!remote_certificate) {
return html`
<ha-card
header=${this.hass!.localize(
header=${this.hass.localize(
"ui.panel.config.cloud.account.remote.title"
)}
>
<div class="preparing">
${this.hass!.localize(
${this.hass.localize(
"ui.panel.config.cloud.account.remote.access_is_being_prepared"
)}
</div>
@ -57,25 +59,26 @@ export class CloudRemotePref extends LitElement {
return html`
<ha-card
header=${this.hass!.localize(
header=${this.hass.localize(
"ui.panel.config.cloud.account.remote.title"
)}
>
<div class="switch">
<ha-switch
.checked="${remote_connected}"
@change="${this._toggleChanged}"
></ha-switch>
<div class="connection-status">
${this.hass.localize(
`ui.panel.config.cloud.account.remote.${
remote_connected ? "connected" : "not_connected"
}`
)}
</div>
<div class="card-content">
${this.hass!.localize("ui.panel.config.cloud.account.remote.info")}
${remote_connected
? this.hass!.localize(
"ui.panel.config.cloud.account.remote.instance_is_available"
)
: this.hass!.localize(
"ui.panel.config.cloud.account.remote.instance_will_be_available"
)}
${this.hass.localize("ui.panel.config.cloud.account.remote.info")}
${this.hass.localize(
`ui.panel.config.cloud.account.remote.${
remote_connected
? "instance_is_available"
: "instance_will_be_available"
}`
)}
<a
href="https://${remote_domain}"
target="_blank"
@ -84,6 +87,25 @@ 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
@ -92,7 +114,7 @@ export class CloudRemotePref extends LitElement {
rel="noreferrer"
>
<mwc-button
>${this.hass!.localize(
>${this.hass.localize(
"ui.panel.config.cloud.account.remote.link_learn_how_it_works"
)}</mwc-button
>
@ -101,7 +123,7 @@ export class CloudRemotePref extends LitElement {
? html`
<div class="spacer"></div>
<mwc-button @click=${this._openCertInfo}>
${this.hass!.localize(
${this.hass.localize(
"ui.panel.config.cloud.account.remote.certificate_info"
)}
</mwc-button>
@ -123,9 +145,9 @@ export class CloudRemotePref extends LitElement {
try {
if (toggle.checked) {
await connectCloudRemote(this.hass!);
await connectCloudRemote(this.hass);
} else {
await disconnectCloudRemote(this.hass!);
await disconnectCloudRemote(this.hass);
}
fireEvent(this, "ha-refresh-cloud-status");
} catch (err) {
@ -145,7 +167,7 @@ export class CloudRemotePref extends LitElement {
.break-word {
overflow-wrap: break-word;
}
.switch {
.connection-status {
position: absolute;
right: 24px;
top: 24px;
@ -163,6 +185,25 @@ 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;
}
`;
}
}

8
src/translations/en.json
View File

@ -1794,10 +1794,16 @@
},
"remote": {
"title": "Remote Control",
"access_is_being_prepared": "Remote access is being prepared. We will notify you when it's ready.",
"connected": "Connected",
"not_connected": "Not Connected",
"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"
},