645 lines
24 KiB
TypeScript
645 lines
24 KiB
TypeScript
/** Documents section for an object's detail view.
|
|
*
|
|
* Self-contained: lists an object's documents (files + web-links), uploads a
|
|
* file (multipart POST to the authenticated view — a WS frame can't carry a
|
|
* binary body), downloads via a signed path (`auth/sign_path` → Companion-safe
|
|
* anchor), adds web-links, and deletes. Write actions are gated by `canWrite`
|
|
* (the server enforces it too); download/open is available to everyone.
|
|
*/
|
|
|
|
import { LitElement, html, css, nothing } from "lit";
|
|
import { isSafeHttpUrl } from "../helpers/url";
|
|
import { property, state } from "lit/decorators.js";
|
|
import { t, ensureLocale } from "../styles";
|
|
import { describeWsError } from "../ws-errors";
|
|
import { downloadUrl } from "../helpers/download";
|
|
import { formatBytes } from "../helpers/format-bytes";
|
|
import type { HomeAssistant } from "../types";
|
|
|
|
interface MaintenanceDocument {
|
|
id: string;
|
|
kind: "file" | "weblink";
|
|
title: string;
|
|
filename?: string;
|
|
url?: string;
|
|
mime?: string;
|
|
size?: number;
|
|
tags?: string[];
|
|
added_at?: string;
|
|
}
|
|
|
|
const CATEGORIES = ["manual", "warranty", "invoice", "spare_parts", "photo", "other"] as const;
|
|
const CATEGORY_ICONS: Record<string, string> = {
|
|
manual: "mdi:book-open-variant",
|
|
warranty: "mdi:shield-check",
|
|
invoice: "mdi:receipt-text-outline",
|
|
spare_parts: "mdi:cog-outline",
|
|
photo: "mdi:image-outline",
|
|
other: "mdi:file-document-outline",
|
|
};
|
|
|
|
export class MaintenanceDocumentsSection extends LitElement {
|
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
|
@property({ attribute: false }) public entryId!: string;
|
|
@property({ type: Boolean }) public canWrite = false;
|
|
|
|
@state() private _docs: MaintenanceDocument[] = [];
|
|
@state() private _loaded = false;
|
|
@state() private _busy = false;
|
|
@state() private _error = "";
|
|
@state() private _hint = "";
|
|
@state() private _addingLink = false;
|
|
@state() private _linkUrl = "";
|
|
@state() private _linkTitle = "";
|
|
@state() private _category = "manual";
|
|
@state() private _thumbs: Record<string, string> = {};
|
|
@state() private _lightboxUrl = "";
|
|
@state() private _editingId = "";
|
|
@state() private _editTitle = "";
|
|
@state() private _editCategory = "manual";
|
|
@state() private _dragOver = false;
|
|
|
|
private _loadedFor: string | null = null;
|
|
private _localeReady = false;
|
|
|
|
private _isImage(doc: MaintenanceDocument): boolean {
|
|
return doc.kind === "file" && (doc.mime || "").startsWith("image/");
|
|
}
|
|
|
|
private async _sign(doc: MaintenanceDocument): Promise<string> {
|
|
const signed = await this.hass.connection.sendMessagePromise<{ path: string }>({
|
|
type: "auth/sign_path",
|
|
path: `/api/maintenance_supporter/document/${doc.id}`,
|
|
expires: 300,
|
|
});
|
|
return signed.path;
|
|
}
|
|
|
|
private get _lang(): string {
|
|
return this.hass?.language || "en";
|
|
}
|
|
|
|
updated(changed: Map<string, unknown>): void {
|
|
super.updated(changed);
|
|
if (this.hass && !this._localeReady) {
|
|
this._localeReady = true;
|
|
// Re-render once the runtime locale JSON arrives (t() falls back to English
|
|
// until then), so a first paint before the fetch lands still localizes.
|
|
void ensureLocale(this._lang).then(() => this.requestUpdate());
|
|
}
|
|
if (this.hass && this.entryId && this._loadedFor !== this.entryId) {
|
|
this._loadedFor = this.entryId;
|
|
void this._load();
|
|
}
|
|
}
|
|
|
|
private async _load(): Promise<void> {
|
|
try {
|
|
const r = await this.hass.connection.sendMessagePromise<{ documents: MaintenanceDocument[] }>({
|
|
type: "maintenance_supporter/documents/list",
|
|
entry_id: this.entryId,
|
|
});
|
|
this._docs = r.documents || [];
|
|
this._loaded = true;
|
|
this._error = "";
|
|
this._thumbs = {};
|
|
void this._loadThumbs();
|
|
} catch (e) {
|
|
this._error = describeWsError(e, this._lang);
|
|
this._loaded = true;
|
|
}
|
|
}
|
|
|
|
/** Pre-sign a serve URL for each image doc so it can render as a thumbnail. */
|
|
private async _loadThumbs(): Promise<void> {
|
|
await Promise.all(
|
|
this._docs.filter((d) => this._isImage(d)).map(async (d) => {
|
|
try {
|
|
const url = await this._sign(d);
|
|
this._thumbs = { ...this._thumbs, [d.id]: url };
|
|
} catch {
|
|
/* leave the fallback icon */
|
|
}
|
|
}),
|
|
);
|
|
}
|
|
|
|
private _category_of(doc: MaintenanceDocument): string {
|
|
const tag = (doc.tags || []).find((x) => (CATEGORIES as readonly string[]).includes(x));
|
|
return tag || "other";
|
|
}
|
|
|
|
/** Keyboard support for the file-picker <label>s (Enter/Space → open). */
|
|
private _labelKeydown(e: KeyboardEvent): void {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
e.preventDefault();
|
|
(e.currentTarget as HTMLElement).querySelector("input")?.click();
|
|
}
|
|
}
|
|
|
|
private _onFileInput(e: Event): void {
|
|
const input = e.target as HTMLInputElement;
|
|
const files = Array.from(input.files ?? []);
|
|
if (files.length) void this._uploadFiles(files);
|
|
input.value = ""; // let the same file be re-picked
|
|
}
|
|
|
|
private _onCameraInput(e: Event): void {
|
|
const input = e.target as HTMLInputElement;
|
|
const files = Array.from(input.files ?? []);
|
|
if (files.length) void this._uploadFiles(files, "photo");
|
|
input.value = "";
|
|
}
|
|
|
|
private _onDrop(e: DragEvent): void {
|
|
e.preventDefault();
|
|
this._dragOver = false;
|
|
if (!this.canWrite || this._busy) return;
|
|
const files = Array.from(e.dataTransfer?.files ?? []);
|
|
if (files.length) void this._uploadFiles(files);
|
|
}
|
|
|
|
private _onDragOver(e: DragEvent): void {
|
|
if (!this.canWrite) return;
|
|
e.preventDefault();
|
|
this._dragOver = true;
|
|
}
|
|
|
|
private _onDragLeave(e: DragEvent): void {
|
|
// Only clear when the pointer truly leaves the zone (not when moving over a
|
|
// child element), otherwise the overlay flickers.
|
|
const rt = e.relatedTarget as Node | null;
|
|
if (!rt || !(e.currentTarget as HTMLElement).contains(rt)) this._dragOver = false;
|
|
}
|
|
|
|
private async _uploadFiles(files: File[], category?: string): Promise<void> {
|
|
const cat = category ?? this._category;
|
|
this._busy = true;
|
|
this._error = "";
|
|
this._hint = "";
|
|
let deduped = 0;
|
|
let dupInObject = 0;
|
|
try {
|
|
for (const file of files) {
|
|
const form = new FormData();
|
|
form.append("entry_id", this.entryId);
|
|
form.append("tags", cat);
|
|
form.append("file", file, file.name);
|
|
const resp = await fetch("/api/maintenance_supporter/document/upload", {
|
|
method: "POST",
|
|
headers: { Authorization: `Bearer ${this.hass.auth?.data?.access_token ?? ""}` },
|
|
body: form,
|
|
});
|
|
if (!resp.ok) {
|
|
this._error = resp.status === 413 ? t("doc_too_large", this._lang) : t("doc_upload_failed", this._lang);
|
|
continue;
|
|
}
|
|
const doc = (await resp.json()) as { deduped?: boolean; duplicate_in_object?: string | null };
|
|
if (doc.duplicate_in_object) dupInObject++;
|
|
else if (doc.deduped) deduped++;
|
|
}
|
|
if (dupInObject) this._hint = t("doc_dup_in_object", this._lang);
|
|
else if (deduped) this._hint = t("doc_deduped", this._lang);
|
|
await this._load();
|
|
} catch {
|
|
this._error = t("doc_upload_failed", this._lang);
|
|
} finally {
|
|
this._busy = false;
|
|
}
|
|
}
|
|
|
|
private async _download(doc: MaintenanceDocument): Promise<void> {
|
|
try {
|
|
const signed = await this.hass.connection.sendMessagePromise<{ path: string }>({
|
|
type: "auth/sign_path",
|
|
path: `/api/maintenance_supporter/document/${doc.id}`,
|
|
expires: 30,
|
|
});
|
|
downloadUrl(signed.path, doc.filename || doc.title || "document");
|
|
} catch (e) {
|
|
this._error = describeWsError(e, this._lang);
|
|
}
|
|
}
|
|
|
|
/** Open a document for viewing: images in an in-app lightbox, everything else
|
|
* inline in a new tab (the serve view sends Content-Disposition: inline). */
|
|
private async _preview(doc: MaintenanceDocument): Promise<void> {
|
|
if (this._isImage(doc)) {
|
|
this._lightboxUrl = this._thumbs[doc.id] || (await this._sign(doc));
|
|
return;
|
|
}
|
|
// Open the tab synchronously (in the click gesture) so it isn't popup-blocked,
|
|
// then point it at the freshly signed URL once it resolves.
|
|
const win = window.open("about:blank", "_blank");
|
|
try {
|
|
const url = await this._sign(doc);
|
|
// Absolute URL so it always resolves against the blank popup (about:blank).
|
|
if (win) win.location.href = new URL(url, window.location.origin).href;
|
|
} catch (e) {
|
|
if (win) win.close();
|
|
this._error = describeWsError(e, this._lang);
|
|
}
|
|
}
|
|
|
|
/** Open a document from a title/row click (not just the small icons): preview
|
|
* a file, open a web-link in a new tab. */
|
|
private _openDoc(doc: MaintenanceDocument): void {
|
|
if (doc.kind === "file") void this._preview(doc);
|
|
// Only open http(s) links — never a javascript:/data: URL (the same scheme
|
|
// guard the rest of the panel applies before opening user-supplied URLs).
|
|
else if (isSafeHttpUrl(doc.url)) window.open(doc.url, "_blank", "noopener");
|
|
}
|
|
|
|
private _startEdit(doc: MaintenanceDocument): void {
|
|
this._editingId = doc.id;
|
|
this._editTitle = doc.title || "";
|
|
this._editCategory = this._category_of(doc);
|
|
this._addingLink = false;
|
|
this._error = "";
|
|
}
|
|
|
|
private _cancelEdit(): void {
|
|
this._editingId = "";
|
|
}
|
|
|
|
private async _saveEdit(doc: MaintenanceDocument): Promise<void> {
|
|
// Keep any free (non-category) tags; swap in the chosen category.
|
|
const freeTags = (doc.tags || []).filter(
|
|
(x) => !(CATEGORIES as readonly string[]).includes(x),
|
|
);
|
|
const tags = doc.kind === "file" ? [this._editCategory, ...freeTags] : (doc.tags ?? []);
|
|
this._busy = true;
|
|
this._error = "";
|
|
try {
|
|
await this.hass.connection.sendMessagePromise({
|
|
type: "maintenance_supporter/documents/update",
|
|
doc_id: doc.id,
|
|
title: this._editTitle.trim() || doc.filename || doc.url || "",
|
|
tags,
|
|
});
|
|
this._editingId = "";
|
|
await this._load();
|
|
} catch (e) {
|
|
this._error = describeWsError(e, this._lang);
|
|
} finally {
|
|
this._busy = false;
|
|
}
|
|
}
|
|
|
|
private async _delete(doc: MaintenanceDocument): Promise<void> {
|
|
const name = doc.title || doc.filename || doc.url || "";
|
|
if (!window.confirm(t("doc_delete_confirm", this._lang).replace("{name}", name))) return;
|
|
this._busy = true;
|
|
this._error = "";
|
|
try {
|
|
await this.hass.connection.sendMessagePromise({
|
|
type: "maintenance_supporter/documents/delete",
|
|
doc_id: doc.id,
|
|
});
|
|
await this._load();
|
|
} catch (e) {
|
|
this._error = describeWsError(e, this._lang);
|
|
} finally {
|
|
this._busy = false;
|
|
}
|
|
}
|
|
|
|
private async _addLink(): Promise<void> {
|
|
const url = this._linkUrl.trim();
|
|
if (!url) return;
|
|
this._busy = true;
|
|
this._error = "";
|
|
try {
|
|
await this.hass.connection.sendMessagePromise({
|
|
type: "maintenance_supporter/documents/add_link",
|
|
entry_id: this.entryId,
|
|
url,
|
|
title: this._linkTitle.trim() || null,
|
|
});
|
|
this._linkUrl = "";
|
|
this._linkTitle = "";
|
|
this._addingLink = false;
|
|
await this._load();
|
|
} catch (e) {
|
|
this._error = describeWsError(e, this._lang, t("doc_link_invalid", this._lang));
|
|
} finally {
|
|
this._busy = false;
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const L = this._lang;
|
|
return html`
|
|
<div
|
|
class="doc-zone ${this._dragOver ? "drag-over" : ""}"
|
|
@dragover=${this._onDragOver}
|
|
@dragleave=${this._onDragLeave}
|
|
@drop=${this._onDrop}
|
|
>
|
|
${this._dragOver && this.canWrite
|
|
? html`<div class="drop-overlay">
|
|
<ha-icon icon="mdi:tray-arrow-down"></ha-icon> ${t("doc_drop_hint", L)}
|
|
</div>`
|
|
: nothing}
|
|
<div class="doc-header">
|
|
<h3>${t("documents", L)} (${this._docs.length})</h3>
|
|
${this.canWrite
|
|
? html`
|
|
<div class="doc-actions">
|
|
<select
|
|
class="cat-select"
|
|
.value=${this._category}
|
|
?disabled=${this._busy}
|
|
@change=${(e: Event) => (this._category = (e.target as HTMLSelectElement).value)}
|
|
>
|
|
${CATEGORIES.map((c) => html`<option value=${c}>${t(`doc_cat_${c}`, L)}</option>`)}
|
|
</select>
|
|
<label
|
|
class="btn primary ${this._busy ? "disabled" : ""}"
|
|
role="button"
|
|
tabindex="0"
|
|
@keydown=${this._labelKeydown}
|
|
>
|
|
<ha-icon icon="mdi:upload"></ha-icon>
|
|
${this._busy ? t("doc_uploading", L) : t("doc_upload", L)}
|
|
<input type="file" multiple hidden ?disabled=${this._busy} @change=${this._onFileInput} />
|
|
</label>
|
|
<label
|
|
class="btn camera-btn ${this._busy ? "disabled" : ""}"
|
|
role="button"
|
|
tabindex="0"
|
|
aria-label=${t("doc_camera", L)}
|
|
title=${t("doc_camera", L)}
|
|
@keydown=${this._labelKeydown}
|
|
>
|
|
<ha-icon icon="mdi:camera"></ha-icon>
|
|
<input type="file" accept="image/*" capture="environment" hidden ?disabled=${this._busy} @change=${this._onCameraInput} />
|
|
</label>
|
|
<button class="btn" ?disabled=${this._busy} @click=${() => (this._addingLink = !this._addingLink)}>
|
|
<ha-icon icon="mdi:link-variant"></ha-icon> ${t("doc_add_link", L)}
|
|
</button>
|
|
</div>
|
|
`
|
|
: nothing}
|
|
</div>
|
|
|
|
${this._error ? html`<div class="doc-msg error">${this._error}</div>` : nothing}
|
|
${this._hint ? html`<div class="doc-msg hint">${this._hint}</div>` : nothing}
|
|
|
|
${this._addingLink && this.canWrite
|
|
? html`
|
|
<div class="link-form">
|
|
<input
|
|
type="url"
|
|
placeholder=${t("doc_link_url", L)}
|
|
.value=${this._linkUrl}
|
|
?disabled=${this._busy}
|
|
@input=${(e: Event) => (this._linkUrl = (e.target as HTMLInputElement).value)}
|
|
/>
|
|
<input
|
|
type="text"
|
|
placeholder=${t("doc_link_title", L)}
|
|
.value=${this._linkTitle}
|
|
?disabled=${this._busy}
|
|
@input=${(e: Event) => (this._linkTitle = (e.target as HTMLInputElement).value)}
|
|
/>
|
|
<button class="btn primary" ?disabled=${this._busy || !this._linkUrl.trim()} @click=${this._addLink}>
|
|
${t("add", L)}
|
|
</button>
|
|
<button class="btn" ?disabled=${this._busy} @click=${() => (this._addingLink = false)}>
|
|
${t("cancel", L)}
|
|
</button>
|
|
</div>
|
|
`
|
|
: nothing}
|
|
|
|
${!this._loaded
|
|
? html`<div class="doc-empty">${t("loading", L)}</div>`
|
|
: this._docs.length === 0
|
|
? html`<div class="doc-empty">${t("documents_empty", L)}</div>`
|
|
: html`
|
|
<div class="doc-list">
|
|
${this._docs.map((doc) => this._renderDoc(doc, L))}
|
|
</div>
|
|
`}
|
|
|
|
${this._lightboxUrl
|
|
? html`<div class="lightbox" @click=${() => (this._lightboxUrl = "")}>
|
|
<img class="lightbox-img" src=${this._lightboxUrl} @click=${(e: Event) => e.stopPropagation()} />
|
|
<button class="lightbox-close" title=${t("doc_close", L)} @click=${() => (this._lightboxUrl = "")}>
|
|
<ha-icon icon="mdi:close"></ha-icon>
|
|
</button>
|
|
</div>`
|
|
: nothing}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private _renderDoc(doc: MaintenanceDocument, L: string) {
|
|
if (this._editingId === doc.id) return this._renderEdit(doc, L);
|
|
const isFile = doc.kind === "file";
|
|
const cat = this._category_of(doc);
|
|
const meta = isFile
|
|
? `${t(`doc_cat_${cat}`, L)} · ${formatBytes(doc.size)}`
|
|
: t("doc_link_badge", L);
|
|
const thumb = this._thumbs[doc.id];
|
|
return html`
|
|
<div class="doc-row">
|
|
${isFile && thumb
|
|
? html`<img
|
|
class="doc-thumb"
|
|
src=${thumb}
|
|
alt=${doc.title || ""}
|
|
title=${t("doc_open", L)}
|
|
@click=${() => this._preview(doc)}
|
|
/>`
|
|
: html`<ha-icon
|
|
class="doc-icon ${isFile ? "clickable" : ""}"
|
|
icon=${isFile ? CATEGORY_ICONS[cat] : "mdi:link-variant"}
|
|
@click=${() => isFile && this._preview(doc)}
|
|
></ha-icon>`}
|
|
<div
|
|
class="doc-info"
|
|
role="button"
|
|
tabindex="0"
|
|
title=${t("doc_open", L)}
|
|
@click=${() => this._openDoc(doc)}
|
|
@keydown=${(e: KeyboardEvent) => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
e.preventDefault();
|
|
this._openDoc(doc);
|
|
}
|
|
}}
|
|
>
|
|
<div class="doc-title">${doc.title || doc.filename || doc.url}</div>
|
|
<div class="doc-meta">${meta}</div>
|
|
</div>
|
|
<div class="doc-row-actions">
|
|
${isFile
|
|
? html`
|
|
<button class="icon-btn" title=${t("doc_open", L)} @click=${() => this._preview(doc)}>
|
|
<ha-icon icon="mdi:eye-outline"></ha-icon>
|
|
</button>
|
|
<button class="icon-btn" title=${t("doc_download", L)} @click=${() => this._download(doc)}>
|
|
<ha-icon icon="mdi:download"></ha-icon>
|
|
</button>`
|
|
: html`<a
|
|
class="icon-btn"
|
|
href=${isSafeHttpUrl(doc.url) ? doc.url : "#"}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
title=${t("doc_open", L)}
|
|
><ha-icon icon="mdi:open-in-new"></ha-icon></a>`}
|
|
${this.canWrite
|
|
? html`
|
|
<button class="icon-btn" title=${t("edit", L)} ?disabled=${this._busy} @click=${() => this._startEdit(doc)}>
|
|
<ha-icon icon="mdi:pencil"></ha-icon>
|
|
</button>
|
|
<button class="icon-btn danger" title=${t("delete", L)} ?disabled=${this._busy} @click=${() => this._delete(doc)}>
|
|
<ha-icon icon="mdi:delete"></ha-icon>
|
|
</button>`
|
|
: nothing}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private _renderEdit(doc: MaintenanceDocument, L: string) {
|
|
const isFile = doc.kind === "file";
|
|
return html`
|
|
<div class="doc-row editing">
|
|
<input
|
|
class="edit-title"
|
|
type="text"
|
|
placeholder=${t("doc_link_title", L)}
|
|
.value=${this._editTitle}
|
|
?disabled=${this._busy}
|
|
@input=${(e: Event) => (this._editTitle = (e.target as HTMLInputElement).value)}
|
|
/>
|
|
${isFile
|
|
? html`<select
|
|
class="cat-select"
|
|
?disabled=${this._busy}
|
|
@change=${(e: Event) => (this._editCategory = (e.target as HTMLSelectElement).value)}
|
|
>
|
|
${CATEGORIES.map(
|
|
(c) => html`<option value=${c} ?selected=${c === this._editCategory}>${t(`doc_cat_${c}`, L)}</option>`,
|
|
)}
|
|
</select>`
|
|
: nothing}
|
|
<button class="icon-btn" title=${t("save", L)} ?disabled=${this._busy || !this._editTitle.trim()} @click=${() => this._saveEdit(doc)}>
|
|
<ha-icon icon="mdi:check"></ha-icon>
|
|
</button>
|
|
<button class="icon-btn" title=${t("cancel", L)} ?disabled=${this._busy} @click=${this._cancelEdit}>
|
|
<ha-icon icon="mdi:close"></ha-icon>
|
|
</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
static styles = css`
|
|
:host { display: block; margin: 8px 0 4px; }
|
|
.doc-zone { position: relative; }
|
|
.doc-zone.drag-over {
|
|
outline: 2px dashed var(--primary-color); outline-offset: 4px; border-radius: 8px;
|
|
}
|
|
.drop-overlay {
|
|
position: absolute; inset: 0; z-index: 5; pointer-events: none;
|
|
display: flex; align-items: center; justify-content: center; gap: 8px;
|
|
border-radius: 8px; font-size: 15px; font-weight: 600;
|
|
color: var(--primary-color); opacity: 0.95;
|
|
background: var(--card-background-color, rgba(255, 255, 255, 0.85));
|
|
}
|
|
.drop-overlay ha-icon { --mdc-icon-size: 24px; }
|
|
.camera-btn { padding: 6px 10px; }
|
|
.doc-header {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
gap: 12px; flex-wrap: wrap;
|
|
}
|
|
h3 { margin: 8px 0; font-size: 16px; }
|
|
.doc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
.cat-select {
|
|
padding: 6px 8px; border-radius: 6px; font: inherit;
|
|
background: var(--secondary-background-color, rgba(0,0,0,0.06));
|
|
color: var(--primary-text-color); border: 1px solid var(--divider-color);
|
|
}
|
|
.btn {
|
|
display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
|
|
padding: 6px 12px; border-radius: 6px; font: inherit; font-size: 13px;
|
|
background: var(--secondary-background-color, rgba(0,0,0,0.06));
|
|
color: var(--primary-text-color); border: 1px solid var(--divider-color);
|
|
}
|
|
.btn.primary { background: var(--primary-color); color: var(--text-primary-color, #fff); border-color: var(--primary-color); }
|
|
.btn:focus-visible, .icon-btn:focus-visible {
|
|
outline: 2px solid var(--primary-color); outline-offset: 2px;
|
|
}
|
|
.btn.disabled, .btn[disabled] { opacity: 0.5; pointer-events: none; }
|
|
.btn ha-icon { --mdc-icon-size: 18px; }
|
|
.link-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
|
|
.link-form input {
|
|
flex: 1 1 180px; padding: 6px 10px; border-radius: 6px; font: inherit;
|
|
background: var(--secondary-background-color, rgba(0,0,0,0.06));
|
|
color: var(--primary-text-color); border: 1px solid var(--divider-color);
|
|
}
|
|
.doc-msg { font-size: 13px; margin: 6px 0; }
|
|
.doc-msg.error { color: var(--error-color, #f44336); }
|
|
.doc-msg.hint { color: var(--secondary-text-color, #888); }
|
|
.doc-empty { color: var(--secondary-text-color, #888); font-size: 13px; padding: 8px 0; }
|
|
.doc-list { display: flex; flex-direction: column; gap: 4px; }
|
|
.doc-row {
|
|
display: flex; align-items: center; gap: 12px; padding: 8px 10px;
|
|
border: 1px solid var(--divider-color); border-radius: 8px;
|
|
background: var(--card-background-color, transparent);
|
|
}
|
|
.doc-row.editing { gap: 8px; }
|
|
.edit-title {
|
|
flex: 1; min-width: 0; padding: 6px 10px; border-radius: 6px; font: inherit;
|
|
background: var(--secondary-background-color, rgba(0, 0, 0, 0.06));
|
|
color: var(--primary-text-color); border: 1px solid var(--divider-color);
|
|
}
|
|
.doc-icon { color: var(--primary-color); --mdc-icon-size: 24px; flex: none; }
|
|
.doc-icon.clickable { cursor: pointer; }
|
|
.doc-thumb {
|
|
width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex: none;
|
|
cursor: pointer; border: 1px solid var(--divider-color);
|
|
background: var(--secondary-background-color, rgba(0,0,0,0.06));
|
|
}
|
|
.lightbox {
|
|
position: fixed; inset: 0; z-index: 9999; cursor: zoom-out;
|
|
display: flex; align-items: center; justify-content: center;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
}
|
|
.lightbox-img {
|
|
max-width: 92vw; max-height: 92vh; object-fit: contain; cursor: default;
|
|
border-radius: 8px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
|
|
}
|
|
.lightbox-close {
|
|
position: fixed; top: 16px; right: 16px; cursor: pointer;
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
width: 44px; height: 44px; border-radius: 50%; border: none;
|
|
background: rgba(0, 0, 0, 0.5); color: #fff;
|
|
}
|
|
.lightbox-close ha-icon { --mdc-icon-size: 26px; }
|
|
.doc-info { flex: 1; min-width: 0; cursor: pointer; border-radius: 6px; }
|
|
.doc-info:hover .doc-title { text-decoration: underline; }
|
|
.doc-info:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
|
|
.doc-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.doc-meta { font-size: 12px; color: var(--secondary-text-color, #888); }
|
|
.doc-row-actions { display: flex; gap: 4px; flex: none; }
|
|
.icon-btn {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
|
|
background: transparent; border: none; color: var(--primary-text-color);
|
|
text-decoration: none;
|
|
}
|
|
.icon-btn:hover { background: var(--secondary-background-color, rgba(0,0,0,0.06)); }
|
|
.icon-btn.danger { color: var(--error-color, #f44336); }
|
|
.icon-btn[disabled] { opacity: 0.4; pointer-events: none; }
|
|
.icon-btn ha-icon { --mdc-icon-size: 20px; }
|
|
`;
|
|
}
|
|
|
|
if (!customElements.get("maintenance-documents-section")) {
|
|
customElements.define("maintenance-documents-section", MaintenanceDocumentsSection);
|
|
}
|