From fca286d6c0e09905dedf6ad50abae46e37a4ae99 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 30 Mar 2020 14:21:55 +0200 Subject: [PATCH] Change automation picker to data table (#5344) * Change automation picker to data-table * Update ha-automation-picker.ts * Update ha-automation-picker.ts * Update ha-automation-picker.ts * Add edit button + disabled tooltip * Fix translation key * Remove unused * Comments and fixes * Update ha-automation-picker.ts --- src/components/data-table/ha-data-table.ts | 26 +- .../config/automation/ha-automation-picker.ts | 289 ++++++++---------- src/translations/en.json | 5 +- 3 files changed, 160 insertions(+), 160 deletions(-) diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index f68793bb04..19136ce94e 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -69,7 +69,7 @@ export interface DataTableSortColumnData { export interface DataTableColumnData extends DataTableSortColumnData { title: string; - type?: "numeric" | "icon"; + type?: "numeric" | "icon" | "icon-button"; template?: (data: any, row: T) => TemplateResult | string; width?: string; maxWidth?: string; @@ -228,10 +228,13 @@ export class HaDataTable extends LitElement { const sorted = key === this._sortColumn; const classes = { "mdc-data-table__header-cell--numeric": Boolean( - column.type && column.type === "numeric" + column.type === "numeric" ), "mdc-data-table__header-cell--icon": Boolean( - column.type && column.type === "icon" + column.type === "icon" + ), + "mdc-data-table__header-cell--icon-button": Boolean( + column.type === "icon-button" ), sortable: Boolean(column.sortable), "not-sorted": Boolean(column.sortable && !sorted), @@ -318,10 +321,13 @@ export class HaDataTable extends LitElement {
{ + return automations.map((automation) => { + return { + ...automation, + name: computeStateName(automation), + }; + }); + }); + + private _columns = memoizeOne( + (narrow: boolean, _language): DataTableColumnContainer => { + const columns: DataTableColumnContainer = { + toggle: { + title: "", + type: "icon", + template: (_toggle, automation) => + html` + + `, + }, + name: { + title: this.hass.localize( + "ui.panel.config.automation.picker.headers.name" + ), + sortable: true, + filterable: true, + direction: "asc", + grows: true, + template: (name, automation: any) => html` + ${name} +
+ ${this.hass.localize("ui.card.automation.last_triggered")}: + ${automation.attributes.last_triggered + ? formatDateTime( + new Date(automation.attributes.last_triggered), + this.hass.language + ) + : this.hass.localize("ui.components.relative_time.never")} +
+ `, + }, + }; + if (!narrow) { + columns.execute = { + title: "", + template: (_info, automation) => html` + + ${this.hass.localize("ui.card.automation.trigger")} + + `, + }; + } + columns.info = { + title: "", + type: "icon-button", + template: (_info, automation) => html` + + `, + }; + columns.edit = { + title: "", + type: "icon-button", + template: (_info, automation: any) => html` + + + + ${!automation.attributes.id + ? html` + + ${this.hass.localize( + "ui.panel.config.automation.picker.only_editable" + )} + + ` + : ""} + `, + }; + return columns; + } + ); + protected render(): TemplateResult { return html` - - -
- ${this.hass.localize("ui.panel.config.automation.picker.header")} -
-
- ${this.hass.localize( - "ui.panel.config.automation.picker.introduction" - )} -

- - ${this.hass.localize( - "ui.panel.config.automation.picker.learn_more" - )} - -

-
- - - ${this.automations.length === 0 - ? html` -
-

- ${this.hass.localize( - "ui.panel.config.automation.picker.no_automations" - )} -

-
- ` - : this.automations.map( - (automation) => html` - -
- - - -
${computeStateName(automation)}
-
- ${this.hass.localize( - "ui.card.automation.last_triggered" - )}: ${ - automation.attributes.last_triggered - ? formatDateTime( - new Date(automation.attributes.last_triggered), - this.hass.language - ) - : this.hass.localize("ui.components.relative_time.never") - } -
- -
- - - - ${ - !automation.attributes.id - ? html` - - ${this.hass.localize( - "ui.panel.config.automation.picker.only_editable" - )} - - ` - : "" - } - -
-
- - ` - )} - - -
- -
- + + `; } private _showInfo(ev) { + ev.stopPropagation(); const entityId = ev.currentTarget.automation.entity_id; fireEvent(this, "hass-more-info", { entityId }); } + private _execute(ev) { + const entityId = ev.currentTarget.automation.entity_id; + triggerAutomation(this.hass, entityId); + } + private _createNew() { if (!isComponentLoaded(this.hass, "cloud")) { showAutomationEditor(this); @@ -190,33 +202,6 @@ class HaAutomationPicker extends LitElement { return [ haStyle, css` - :host { - display: block; - } - - ha-card { - margin-bottom: 56px; - } - - .automation { - display: flex; - flex-direction: horizontal; - align-items: center; - padding: 0 8px 0 16px; - } - - .automation a[href] { - color: var(--primary-text-color); - } - - ha-entity-toggle { - margin-right: 16px; - } - - .actions { - display: flex; - } - ha-fab { position: fixed; bottom: 16px; @@ -242,10 +227,6 @@ class HaAutomationPicker extends LitElement { right: auto; left: 24px; } - - a { - color: var(--primary-color); - } `, ]; } diff --git a/src/translations/en.json b/src/translations/en.json index 0df149151d..c74e17a60a 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1002,7 +1002,10 @@ "edit_automation": "Edit automation", "show_info_automation": "Show info about automation", "delete_automation": "Delete automation", - "delete_confirm": "Are you sure you want to delete this automation?" + "delete_confirm": "Are you sure you want to delete this automation?", + "headers": { + "name": "Name" + } }, "editor": { "enable_disable": "Enable/Disable automation",