mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-18 23:06:40 +00:00
Add picture upload component (#6646)
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
parent
0bc4b3d0fa
commit
f928a8e58e
@ -85,6 +85,7 @@
|
||||
"codemirror": "^5.49.0",
|
||||
"comlink": "^4.3.0",
|
||||
"cpx": "^1.5.0",
|
||||
"cropperjs": "^1.5.7",
|
||||
"deep-clone-simple": "^1.1.1",
|
||||
"deep-freeze": "^0.0.1",
|
||||
"es6-object-assign": "^1.1.0",
|
||||
|
226
src/components/ha-picture-upload.ts
Normal file
226
src/components/ha-picture-upload.ts
Normal file
@ -0,0 +1,226 @@
|
||||
import "@material/mwc-icon-button/mwc-icon-button";
|
||||
import { mdiClose, mdiImagePlus } from "@mdi/js";
|
||||
import "@polymer/iron-input/iron-input";
|
||||
import "@polymer/paper-input/paper-input-container";
|
||||
import {
|
||||
css,
|
||||
customElement,
|
||||
html,
|
||||
internalProperty,
|
||||
LitElement,
|
||||
property,
|
||||
PropertyValues,
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
import { classMap } from "lit-html/directives/class-map";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
import { createImage, generateImageThumbnailUrl } from "../data/image";
|
||||
import { HomeAssistant } from "../types";
|
||||
import "./ha-circular-progress";
|
||||
import "./ha-svg-icon";
|
||||
import {
|
||||
showImageCropperDialog,
|
||||
CropOptions,
|
||||
} from "../dialogs/image-cropper-dialog/show-image-cropper-dialog";
|
||||
|
||||
@customElement("ha-picture-upload")
|
||||
export class HaPictureUpload extends LitElement {
|
||||
public hass!: HomeAssistant;
|
||||
|
||||
@property() public value: string | null = null;
|
||||
|
||||
@property() public label?: string;
|
||||
|
||||
@property({ type: Boolean }) public crop = false;
|
||||
|
||||
@property({ attribute: false }) public cropOptions?: CropOptions;
|
||||
|
||||
@property({ type: Number }) public size = 512;
|
||||
|
||||
@internalProperty() private _error = "";
|
||||
|
||||
@internalProperty() private _uploading = false;
|
||||
|
||||
@internalProperty() private _drag = false;
|
||||
|
||||
protected updated(changedProperties: PropertyValues) {
|
||||
if (changedProperties.has("_drag")) {
|
||||
(this.shadowRoot!.querySelector(
|
||||
"paper-input-container"
|
||||
) as any)._setFocused(this._drag);
|
||||
}
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
${this._uploading
|
||||
? html`<ha-circular-progress
|
||||
alt="Uploading"
|
||||
size="large"
|
||||
active
|
||||
></ha-circular-progress>`
|
||||
: html`
|
||||
${this._error ? html`<div class="error">${this._error}</div>` : ""}
|
||||
<label for="input">
|
||||
<paper-input-container
|
||||
.alwaysFloatLabel=${Boolean(this.value)}
|
||||
@drop=${this._handleDrop}
|
||||
@dragenter=${this._handleDragStart}
|
||||
@dragover=${this._handleDragStart}
|
||||
@dragleave=${this._handleDragEnd}
|
||||
@dragend=${this._handleDragEnd}
|
||||
class=${classMap({
|
||||
dragged: this._drag,
|
||||
})}
|
||||
>
|
||||
<label for="input" slot="label">
|
||||
${this.label ||
|
||||
this.hass.localize("ui.components.picture-upload.label")}
|
||||
</label>
|
||||
<iron-input slot="input">
|
||||
<input
|
||||
id="input"
|
||||
type="file"
|
||||
class="file"
|
||||
accept="image/png, image/jpeg, image/gif"
|
||||
@change=${this._handleFilePicked}
|
||||
/>
|
||||
${this.value ? html`<img .src=${this.value} />` : ""}
|
||||
</iron-input>
|
||||
${this.value
|
||||
? html`<mwc-icon-button
|
||||
slot="suffix"
|
||||
@click=${this._clearPicture}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>`
|
||||
: html`<mwc-icon-button slot="suffix">
|
||||
<ha-svg-icon .path=${mdiImagePlus}></ha-svg-icon>
|
||||
</mwc-icon-button>`}
|
||||
</paper-input-container>
|
||||
</label>
|
||||
`}
|
||||
`;
|
||||
}
|
||||
|
||||
private _handleDrop(ev: DragEvent) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
if (ev.dataTransfer?.files) {
|
||||
if (this.crop) {
|
||||
this._cropFile(ev.dataTransfer.files[0]);
|
||||
} else {
|
||||
this._uploadFile(ev.dataTransfer.files[0]);
|
||||
}
|
||||
}
|
||||
this._drag = false;
|
||||
}
|
||||
|
||||
private _handleDragStart(ev: DragEvent) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
this._drag = true;
|
||||
}
|
||||
|
||||
private _handleDragEnd(ev: DragEvent) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
this._drag = false;
|
||||
}
|
||||
|
||||
private async _handleFilePicked(ev) {
|
||||
if (this.crop) {
|
||||
this._cropFile(ev.target.files[0]);
|
||||
} else {
|
||||
this._uploadFile(ev.target.files[0]);
|
||||
}
|
||||
}
|
||||
|
||||
private async _cropFile(file: File) {
|
||||
if (!["image/png", "image/jpeg", "image/gif"].includes(file.type)) {
|
||||
this._error = this.hass.localize(
|
||||
"ui.components.picture-upload.unsupported_format"
|
||||
);
|
||||
return;
|
||||
}
|
||||
showImageCropperDialog(this, {
|
||||
file,
|
||||
options: this.cropOptions || {
|
||||
round: false,
|
||||
aspectRatio: NaN,
|
||||
},
|
||||
croppedCallback: (croppedFile) => {
|
||||
this._uploadFile(croppedFile);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
private async _uploadFile(file: File) {
|
||||
if (!["image/png", "image/jpeg", "image/gif"].includes(file.type)) {
|
||||
this._error = this.hass.localize(
|
||||
"ui.components.picture-upload.unsupported_format"
|
||||
);
|
||||
return;
|
||||
}
|
||||
this._uploading = true;
|
||||
this._error = "";
|
||||
try {
|
||||
const media = await createImage(this.hass, file);
|
||||
this.value = generateImageThumbnailUrl(media.id, this.size);
|
||||
fireEvent(this, "change");
|
||||
} catch (err) {
|
||||
this._error = err.toString();
|
||||
} finally {
|
||||
this._uploading = false;
|
||||
}
|
||||
}
|
||||
|
||||
private _clearPicture(ev: Event) {
|
||||
ev.preventDefault();
|
||||
this.value = null;
|
||||
this._error = "";
|
||||
fireEvent(this, "change");
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
.error {
|
||||
color: var(--error-color);
|
||||
}
|
||||
paper-input-container {
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
margin: 0 -8px;
|
||||
}
|
||||
paper-input-container.dragged:before {
|
||||
position: var(--layout-fit_-_position);
|
||||
top: var(--layout-fit_-_top);
|
||||
right: var(--layout-fit_-_right);
|
||||
bottom: var(--layout-fit_-_bottom);
|
||||
left: var(--layout-fit_-_left);
|
||||
background: currentColor;
|
||||
content: "";
|
||||
opacity: var(--dark-divider-opacity);
|
||||
pointer-events: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
img {
|
||||
max-width: 125px;
|
||||
max-height: 125px;
|
||||
}
|
||||
input.file {
|
||||
display: none;
|
||||
}
|
||||
mwc-icon-button {
|
||||
--mdc-icon-button-size: 24px;
|
||||
--mdc-icon-size: 20px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-picture-upload": HaPictureUpload;
|
||||
}
|
||||
}
|
54
src/data/image.ts
Normal file
54
src/data/image.ts
Normal file
@ -0,0 +1,54 @@
|
||||
import { HomeAssistant } from "../types";
|
||||
|
||||
interface Image {
|
||||
filesize: number;
|
||||
name: string;
|
||||
uploaded_at: string; // isoformat date
|
||||
content_type: string;
|
||||
id: string;
|
||||
}
|
||||
|
||||
export interface ImageMutableParams {
|
||||
name: string;
|
||||
}
|
||||
|
||||
export const generateImageThumbnailUrl = (mediaId: string, size: number) =>
|
||||
`/api/image/serve/${mediaId}/${size}x${size}`;
|
||||
|
||||
export const fetchImages = (hass: HomeAssistant) =>
|
||||
hass.callWS<Image[]>({ type: "image/list" });
|
||||
|
||||
export const createImage = async (
|
||||
hass: HomeAssistant,
|
||||
file: File
|
||||
): Promise<Image> => {
|
||||
const fd = new FormData();
|
||||
fd.append("file", file);
|
||||
const resp = await hass.fetchWithAuth("/api/image/upload", {
|
||||
method: "POST",
|
||||
body: fd,
|
||||
});
|
||||
if (resp.status === 413) {
|
||||
throw new Error("Uploaded image is too large");
|
||||
} else if (resp.status !== 200) {
|
||||
throw new Error("Unknown error");
|
||||
}
|
||||
return await resp.json();
|
||||
};
|
||||
|
||||
export const updateImage = (
|
||||
hass: HomeAssistant,
|
||||
id: string,
|
||||
updates: Partial<ImageMutableParams>
|
||||
) =>
|
||||
hass.callWS<Image>({
|
||||
type: "image/update",
|
||||
media_id: id,
|
||||
...updates,
|
||||
});
|
||||
|
||||
export const deleteImage = (hass: HomeAssistant, id: string) =>
|
||||
hass.callWS({
|
||||
type: "image/delete",
|
||||
media_id: id,
|
||||
});
|
@ -5,12 +5,14 @@ export interface Person {
|
||||
name: string;
|
||||
user_id?: string;
|
||||
device_trackers?: string[];
|
||||
picture?: string;
|
||||
}
|
||||
|
||||
export interface PersonMutableParams {
|
||||
name: string;
|
||||
user_id: string | null;
|
||||
device_trackers: string[];
|
||||
picture: string | null;
|
||||
}
|
||||
|
||||
export const fetchPersons = (hass: HomeAssistant) =>
|
||||
|
136
src/dialogs/image-cropper-dialog/image-cropper-dialog.ts
Normal file
136
src/dialogs/image-cropper-dialog/image-cropper-dialog.ts
Normal file
@ -0,0 +1,136 @@
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import Cropper from "cropperjs";
|
||||
// @ts-ignore
|
||||
import cropperCss from "cropperjs/dist/cropper.css";
|
||||
import {
|
||||
css,
|
||||
CSSResult,
|
||||
customElement,
|
||||
html,
|
||||
internalProperty,
|
||||
LitElement,
|
||||
property,
|
||||
PropertyValues,
|
||||
query,
|
||||
TemplateResult,
|
||||
unsafeCSS,
|
||||
} from "lit-element";
|
||||
import "../../components/ha-dialog";
|
||||
import { haStyleDialog } from "../../resources/styles";
|
||||
import type { HomeAssistant } from "../../types";
|
||||
import { HaImageCropperDialogParams } from "./show-image-cropper-dialog";
|
||||
import { classMap } from "lit-html/directives/class-map";
|
||||
|
||||
@customElement("image-cropper-dialog")
|
||||
export class HaImagecropperDialog extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@internalProperty() private _params?: HaImageCropperDialogParams;
|
||||
|
||||
@internalProperty() private _open = false;
|
||||
|
||||
@query("img") private _image!: HTMLImageElement;
|
||||
|
||||
private _cropper?: Cropper;
|
||||
|
||||
public showDialog(params: HaImageCropperDialogParams): void {
|
||||
this._params = params;
|
||||
this._open = true;
|
||||
}
|
||||
|
||||
public closeDialog() {
|
||||
this._open = false;
|
||||
this._params = undefined;
|
||||
this._cropper?.destroy();
|
||||
}
|
||||
|
||||
protected updated(changedProperties: PropertyValues) {
|
||||
if (!changedProperties.has("_params") || !this._params) {
|
||||
return;
|
||||
}
|
||||
if (!this._cropper) {
|
||||
this._image.src = URL.createObjectURL(this._params.file);
|
||||
this._cropper = new Cropper(this._image, {
|
||||
aspectRatio: this._params.options.aspectRatio,
|
||||
viewMode: 1,
|
||||
dragMode: "move",
|
||||
minCropBoxWidth: 50,
|
||||
ready: () => {
|
||||
URL.revokeObjectURL(this._image!.src);
|
||||
},
|
||||
});
|
||||
} else {
|
||||
this._cropper.replace(URL.createObjectURL(this._params.file));
|
||||
}
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`<ha-dialog
|
||||
@closed=${this.closeDialog}
|
||||
scrimClickAction
|
||||
escapeKeyAction
|
||||
.open=${this._open}
|
||||
>
|
||||
<div
|
||||
class="container ${classMap({
|
||||
round: Boolean(this._params?.options.round),
|
||||
})}"
|
||||
>
|
||||
<img />
|
||||
</div>
|
||||
<mwc-button slot="secondaryAction" @click=${this.closeDialog}>
|
||||
${this.hass.localize("ui.common.cancel")}
|
||||
</mwc-button>
|
||||
<mwc-button slot="primaryAction" @click=${this._cropImage}>
|
||||
${this.hass.localize("ui.dialogs.image_cropper.crop")}
|
||||
</mwc-button>
|
||||
</ha-dialog>`;
|
||||
}
|
||||
|
||||
private _cropImage() {
|
||||
this._cropper!.getCroppedCanvas().toBlob(
|
||||
(blob) => {
|
||||
if (!blob) {
|
||||
return;
|
||||
}
|
||||
const file = new File([blob], this._params!.file.name, {
|
||||
type: this._params!.options.type || this._params!.file.type,
|
||||
});
|
||||
this._params!.croppedCallback(file);
|
||||
this.closeDialog();
|
||||
},
|
||||
this._params!.options.type || this._params!.file.type,
|
||||
this._params!.options.quality
|
||||
);
|
||||
}
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
haStyleDialog,
|
||||
css`
|
||||
${unsafeCSS(cropperCss)}
|
||||
.container {
|
||||
max-width: 640px;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
.container.round .cropper-view-box,
|
||||
.container.round .cropper-face {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.cropper-line,
|
||||
.cropper-point,
|
||||
.cropper-point.point-se::before {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"image-cropper-dialog": HaImagecropperDialog;
|
||||
}
|
||||
}
|
@ -0,0 +1,30 @@
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
|
||||
export interface CropOptions {
|
||||
round: boolean;
|
||||
type?: "image/jpeg" | "image/png";
|
||||
quality?: number;
|
||||
aspectRatio: number;
|
||||
}
|
||||
|
||||
export interface HaImageCropperDialogParams {
|
||||
file: File;
|
||||
options: CropOptions;
|
||||
croppedCallback: (file: File) => void;
|
||||
}
|
||||
|
||||
const loadImageCropperDialog = () =>
|
||||
import(
|
||||
/* webpackChunkName: "image-cropper-dialog" */ "./image-cropper-dialog"
|
||||
);
|
||||
|
||||
export const showImageCropperDialog = (
|
||||
element: HTMLElement,
|
||||
dialogParams: HaImageCropperDialogParams
|
||||
): void => {
|
||||
fireEvent(element, "show-dialog", {
|
||||
dialogTag: "image-cropper-dialog",
|
||||
dialogImport: loadImageCropperDialog,
|
||||
dialogParams,
|
||||
});
|
||||
};
|
@ -10,6 +10,8 @@ import {
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
import memoizeOne from "memoize-one";
|
||||
import "../../../components/ha-picture-upload";
|
||||
import type { HaPictureUpload } from "../../../components/ha-picture-upload";
|
||||
import "../../../components/entity/ha-entities-picker";
|
||||
import { createCloseHeading } from "../../../components/ha-dialog";
|
||||
import "../../../components/user/ha-user-picker";
|
||||
@ -18,9 +20,17 @@ import { PolymerChangedEvent } from "../../../polymer-types";
|
||||
import { haStyleDialog } from "../../../resources/styles";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
import { PersonDetailDialogParams } from "./show-dialog-person-detail";
|
||||
import { CropOptions } from "../../../dialogs/image-cropper-dialog/show-image-cropper-dialog";
|
||||
|
||||
const includeDomains = ["device_tracker"];
|
||||
|
||||
const cropOptions: CropOptions = {
|
||||
round: true,
|
||||
type: "image/jpeg",
|
||||
quality: 0.75,
|
||||
aspectRatio: 1,
|
||||
};
|
||||
|
||||
class DialogPersonDetail extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@ -30,6 +40,8 @@ class DialogPersonDetail extends LitElement {
|
||||
|
||||
@internalProperty() private _deviceTrackers!: string[];
|
||||
|
||||
@internalProperty() private _picture!: string | null;
|
||||
|
||||
@internalProperty() private _error?: string;
|
||||
|
||||
@internalProperty() private _params?: PersonDetailDialogParams;
|
||||
@ -50,10 +62,12 @@ class DialogPersonDetail extends LitElement {
|
||||
this._name = this._params.entry.name || "";
|
||||
this._userId = this._params.entry.user_id || undefined;
|
||||
this._deviceTrackers = this._params.entry.device_trackers || [];
|
||||
this._picture = this._params.entry.picture || null;
|
||||
} else {
|
||||
this._name = "";
|
||||
this._userId = undefined;
|
||||
this._deviceTrackers = [];
|
||||
this._picture = null;
|
||||
}
|
||||
await this.updateComplete;
|
||||
}
|
||||
@ -66,7 +80,7 @@ class DialogPersonDetail extends LitElement {
|
||||
return html`
|
||||
<ha-dialog
|
||||
open
|
||||
@closing=${this._close}
|
||||
@closed=${this._close}
|
||||
scrimClickAction
|
||||
escapeKeyAction
|
||||
.heading=${createCloseHeading(
|
||||
@ -92,6 +106,14 @@ class DialogPersonDetail extends LitElement {
|
||||
required
|
||||
auto-validate
|
||||
></paper-input>
|
||||
<ha-picture-upload
|
||||
.hass=${this.hass}
|
||||
.value=${this._picture}
|
||||
crop
|
||||
.cropOptions=${cropOptions}
|
||||
@change=${this._pictureChanged}
|
||||
></ha-picture-upload>
|
||||
|
||||
<ha-user-picker
|
||||
label="${this.hass!.localize(
|
||||
"ui.panel.config.person.detail.linked_user"
|
||||
@ -197,6 +219,11 @@ class DialogPersonDetail extends LitElement {
|
||||
this._deviceTrackers = ev.detail.value;
|
||||
}
|
||||
|
||||
private _pictureChanged(ev: PolymerChangedEvent<string | null>) {
|
||||
this._error = undefined;
|
||||
this._picture = (ev.target as HaPictureUpload).value;
|
||||
}
|
||||
|
||||
private async _updateEntry() {
|
||||
this._submitting = true;
|
||||
try {
|
||||
@ -204,6 +231,7 @@ class DialogPersonDetail extends LitElement {
|
||||
name: this._name.trim(),
|
||||
device_trackers: this._deviceTrackers,
|
||||
user_id: this._userId || null,
|
||||
picture: this._picture,
|
||||
};
|
||||
if (this._params!.entry) {
|
||||
await this._params!.updateEntry(values);
|
||||
@ -240,6 +268,9 @@ class DialogPersonDetail extends LitElement {
|
||||
.form {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
ha-picture-upload {
|
||||
display: block;
|
||||
}
|
||||
ha-user-picker {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
@ -1,4 +1,4 @@
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-item/paper-icon-item";
|
||||
import "@polymer/paper-item/paper-item-body";
|
||||
import {
|
||||
css,
|
||||
@ -32,6 +32,7 @@ import {
|
||||
} from "./show-dialog-person-detail";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import { mdiPlus } from "@mdi/js";
|
||||
import { styleMap } from "lit-html/directives/style-map";
|
||||
|
||||
class HaConfigPerson extends LitElement {
|
||||
@property({ attribute: false }) public hass?: HomeAssistant;
|
||||
@ -84,11 +85,20 @@ class HaConfigPerson extends LitElement {
|
||||
<ha-card class="storage">
|
||||
${this._storageItems.map((entry) => {
|
||||
return html`
|
||||
<paper-item @click=${this._openEditEntry} .entry=${entry}>
|
||||
<paper-icon-item @click=${this._openEditEntry} .entry=${entry}>
|
||||
${entry.picture
|
||||
? html`<div
|
||||
style=${styleMap({
|
||||
backgroundImage: `url(${entry.picture})`,
|
||||
})}
|
||||
class="picture"
|
||||
slot="item-icon"
|
||||
></div>`
|
||||
: ""}
|
||||
<paper-item-body>
|
||||
${entry.name}
|
||||
</paper-item-body>
|
||||
</paper-item>
|
||||
</paper-icon-item>
|
||||
`;
|
||||
})}
|
||||
${this._storageItems.length === 0
|
||||
@ -111,11 +121,20 @@ class HaConfigPerson extends LitElement {
|
||||
<ha-card header="Configuration.yaml persons">
|
||||
${this._configItems.map((entry) => {
|
||||
return html`
|
||||
<paper-item>
|
||||
<paper-icon-item>
|
||||
${entry.picture
|
||||
? html`<div
|
||||
style=${styleMap({
|
||||
backgroundImage: `url(${entry.picture})`,
|
||||
})}
|
||||
class="picture"
|
||||
slot="item-icon"
|
||||
></div>`
|
||||
: ""}
|
||||
<paper-item-body>
|
||||
${entry.name}
|
||||
</paper-item-body>
|
||||
</paper-item>
|
||||
</paper-icon-item>
|
||||
`;
|
||||
})}
|
||||
</ha-card>
|
||||
@ -228,15 +247,21 @@ class HaConfigPerson extends LitElement {
|
||||
margin: 16px auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.picture {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-size: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
}
|
||||
paper-item {
|
||||
paper-icon-item {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
ha-card.storage paper-item {
|
||||
ha-card.storage paper-icon-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
@ -86,8 +86,10 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
|
||||
},
|
||||
callApi: async (method, path, parameters) =>
|
||||
hassCallApi(auth, method, path, parameters),
|
||||
fetchWithAuth: (path, init) =>
|
||||
fetchWithAuth(auth, `${auth.data.hassUrl}${path}`, init),
|
||||
fetchWithAuth: (
|
||||
path: string,
|
||||
init: Parameters<typeof fetchWithAuth>[2]
|
||||
) => fetchWithAuth(auth, `${auth.data.hassUrl}${path}`, init),
|
||||
// For messages that do not get a response
|
||||
sendWS: (msg) => {
|
||||
if (__DEV__) {
|
||||
|
@ -299,6 +299,10 @@
|
||||
"failed_create_area": "Failed to create area."
|
||||
}
|
||||
},
|
||||
"picture-upload": {
|
||||
"label": "Picture",
|
||||
"unsupported_format": "Unsupported format, please choose a JPEG, PNG or GIF image."
|
||||
},
|
||||
"date-range-picker": {
|
||||
"start_date": "Start date",
|
||||
"end_date": "End date",
|
||||
@ -354,6 +358,9 @@
|
||||
"default_confirmation_title": "Are you sure?",
|
||||
"close": "close"
|
||||
},
|
||||
"image_cropper": {
|
||||
"crop": "Crop"
|
||||
},
|
||||
"more_info_control": {
|
||||
"dismiss": "Dismiss dialog",
|
||||
"settings": "Entity settings",
|
||||
|
11
yarn.lock
11
yarn.lock
@ -1345,7 +1345,7 @@
|
||||
"@babel/runtime" "^7.7.2"
|
||||
core-js "^3.4.1"
|
||||
|
||||
"@material/animation@8.0.0-canary.096a7a066.0", "@material/animation@8.0.0-canary.a78ceb112.0", "@material/animation@=8.0.0-canary.096a7a066.0":
|
||||
"@material/animation@8.0.0-canary.096a7a066.0", "@material/animation@8.0.0-canary.a78ceb112.0":
|
||||
version "8.0.0-canary.096a7a066.0"
|
||||
resolved "https://registry.yarnpkg.com/@material/animation/-/animation-8.0.0-canary.096a7a066.0.tgz#9c1b3d31858889e04e722ca8f1ade7ae3c54f7e6"
|
||||
integrity sha512-hGL6sMGcyd9JoxcyhRkAhD6KKQwZVRkhaFcra9YMBYHUbWRxfUbfDTjUZ3ZxmLDDcsjL4Hqjblet6Xmtq3Br5g==
|
||||
@ -1463,7 +1463,7 @@
|
||||
"@material/feature-targeting" "8.0.0-canary.096a7a066.0"
|
||||
"@material/theme" "8.0.0-canary.096a7a066.0"
|
||||
|
||||
"@material/feature-targeting@8.0.0-canary.096a7a066.0", "@material/feature-targeting@8.0.0-canary.a78ceb112.0", "@material/feature-targeting@=8.0.0-canary.096a7a066.0":
|
||||
"@material/feature-targeting@8.0.0-canary.096a7a066.0", "@material/feature-targeting@8.0.0-canary.a78ceb112.0":
|
||||
version "8.0.0-canary.096a7a066.0"
|
||||
resolved "https://registry.yarnpkg.com/@material/feature-targeting/-/feature-targeting-8.0.0-canary.096a7a066.0.tgz#fca721c287b08e0868467ee60daa5d32aad16430"
|
||||
integrity sha512-5nxnG08PjdwhrLMNxfeCOImbdEtP/bVveOVr72hdqldHuwfnzNjp0lwWAAh/QZrpJNl4Ve2Cnp/LkRnlOELIkw==
|
||||
@ -1839,7 +1839,7 @@
|
||||
"@material/typography" "8.0.0-canary.096a7a066.0"
|
||||
tslib "^1.9.3"
|
||||
|
||||
"@material/theme@8.0.0-canary.096a7a066.0", "@material/theme@8.0.0-canary.a78ceb112.0", "@material/theme@=8.0.0-canary.096a7a066.0":
|
||||
"@material/theme@8.0.0-canary.096a7a066.0", "@material/theme@8.0.0-canary.a78ceb112.0":
|
||||
version "8.0.0-canary.096a7a066.0"
|
||||
resolved "https://registry.yarnpkg.com/@material/theme/-/theme-8.0.0-canary.096a7a066.0.tgz#f657eaa545797ee3e6a2d96e4a61f844ad3dc425"
|
||||
integrity sha512-FdAUEjq7KJ835sobJQL0w0XWD5PabXl77HmBuy5F3bEYbYterWOutvuHbTkAEN6sTzgHCKhdoMubRxMKidqafA==
|
||||
@ -4782,6 +4782,11 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
|
||||
safe-buffer "^5.0.1"
|
||||
sha.js "^2.4.8"
|
||||
|
||||
cropperjs@^1.5.7:
|
||||
version "1.5.7"
|
||||
resolved "https://registry.yarnpkg.com/cropperjs/-/cropperjs-1.5.7.tgz#b65019725bae1c6285e881fb661b2141fa57025b"
|
||||
integrity sha512-sGj+G/ofKh+f6A4BtXLJwtcKJgMUsXYVUubfTo9grERiDGXncttefmue/fyQFvn8wfdyoD1KhDRYLfjkJFl0yw==
|
||||
|
||||
cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5:
|
||||
version "6.0.5"
|
||||
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
|
||||
|
Loading…
x
Reference in New Issue
Block a user