added TODO-button + logic

index.html

@@ -16,13 +16,21 @@
             class="mt-2 px-3 py-2 bg-gray-200 rounded-md w-full text-sm" value="">
         <input type="text" id="api-token" placeholder="API Token"
             class="mt-2 px-3 py-2 bg-gray-200 rounded-md w-full text-sm" value="">
+
+        <!-- Button to generate general tasks -->
         <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 w-full"
             onclick="storeCredentialsAndFetchTasks()">
-            Generate
+            Generate Habits and Dailies
+        </button>
+
+        <!-- Button to generate TODOs -->
+        <button class="mt-4 px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600 w-full"
+            onclick="generateTodo()">
+            Generate TODO
         </button>
-        <div id="output" class="mt-4 p-4 bg-gray-100 rounded-md w-full"></div>
-    </div>
 
+        <div id="output" class="mt-4 p-4 bg-gray-100 rounded-md w-full max-h-96 overflow-auto"></div>
+    </div>
 
     <script>
         async function fetchHabiticaTasks() {
@@ -73,21 +81,70 @@
 
             const today = new Date();
             const outputDiv = document.getElementById('output');
-            outputDiv.innerHTML = ''; // Clear previous output and use innerHTML to support <br> tags
-
-            // Create and append the results
             outputDiv.innerHTML = `## Achievements on ${today.toISOString().split('T')[0]}<br>${habitsOutput}<br><br>## Completed Dailies<br>${dailiesOutput}`;
         }
 
-        // Call this function when the button is clicked
+        async function generateTodo() {
+            const userId = document.getElementById('habitica-user-id').value;
+            const apiToken = document.getElementById('api-token').value;
+            const apiUrl = "https://habitica.com/api/v3/tasks/user?type=todos";
+
+            if (!userId || !apiToken) {
+                alert("Please enter both your Habitica User ID and API Token.");
+                return;
+            }
+
+            try {
+                const response = await fetch(apiUrl, {
+                    headers: {
+                        'x-api-user': userId,
+                        'x-api-key': apiToken
+                    }
+                });
+
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+
+                const data = await response.json();
+
+                if (data.success !== true) {
+                    throw new Error('API response is invalid. Please check your credentials.');
+                }
+
+                renderTodos(data.data);
+            } catch (error) {
+                console.error('There has been a problem with your fetch operation:', error);
+                document.getElementById('output').textContent = 'Error fetching data. Please check the console for more information.';
+            }
+        }
+
+        function renderTodos(todos) {
+            const todoOutput = todos.filter(todo => !todo.completed).map(todo => {
+                // Notes should be on a new line directly after the task if present.
+                const notesOutput = todo.notes ? `<br>    _${todo.notes}_` : '';
+
+                // Subtasks should be indented and start on a new line if present.
+                const subtasksOutput = todo.checklist.length > 0
+                    ? `<br>    ` + todo.checklist.map(check =>
+                        `- [${check.completed ? 'x' : ' '}] ${check.text}`
+                    ).join('<br>    ') // Join subtasks with a line break.
+                    : '';
+
+                // Combine the task text, notes, and subtasks, with subtasks directly after notes.
+                return `- [ ] ${todo.text}${notesOutput}${subtasksOutput}`;
+            }).join('<br>'); // Each task separated by a single line break.
+
+            // Prepend a title and wrap with <pre> to preserve formatting.
+            const outputDiv = document.getElementById('output');
+            outputDiv.innerHTML = `<pre>### TODO:<br>${todoOutput}</pre>`;
+        }
+
         function storeCredentialsAndFetchTasks() {
-            // Store data
             localStorage.setItem('habiticaUserId', document.getElementById('habitica-user-id').value);
             localStorage.setItem('apiToken', document.getElementById('api-token').value);
-            // Fetch and display tasks
             fetchHabiticaTasks();
         }
-
     </script>
 </body>