mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 09:16:38 +00:00
Pimp automation picker (#3193)
This commit is contained in:
Paulus Schoutsen
GitHub
parent
309fecc9f3
commit
1b50100b6c
@ -6,6 +6,7 @@ import {
|
||||
export interface AutomationEntity extends HassEntityBase {
|
||||
attributes: HassEntityAttributeBase & {
|
||||
id?: string;
|
||||
last_triggered: string;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -1,184 +0,0 @@
|
||||
import "@polymer/app-layout/app-header/app-header";
|
||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
||||
import "@polymer/paper-fab/paper-fab";
|
||||
import "@polymer/paper-icon-button/paper-icon-button";
|
||||
import "@polymer/paper-item/paper-item-body";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-paper-icon-button-arrow-prev";
|
||||
import "../../../layouts/ha-app-layout";
|
||||
|
||||
import "../ha-config-section";
|
||||
|
||||
import "../../../components/ha-icon-next";
|
||||
|
||||
import NavigateMixin from "../../../mixins/navigate-mixin";
|
||||
import LocalizeMixin from "../../../mixins/localize-mixin";
|
||||
import computeStateName from "../../../common/entity/compute_state_name";
|
||||
import { computeRTL } from "../../../common/util/compute_rtl";
|
||||
|
||||
/*
|
||||
* @appliesMixin LocalizeMixin
|
||||
* @appliesMixin NavigateMixin
|
||||
*/
|
||||
class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
|
||||
static get template() {
|
||||
return html`
|
||||
<style include="ha-style">
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ha-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
paper-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
paper-fab {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
paper-fab[is-wide] {
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
paper-fab[rtl] {
|
||||
right: auto;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
paper-fab[rtl][is-wide] {
|
||||
bottom: 24px;
|
||||
right: auto;
|
||||
left: 24px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<ha-app-layout has-scrolling-region="">
|
||||
<app-header slot="header" fixed="">
|
||||
<app-toolbar>
|
||||
<ha-paper-icon-button-arrow-prev on-click="_backTapped">
|
||||
</ha-paper-icon-button-arrow-prev>
|
||||
<div main-title="">
|
||||
[[localize('ui.panel.config.automation.caption')]]
|
||||
</div>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<ha-config-section is-wide="[[isWide]]">
|
||||
<div slot="header">
|
||||
[[localize('ui.panel.config.automation.picker.header')]]
|
||||
</div>
|
||||
<div slot="introduction">
|
||||
[[localize('ui.panel.config.automation.picker.introduction')]]
|
||||
<p>
|
||||
<a
|
||||
href="https://home-assistant.io/docs/automation/editor/"
|
||||
target="_blank"
|
||||
>
|
||||
[[localize('ui.panel.config.automation.picker.learn_more')]]
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ha-card
|
||||
heading="[[localize('ui.panel.config.automation.picker.pick_automation')]]"
|
||||
>
|
||||
<template is="dom-if" if="[[!automations.length]]">
|
||||
<div class="card-content">
|
||||
<p>
|
||||
[[localize('ui.panel.config.automation.picker.no_automations')]]
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<template is="dom-repeat" items="[[automations]]" as="automation">
|
||||
<paper-item>
|
||||
<paper-item-body two-line="" on-click="automationTapped">
|
||||
<div>[[computeName(automation)]]</div>
|
||||
<div secondary="">[[computeDescription(automation)]]</div>
|
||||
</paper-item-body>
|
||||
<ha-icon-next></ha-icon-next>
|
||||
</paper-item>
|
||||
</template>
|
||||
</ha-card>
|
||||
</ha-config-section>
|
||||
|
||||
<paper-fab
|
||||
slot="fab"
|
||||
is-wide$="[[isWide]]"
|
||||
icon="hass:plus"
|
||||
title="[[localize('ui.panel.config.automation.picker.add_automation')]]"
|
||||
on-click="addAutomation"
|
||||
rtl$="[[rtl]]"
|
||||
></paper-fab>
|
||||
</ha-app-layout>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
hass: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
automations: {
|
||||
type: Array,
|
||||
},
|
||||
|
||||
isWide: {
|
||||
type: Boolean,
|
||||
},
|
||||
|
||||
rtl: {
|
||||
type: Boolean,
|
||||
reflectToAttribute: true,
|
||||
computed: "_computeRTL(hass)",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
automationTapped(ev) {
|
||||
this.navigate(
|
||||
"/config/automation/edit/" +
|
||||
this.automations[ev.model.index].attributes.id
|
||||
);
|
||||
}
|
||||
|
||||
addAutomation() {
|
||||
this.navigate("/config/automation/new");
|
||||
}
|
||||
|
||||
computeName(automation) {
|
||||
return computeStateName(automation);
|
||||
}
|
||||
|
||||
// Still thinking of something to add here.
|
||||
// eslint-disable-next-line
|
||||
computeDescription(automation) {
|
||||
return "";
|
||||
}
|
||||
|
||||
_backTapped() {
|
||||
history.back();
|
||||
}
|
||||
|
||||
_computeRTL(hass) {
|
||||
return computeRTL(hass);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-automation-picker", HaAutomationPicker);
|
||||
224
src/panels/config/automation/ha-automation-picker.ts
Normal file
224
src/panels/config/automation/ha-automation-picker.ts
Normal file
@ -0,0 +1,224 @@
|
||||
import {
|
||||
LitElement,
|
||||
TemplateResult,
|
||||
html,
|
||||
CSSResultArray,
|
||||
css,
|
||||
property,
|
||||
customElement,
|
||||
} from "lit-element";
|
||||
import { ifDefined } from "lit-html/directives/if-defined";
|
||||
import "@polymer/paper-fab/paper-fab";
|
||||
import "@polymer/paper-icon-button/paper-icon-button";
|
||||
import "@polymer/paper-item/paper-item-body";
|
||||
import "@polymer/paper-tooltip/paper-tooltip";
|
||||
import "../../../layouts/hass-subpage";
|
||||
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/entity/ha-entity-toggle";
|
||||
|
||||
import "../ha-config-section";
|
||||
|
||||
import computeStateName from "../../../common/entity/compute_state_name";
|
||||
import { computeRTL } from "../../../common/util/compute_rtl";
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
import { AutomationEntity } from "../../../data/automation";
|
||||
import format_date_time from "../../../common/datetime/format_date_time";
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
|
||||
@customElement("ha-automation-picker")
|
||||
class HaAutomationPicker extends LitElement {
|
||||
@property() public hass!: HomeAssistant;
|
||||
@property() public isWide!: boolean;
|
||||
@property() public automations!: AutomationEntity[];
|
||||
|
||||
protected render(): TemplateResult | void {
|
||||
return html`
|
||||
<hass-subpage
|
||||
.header=${this.hass.localize("ui.panel.config.automation.caption")}
|
||||
>
|
||||
<ha-config-section .isWide=${this.isWide}>
|
||||
<div slot="header">
|
||||
${this.hass.localize("ui.panel.config.automation.picker.header")}
|
||||
</div>
|
||||
<div slot="introduction">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.introduction"
|
||||
)}
|
||||
<p>
|
||||
<a
|
||||
href="https://home-assistant.io/docs/automation/editor/"
|
||||
target="_blank"
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.learn_more"
|
||||
)}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ha-card
|
||||
.heading=${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.pick_automation"
|
||||
)}
|
||||
>
|
||||
${this.automations.length === 0
|
||||
? html`
|
||||
<div class="card-content">
|
||||
<p>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.no_automations"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
`
|
||||
: this.automations.map(
|
||||
(automation) => html`
|
||||
|
||||
<div class='automation'>
|
||||
<ha-entity-toggle
|
||||
.hass=${this.hass}
|
||||
.stateObj=${automation}
|
||||
></ha-entity-toggle>
|
||||
|
||||
<paper-item-body two-line>
|
||||
<div>${computeStateName(automation)}</div>
|
||||
<div secondary>
|
||||
Last triggered: ${
|
||||
automation.attributes.last_triggered
|
||||
? format_date_time(
|
||||
new Date(
|
||||
automation.attributes.last_triggered
|
||||
),
|
||||
this.hass.language
|
||||
)
|
||||
: "never"
|
||||
}
|
||||
</div>
|
||||
</paper-item-body>
|
||||
<div class='actions'>
|
||||
<paper-icon-button
|
||||
.automation=${automation}
|
||||
@click=${this._showInfo}
|
||||
icon="hass:information-outline"
|
||||
></paper-icon-button>
|
||||
<a
|
||||
href=${ifDefined(
|
||||
automation.attributes.id
|
||||
? `/config/automation/edit/${
|
||||
automation.attributes.id
|
||||
}`
|
||||
: undefined
|
||||
)}
|
||||
>
|
||||
<paper-icon-button
|
||||
icon="hass:pencil"
|
||||
.disabled=${!automation.attributes.id}
|
||||
></paper-icon-button>
|
||||
${
|
||||
!automation.attributes.id
|
||||
? html`
|
||||
<paper-tooltip position="left">
|
||||
Only automations defined in
|
||||
automations.yaml are editable.
|
||||
</paper-tooltip>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`
|
||||
)}
|
||||
</ha-card>
|
||||
</ha-config-section>
|
||||
|
||||
<a href="/config/automation/new">
|
||||
<paper-fab
|
||||
slot="fab"
|
||||
?is-wide=${this.isWide}
|
||||
icon="hass:plus"
|
||||
title=${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.add_automation"
|
||||
)}
|
||||
?rtl=${computeRTL(this.hass)}
|
||||
></paper-fab
|
||||
></a>
|
||||
</hass-subpage>
|
||||
`;
|
||||
}
|
||||
|
||||
private _showInfo(ev) {
|
||||
const entityId = ev.currentTarget.automation.entity_id;
|
||||
fireEvent(this, "hass-more-info", { entityId });
|
||||
}
|
||||
|
||||
static get styles(): CSSResultArray {
|
||||
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;
|
||||
}
|
||||
|
||||
paper-fab {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
paper-fab[is-wide] {
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
paper-fab[rtl] {
|
||||
right: auto;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
paper-fab[rtl][is-wide] {
|
||||
bottom: 24px;
|
||||
right: auto;
|
||||
left: 24px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-automation-picker": HaAutomationPicker;
|
||||
}
|
||||
}
|
||||
@ -93,10 +93,7 @@ class HaConfigAutomation extends PolymerElement {
|
||||
Object.keys(hass.states).forEach(function(key) {
|
||||
var entity = hass.states[key];
|
||||
|
||||
if (
|
||||
computeStateDomain(entity) === "automation" &&
|
||||
"id" in entity.attributes
|
||||
) {
|
||||
if (computeStateDomain(entity) === "automation") {
|
||||
automations.push(entity);
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user