ui: Working on works

ui/src/routes/works/[wid]/__layout.svelte

@@ -0,0 +1,39 @@
+<script context="module">
+ import { getWork } from '../../../lib/works';
+
+ export async function load({ params, stuff }) {
+     const work = getWork(params.wid);
+
+     return {
+         props: {
+             work,
+         },
+         stuff: {
+             ...stuff,
+             work,
+         }
+     };
+ }
+</script>
+
+<script lang="ts">
+
+ export let work;
+</script>
+
+{#await work}
+    <div class="text-center">
+        <div class="spinner-border text-primary mx-3" role="status"></div>
+        <span>Chargement du rendu &hellip;</span>
+    </div>
+{:then}
+    <slot></slot>
+{:catch error}
+    <div class="text-center">
+        <h2>
+            <a href="works/" class="text-muted" style="text-decoration: none">&lt;</a>
+            Travail introuvable
+        </h2>
+        <span>{error}</span>
+    </div>
+{/await}

ui/src/routes/works/[wid]/index.svelte

@@ -0,0 +1,34 @@
+<script context="module">
+ import { getWork } from '../../../lib/works';
+
+ export async function load({ params, stuff }) {
+     return {
+         props: {
+             work: stuff.work,
+         },
+     };
+ }
+</script>
+
+<script lang="ts">
+ import { goto } from '$app/navigation';
+
+ import { user } from '../../../stores/user';
+ import SurveyBadge from '../../../components/SurveyBadge.svelte';
+ import WorkAdmin from '../../../components/WorkAdmin.svelte';
+
+ export let work = null;
+</script>
+
+{#await work then w}
+    <div class="d-flex align-items-center">
+        <h2>
+            <a href="works/" class="text-muted" style="text-decoration: none">&lt;</a>
+            {w.title}
+        </h2>
+    </div>
+
+    {#if $user && $user.is_admin}
+        <WorkAdmin work={w} on:saved={() => edit = false} />
+    {/if}
+{/await}

ui/src/routes/works/index.svelte

@@ -0,0 +1,99 @@
+<script>
+ import { goto } from '$app/navigation';
+
+ import { user } from '../../stores/user';
+ import DateFormat from '../../components/DateFormat.svelte';
+ import SurveyBadge from '../../components/SurveyBadge.svelte';
+ import { getWorks } from '../../lib/works';
+ import { getPromos } from '../../lib/users';
+ import { getScore } from '../../lib/users';
+
+ let filterPromo = "";
+</script>
+
+{#if $user && $user.is_admin}
+    <a href="works/new" class="btn btn-primary ml-1 float-end" title="Ajouter un travail">
+        <i class="bi bi-plus"></i>
+    </a>
+    {#await getPromos() then promos}
+        <div class="float-end me-2">
+            <select class="form-select" bind:value={filterPromo}>
+                <option value="">-</option>
+                {#each promos as promo, pid (pid)}
+                    <option value={promo}>{promo}</option>
+                {/each}
+            </select>
+        </div>
+    {/await}
+{/if}
+<h2>
+  Travaux
+</h2>
+
+{#await getWorks()}
+    <div class="text-center">
+        <div class="spinner-border text-danger mx-3" role="status"></div>
+        <span>Chargement des travaux &hellip;</span>
+    </div>
+{:then works}
+    <table class="table table-sm table-striped table-hover">
+        <thead>
+            <tr>
+                <th>Intitulé</th>
+                <th>Date</th>
+                {#if $user}
+                    <th>Score</th>
+                {/if}
+            </tr>
+        </thead>
+        <tbody style="cursor: pointer;">
+            {#each works as work, wid (work.id)}
+                {#if (work.shown || ($user && $user.is_admin)) && (!$user || (!$user.was_admin || $user.promo == work.promo) || $user.is_admin)}
+                    {#if $user && $user.is_admin && (wid == 0 || works[wid-1].promo != work.promo)}
+                        <tr class="bg-info text-light">
+                            <th colspan="5" class="fw-bold">
+                                {work.promo}
+                            </th>
+                        </tr>
+                    {/if}
+                    <tr on:click={e => goto(`works/${work.id}`)}>
+                        <td>
+                            {#if !work.shown}<i class="bi bi-eye-slash-fill" title="Ce travail n'est pas affiché aux étudiants"></i>{/if}
+                            {work.title}
+                            {#if work.group}<span class="badge bg-secondary">{work.group}</span>{/if}
+                            <SurveyBadge survey={work} class="float-end" />
+                        </td>
+                        {#if work.startAvailability() > Date.now()}
+                            <td title="Ce travail sera disponible à partir du {work.start_availability}">
+                                <DateFormat date={work.start_availability} dateStyle="medium" timeStyle="medium" />
+                                <i class="bi bi-arrow-bar-right"></i>
+                            </td>
+                        {:else}
+                            <td title="La date de rendu de ce travail est établie au {work.end_availability}">
+                                <i class="bi bi-arrow-bar-left"></i>
+                                <DateFormat date={work.end_availability} dateStyle="medium" timeStyle="medium" />
+                            </td>
+                        {/if}
+                        {#if $user}
+                            {#if !work.corrected}
+                                <td>N/A</td>
+                            {:else}
+                                <td>
+                                    {#await getScore(work)}
+                                        <div class="spinner-border spinner-border-sm" role="status"></div>
+                                    {:then score}
+                                        {score.score}
+                                    {/await}
+                                </td>
+                            {/if}
+                        {/if}
+                    </tr>
+                {/if}
+            {/each}
+        </tbody>
+    </table>
+{:catch error}
+    <div class="text-center text-danger">
+        {error.message}
+    </div>
+{/await}

ui/src/routes/works/new.svelte

@@ -0,0 +1,22 @@
+<script>
+ import { goto } from '$app/navigation';
+
+ import { user } from '../../stores/user';
+ import WorkAdmin from '../../components/WorkAdmin.svelte';
+ import SurveyBadge from '../../components/SurveyBadge.svelte';
+ import { Work } from '../../lib/works';
+
+ let work = new Work();
+</script>
+
+<div class="d-flex align-items-center">
+    <h2>
+        <a href="works/" class="text-muted" style="text-decoration: none">&lt;</a>
+        Nouveau travail
+    </h2>
+    <SurveyBadge class="ms-2" survey={work} />
+</div>
+
+{#if $user && $user.is_admin}
+    <WorkAdmin {work} on:saved={(e) => { goto(`works/${e.detail.id}`)}} />
+{/if}