diff --git a/src/dialogs/domain-toggler/dialog-domain-toggler.ts b/src/dialogs/domain-toggler/dialog-domain-toggler.ts new file mode 100644 index 0000000000..8a8d7ddd67 --- /dev/null +++ b/src/dialogs/domain-toggler/dialog-domain-toggler.ts @@ -0,0 +1,97 @@ +import { + customElement, + LitElement, + property, + CSSResultArray, + css, + TemplateResult, + html, +} from "lit-element"; +import "../../components/dialog/ha-paper-dialog"; +import { HomeAssistant } from "../../types"; +import { HaDomainTogglerDialogParams } from "./show-dialog-domain-toggler"; +import { PolymerChangedEvent } from "../../polymer-types"; +import { haStyleDialog } from "../../resources/styles"; + +@customElement("dialog-domain-toggler") +class DomainTogglerDialog extends LitElement { + public hass!: HomeAssistant; + @property() private _params?: HaDomainTogglerDialogParams; + + public async showDialog(params: HaDomainTogglerDialogParams): Promise { + this._params = params; + } + + protected render(): TemplateResult | void { + if (!this._params) { + return html``; + } + + const domains = this._params.domains + .map((domain) => [this.hass.localize(`domain.${domain}`), domain]) + .sort(); + + return html` + +

Toggle Domains

+
+ ${domains.map( + (domain) => + html` +
${domain[0]}
+ + ${this.hass.localize("state.default.off")} + + + ${this.hass.localize("state.default.on")} + + ` + )} +
+
+ `; + } + + private _openedChanged(ev: PolymerChangedEvent): void { + // Closed dialog by clicking on the overlay + if (!ev.detail.value) { + this._params = undefined; + } + } + + private _handleOff(ev) { + this._params!.toggleDomain(ev.currentTarget.domain, false); + ev.currentTarget.blur(); + } + + private _handleOn(ev) { + this._params!.toggleDomain(ev.currentTarget.domain, true); + ev.currentTarget.blur(); + } + + static get styles(): CSSResultArray { + return [ + haStyleDialog, + css` + ha-paper-dialog { + max-width: 500px; + } + div { + display: grid; + grid-template-columns: auto auto auto; + align-items: center; + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "dialog-domain-toggler": DomainTogglerDialog; + } +} diff --git a/src/dialogs/domain-toggler/show-dialog-domain-toggler.ts b/src/dialogs/domain-toggler/show-dialog-domain-toggler.ts new file mode 100644 index 0000000000..e97c54354e --- /dev/null +++ b/src/dialogs/domain-toggler/show-dialog-domain-toggler.ts @@ -0,0 +1,20 @@ +import { fireEvent } from "../../common/dom/fire_event"; + +export interface HaDomainTogglerDialogParams { + domains: string[]; + toggleDomain: (domain: string, turnOn: boolean) => void; +} + +export const loadDomainTogglerDialog = () => + import(/* webpackChunkName: "dialog-domain-toggler" */ "./dialog-domain-toggler"); + +export const showDomainTogglerDialog = ( + element: HTMLElement, + dialogParams: HaDomainTogglerDialogParams +): void => { + fireEvent(element, "show-dialog", { + dialogTag: "dialog-domain-toggler", + dialogImport: loadDomainTogglerDialog, + dialogParams, + }); +}; diff --git a/src/panels/config/cloud/ha-config-cloud-google-assistant.ts b/src/panels/config/cloud/ha-config-cloud-google-assistant.ts index 9856be59f1..cc0f799a19 100644 --- a/src/panels/config/cloud/ha-config-cloud-google-assistant.ts +++ b/src/panels/config/cloud/ha-config-cloud-google-assistant.ts @@ -8,6 +8,7 @@ import { property, } from "lit-element"; import "@polymer/paper-toggle-button"; +import "@polymer/paper-icon-button"; import "../../../layouts/hass-subpage"; import "../../../layouts/hass-loading-screen"; import "../../../components/ha-card"; @@ -33,12 +34,21 @@ import computeStateName from "../../../common/entity/compute_state_name"; import { fireEvent } from "../../../common/dom/fire_event"; import { showToast } from "../../../util/toast"; import { PolymerChangedEvent } from "../../../polymer-types"; +import { showDomainTogglerDialog } from "../../../dialogs/domain-toggler/show-dialog-domain-toggler"; +import computeDomain from "../../../common/entity/compute_domain"; + +const DEFAULT_CONFIG_EXPOSE = true; + +const configIsExposed = (config: GoogleEntityConfig) => + config.should_expose === undefined + ? DEFAULT_CONFIG_EXPOSE + : config.should_expose; @customElement("ha-config-cloud-google-assistant") class CloudGoogleAssistant extends LitElement { @property() public hass!: HomeAssistant; @property() public cloudStatus!: CloudStatusLoggedIn; - @property() public isWide!: boolean; + @property() public narrow!: boolean; @property() private _entities?: GoogleEntity[]; @property() private _entityConfigs: CloudPreferences["google_entity_configs"] = {}; @@ -69,7 +79,7 @@ class CloudGoogleAssistant extends LitElement { const stateObj = this.hass.states[entity.entity_id]; const config = this._entityConfigs[entity.entity_id] || {}; const isExposed = emptyFilter - ? Boolean(config.should_expose) + ? configIsExposed(config) : filterFunc(entity.entity_id); if (isExposed) { selected++; @@ -114,7 +124,18 @@ class CloudGoogleAssistant extends LitElement { return html` - ${selected} selected + + ${selected}${!this.narrow + ? html` + selected + ` + : ""} + + ${!emptyFilter ? html`