Add section in settings page to view, delete your scheduled tasks

src/khoj/interface/web/config.html

@@ -272,6 +272,34 @@
         {% endif %}
     </div>
     {% endif %}
+    <div id="tasks" class="section">
+        <h2 class="section-title">Scheduled Tasks</h2>
+        <div id="scheduled-tasks" class="api-settings">
+            <div class="card-title-row">
+                <img class="card-icon" src="/static/assets/icons/key.svg" alt="Scheduled Tasks">
+                <h3 class="card-title">Tasks</h3>
+            </div>
+            <div class="card-description-row">
+                <p id="tasks-settings-card-description" class="card-description">Manage your scheduled tasks handled by Khoj</p>
+            </div>
+            <table id="scheduled-tasks-table">
+                <thead>
+                <tr>
+                    <th scope="col">Name</th>
+                    <th scope="col">Next Run</th>
+                    <th scope="col">Actions</th>
+                </tr>
+                </thead>
+                <tbody id="scheduled-tasks-list"></tbody>
+            </table>
+            <div class="card-action-row">
+                <button class="card-button happy" id="create-scheduled-task" onclick="createScheduledTask()">
+                    Create Task
+                </button>
+            </div>
+        </div>
+    </div>
+
     {% if billing_enabled %}
     <div id="billing" class="section">
         <h2 class="section-title">Billing</h2>
@@ -616,7 +644,6 @@
                 </td>
             </tr>
         `;
-
     }
 
     function listApiKeys() {
@@ -624,7 +651,51 @@
         fetch('/auth/token')
             .then(response => response.json())
             .then(tokens => {
-                apiKeyList.innerHTML = tokens.map(generateTokenRow).join("");
+                if (!tokens?.length > 0) return;
+                apiKeyList.innerHTML = tokens?.map(generateTokenRow).join("");
+            });
+    }
+
+    // List user's API keys on page load
+    listApiKeys();
+
+    function deleteTask(taskId) {
+        const scheduledTaskList = document.getElementById("scheduled-tasks-list");
+        // url encode the task id
+        taskId = encodeURIComponent(taskId);
+        fetch(`/api/task?task_id=${taskId}`, {
+            method: 'DELETE',
+        })
+        .then(response => {
+            if (response.status == 200) {
+                const scheduledTaskItem = document.getElementById(`scheduled-task-item-${taskId}`);
+                scheduledTaskList.removeChild(scheduledTaskItem);
+            }
+        });
+    }
+
+    function generateTaskRow(taskObj) {
+        let taskId = taskObj.id;
+        let taskName = taskObj.name;
+        let taskNextRun = taskObj.next;
+        return `
+            <tr id="scheduled-task-item-${taskId}">
+                <td><b>${taskName}</b></td>
+                <td id="scheduled-task-${taskId}">${taskNextRun}</td>
+                <td>
+                    <img onclick="deleteTask('${taskId}')" class="configured-icon api-key-action enabled" src="/static/assets/icons/trash-solid.svg" alt="Delete Task" title="Delete Task">
+                </td>
+            </tr>
+        `;
+    }
+
+    function listScheduledTasks() {
+        const scheduledTasksList = document.getElementById("scheduled-tasks-list");
+        fetch('/api/tasks')
+            .then(response => response.json())
+            .then(tasks => {
+                if (!tasks?.length > 0) return;
+                scheduledTasksList.innerHTML = tasks.map(generateTaskRow).join("");
             });
     }
 
@@ -637,8 +708,8 @@
             });
     }
 
-    // List user's API keys on page load
-    listApiKeys();
+    // List user's scheduled tasks on page load
+    listScheduledTasks();
 
     function removeFile(path) {
         fetch('/api/config/data/file?filename=' + path, {