mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 17:26:42 +00:00
Convert hui-call-service-row to TypeScript/LitElement (#1894)
* Convert hui-call-service-row to TypeScript/LitElement * Update on _config change * Addressed review comments * Made `service_data` optional and verified that `callService` does use `entity` if it is available in the passed config. * Removed check in `entities-card` for `service-data` and will remove the full config check once other PRs have been applied to avoid merge conflicts * Will create a docs PR to update the docs * Addressed review comments * Removed entity config check in entities-card * Made `icon` optional. Default now `remote` * Made `action_name` optional. Default now 'Run' * `.icon`
This commit is contained in:
parent
7ca2ef4c4c
commit
38bfe8c8de
@ -73,18 +73,6 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
|
|||||||
|
|
||||||
public setConfig(config: Config): void {
|
public setConfig(config: Config): void {
|
||||||
const entities = processConfigEntities(config.entities);
|
const entities = processConfigEntities(config.entities);
|
||||||
for (const entity of entities) {
|
|
||||||
if (
|
|
||||||
entity.type === "call-service" &&
|
|
||||||
(!entity.service ||
|
|
||||||
!entity.name ||
|
|
||||||
!entity.icon ||
|
|
||||||
!entity.service_data ||
|
|
||||||
!entity.action_name)
|
|
||||||
) {
|
|
||||||
throw new Error("Missing required property when type is call-service");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this._config = { theme: "default", ...config };
|
this._config = { theme: "default", ...config };
|
||||||
this._configEntities = entities;
|
this._configEntities = entities;
|
||||||
|
@ -14,7 +14,7 @@ import "../entity-rows/hui-text-entity-row.js";
|
|||||||
import "../entity-rows/hui-timer-entity-row.js";
|
import "../entity-rows/hui-timer-entity-row.js";
|
||||||
import "../entity-rows/hui-toggle-entity-row.js";
|
import "../entity-rows/hui-toggle-entity-row.js";
|
||||||
|
|
||||||
import "../special-rows/hui-call-service-row.js";
|
import "../special-rows/hui-call-service-row";
|
||||||
import "../special-rows/hui-divider-row";
|
import "../special-rows/hui-divider-row";
|
||||||
import "../special-rows/hui-section-row";
|
import "../special-rows/hui-section-row";
|
||||||
import "../special-rows/hui-weblink-row";
|
import "../special-rows/hui-weblink-row";
|
||||||
|
@ -16,11 +16,19 @@ export interface WeblinkConfig {
|
|||||||
icon?: string;
|
icon?: string;
|
||||||
url: string;
|
url: string;
|
||||||
}
|
}
|
||||||
|
export interface CallServiceConfig {
|
||||||
|
name: string;
|
||||||
|
icon?: string;
|
||||||
|
action_name?: string;
|
||||||
|
service: string;
|
||||||
|
service_data?: string;
|
||||||
|
}
|
||||||
export type EntityRowConfig =
|
export type EntityRowConfig =
|
||||||
| EntityConfig
|
| EntityConfig
|
||||||
| DividerConfig
|
| DividerConfig
|
||||||
| SectionConfig
|
| SectionConfig
|
||||||
| WeblinkConfig;
|
| WeblinkConfig
|
||||||
|
| CallServiceConfig;
|
||||||
|
|
||||||
export interface EntityRow {
|
export interface EntityRow {
|
||||||
hass?: HomeAssistant;
|
hass?: HomeAssistant;
|
||||||
|
@ -1,80 +0,0 @@
|
|||||||
import { html } from "@polymer/polymer/lib/utils/html-tag.js";
|
|
||||||
import { PolymerElement } from "@polymer/polymer/polymer-element.js";
|
|
||||||
import "@polymer/paper-button/paper-button.js";
|
|
||||||
|
|
||||||
import "../../../components/ha-icon.js";
|
|
||||||
import callService from "../common/call-service.js";
|
|
||||||
|
|
||||||
class HuiCallServiceRow extends PolymerElement {
|
|
||||||
static get template() {
|
|
||||||
return html`
|
|
||||||
${this.styleTemplate}
|
|
||||||
<ha-icon icon="[[_config.icon]]"></ha-icon>
|
|
||||||
<div class="flex">
|
|
||||||
<div>
|
|
||||||
[[_config.name]]
|
|
||||||
</div>
|
|
||||||
<paper-button on-click="_callService">[[_config.action_name]]</paper-button>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static get styleTemplate() {
|
|
||||||
return html`
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
ha-icon {
|
|
||||||
padding: 8px;
|
|
||||||
color: var(--paper-item-icon-color);
|
|
||||||
}
|
|
||||||
.flex {
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-left: 16px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.flex div {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
paper-button {
|
|
||||||
color: var(--primary-color);
|
|
||||||
font-weight: 500;
|
|
||||||
margin-right: -.57em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static get properties() {
|
|
||||||
return {
|
|
||||||
hass: Object,
|
|
||||||
_config: Object,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
setConfig(config) {
|
|
||||||
if (
|
|
||||||
!config ||
|
|
||||||
!config.icon ||
|
|
||||||
!config.name ||
|
|
||||||
!config.action_name ||
|
|
||||||
!config.service ||
|
|
||||||
!config.service_data
|
|
||||||
) {
|
|
||||||
throw new Error("Error in card configuration.");
|
|
||||||
}
|
|
||||||
this._config = config;
|
|
||||||
}
|
|
||||||
|
|
||||||
_callService() {
|
|
||||||
callService(this._config, this.hass);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
customElements.define("hui-call-service-row", HuiCallServiceRow);
|
|
93
src/panels/lovelace/special-rows/hui-call-service-row.ts
Normal file
93
src/panels/lovelace/special-rows/hui-call-service-row.ts
Normal file
@ -0,0 +1,93 @@
|
|||||||
|
import { html, LitElement } from "@polymer/lit-element";
|
||||||
|
import "@polymer/paper-button/paper-button.js";
|
||||||
|
|
||||||
|
import "../../../components/ha-icon.js";
|
||||||
|
|
||||||
|
import callService from "../common/call-service.js";
|
||||||
|
import { EntityRow, CallServiceConfig } from "../entity-rows/types.js";
|
||||||
|
import { HomeAssistant } from "../../../types.js";
|
||||||
|
import { TemplateResult } from "lit-html";
|
||||||
|
|
||||||
|
class HuiCallServiceRow extends LitElement implements EntityRow {
|
||||||
|
public hass?: HomeAssistant;
|
||||||
|
private _config?: CallServiceConfig;
|
||||||
|
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
hass: {},
|
||||||
|
_config: {},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
public setConfig(config: CallServiceConfig): void {
|
||||||
|
if (!config || !config.name || !config.service) {
|
||||||
|
throw new Error("Error in card configuration.");
|
||||||
|
}
|
||||||
|
|
||||||
|
this._config = { icon: "hass:remote", action_name: "Run", ...config };
|
||||||
|
}
|
||||||
|
|
||||||
|
protected render(): TemplateResult {
|
||||||
|
if (!this._config) {
|
||||||
|
return html``;
|
||||||
|
}
|
||||||
|
|
||||||
|
return html`
|
||||||
|
${this.renderStyle()}
|
||||||
|
<ha-icon .icon="${this._config.icon}"></ha-icon>
|
||||||
|
<div class="flex">
|
||||||
|
<div>
|
||||||
|
${this._config.name}
|
||||||
|
</div>
|
||||||
|
<paper-button
|
||||||
|
@click="${this._callService}"
|
||||||
|
>${this._config.action_name}</paper-button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderStyle(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
ha-icon {
|
||||||
|
padding: 8px;
|
||||||
|
color: var(--paper-item-icon-color);
|
||||||
|
}
|
||||||
|
.flex {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-left: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.flex div {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
paper-button {
|
||||||
|
color: var(--primary-color);
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: -.57em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _callService() {
|
||||||
|
callService(this._config, this.hass);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"hui-call-service-row": HuiCallServiceRow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("hui-call-service-row", HuiCallServiceRow);
|
Loading…
x
Reference in New Issue
Block a user