jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 10:16:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Small tweaks for the create automation from blueprint screen (#9980)

Browse Source
This commit is contained in:
Paulus Schoutsen 2021-09-07 00:40:25 -07:00 committed by GitHub
parent 6ba6b821f5
commit d55bade070
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 80 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
src/panels/config/automation/blueprint-automation-editor.ts
View File

@ -53,7 +53,8 @@ export class HaBlueprintAutomationEditor extends LitElement {
protected render() { protected render() {
const blueprint = this._blueprint; const blueprint = this._blueprint;
return html`<ha-config-section vertical .isWide=${this.isWide}> return html`
<ha-config-section vertical .isWide=${this.isWide}>
${!this.narrow ${!this.narrow
? html` <span slot="header">${this.config.alias}</span> ` ? html` <span slot="header">${this.config.alias}</span> `
: ""} : ""}
@ -118,81 +119,80 @@ export class HaBlueprintAutomationEditor extends LitElement {
</ha-card> </ha-card>
</ha-config-section> </ha-config-section>
<ha-config-section vertical .isWide=${this.isWide}> <ha-card
<span slot="header" class="blueprint"
>${this.hass.localize( .header=${this.hass.localize(
"ui.panel.config.automation.editor.blueprint.header" "ui.panel.config.automation.editor.blueprint.header"
)}</span )}
> >
<ha-card> <div class="blueprint-picker-container">
<div class="blueprint-picker-container"> ${this._blueprints
${this._blueprints ? Object.keys(this._blueprints).length
? Object.keys(this._blueprints).length ? html`
? html` <ha-blueprint-picker
<ha-blueprint-picker .hass=${this.hass}
.hass=${this.hass} .label=${this.hass.localize(
.label=${this.hass.localize( "ui.panel.config.automation.editor.blueprint.blueprint_to_use"
"ui.panel.config.automation.editor.blueprint.blueprint_to_use" )}
)} .blueprints=${this._blueprints}
.blueprints=${this._blueprints} .value=${this.config.use_blueprint.path}
.value=${this.config.use_blueprint.path} @value-changed=${this._blueprintChanged}
@value-changed=${this._blueprintChanged} ></ha-blueprint-picker>
></ha-blueprint-picker> `
` : this.hass.localize(
: this.hass.localize( "ui.panel.config.automation.editor.blueprint.no_blueprints"
"ui.panel.config.automation.editor.blueprint.no_blueprints" )
) : html`<ha-circular-progress active></ha-circular-progress>`}
: html`<ha-circular-progress active></ha-circular-progress>`} </div>
</div>
${this.config.use_blueprint.path ${this.config.use_blueprint.path
? blueprint && "error" in blueprint ? blueprint && "error" in blueprint
? html`<p class="warning padding"> ? html`<p class="warning padding">
There is an error in this Blueprint: ${blueprint.error} There is an error in this Blueprint: ${blueprint.error}
</p>` </p>`
: html`${blueprint?.metadata.description : html`${blueprint?.metadata.description
? html`<ha-markdown ? html`<ha-markdown
class="card-content" class="card-content"
breaks breaks
.content=${blueprint.metadata.description} .content=${blueprint.metadata.description}
></ha-markdown>` ></ha-markdown>`
: ""} : ""}
${blueprint?.metadata?.input && ${blueprint?.metadata?.input &&
Object.keys(blueprint.metadata.input).length Object.keys(blueprint.metadata.input).length
? Object.entries(blueprint.metadata.input).map( ? Object.entries(blueprint.metadata.input).map(
([key, value]) => ([key, value]) =>
html`<ha-settings-row .narrow=${this.narrow}> html`<ha-settings-row .narrow=${this.narrow}>
<span slot="heading">${value?.name || key}</span> <span slot="heading">${value?.name || key}</span>
<span slot="description">${value?.description}</span> <span slot="description">${value?.description}</span>
${value?.selector ${value?.selector
? html`<ha-selector ? html`<ha-selector
.hass=${this.hass} .hass=${this.hass}
.selector=${value.selector} .selector=${value.selector}
.key=${key} .key=${key}
.value=${(this.config.use_blueprint.input && .value=${(this.config.use_blueprint.input &&
this.config.use_blueprint.input[key]) ?? this.config.use_blueprint.input[key]) ??
value?.default} value?.default}
@value-changed=${this._inputChanged} @value-changed=${this._inputChanged}
></ha-selector>` ></ha-selector>`
: html`<paper-input : html`<paper-input
.key=${key} .key=${key}
required required
.value=${(this.config.use_blueprint.input && .value=${(this.config.use_blueprint.input &&
this.config.use_blueprint.input[key]) ?? this.config.use_blueprint.input[key]) ??
value?.default} value?.default}
@value-changed=${this._inputChanged} @value-changed=${this._inputChanged}
no-label-float no-label-float
></paper-input>`} ></paper-input>`}
</ha-settings-row>` </ha-settings-row>`
) )
: html`<p class="padding"> : html`<p class="padding">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.blueprint.no_inputs" "ui.panel.config.automation.editor.blueprint.no_inputs"
)} )}
</p>`}` </p>`}`
: ""} : ""}
</ha-card> </ha-card>
</ha-config-section>`; `;
} }
private async _getBlueprints() { private async _getBlueprints() {
@ -267,11 +267,15 @@ export class HaBlueprintAutomationEditor extends LitElement {
return [ return [
haStyle, haStyle,
css` css`
ha-card.blueprint {
max-width: 1040px;
margin: 24px auto;
}
.padding { .padding {
padding: 16px; padding: 16px;
} }
.blueprint-picker-container { .blueprint-picker-container {
padding: 16px; padding: 0 16px 16px;
} }
h3 { h3 {
margin: 16px; margin: 16px;