mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
convert ha-cover-tilt-controls to TypeScript/LitElement (#7542)
This commit is contained in:
parent
161561c48a
commit
6e336dd207
@ -1,106 +0,0 @@
|
||||
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
|
||||
import "./ha-icon-button";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
/* eslint-plugin-disable lit */
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import { UNAVAILABLE } from "../data/entity";
|
||||
import CoverEntity from "../util/cover-model";
|
||||
|
||||
class HaCoverTiltControls extends PolymerElement {
|
||||
static get template() {
|
||||
return html`
|
||||
<style include="iron-flex"></style>
|
||||
<style>
|
||||
:host {
|
||||
white-space: nowrap;
|
||||
}
|
||||
[invisible] {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
</style>
|
||||
<ha-icon-button
|
||||
aria-label="Open cover tilt"
|
||||
icon="hass:arrow-top-right"
|
||||
on-click="onOpenTiltTap"
|
||||
title="Open tilt"
|
||||
invisible$="[[!entityObj.supportsOpenTilt]]"
|
||||
disabled="[[computeOpenDisabled(stateObj, entityObj)]]"
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
aria-label="Stop cover from moving"
|
||||
icon="hass:stop"
|
||||
on-click="onStopTiltTap"
|
||||
invisible$="[[!entityObj.supportsStopTilt]]"
|
||||
disabled="[[computeStopDisabled(stateObj)]]"
|
||||
title="Stop tilt"
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
aria-label="Close cover tilt"
|
||||
icon="hass:arrow-bottom-left"
|
||||
on-click="onCloseTiltTap"
|
||||
title="Close tilt"
|
||||
invisible$="[[!entityObj.supportsCloseTilt]]"
|
||||
disabled="[[computeClosedDisabled(stateObj, entityObj)]]"
|
||||
></ha-icon-button>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
hass: {
|
||||
type: Object,
|
||||
},
|
||||
stateObj: {
|
||||
type: Object,
|
||||
},
|
||||
entityObj: {
|
||||
type: Object,
|
||||
computed: "computeEntityObj(hass, stateObj)",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
computeEntityObj(hass, stateObj) {
|
||||
return new CoverEntity(hass, stateObj);
|
||||
}
|
||||
|
||||
computeStopDisabled(stateObj) {
|
||||
if (stateObj.state === UNAVAILABLE) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
computeOpenDisabled(stateObj, entityObj) {
|
||||
if (stateObj.state === UNAVAILABLE) {
|
||||
return true;
|
||||
}
|
||||
const assumedState = stateObj.attributes.assumed_state === true;
|
||||
return entityObj.isFullyOpenTilt && !assumedState;
|
||||
}
|
||||
|
||||
computeClosedDisabled(stateObj, entityObj) {
|
||||
if (stateObj.state === UNAVAILABLE) {
|
||||
return true;
|
||||
}
|
||||
const assumedState = stateObj.attributes.assumed_state === true;
|
||||
return entityObj.isFullyClosedTilt && !assumedState;
|
||||
}
|
||||
|
||||
onOpenTiltTap(ev) {
|
||||
ev.stopPropagation();
|
||||
this.entityObj.openCoverTilt();
|
||||
}
|
||||
|
||||
onCloseTiltTap(ev) {
|
||||
ev.stopPropagation();
|
||||
this.entityObj.closeCoverTilt();
|
||||
}
|
||||
|
||||
onStopTiltTap(ev) {
|
||||
ev.stopPropagation();
|
||||
this.entityObj.stopCoverTilt();
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-cover-tilt-controls", HaCoverTiltControls);
|
122
src/components/ha-cover-tilt-controls.ts
Normal file
122
src/components/ha-cover-tilt-controls.ts
Normal file
@ -0,0 +1,122 @@
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import {
|
||||
LitElement,
|
||||
property,
|
||||
internalProperty,
|
||||
CSSResult,
|
||||
css,
|
||||
customElement,
|
||||
TemplateResult,
|
||||
html,
|
||||
PropertyValues,
|
||||
} from "lit-element";
|
||||
import { classMap } from "lit-html/directives/class-map";
|
||||
|
||||
import { UNAVAILABLE } from "../data/entity";
|
||||
import { HomeAssistant } from "../types";
|
||||
import CoverEntity from "../util/cover-model";
|
||||
|
||||
import "./ha-icon-button";
|
||||
|
||||
@customElement("ha-cover-tilt-controls")
|
||||
class HaCoverTiltControls extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) stateObj!: HassEntity;
|
||||
|
||||
@internalProperty() private _entityObj?: CoverEntity;
|
||||
|
||||
protected updated(changedProperties: PropertyValues): void {
|
||||
super.updated(changedProperties);
|
||||
|
||||
if (changedProperties.has("stateObj")) {
|
||||
this._entityObj = new CoverEntity(this.hass, this.stateObj);
|
||||
}
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
if (!this._entityObj) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
return html` <ha-icon-button
|
||||
class=${classMap({
|
||||
invisible: !this._entityObj.supportsStop,
|
||||
})}
|
||||
label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.open_tilt_cover"
|
||||
)}
|
||||
icon="hass:arrow-top-right"
|
||||
@click=${this._onOpenTiltTap}
|
||||
.disabled=${this._computeOpenDisabled()}
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
class=${classMap({
|
||||
invisible: !this._entityObj.supportsStop,
|
||||
})}
|
||||
label=${this.hass.localize("ui.dialogs.more_info_control.stop_cover")}
|
||||
icon="hass:stop"
|
||||
@click=${this._onStopTiltTap}
|
||||
.disabled=${this.stateObj.state === UNAVAILABLE}
|
||||
></ha-icon-button>
|
||||
<ha-icon-button
|
||||
class=${classMap({
|
||||
invisible: !this._entityObj.supportsStop,
|
||||
})}
|
||||
label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.open_tilt_cover"
|
||||
)}
|
||||
icon="hass:arrow-bottom-left"
|
||||
@click=${this._onCloseTiltTap}
|
||||
.disabled=${this._computeClosedDisabled()}
|
||||
></ha-icon-button>`;
|
||||
}
|
||||
|
||||
private _computeOpenDisabled(): boolean {
|
||||
if (this.stateObj.state === UNAVAILABLE) {
|
||||
return true;
|
||||
}
|
||||
const assumedState = this.stateObj.attributes.assumed_state === true;
|
||||
return this._entityObj.isFullyOpenTilt && !assumedState;
|
||||
}
|
||||
|
||||
private _computeClosedDisabled(): boolean {
|
||||
if (this.stateObj.state === UNAVAILABLE) {
|
||||
return true;
|
||||
}
|
||||
const assumedState = this.stateObj.attributes.assumed_state === true;
|
||||
return this._entityObj.isFullyClosedTilt && !assumedState;
|
||||
}
|
||||
|
||||
private _onOpenTiltTap(ev): void {
|
||||
ev.stopPropagation();
|
||||
this._entityObj.openCoverTilt();
|
||||
}
|
||||
|
||||
private _onCloseTiltTap(ev): void {
|
||||
ev.stopPropagation();
|
||||
this._entityObj.closeCoverTilt();
|
||||
}
|
||||
|
||||
private _onStopTiltTap(ev): void {
|
||||
ev.stopPropagation();
|
||||
this._entityObj.stopCoverTilt();
|
||||
}
|
||||
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
:host {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.invisible {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-cover-tilt-controls": HaCoverTiltControls;
|
||||
}
|
||||
}
|
@ -554,6 +554,11 @@
|
||||
},
|
||||
"person": {
|
||||
"create_zone": "Create zone from current location"
|
||||
},
|
||||
"cover": {
|
||||
"open_tilt_cover": "Open cover tilt",
|
||||
"close_tile_cover": "Close cover tilt",
|
||||
"stop_cover": "Stop cover from moving"
|
||||
}
|
||||
},
|
||||
"entity_registry": {
|
||||
|
Loading…
x
Reference in New Issue
Block a user