jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-22 16:56:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Convert hui-call-service-row to TypeScript/LitElement (#1894)

Browse Source 
* 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:
Ian Richardson 2018-10-30 05:15:12 -05:00 committed by Paulus Schoutsen
parent 7ca2ef4c4c
commit 38bfe8c8de
5 changed files with 103 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/panels/lovelace/cards/hui-entities-card.ts
View File

@ -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;

2
src/panels/lovelace/common/create-row-element.js
View File

@ -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";

10
src/panels/lovelace/entity-rows/types.ts
View File

@ -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;

80
src/panels/lovelace/special-rows/hui-call-service-row.js
View File

@ -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
View 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);