working on project settings update:

adding/updating members not implemented

frontend/src/Components/ListTask.svelte

@@ -29,7 +29,8 @@
 
     function openTask(evt){
         evt.preventDefault();
-        router.navigate(`/task/${task.id}/view`);
+        //router.navigate(`/task/${task.id}/view`);
+        location.href = `https://umbrella.srsoftware.de/task/${task.id}/view`;
     }
 
     if (task.estimated_time){

frontend/src/Components/MemberEditor.svelte

@@ -0,0 +1,42 @@
+<script>
+    import { onMount } from 'svelte';
+    import { t } from '../translations.svelte.js';
+    import PermissionSelector from './PermissionSelector.svelte';
+    let { members, updatePermission = (uid,perm) => console.log({user:uid,perm:perm}) } = $props();
+    let error = $state(null);
+    let sortedMembers = $derived.by(() => Object.values(members).sort((a, b) => a.user.name.localeCompare(b.user.name)));
+
+    let permissions = $state(null);
+
+    async function loadPermissions(){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/task/permissions`;
+        var resp = await fetch(url,{credentials: 'include'});
+        if (resp.ok){
+            permissions = await resp.json();
+        } else {
+            message = await resp.text();
+        }
+    }
+
+    onMount(loadPermissions);
+
+</script>
+
+{#if error}
+<span class="error">{error}</span>
+{/if}
+<table>
+    <tbody>
+        {#each sortedMembers as member,i}
+        <tr>
+            {#if !i}
+            <th rowspan={sortedMembers.length}>{t('members')}</th>
+            {/if}
+            <td>{member.user.name}</td>
+            <td>
+                <PermissionSelector {permissions} selected={member.permission.code} onchange={(perm) => updatePermission(member.user.id,perm)} />
+            </td>
+        </tr>
+        {/each}
+    </tbody>
+</table>

frontend/src/Components/PermissionSelector.svelte

@@ -0,0 +1,26 @@
+<script>
+    import {onMount} from 'svelte';
+    import {t} from '../translations.svelte.js';
+    let {
+        caption = t('select_permission'),
+        selected = $bindable(0),
+        onchange = (val) => console.log('changed to',val),
+        permissions = null
+    } = $props();
+
+    function onSelect(newVal){
+        onchange({name:permissions[newVal],code:newVal});
+    }
+
+    let message = $state(t('loading'));
+</script>
+
+{#if permissions}
+<select bind:value={selected} onchange={() => onSelect(selected)}>
+    {#each Object.entries(permissions) as [k,perm]}
+    <option value={+k}>{t('permission_'+perm.toLowerCase())}</option>
+    {/each}
+</select>
+{:else}
+<span>{message}</span>
+{/if}

frontend/src/routes/project/View.svelte

@@ -5,12 +5,14 @@
     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 { id } = $props();
     let project = $state(null);
     let error = $state(null);
     let tasks = $state(null);
     let estimated_time = $state({sum:0});
+    let showSettings = $state(false);
 
     async function loadProject(){
         const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/project/${id}`;
@@ -54,6 +56,12 @@
         }
     }
 
+    function updatePermission(user_id,permission){
+        let members = {};
+        members[user_id] = permission.code;
+        update({members:members});
+    }
+
     onMount(loadProject);
 </script>
 
@@ -68,6 +76,7 @@
             <th>{t('project')}</th>
             <td class="name">
                 <LineEditor bind:value={project.name} editable={true} onSet={val => update({name:val})} />
+                <button class="symbol" onclick={() => showSettings = true}></button>
             </td>
         </tr>
         <tr>
@@ -110,16 +119,12 @@
                 {/if}
             </td>
         </tr>
-        <tr>
-            <th>{t('members')}</th>
-            <td>
-                <ul>
-                {#each Object.entries(project.members) as [uid,member]}
-                <li>{member.user.name}: {t('permission.'+member.permission)}</li>
-                {/each}
-                </ul>
-            </td>
-        </tr>
     </tbody>
 </table>
+{/if}
+{#if showSettings}
+<fieldset class="project settings">
+    <legend>{t('settings')}</legend>
+    <MemberEditor members={project.members} {updatePermission} />
+</fieldset>
 {/if}