816 lines
33 KiB
TypeScript
816 lines
33 KiB
TypeScript
/** v2.3.0 — Task Quick-Actions Dialog.
|
|
*
|
|
* Opens from the Lovelace card / strategy when the user clicks a task row.
|
|
* Surfaces every action the panel's Task-Detail header offers, in-place,
|
|
* without forcing a panel-roundtrip:
|
|
*
|
|
* • Quick info — name + status + next due + last performed + interval
|
|
* • Primary actions — Complete (existing dialog), Skip (inline), Reset (inline)
|
|
* • Secondary (admin) — Edit settings (existing dialog), QR Code, Delete
|
|
* • Footer — "Open in Maintenance Panel" deep-link for History/Statistics
|
|
*
|
|
* Mounted via dialog-mount.openTaskQuickActions(entryId, taskId).
|
|
*/
|
|
|
|
import { LitElement, html, css, nothing } from "lit";
|
|
import { property, state } from "lit/decorators.js";
|
|
import { sharedStyles, t, STATUS_COLORS, formatDate, formatDateTime, formatRecurrence } from "../styles";
|
|
import { describeWsError } from "../ws-errors";
|
|
import { renderWeibullSection } from "../renderers/weibull";
|
|
import { renderPredictionSection } from "../renderers/prediction";
|
|
import { renderRecommendationBars } from "../renderers/recommendation";
|
|
import {
|
|
renderSeasonalCardCompact,
|
|
renderSeasonalCardExpanded,
|
|
} from "../renderers/seasonal";
|
|
import type {
|
|
HomeAssistant,
|
|
HistoryEntry,
|
|
MaintenanceObjectResponse,
|
|
MaintenanceTask,
|
|
AdvancedFeatures,
|
|
} from "../types";
|
|
|
|
interface MaintenanceObjectFull {
|
|
entry_id: string;
|
|
object: { id: string; name: string };
|
|
tasks: MaintenanceTask[];
|
|
}
|
|
|
|
export class MaintenanceTaskQuickActionsDialog extends LitElement {
|
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
|
|
|
@state() private _open = false;
|
|
@state() private _entryId: string | null = null;
|
|
@state() private _taskId: string | null = null;
|
|
@state() private _task: MaintenanceTask | null = null;
|
|
@state() private _objectName = "";
|
|
@state() private _busy = false;
|
|
@state() private _error = "";
|
|
@state() private _showSkip = false;
|
|
@state() private _showReset = false;
|
|
@state() private _showDetails = false;
|
|
@state() private _showAdaptive = false;
|
|
@state() private _skipReason = "";
|
|
@state() private _resetDate = "";
|
|
@state() private _features: AdvancedFeatures = {
|
|
adaptive: false, predictions: false, seasonal: false, environmental: false,
|
|
budget: false, groups: false, checklists: false, schedule_time: false,
|
|
completion_actions: false,
|
|
};
|
|
@state() private _toast = "";
|
|
private _featuresLoaded = false;
|
|
|
|
private get _lang(): string {
|
|
return this.hass?.language || "en";
|
|
}
|
|
|
|
/** Open the dialog. Loads fresh data from /object via WS so dialog stays in
|
|
* sync even if the underlying card has stale data. */
|
|
public async openFor(entryId: string, taskId: string): Promise<void> {
|
|
this._entryId = entryId;
|
|
this._taskId = taskId;
|
|
this._error = "";
|
|
this._showSkip = false;
|
|
this._showReset = false;
|
|
this._showAdaptive = false;
|
|
this._skipReason = "";
|
|
this._resetDate = new Date().toISOString().slice(0, 10);
|
|
this._open = true;
|
|
await Promise.all([this._loadTask(), this._loadFeatures()]);
|
|
}
|
|
|
|
/** Pull the active feature flags so adaptive sections only render when
|
|
* Adaptive / Seasonal / Environmental are actually enabled (matches the
|
|
* panel's behaviour). Cached after first load. */
|
|
private async _loadFeatures(): Promise<void> {
|
|
if (this._featuresLoaded) return;
|
|
try {
|
|
const r = await this.hass.connection.sendMessagePromise<{
|
|
features?: Partial<AdvancedFeatures>;
|
|
}>({ type: "maintenance_supporter/settings" });
|
|
if (r?.features) {
|
|
this._features = { ...this._features, ...r.features };
|
|
}
|
|
this._featuresLoaded = true;
|
|
} catch {
|
|
// Settings endpoint unavailable — leave defaults (all false), the
|
|
// adaptive panel will then stay hidden.
|
|
}
|
|
}
|
|
|
|
public close(): void {
|
|
this._open = false;
|
|
this._task = null;
|
|
this._error = "";
|
|
}
|
|
|
|
private async _loadTask(): Promise<void> {
|
|
if (!this._entryId || !this._taskId) return;
|
|
try {
|
|
const r = await this.hass.connection.sendMessagePromise<MaintenanceObjectFull>({
|
|
type: "maintenance_supporter/object",
|
|
entry_id: this._entryId,
|
|
});
|
|
this._objectName = r.object?.name || "";
|
|
const found = (r.tasks || []).find((t) => t.id === this._taskId);
|
|
this._task = found ?? null;
|
|
} catch (e) {
|
|
this._error = describeWsError(e, this._lang);
|
|
}
|
|
}
|
|
|
|
private async _runWs(payload: Record<string, unknown>): Promise<boolean> {
|
|
this._busy = true;
|
|
this._error = "";
|
|
try {
|
|
await this.hass.connection.sendMessagePromise(payload);
|
|
this._busy = false;
|
|
return true;
|
|
} catch (e) {
|
|
this._error = describeWsError(e, this._lang);
|
|
this._busy = false;
|
|
return false;
|
|
}
|
|
}
|
|
|
|
private _notifyChanged(action: string): void {
|
|
this.dispatchEvent(
|
|
new CustomEvent("task-action-fired", {
|
|
detail: { entry_id: this._entryId, task_id: this._taskId, action },
|
|
bubbles: true,
|
|
composed: true,
|
|
}),
|
|
);
|
|
}
|
|
|
|
private _onComplete(): void {
|
|
if (!this._entryId || !this._taskId || !this._task) return;
|
|
// Reuse the existing rich complete-dialog by mounting it on body
|
|
import("../dialog-mount").then(({ openCompleteDialog }) => {
|
|
const ok = openCompleteDialog({
|
|
entry_id: this._entryId!,
|
|
task_id: this._taskId!,
|
|
task_name: this._task!.name,
|
|
checklist: this._task!.checklist || [],
|
|
adaptive_enabled: !!this._task!.adaptive_config?.enabled,
|
|
});
|
|
if (ok) {
|
|
this._notifyChanged("complete");
|
|
this.close();
|
|
}
|
|
});
|
|
}
|
|
|
|
private async _onSkipConfirm(): Promise<void> {
|
|
if (!this._entryId || !this._taskId) return;
|
|
const ok = await this._runWs({
|
|
type: "maintenance_supporter/task/skip",
|
|
entry_id: this._entryId,
|
|
task_id: this._taskId,
|
|
reason: this._skipReason.trim() || null,
|
|
});
|
|
if (ok) {
|
|
this._notifyChanged("skip");
|
|
this.close();
|
|
}
|
|
}
|
|
|
|
private async _onResetConfirm(): Promise<void> {
|
|
if (!this._entryId || !this._taskId) return;
|
|
const ok = await this._runWs({
|
|
type: "maintenance_supporter/task/reset",
|
|
entry_id: this._entryId,
|
|
task_id: this._taskId,
|
|
date: this._resetDate || undefined,
|
|
});
|
|
if (ok) {
|
|
this._notifyChanged("reset");
|
|
this.close();
|
|
}
|
|
}
|
|
|
|
private _onEdit(): void {
|
|
if (!this._entryId || !this._taskId) return;
|
|
import("../dialog-mount").then(({ openEditTaskDialog }) => {
|
|
openEditTaskDialog(this._entryId!, this._taskId!);
|
|
this.close();
|
|
});
|
|
}
|
|
|
|
private _onQr(): void {
|
|
if (!this._entryId || !this._taskId || !this._task) return;
|
|
import("../dialog-mount").then(({ openQrDialog }) => {
|
|
openQrDialog({
|
|
entry_id: this._entryId!,
|
|
task_id: this._taskId!,
|
|
task_name: this._task!.name,
|
|
object_name: this._objectName,
|
|
});
|
|
this.close();
|
|
});
|
|
}
|
|
|
|
private async _onDelete(): Promise<void> {
|
|
if (!this._entryId || !this._taskId) return;
|
|
const confirmText = t("delete_task_confirm", this._lang)
|
|
|| `Delete "${this._task?.name}"?`;
|
|
if (!window.confirm(confirmText)) return;
|
|
const ok = await this._runWs({
|
|
type: "maintenance_supporter/task/delete",
|
|
entry_id: this._entryId,
|
|
task_id: this._taskId,
|
|
});
|
|
if (ok) {
|
|
this._notifyChanged("delete");
|
|
this.close();
|
|
}
|
|
}
|
|
|
|
private async _onArchive(): Promise<void> {
|
|
if (!this._entryId || !this._taskId) return;
|
|
const ok = await this._runWs({
|
|
type: "maintenance_supporter/task/archive",
|
|
entry_id: this._entryId,
|
|
task_id: this._taskId,
|
|
});
|
|
if (ok) {
|
|
this._notifyChanged("archive");
|
|
this.close();
|
|
}
|
|
}
|
|
|
|
private async _onUnarchive(): Promise<void> {
|
|
if (!this._entryId || !this._taskId) return;
|
|
const ok = await this._runWs({
|
|
type: "maintenance_supporter/task/unarchive",
|
|
entry_id: this._entryId,
|
|
task_id: this._taskId,
|
|
});
|
|
if (ok) {
|
|
this._notifyChanged("unarchive");
|
|
this.close();
|
|
}
|
|
}
|
|
|
|
private _onOpenInPanel(): void {
|
|
if (!this._entryId || !this._taskId) return;
|
|
const path = `/maintenance-supporter?entry_id=${encodeURIComponent(this._entryId)}`
|
|
+ `&task_id=${encodeURIComponent(this._taskId)}`;
|
|
history.pushState(null, "", path);
|
|
window.dispatchEvent(new CustomEvent("location-changed"));
|
|
this.close();
|
|
}
|
|
|
|
private async _applySuggestion(): Promise<void> {
|
|
if (!this._entryId || !this._taskId || !this._task?.suggested_interval) return;
|
|
const ok = await this._runWs({
|
|
type: "maintenance_supporter/task/apply_suggestion",
|
|
entry_id: this._entryId,
|
|
task_id: this._taskId,
|
|
interval: this._task.suggested_interval,
|
|
});
|
|
if (ok) {
|
|
this._toast = t("suggestion_applied", this._lang) || "Applied";
|
|
this._notifyChanged("apply_suggestion");
|
|
// Refresh local task so the recommendation card hides
|
|
await this._loadTask();
|
|
setTimeout(() => { this._toast = ""; }, 2500);
|
|
}
|
|
}
|
|
|
|
private async _reanalyzeInterval(): Promise<void> {
|
|
if (!this._entryId || !this._taskId) return;
|
|
this._busy = true;
|
|
this._error = "";
|
|
try {
|
|
const r = await this.hass.connection.sendMessagePromise<{
|
|
recommended_interval: number | null;
|
|
confidence: string;
|
|
data_points: number;
|
|
}>({
|
|
type: "maintenance_supporter/task/analyze_interval",
|
|
entry_id: this._entryId,
|
|
task_id: this._taskId,
|
|
});
|
|
this._toast = r.recommended_interval
|
|
? `${t("reanalyze_result", this._lang) || "Recomputed"}: ${r.recommended_interval}d (${r.data_points} pts)`
|
|
: (t("reanalyze_insufficient_data", this._lang) || "Not enough data");
|
|
await this._loadTask();
|
|
setTimeout(() => { this._toast = ""; }, 3500);
|
|
} catch (e) {
|
|
this._error = describeWsError(e, this._lang);
|
|
} finally {
|
|
this._busy = false;
|
|
}
|
|
}
|
|
|
|
private _onEditHistoryEntry(entry: HistoryEntry): void {
|
|
if (!this._entryId || !this._taskId) return;
|
|
import("../dialog-mount").then(({ openHistoryEditDialog }) => {
|
|
openHistoryEditDialog({
|
|
entry_id: this._entryId!,
|
|
task_id: this._taskId!,
|
|
original_timestamp: entry.timestamp,
|
|
type: entry.type,
|
|
timestamp: entry.timestamp,
|
|
notes: entry.notes ?? null,
|
|
cost: entry.cost ?? null,
|
|
duration: entry.duration ?? null,
|
|
completed_by: entry.completed_by ?? null,
|
|
});
|
|
});
|
|
}
|
|
|
|
/** Inline recommendation card (Current vs Suggested with apply/reanalyze).
|
|
* Bars + confidence badge come from the shared renderer; the action row
|
|
* uses native <button>s because <ha-button> isn't always registered in
|
|
* the Lovelace context (same lazy-load issue that bit complete-dialog
|
|
* with ha-textfield in #50). The panel uses ha-button + adds Dismiss. */
|
|
private _renderRecommendation(task: MaintenanceTask) {
|
|
if (!this._features.adaptive
|
|
|| !task.suggested_interval
|
|
|| task.suggested_interval === task.interval_days) {
|
|
return nothing;
|
|
}
|
|
const L = this._lang;
|
|
return html`
|
|
<div class="recommendation-card">
|
|
<h4>${t("suggested_interval", L)}</h4>
|
|
${renderRecommendationBars(
|
|
task.interval_days, task.suggested_interval,
|
|
task.interval_confidence || "medium", L,
|
|
)}
|
|
<div class="recommendation-actions">
|
|
<button class="btn primary"
|
|
@click=${this._applySuggestion} ?disabled=${this._busy}>
|
|
<ha-icon icon="mdi:check"></ha-icon>
|
|
${t("apply_suggestion", L)}
|
|
</button>
|
|
<button class="btn"
|
|
@click=${this._reanalyzeInterval} ?disabled=${this._busy}>
|
|
<ha-icon icon="mdi:refresh"></ha-icon>
|
|
${t("reanalyze", L)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
/** Adaptive section: prediction + recommendation + Weibull + seasonal,
|
|
* reusing the panel's renderers. Only renders blocks that have data. */
|
|
private _renderAdaptive(task: MaintenanceTask) {
|
|
const L = this._lang;
|
|
const hasRecommendation = this._features.adaptive
|
|
&& task.suggested_interval
|
|
&& task.suggested_interval !== task.interval_days;
|
|
const hasPrediction = (task.degradation_trend != null
|
|
&& task.degradation_trend !== "insufficient_data")
|
|
|| task.days_until_threshold != null
|
|
|| (task.environmental_factor != null && task.environmental_factor !== 1.0);
|
|
const hasWeibull = this._features.adaptive
|
|
&& task.interval_analysis?.weibull_beta != null
|
|
&& task.interval_analysis?.weibull_eta != null;
|
|
const hasSeasonal = this._features.seasonal
|
|
&& task.seasonal_factor
|
|
&& task.seasonal_factor !== 1.0;
|
|
|
|
if (!hasRecommendation && !hasPrediction && !hasWeibull && !hasSeasonal) {
|
|
return html`<div class="adaptive-empty">
|
|
${t("adaptive_no_data", L) || "Not enough completion history yet for adaptive analysis."}
|
|
</div>`;
|
|
}
|
|
return html`
|
|
<div class="adaptive-stack">
|
|
${this._toast
|
|
? html`<div class="toast">${this._toast}</div>`
|
|
: nothing}
|
|
${hasRecommendation ? this._renderRecommendation(task) : nothing}
|
|
${hasPrediction ? renderPredictionSection(task, L, this._features) : nothing}
|
|
${hasWeibull ? renderWeibullSection(task, L) : nothing}
|
|
${hasSeasonal ? html`
|
|
${renderSeasonalCardCompact(task, L, this._features)}
|
|
${task.seasonal_factors?.length === 12
|
|
|| task.interval_analysis?.seasonal_factors?.length === 12
|
|
? renderSeasonalCardExpanded(task, L)
|
|
: nothing}
|
|
` : nothing}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
/** Read-only details panel: stats + history. Shown when the user clicks
|
|
* "Show details" in the dialog. Edit-buttons on history entries open the
|
|
* existing history-edit dialog (which lives in the same dialog-mount). */
|
|
private _renderDetails(task: MaintenanceTask) {
|
|
const L = this._lang;
|
|
const history = (task.history || []) as HistoryEntry[];
|
|
const completed = history.filter((h) => h.type === "completed");
|
|
const totalCost = completed.reduce(
|
|
(s, h) => s + (typeof h.cost === "number" ? h.cost : 0),
|
|
0,
|
|
);
|
|
const avgDuration = (() => {
|
|
const durs = completed
|
|
.map((h) => (typeof h.duration === "number" ? h.duration : null))
|
|
.filter((d): d is number => d != null);
|
|
if (!durs.length) return null;
|
|
return Math.round(durs.reduce((s, d) => s + d, 0) / durs.length);
|
|
})();
|
|
|
|
return html`
|
|
<div class="details">
|
|
<div class="stats-grid">
|
|
<div class="stat">
|
|
<span class="stat-label">${t("times_performed", L) || "Performed"}</span>
|
|
<span class="stat-value">${completed.length}</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">${t("total_cost", L) || "Total cost"}</span>
|
|
<span class="stat-value">${totalCost.toFixed(2)}</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">${t("avg_duration", L) || "Avg duration"}</span>
|
|
<span class="stat-value">${avgDuration != null ? `${avgDuration}m` : "—"}</span>
|
|
</div>
|
|
</div>
|
|
<div class="history-header">
|
|
<strong>${t("history", L) || "History"}</strong>
|
|
<span class="history-count">${history.length}</span>
|
|
</div>
|
|
${history.length === 0
|
|
? html`<div class="history-empty">${t("history_empty", L) || "No history yet."}</div>`
|
|
: html`
|
|
<div class="history-list">
|
|
${[...history].reverse().slice(0, 20).map((entry) => {
|
|
const editable = ["completed", "reset", "skipped"].includes(entry.type);
|
|
return html`
|
|
<div class="history-entry">
|
|
<div class="history-line">
|
|
<span class="history-type type-${entry.type}">${t(entry.type, L)}</span>
|
|
<span class="history-date">${formatDateTime(entry.timestamp, L)}</span>
|
|
${editable
|
|
? html`<button class="history-edit"
|
|
title="${t("history_edit_button", L) || "Edit"}"
|
|
@click=${() => this._onEditHistoryEntry(entry)}>
|
|
<ha-icon icon="mdi:pencil"></ha-icon>
|
|
</button>`
|
|
: nothing}
|
|
</div>
|
|
${entry.notes
|
|
? html`<div class="history-notes">${entry.notes}</div>`
|
|
: nothing}
|
|
${entry.cost != null || entry.duration != null
|
|
? html`<div class="history-meta">
|
|
${entry.cost != null ? html`<span>💰 ${entry.cost.toFixed(2)}</span>` : nothing}
|
|
${entry.duration != null ? html`<span>⏱️ ${entry.duration}m</span>` : nothing}
|
|
</div>`
|
|
: nothing}
|
|
</div>
|
|
`;
|
|
})}
|
|
${history.length > 20
|
|
? html`<div class="history-more">… +${history.length - 20} ${t("older_entries", L) || "older"}</div>`
|
|
: nothing}
|
|
</div>
|
|
`}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
render() {
|
|
if (!this._open) return nothing;
|
|
const L = this._lang;
|
|
const task = this._task;
|
|
const isAdmin = (this.hass?.user?.is_admin ?? true) as boolean;
|
|
|
|
return html`
|
|
<div class="backdrop" @click=${this.close}></div>
|
|
<div class="dialog" role="dialog" aria-modal="true">
|
|
${task
|
|
? html`
|
|
<div class="header">
|
|
<div class="title">
|
|
<span class="status-dot" style="background: ${STATUS_COLORS[task.status] || "#ccc"}"></span>
|
|
<span class="task-name">${task.name}</span>
|
|
</div>
|
|
<div class="object">
|
|
<button class="link-inline" @click=${() => {
|
|
if (!this._entryId) return;
|
|
import("../dialog-mount").then(({ openObjectQuickActions }) => {
|
|
openObjectQuickActions(this._entryId!);
|
|
this.close();
|
|
});
|
|
}}>${this._objectName}</button>
|
|
</div>
|
|
<div class="quick-info">
|
|
${task.next_due
|
|
? html`<span><strong>${t("next_due", L) || "Next due"}:</strong> ${formatDate(task.next_due, L)}</span>`
|
|
: nothing}
|
|
${task.last_performed
|
|
? html`<span><strong>${t("last_performed", L) || "Last"}:</strong> ${formatDate(task.last_performed, L)}</span>`
|
|
: nothing}
|
|
${(task.schedule?.kind && !["manual", "one_time"].includes(task.schedule.kind)) || task.interval_days != null
|
|
? html`<span><strong>${t("interval", L) || "Interval"}:</strong> ${formatRecurrence(task, L)}</span>`
|
|
: nothing}
|
|
</div>
|
|
</div>
|
|
|
|
${this._error
|
|
? html`<div class="error">${this._error}</div>`
|
|
: nothing}
|
|
|
|
${this._showSkip
|
|
? html`
|
|
<div class="inline-form">
|
|
<label>${t("skip_reason", L) || "Skip reason (optional)"}</label>
|
|
<input type="text" .value=${this._skipReason}
|
|
@input=${(e: Event) => { this._skipReason = (e.target as HTMLInputElement).value; }} />
|
|
<div class="inline-actions">
|
|
<button class="btn cancel" @click=${() => { this._showSkip = false; }} ?disabled=${this._busy}>
|
|
${t("cancel", L) || "Cancel"}
|
|
</button>
|
|
<button class="btn primary" @click=${this._onSkipConfirm} ?disabled=${this._busy}>
|
|
${t("skip", L) || "Skip"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`
|
|
: this._showReset
|
|
? html`
|
|
<div class="inline-form">
|
|
<label>${t("reset_to_date", L) || "Reset last_performed to"}</label>
|
|
<input type="date" .value=${this._resetDate}
|
|
@input=${(e: Event) => { this._resetDate = (e.target as HTMLInputElement).value; }} />
|
|
<div class="inline-actions">
|
|
<button class="btn cancel" @click=${() => { this._showReset = false; }} ?disabled=${this._busy}>
|
|
${t("cancel", L) || "Cancel"}
|
|
</button>
|
|
<button class="btn primary" @click=${this._onResetConfirm} ?disabled=${this._busy}>
|
|
${t("reset", L) || "Reset"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`
|
|
: html`
|
|
<div class="actions primary-row">
|
|
<button class="btn primary" @click=${this._onComplete} ?disabled=${this._busy}>
|
|
<ha-icon icon="mdi:check"></ha-icon>
|
|
${t("complete", L) || "Complete"}
|
|
</button>
|
|
<button class="btn" @click=${() => { this._showSkip = true; }} ?disabled=${this._busy}>
|
|
<ha-icon icon="mdi:skip-next"></ha-icon>
|
|
${t("skip", L) || "Skip"}
|
|
</button>
|
|
<button class="btn" @click=${() => { this._showReset = true; }} ?disabled=${this._busy}>
|
|
<ha-icon icon="mdi:restart"></ha-icon>
|
|
${t("reset", L) || "Reset"}
|
|
</button>
|
|
</div>
|
|
${isAdmin
|
|
? html`
|
|
<div class="actions secondary-row">
|
|
<button class="btn ghost" @click=${this._onEdit} ?disabled=${this._busy}>
|
|
<ha-icon icon="mdi:pencil"></ha-icon>
|
|
${t("edit", L) || "Edit"}
|
|
</button>
|
|
<button class="btn ghost" @click=${this._onQr} ?disabled=${this._busy}>
|
|
<ha-icon icon="mdi:qrcode"></ha-icon>
|
|
${t("qr_code", L) || "QR"}
|
|
</button>
|
|
<button class="btn ghost"
|
|
@click=${task.archived ? this._onUnarchive : this._onArchive}
|
|
?disabled=${this._busy}>
|
|
<ha-icon icon="${task.archived ? 'mdi:archive-arrow-up-outline' : 'mdi:archive-outline'}"></ha-icon>
|
|
${task.archived ? (t("unarchive", L) || "Unarchive") : (t("archive", L) || "Archive")}
|
|
</button>
|
|
<button class="btn ghost danger" @click=${this._onDelete} ?disabled=${this._busy}>
|
|
<ha-icon icon="mdi:delete"></ha-icon>
|
|
${t("delete", L) || "Delete"}
|
|
</button>
|
|
</div>
|
|
`
|
|
: nothing}
|
|
<div class="details-toggle">
|
|
<button class="link" @click=${() => { this._showDetails = !this._showDetails; }}>
|
|
<ha-icon icon="${this._showDetails ? 'mdi:chevron-up' : 'mdi:chevron-down'}"></ha-icon>
|
|
${this._showDetails
|
|
? (t("hide_details", L) || "Hide details")
|
|
: (t("show_details", L) || "Show history + stats")}
|
|
</button>
|
|
${this._features.adaptive
|
|
|| this._features.seasonal
|
|
|| this._features.environmental
|
|
? html`<button class="link" @click=${() => { this._showAdaptive = !this._showAdaptive; }}>
|
|
<ha-icon icon="${this._showAdaptive ? 'mdi:chart-line' : 'mdi:chart-line-variant'}"></ha-icon>
|
|
${this._showAdaptive
|
|
? (t("hide_stats", L) || "Hide stats")
|
|
: (t("show_stats", L) || "Show stats + graphs")}
|
|
</button>`
|
|
: nothing}
|
|
</div>
|
|
${this._showDetails ? this._renderDetails(task) : nothing}
|
|
${this._showAdaptive ? this._renderAdaptive(task) : nothing}
|
|
<div class="footer">
|
|
<button class="link" @click=${this._onOpenInPanel}>
|
|
<ha-icon icon="mdi:open-in-new"></ha-icon>
|
|
${t("open_in_panel", L) || "Open in Maintenance panel"}
|
|
</button>
|
|
</div>
|
|
`}
|
|
`
|
|
: html`<div class="loading">${t("loading", L) || "Loading…"}</div>`}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
static styles = [sharedStyles, css`
|
|
:host { display: contents; }
|
|
.backdrop {
|
|
position: fixed; inset: 0; z-index: 100;
|
|
background: rgba(0,0,0,0.5);
|
|
}
|
|
.dialog {
|
|
position: fixed; left: 50%; top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 95vw; max-width: 460px;
|
|
max-height: 92vh; overflow: auto;
|
|
background: var(--card-background-color, var(--ha-card-background, #1c1c1c));
|
|
color: var(--primary-text-color);
|
|
border-radius: 12px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
|
|
padding: 20px;
|
|
display: flex; flex-direction: column; gap: 14px;
|
|
z-index: 101;
|
|
}
|
|
.header { display: flex; flex-direction: column; gap: 6px; }
|
|
.title { display: flex; align-items: center; gap: 10px; }
|
|
.status-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
|
|
.task-name { font-size: 18px; font-weight: 600; }
|
|
.object { font-size: 13px; color: var(--secondary-text-color); }
|
|
.link-inline {
|
|
background: transparent; border: none; padding: 0; cursor: pointer;
|
|
color: var(--primary-color); font-size: inherit; font-family: inherit;
|
|
}
|
|
.link-inline:hover { text-decoration: underline; }
|
|
.quick-info {
|
|
display: flex; flex-wrap: wrap; gap: 12px;
|
|
font-size: 12px; color: var(--secondary-text-color);
|
|
padding-top: 4px; border-top: 1px solid var(--divider-color);
|
|
}
|
|
.quick-info strong { color: var(--primary-text-color); font-weight: 500; }
|
|
.actions { display: flex; gap: 8px; }
|
|
.actions.primary-row { gap: 6px; }
|
|
.actions.primary-row .btn { flex: 1; }
|
|
/* Edit + QR are admin-tools — left-align as a group; Delete is destructive
|
|
so it gets pushed to the far right with margin-left:auto for visual
|
|
separation. Earlier this row was flex-end which left a strange empty
|
|
gap on the left (user feedback). */
|
|
.actions.secondary-row {
|
|
padding-top: 8px; border-top: 1px solid var(--divider-color);
|
|
justify-content: flex-start;
|
|
}
|
|
.actions.secondary-row .btn.danger {
|
|
margin-left: auto;
|
|
}
|
|
.btn {
|
|
padding: 8px 12px; font-size: 14px;
|
|
border-radius: 6px; cursor: pointer;
|
|
border: 1px solid var(--divider-color);
|
|
background: var(--secondary-background-color, transparent);
|
|
color: var(--primary-text-color);
|
|
font-weight: 500;
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
transition: background 0.12s;
|
|
}
|
|
.btn:hover { background: var(--state-icon-color, rgba(255,255,255,0.06)); }
|
|
.btn[disabled] { opacity: 0.5; cursor: wait; }
|
|
.btn.primary {
|
|
background: var(--primary-color);
|
|
color: var(--text-primary-color, white);
|
|
border-color: var(--primary-color);
|
|
}
|
|
.btn.cancel { background: transparent; }
|
|
.btn.ghost { padding: 6px 10px; font-size: 13px; }
|
|
.btn.danger { color: var(--error-color); }
|
|
.btn ha-icon { --mdc-icon-size: 18px; }
|
|
.inline-form { display: flex; flex-direction: column; gap: 8px; }
|
|
.inline-form label { font-size: 13px; color: var(--secondary-text-color); }
|
|
.inline-form input {
|
|
padding: 8px; font-size: 14px;
|
|
background: var(--secondary-background-color, #2c2c2c);
|
|
color: var(--primary-text-color);
|
|
border: 1px solid var(--divider-color, #444);
|
|
border-radius: 6px;
|
|
}
|
|
.inline-actions { display: flex; gap: 8px; justify-content: flex-end; }
|
|
.footer { display: flex; justify-content: center; padding-top: 4px; }
|
|
.link {
|
|
background: transparent; border: none; cursor: pointer;
|
|
color: var(--primary-color); font-size: 13px;
|
|
display: inline-flex; align-items: center; gap: 4px;
|
|
}
|
|
.link:hover { text-decoration: underline; }
|
|
.link ha-icon { --mdc-icon-size: 14px; }
|
|
.loading { padding: 24px; text-align: center; color: var(--secondary-text-color); }
|
|
.error {
|
|
padding: 8px; border-radius: 6px;
|
|
background: rgba(211,47,47,0.1);
|
|
color: var(--error-color, #d32f2f); font-size: 13px;
|
|
}
|
|
|
|
/* Details (expandable Show details section) */
|
|
.details-toggle { display: flex; justify-content: center; margin-top: 4px; }
|
|
.details {
|
|
display: flex; flex-direction: column; gap: 12px;
|
|
border-top: 1px solid var(--divider-color);
|
|
padding-top: 12px;
|
|
}
|
|
.stats-grid {
|
|
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
|
|
}
|
|
.stat {
|
|
display: flex; flex-direction: column; gap: 2px;
|
|
background: var(--secondary-background-color, rgba(255,255,255,0.04));
|
|
padding: 8px; border-radius: 6px;
|
|
align-items: center;
|
|
}
|
|
.stat-label { font-size: 11px; color: var(--secondary-text-color); text-transform: uppercase; letter-spacing: 0.5px; }
|
|
.stat-value { font-size: 16px; font-weight: 600; }
|
|
.history-header {
|
|
display: flex; align-items: baseline; gap: 8px;
|
|
font-size: 14px;
|
|
}
|
|
.history-count {
|
|
font-size: 12px; color: var(--secondary-text-color);
|
|
background: var(--secondary-background-color); padding: 2px 8px; border-radius: 999px;
|
|
}
|
|
.history-empty { color: var(--secondary-text-color); font-style: italic; font-size: 13px; }
|
|
.history-list { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow: auto; }
|
|
.history-entry {
|
|
padding: 6px 8px; border-radius: 6px;
|
|
background: var(--secondary-background-color, rgba(255,255,255,0.03));
|
|
font-size: 13px;
|
|
}
|
|
.history-line {
|
|
display: flex; align-items: center; gap: 8px;
|
|
justify-content: space-between;
|
|
}
|
|
.history-type {
|
|
font-weight: 600; font-size: 11px;
|
|
padding: 2px 6px; border-radius: 4px;
|
|
text-transform: uppercase; letter-spacing: 0.5px;
|
|
}
|
|
.type-completed { background: rgba(46,125,50,0.2); color: #66bb6a; }
|
|
.type-skipped { background: rgba(158,158,158,0.2); color: var(--secondary-text-color); }
|
|
.type-reset { background: rgba(33,150,243,0.2); color: #64b5f6; }
|
|
.type-triggered { background: rgba(255,87,34,0.2); color: #ff8a65; }
|
|
.history-date { font-size: 11px; color: var(--secondary-text-color); flex: 1; text-align: right; }
|
|
.history-edit {
|
|
background: transparent; border: none; cursor: pointer;
|
|
padding: 4px; border-radius: 4px;
|
|
color: var(--secondary-text-color);
|
|
}
|
|
.history-edit:hover { background: var(--state-icon-color, rgba(255,255,255,0.06)); color: var(--primary-color); }
|
|
.history-edit ha-icon { --mdc-icon-size: 14px; }
|
|
.history-notes { margin-top: 4px; color: var(--primary-text-color); }
|
|
.history-meta { display: flex; gap: 12px; margin-top: 4px; color: var(--secondary-text-color); font-size: 11px; }
|
|
.history-more { padding: 8px; text-align: center; font-size: 12px; color: var(--secondary-text-color); font-style: italic; }
|
|
|
|
/* Adaptive section — wraps the panel renderers (which assume sharedStyles
|
|
are present) and adds dialog-specific layout. */
|
|
.adaptive-stack {
|
|
display: flex; flex-direction: column; gap: 12px;
|
|
border-top: 1px solid var(--divider-color);
|
|
padding-top: 12px;
|
|
}
|
|
.adaptive-empty {
|
|
padding: 16px; text-align: center;
|
|
color: var(--secondary-text-color);
|
|
font-style: italic; font-size: 13px;
|
|
border-top: 1px solid var(--divider-color);
|
|
}
|
|
.toast {
|
|
padding: 8px 12px; border-radius: 6px;
|
|
background: rgba(76, 175, 80, 0.15);
|
|
color: #4caf50; font-size: 13px; font-weight: 500;
|
|
}
|
|
/* The panel's recommendation-card uses ha-button. We use plain <button>
|
|
in this dialog's button styles. Re-style the action row to match. */
|
|
.recommendation-actions {
|
|
display: flex; gap: 8px; margin-top: 8px;
|
|
}
|
|
/* Constrain SVG charts so they fit the dialog width even on mobile. */
|
|
.weibull-section, .seasonal-card-compact { max-width: 100%; }
|
|
.weibull-chart svg { max-width: 100%; height: auto; }
|
|
.details-toggle { gap: 12px; flex-wrap: wrap; }
|
|
`];
|
|
}
|
|
|
|
if (!customElements.get("maintenance-task-quick-actions-dialog")) {
|
|
customElements.define(
|
|
"maintenance-task-quick-actions-dialog",
|
|
MaintenanceTaskQuickActionsDialog,
|
|
);
|
|
}
|