preparing addition of tasks

frontend/src/routes/project/View.svelte

@@ -1,12 +1,14 @@
 <script>
     import { t } from '../../translations.svelte.js';
     import { onMount } from 'svelte';
+    import { useTinyRouter } from 'svelte-tiny-router';
     import TaskList from '../../Components/TaskList.svelte';
     import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
     import LineEditor from '../../Components/LineEditor.svelte';
     import StateSelector from '../../Components/StateSelector.svelte';
     import MemberEditor from '../../Components/MemberEditor.svelte';
 
+    let router = useTinyRouter();
     let { id } = $props();
     let project = $state(null);
     let error = $state(null);
@@ -20,6 +22,10 @@
         if (ids) update({new_member:+ids.pop()});
     }
 
+    function addTask(){
+        router.navigate(`/project/${id}/add_task`);
+    }
+
     function changeClosed(){
         update({show_closed:project.show_closed});
         loadTasks();
@@ -133,7 +139,10 @@
         </tr>
         {/if}
         <tr>
-            <th>{t('tasks')}</th>
+            <th>
+                {t('tasks')}
+                <button onclick={addTask}>{t('add_new',t('task'))}</button>
+            </th>
             <td class="tasks">
                 {#if tasks}
                 <TaskList {tasks} {estimated_time} show_closed={project.show_closed} />

frontend/src/routes/task/Add.svelte

@@ -0,0 +1,68 @@
+<script>
+    import { t }  from '../../translations.svelte.js';
+    import { api } from '../../urls.svelte.js';
+    import { onMount } from 'svelte';
+
+    import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
+
+    let { project_id = null } = $props();
+    let error = $state(null);
+    let project = $state(null)
+    let task = $state({
+        name : '',
+        description : { source : 'new_task', rendered : '' }
+    });
+
+    function load(){
+        if (project_id) loadProject();
+    }
+
+    async function loadProject(){
+        var url = api(`project/${project_id}`);
+        const resp = await fetch(url,{credentials:'include'});
+        if (resp.ok){
+            project = await resp.json();
+            task.project_id = project_id;
+            error = null;
+        } else {
+            error = await resp.text();
+        }
+    }
+
+    onMount(load);
+</script>
+
+
+<fieldset>
+    <legend>Add Task</legend>
+    <table>
+        <tbody>
+            <tr>
+                <th>
+                    {t('name')}
+                </th>
+                <td>
+                    <input bind:value={task.name}>
+                </td>
+            </tr>
+            {#if project}
+            <tr>
+                <th>
+                    {t('project')}
+                </th>
+                <td>
+                    {project.name}
+                </td>
+            </tr>
+            {/if}
+            <tr>
+                <th>
+                    {t('description')}
+                </th>
+                <td>
+                    <MarkdownEditor bind:value={task.description} editing={true}/>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</fieldset>