mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-22 16:56:35 +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 {
|
||||
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._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-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-section-row";
|
||||
import "../special-rows/hui-weblink-row";
|
||||
|
@ -16,11 +16,19 @@ export interface WeblinkConfig {
|
||||
icon?: string;
|
||||
url: string;
|
||||
}
|
||||
export interface CallServiceConfig {
|
||||
name: string;
|
||||
icon?: string;
|
||||
action_name?: string;
|
||||
service: string;
|
||||
service_data?: string;
|
||||
}
|
||||
export type EntityRowConfig =
|
||||
| EntityConfig
|
||||
| DividerConfig
|
||||
| SectionConfig
|
||||
| WeblinkConfig;
|
||||
| WeblinkConfig
|
||||
| CallServiceConfig;
|
||||
|
||||
export interface EntityRow {
|
||||
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