mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-10 19:06:36 +00:00
MIgrate scripts to data table (#5352)
* MIgrate scripts to data table * Update imports * Update * Lint
This commit is contained in:
parent
e645342131
commit
263138a388
@ -622,8 +622,20 @@ export class HaDataTable extends LitElement {
|
|||||||
|
|
||||||
.mdc-data-table__header-cell--icon-button,
|
.mdc-data-table__header-cell--icon-button,
|
||||||
.mdc-data-table__cell--icon-button {
|
.mdc-data-table__cell--icon-button {
|
||||||
width: 40px;
|
width: 56px;
|
||||||
padding: 4px;
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mdc-data-table__header-cell--icon-button:first-child,
|
||||||
|
.mdc-data-table__cell--icon-button:first-child {
|
||||||
|
width: 64px;
|
||||||
|
padding-left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mdc-data-table__header-cell--icon-button:last-child,
|
||||||
|
.mdc-data-table__cell--icon-button:last-child {
|
||||||
|
width: 64px;
|
||||||
|
padding-right: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdc-data-table__cell--icon-button a {
|
.mdc-data-table__cell--icon-button a {
|
||||||
|
@ -142,6 +142,9 @@ class DialogBox extends LitElement {
|
|||||||
min-width: initial;
|
min-width: initial;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
a {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
p {
|
p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-top: 6px;
|
padding-top: 6px;
|
||||||
|
@ -172,29 +172,12 @@ export class HaConfigAreasDashboard extends LitElement {
|
|||||||
--app-header-background-color: var(--sidebar-background-color);
|
--app-header-background-color: var(--sidebar-background-color);
|
||||||
--app-header-text-color: var(--sidebar-text-color);
|
--app-header-text-color: var(--sidebar-text-color);
|
||||||
}
|
}
|
||||||
a {
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
ha-card {
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 16px auto;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.empty {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
paper-item {
|
|
||||||
cursor: pointer;
|
|
||||||
padding-top: 4px;
|
|
||||||
padding-bottom: 4px;
|
|
||||||
}
|
|
||||||
ha-fab {
|
ha-fab {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 16px;
|
bottom: 16px;
|
||||||
right: 16px;
|
right: 16px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
ha-fab[is-wide] {
|
ha-fab[is-wide] {
|
||||||
bottom: 24px;
|
bottom: 24px;
|
||||||
right: 24px;
|
right: 24px;
|
||||||
|
@ -198,6 +198,7 @@ export class HaConfigDevicePage extends LitElement {
|
|||||||
integrations[0]
|
integrations[0]
|
||||||
}/logo@2x.png 2x
|
}/logo@2x.png 2x
|
||||||
"
|
"
|
||||||
|
referrerpolicy="no-referrer"
|
||||||
@load=${this._onImageLoad}
|
@load=${this._onImageLoad}
|
||||||
@error=${this._onImageError}
|
@error=${this._onImageError}
|
||||||
/>
|
/>
|
||||||
|
@ -1,31 +1,28 @@
|
|||||||
import {
|
|
||||||
LitElement,
|
|
||||||
html,
|
|
||||||
CSSResultArray,
|
|
||||||
css,
|
|
||||||
TemplateResult,
|
|
||||||
property,
|
|
||||||
customElement,
|
|
||||||
} from "lit-element";
|
|
||||||
import "@polymer/paper-icon-button/paper-icon-button";
|
import "@polymer/paper-icon-button/paper-icon-button";
|
||||||
import "@polymer/paper-item/paper-item-body";
|
|
||||||
import { HassEntity } from "home-assistant-js-websocket";
|
import { HassEntity } from "home-assistant-js-websocket";
|
||||||
|
import {
|
||||||
import "../../../layouts/hass-tabs-subpage";
|
css,
|
||||||
|
CSSResultArray,
|
||||||
import { computeRTL } from "../../../common/util/compute_rtl";
|
customElement,
|
||||||
|
html,
|
||||||
import "../../../components/ha-card";
|
LitElement,
|
||||||
import "../../../components/ha-fab";
|
property,
|
||||||
|
TemplateResult,
|
||||||
import "../ha-config-section";
|
} from "lit-element";
|
||||||
|
import memoizeOne from "memoize-one";
|
||||||
|
import { formatDateTime } from "../../../common/datetime/format_date_time";
|
||||||
|
import { fireEvent } from "../../../common/dom/fire_event";
|
||||||
import { computeStateName } from "../../../common/entity/compute_state_name";
|
import { computeStateName } from "../../../common/entity/compute_state_name";
|
||||||
|
import { computeRTL } from "../../../common/util/compute_rtl";
|
||||||
|
import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
|
||||||
|
import "../../../components/ha-fab";
|
||||||
|
import { triggerScript } from "../../../data/script";
|
||||||
|
import "../../../layouts/hass-tabs-subpage-data-table";
|
||||||
import { haStyle } from "../../../resources/styles";
|
import { haStyle } from "../../../resources/styles";
|
||||||
import { HomeAssistant, Route } from "../../../types";
|
import { HomeAssistant, Route } from "../../../types";
|
||||||
import { triggerScript } from "../../../data/script";
|
|
||||||
import { showToast } from "../../../util/toast";
|
import { showToast } from "../../../util/toast";
|
||||||
import { configSections } from "../ha-panel-config";
|
import { configSections } from "../ha-panel-config";
|
||||||
|
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
|
||||||
|
|
||||||
@customElement("ha-script-picker")
|
@customElement("ha-script-picker")
|
||||||
class HaScriptPicker extends LitElement {
|
class HaScriptPicker extends LitElement {
|
||||||
@ -35,61 +32,73 @@ class HaScriptPicker extends LitElement {
|
|||||||
@property() public narrow!: boolean;
|
@property() public narrow!: boolean;
|
||||||
@property() public route!: Route;
|
@property() public route!: Route;
|
||||||
|
|
||||||
protected render(): TemplateResult {
|
private _scripts = memoizeOne((scripts: HassEntity[]) => {
|
||||||
return html`
|
return scripts.map((script) => {
|
||||||
<hass-tabs-subpage
|
return {
|
||||||
.hass=${this.hass}
|
...script,
|
||||||
.narrow=${this.narrow}
|
name: computeStateName(script),
|
||||||
back-path="/config"
|
};
|
||||||
.route=${this.route}
|
});
|
||||||
.tabs=${configSections.automation}
|
});
|
||||||
>
|
|
||||||
<ha-config-section .isWide=${this.isWide}>
|
|
||||||
<div slot="header">
|
|
||||||
${this.hass.localize("ui.panel.config.script.picker.header")}
|
|
||||||
</div>
|
|
||||||
<div slot="introduction">
|
|
||||||
${this.hass.localize("ui.panel.config.script.picker.introduction")}
|
|
||||||
<p>
|
|
||||||
<a
|
|
||||||
href="https://home-assistant.io/docs/scripts/editor/"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.script.picker.learn_more"
|
|
||||||
)}
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ha-card>
|
private _columns = memoizeOne(
|
||||||
${this.scripts.length === 0
|
(_language): DataTableColumnContainer => {
|
||||||
? html`
|
return {
|
||||||
<div class="card-content">
|
activate: {
|
||||||
<p>
|
title: "",
|
||||||
${this.hass.localize(
|
type: "icon-button",
|
||||||
"ui.panel.config.script.picker.no_scripts"
|
template: (_toggle, script) =>
|
||||||
)}
|
html`
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
: this.scripts.map(
|
|
||||||
(script) => html`
|
|
||||||
<div class="script">
|
|
||||||
<paper-icon-button
|
<paper-icon-button
|
||||||
.script=${script}
|
.script=${script}
|
||||||
icon="hass:play"
|
icon="hass:play"
|
||||||
title="${this.hass.localize(
|
title="${this.hass.localize(
|
||||||
"ui.panel.config.script.picker.trigger_script"
|
"ui.panel.config.script.picker.activate_script"
|
||||||
)}"
|
)}"
|
||||||
@click=${this._runScript}
|
@click=${(ev: Event) => this._runScript(ev)}
|
||||||
></paper-icon-button>
|
></paper-icon-button>
|
||||||
<paper-item-body two-line>
|
`,
|
||||||
<div>${computeStateName(script)}</div>
|
},
|
||||||
</paper-item-body>
|
name: {
|
||||||
<div class="actions">
|
title: this.hass.localize(
|
||||||
<a href=${`/config/script/edit/${script.entity_id}`}>
|
"ui.panel.config.script.picker.headers.name"
|
||||||
|
),
|
||||||
|
sortable: true,
|
||||||
|
filterable: true,
|
||||||
|
direction: "asc",
|
||||||
|
grows: true,
|
||||||
|
template: (name, script: any) => html`
|
||||||
|
${name}
|
||||||
|
<div class="secondary">
|
||||||
|
${this.hass.localize("ui.card.automation.last_triggered")}:
|
||||||
|
${script.attributes.last_triggered
|
||||||
|
? formatDateTime(
|
||||||
|
new Date(script.attributes.last_triggered),
|
||||||
|
this.hass.language
|
||||||
|
)
|
||||||
|
: this.hass.localize("ui.components.relative_time.never")}
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
title: "",
|
||||||
|
type: "icon-button",
|
||||||
|
template: (_info, script) => html`
|
||||||
|
<paper-icon-button
|
||||||
|
.script=${script}
|
||||||
|
@click=${this._showInfo}
|
||||||
|
icon="hass:information-outline"
|
||||||
|
title="${this.hass.localize(
|
||||||
|
"ui.panel.config.script.picker.show_info"
|
||||||
|
)}"
|
||||||
|
></paper-icon-button>
|
||||||
|
`,
|
||||||
|
},
|
||||||
|
edit: {
|
||||||
|
title: "",
|
||||||
|
type: "icon-button",
|
||||||
|
template: (_info, script: any) => html`
|
||||||
|
<a href="/config/script/edit/${script.entity_id}">
|
||||||
<paper-icon-button
|
<paper-icon-button
|
||||||
icon="hass:pencil"
|
icon="hass:pencil"
|
||||||
title="${this.hass.localize(
|
title="${this.hass.localize(
|
||||||
@ -97,13 +106,33 @@ class HaScriptPicker extends LitElement {
|
|||||||
)}"
|
)}"
|
||||||
></paper-icon-button>
|
></paper-icon-button>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
`,
|
||||||
</div>
|
},
|
||||||
`
|
};
|
||||||
)}
|
}
|
||||||
</ha-card>
|
);
|
||||||
</ha-config-section>
|
|
||||||
|
|
||||||
|
protected render(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<hass-tabs-subpage-data-table
|
||||||
|
.hass=${this.hass}
|
||||||
|
.narrow=${this.narrow}
|
||||||
|
back-path="/config"
|
||||||
|
.route=${this.route}
|
||||||
|
.tabs=${configSections.automation}
|
||||||
|
.columns=${this._columns(this.hass.language)}
|
||||||
|
.data=${this._scripts(this.scripts)}
|
||||||
|
id="entity_id"
|
||||||
|
.noDataText=${this.hass.localize(
|
||||||
|
"ui.panel.config.script.picker.no_scripts"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<paper-icon-button
|
||||||
|
slot="toolbar-icon"
|
||||||
|
icon="hass:help-circle"
|
||||||
|
@click=${this._showHelp}
|
||||||
|
></paper-icon-button>
|
||||||
|
</hass-tabs-subpage-data-table>
|
||||||
<a href="/config/script/new">
|
<a href="/config/script/new">
|
||||||
<ha-fab
|
<ha-fab
|
||||||
?is-wide=${this.isWide}
|
?is-wide=${this.isWide}
|
||||||
@ -115,11 +144,11 @@ class HaScriptPicker extends LitElement {
|
|||||||
?rtl=${computeRTL(this.hass)}
|
?rtl=${computeRTL(this.hass)}
|
||||||
></ha-fab>
|
></ha-fab>
|
||||||
</a>
|
</a>
|
||||||
</hass-tabs-subpage>
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
private async _runScript(ev) {
|
private async _runScript(ev) {
|
||||||
|
ev.stopPropagation();
|
||||||
const script = ev.currentTarget.script as HassEntity;
|
const script = ev.currentTarget.script as HassEntity;
|
||||||
await triggerScript(this.hass, script.entity_id);
|
await triggerScript(this.hass, script.entity_id);
|
||||||
showToast(this, {
|
showToast(this, {
|
||||||
@ -131,38 +160,34 @@ class HaScriptPicker extends LitElement {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private _showInfo(ev) {
|
||||||
|
ev.stopPropagation();
|
||||||
|
const entityId = ev.currentTarget.script.entity_id;
|
||||||
|
fireEvent(this, "hass-more-info", { entityId });
|
||||||
|
}
|
||||||
|
|
||||||
|
private _showHelp() {
|
||||||
|
showAlertDialog(this, {
|
||||||
|
title: this.hass.localize("ui.panel.config.script.caption"),
|
||||||
|
text: html`
|
||||||
|
${this.hass.localize("ui.panel.config.script.picker.introduction")}
|
||||||
|
<p>
|
||||||
|
<a
|
||||||
|
href="https://home-assistant.io/docs/scripts/editor/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
${this.hass.localize("ui.panel.config.script.picker.learn_more")}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
static get styles(): CSSResultArray {
|
static get styles(): CSSResultArray {
|
||||||
return [
|
return [
|
||||||
haStyle,
|
haStyle,
|
||||||
css`
|
css`
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
ha-card {
|
|
||||||
margin-bottom: 56px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.script {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: horizontal;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 8px 0 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.script > *:first-child {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.script a[href],
|
|
||||||
paper-icon-button {
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
ha-fab {
|
ha-fab {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 16px;
|
bottom: 16px;
|
||||||
@ -187,10 +212,6 @@ class HaScriptPicker extends LitElement {
|
|||||||
right: auto;
|
right: auto;
|
||||||
left: 24px;
|
left: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
@ -1230,7 +1230,10 @@
|
|||||||
"no_scripts": "We couldn’t find any editable scripts",
|
"no_scripts": "We couldn’t find any editable scripts",
|
||||||
"add_script": "Add script",
|
"add_script": "Add script",
|
||||||
"trigger_script": "Trigger script",
|
"trigger_script": "Trigger script",
|
||||||
"edit_script": "Edit script"
|
"edit_script": "Edit script",
|
||||||
|
"headers": {
|
||||||
|
"name": "Name"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"editor": {
|
"editor": {
|
||||||
"alias": "Name",
|
"alias": "Name",
|
||||||
|
Loading…
x
Reference in New Issue
Block a user