mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-17 14:26:35 +00:00
Detect Lovelace resource type based on file extension (#7354)
This commit is contained in:
parent
52b2fd046b
commit
990ae10dc2
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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 = {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user