106 lines
2.9 KiB
TypeScript
106 lines
2.9 KiB
TypeScript
import { LitElement, html, customElement, property, CSSResult, TemplateResult, css, PropertyValues } from 'lit-element';
|
|
import {
|
|
HomeAssistant,
|
|
hasConfigOrEntityChanged,
|
|
hasAction,
|
|
ActionHandlerEvent,
|
|
handleAction,
|
|
LovelaceCardEditor,
|
|
getLovelace,
|
|
} from 'custom-card-helpers';
|
|
|
|
import './editor';
|
|
|
|
import { BoilerplateCardConfig } from './types';
|
|
import { actionHandler } from './action-handler-directive';
|
|
import { CARD_VERSION } from './const';
|
|
|
|
/* eslint no-console: 0 */
|
|
console.info(
|
|
`%c BOILERPLATE-CARD \n%c Version ${CARD_VERSION} `,
|
|
'color: orange; font-weight: bold; background: black',
|
|
'color: white; font-weight: bold; background: dimgray',
|
|
);
|
|
|
|
// TODO Name your custom element
|
|
@customElement('boilerplate-card')
|
|
export class BoilerplateCard extends LitElement {
|
|
public static async getConfigElement(): Promise<LovelaceCardEditor> {
|
|
return document.createElement('boilerplate-card-editor') as LovelaceCardEditor;
|
|
}
|
|
|
|
public static getStubConfig(): object {
|
|
return {};
|
|
}
|
|
|
|
// TODO Add any properities that should cause your element to re-render here
|
|
@property() public hass?: HomeAssistant;
|
|
@property() private _config?: BoilerplateCardConfig;
|
|
|
|
public setConfig(config: BoilerplateCardConfig): void {
|
|
// TODO Check for required fields and that they are of the proper format
|
|
if (!config || config.show_error) {
|
|
throw new Error('Invalid configuration');
|
|
}
|
|
|
|
if (config.test_gui) {
|
|
getLovelace().setEditMode(true);
|
|
}
|
|
|
|
this._config = {
|
|
name: 'Boilerplate',
|
|
...config,
|
|
};
|
|
}
|
|
|
|
protected shouldUpdate(changedProps: PropertyValues): boolean {
|
|
return hasConfigOrEntityChanged(this, changedProps, false);
|
|
}
|
|
|
|
protected render(): TemplateResult | void {
|
|
if (!this._config || !this.hass) {
|
|
return html``;
|
|
}
|
|
|
|
// TODO Check for stateObj or other necessary things and render a warning if missing
|
|
if (this._config.show_warning) {
|
|
return html`
|
|
<ha-card>
|
|
<div class="warning">Show Warning</div>
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
return html`
|
|
<ha-card
|
|
.header=${this._config.name}
|
|
@action=${this._handleAction}
|
|
.actionHandler=${actionHandler({
|
|
hasHold: hasAction(this._config.hold_action),
|
|
hasDoubleTap: hasAction(this._config.double_tap_action),
|
|
repeat: this._config.hold_action ? this._config.hold_action.repeat : undefined,
|
|
})}
|
|
tabindex="0"
|
|
aria-label=${`Boilerplate: ${this._config.entity}`}
|
|
></ha-card>
|
|
`;
|
|
}
|
|
|
|
private _handleAction(ev: ActionHandlerEvent): void {
|
|
if (this.hass && this._config && ev.detail.action) {
|
|
handleAction(this, this.hass, this._config, ev.detail.action);
|
|
}
|
|
}
|
|
|
|
static get styles(): CSSResult {
|
|
return css`
|
|
.warning {
|
|
display: block;
|
|
color: black;
|
|
background-color: #fce588;
|
|
padding: 8px;
|
|
}
|
|
`;
|
|
}
|
|
}
|