chore-chart/scripts/content.ts

import type { GrocyChore } from '../distribution/Grocy';

document.addEventListener("DOMContentLoaded", async function () {
    async function loadChores() {
        try {
            const response = await fetch('/api/chores');
            if (!response.ok) {
                throw new Error(`Response status: ${response.status}`);
            }

            const result = await response.json();
            if (!('chores' in result)) {
                throw new Error(JSON.stringify(result));
            }
            createChores(result.chores as GrocyChore[]);
        } catch (error: any) {
            console.error(error?.message);
        }
    }

    function createChores(chores: GrocyChore[]) {
        const root = document.getElementById('approot');
        if (!root) {
            throw new Error('app root not found');
        }
        chores.forEach(ch => {
            const btn = document.createElement('div');
            const leftText = document.createElement('span');
            leftText.appendChild(document.createTextNode(ch.chore_name));
            btn.appendChild(leftText);
            btn.classList.add('chore');
            if (ch.next_execution_assigned_user?.display_name) {
                const rightText = document.createElement('span');
                rightText.appendChild(document.createTextNode(ch.next_execution_assigned_user.display_name));
                rightText.classList.add('right');
                btn.appendChild(rightText);
            }
            root.appendChild(btn);
        });
    }

    loadChores();
});