${this._hasChanges
? html`
`
: ""}
${timeCategories.map((category) => {
const categoryChoreIds = this._localChoreOrder[category] || [];
const categoryChores = categoryChoreIds
.map((id) => chores.find((c) => c.id === id))
.filter((c) => c);
// Also include any chores in this category that aren't in the order yet
const orderedIds = new Set(categoryChoreIds);
const missingChores = childChores.filter(
(c) => c.time_category === category && !orderedIds.has(c.id)
);
const allCategoryChores = [...categoryChores, ...missingChores];
if (allCategoryChores.length === 0) {
return "";
}
return html`
`
: (child.name || "?").split(" ").map(w => w[0]).slice(0, 2).join("").toUpperCase();
return html`${inner}`;
}
_renderDesigned(design) {
const hd = _safeColor(this.config.header_color, '#5b7fb9');
const entity = this.hass.states[this.config.entity];
if (!entity) {
return html`
`;
}
const attrs = (window.__taskmate_attrs && window.__taskmate_attrs(this.hass, this.config.entity)) || entity.attributes || {};
const children = attrs.children || [];
const child = children.find((c) => c.id === this.config.child_id)
|| (!this.config.child_id && children[0]);
const icon = design === "console" ? "≡" : design === "cleanpro" ? "⇅" : "↕️";
const sub = design === "console"
? this._t('reorder.default_title')
: this._t('reorder.drag_to_reorder');
if (!child) {
return html`
`;
}
const chores = attrs.chores || [];
const childChores = this._getChoresForChild(chores, child.id);
const pointsIcon = attrs.points_icon || "mdi:star";
const header = html`
${header}
`;
}
const timeCategories = this._getTimeCategories();
const saveLabel = this._saving ? this._t('reorder.saving') : this._t('reorder.save_order');
return html`
${header}
`;
}
_renderDesignedChoreItem(chore, index, total, category, pointsIcon) {
const isFirst = index === 0;
const isLast = index === total - 1;
const choreIcon = chore.icon || "mdi:broom";
const emoji = choreIcon.startsWith("mdi:")
? html`
${allCategoryChores.map((chore, index) =>
this._renderChoreItem(chore, index, allCategoryChores.length, category, pointsIcon)
)}
⇅${this.config.title || this._t('reorder.default_title')}
${this._t('common.entity_not_found', { entity: this.config.entity })}
${icon}${this.config.title || this._t('reorder.default_title')}
${this._t('reorder.child_not_found', { child_id: this.config.child_id })}
${icon}
${this.config.title || this._t('reorder.default_title')}${sub}
${this._designAv(child, 22)}${child.name}
`;
if (childChores.length === 0) {
return html`${this._t('reorder.no_chores_assigned')}
${this._t('reorder.add_chores_first')}
${this._t('reorder.add_chores_first')}
${this._hasChanges
? html`
${this._t('reorder.unsaved_changes')}
`
: ""}
${timeCategories.map((category) => {
const categoryChoreIds = this._localChoreOrder[category] || [];
const categoryChores = categoryChoreIds
.map((id) => chores.find((c) => c.id === id))
.filter((c) => c);
const orderedIds = new Set(categoryChoreIds);
const missingChores = childChores.filter(
(c) => c.time_category === category && !orderedIds.has(c.id)
);
const allCategoryChores = [...categoryChores, ...missingChores];
if (allCategoryChores.length === 0) return "";
return html`
${allCategoryChores.map((chore, index) =>
this._renderDesignedChoreItem(chore, index, allCategoryChores.length, category, pointsIcon)
)}
`;
})}
⋮⋮
${index + 1}
${emoji}
`;
}
_renderChoreItem(chore, index, total, category, pointsIcon) {
const isFirst = index === 0;
const isLast = index === total - 1;
return html`
${chore.name}
+${chore.points} ${this._t('common.points').toLowerCase()}
${chore.name}