mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-22 16:56:35 +00:00
Update Types for various cards (#1920)
* Update Types * Travis fix * Travis change * Add HTMLElementTagNameMap for gauge * Review Changes * Formatting values as string to be accepted into format temp
This commit is contained in:
parent
03b1e40593
commit
094eb632f2
@ -9,11 +9,11 @@ interface Config extends LovelaceConfig {
|
||||
}
|
||||
|
||||
class HuiErrorCard extends LitElement implements LovelaceCard {
|
||||
protected config?: Config;
|
||||
private _config?: Config;
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
config: {},
|
||||
_config: {},
|
||||
};
|
||||
}
|
||||
|
||||
@ -21,19 +21,19 @@ class HuiErrorCard extends LitElement implements LovelaceCard {
|
||||
return 4;
|
||||
}
|
||||
|
||||
public setConfig(config): void {
|
||||
this.config = config;
|
||||
public setConfig(config: Config): void {
|
||||
this._config = config;
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
if (!this.config) {
|
||||
if (!this._config) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
return html`
|
||||
${this.renderStyle()}
|
||||
${this.config.error}
|
||||
<pre>${this._toStr(this.config.origConfig)}</pre>
|
||||
${this._config.error}
|
||||
<pre>${this._toStr(this._config.origConfig)}</pre>
|
||||
`;
|
||||
}
|
||||
|
||||
|
@ -6,8 +6,9 @@ import {
|
||||
} from "@polymer/lit-element";
|
||||
import { LovelaceCard, LovelaceConfig } from "../types.js";
|
||||
import { HomeAssistant } from "../../../types.js";
|
||||
import isValidEntityId from "../../../common/entity/valid_entity_id.js";
|
||||
import { fireEvent } from "../../../common/dom/fire_event.js";
|
||||
import { TemplateResult } from "lit-html";
|
||||
import isValidEntityId from "../../../common/entity/valid_entity_id.js";
|
||||
|
||||
import "../../../components/ha-card.js";
|
||||
|
||||
@ -38,11 +39,11 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
|
||||
};
|
||||
}
|
||||
|
||||
public getCardSize() {
|
||||
public getCardSize(): number {
|
||||
return 2;
|
||||
}
|
||||
|
||||
public setConfig(config) {
|
||||
public setConfig(config: Config): void {
|
||||
if (!config || !config.entity) {
|
||||
throw new Error("Invalid card configuration");
|
||||
}
|
||||
@ -52,7 +53,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
|
||||
this._config = { min: 0, max: 100, ...config };
|
||||
}
|
||||
|
||||
protected render() {
|
||||
protected render(): TemplateResult {
|
||||
if (!this._config || !this.hass) {
|
||||
return html``;
|
||||
}
|
||||
@ -92,7 +93,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
|
||||
`;
|
||||
}
|
||||
|
||||
protected shouldUpdate(changedProps: PropertyValues) {
|
||||
protected shouldUpdate(changedProps: PropertyValues): boolean {
|
||||
if (changedProps.get("hass")) {
|
||||
return (
|
||||
(changedProps.get("hass") as any).states[this._config!.entity] !==
|
||||
@ -102,10 +103,10 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
|
||||
if (changedProps.get("_config")) {
|
||||
return changedProps.get("_config") !== this._config;
|
||||
}
|
||||
return (changedProps as unknown) as boolean;
|
||||
return true;
|
||||
}
|
||||
|
||||
protected updated() {
|
||||
protected updated(): void {
|
||||
if (
|
||||
!this._config ||
|
||||
!this.hass ||
|
||||
@ -135,7 +136,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
|
||||
);
|
||||
}
|
||||
|
||||
private renderStyle() {
|
||||
private renderStyle(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
ha-card {
|
||||
@ -215,7 +216,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
|
||||
`;
|
||||
}
|
||||
|
||||
private _computeSeverity(stateValue: string, sections: object) {
|
||||
private _computeSeverity(stateValue: string, sections: object): string {
|
||||
const numberValue = Number(stateValue);
|
||||
|
||||
if (!sections) {
|
||||
@ -247,20 +248,26 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
|
||||
return severityMap.normal;
|
||||
}
|
||||
|
||||
private _translateTurn(value: number, config: Config) {
|
||||
private _translateTurn(value: number, config: Config): number {
|
||||
const maxTurnValue = Math.min(Math.max(value, config.min!), config.max!);
|
||||
return (
|
||||
(5 * (maxTurnValue - config.min!)) / (config.max! - config.min!) / 10
|
||||
);
|
||||
}
|
||||
|
||||
private _computeBaseUnit() {
|
||||
private _computeBaseUnit(): string {
|
||||
return this.clientWidth < 200 ? this.clientWidth / 5 + "px" : "50px";
|
||||
}
|
||||
|
||||
private _handleClick() {
|
||||
private _handleClick(): void {
|
||||
fireEvent(this, "hass-more-info", { entityId: this._config!.entity });
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"hui-gauge-card": HuiGaugeCard;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("hui-gauge-card", HuiGaugeCard);
|
||||
|
@ -1,8 +1,9 @@
|
||||
import { html, LitElement } from "@polymer/lit-element";
|
||||
import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
|
||||
|
||||
import "../../../components/ha-card.js";
|
||||
|
||||
import { LovelaceCard, LovelaceConfig } from "../types.js";
|
||||
import { TemplateResult } from "lit-html";
|
||||
|
||||
interface Config extends LovelaceConfig {
|
||||
aspect_ratio?: string;
|
||||
@ -11,42 +12,42 @@ interface Config extends LovelaceConfig {
|
||||
}
|
||||
|
||||
export class HuiIframeCard extends LitElement implements LovelaceCard {
|
||||
protected config?: Config;
|
||||
protected _config?: Config;
|
||||
|
||||
static get properties() {
|
||||
static get properties(): PropertyDeclarations {
|
||||
return {
|
||||
config: {},
|
||||
_config: {},
|
||||
};
|
||||
}
|
||||
|
||||
public getCardSize() {
|
||||
public getCardSize(): number {
|
||||
return 1 + this.offsetHeight / 50;
|
||||
}
|
||||
|
||||
public setConfig(config: Config) {
|
||||
public setConfig(config: Config): void {
|
||||
if (!config.url) {
|
||||
throw new Error("URL required");
|
||||
}
|
||||
|
||||
this.config = config;
|
||||
this._config = config;
|
||||
}
|
||||
|
||||
protected render() {
|
||||
if (!this.config) {
|
||||
protected render(): TemplateResult {
|
||||
if (!this._config) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
return html`
|
||||
${this.renderStyle()}
|
||||
<ha-card .header="${this.config.title}">
|
||||
<ha-card .header="${this._config.title}">
|
||||
<div id="root">
|
||||
<iframe src="${this.config.url}"></iframe>
|
||||
<iframe src="${this._config.url}"></iframe>
|
||||
</div>
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderStyle() {
|
||||
private renderStyle(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
ha-card {
|
||||
@ -55,7 +56,7 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
|
||||
#root {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding-top: ${this.config!.aspect_ratio || "50%"};
|
||||
padding-top: ${this._config!.aspect_ratio || "50%"};
|
||||
}
|
||||
iframe {
|
||||
position: absolute;
|
||||
|
@ -1,10 +1,11 @@
|
||||
import { html, LitElement } from "@polymer/lit-element";
|
||||
import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
|
||||
import { classMap } from "lit-html/directives/classMap.js";
|
||||
|
||||
import "../../../components/ha-card.js";
|
||||
import "../../../components/ha-markdown.js";
|
||||
|
||||
import { LovelaceCard, LovelaceConfig } from "../types.js";
|
||||
import { TemplateResult } from "lit-html";
|
||||
|
||||
interface Config extends LovelaceConfig {
|
||||
content: string;
|
||||
@ -12,45 +13,45 @@ interface Config extends LovelaceConfig {
|
||||
}
|
||||
|
||||
export class HuiMarkdownCard extends LitElement implements LovelaceCard {
|
||||
protected config?: Config;
|
||||
private _config?: Config;
|
||||
|
||||
static get properties() {
|
||||
static get properties(): PropertyDeclarations {
|
||||
return {
|
||||
config: {},
|
||||
_config: {},
|
||||
};
|
||||
}
|
||||
|
||||
public getCardSize() {
|
||||
return this.config!.content.split("\n").length;
|
||||
public getCardSize(): number {
|
||||
return this._config!.content.split("\n").length;
|
||||
}
|
||||
|
||||
public setConfig(config: Config) {
|
||||
public setConfig(config: Config): void {
|
||||
if (!config.content) {
|
||||
throw new Error("Invalid Configuration: Content Required");
|
||||
}
|
||||
|
||||
this.config = config;
|
||||
this._config = config;
|
||||
}
|
||||
|
||||
protected render() {
|
||||
if (!this.config) {
|
||||
protected render(): TemplateResult {
|
||||
if (!this._config) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
return html`
|
||||
${this.renderStyle()}
|
||||
<ha-card .header="${this.config.title}">
|
||||
<ha-card .header="${this._config.title}">
|
||||
<ha-markdown
|
||||
class="markdown ${classMap({
|
||||
"no-header": !this.config.title,
|
||||
"no-header": !this._config.title,
|
||||
})}"
|
||||
.content="${this.config.content}"
|
||||
.content="${this._config.content}"
|
||||
></ha-markdown>
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderStyle() {
|
||||
private renderStyle(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
|
@ -1,4 +1,9 @@
|
||||
import { html, LitElement } from "@polymer/lit-element";
|
||||
import {
|
||||
html,
|
||||
LitElement,
|
||||
PropertyDeclarations,
|
||||
PropertyValues,
|
||||
} from "@polymer/lit-element";
|
||||
import { classMap } from "lit-html/directives/classMap.js";
|
||||
import { jQuery } from "../../../resources/jquery";
|
||||
|
||||
@ -10,6 +15,7 @@ import { HomeAssistant, ClimateEntity } from "../../../types.js";
|
||||
import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
|
||||
import { LovelaceCard, LovelaceConfig } from "../types.js";
|
||||
import computeStateName from "../../../common/entity/compute_state_name.js";
|
||||
import { TemplateResult } from "lit-html";
|
||||
|
||||
const thermostatConfig = {
|
||||
radius: 150,
|
||||
@ -33,39 +39,39 @@ interface Config extends LovelaceConfig {
|
||||
entity: string;
|
||||
}
|
||||
|
||||
function formatTemp(temps) {
|
||||
function formatTemp(temps: string[]): string {
|
||||
return temps.filter(Boolean).join("-");
|
||||
}
|
||||
|
||||
export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
|
||||
implements LovelaceCard {
|
||||
public hass?: HomeAssistant;
|
||||
protected config?: Config;
|
||||
private _config?: Config;
|
||||
|
||||
static get properties() {
|
||||
static get properties(): PropertyDeclarations {
|
||||
return {
|
||||
hass: {},
|
||||
config: {},
|
||||
_config: {},
|
||||
};
|
||||
}
|
||||
|
||||
public getCardSize() {
|
||||
public getCardSize(): number {
|
||||
return 4;
|
||||
}
|
||||
|
||||
public setConfig(config: Config) {
|
||||
public setConfig(config: Config): void {
|
||||
if (!config.entity || config.entity.split(".")[0] !== "climate") {
|
||||
throw new Error("Specify an entity from within the climate domain.");
|
||||
}
|
||||
|
||||
this.config = config;
|
||||
this._config = config;
|
||||
}
|
||||
|
||||
protected render() {
|
||||
if (!this.hass || !this.config) {
|
||||
protected render(): TemplateResult {
|
||||
if (!this.hass || !this._config) {
|
||||
return html``;
|
||||
}
|
||||
const stateObj = this.hass.states[this.config.entity] as ClimateEntity;
|
||||
const stateObj = this.hass.states[this._config.entity] as ClimateEntity;
|
||||
const broadCard = this.clientWidth > 390;
|
||||
const mode = modeIcons[stateObj.attributes.operation_mode || ""]
|
||||
? stateObj.attributes.operation_mode!
|
||||
@ -107,18 +113,21 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
|
||||
`;
|
||||
}
|
||||
|
||||
protected shouldUpdate(changedProps) {
|
||||
protected shouldUpdate(changedProps: PropertyValues): boolean {
|
||||
if (changedProps.get("hass")) {
|
||||
return (
|
||||
changedProps.get("hass").states[this.config!.entity] !==
|
||||
this.hass!.states[this.config!.entity]
|
||||
(changedProps.get("hass") as any).states[this._config!.entity] !==
|
||||
this.hass!.states[this._config!.entity]
|
||||
);
|
||||
}
|
||||
return changedProps;
|
||||
if (changedProps.has("_config")) {
|
||||
return true;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
protected firstUpdated() {
|
||||
const stateObj = this.hass!.states[this.config!.entity] as ClimateEntity;
|
||||
protected firstUpdated(): void {
|
||||
const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
|
||||
|
||||
const _sliderType =
|
||||
stateObj.attributes.target_temp_low &&
|
||||
@ -137,8 +146,8 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
|
||||
});
|
||||
}
|
||||
|
||||
protected updated() {
|
||||
const stateObj = this.hass!.states[this.config!.entity] as ClimateEntity;
|
||||
protected updated(): void {
|
||||
const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
|
||||
|
||||
let sliderValue;
|
||||
let uiValue;
|
||||
@ -151,8 +160,8 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
|
||||
stateObj.attributes.target_temp_high
|
||||
}`;
|
||||
uiValue = formatTemp([
|
||||
stateObj.attributes.target_temp_low,
|
||||
stateObj.attributes.target_temp_high,
|
||||
String(stateObj.attributes.target_temp_low),
|
||||
String(stateObj.attributes.target_temp_high),
|
||||
]);
|
||||
} else {
|
||||
sliderValue = uiValue = stateObj.attributes.temperature;
|
||||
@ -164,7 +173,7 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
|
||||
this.shadowRoot!.querySelector("#set-temperature")!.innerHTML = uiValue;
|
||||
}
|
||||
|
||||
private renderStyle() {
|
||||
private renderStyle(): TemplateResult {
|
||||
return html`
|
||||
${roundSliderStyle}
|
||||
<style>
|
||||
@ -308,40 +317,40 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
|
||||
`;
|
||||
}
|
||||
|
||||
private _dragEvent(e) {
|
||||
private _dragEvent(e): void {
|
||||
this.shadowRoot!.querySelector("#set-temperature")!.innerHTML = formatTemp(
|
||||
String(e.value).split(",")
|
||||
);
|
||||
}
|
||||
|
||||
private _setTemperature(e) {
|
||||
const stateObj = this.hass!.states[this.config!.entity] as ClimateEntity;
|
||||
private _setTemperature(e): void {
|
||||
const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
|
||||
if (
|
||||
stateObj.attributes.target_temp_low &&
|
||||
stateObj.attributes.target_temp_high
|
||||
) {
|
||||
if (e.handle.index === 1) {
|
||||
this.hass!.callService("climate", "set_temperature", {
|
||||
entity_id: this.config!.entity,
|
||||
entity_id: this._config!.entity,
|
||||
target_temp_low: e.handle.value,
|
||||
target_temp_high: stateObj.attributes.target_temp_high,
|
||||
});
|
||||
} else {
|
||||
this.hass!.callService("climate", "set_temperature", {
|
||||
entity_id: this.config!.entity,
|
||||
entity_id: this._config!.entity,
|
||||
target_temp_low: stateObj.attributes.target_temp_low,
|
||||
target_temp_high: e.handle.value,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.hass!.callService("climate", "set_temperature", {
|
||||
entity_id: this.config!.entity,
|
||||
entity_id: this._config!.entity,
|
||||
temperature: e.value,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private _renderIcon(mode, currentMode) {
|
||||
private _renderIcon(mode: string, currentMode: string): TemplateResult {
|
||||
if (!modeIcons[mode]) {
|
||||
return html``;
|
||||
}
|
||||
@ -353,9 +362,9 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
|
||||
></ha-icon>`;
|
||||
}
|
||||
|
||||
private _handleModeClick(e: MouseEvent) {
|
||||
private _handleModeClick(e: MouseEvent): void {
|
||||
this.hass!.callService("climate", "set_operation_mode", {
|
||||
entity_id: this.config!.entity,
|
||||
entity_id: this._config!.entity,
|
||||
operation_mode: (e.currentTarget as any).mode,
|
||||
});
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user