589 lines
21 KiB
TypeScript
589 lines
21 KiB
TypeScript
/** Maintenance Supporter — Calendar Card.
|
|
*
|
|
* Standalone Lovelace card extracted from the panel's Calendar tab (v1.5.0+).
|
|
* All the visuals: 7/14/30/365 day window chips, per-event source icons
|
|
* (clock vs trending-up), prediction-confidence pill, projected recurrences
|
|
* at 55% opacity, today-pill highlight, empty-day collapsing in the year view.
|
|
*
|
|
* Click on an event fires an ``ll-custom`` event with payload
|
|
* ``{type: "maintenance-supporter:open-task", entry_id, task_id}``. The
|
|
* dashboard-strategy bundle's document-level handler picks that up and
|
|
* either opens the task dialog in-place (preferred) or deep-links into the
|
|
* panel as a fallback.
|
|
*
|
|
* Card config:
|
|
*
|
|
* type: custom:maintenance-supporter-calendar-card
|
|
* title: My maintenance calendar # optional
|
|
* window_days: 30 # 7 | 14 | 30 | 365 — default 30
|
|
* show_window_chips: true # default true; hide for embedded use
|
|
* show_user_filter: true # default true
|
|
* user_filter: "" # "" | "current_user" | "<uuid>"
|
|
*/
|
|
|
|
import { LitElement, html, css, nothing } from "lit";
|
|
import { property, state } from "lit/decorators.js";
|
|
import {
|
|
buildCalendarBuckets,
|
|
buildPastBuckets,
|
|
isoDateLocal,
|
|
type CalendarEvent,
|
|
} from "./helpers/calendar-bucket";
|
|
import { calendarStyles } from "./calendar-styles";
|
|
import { sharedStyles, DEFAULT_CURRENCY_SYMBOL, t, ensureLocale, isLocaleLoaded, setDateTimePrefs } from "./styles";
|
|
import type {
|
|
HomeAssistant,
|
|
MaintenanceObjectResponse,
|
|
StatisticsResponse,
|
|
} from "./types";
|
|
|
|
type WindowDays = 7 | 14 | 30 | 365;
|
|
type PastDays = 30 | 90;
|
|
|
|
interface CalendarCardConfig {
|
|
type: string;
|
|
title?: string;
|
|
window_days?: WindowDays;
|
|
show_window_chips?: boolean;
|
|
show_user_filter?: boolean;
|
|
user_filter?: string;
|
|
/** v2.2.0 — when set, the card renders past N days from history instead
|
|
* of forward N days from next_due. Mutually exclusive with window_days. */
|
|
past_days?: PastDays;
|
|
}
|
|
|
|
export class MaintenanceCalendarCard extends LitElement {
|
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
|
@state() private _config: CalendarCardConfig = {
|
|
type: "custom:maintenance-supporter-calendar-card",
|
|
};
|
|
@state() private _objects: MaintenanceObjectResponse[] = [];
|
|
@state() private _stats: StatisticsResponse | null = null;
|
|
@state() private _windowDays: WindowDays = 30;
|
|
@state() private _pastDays: PastDays | 0 = 0; // 0 = forward mode
|
|
@state() private _userFilter = "";
|
|
@state() private _unsub: (() => void) | null = null;
|
|
|
|
private _dataLoaded = false;
|
|
private _lastConnection: unknown = null;
|
|
|
|
static getConfigElement() {
|
|
return document.createElement("maintenance-supporter-calendar-card-editor");
|
|
}
|
|
|
|
static getStubConfig() {
|
|
// Opinionated default: 30-day rolling window, both controls visible.
|
|
return {
|
|
type: "custom:maintenance-supporter-calendar-card",
|
|
window_days: 30,
|
|
show_window_chips: true,
|
|
show_user_filter: true,
|
|
};
|
|
}
|
|
|
|
setConfig(config: CalendarCardConfig): void {
|
|
this._config = { ...config };
|
|
if (config.past_days && [30, 90].includes(config.past_days)) {
|
|
this._pastDays = config.past_days as PastDays;
|
|
} else if (config.window_days && [7, 14, 30, 365].includes(config.window_days)) {
|
|
this._windowDays = config.window_days as WindowDays;
|
|
this._pastDays = 0;
|
|
}
|
|
if (typeof config.user_filter === "string") {
|
|
this._userFilter = config.user_filter;
|
|
}
|
|
}
|
|
|
|
getCardSize(): number {
|
|
return 6;
|
|
}
|
|
|
|
private get _lang(): string {
|
|
return this.hass?.language || "en";
|
|
}
|
|
|
|
disconnectedCallback(): void {
|
|
super.disconnectedCallback();
|
|
if (this._unsub) {
|
|
try { this._unsub(); } catch { /* ignore */ }
|
|
this._unsub = null;
|
|
}
|
|
this._dataLoaded = false;
|
|
this._lastConnection = null;
|
|
}
|
|
|
|
updated(changedProps: Map<string, unknown>): void {
|
|
super.updated(changedProps);
|
|
// Dates/times follow the HA profile format, not just the language (#97).
|
|
if (changedProps.has("hass")) setDateTimePrefs(this.hass?.locale);
|
|
const lang = this.hass?.language;
|
|
if (lang && !isLocaleLoaded(lang)) {
|
|
ensureLocale(lang).then(() => this.requestUpdate());
|
|
}
|
|
if (changedProps.has("hass") && this.hass) {
|
|
if (!this._dataLoaded) {
|
|
this._dataLoaded = true;
|
|
this._lastConnection = this.hass.connection;
|
|
this._loadData();
|
|
this._subscribe();
|
|
} else if (this.hass.connection !== this._lastConnection) {
|
|
this._lastConnection = this.hass.connection;
|
|
if (this._unsub) {
|
|
try { this._unsub(); } catch { /* ignore */ }
|
|
this._unsub = null;
|
|
}
|
|
this._subscribe();
|
|
this._loadData();
|
|
}
|
|
}
|
|
}
|
|
|
|
private async _loadData(): Promise<void> {
|
|
try {
|
|
const [objResult, statsResult] = await Promise.all([
|
|
this.hass.connection.sendMessagePromise({
|
|
type: "maintenance_supporter/objects",
|
|
}),
|
|
this.hass.connection.sendMessagePromise({
|
|
type: "maintenance_supporter/statistics",
|
|
}),
|
|
]);
|
|
this._objects = (objResult as { objects: MaintenanceObjectResponse[] }).objects;
|
|
this._stats = statsResult as StatisticsResponse;
|
|
} catch {
|
|
// WS not available yet
|
|
}
|
|
}
|
|
|
|
private async _subscribe(): Promise<void> {
|
|
try {
|
|
const unsub = await this.hass.connection.subscribeMessage(
|
|
(msg: unknown) => {
|
|
const data = msg as { objects: MaintenanceObjectResponse[] };
|
|
this._objects = data.objects;
|
|
},
|
|
{ type: "maintenance_supporter/subscribe" },
|
|
);
|
|
// Detached mid-subscribe → drop the orphaned subscription.
|
|
if (!this.isConnected) {
|
|
unsub();
|
|
return;
|
|
}
|
|
this._unsub = unsub;
|
|
} catch {
|
|
// Subscription failed
|
|
}
|
|
}
|
|
|
|
private _onEventClick(ev: CalendarEvent): void {
|
|
// Past events carry a history_timestamp — those open the history-edit
|
|
// dialog instead of the task editor. Future / next_due events open
|
|
// the task editor as usual.
|
|
if (ev.history_timestamp) {
|
|
this.dispatchEvent(
|
|
new CustomEvent("ll-custom", {
|
|
detail: {
|
|
type: "maintenance-supporter:edit-history",
|
|
entry_id: ev.entry_id,
|
|
task_id: ev.task_id,
|
|
original_timestamp: ev.history_timestamp,
|
|
},
|
|
bubbles: true,
|
|
composed: true,
|
|
}),
|
|
);
|
|
return;
|
|
}
|
|
this.dispatchEvent(
|
|
new CustomEvent("ll-custom", {
|
|
detail: {
|
|
type: "maintenance-supporter:open-task",
|
|
entry_id: ev.entry_id,
|
|
task_id: ev.task_id,
|
|
},
|
|
bubbles: true,
|
|
composed: true,
|
|
}),
|
|
);
|
|
}
|
|
|
|
render() {
|
|
if (!this.hass) return nothing;
|
|
|
|
const L = this._lang;
|
|
const showChips = this._config.show_window_chips !== false;
|
|
const showUserFilter = this._config.show_user_filter !== false;
|
|
const title = this._config.title;
|
|
|
|
let userFilter: string | null = null;
|
|
if (this._userFilter) {
|
|
// No UserService here (lives in panel only) — current_user resolves
|
|
// via hass.user when the user picks "my tasks".
|
|
userFilter = this._userFilter === "current_user"
|
|
? (this.hass?.user?.id ?? null)
|
|
: this._userFilter;
|
|
}
|
|
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
const isPast = this._pastDays > 0;
|
|
const buckets = isPast
|
|
? buildPastBuckets(this._objects, today, this._pastDays, userFilter)
|
|
: buildCalendarBuckets(this._objects, today, this._windowDays, userFilter);
|
|
|
|
const todayIso = isoDateLocal(today);
|
|
// Year view AND past views collapse empty days — past windows can be
|
|
// sparse (most days have no maintenance recorded), so listing "no events"
|
|
// for 30 rows is noise.
|
|
const hideEmptyDays = this._windowDays === 365 || isPast;
|
|
const visibleBuckets = hideEmptyDays
|
|
? buckets.filter((b) => b.events.length > 0)
|
|
: buckets;
|
|
|
|
const renderEvent = (ev: CalendarEvent) => {
|
|
const statusClass = `cal-status-${ev.status}`;
|
|
const projClass = ev.projected ? "cal-event-projected" : "";
|
|
const overdueLabel = ev.status === "overdue" && ev.days_until_due != null
|
|
? ` (${Math.abs(ev.days_until_due)}d ${t("overdue", L).toLowerCase()})`
|
|
: "";
|
|
const recurEvery = ev.projected && ev.interval_days
|
|
? html`<span class="cal-event-recur">${
|
|
ev.interval_unit && ev.interval_unit !== "days"
|
|
? `${ev.interval_days} ${t("unit_" + ev.interval_unit, L)}`
|
|
: t("cal_every_n_days", L).replace("{n}", String(ev.interval_days))
|
|
}</span>`
|
|
: nothing;
|
|
const isSensor = ev.schedule_type === "sensor_based";
|
|
const sourceIcon = isSensor
|
|
? html`<ha-icon class="cal-event-icon cal-source-sensor"
|
|
title="${t("cal_source_sensor", L)}" icon="mdi:trending-up"></ha-icon>`
|
|
: html`<ha-icon class="cal-event-icon cal-source-time"
|
|
title="${ev.adaptive_enabled ? t("cal_source_time_adaptive", L) : t("cal_source_time", L)}"
|
|
icon="${ev.adaptive_enabled ? "mdi:clock-time-four-outline" : "mdi:clock-outline"}"></ha-icon>`;
|
|
const predictionSubtitle = isSensor && ev.prediction_confidence
|
|
&& ev.status !== "triggered" && !ev.projected
|
|
? html`<span class="cal-event-prediction cal-conf-${ev.prediction_confidence}">
|
|
${t("cal_predicted", L)} · ${t(`cal_confidence_${ev.prediction_confidence}`, L)}
|
|
</span>`
|
|
: nothing;
|
|
const currencySymbol = this._stats?.budget?.currency_symbol || DEFAULT_CURRENCY_SYMBOL;
|
|
// Past mode: ev.history_type is the actual event ('completed', 'skipped',
|
|
// 'reset', 'triggered', 'trigger_replaced'). Showing the derived status
|
|
// ('OK' for a completion) was confusing — discussion #49 user-feedback:
|
|
// *"im Panel sind die alten Auslösungen drin nicht die completion oder
|
|
// skips"* — completion events looked like they hadn't happened because
|
|
// the badge said "OK" (current task status) not "Completed" (the
|
|
// actual past event). In past mode we now label with the event type.
|
|
// Forward mode still uses the projected status (overdue/due_soon/etc).
|
|
const badgeLabel = ev.history_type
|
|
? t(ev.history_type, L)
|
|
: t(ev.status, L);
|
|
return html`
|
|
<div class="cal-event ${projClass}"
|
|
@click=${() => this._onEventClick(ev)}>
|
|
${sourceIcon}
|
|
<span class="cal-status-pill ${statusClass}">${badgeLabel}</span>
|
|
<div class="cal-event-body">
|
|
<div class="cal-event-title">${ev.object_name} · ${ev.task_name}${overdueLabel}</div>
|
|
${predictionSubtitle}
|
|
${recurEvery}
|
|
</div>
|
|
${ev.avg_cost != null && ev.avg_cost > 0
|
|
? html`<span class="cal-event-cost">${ev.avg_cost.toFixed(0)} ${currencySymbol}</span>`
|
|
: nothing}
|
|
</div>
|
|
`;
|
|
};
|
|
|
|
const renderDayRow = (bucket: { date: string; events: CalendarEvent[] }) => {
|
|
const [y, m, d] = bucket.date.split("-").map(Number);
|
|
const date = new Date(y, m - 1, d);
|
|
const isToday = bucket.date === todayIso;
|
|
const weekday = date.toLocaleDateString(L, { weekday: "short" });
|
|
const monthLabel = date.toLocaleDateString(L, { month: "long" });
|
|
return html`
|
|
<div class="cal-day-row">
|
|
<div class="cal-day-pill ${isToday ? "cal-today" : ""}">
|
|
<span class="cal-pill-weekday">${weekday}</span>
|
|
<span class="cal-pill-day">${date.getDate()}</span>
|
|
</div>
|
|
<div class="cal-day-content">
|
|
<div class="cal-day-header">
|
|
<span class="cal-day-month">${monthLabel}</span>
|
|
${isToday ? html`<span class="cal-day-today-badge">${t("today", L)}</span>` : nothing}
|
|
</div>
|
|
${bucket.events.length === 0
|
|
? html`<div class="cal-empty">${t("cal_no_events", L)}</div>`
|
|
: bucket.events.map(renderEvent)}
|
|
</div>
|
|
</div>
|
|
`;
|
|
};
|
|
|
|
return html`
|
|
<ha-card .header=${title}>
|
|
${showChips || showUserFilter
|
|
? html`
|
|
<div class="cal-controls">
|
|
${showChips
|
|
? html`
|
|
<div class="cal-window-chips cal-past-chips" title="${t("cal_past_windows", L) || "Past windows"}">
|
|
${[30, 90].map((p) => html`
|
|
<button class="cal-window-chip cal-past-chip ${this._pastDays === p ? "active" : ""}"
|
|
@click=${() => {
|
|
this._pastDays = p as PastDays;
|
|
}}>
|
|
−${p}d
|
|
</button>
|
|
`)}
|
|
</div>
|
|
<span class="cal-chip-separator" aria-hidden="true">●</span>
|
|
<div class="cal-window-chips" title="${t("cal_forward_windows", L) || "Forward windows"}">
|
|
${[7, 14, 30, 365].map((w) => html`
|
|
<button class="cal-window-chip ${this._pastDays === 0 && this._windowDays === w ? "active" : ""}"
|
|
@click=${() => {
|
|
this._windowDays = w as WindowDays;
|
|
this._pastDays = 0;
|
|
}}>
|
|
${w === 365 ? "+1y" : `+${w}d`}
|
|
</button>
|
|
`)}
|
|
</div>
|
|
`
|
|
: nothing}
|
|
${showUserFilter
|
|
? html`
|
|
<select class="cal-user-filter"
|
|
.value=${this._userFilter}
|
|
@change=${(e: Event) => {
|
|
this._userFilter = (e.target as HTMLSelectElement).value;
|
|
}}>
|
|
<option value="">${t("all_users", L)}</option>
|
|
<option value="current_user">${t("my_tasks", L)}</option>
|
|
</select>
|
|
`
|
|
: nothing}
|
|
</div>
|
|
`
|
|
: nothing}
|
|
<div class="cal-rolling">
|
|
${visibleBuckets.length === 0 && hideEmptyDays
|
|
? html`<div class="cal-empty">${t("cal_no_events", L)}</div>`
|
|
: visibleBuckets.map(renderDayRow)}
|
|
</div>
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
static styles = [
|
|
sharedStyles,
|
|
calendarStyles,
|
|
css`
|
|
:host { display: block; }
|
|
ha-card { padding: 0; overflow: hidden; }
|
|
`,
|
|
];
|
|
}
|
|
|
|
// ── Calendar Card Editor ────────────────────────────────────────────────────
|
|
//
|
|
// Visual config: pick window_days from a dropdown, toggle the in-card chips
|
|
// and user-filter on/off. Same pattern as MaintenanceSupporterCardEditor —
|
|
// LitElement with setConfig + dispatched config-changed.
|
|
|
|
const WINDOW_DAY_OPTIONS: Array<{ value: WindowDays; label: string }> = [
|
|
{ value: 7, label: "Week (7 days)" },
|
|
{ value: 14, label: "Fortnight (14 days)" },
|
|
{ value: 30, label: "Month (30 days, default)" },
|
|
{ value: 365, label: "Year (365 days, empty days collapsed)" },
|
|
];
|
|
|
|
class MaintenanceCalendarCardEditor extends LitElement {
|
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
|
@state() private _config: CalendarCardConfig = {
|
|
type: "custom:maintenance-supporter-calendar-card",
|
|
};
|
|
|
|
setConfig(config: CalendarCardConfig): void {
|
|
this._config = { ...config };
|
|
}
|
|
|
|
private _valueChanged(key: keyof CalendarCardConfig, value: unknown): void {
|
|
const newConfig = { ...this._config, [key]: value } as CalendarCardConfig;
|
|
// Drop default-equivalent values so saved YAML stays minimal
|
|
if (key === "show_window_chips" && value === true) {
|
|
delete (newConfig as unknown as Record<string, unknown>).show_window_chips;
|
|
}
|
|
if (key === "show_user_filter" && value === true) {
|
|
delete (newConfig as unknown as Record<string, unknown>).show_user_filter;
|
|
}
|
|
if (key === "title" && (!value || (typeof value === "string" && value.trim() === ""))) {
|
|
delete (newConfig as unknown as Record<string, unknown>).title;
|
|
}
|
|
if (key === "user_filter" && value === "") {
|
|
delete (newConfig as unknown as Record<string, unknown>).user_filter;
|
|
}
|
|
this._config = newConfig;
|
|
this.dispatchEvent(
|
|
new CustomEvent("config-changed", {
|
|
detail: { config: newConfig },
|
|
bubbles: true,
|
|
composed: true,
|
|
}),
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const currentWindow = this._config.window_days ?? 30;
|
|
const showChips = this._config.show_window_chips !== false;
|
|
const showUserFilter = this._config.show_user_filter !== false;
|
|
const userFilter = this._config.user_filter ?? "";
|
|
const title = this._config.title ?? "";
|
|
return html`
|
|
<div class="editor">
|
|
<div class="row">
|
|
<label for="title">Title (optional)</label>
|
|
<input
|
|
id="title"
|
|
type="text"
|
|
.value=${title}
|
|
@input=${(e: Event) =>
|
|
this._valueChanged("title", (e.target as HTMLInputElement).value)}
|
|
/>
|
|
</div>
|
|
<div class="row">
|
|
<label for="window">Default window</label>
|
|
<select
|
|
id="window"
|
|
@change=${(e: Event) =>
|
|
this._valueChanged(
|
|
"window_days",
|
|
Number((e.target as HTMLSelectElement).value) as WindowDays,
|
|
)}
|
|
>
|
|
${WINDOW_DAY_OPTIONS.map(
|
|
(o) =>
|
|
html`<option value="${o.value}" ?selected=${o.value === currentWindow}>${o.label}</option>`,
|
|
)}
|
|
</select>
|
|
</div>
|
|
<div class="row toggle">
|
|
<label for="chips">Show window chips inside the card</label>
|
|
<input
|
|
id="chips"
|
|
type="checkbox"
|
|
.checked=${showChips}
|
|
@change=${(e: Event) =>
|
|
this._valueChanged(
|
|
"show_window_chips",
|
|
(e.target as HTMLInputElement).checked,
|
|
)}
|
|
/>
|
|
</div>
|
|
<div class="hint">
|
|
Hide the chips when the card is embedded in a strategy view that
|
|
already serves as the window selector.
|
|
</div>
|
|
<div class="row toggle">
|
|
<label for="userf">Show user filter dropdown</label>
|
|
<input
|
|
id="userf"
|
|
type="checkbox"
|
|
.checked=${showUserFilter}
|
|
@change=${(e: Event) =>
|
|
this._valueChanged(
|
|
"show_user_filter",
|
|
(e.target as HTMLInputElement).checked,
|
|
)}
|
|
/>
|
|
</div>
|
|
<div class="row">
|
|
<label for="userv">Default user filter</label>
|
|
<select
|
|
id="userv"
|
|
@change=${(e: Event) =>
|
|
this._valueChanged(
|
|
"user_filter",
|
|
(e.target as HTMLSelectElement).value,
|
|
)}
|
|
>
|
|
<option value="" ?selected=${userFilter === ""}>All users</option>
|
|
<option value="current_user" ?selected=${userFilter === "current_user"}>
|
|
My tasks (current user)
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
static styles = css`
|
|
:host { display: block; padding: 8px 0; }
|
|
.editor { display: flex; flex-direction: column; gap: 12px; }
|
|
.row { display: flex; flex-direction: column; gap: 4px; }
|
|
.row.toggle {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
label { font-weight: 500; color: var(--primary-text-color); font-size: 14px; }
|
|
input[type="text"], select {
|
|
padding: 8px;
|
|
font-size: 14px;
|
|
background: var(--card-background-color, white);
|
|
color: var(--primary-text-color, black);
|
|
border: 1px solid var(--divider-color, #e0e0e0);
|
|
border-radius: 4px;
|
|
}
|
|
.hint {
|
|
margin-top: -4px;
|
|
font-size: 12px;
|
|
color: var(--secondary-text-color, #666);
|
|
}
|
|
`;
|
|
}
|
|
|
|
if (!customElements.get("maintenance-supporter-calendar-card")) {
|
|
customElements.define(
|
|
"maintenance-supporter-calendar-card",
|
|
MaintenanceCalendarCard,
|
|
);
|
|
}
|
|
if (!customElements.get("maintenance-supporter-calendar-card-editor")) {
|
|
customElements.define(
|
|
"maintenance-supporter-calendar-card-editor",
|
|
MaintenanceCalendarCardEditor,
|
|
);
|
|
}
|
|
|
|
// Register with HACS / customCards so the picker shows it
|
|
const w = window as unknown as {
|
|
customCards?: Array<{
|
|
type: string;
|
|
name: string;
|
|
description: string;
|
|
preview?: boolean;
|
|
}>;
|
|
};
|
|
w.customCards = w.customCards || [];
|
|
// HA's custom-card resolver maps ``custom:X`` → element tag ``X``. Our element
|
|
// is registered as ``maintenance-supporter-calendar-card``, so the customCards
|
|
// type MUST match that exact suffix or the card-picker entry resolves to a
|
|
// non-existent element and the strategy's calendar mode throws a config error.
|
|
const CALENDAR_CARD_TYPE = "maintenance-supporter-calendar-card";
|
|
const alreadyRegistered = w.customCards.some(
|
|
(c) => c.type === CALENDAR_CARD_TYPE,
|
|
);
|
|
if (!alreadyRegistered) {
|
|
w.customCards.push({
|
|
type: CALENDAR_CARD_TYPE,
|
|
name: "Maintenance Supporter — Calendar",
|
|
description:
|
|
"Rolling calendar of maintenance tasks with 7/14/30/365 day windows, source icons, and prediction-confidence pills.",
|
|
preview: true,
|
|
});
|
|
}
|
|
|
|
export {};
|