refactoring

frontend/src/App.svelte

@@ -19,6 +19,7 @@
     import SendDoc  from "./routes/document/Send.svelte";
     import User     from "./routes/user/User.svelte";
     import ViewDoc  from "./routes/document/View.svelte";
+    import ViewPrj  from "./routes/project/View.svelte";
 
     let translations_ready = $state(false);
     onMount(async () => {
@@ -48,6 +49,7 @@
             <Route path="/message/settings"            component={Messages} />
             <Route path="/project"                     component={ProjectList} />
             <Route path="/project/add"                 component={ProjectAdd} />
+            <Route path="/project/:id/view"            component={ViewPrj} />
             <Route path="/search"                      component={Search} />
             <Route path="/user"                        component={User} />
             <Route path="/user/create"                 component={EditUser} />

frontend/src/Components/Menu.svelte

@@ -13,7 +13,10 @@ async function fetchModules(){
     const resp = await fetch(url,{credentials:'include'});
     if (resp.ok){
         const arr = await resp.json();
-        for (let entry of arr) modules.push({name:t(entry.module),url:entry.url});
+        for (let entry of arr) {
+            let name = t('module.'+entry.module);
+            if (name) modules.push({name:name,url:entry.url});
+        }
     } else {
         console.log('error');
     }
@@ -32,9 +35,7 @@ onMount(fetchModules);
     <a onclick={() => router.navigate('/document')}>{t('documents')}</a>
     <a onclick={() => router.navigate('/project')}>{t('projects')}</a>
     <a href="https://svelte.dev/tutorial/svelte/state" target="_blank">{t('tutorial')}</a>
-    {#each modules as module,i}
-        <a href={module.url}>{module.name}</a>
-    {/each}
+    {#each modules as module,i}<a href={module.url}>{module.name}</a>{/each}
     {#if user.name }
     <a onclick={logout}>{t('logout')}</a>
     {/if}

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}