${this._select(this._t("panel.challenge_scope_label"), "scope", d.scope || "daily", [
{ v: "daily", l: this._t("panel.challenge_scope_daily") },
{ v: "weekly", l: this._t("panel.challenge_scope_weekly") },
])}
${this._select(this._t("panel.challenge_metric_label"), "metric", d.metric || "chores", [
{ v: "chores", l: this._t("panel.challenge_metric_chores") },
{ v: "points", l: this._t("panel.challenge_metric_points", {points_name: pointsName}) },
])}
`,
`
${this._field(this._t("panel.challenge_target_label"), "target", d.target, "number", this._t("panel.challenge_target_hint"))}
${this._field(this._t("panel.quest_bonus_label", {points_name: pointsName}), "bonus_points", d.bonus_points, "number")}
`,
this._iconPickerField(this._t("panel.reward_icon_label"), "icon", d.icon),
children.length > 0 ? `
prefix — issue #573).
if (completionsP) parts.push(this._t("panel.topbar_chore_count", {count: `${completionsP} `}));
if (rewardsP) parts.push(this._t("panel.topbar_reward_count", {count: `${rewardsP} `}));
if (swapsP) parts.push(this._t("panel.topbar_swap_count", {count: `${swapsP} `}));
return `
${this._t("panel.topbar_awaiting_approval", {details: parts.join(" · ")})}
${this._t("panel.btn_review")}
`;
}
_renderBody() {
if (this._loading && !this._state) return `${this._t("panel.loading")}
`;
if (this._error) return `
${this._t("panel.error_failed_to_load")}
${this._esc(this._error)}
${this._t("panel.btn_retry")}
`;
if (!this._state) return `${this._t("panel.error_no_state")}
`;
switch (this._activeTab) {
case "children": return this._renderChildrenTab();
case "activity": return this._renderActivityTab();
case "insights": return this._renderInsightsTab();
case "chores": return this._renderChoresTab();
case "rewards": return this._renderRewardsTab();
case "penalties": return this._renderPenBonTab("penalty");
case "bonuses": return this._renderPenBonTab("bonus");
case "groups": return this._renderGroupsTab();
case "quests": return this._renderQuestsTab();
case "challenges": return this._renderChallengesTab();
case "badges": return this._renderBadgesTab();
case "templates": return this._renderTemplatesTab();
case "notifications": return this._renderNotificationsTab();
case "audit": return this._renderAuditTab();
case "settings": return this._renderSettingsTab();
default: return `${this._t("panel.tab_unknown")}
`;
}
}
/**
* Insight reports (#679). Computed on demand rather than stored — a stale
* cached report is worse than a slow one — so the tab fetches when opened
* and when the window changes.
*/
_renderInsightsTab() {
const view = this._insightView || "fairness";
const switcher = `
${["fairness", "friction", "projection", "health"].map(v => `
${this._t("panel.insights_view_" + v)}
`).join("")}
`;
if (view === "friction") return switcher + this._renderFrictionReport();
if (view === "projection") return switcher + this._renderProjectionReport();
if (view === "health") return switcher + this._renderHealthReport();
return switcher + this._renderFairnessReport();
}
/**
* Friction (#680): which chores aren't working, and what to do about each.
* Deliberately leads with a suggestion rather than just a diagnosis.
*/
_renderFrictionReport() {
const report = this._friction;
if (!report) {
this._loadFriction(this._frictionDays || 30);
return `${this._t("panel.insights_loading")}
${this._t("panel.insights_friction_title")}
${[14, 30, 90].map(d => `
${this._t("panel.insights_last_days", { days: d })}
`).join("")}
${this._t("panel.insights_friction_intro", { start: report.start, end: report.end })}
${report.chores.length === 0 ? `
${this._t("panel.insights_friction_none")}
` : `
${report.problem_count
? this._t("panel.insights_friction_problems", { count: report.problem_count })
: this._t("panel.insights_friction_healthy")}
${this._t("panel.insights_col_chore")}
${this._t("panel.insights_col_done")}
${this._t("panel.insights_col_rate")}
${this._t("panel.insights_col_last")}
${this._t("panel.insights_col_verdict")}
${this._t("panel.insights_col_suggestion")}
${(problems.length ? problems : report.chores).map(c => `
${this._esc(c.name)} ${c.outstanding_misses
? ` ⚠ ${c.outstanding_misses} ` : ""}${c.completed}${c.expected ? ` / ${c.expected}` : ""}
${c.rate === null ? "—" : c.rate + "%"}
${c.days_since === null
? this._t("panel.insights_never")
: this._t("panel.insights_days_ago", { days: c.days_since })}
${this._t("panel.insights_verdict_" + c.verdict)} ${this._t("panel.insights_suggest_" + c.suggestion)}
`).join("")}
${this._t("panel.insights_friction_note")}
`}
`;
}
/**
* Projection (#681): what the week ahead looks like. A ceiling rather than
* a forecast — shared-pool chores are credited to every eligible child,
* because the schedule can't know who will actually get there first.
*/
_renderProjectionReport() {
const report = this._projection;
if (!report) {
this._loadProjection(this._projectionDays || 7);
return `${this._t("panel.insights_loading")}
${this._t("panel.insights_projection_title")}
${[7, 14, 28].map(d => `
${this._t("panel.insights_next_days", { days: d })}
`).join("")}
${this._t("panel.insights_projection_intro", { start: report.start, end: report.end })}
${kids.map(k => `
${this._esc(k.name)}
${this._t("panel.insights_projected_earn", { points: k.points, name: this._esc(pointsName) })}
· ${k.chores} ${this._t(k.chores === 1 ? "panel.insights_chore" : "panel.insights_chores")}
· ${this._t("panel.insights_projected_total", { total: k.projected_total })}
`).join("")}
${report.unassigned_points > 0 ? `
${this._t("panel.insights_projection_unassigned", { points: report.unassigned_points })}
` : ""}
${this._t("panel.insights_col_day")}
${kids.map(k => `${this._esc(k.name)} `).join("")}
${report.by_day.map(d => `
${this._t("panel.day_" + d.weekday.slice(0, 3))} ${d.date.slice(5)} ${cell.chores ? `${cell.points} (${cell.chores}) ` : "—"} `;
}).join("")}
`).join("")}
${this._t("panel.insights_projection_note")}
`;
}
/**
* Health & diagnostics (#682). Every issue carries a severity, a plain
* sentence and where to fix it — a diagnostic that only says "3 problems"
* is one the parent can't act on.
*/
_renderHealthReport() {
const report = this._health;
if (!report) {
this._loadHealth();
return `${this._t("panel.insights_loading")}
${this._t("panel.health_title")}
${this._t("panel.health_recheck")}
${report.healthy
? this._t("panel.health_all_good")
: this._t("panel.health_issues", { count: report.issues.filter(i => i.severity !== "info").length })}
${report.issues.length ? `
${report.issues.map(i => `
${this._t("panel.health_sev_" + i.severity)}
${this._esc(i.message)}
${this._t("panel.health_goto")}
`).join("")}
` : ""}
${Object.entries(counts).map(([key, value]) => `
${value}
${this._t("panel.health_count_" + key)}
`).join("")}
${kb} KB
${this._t("panel.health_count_storage")}
`;
}
async _loadHealth() {
if (this._healthLoading) return;
this._healthLoading = true;
const { ok, res, err } = await this._callWS({ type: "taskmate/reports/health" });
this._healthLoading = false;
if (!ok) { this._showToast("err", err); return; }
this._health = res;
this._render();
}
async _loadProjection(days) {
if (this._projectionLoading) return;
this._projectionLoading = true;
const { ok, res, err } = await this._callWS({ type: "taskmate/reports/projection", days });
this._projectionLoading = false;
if (!ok) { this._showToast("err", err); return; }
this._projection = res;
this._render();
}
async _loadFriction(days) {
if (this._frictionLoading) return;
this._frictionLoading = true;
const { ok, res, err } = await this._callWS({ type: "taskmate/reports/friction", days });
this._frictionLoading = false;
if (!ok) { this._showToast("err", err); return; }
this._friction = res;
this._render();
}
_renderFairnessReport() {
const days = this._insightDays || 7;
const report = this._fairness;
if (!report) {
this._loadFairness(days);
return `${this._t("panel.insights_loading")}
${this._t("panel.insights_fairness_title")}
${windows.map(d => `
${this._t("panel.insights_last_days", { days: d })}
`).join("")}
${this._t("panel.insights_fairness_intro", {
start: report.start, end: report.end, fair: report.fair_share,
})}
${report.total_completions === 0 ? `
${this._t("panel.insights_no_data")}
` : `
${report.balanced
? this._t("panel.insights_balanced")
: this._t("panel.insights_unbalanced")}
${report.children.map(c => `
${this._esc(c.name)}
${c.completions} ${this._t(c.completions === 1 ? "panel.insights_chore" : "panel.insights_chores")}
· ${c.points} ${this._esc(this._state.settings?.points_name || this._t("common.points"))}
· ${c.share_completions}%
${this._t("panel.insights_status_" + c.status)}
`).join("")}
${this._t("panel.insights_fairness_note", { tolerance: report.tolerance })}
`}
`;
}
async _loadFairness(days) {
if (this._fairnessLoading) return;
this._fairnessLoading = true;
const { ok, res, err } = await this._callWS({ type: "taskmate/reports/fairness", days });
this._fairnessLoading = false;
if (!ok) { this._showToast("err", err); return; }
this._fairness = res;
this._render();
}
_searchBox(placeholder) {
return `
✕ ` : ""}
`;
}
_filterByName(items) {
if (!this._filter) return items;
const q = this._filter.toLowerCase();
return items.filter(it => (it.name || "").toLowerCase().includes(q));
}
// -- Children tab ------------------------------------------------------
_renderChildrenTab() {
const all = this._state.children || [];
const children = this._filterByName(all);
const pointsName = this._state.settings.points_name || this._t("common.points");
return `
${all.length > 0 ? this._searchBox(this._t("panel.search_children")) : ""}
${all.length >= 2 ? `${this._t("panel.gift_btn")} ` : ""}
${this._t("panel.btn_add_child")}
${all.length === 0 ? this._emptyState("👨👩👧👦", this._t("panel.empty_children_title"), this._t("panel.empty_children_copy"), "add-child", this._t("panel.btn_add_child")) :
children.length === 0 ? `${this._t("panel.empty_no_match", {kind: this._t("panel.tab_children").toLowerCase(), filter: this._esc(this._filter)})}
${children.map(c => this._renderChildCard(c, pointsName)).join("")}
＋ ${this._t("panel.child_add_tile")}
`}
`;
}
_renderChildCard(child, pointsName) {
return `
${this._mdi(child.avatar)}
${this._esc(child.name || this._t("panel.child_unnamed"))}
${this._idBadge(child.id)}
${child.availability_entity ? `${this._esc(child.availability_entity)}${child.availability_inverted ? ` ${this._t("panel.child_inverted")} ` : ""}` : `${this._t("panel.child_no_availability")}`}${child.unavailability_entity ? ` · ${this._t("panel.child_busy_label")} ${this._esc(child.unavailability_entity)}` : ""}
${this._fmtNum(child.points || 0)}
${this._esc(pointsName)}
${this._fmtNum(child.level || 1)}
${this._t("panel.child_stat_level")}
${this._fmtNum(child.total_points_earned || 0)}
${this._t("panel.child_stat_earned")}
${this._fmtNum(child.total_chores_completed || 0)}
${this._t("panel.child_stat_done")}
`;
}
// -- Activity tab ------------------------------------------------------
_renderActivityTab() {
const pendingCompletions = this._state.pending_completions || [];
const pendingClaims = this._state.pending_reward_claims || [];
const pendingSwaps = this._state.swap_requests || [];
const transactions = this._state.points_transactions || [];
const completions = this._state.completions || [];
const claims = this._state.reward_claims || [];
const childById = Object.fromEntries((this._state.children || []).map(c => [c.id, c]));
const choreById = Object.fromEntries((this._state.chores || []).map(c => [c.id, c]));
const rewardById = Object.fromEntries((this._state.rewards || []).map(r => [r.id, r]));
// Recent activity feed: merge approved completions + claims + transactions
const events = [];
completions.filter(c => c.approved).forEach(c => events.push({
ts: c.approved_at || c.completed_at, kind: "completion",
child: c.child_id === "__parent__" ? "Parent" : ((childById[c.child_id] || {}).name || "?"),
label: `${this._t("panel.activity_completed_chore", {name: (choreById[c.chore_id] || {}).name || this._t("panel.activity_deleted_chore")})}`,
points: c.points_awarded,
}));
claims.filter(c => c.approved).forEach(c => events.push({
ts: c.approved_at || c.claimed_at, kind: "claim",
child: (childById[c.child_id] || {}).name || "?",
label: `${this._t("panel.activity_claimed_reward", {name: (rewardById[c.reward_id] || {}).name || this._t("panel.activity_deleted_reward")})}`,
points: -((rewardById[c.reward_id] || {}).cost || 0),
}));
transactions.forEach(t => events.push({
ts: t.created_at, kind: "manual",
child: (childById[t.child_id] || {}).name || "?",
label: this._translateReason(t.reason) || (t.points >= 0 ? this._t("panel.activity_manual_addition") : this._t("panel.activity_manual_deduction")),
points: t.points,
}));
events.sort((a, b) => (b.ts || "").localeCompare(a.ts || ""));
const recent = events.slice(0, 30);
return `
${this._t("panel.activity_pending_approvals")}
${(pendingCompletions.length + pendingClaims.length + pendingSwaps.length) > 0
? `${pendingCompletions.length + pendingClaims.length + pendingSwaps.length} `
: `${this._t("panel.activity_pending_all_clear")} `}
${pendingCompletions.length > 0
? `${this._t("panel.activity_approve_all")} `
: ""}
${pendingCompletions.length === 0 && pendingClaims.length === 0 && pendingSwaps.length === 0 ? `
${this._t("panel.activity_no_items")}
` : `
${pendingCompletions.map(c => {
const chore = choreById[c.chore_id];
const child = childById[c.child_id];
let choreName = (chore && chore.name) || this._t("panel.activity_deleted_chore");
let chorePoints = chore ? chore.points : 0;
if (c.bonus_subtask_id && chore) {
const sub = (chore.bonus_subtasks || []).find(b => b.id === c.bonus_subtask_id);
if (sub) { choreName = `${chore.name} › ${sub.name}`; chorePoints = sub.points; }
} else if (chore && chore.task_type === "timed" && (c.timed_duration_seconds || 0) > 0) {
// Timed chores accrue points by elapsed-time rate, so the actual
// earned points can be lower than chore.points. Mirror sensor.py.
const rateSeconds = (chore.timed_rate_minutes || 0) * 60;
if (rateSeconds > 0) {
chorePoints = Math.floor(c.timed_duration_seconds / rateSeconds) * (chore.timed_rate_points || 0);
}
}
const photoCap = [choreName, (child && child.name) || "", c.completed_at ? new Date(c.completed_at).toLocaleString([], { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }) : ""].filter(Boolean).join(" · ");
return `
${this._safePhotoUrl(c.photo_url) ? `
` : ""}
${this._t("panel.activity_completed_text", {child: this._esc((child && child.name) || "?"), chore: this._esc(choreName)})}
${this._timeAgo(c.completed_at)} · ${chorePoints} ${this._t("panel.activity_points")}
${this._t("panel.activity_reject")}
${this._t("panel.activity_approve")}
`;
}).join("")}
${pendingClaims.map(c => {
const reward = rewardById[c.reward_id];
const child = childById[c.child_id];
return `
${this._t("panel.activity_claimed_text", {child: this._esc((child && child.name) || "?"), reward: this._esc((reward && reward.name) || this._t("panel.activity_deleted_reward"))})}
${this._timeAgo(c.claimed_at)}${reward ? ` · ${reward.cost} ${this._t("panel.activity_points")}` : ""}
${this._t("panel.activity_reject")}
${this._t("panel.activity_approve")}
`;
}).join("")}
${pendingSwaps.map(sw => {
const chore = choreById[sw.chore_id];
const req = childById[sw.requester_id];
const from = childById[sw.from_child_id];
return `
${this._t("panel.swap_request_text", {child: this._esc((req && req.name) || "?"), chore: this._esc((chore && chore.name) || "?")})}
${from ? this._t("panel.swap_from", {name: this._esc(from.name)}) + " · " : ""}${this._timeAgo(sw.created_at)}
${this._t("panel.activity_reject")}
${this._t("panel.activity_approve")}
`;
}).join("")}
`}
${this._t("panel.activity_recent")}
${recent.length === 0 ? `
${this._t("panel.activity_no_recent")}
` : `
${recent.map(ev => `
${this._esc(this._timeAgo(ev.ts))}
${this._esc(ev.child)} · ${this._esc(ev.label)}
${ev.points >= 0 ? '+' : ''}${ev.points || 0}
`).join("")}
`}
${this._t("panel.activity_audit_log")}
${this._t(transactions.length === 1 ? "panel.activity_transaction_count" : "panel.activity_transaction_count_plural", {count: transactions.length})}
${transactions.length === 0 ? `
${this._t("panel.activity_no_points_transactions")}
` : `
${this._t("panel.activity_table_when")} ${this._t("panel.activity_table_child")} ${this._t("panel.activity_table_points")} ${this._t("panel.activity_table_reason")}
${[...transactions].reverse().map(t => {
const child = childById[t.child_id];
const undoable = typeof t.reason === "string" && (t.reason.startsWith("Penalty: ") || t.reason.startsWith("Bonus: "));
return `
${this._esc(this._timeAgo(t.created_at))}
${this._esc((child && child.name) || "?")}
${t.points >= 0 ? '+' : ''}${t.points} ${this._esc(this._translateReason(t.reason) || "—")}
${undoable ? `
`;
}).join("")}
`}
`;
}
// -- Chores tab --------------------------------------------------------
_sortChoresByDisplayOrder(chores) {
const order = this._state.chore_display_order || [];
if (!order.length) return chores;
const idx = Object.fromEntries(order.map((id, i) => [id, i]));
return [...chores].sort((a, b) => {
const ai = idx[a.id] ?? Number.MAX_SAFE_INTEGER;
const bi = idx[b.id] ?? Number.MAX_SAFE_INTEGER;
return ai - bi;
});
}
_renderChoresTab() {
const raw = this._state.chores || [];
const all = this._sortChoresByDisplayOrder(raw);
const chores = this._filterByName(all);
const childById = Object.fromEntries((this._state.children || []).map(c => [c.id, c]));
return `
${all.length > 0 ? this._searchBox(this._t("panel.search_chores")) : ""}
${this._t("panel.btn_reorder_chores")}
${this._t("panel.btn_bulk_add")}
${this._t("panel.btn_from_template")}
${this._t("panel.btn_save_as_template")}
${all.length > 0 ? `${this._bulkMode ? this._t("panel.bulk_done") : this._t("panel.bulk_select")} ` : ""}
${this._t("panel.btn_add_chore")}
${this._bulkMode && all.length > 0 ? `
${this._t("panel.bulk_selected", { count: this._bulkSel.size })}
${this._t("panel.bulk_enable")}
${this._t("panel.bulk_disable")}
${this._t("panel.bulk_delete")}
${this._t("panel.bulk_reassign_to")}
${this._t("panel.common_all_children")}
${(this._state.children || []).map(c => `${this._esc(c.name)} `).join("")}
${this._t("panel.bulk_apply")}
` : ""}
${all.length === 0 ? this._emptyState("📋", this._t("panel.empty_chores_title"), this._t("panel.empty_chores_copy"), "add-chore", this._t("panel.btn_add_chore")) :
chores.length === 0 ? `${this._t("panel.empty_no_match", {kind: this._t("panel.tab_chores").toLowerCase(), filter: this._esc(this._filter)})}
${this._bulkMode ? "${this._t("panel.chore_table_name")} ${this._t("panel.chore_table_points")} ${this._t("panel.chore_table_period")} ${this._t("panel.chore_table_assigned")} ${this._t("panel.chore_table_current")} ${this._t("panel.chore_table_schedule")} ${this._t("panel.chore_table_approval")}
${chores.map(c => this._renderChoreRow(c, childById)).join("")}
${this._t("panel.chore_tip_rename")}
`}
`;
}
_renderChoreRow(c, childById) {
const renaming = this._inlineRename && this._inlineRename.kind === "chore" && this._inlineRename.id === c.id;
const isRotation = ["alternating", "random", "balanced"].includes(c.assignment_mode);
const curChild = c.assignment_current_child_id || "";
const assignedNames = c.assignment_mode === "unassigned"
? `${this._t("panel.assign_unassigned_short")} `
: (c.assigned_to || []).length === 0
? `${this._t("panel.common_all_children")} `
: this._esc((c.assigned_to || []).map(id => (childById[id] && childById[id].name) || "?").join(", "));
const currentName = isRotation && curChild && childById[curChild]
? `${this._esc(childById[curChild].name)} `
: isRotation ? `— ` : "";
const schedLabel = c.schedule_mode === "recurring"
? this._labelOf(RECURRENCES, c.recurrence) + (c.recurrence_day && c.recurrence_day !== "any_day" ? ` · ${this._labelOf(DAYS, c.recurrence_day)}` : "")
: c.schedule_mode === "one_shot"
? this._t("panel.common_one_shot")
: ((c.due_days || []).length === 0 ? this._t("panel.common_daily") : (c.due_days || []).map(d => this._labelOf(DAYS, d)).join(" · "));
const schedClass = c.schedule_mode === "recurring" ? "tm-pill-accent" : c.schedule_mode === "one_shot" ? "tm-pill-warn" : "tm-pill-success";
const modeBadge = c.assignment_mode && c.assignment_mode !== "everyone"
? `${this._t(`panel.assign_${c.assignment_mode}_short`)} ` : "";
const nameCell = renaming
? `✓
✕ `
: `${this._esc(c.name)} ${c.enabled === false ? ` ${this._t("panel.common_disabled")} ` : ""}${this._idBadge(c.id)}`;
return `
${this._bulkMode ? `
${nameCell}
${renaming ? "" : `
✏
⋮
`}
${c.task_type === "timed" ? `${c.timed_rate_points || 0}/${c.timed_rate_minutes || 1} min` : c.points} ${this._esc(this._timeCategoryLabel(c.time_category))} ${assignedNames} ${modeBadge}
${currentName}
${this._esc(schedLabel)} ${c.requires_approval ? `${this._t("panel.common_yes")} ` : `${this._t("panel.common_no")} `}
`;
}
// -- Rewards tab -------------------------------------------------------
_renderRewardsTab() {
const all = this._state.rewards || [];
const rewards = this._filterByName(all);
const pointsName = this._state.settings.points_name || this._t("common.points");
return `
${all.length > 0 ? this._searchBox(this._t("panel.search_rewards")) : ""}
${this._t("panel.btn_add_reward")}
${all.length === 0 ? this._emptyState("🎁", this._t("panel.empty_rewards_title"), this._t("panel.empty_rewards_copy", {points_name: pointsName.toLowerCase()}), "add-reward", this._t("panel.btn_add_reward")) :
rewards.length === 0 ? `${this._t("panel.empty_no_match", {kind: this._t("panel.tab_rewards").toLowerCase(), filter: this._esc(this._filter)})}
${rewards.map(r => this._renderRewardCard(r, pointsName)).join("")}
＋ ${this._t("panel.reward_add_tile")}
`}
`;
}
_renderRewardCard(r, pointsName) {
const totalPooled = (this._state.pool_allocations || []).filter(a => a.reward_id === r.id).reduce((s, a) => s + (a.allocated_points || 0), 0);
const showProgress = (r.pool_enabled || r.is_jackpot) && r.cost > 0;
const pct = showProgress ? Math.min(100, Math.round(totalPooled / r.cost * 100)) : 0;
return `
${this._mdi(r.icon || "mdi:gift")}
${this._esc(r.name)} ${r.is_jackpot ? `🏆 ${this._t("panel.reward_badge_jackpot")} ` : ""} ${r.pool_enabled ? `${this._t("panel.reward_badge_pool")} ` : ""}
${this._idBadge(r.id)}
${this._esc(r.description || "")}
${this._fmtNum(r.cost)}
${this._t("panel.reward_stat_cost", {points_name: pointsName})}
${r.quantity != null ? `
${r.quantity}
${this._t("panel.reward_stat_remaining")}
` : `
∞
${this._t("panel.reward_stat_unlimited")}
`}
${r.expires_at ? `
${this._esc(r.expires_at)}
${this._t("panel.reward_stat_expires")}
` : ""}
${showProgress ? `
${this._fmtNum(totalPooled)} / ${this._fmtNum(r.cost)}${pct}%
` : ""}
`;
}
// -- Quests tab --------------------------------------------------------
_renderQuestsTab() {
const all = this._state.quests || [];
const quests = this._filterByName(all);
const pointsName = this._state.settings.points_name || this._t("common.points");
const haveChores = (this._state.chores || []).length > 0;
return `
${all.length > 0 ? this._searchBox(this._t("panel.search_quests")) : ""}
${haveChores ? `${this._t("panel.btn_add_quest")} ` : ""}
${!haveChores ? `${this._t("panel.quest_need_chores")}
${this._t("panel.empty_no_match", {kind: this._t("panel.tab_quests").toLowerCase(), filter: this._esc(this._filter)})}
${quests.map(q => this._renderQuestCard(q, pointsName)).join("")}
＋ ${this._t("panel.quest_add_tile")}
`}
`;
}
_renderQuestCard(q, pointsName) {
const choreById = {};
(this._state.chores || []).forEach(c => { choreById[c.id] = c; });
const steps = q.steps || [];
const children = this._state.children || [];
const assigned = (q.assigned_to && q.assigned_to.length)
? children.filter(c => q.assigned_to.includes(c.id)).map(c => c.name)
: [this._t("panel.quest_all_children")];
const stepNames = steps.map((sid, i) => {
const name = choreById[sid] ? choreById[sid].name : this._t("panel.quest_missing_chore");
return `${this._esc(name)} `;
}).join("");
return `
${this._mdi(q.icon || "mdi:map-marker-path")}
${this._esc(q.name)}
${q.repeatable ? `${this._t("panel.quest_badge_repeatable")} ` : ""}
${q.active ? "" : `${this._t("panel.quest_badge_inactive")} `}
${this._idBadge(q.id)}
${this._esc(q.description || "")}
${steps.length}
${this._t("panel.quest_stat_steps")}
${this._fmtNum(q.bonus_points || 0)}
${this._t("panel.quest_stat_bonus", {points_name: pointsName})}
${stepNames}
${this._t("panel.quest_assigned_to")}: ${this._esc(assigned.join(", "))}
`;
}
// -- Challenges tab ----------------------------------------------------
_renderChallengesTab() {
const all = this._state.challenges || [];
const challenges = this._filterByName(all);
const pointsName = this._state.settings.points_name || this._t("common.points");
return `
${all.length > 0 ? this._searchBox(this._t("panel.search_challenges")) : ""}
${this._t("panel.btn_add_challenge")}
${all.length === 0 ? this._emptyState("🏆", this._t("panel.empty_challenges_title"), this._t("panel.empty_challenges_copy"), "add-challenge", this._t("panel.btn_add_challenge")) :
challenges.length === 0 ? `${this._t("panel.empty_no_match", {kind: this._t("panel.tab_challenges").toLowerCase(), filter: this._esc(this._filter)})}
${challenges.map(c => this._renderChallengeCard(c, pointsName)).join("")}
＋ ${this._t("panel.challenge_add_tile")}
`}
`;
}
_renderChallengeCard(c, pointsName) {
const children = this._state.children || [];
const assigned = (c.assigned_to && c.assigned_to.length)
? children.filter(ch => c.assigned_to.includes(ch.id)).map(ch => ch.name)
: [this._t("panel.quest_all_children")];
const scopeLabel = c.scope === "weekly" ? this._t("panel.challenge_scope_weekly") : this._t("panel.challenge_scope_daily");
const metricLabel = c.metric === "points"
? this._t("panel.challenge_metric_points", {points_name: pointsName})
: this._t("panel.challenge_metric_chores");
return `
${this._mdi(c.icon || "mdi:trophy-outline")}
${this._esc(c.name)}
${this._esc(scopeLabel)}
${c.active ? "" : `${this._t("panel.quest_badge_inactive")} `}
${this._idBadge(c.id)}
${this._esc(c.description || "")}
${c.target}
${this._esc(metricLabel)}
${this._fmtNum(c.bonus_points || 0)}
${this._t("panel.quest_stat_bonus", {points_name: pointsName})}
${this._t("panel.quest_assigned_to")}: ${this._esc(assigned.join(", "))}
`;
}
// -- Badges tab --------------------------------------------------------
_renderBadgesTab() {
const allBadges = this._state.badges || [];
const sub = this._badgesSubTab || "catalogue";
const catalogueCount = allBadges.filter(b => b.builtin).length;
const customCount = allBadges.filter(b => !b.builtin).length;
const subTabs = [
{ id: "catalogue", label: this._t("panel.badge_subtab_catalogue", { count: catalogueCount }) },
{ id: "custom", label: this._t("panel.badge_subtab_custom", { count: customCount }) },
{ id: "history", label: this._t("panel.badge_subtab_history") },
];
return `
${sub === "custom" ? `${this._t("panel.badge_add_btn")} ` : ""}
${subTabs.map(s => `${this._esc(s.label)} `).join("")}
${sub === "catalogue" ? this._renderBadgeCatalogueTab(allBadges) : ""}
${sub === "custom" ? this._renderBadgeCustomTab(allBadges) : ""}
${sub === "history" ? this._renderBadgeHistoryTab() : ""}
`;
}
_tierClass(tier) {
return `tm-badge-tier-${(tier || "bronze").toLowerCase()}`;
}
_criteriaLabel(criteria, combinator = "AND") {
if (!criteria || !criteria.length) return this._t("badge.manual_award_only");
const joinKey = combinator === "OR" ? "badge.criteria_or" : "badge.criteria_and";
return criteria.map(c => `${this._t("badge.criteria_" + c.metric)} ${c.operator} ${c.value}`).join(` ${this._t(joinKey)} `);
}
_badgeName(b) {
if (!b.builtin) return b.name;
const key = "badge.name_" + b.id.replace("builtin.", "");
const t = this._t(key);
return t !== key ? t : b.name;
}
_badgeDesc(b) {
if (!b.builtin) return b.description || "";
const key = "badge.desc_" + b.id.replace("builtin.", "");
const t = this._t(key);
return t !== key ? t : (b.description || "");
}
_renderBadgeCatalogueTab(allBadges) {
const builtins = allBadges.filter(b => b.builtin);
if (!builtins.length) return `${this._t("panel.badge_empty_catalogue")}
${this._t("panel.badge_table_badge")} ${this._t("panel.badge_table_tier")} ${this._t("panel.badge_table_criteria")} ${this._t("panel.badge_table_bonus")} ${this._t("panel.badge_table_enabled")}
${builtins.map(b => `
${this._mdi(b.icon)}
${this._esc(this._badgeName(b))}
${this._t("panel.badge_builtin_pill")} ${this._esc(this._badgeDesc(b))}
` : ""}
${this._t("badge.tier_" + (b.tier || "bronze"))} ${this._esc(this._criteriaLabel(b.criteria, b.combinator))}${b.point_bonus ? `+${b.point_bonus}` : "—"}
✏
`).join("")}
`;
}
_renderBadgeCustomTab(allBadges) {
const customs = allBadges.filter(b => !b.builtin);
if (!customs.length) return `
🏅
${this._t("panel.badge_empty_custom_title")}
${this._t("panel.badge_empty_custom_desc")}
${this._t("panel.badge_add_btn")}
`;
return `
${this._t("panel.badge_table_badge")} ${this._t("panel.badge_table_tier")} ${this._t("panel.badge_table_criteria")} ${this._t("panel.badge_table_bonus")} ${this._t("panel.badge_table_enabled")}
${customs.map(b => `
${this._mdi(b.icon || "mdi:medal")}
${this._esc(b.name)} ${this._esc(b.description)}
` : ""}
${this._t("badge.tier_" + (b.tier || "bronze"))} ${this._esc(this._criteriaLabel(b.criteria, b.combinator))}${b.point_bonus ? `+${b.point_bonus}` : "—"}
${this._t("panel.badge_award_btn")}
✏
🗑
`).join("")}
`;
}
_renderBadgeHistoryTab() {
const awards = (this._state.awarded_badges || []).slice().sort((a, b) => (b.earned_at || "").localeCompare(a.earned_at || ""));
const badgeById = Object.fromEntries((this._state.badges || []).map(b => [b.id, b]));
const childById = Object.fromEntries((this._state.children || []).map(c => [c.id, c]));
const rebuildBtn = `${this._t("panel.badge_rebuild_btn")} `;
if (!awards.length) return `
${rebuildBtn}
${this._t("panel.badge_empty_history")}
${rebuildBtn}
${this._t("panel.badge_table_badge")} ${this._t("panel.badge_table_child")} ${this._t("panel.badge_table_when")} ${this._t("panel.badge_table_source")}
${awards.map(a => {
const badge = badgeById[a.badge_id] || {};
const child = childById[a.child_id] || {};
const tierCls = this._tierClass(badge.tier || "bronze");
const srcLabel = a.silent ? this._t("badge.source_silent") : a.manually_awarded ? this._t("badge.source_manual") : this._t("badge.source_auto");
const srcCls = a.silent ? "tm-badge-src-silent" : a.manually_awarded ? "tm-badge-src-manual" : "tm-badge-src-auto";
const when = a.earned_at ? new Date(a.earned_at).toLocaleString() : "—";
return `
${this._mdi(badge.icon || "mdi:medal")}
${this._esc(this._badgeName(badge) || a.badge_id)}
${this._esc(child.name || a.child_id)} ${this._esc(when)}
${srcLabel}
${this._t("panel.badge_revoke_btn")}
`;
}).join("")}
`;
}
// Badge dialog open/save/delete
_openBadgeDialog(id) {
const blank = { name: "", description: "", icon: "mdi:medal", tier: "bronze", point_bonus: 0, notify_on_earn: true, assigned_to: [], criteria: [], builtin: false };
if (id) {
const b = (this._state.badges || []).find(x => x.id === id);
if (!b) return;
this._openDialog({ kind: "badge", mode: "edit", data: { ...blank, ...b, assigned_to: [...(b.assigned_to || [])], criteria: (b.criteria || []).map(c => ({ ...c })) } });
} else {
this._openDialog({ kind: "badge", mode: "add", data: { ...blank } });
}
}
async _doSaveBadge() {
this._syncIconPickers();
const d = this._dialog.data;
if (!d.name || !d.name.trim()) { this._showToast("err", this._t("panel.toast_badge_name_required")); return; }
// validate criteria values
for (const c of (d.criteria || [])) {
if (!BADGE_BOOL_METRICS.includes(c.metric) && (!c.value || Number(c.value) < 1)) {
this._showToast("err", this._t("panel.toast_badge_criterion_invalid")); return;
}
}
const wasAdd = this._dialog.mode === "add";
const base = {
name: d.name.trim(),
description: d.description || "",
icon: d.icon || "mdi:medal",
tier: d.tier || "bronze",
point_bonus: Number(d.point_bonus) || 0,
notify_on_earn: d.notify_on_earn !== false && d.notify_on_earn !== "false",
assigned_to: d.assigned_to || [],
criteria: (d.criteria || []).map(c => ({
metric: c.metric,
operator: BADGE_BOOL_METRICS.includes(c.metric) ? ">=" : (c.operator || ">="),
value: BADGE_BOOL_METRICS.includes(c.metric) ? 1 : Number(c.value),
})),
combinator: d.combinator === "OR" ? "OR" : "AND",
};
let ok, err;
if (wasAdd) {
({ ok, err } = await this._callService("add_badge", base));
} else {
({ ok, err } = await this._callService("update_badge", { badge_id: d.id, ...base }));
}
if (!ok) { this._showToast("err", this._t("panel.toast_badge_save_failed", { error: err })); return; }
this._closeDialog(true);
await this._fetchState();
this._showToast("ok", wasAdd ? this._t("panel.toast_badge_added") : this._t("panel.toast_badge_updated"));
}
async _confirmDeleteBadge(id) {
const b = (this._state.badges || []).find(x => x.id === id);
if (!b) return;
if (!confirm(this._t("panel.badge_confirm_delete", { name: b.name }))) return;
const { ok, err } = await this._callService("remove_badge", { badge_id: id });
if (!ok) { this._showToast("err", this._t("panel.toast_badge_delete_failed", { error: err })); return; }
await this._fetchState();
this._showToast("ok", this._t("panel.toast_badge_deleted"));
}
async _doToggleBadgeEnabled(id, currentlyEnabled) {
const { ok, err } = await this._callService("update_badge", { badge_id: id, enabled: !currentlyEnabled });
if (!ok) { this._showToast("err", this._t("panel.toast_badge_update_failed", { error: err })); return; }
await this._fetchState();
}
_openAwardDialog(badgeId) {
const b = (this._state.badges || []).find(x => x.id === badgeId);
if (!b) return;
this._openDialog({ kind: "award-badge", mode: "award", data: { badge_id: badgeId, badge_name: b.name, child_id: "" } });
}
async _doAwardBadge(badgeId, childId) {
if (!childId) { this._showToast("err", this._t("panel.toast_badge_select_child")); return; }
const { ok, err } = await this._callService("award_badge_manually", { badge_id: badgeId, child_id: childId });
if (!ok) { this._showToast("err", this._t("panel.toast_badge_award_failed", { error: err })); return; }
this._closeDialog(true);
await this._fetchState();
this._showToast("ok", this._t("panel.toast_badge_awarded"));
}
async _doRevokeBadge(awardedBadgeId, badgeName) {
if (!confirm(this._t("panel.badge_confirm_revoke", { name: badgeName }))) return;
const { ok, err } = await this._callService("revoke_badge", { awarded_badge_id: awardedBadgeId });
if (!ok) { this._showToast("err", this._t("panel.toast_badge_revoke_failed", { error: err })); return; }
await this._fetchState();
this._showToast("ok", this._t("panel.toast_badge_revoked"));
}
async _doRebuildBadges() {
if (!confirm(this._t("panel.badge_confirm_rebuild"))) return;
const { ok, err } = await this._callService("rebuild_badges", {});
if (!ok) { this._showToast("err", this._t("panel.toast_badge_rebuild_failed", { error: err })); return; }
await this._fetchState();
this._showToast("ok", this._t("panel.toast_badge_rebuilt"));
}
async _callService(service, data = {}) {
try {
await this._hass.callService("taskmate", service, data);
return { ok: true };
} catch (err) {
return { ok: false, err: (err && err.message) || String(err) };
}
}
// Badge dialog renders
_renderBadgeDialog() {
const d = this._dialog.data;
const isBuiltin = !!d.builtin;
const children = this._state.children || [];
const title = this._dialog.mode === "add" ? this._t("panel.badge_dialog_add_title") : this._t("panel.badge_dialog_edit_title", { name: d.name });
const criteria = d.criteria || [];
return this._dialogShell(title,
[
isBuiltin ? `${this._t("panel.badge_builtin_hint")}
` : "",
!isBuiltin ? this._field(this._t("panel.badge_name_label"), "name", d.name, "text") : "",
!isBuiltin ? this._field(this._t("panel.badge_description_label"), "description", d.description, "text") : "",
`
${!isBuiltin ? this._iconPickerField(this._t("panel.badge_icon_label"), "icon", d.icon) : ""}
${this._select(this._t("panel.badge_tier_label"), "tier", d.tier || "bronze", BADGE_TIERS)}
`,
`
${this._field(this._t("panel.badge_bonus_label"), "point_bonus", d.point_bonus || 0, "number")}
${this._select(this._t("panel.badge_notify_label"), "notify_on_earn", d.notify_on_earn !== false ? "true" : "false", [{ v: "true", l: this._t("panel.badge_notify_yes") }, { v: "false", l: this._t("panel.badge_notify_no") }])}
`,
children.length > 0 ? `
${this._t("panel.badge_assigned_label")}
${children.map(c => `
${this._esc(c.name)}
`).join("")}
${this._t("panel.badge_assigned_hint")}
` : "",
!isBuiltin ? `
${this._t("panel.badge_criteria_label")}
${criteria.length === 0 ? `
${this._t("panel.badge_no_criteria_hint")}
` : ""}
${criteria.map((c, idx) => {
const isBool = BADGE_BOOL_METRICS.includes(c.metric);
return `
${BADGE_METRICS.map(m => `${this._t(m.lk)} `).join("")}
${isBool ? `= ` : `
${BADGE_OPERATORS.map(sym => { const v = BADGE_OP_VALUES[sym]; return `=") === v ? " selected" : ""}>${sym} `; }).join("")}
`}
${isBool ? `true ` : `✕
`;
}).join("")}
${this._t("panel.badge_add_criterion_btn")}
${criteria.length >= 2 ? `
${this._t("panel.badge_combinator_label")}
${this._t("panel.badge_combinator_all")}
${this._t("panel.badge_combinator_any")}
` : ""}
` : "",
].join(""),
`${this._t("panel.badge_cancel_btn")}
${this._t("panel.badge_save_btn")} `
);
}
_renderAwardDialog() {
const d = this._dialog.data;
const children = this._state.children || [];
return this._dialogShell(this._t("panel.badge_dialog_award_title", { name: d.badge_name }),
`
${this._t("panel.badge_award_to_label")}
${this._t("panel.badge_award_select_child")}
${children.map(c => `${this._esc(c.name)} `).join("")}
`,
`${this._t("panel.badge_cancel_btn")}
${this._t("panel.badge_award_btn")} `
);
}
// -- Penalties / Bonuses tab -------------------------------------------
_renderPenBonTab(kind) {
const allItems = (kind === "penalty" ? this._state.penalties : this._state.bonuses) || [];
const items = this._filterByName(allItems);
const childById = Object.fromEntries((this._state.children || []).map(c => [c.id, c]));
const labels = kind === "penalty" ? { plural: this._t("panel.penalty_title"), add: this._t("panel.btn_add_penalty"), icon: "⚠️" } : { plural: this._t("panel.bonus_title"), add: this._t("panel.btn_add_bonus"), icon: "⭐" };
return `
${allItems.length > 0 ? this._searchBox(kind === "penalty" ? this._t("panel.search_penalties") : this._t("panel.search_bonuses")) : ""}
${labels.add}
${allItems.length === 0 ? this._emptyState(labels.icon, kind === "penalty" ? this._t("panel.penalty_empty_title") : this._t("panel.bonus_empty_title"), kind === "penalty" ? this._t("panel.penalty_empty_description") : this._t("panel.bonus_empty_description"), `add-${kind}`, labels.add) :
items.length === 0 ? `${this._t("panel.empty_no_match", {kind: labels.plural.toLowerCase(), filter: this._esc(this._filter)})}
${this._t("panel.penbon_table_name")} ${this._t("panel.penbon_table_points")} ${this._t("panel.penbon_table_assigned")}
${items.map(item => {
const assignedNames = (item.assigned_to || []).length === 0
? `${this._t("panel.common_all_children")} `
: this._esc((item.assigned_to || []).map(id => (childById[id] && childById[id].name) || "?").join(", "));
return `
${this._mdi(item.icon)} ${this._esc(item.name)} ${this._idBadge(item.id)}${item.description ? `${this._esc(item.description)}
` : ""}${kind === "penalty" ? "−" : "+"}${item.points} ${assignedNames}
${this._t("panel.btn_apply")}
✏
🗑
`;
}).join("")}
`}
`;
}
// -- Groups tab --------------------------------------------------------
_renderGroupsTab() {
const all = this._state.task_groups || [];
const groups = this._filterByName(all);
const choreById = Object.fromEntries((this._state.chores || []).map(c => [c.id, c]));
return `
${all.length > 0 ? this._searchBox(this._t("panel.search_groups")) : ""}
${this._t("panel.btn_add_group")}
${all.length === 0 ? this._emptyState("🔗", this._t("panel.empty_groups_title"), this._t("panel.empty_groups_copy"), "add-group", this._t("panel.btn_add_group")) :
groups.length === 0 ? `${this._t("panel.empty_no_match", {kind: this._t("panel.tab_groups").toLowerCase(), filter: this._esc(this._filter)})}
${groups.map(g => `
${this._esc(g.name)}
${this._idBadge(g.id)}
${this._t(`panel.group_policy_${g.policy}_short`)} · ${this._t("panel.group_chore_count", {count: (g.chore_ids || []).length})}
${(g.chore_ids || []).map(id => `${this._esc((choreById[id] && choreById[id].name) || this._t("panel.group_missing_chore", {id}))} `).join("")}
`).join("")}
＋ ${this._t("panel.group_add_tile")}
${this._t("panel.btn_create_template_toolbar")}
${custom.length > 0 ? `
${this._t("panel.template_custom_templates")}
${custom.map(t => this._renderManageTemplateCard(t, false)).join("")}
` : ""}
${custom.length > 0 ? this._t("panel.template_builtin_templates") : this._t("panel.template_builtin_packs")}
${builtin.map(t => this._renderManageTemplateCard(t, true)).join("")}
`;
}
_renderManageTemplateCard(tpl, locked) {
const count = (tpl.chores || []).length;
const pts = (tpl.chores || []).reduce((s, c) => s + (c.points || 0), 0);
return `
${this._esc(tpl.name)}${locked ? ' 🔒 ' : ""}
${this._t("panel.template_pts_total", {count, points: pts})}
${locked ? "" : `${this._t("panel.btn_edit")} `}
${locked ? "" : `${this._t("panel.btn_delete")} `}
`;
}
_renderTemplatePicker() {
const templates = this._state.templates || [];
const builtin = templates.filter(t => t.builtin);
const custom = templates.filter(t => !t.builtin);
return `
${this._t("panel.btn_cancel")}
${this._t("panel.template_builtin_packs")}
${builtin.map(t => this._renderTemplatePickerCard(t)).join("")}
${custom.length > 0 ? `
${this._t("panel.template_custom_packs")}
${custom.map(t => this._renderTemplatePickerCard(t)).join("")}
` : ""}
`;
}
_renderTemplatePickerCard(tpl) {
const count = (tpl.chores || []).length;
const pts = (tpl.chores || []).reduce((s, c) => s + (c.points || 0), 0);
return `
${this._esc(tpl.name)}
${this._t("panel.template_pts_total", {count, points: pts})}
${tpl.builtin ? this._t("panel.template_builtin") : this._t("panel.template_custom")}
${(tpl.chores || []).map(c => `${this._esc(c.name)} `).join("")}
`;
}
_renderTemplatePreview() {
const tpl = this._templateSelected;
if (!tpl) return "";
const chores = this._templateChores;
const totalPts = chores.reduce((s, c) => s + (c.points || 0), 0);
return `
${tpl.builtin ? this._t("panel.template_builtin") : this._t("panel.template_custom")}
${this._t("panel.btn_back")}
${this._t("panel.template_preview_hint")}
${chores.map((c, i) => this._renderTemplateChoreCard(c, i)).join("")}
${chores.length > 0 ? `
${this._t("panel.template_confirm_bar", {count: chores.length, points: totalPts})}
${this._t("panel.template_create_btn", {count: chores.length})}
` : `${this._t("panel.empty_template_all_removed")}
${expanded ? `
${this._t("panel.chore_time_category_label")}
${this._timeCategoryOptions().map(t => `${this._esc(t.l)} `).join("")}
${this._t("panel.template_assignment_mode_label")}
${ASSIGNMENT_MODES.map(m => `${this._t(m.lk).split(" — ")[0]} `).join("")}
${this._t("panel.template_schedule_days_label")}
${DAYS.map(d => `${this._t(d.lk)} `).join("")}
` : ""}
${this._t("panel.template_save_title")}
✕
`;
}
_selectTemplate(templateId) {
const templates = this._state.templates || [];
const tpl = templates.find(t => t.id === templateId);
if (!tpl) return;
this._templateSelected = tpl;
this._templateChores = (tpl.chores || []).map(c => ({ ...c, _expanded: false }));
this._templateView = "preview";
this._render();
}
async _doApplyTemplate() {
const chores = this._templateChores.map(c => {
const { _expanded, ...rest } = c;
return rest;
});
if (chores.length === 0) return;
const { ok, err } = await this._callWS({ type: "taskmate/templates/apply", chores });
if (ok) {
this._showToast("success", this._t("panel.toast_created_chores", {count: chores.length}));
this._templateView = null;
this._templateSelected = null;
this._templateChores = [];
await this._fetchState();
this._activeTab = "chores";
this._render();
} else {
this._showToast("error", err || this._t("panel.toast_template_failed_apply"));
}
}
async _doSaveFromChores() {
const name = this.querySelector('[data-field="tpl_save_name"]')?.value?.trim();
const icon = this.querySelector('[data-field="tpl_save_icon"]')?.value?.trim() || "mdi:clipboard-list";
const checkboxes = this.querySelectorAll('[data-tpl-chore-check]:checked');
const chore_ids = Array.from(checkboxes).map(cb => cb.dataset.tplChoreCheck);
if (!name || chore_ids.length === 0) {
this._showToast("error", this._t("panel.toast_name_enter_select"));
return;
}
const { ok, err } = await this._callWS({ type: "taskmate/templates/save_from_chores", chore_ids, name, icon });
if (ok) {
this._showToast("success", this._t("panel.toast_template_saved", {name}));
this._saveTemplateDialog = false;
await this._fetchState();
this._render();
} else {
this._showToast("error", err || this._t("panel.toast_template_failed_save"));
}
}
async _confirmDeleteTemplate(templateId) {
const templates = this._state.templates || [];
const tpl = templates.find(t => t.id === templateId);
if (!tpl) return;
if (!confirm(this._t("panel.confirm_delete_template", {name: tpl.name}))) return;
const { ok, err } = await this._callWS({ type: "taskmate/templates/delete", template_id: templateId });
if (ok) {
this._showToast("success", this._t("panel.toast_template_deleted"));
await this._fetchState();
} else {
this._showToast("error", err || this._t("panel.toast_template_failed_delete"));
}
}
_openCreateTemplateDialog() {
this._openDialog({
kind: "create-template",
data: { name: "", icon: "mdi:clipboard-list", chores: [{ name: "", points: 5, time_category: "anytime", schedule_mode: "specific_days", due_days: [], requires_approval: false, assignment_mode: "everyone", daily_limit: 1, completion_sound: "coin" }] },
});
}
_openEditTemplateDialog(templateId) {
const templates = this._state.templates || [];
const tpl = templates.find(t => t.id === templateId);
if (!tpl) return;
this._openDialog({
kind: "edit-template",
data: { template_id: templateId, name: tpl.name, icon: tpl.icon || "mdi:clipboard-list", chores: (tpl.chores || []).map(c => ({ ...c })) },
});
}
async _doSaveCreatedTemplate() {
const d = this._dialog?.data;
if (!d || !d.name?.trim() || !d.chores?.length) { this._showToast("error", this._t("panel.toast_name_and_chore_required")); return; }
const { ok, err } = await this._callWS({ type: "taskmate/templates/create", name: d.name.trim(), icon: d.icon || "mdi:clipboard-list", chores: d.chores });
if (ok) { this._showToast("success", this._t("panel.toast_template_created", {name: d.name})); this._closeDialog(true); await this._fetchState(); }
else { this._showToast("error", err || this._t("panel.toast_template_failed_create")); }
}
async _doSaveEditedTemplate() {
const d = this._dialog?.data;
if (!d || !d.template_id || !d.name?.trim()) { this._showToast("error", this._t("panel.toast_name_required_template")); return; }
const { ok, err } = await this._callWS({ type: "taskmate/templates/update", template_id: d.template_id, name: d.name.trim(), icon: d.icon || "mdi:clipboard-list", chores: d.chores || [] });
if (ok) { this._showToast("success", this._t("panel.toast_template_updated")); this._closeDialog(true); await this._fetchState(); }
else { this._showToast("error", err || this._t("panel.toast_template_failed_update")); }
}
async _doUndoTransaction(id) {
if (!id) return;
if (!confirm(this._t("panel.activity_undo_confirm"))) return;
const { ok, err } = await this._callWS({ type: "taskmate/undo_transaction", transaction_id: id });
if (!ok) { this._showToast("err", this._t("panel.toast_save_failed", { error: err })); return; }
await this._fetchState();
this._showToast("ok", this._t("panel.activity_undone"));
}
// -- Audit tab ---------------------------------------------------------
async _doClearAudit() {
if (!confirm(this._t("panel.audit_clear_confirm"))) return;
const { ok, err } = await this._callWS({ type: "taskmate/audit/clear" });
if (!ok) { this._showToast("err", this._t("panel.toast_save_failed", { error: err })); return; }
await this._fetchState();
this._showToast("ok", this._t("panel.audit_cleared"));
}
_renderAuditTab() {
const entries = this._state.audit_log || [];
const rows = entries.map(a => {
let when = a.ts || "";
try { if (a.ts) when = new Date(a.ts).toLocaleString(); } catch (e) {}
return `
${this._esc(when)}
${this._esc(a.user_name || a.user_id || "—")}
${this._esc(a.action || "")}
${this._esc(a.target || "")}
`;
}).join("");
return `
${this._t("panel.tab_audit")} ${this._t("panel.audit_hint")}
${entries.length ? `
` : ""}
${entries.length ? `
${this._t("panel.audit_when")}
${this._t("panel.audit_user")}
${this._t("panel.audit_action")}
${this._t("panel.audit_target")}
${rows}
` : `
${this._t("panel.audit_empty")}
`}
`;
}
// -- Settings tab ------------------------------------------------------
_renderSettingsTab() {
const s = this._state.settings || {};
const notifyServices = Object.keys((this._hass && this._hass.services && this._hass.services.notify) || {});
const notifyOptions = [
{ v: "", l: this._t("panel.settings_notify_none") },
...notifyServices.map(k => ({ v: `notify.${k}`, l: `notify.${k}` })),
];
return `
${this._t("panel.settings_currency_title")}
${this._t("panel.settings_currency_hint")}
${this._t("panel.settings_points_icon_label")}${this._t("panel.settings_points_icon_hint")}
${this._t("panel.settings_card_design_label")}${this._t("panel.settings_card_design_hint")}
${["classic","playroom","console","cleanpro"].map(v => `${this._esc(this._t("common.design." + v))} `).join("")}
${this._t("panel.settings_parents_title")}
${this._t("panel.settings_parents_hint")}
${(this._haUsers || []).filter(u => !u.is_admin).map(u => `
${this._esc(u.name)}
`).join("")
|| `
${this._t("panel.settings_parents_empty")}
`}
${this._t("panel.settings_history_title")}
${this._t("panel.settings_streak_reset_label")}${this._t("panel.settings_streak_reset_hint")}
${STREAK_MODES.map(m => `${this._esc(this._t(m.lk))} `).join("")}
${this._t("panel.settings_streak_all_chores_label")}${this._t("panel.settings_streak_all_chores_hint")}
${this._t("panel.settings_surprise_enabled_label")}${this._t("panel.settings_surprise_enabled_hint")}
${this._t("panel.settings_unlock_allowlist")}${this._t("panel.settings_unlock_allowlist_hint")}
${(s.unlock_allowlist || []).map(e => `
${this._esc(e)}
✕
`).join("") || `${this._t("panel.settings_unlock_allowlist_empty")} `}
${this._entityPickerField("", "_allowlist_pick", "",
["switch", "light", "media_player", "input_boolean", "automation", "script", "fan", "climate"],
this._t("panel.settings_unlock_allowlist_add"))}
${this._t("panel.settings_roulette_enabled")}${this._t("panel.settings_roulette_enabled_hint")}
${this._t("panel.settings_decay_enabled_label")}${this._t("panel.settings_decay_enabled_hint")}
${this._t("panel.settings_allow_negative_label")}${this._t("panel.settings_allow_negative_hint")}
${this._t("panel.settings_spendcap_enabled_label")}${this._t("panel.settings_spendcap_enabled_hint")}
${this._t("panel.settings_interest_enabled_label")}${this._t("panel.settings_interest_enabled_hint")}
${this._renderTimePeriodsSection()}
${this._renderVacationSection()}
${this._t("panel.settings_bonuses_title")}
${this._t("panel.settings_streak_milestones_label")}${this._t("panel.settings_streak_milestones_hint")}
${this._t("panel.settings_perfect_week_label")}${this._t("panel.settings_perfect_week_hint")}
${this._t("panel.settings_perfect_week_all_chores_label")}${this._t("panel.settings_perfect_week_all_chores_hint")}
${this._t("panel.settings_celebration_notify_label")}${this._t("panel.settings_celebration_notify_hint")}
${this._t("panel.settings_celebration_tier_label")}${this._t("panel.settings_celebration_tier_hint")}
${this._t("panel.settings_celebration_tier_1")}
${this._t("panel.settings_celebration_tier_2")}
${this._t("panel.settings_celebration_tier_3")}
${this._t("panel.settings_avatars_title")}
${this._t("panel.settings_avatars_label")}${this._t("panel.settings_avatars_hint", {count: (this._state.avatar_catalog || []).length})}
${this._t("panel.settings_avatars_btn")}
${this._t("panel.settings_chore_rotation_title")}
${this._t("panel.settings_skip_confirm_label")}${this._t("panel.settings_skip_confirm_hint")}
${this._t("panel.settings_notifications_title")}
${this._t("panel.settings_notify_label")}${this._t("panel.settings_notify_hint")}
${notifyOptions.map(o => `${this._esc(o.l)} `).join("")}
${this._t("panel.settings_show_ids_label")} ${this._t("panel.settings_show_ids_hint")}
${this._t("panel.settings_show_ids_label")}
${this._t("panel.backup_title")} ${this._t("panel.backup_hint")}
${this._t("panel.family_goal_title")} ${this._t("panel.family_goal_hint")}
${this._t("panel.family_goal_enabled")}
${this._t("panel.allowance_title")} ${this._t("panel.allowance_hint")}
${this._t("panel.allowance_enabled")}
${(this._state.allowance_payouts || []).length ? `
${this._t("panel.allowance_ledger")}
${(this._state.allowance_payouts || []).slice(0, 10).map(p => `
${this._esc((p.date || "").slice(0, 10))}
${this._esc(p.child_name || "")}
${p.points} → ${this._esc(p.currency || "")}${this._esc(String(p.amount))}
`).join("")}
` : ""}
${this._t("panel.ics_title")} ${this._t("panel.ics_hint")}
${this._icsUrl ? `
` : `
`}
`;
}
// -- Notifications tab -------------------------------------------------
_renderNotificationsTab() {
if (!this._notifState) {
return `${this._t("panel.notif_loading")}
${this._renderNotifRecipientsSection(ns, services)}
${this._renderNotifMatrixSection(ns, recipients)}
${this._renderNotifCustomSection(ns, recipients)}
${this._t("panel.notif_power_user_note_title")}
${this._t("panel.notif_power_user_note_body")}
`;
}
_renderNotifRecipientsSection(ns, services) {
const optTags = (selected) => {
const opts = [`${this._t("panel.notif_none")} `];
for (const s of services) opts.push(`${this._esc(s)} `);
return opts.join("");
};
return `
${this._t("panel.notif_section_recipients")}
${this._t("panel.notif_section_recipients_desc")}
${this._t("panel.notif_recipients_children")}
${ns.recipients.children.map(c => {
const cid = c.id.replace(/^child:/, "");
return `
`;}).join("")}
${this._t("panel.notif_recipients_parents")}
${ns.recipients.parents.map(p => `
${optTags(p.notify_service)}
×
`).join("")}
+ ${this._t("panel.notif_add_parent")}
`;
}
_renderNotifMatrixSection(ns, recipients) {
return `
${this._t("panel.notif_section_matrix")}
${this._t("panel.notif_section_matrix_desc")}
${this._t("panel.notif_matrix_col_notification")}
${recipients.map(r => `${this._esc(r.name)} `).join("")}
${ns.types.map(t => this._renderNotifMatrixRow(t, ns.config[t.id] || { master_enabled: false, routes: {} }, recipients, ns.settings)).join("")}
`;
}
_renderNotifMatrixRow(t, c, recipients, settings) {
const active = !!c.master_enabled;
return `
${recipients.map(r => this._renderNotifMatrixCell(t, c, r)).join("")}
`;
}
_renderNotifMatrixCell(t, c, r) {
const valid =
t.audience === "both" ||
(t.audience === "child" && r.kind === "child") ||
(t.audience === "parent" && r.kind === "parent");
if (!valid) return `— `;
const route = c.routes[r.id] || { enabled: false, time: null };
return `
`;
}
_renderNotifCustomSection(ns, recipients) {
return `
${this._t("panel.notif_section_custom")}
+ ${this._t("panel.notif_add_custom")}
${this._t("panel.notif_section_custom_desc")}
${(ns.custom || []).length === 0 ? `
${this._t("panel.notif_custom_empty")}
` : ""}
${(ns.custom || []).map(n => this._renderNotifCustomCard(n, recipients)).join("")}
`;
}
_renderNotifCustomCard(n, recipients) {
const days = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
return `
`;
}
// -- Dialogs -----------------------------------------------------------
_openGiftDialog() {
const children = this._state.children || [];
if (children.length < 2) return;
this._openDialog({ kind: "gift", data: { from: children[0].id, to: children[1].id, points: 10 } });
}
_renderGiftDialog() {
const d = this._dialog.data;
const opts = (this._state.children || []).map(c => ({ v: c.id, l: c.name }));
return this._dialogShell(this._t("panel.gift_dialog_title"),
[
this._select(this._t("panel.gift_from"), "from", d.from, opts),
this._select(this._t("panel.gift_to"), "to", d.to, opts),
this._field(this._t("panel.gift_amount"), "points", d.points, "number"),
].join(""),
`${this._t("panel.btn_cancel")}
${this._t("panel.gift_send")} `
);
}
async _doGiftPoints() {
const d = this._dialog.data;
const pts = Number(d.points) || 0;
if (!d.from || !d.to || d.from === d.to) { this._showToast("err", this._t("panel.gift_err_same")); return; }
if (pts < 1) { this._showToast("err", this._t("panel.gift_err_amount")); return; }
const { ok, err } = await this._callWS({ type: "taskmate/gift_points", from_child_id: d.from, to_child_id: d.to, points: pts });
if (!ok) { this._showToast("err", this._t("panel.toast_save_failed", { error: err })); return; }
this._closeDialog(true);
await this._fetchState();
this._showToast("ok", this._t("panel.gift_sent"));
}
_openSwapDialog(choreId) {
const c = (this._state.chores || []).find(x => x.id === choreId);
if (!c) return;
const cur = c.assignment_current_child_id || "";
const opts = (this._state.children || []).filter(ch => ch.id !== cur);
this._openDialog({ kind: "swap", data: { chore_id: choreId, chore_name: c.name, requester: (opts[0] && opts[0].id) || "" } });
}
_renderSwapDialog() {
const d = this._dialog.data;
const c = (this._state.chores || []).find(x => x.id === d.chore_id) || {};
const cur = c.assignment_current_child_id || "";
const opts = (this._state.children || []).filter(ch => ch.id !== cur).map(ch => ({ v: ch.id, l: ch.name }));
return this._dialogShell(this._t("panel.swap_dialog_title", { chore: d.chore_name }),
this._select(this._t("panel.swap_requester"), "requester", d.requester, opts),
`${this._t("panel.btn_cancel")}
${this._t("panel.swap_create")} `
);
}
async _doRequestSwap() {
const d = this._dialog.data;
if (!d.requester) { this._showToast("err", this._t("panel.swap_pick_child")); return; }
const { ok, err } = await this._callWS({ type: "taskmate/request_swap", chore_id: d.chore_id, requester_id: d.requester });
if (!ok) { this._showToast("err", this._t("panel.toast_save_failed", { error: err })); return; }
this._closeDialog(true); await this._fetchState();
this._showToast("ok", this._t("panel.swap_requested"));
}
async _doSwap(action, reqId) {
const type = action === "approve" ? "taskmate/approve_swap" : "taskmate/reject_swap";
const { ok, err } = await this._callWS({ type, request_id: reqId });
if (!ok) { this._showToast("err", this._t("panel.toast_save_failed", { error: err })); return; }
await this._fetchState();
this._showToast("ok", this._t(action === "approve" ? "panel.swap_approved" : "panel.swap_rejected"));
}
_renderDialog() {
if (this._dialog.kind === "swap") return this._renderSwapDialog();
if (this._dialog.kind === "gift") return this._renderGiftDialog();
if (this._dialog.kind === "child") return this._renderChildDialog();
if (this._dialog.kind === "chore") return this._renderChoreDialog();
if (this._dialog.kind === "reward") return this._renderRewardDialog();
if (this._dialog.kind === "penalty") return this._renderPenBonDialog("penalty");
if (this._dialog.kind === "bonus") return this._renderPenBonDialog("bonus");
if (this._dialog.kind === "group") return this._renderGroupDialog();
if (this._dialog.kind === "quest") return this._renderQuestDialog();
if (this._dialog.kind === "avatar-catalog") return this._renderAvatarCatalogDialog();
if (this._dialog.kind === "challenge") return this._renderChallengeDialog();
if (this._dialog.kind === "apply-penalty") return this._renderApplyDialog("penalty");
if (this._dialog.kind === "apply-bonus") return this._renderApplyDialog("bonus");
if (this._dialog.kind === "bulk-chore") return this._renderBulkChoreDialog();
if (this._dialog.kind === "reorder") return this._renderReorderDialog();
if (this._dialog.kind === "create-template" || this._dialog.kind === "edit-template") return this._renderCreateEditTemplateDialog();
if (this._dialog.kind === "badge") return this._renderBadgeDialog();
if (this._dialog.kind === "award-badge") return this._renderAwardDialog();
return "";
}
_renderCreateEditTemplateDialog() {
const d = this._dialog.data;
const isEdit = this._dialog.kind === "edit-template";
return `
${isEdit ? this._t("panel.template_edit_title") : this._t("panel.template_create_title")}
✕
${this._t("panel.template_chores_in_template")}
${(d.chores || []).map((c, i) => `
${this._esc(c.name || this._t("panel.template_unnamed"))}
${this._t("panel.pts_display", {count: c.points || 0})}
✕
${this._t("panel.chore_time_category_label")}
${this._timeCategoryOptions().map(t => `${this._esc(t.l)} `).join("")}
${this._t("panel.template_schedule_label")}
${SCHEDULE_MODES.map(s => `${this._t(s.lk)} `).join("")}
`).join("")}
${this._t("panel.btn_add_chore_template")}
`;
}
_renderChildDialog() {
const d = this._dialog.data;
const hasAvail = !!(d.availability_entity && d.availability_entity.trim());
const hasAway = hasAvail || !!(d.unavailability_entity && d.unavailability_entity.trim());
return this._dialogShell(this._dialog.mode === "add" ? this._t("panel.dialog_add_child") : this._t("panel.dialog_edit_child"),
[
this._field(this._t("panel.child_name_label"), "name", d.name, "text", this._t("panel.child_name_placeholder")),
this._iconPickerField(this._t("panel.child_avatar_label"), "avatar", d.avatar),
this._entityPickerField(this._t("panel.child_availability_label"), "availability_entity", d.availability_entity, ["binary_sensor", "sensor", "input_boolean", "person"],
this._t("panel.child_availability_hint")),
hasAvail ? this._switch(this._t("panel.child_invert_label"), "availability_inverted", d.availability_inverted,
this._t("panel.child_invert_hint")) : "",
this._entityPickerField(this._t("panel.child_unavailability_label"), "unavailability_entity", d.unavailability_entity, ["binary_sensor", "sensor", "input_boolean", "person", "calendar"],
this._t("panel.child_unavailability_hint")),
hasAway ? this._switch(this._t("panel.child_pause_streak_label"), "pause_streak_when_unavailable", d.pause_streak_when_unavailable,
this._t("panel.child_pause_streak_hint")) : "",
this._select(
this._t("panel.child_link_user_label"), "linked_user_id", d.linked_user_id || "",
[{ v: "", l: this._t("panel.child_link_user_none") }].concat(
(this._haUsers || []).map(u => ({ v: u.id, l: u.is_admin ? `${u.name} (admin)` : u.name }))
),
this._t("panel.child_link_user_hint")),
].join(""),
`${this._t("panel.btn_cancel")}
${this._t("panel.btn_save")} `
);
}
_renderChoreDialog() {
const d = this._dialog.data;
const children = this._state.children || [];
const groups = this._state.task_groups || [];
const memberInGroup = (d.id && groups.find(g => (g.chore_ids || []).includes(d.id))) || null;
const showSpecificDays = d.schedule_mode === "specific_days";
const showRecurring = d.schedule_mode === "recurring";
const showRotation = ["alternating", "random", "balanced"].includes(d.assignment_mode);
const isUnassigned = d.assignment_mode === "unassigned";
const calendarEntities = Object.keys((this._hass && this._hass.states) || {})
.filter(id => id.startsWith("calendar."))
.sort();
const isTimedTask = d.task_type === "timed";
return this._dialogShell(this._dialog.mode === "add" ? this._t("panel.dialog_add_chore") : this._t("panel.dialog_edit_chore"),
[
this._field(this._t("panel.chore_name_label"), "name", d.name, "text"),
`
${this._field(this._t("panel.chore_description_label"), "description", d.description, "text")}
${this._iconPickerField(this._t("panel.chore_icon_label"), "icon", d.icon)}
`,
this._select(this._t("panel.chore_task_type_label"), "task_type", d.task_type || "standard", [
{ v: "standard", l: this._t("panel.chore_task_type_standard") },
{ v: "timed", l: this._t("panel.chore_task_type_timed") },
], "", true),
isTimedTask ? `
${this._field(this._t("panel.chore_points_per_window_label"), "timed_rate_points", d.timed_rate_points || 10, "number")}
${this._field(this._t("panel.chore_window_minutes_label"), "timed_rate_minutes", d.timed_rate_minutes || 5, "number")}
${this._field(this._t("panel.chore_daily_cap_label"), "timed_max_daily_minutes", d.timed_max_daily_minutes || 0, "number")}
${this._field(this._t("panel.chore_daily_limit_label"), "daily_limit", d.daily_limit, "number")}
` : `
${this._field(this._t("panel.chore_points_label"), "points", d.points, "number")}
${d.assignment_mode === "first_come" ? "" : this._field(this._t("panel.chore_daily_limit_label"), "daily_limit", d.daily_limit, "number")}
`,
this._select(this._t("panel.chore_assignment_mode_label"), "assignment_mode", d.assignment_mode, ASSIGNMENT_MODES,
this._t("panel.chore_assignment_mode_hint"), true),
!isUnassigned ? (children.length > 0 ? `
${this._t("panel.chore_assign_label")}
${children.map(c => `
${this._esc(c.name)}
`).join("")}
${this._t("panel.chore_assign_hint")}
` : `${this._t("panel.chore_assign_no_children")}
`) : "",
(this._state.chores || []).filter(x => x.id !== d.id).length > 0 ? `
${this._t("panel.chore_depends_label")}
${(this._state.chores || []).filter(x => x.id !== d.id).map(c => `
${this._esc(c.name)}
`).join("")}
${this._t("panel.chore_depends_hint")}
` : "",
showRotation && children.length > 0 ? this._select(
this._t("panel.chore_rotation_label"), "manual_start_child_id", d.manual_start_child_id,
[{ v: "", l: this._t("panel.chore_rotation_no_override") }, ...children.map(c => ({ v: c.id, l: c.name }))],
this._t("panel.chore_rotation_hint")
) : "",
this._select(this._t("panel.chore_time_category_label"), "time_category", d.time_category, this._timeCategoryOptions()),
this._field(this._t("panel.chore_claim_allowance_label"), "claim_allowance_minutes", d.claim_allowance_minutes, "number",
this._t("panel.chore_claim_allowance_hint")),
this._select(this._t("panel.chore_schedule_mode_label"), "schedule_mode", d.schedule_mode, SCHEDULE_MODES, "", true),
showSpecificDays ? `
${this._t("panel.chore_days_label")}
${DAYS.map(day => `
${this._t(day.lk)}
`).join("")}
` : "",
showRecurring ? `
${this._select(this._t("panel.chore_recurrence_label"), "recurrence", d.recurrence, RECURRENCES)}
${this._field(this._t("panel.chore_recurrence_day_label"), "recurrence_day", d.recurrence_day, "text", this._t("panel.chore_recurrence_day_hint"))}
${this._dateField(this._t("panel.chore_recurrence_start_label"), "recurrence_start", d.recurrence_start, this._t("panel.chore_recurrence_start_hint"))}
${this._select(this._t("panel.chore_first_occurrence_label"), "first_occurrence_mode", d.first_occurrence_mode, FIRST_OCCURRENCE)}
` : "",
this._select(this._t("panel.chore_completion_sound_label"), "completion_sound", d.completion_sound, COMPLETION_SOUNDS.map(s => ({ v: s, l: s }))),
this._select(this._t("panel.chore_difficulty_label"), "difficulty", d.difficulty || "medium", [
{ v: "easy", l: this._t("panel.difficulty_easy") },
{ v: "medium", l: this._t("panel.difficulty_medium") },
{ v: "hard", l: this._t("panel.difficulty_hard") },
]),
this._dateField(this._t("panel.chore_expires_label"), "expires_on", d.expires_on, this._t("panel.chore_expires_hint")),
`
${this._field(this._t("panel.chore_due_time_label"), "due_time", d.due_time, "time", this._t("panel.chore_due_time_hint"))}
${this._field(this._t("panel.chore_early_bonus_label"), "early_bonus", d.early_bonus, "number")}
${this._field(this._t("panel.chore_late_penalty_label"), "late_penalty", d.late_penalty, "number")}
`,
this._switch(this._t("panel.chore_approval_label"), "requires_approval", d.requires_approval),
this._switch(this._t("panel.chore_require_photo_label"), "require_photo", d.require_photo,
this._t("panel.chore_require_photo_hint")),
this._switch(this._t("panel.chore_require_availability"), "require_availability", d.require_availability,
this._t("panel.chore_require_availability_hint")),
this._switch(this._t("panel.chore_mandatory_label"), "mandatory", d.mandatory,
this._t("panel.chore_mandatory_hint"), true),
d.mandatory ? this._field(this._t("panel.chore_mandatory_penalty_label"), "mandatory_penalty_points",
d.mandatory_penalty_points, "number", this._t("panel.chore_mandatory_penalty_hint")) : "",
memberInGroup ? `
${this._t("panel.chore_group_hint", {name: this._esc(memberInGroup.name), policy: memberInGroup.policy})}
` : "",
`
${this._t("panel.chore_advanced_bonus_subtasks")}
${this._t("panel.chore_advanced_bonus_subtasks_hint")}
${(d.bonus_subtasks || []).map((b, idx) => `
`).join("")}
${this._t("panel.btn_add_bonus_subtask")}
`,
`
${this._t("panel.chore_advanced_visibility")}
${this._entityPickerField(this._t("panel.chore_vis_entity_label"), "visibility_entity", d.visibility_entity, ["binary_sensor", "sensor", "switch", "input_boolean", "input_select"],
this._t("panel.chore_vis_entity_hint"))}
${this._select(this._t("panel.chore_vis_operator_label"), "visibility_operator", d.visibility_operator, VISIBILITY_OPS)}
${this._field(this._t("panel.chore_vis_value_label"), "visibility_state", d.visibility_state, "text", this._t("panel.chore_vis_value_hint"))}
${this._t("panel.chore_calendar_label")}
${calendarEntities.length === 0 ? `
${this._t("panel.chore_calendar_no_entities")} ` : `
${calendarEntities.map(cid => `
${this._esc(cid)}
`).join("")}
${this._t("panel.chore_calendar_hint")}
`}
${this._switch(this._t("panel.chore_enabled_label"), "enabled", d.enabled !== false)}
`,
this._dialog.mode === "edit" ? this._renderScheduledChanges(d) : "",
`
${this._t("panel.chore_advanced_weather")}
${this._t("panel.chore_weather_intro")}
${this._entityPickerField(this._t("panel.chore_weather_entity_label"), "weather_entity", d.weather_entity, ["weather"],
this._t("panel.chore_weather_entity_hint"))}
${d.weather_entity ? `
${this._t("panel.chore_weather_conditions_label")}
${WEATHER_CONDITIONS.map(w => `
`).join("")}
${this._t("panel.chore_weather_conditions_hint")}
${this._field(this._t("panel.chore_weather_temp_min_label"), "weather_temp_min", d.weather_temp_min, "number", this._t("panel.chore_weather_temp_min_hint"))}
${this._field(this._t("panel.chore_weather_temp_max_label"), "weather_temp_max", d.weather_temp_max, "number", this._t("panel.chore_weather_temp_max_hint"))}
${this._field(this._t("panel.chore_weather_wind_max_label"), "weather_wind_max", d.weather_wind_max, "number", this._t("panel.chore_weather_wind_max_hint"))}
${this._t("panel.chore_weather_failopen_hint")}
` : ""}
`,
].join(""),
`${this._t("panel.btn_cancel")}
${this._t("panel.btn_save")} `
);
}
/**
* Scheduled config changes (#675) — queue an edit for a future date.
* Edit-only: a chore has to exist before a change can be queued against it.
*/
_renderScheduledChanges(d) {
const pending = (this._state.scheduled_changes || [])
.filter(c => c.chore_id === d.id && !c.applied)
.sort((a, b) => a.apply_on.localeCompare(b.apply_on));
const applied = (this._state.scheduled_changes || [])
.filter(c => c.chore_id === d.id && c.applied)
.sort((a, b) => b.apply_on.localeCompare(a.apply_on))
.slice(0, 5);
const draft = this._dialog._schedDraft || {};
const open = this._dialog._openAdvanced?.has("scheduled");
const children = this._state.children || [];
const describe = (changes) => Object.entries(changes || {})
.map(([f, v]) => {
const label = this._t("panel.sched_field_" + f);
const value = f === "assigned_to"
? (v || []).map(id => this._esc((children.find(c => c.id === id) || {}).name || id)).join(", ")
|| this._t("panel.sched_value_nobody")
: Array.isArray(v) ? v.join(", ")
: typeof v === "boolean" ? this._t(v ? "panel.sched_value_yes" : "panel.sched_value_no")
: this._esc(String(v));
return `${label}: ${value} `;
}).join(" · ");
return `
${this._t("panel.chore_advanced_scheduled")}${pending.length ? ` ${pending.length} ` : ""}
${this._t("panel.chore_scheduled_intro")}
${pending.length ? `
${pending.map(c => `
${this._esc(c.apply_on)}
${describe(c.changes)}${c.note ? `
${this._esc(c.note)}
` : ""}
✕
`).join("")}
` : `
${this._t("panel.chore_scheduled_none")} `}
${this._dateField(this._t("panel.sched_date_label"), "_sched_apply_on", draft.apply_on || "")}
${this._select(this._t("panel.sched_field_label"), "_sched_field", draft.field || "points",
SCHEDULED_FIELDS.map(f => ({ v: f.v, lk: "panel.sched_field_" + f.v })))}
${this._renderScheduledValueInput(draft, children)}
${this._field(this._t("panel.sched_note_label"), "_sched_note", draft.note || "", "text",
this._t("panel.sched_note_hint"))}
${this._t("panel.btn_add_scheduled")}
${applied.length ? `
${this._t("panel.chore_scheduled_history")}
${applied.map(c => `
${this._esc(c.apply_on)}
${describe(c.changes)}
✓
`).join("")}
` : ""}
`;
}
/** The value control depends on which field is being scheduled. */
_renderScheduledValueInput(draft, children) {
const field = draft.field || "points";
const spec = SCHEDULED_FIELDS.find(f => f.v === field) || SCHEDULED_FIELDS[0];
if (spec.kind === "children") {
const picked = draft.value_list || [];
return `
${this._t("panel.sched_value_label")}
${children.map(c => `
${this._esc(c.name)}
`).join("")}
`;
}
if (spec.kind === "days") {
const picked = draft.value_list || [];
return `
${this._t("panel.sched_value_label")}
${DAYS.map(day => `
${this._t(day.lk)}
`).join("")}
`;
}
if (spec.kind === "bool") {
return this._select(this._t("panel.sched_value_label"), "_sched_value", draft.value ?? "true",
[{ v: "true", lk: "panel.sched_value_yes" }, { v: "false", lk: "panel.sched_value_no" }]);
}
if (spec.kind === "select") {
return this._select(this._t("panel.sched_value_label"), "_sched_value", draft.value ?? spec.options[0].v, spec.options);
}
return this._field(this._t("panel.sched_value_label"), "_sched_value", draft.value ?? "",
spec.kind === "number" ? "number" : "text");
}
_schedDraft() {
if (!this._dialog._schedDraft) this._dialog._schedDraft = { field: "points", value_list: [] };
return this._dialog._schedDraft;
}
_toggleScheduledListValue(value) {
const draft = this._schedDraft();
const list = [...(draft.value_list || [])];
const i = list.indexOf(value);
if (i >= 0) list.splice(i, 1); else list.push(value);
draft.value_list = list;
this._render();
}
async _saveAllowlist(list) {
const { ok, err } = await this._callWS({ type: "taskmate/update_settings", unlock_allowlist: list });
if (!ok) { this._showToast("err", err); return; }
await this._fetchState();
this._render();
}
_removeFromAllowlist(entityId) {
const current = (this._state.settings || {}).unlock_allowlist || [];
this._saveAllowlist(current.filter(e => e !== entityId));
}
_addToAllowlist(entityId) {
const current = (this._state.settings || {}).unlock_allowlist || [];
if (!entityId || current.includes(entityId)) return;
this._saveAllowlist([...current, entityId]);
}
async _addScheduledChange() {
const d = this._dialog.data;
const draft = this._schedDraft();
const spec = SCHEDULED_FIELDS.find(f => f.v === (draft.field || "points")) || SCHEDULED_FIELDS[0];
if (!draft.apply_on) { this._showToast("err", this._t("panel.toast_sched_date_required")); return; }
let value;
if (spec.kind === "children" || spec.kind === "days") {
value = draft.value_list || [];
} else if (spec.kind === "bool") {
value = (draft.value ?? "true") === "true";
} else if (spec.kind === "number") {
if (draft.value === "" || draft.value == null) { this._showToast("err", this._t("panel.toast_sched_value_required")); return; }
value = Number(draft.value);
} else {
value = draft.value ?? "";
}
const { ok, err } = await this._callWS({
type: "taskmate/scheduled/add",
chore_id: d.id,
apply_on: draft.apply_on,
changes: { [spec.v]: value },
note: draft.note || "",
});
if (!ok) { this._showToast("err", err); return; }
this._dialog._schedDraft = { field: spec.v, value_list: [] };
this._showToast("ok", this._t("panel.toast_sched_added"));
await this._fetchState();
this._render();
}
async _removeScheduledChange(changeId) {
const { ok, err } = await this._callWS({ type: "taskmate/scheduled/remove", change_id: changeId });
if (!ok) { this._showToast("err", err); return; }
this._showToast("ok", this._t("panel.toast_sched_removed"));
await this._fetchState();
this._render();
}
_renderRewardDialog() {
const d = this._dialog.data;
const children = this._state.children || [];
const pointsName = this._state.settings.points_name || this._t("common.points");
return this._dialogShell(this._dialog.mode === "add" ? this._t("panel.dialog_add_reward") : this._t("panel.dialog_edit_reward"),
[
this._field(this._t("panel.chore_name_label"), "name", d.name, "text"),
this._field(this._t("panel.chore_description_label"), "description", d.description, "text"),
`
${this._field(this._t("panel.reward_cost_label", {points_name: pointsName}), "cost", d.cost, "number")}
${this._iconPickerField(this._t("panel.reward_icon_label"), "icon", d.icon)}
`,
children.length > 0 ? `
${this._t("panel.reward_assigned_label")}
${children.map(c => `
${this._esc(c.name)}
`).join("")}
${this._t("panel.reward_assigned_hint")}
` : "",
// Jackpot first; toggling it re-renders so the Pool switch below can be
// hidden — jackpots are always pool-mode (#552), so the separate Pool
// toggle would be redundant and confusing.
this._switch(this._t("panel.reward_is_jackpot_label"), "is_jackpot", d.is_jackpot,
this._t("panel.reward_is_jackpot_hint"), true),
d.is_jackpot ? "" : this._switch(this._t("panel.reward_pool_label"), "pool_enabled", d.pool_enabled,
this._t("panel.reward_pool_hint")),
`
${this._field(this._t("panel.reward_quantity_label"), "quantity_str", d.quantity_str, "text", this._t("panel.reward_quantity_hint"))}
${this._dateField(this._t("panel.reward_expires_label"), "expires_at", d.expires_at, this._t("panel.reward_expires_hint"))}
`,
this._switch(this._t("panel.reward_restock_label"), "restock_enabled", d.restock_enabled,
this._t("panel.reward_restock_hint")),
`
${this._field(this._t("panel.reward_restock_amount"), "restock_amount", d.restock_amount, "number")}
${this._select(this._t("panel.reward_restock_period"), "restock_period", d.restock_period || "weekly", [
{ v: "daily", l: this._t("panel.reward_restock_daily") },
{ v: "weekly", l: this._t("panel.reward_restock_weekly") },
{ v: "monthly", l: this._t("panel.reward_restock_monthly") },
])}
`,
this._renderRewardUnlock(d),
].join(""),
`${this._t("panel.btn_cancel")}
${this._t("panel.btn_save")} `
);
}
/**
* Timed unlock (#678). Only offers entities the parent has allowlisted in
* Settings — a reward must not be able to reach arbitrary devices.
*/
_renderRewardUnlock(d) {
const allow = (this._state.settings || {}).unlock_allowlist || [];
const open = this._dialog._openAdvanced?.has("unlock");
if (!allow.length) {
return `
${this._t("panel.reward_unlock_section")}
${this._t("panel.reward_unlock_no_allowlist")}
`;
}
const options = [{ v: "", lk: "panel.reward_unlock_none" }]
.concat(allow.map(e => ({ v: e, l: e })));
return `
${this._t("panel.reward_unlock_section")}
${this._t("panel.reward_unlock_intro")}
${this._select(this._t("panel.reward_unlock_entity"), "unlock_entity", d.unlock_entity || "", options)}
${d.unlock_entity ? this._field(this._t("panel.reward_unlock_minutes"), "unlock_minutes",
d.unlock_minutes ?? 30, "number", this._t("panel.reward_unlock_minutes_hint")) : ""}
`;
}
_renderAvatarCatalogDialog() {
const rows = (this._dialog.data.catalog || []);
const typeOpts = [
{ v: "free", l: this._t("panel.avatar_unlock_free") },
{ v: "level", l: this._t("panel.avatar_unlock_level") },
{ v: "points", l: this._t("panel.avatar_unlock_points") },
{ v: "streak", l: this._t("panel.avatar_unlock_streak") },
];
const rowHtml = rows.map((a, i) => `
`).join("");
return this._dialogShell(this._t("panel.avatar_dialog_title"),
[
`${this._t("panel.avatar_dialog_hint")}
`,
rows.length ? `${rowHtml}
` : `${this._t("panel.avatar_empty")}
`,
`＋ ${this._t("panel.avatar_add_row")} `,
].join(""),
`${this._t("panel.btn_cancel")}
${this._t("panel.btn_save")} `
);
}
_renderQuestDialog() {
const d = this._dialog.data;
const children = this._state.children || [];
const pointsName = this._state.settings.points_name || this._t("common.points");
const chores = this._state.chores || [];
const choreById = {};
chores.forEach(c => { choreById[c.id] = c; });
const steps = d.steps || [];
// Ordered step list with move/remove controls
const stepRows = steps.map((sid, i) => `
${i + 1}
${this._esc(choreById[sid] ? choreById[sid].name : this._t("panel.quest_missing_chore"))}
▲
▼
✕
`).join("");
return this._dialogShell(this._dialog.mode === "add" ? this._t("panel.dialog_add_quest") : this._t("panel.dialog_edit_quest"),
[
this._field(this._t("panel.chore_name_label"), "name", d.name, "text"),
this._field(this._t("panel.chore_description_label"), "description", d.description, "text"),
`
${this._field(this._t("panel.quest_bonus_label", {points_name: pointsName}), "bonus_points", d.bonus_points, "number")}
${this._iconPickerField(this._t("panel.reward_icon_label"), "icon", d.icon)}
`,
`
${this._t("panel.quest_steps_label")}
${this._t("panel.quest_steps_hint")}
${steps.length ? `
${stepRows}
` : `
${this._t("panel.quest_no_steps")}
`}
${chores.map(c => `
${this._esc(c.name)}
`).join("")}
`,
children.length > 0 ? `
${this._t("panel.quest_assigned_label")}
${children.map(c => `
${this._esc(c.name)}
`).join("")}
${this._t("panel.quest_assigned_hint")}
` : "",
this._switch(this._t("panel.quest_repeatable_label"), "repeatable", d.repeatable,
this._t("panel.quest_repeatable_hint")),
this._switch(this._t("panel.quest_active_label"), "active", d.active !== false,
this._t("panel.quest_active_hint")),
].join(""),
`${this._t("panel.btn_cancel")}
${this._t("panel.btn_save")} `
);
}
_renderPenBonDialog(kind) {
const d = this._dialog.data;
const children = this._state.children || [];
const isPenalty = kind === "penalty";
return this._dialogShell(this._dialog.mode === "add" ? (isPenalty ? this._t("panel.dialog_add_penalty") : this._t("panel.dialog_add_bonus")) : (isPenalty ? this._t("panel.dialog_edit_penalty") : this._t("panel.dialog_edit_bonus")),
[
this._field(this._t("panel.chore_name_label"), "name", d.name, "text"),
this._field(this._t("panel.chore_description_label"), "description", d.description, "text"),
`
${this._field(this._t(isPenalty ? "panel.penbon_points_deduct" : "panel.penbon_points_award"), "points", d.points, "number")}
${this._iconPickerField(this._t("panel.reward_icon_label"), "icon", d.icon)}
`,
children.length > 0 ? `
${this._t("panel.penbon_applies_to")}
${children.map(c => `
${this._esc(c.name)}
`).join("")}
${this._t("panel.penbon_applies_to_hint")}
` : "",
].join(""),
`${this._t("panel.btn_cancel")}
${this._t("panel.btn_save")} `
);
}
_renderApplyDialog(kind) {
const d = this._dialog.data;
const item = d.item;
const children = this._state.children || [];
const isPenalty = kind === "penalty";
const eligible = (item.assigned_to || []).length === 0
? children
: children.filter(c => (item.assigned_to || []).includes(c.id));
return this._dialogShell(isPenalty ? this._t("panel.dialog_apply_penalty", {name: item.name}) : this._t("panel.dialog_apply_bonus", {name: item.name}),
`${isPenalty ? this._t("panel.penalty_apply_text", {points: item.points}) : this._t("panel.bonus_apply_text", {points: item.points})}
${eligible.length === 0 ? `${this._t("panel.penbon_no_eligible", {kind})}
` : `
${eligible.map(c => `
${this._esc(c.name)}
`).join("")}
`}`,
`${this._t("panel.btn_close")} `
);
}
_renderGroupDialog() {
const d = this._dialog.data;
const chores = (this._state.chores || []).filter(c => c.assignment_mode && !["everyone", "first_come"].includes(c.assignment_mode));
return this._dialogShell(this._dialog.mode === "add" ? this._t("panel.dialog_add_group") : this._t("panel.dialog_edit_group"),
[
this._field(this._t("panel.common_name"), "name", d.name, "text"),
this._select(this._t("panel.group_policy_label"), "policy", d.policy, TASK_GROUP_POLICIES,
this._t("panel.group_policy_hint")),
chores.length === 0 ? `
${this._t("panel.group_no_rotation_chores")}
` : `
${this._t("panel.group_chores_label")}
${chores.map(c => `
${this._esc(c.name)}
`).join("")}
`,
].join(""),
`${this._t("panel.btn_cancel")}
${this._t("panel.btn_save")} `
);
}
_renderBulkChoreDialog() {
const d = this._dialog.data;
const children = this._state.children || [];
return this._dialogShell(this._t("panel.bulk_title"),
[
`
${this._t("panel.bulk_chore_names_label")}
${this._t("panel.bulk_chore_names_hint")}
`,
`
${this._field(this._t("panel.bulk_points_label"), "points", d.points, "number")}
${this._field(this._t("panel.chore_daily_limit_label"), "daily_limit", d.daily_limit, "number")}
`,
children.length > 0 ? `
${this._t("panel.bulk_assigned_to")}
${children.map(c => `
${this._esc(c.name)}
`).join("")}
${this._t("panel.bulk_leave_empty_hint")}
` : "",
this._select(this._t("panel.chore_time_category_label"), "time_category", d.time_category, this._timeCategoryOptions()),
this._select(this._t("panel.chore_schedule_mode_label"), "schedule_mode", d.schedule_mode, SCHEDULE_MODES, "", true),
d.schedule_mode === "specific_days" ? `
${this._t("panel.bulk_days_label")}
${DAYS.map(day => `
${this._t(day.lk)}
`).join("")}
` : "",
this._select(this._t("panel.chore_completion_sound_label"), "completion_sound", d.completion_sound, COMPLETION_SOUNDS.map(s => ({ v: s, l: s }))),
this._select(this._t("panel.chore_difficulty_label"), "difficulty", d.difficulty || "medium", [
{ v: "easy", l: this._t("panel.difficulty_easy") },
{ v: "medium", l: this._t("panel.difficulty_medium") },
{ v: "hard", l: this._t("panel.difficulty_hard") },
]),
this._dateField(this._t("panel.chore_expires_label"), "expires_on", d.expires_on, this._t("panel.chore_expires_hint")),
`
${this._field(this._t("panel.chore_due_time_label"), "due_time", d.due_time, "time", this._t("panel.chore_due_time_hint"))}
${this._field(this._t("panel.chore_early_bonus_label"), "early_bonus", d.early_bonus, "number")}
${this._field(this._t("panel.chore_late_penalty_label"), "late_penalty", d.late_penalty, "number")}
`,
this._switch(this._t("panel.chore_approval_label"), "requires_approval", d.requires_approval),
this._switch(this._t("panel.chore_require_photo_label"), "require_photo", d.require_photo,
this._t("panel.chore_require_photo_hint")),
].join(""),
`${this._t("panel.btn_cancel")}
${this._t("panel.btn_create_chores")} `
);
}
_renderReorderDialog() {
const d = this._dialog.data;
const choreById = Object.fromEntries((this._state.chores || []).map(c => [c.id, c]));
const title = d.global ? this._t("panel.reorder_global_title") : this._t("panel.reorder_title", {name: d.name});
const hint = d.global ? this._t("panel.reorder_global_hint") : this._t("panel.reorder_hint");
return this._dialogShell(title,
`${hint}
${(d.order || []).map((id, idx, arr) => {
const c = choreById[id];
if (!c) return "";
return `
⠿
${this._esc(c.name)}
${c.points}
▲
▼
`;
}).join("")}
${this._t("panel.btn_cancel")}
${this._t("panel.btn_save_order")} `
);
}
// ---- form helpers ----------------------------------------------------
_dialogShell(title, body, footer) {
return `
`;
}
_field(label, name, value, type = "text", hint = "") {
return `
${this._esc(label)}
${hint} ` : ""}
`;
}
_dateField(label, name, value, hint = "") {
return `
${this._esc(label)}
${hint} ` : ""}
`;
}
_select(label, name, value, options, hint = "", rerender = false) {
return `
${this._esc(label)}
${options.map(o => `${this._esc(o.lk ? this._t(o.lk) : o.l)} `).join("")}
${hint ? `${hint} ` : ""}
`;
}
_switch(label, name, checked, hint = "", rerender = false) {
return `
${this._esc(label)}
${hint ? `
${hint} ` : ""}
`;
}
_iconPickerField(label, name, value) {
return `
${this._esc(label)}
`;
}
_entityDomainIcon(entityId) {
const domain = (entityId || "").split(".")[0];
const map = {
binary_sensor: "mdi:checkbox-marked-circle-outline",
sensor: "mdi:eye",
input_boolean: "mdi:toggle-switch",
person: "mdi:account",
calendar: "mdi:calendar",
switch: "mdi:light-switch",
input_select: "mdi:form-dropdown",
};
return map[domain] || "mdi:puzzle";
}
// Route an entity-picker change to the open dialog, or to the settings-page
// entity draft when no dialog is open (settings entity pickers).
_setEntityField(field, value) {
if (this._dialog?.data) { this._dialog.data[field] = value; }
else { (this._settingsEntityDraft = this._settingsEntityDraft || {})[field] = value; }
}
_entityPickerField(label, name, value, domains, hint = "") {
const friendly = value && this._hass?.states?.[value]?.attributes?.friendly_name || "";
const icon = value ? (this._hass?.states?.[value]?.attributes?.icon || this._entityDomainIcon(value)) : "";
return `
${this._esc(label)}
${value
? `
${this._esc(friendly || value)}
✕
`
: `
`
}
${hint ? `
${hint} ` : ""}
`;
}
_openEntityDropdown(input) {
this._closeEntityDropdown();
const picker = input.closest(".tm-ep");
if (!picker || !this._hass?.states) return;
const field = picker.dataset.epField;
const domains = (picker.dataset.epDomains || "").split(",").filter(Boolean);
const query = input.value.toLowerCase();
const entities = Object.entries(this._hass.states)
.filter(([id, st]) => {
if (domains.length && !domains.some(d => id.startsWith(d + "."))) return false;
if (!query) return true;
const fn = st.attributes?.friendly_name || "";
return id.toLowerCase().includes(query) || fn.toLowerCase().includes(query);
})
.sort(([a], [b]) => a.localeCompare(b))
.slice(0, 50);
if (!entities.length) return;
const dd = document.createElement("div");
dd.className = "tm-ep-dropdown";
entities.forEach(([id, st]) => {
const fn = st.attributes?.friendly_name || "";
const stateIcon = st.attributes?.icon || this._entityDomainIcon(id);
const opt = document.createElement("div");
opt.className = "tm-ep-option";
opt.dataset.act = "pick-entity";
opt.dataset.field = field;
opt.dataset.value = id;
const iconEl = document.createElement("ha-icon");
iconEl.setAttribute("icon", stateIcon);
iconEl.className = "tm-ep-option-icon";
opt.appendChild(iconEl);
const textWrap = document.createElement("div");
textWrap.className = "tm-ep-option-text";
const idDiv = document.createElement("div");
idDiv.className = "tm-ep-id";
idDiv.textContent = fn || id;
textWrap.appendChild(idDiv);
if (fn) {
const nameDiv = document.createElement("div");
nameDiv.className = "tm-ep-name";
nameDiv.textContent = id;
textWrap.appendChild(nameDiv);
}
opt.appendChild(textWrap);
dd.appendChild(opt);
});
picker.appendChild(dd);
}
_closeEntityDropdown() {
const dd = this.querySelector(".tm-ep-dropdown");
if (dd) dd.remove();
}
// ---- chore row action menu (kebab) -----------------------------------
_toggleRowMenu(btn) {
const id = btn.dataset.id;
const wasOpen = this._rowMenuEl && this._rowMenuForId === id;
this._closeRowMenu();
if (!wasOpen) this._openRowMenu(btn, id);
}
_openRowMenu(btn, id) {
const c = (this._state.chores || []).find(x => x.id === id);
if (!c) return;
const esc = this._esc.bind(this);
const items = [];
if (this._state.parent_completable && this._state.parent_completable[id])
items.push({ act: "parent-complete-chore", icon: "👤✓", label: this._t("panel.parent_complete_tooltip") });
if (["alternating", "random", "balanced"].includes(c.assignment_mode))
items.push({ act: "skip-chore", icon: "⏭", label: this._t("panel.btn_skip_chore") });
if (["alternating", "random", "balanced", "first_come"].includes(c.assignment_mode))
items.push({ act: "request-swap", icon: "⇄", label: this._t("panel.swap_btn") });
items.push({ act: "toggle-chore-active", icon: c.enabled === false ? "▶" : "⏸", label: c.enabled === false ? this._t("panel.btn_activate_chore") : this._t("panel.btn_deactivate_chore") });
items.push({ act: "clone-chore", icon: "⧉", label: this._t("panel.btn_clone_chore") });
items.push({ act: "delete-chore", icon: "🗑", label: this._t("panel.btn_delete"), danger: true });
const menu = document.createElement("div");
menu.className = "tm-row-menu";
menu.setAttribute("role", "menu");
menu.style.visibility = "hidden";
menu.innerHTML = items.map(it =>
``).join("");
this.appendChild(menu);
// Position fixed at the kebab, right-aligned, flipping up / clamping to viewport.
const rect = btn.getBoundingClientRect();
const mw = menu.offsetWidth, mh = menu.offsetHeight, gap = 4, pad = 8;
let left = rect.right - mw;
if (left < pad) left = pad;
if (left + mw > window.innerWidth - pad) left = window.innerWidth - pad - mw;
let top = rect.bottom + gap;
if (top + mh > window.innerHeight - pad) top = Math.max(pad, rect.top - gap - mh);
menu.style.left = `${Math.round(left)}px`;
menu.style.top = `${Math.round(top)}px`;
menu.style.visibility = "visible";
this._rowMenuEl = menu;
this._rowMenuForId = id;
btn.setAttribute("aria-expanded", "true");
// Detach if the page scrolls or resizes under the (fixed) menu.
this._onRowMenuDismiss = () => this._closeRowMenu();
window.addEventListener("resize", this._onRowMenuDismiss, true);
window.addEventListener("scroll", this._onRowMenuDismiss, true);
}
_closeRowMenu() {
if (this._onRowMenuDismiss) {
window.removeEventListener("resize", this._onRowMenuDismiss, true);
window.removeEventListener("scroll", this._onRowMenuDismiss, true);
this._onRowMenuDismiss = null;
}
if (this._rowMenuEl) { this._rowMenuEl.remove(); this._rowMenuEl = null; }
if (this._rowMenuForId) {
const btn = this.querySelector(`[data-act="toggle-row-menu"][data-id="${CSS.escape(this._rowMenuForId)}"]`);
if (btn) btn.setAttribute("aria-expanded", "false");
this._rowMenuForId = null;
}
}
_emptyState(icon, title, copy, action, label) {
return `
${icon}
${this._esc(title)}
${this._esc(copy)}
${this._esc(label)}
`;
}
_idBadge(id) {
if (!this._showIds || !id) return "";
return `${this._esc(id)}