basic page content

2025-10-15 23:51:53 -05:00
parent f653af501f
commit 054ff43229
4 changed files with 72 additions and 1 deletions
--- a/scripts/content.ts
+++ b/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();
+});
--- a/styles/01-layout.scss
+++ b/styles/01-layout.scss
@@ -0,0 +1,19 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.right {
+    float: right;
+}
+
+.content {
+    width: 80%;
+    width: calc(100% - 150px);
+    margin: auto;
+}
+
+.chore {
+    line-height: 1.2em;
+    padding: .75em;
+    margin: 1em 0;
+}
--- a/styles/02-colors.scss
+++ b/styles/02-colors.scss
@@ -0,0 +1,8 @@
+body {
+    background-color: #212121;
+}
+
+.chore {
+    color: #FAFAFA;
+    background-color: #4527A0;
+}
--- a/views/app.ejs
+++ b/views/app.ejs
@@ -7,7 +7,9 @@

 <body class="preload">
    <div class="content">
-        <h1>Hello World</h1>
+        <div id="approot">
+            
+        </div>
    </div>
    <script nonce="<%= cspNonce %>" src="/assets/js/content.js" defer></script>
 </body>