jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-22 16:56:35 +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") @customElement("cloud-remote-pref")
export class CloudRemotePref extends LitElement { export class CloudRemotePref extends LitElement {
@property({ attribute: false }) public hass?: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@property() public cloudStatus?: CloudStatusLoggedIn; @property() public cloudStatus?: CloudStatusLoggedIn;
@ -33,6 +33,8 @@ export class CloudRemotePref extends LitElement {
return html``; return html``;
} }
const { remote_enabled } = this.cloudStatus.prefs;
const { const {
remote_connected, remote_connected,
remote_domain, remote_domain,
@ -42,12 +44,12 @@ export class CloudRemotePref extends LitElement {
if (!remote_certificate) { if (!remote_certificate) {
return html` return html`
<ha-card <ha-card
header=${this.hass!.localize( header=${this.hass.localize(
"ui.panel.config.cloud.account.remote.title" "ui.panel.config.cloud.account.remote.title"
)} )}
> >
<div class="preparing"> <div class="preparing">
${this.hass!.localize( ${this.hass.localize(
"ui.panel.config.cloud.account.remote.access_is_being_prepared" "ui.panel.config.cloud.account.remote.access_is_being_prepared"
)} )}
</div> </div>
@ -57,25 +59,26 @@ export class CloudRemotePref extends LitElement {
return html` return html`
<ha-card <ha-card
header=${this.hass!.localize( header=${this.hass.localize(
"ui.panel.config.cloud.account.remote.title" "ui.panel.config.cloud.account.remote.title"
)} )}
> >
<div class="switch"> <div class="connection-status">
<ha-switch ${this.hass.localize(
.checked="${remote_connected}" `ui.panel.config.cloud.account.remote.${
@change="${this._toggleChanged}" remote_connected ? "connected" : "not_connected"
></ha-switch> }`
)}
</div> </div>
<div class="card-content"> <div class="card-content">
${this.hass!.localize("ui.panel.config.cloud.account.remote.info")} ${this.hass.localize("ui.panel.config.cloud.account.remote.info")}
${remote_connected ${this.hass.localize(
? this.hass!.localize( `ui.panel.config.cloud.account.remote.${
"ui.panel.config.cloud.account.remote.instance_is_available" remote_connected
) ? "instance_is_available"
: this.hass!.localize( : "instance_will_be_available"
"ui.panel.config.cloud.account.remote.instance_will_be_available" }`
)} )}
<a <a
href="https://${remote_domain}" href="https://${remote_domain}"
target="_blank" target="_blank"
@ -84,6 +87,25 @@ export class CloudRemotePref extends LitElement {
> >
https://${remote_domain}</a 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>
<div class="card-actions"> <div class="card-actions">
<a <a
@ -92,7 +114,7 @@ export class CloudRemotePref extends LitElement {
rel="noreferrer" rel="noreferrer"
> >
<mwc-button <mwc-button
>${this.hass!.localize( >${this.hass.localize(
"ui.panel.config.cloud.account.remote.link_learn_how_it_works" "ui.panel.config.cloud.account.remote.link_learn_how_it_works"
)}</mwc-button )}</mwc-button
> >
@ -101,7 +123,7 @@ export class CloudRemotePref extends LitElement {
? html` ? html`
<div class="spacer"></div> <div class="spacer"></div>
<mwc-button @click=${this._openCertInfo}> <mwc-button @click=${this._openCertInfo}>
${this.hass!.localize( ${this.hass.localize(
"ui.panel.config.cloud.account.remote.certificate_info" "ui.panel.config.cloud.account.remote.certificate_info"
)} )}
</mwc-button> </mwc-button>
@ -123,9 +145,9 @@ export class CloudRemotePref extends LitElement {
try { try {
if (toggle.checked) { if (toggle.checked) {
await connectCloudRemote(this.hass!); await connectCloudRemote(this.hass);
} else { } else {
await disconnectCloudRemote(this.hass!); await disconnectCloudRemote(this.hass);
} }
fireEvent(this, "ha-refresh-cloud-status"); fireEvent(this, "ha-refresh-cloud-status");
} catch (err) { } catch (err) {
@ -145,7 +167,7 @@ export class CloudRemotePref extends LitElement {
.break-word { .break-word {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
.switch { .connection-status {
position: absolute; position: absolute;
right: 24px; right: 24px;
top: 24px; top: 24px;
@ -163,6 +185,25 @@ export class CloudRemotePref extends LitElement {
.spacer { .spacer {
flex-grow: 1; 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": { "remote": {
"title": "Remote Control", "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.", "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_is_available": "Your instance is available at",
"instance_will_be_available": "Your instance will be 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", "link_learn_how_it_works": "Learn how it works",
"certificate_info": "Certificate Info" "certificate_info": "Certificate Info"
}, },