refactoring

frontend/src/routes/project/List.svelte

@@ -48,8 +48,8 @@
             </tr>
         </thead>
         <tbody>
-            {#each Object.entries(projects) as [id,project]}
-            <tr onclick={() => router.navigate(`/project/${project.id}/view`)}>
+            {#each Object.entries(projects) as [pid,project]}
+            <tr onclick={() => router.navigate(`/project/${pid}/view`)}>
                 <td>{project.name}</td>
                 <td>
                     {#if project.company_id}
@@ -60,7 +60,7 @@
                     {t("state_"+project.status.name.toLowerCase())}
                 </td>
                 <td>
-                    {#each project.members as member,idx}
+                    {#each Object.entries(project.members) as [uid,member]}
                     <div>{member.user.name}</div>
                     {/each}
                 </td>

frontend/src/routes/project/View.svelte

@@ -0,0 +1,66 @@
+<script>
+    import { t } from '../../translations.svelte.js';
+    import { onMount } from 'svelte';
+
+    let { id } = $props();
+    let project = $state(null);
+    let error = $state(null);
+    async function loadProject(){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/project/${id}`;
+        const resp = await fetch(url,{credentials:'include'});
+        if (resp.ok){
+            project = await resp.json();
+            error = null;
+        } else {
+            error = await resp.text();
+        }
+    }
+
+
+    onMount(loadProject);
+</script>
+
+{#if error}
+<span class="error">{error}</span>
+{/if}
+
+{#if project}
+<table>
+    <tbody>
+        <tr>
+            <th>{t('project')}</th>
+            <td>{project.name}</td>
+        </tr>
+        <tr>
+            <th>{t('context')}</th>
+            <td>
+                <button>{t('files')}</button>
+                <button>{t('models')}</button>
+                <button>{t('times')}</button>
+            </td>
+        </tr>
+        <tr>
+            <th>{t('description')}</th>
+            <td>{@html project.description.rendered}</td>
+        </tr>
+        <tr>
+            <th>{t('estimated_time')}</th>
+            <td class="error">TODO</td>
+        </tr>
+        <tr>
+            <th>{t('tasks')}</th>
+            <td class="error">TODO</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}