Detect Lovelace resource type based on file extension (#7354)

This commit is contained in:
Philip Allgaier 2020-10-19 22:03:59 +02:00 committed by GitHub
parent 52b2fd046b
commit 990ae10dc2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 5 deletions

View File

@ -33,7 +33,7 @@ export interface LovelaceResource {
} }
export interface LovelaceResourcesMutableParams { export interface LovelaceResourcesMutableParams {
res_type: "css" | "js" | "module" | "html"; res_type: LovelaceResource["type"];
url: string; url: string;
} }

View File

@ -23,6 +23,20 @@ import { haStyleDialog } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types"; import { HomeAssistant } from "../../../../types";
import { LovelaceResourceDetailsDialogParams } from "./show-dialog-lovelace-resource-detail"; import { LovelaceResourceDetailsDialogParams } from "./show-dialog-lovelace-resource-detail";
const detectResourceType = (url: string) => {
const ext = url.split(".").pop() || "";
if (ext === "css") {
return "css";
}
if (ext === "js") {
return "module";
}
return undefined;
};
@customElement("dialog-lovelace-resource-detail") @customElement("dialog-lovelace-resource-detail")
export class DialogLovelaceResourceDetail extends LitElement { export class DialogLovelaceResourceDetail extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@ -31,7 +45,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
@internalProperty() private _url!: LovelaceResource["url"]; @internalProperty() private _url!: LovelaceResource["url"];
@internalProperty() private _type!: LovelaceResource["type"]; @internalProperty() private _type?: LovelaceResource["type"];
@internalProperty() private _error?: string; @internalProperty() private _error?: string;
@ -44,10 +58,10 @@ export class DialogLovelaceResourceDetail extends LitElement {
this._error = undefined; this._error = undefined;
if (this._params.resource) { if (this._params.resource) {
this._url = this._params.resource.url || ""; this._url = this._params.resource.url || "";
this._type = this._params.resource.type || "module"; this._type = this._params.resource.type || undefined;
} else { } else {
this._url = ""; this._url = "";
this._type = "module"; this._type = undefined;
} }
await this.updateComplete; await this.updateComplete;
} }
@ -106,6 +120,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
.selected=${this._type} .selected=${this._type}
@iron-select=${this._typeChanged} @iron-select=${this._typeChanged}
attr-for-selected="type" attr-for-selected="type"
.invalid=${!this._type}
> >
<paper-item type="module"> <paper-item type="module">
${this.hass!.localize( ${this.hass!.localize(
@ -156,7 +171,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
<mwc-button <mwc-button
slot="primaryAction" slot="primaryAction"
@click="${this._updateResource}" @click="${this._updateResource}"
.disabled=${urlInvalid || this._submitting} .disabled=${urlInvalid || !this._type || this._submitting}
> >
${this._params.resource ${this._params.resource
? this.hass!.localize( ? this.hass!.localize(
@ -173,6 +188,9 @@ export class DialogLovelaceResourceDetail extends LitElement {
private _urlChanged(ev: PolymerChangedEvent<string>) { private _urlChanged(ev: PolymerChangedEvent<string>) {
this._error = undefined; this._error = undefined;
this._url = ev.detail.value; this._url = ev.detail.value;
if (!this._type) {
this._type = detectResourceType(this._url);
}
} }
private _typeChanged(ev: CustomEvent) { private _typeChanged(ev: CustomEvent) {
@ -180,6 +198,10 @@ export class DialogLovelaceResourceDetail extends LitElement {
} }
private async _updateResource() { private async _updateResource() {
if (!this._type) {
return;
}
this._submitting = true; this._submitting = true;
try { try {
const values: LovelaceResourcesMutableParams = { const values: LovelaceResourcesMutableParams = {