basic page content

scripts/content.ts

@@ -1 +1,43 @@
+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();
+});