completed user-defined states

frontend/src/routes/project/View.svelte

@@ -21,11 +21,30 @@
     let showSettings   = $state(false);
     let tasks          = $state(null);
 
+    let new_state = $state({code:null,name:null})
+    let state_available=$derived(new_state.name && new_state.code && !project.allowed_states[new_state.code]);
+
     async function addMember(entry){
         const ids = Object.keys(entry);
         if (ids) update({new_member:+ids.pop()});
     }
 
+    async function addState(){
+        const url  = api(`project/${id}/state`);
+        const resp = await fetch(url,{
+            credentials: 'include',
+            method: 'POST',
+            body: JSON.stringify(new_state)
+        });
+        if (resp.ok){
+            const json = await resp.json();
+            project.allowed_states[json.code] = json.name;
+            error = null;
+        } else {
+            error = await resp.text();
+        }
+    }
+
     function addTask(){
         router.navigate(`/project/${id}/add_task`);
     }
@@ -200,6 +219,17 @@
             </td>
         </tr>
         {/each}
+        <tr>
+            <th>
+                <input type="number" bind:value={new_state.code} />
+            </th>
+            <td>
+                <input type="text" bind:value={new_state.name} />
+                {#if state_available}
+                <button onclick={addState} >{t('add_state')}</button>
+                {/if}
+            </td>
+        </tr>
         {/if}
         {/if}
         {#if estimated_time.sum}