Convert script config panel to router (#5512)

* Convert script config panel to router

* Update script.ts

* Update ha-config-script.ts
This commit is contained in:
Bram Kragten 2020-04-10 11:50:06 +02:00 committed by GitHub
parent 47e9eb5a0d
commit ee278f111f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 79 additions and 115 deletions

View File

@ -74,7 +74,7 @@ export const showScriptEditor = (
data?: Partial<ScriptConfig>
) => {
inititialScriptEditorData = data;
navigate(el, "/config/script/new");
navigate(el, "/config/script/edit/new");
};
export const getScriptEditorInitData = () => {

View File

@ -1,113 +0,0 @@
import "@polymer/app-route/app-route";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "./ha-script-editor";
import "./ha-script-picker";
import { computeStateDomain } from "../../../common/entity/compute_state_domain";
class HaConfigScript extends PolymerElement {
static get template() {
return html`
<style>
ha-script-picker,
ha-script-editor {
height: 100%;
}
</style>
<app-route
route="[[route]]"
pattern="/edit/:script"
data="{{_routeData}}"
active="{{_edittingScript}}"
></app-route>
<app-route
route="[[route]]"
pattern="/new"
active="{{_creatingNew}}"
></app-route>
<template is="dom-if" if="[[!showEditor]]">
<ha-script-picker
hass="[[hass]]"
scripts="[[scripts]]"
is-wide="[[isWide]]"
narrow="[[narrow]]"
route="[[route]]"
></ha-script-picker>
</template>
<template is="dom-if" if="[[showEditor]]" restamp="">
<ha-script-editor
hass="[[hass]]"
script="[[script]]"
is-wide="[[isWide]]"
narrow="[[narrow]]"
route="[[route]]"
creating-new="[[_creatingNew]]"
></ha-script-editor>
</template>
`;
}
static get properties() {
return {
hass: Object,
route: Object,
isWide: Boolean,
narrow: Boolean,
_routeData: Object,
_routeMatches: Boolean,
_creatingNew: Boolean,
_edittingScript: Boolean,
scripts: {
type: Array,
computed: "computeScripts(hass)",
},
script: {
type: Object,
computed: "computeScript(scripts, _edittingScript, _routeData)",
},
showEditor: {
type: Boolean,
computed: "computeShowEditor(_edittingScript, _creatingNew)",
},
};
}
computeScript(scripts, edittingAddon, routeData) {
if (!scripts || !edittingAddon) {
return null;
}
for (var i = 0; i < scripts.length; i++) {
if (scripts[i].entity_id === routeData.script) {
return scripts[i];
}
}
return null;
}
computeScripts(hass) {
var scripts = [];
Object.keys(hass.states).forEach(function(key) {
var entity = hass.states[key];
if (computeStateDomain(entity) === "script") {
scripts.push(entity);
}
});
return scripts;
}
computeShowEditor(_edittingScript, _creatingNew) {
return _creatingNew || _edittingScript;
}
}
customElements.define("ha-config-script", HaConfigScript);

View File

@ -0,0 +1,77 @@
import { HassEntities, HassEntity } from "home-assistant-js-websocket";
import { customElement, property, PropertyValues } from "lit-element";
import memoizeOne from "memoize-one";
import { computeStateDomain } from "../../../common/entity/compute_state_domain";
import {
HassRouterPage,
RouterOptions,
} from "../../../layouts/hass-router-page";
import { HomeAssistant } from "../../../types";
import "./ha-script-editor";
import "./ha-script-picker";
@customElement("ha-config-script")
class HaConfigScript extends HassRouterPage {
@property() public hass!: HomeAssistant;
@property() public narrow!: boolean;
@property() public isWide!: boolean;
@property() public showAdvanced!: boolean;
@property() public scripts: HassEntity[] = [];
protected routerOptions: RouterOptions = {
defaultPage: "dashboard",
routes: {
dashboard: {
tag: "ha-script-picker",
cache: true,
},
edit: {
tag: "ha-script-editor",
},
},
};
private _computeScripts = memoizeOne((states: HassEntities) => {
const scripts: HassEntity[] = [];
Object.values(states).forEach((state) => {
if (computeStateDomain(state) === "script" && !state.attributes.hidden) {
scripts.push(state);
}
});
return scripts;
});
protected updatePageEl(pageEl, changedProps: PropertyValues) {
pageEl.hass = this.hass;
pageEl.narrow = this.narrow;
pageEl.isWide = this.isWide;
pageEl.route = this.routeTail;
pageEl.showAdvanced = this.showAdvanced;
if (this.hass) {
pageEl.scripts = this._computeScripts(this.hass.states);
}
if (
(!changedProps || changedProps.has("route")) &&
this._currentPage === "edit"
) {
pageEl.creatingNew = undefined;
const scriptEntityId = this.routeTail.path.substr(1);
pageEl.creatingNew = scriptEntityId === "new" ? true : false;
pageEl.script =
scriptEntityId === "new"
? undefined
: pageEl.scripts.find(
(entity: HassEntity) => entity.entity_id === scriptEntityId
);
}
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-config-script": HaConfigScript;
}
}

View File

@ -134,7 +134,7 @@ class HaScriptPicker extends LitElement {
@click=${this._showHelp}
></paper-icon-button>
</hass-tabs-subpage-data-table>
<a href="/config/script/new">
<a href="/config/script/edit/new">
<ha-fab
?is-wide=${this.isWide}
?narrow=${this.narrow}