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

<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 DateFormat from '../../../components/DateFormat.svelte';
 import SubmissionStatus from '../../../components/SubmissionStatus.svelte';
 import SurveyBadge from '../../../components/SurveyBadge.svelte';
 import WorkAdmin from '../../../components/WorkAdmin.svelte';
 import WorkRepository from '../../../components/WorkRepository.svelte';
 import { getScore } from '../../../lib/users';

 export let work = null;
 let edit = false;
</script>

{#await work then w}
    {#if $user && $user.is_admin}
        <button class="btn btn-primary ms-1 float-end" on:click={() => { edit = !edit; } } title="Éditer"><i class="bi bi-pencil"></i></button>
    {/if}
    <div class="d-flex align-items-center">
        <h2>
            <a href="works/" class="text-muted" style="text-decoration: none">&lt;</a>
            {w.title}
        </h2>
        <SurveyBadge class="ms-2" survey={w} />
    </div>

    {#if $user && $user.is_admin && edit}
        <WorkAdmin work={w} on:saved={() => edit = false} />

        {#if w.description}
        <hr>
        {@html w.description}
        {/if}

        <hr>
        <h3 class="mt-3">Notes</h3>
        <div class="card mt-3 mb-5">
            {#await w.getGrades()}
                <div class="text-center">
                    <div class="spinner-border text-primary mx-3" role="status"></div>
                    <span>Chargement des notes &hellip;</span>
                </div>
            {:then grades}
                <table class="table table-hover table-striped mb-0">
                    <thead>
                        <tr>
                            <th>Login</th>
                            <th>Note</th>
                            <th>Commentaire</th>
                            <th>Date de la note</th>
                        </tr>
                    </thead>
                    <tbody>
                        {#if !grades}
                            <div class="text-center">
                                Aucune note n'a encore été envoyée pour ce travail.
                            </div>
                        {:else}
                            {#each grades as grade, gid (grade.id)}
                                <tr>
                                    <td>
                                        <a href="users/{grade.id_user}">{grade.login}</a>
                                    </td>
                                    <td>{grade.score}</td>
                                    <td>{#if grade.comment}{grade.comment}{:else}-{/if}</td>
                                    <td>{grade.date}</td>
                                </tr>
                            {/each}
                        {/if}
                    </tbody>
                </table>
            {/await}
        </div>
    {:else if new Date(w.start_availability) > new Date()}
        <div class="alert alert-warning">
            <i class="bi bi-stopwatch-fill"></i>
            <strong>Ce travail n'est pas encore ouvert.</strong> Revenez plus tard&nbsp;!
        </div>
    {:else}
        <dl style="columns: 3">
            <dt>Date de début</dt>
            <dd><DateFormat date={new Date(w.start_availability)} dateStyle="medium" timeStyle="medium" /></dd>
            <dt>Date de fin</dt>
            <dd><DateFormat date={new Date(w.end_availability)} dateStyle="medium" timeStyle="medium" /></dd>
        </dl>
        <hr>

        {@html w.description}

        <hr>

        <h3 class="mt-3">Rendu</h3>

        {#if !w.corrected}
            <p>
                Pour rendre votre travail, vous devez préalablement créer un dépôt Git sur la <a href="https://gitlab.cri.epita.fr/" target="_blank">forge de l'école</a>.<br>Ce dépôt DOIT&nbsp;:
            </p>
            <ul>
                <li>être dans l'espace de nom de votre utilisateur (à la fin de la liste des <span class="fst-italic">namespaces</span>),</li>
                <li>avoir la visibilité «&nbsp;Privé&nbsp;»,</li>
                <li>avoir invité <a href="https://gitlab.cri.epita.fr/nemunaire" target="_blank" style="font-family: monospace">nemunaire</a> avec le rôle <span class="fst-italic">Reporter</span> une fois le dépôt créé,</li>
                <li>configuré un <span class="fst-italic">webhook</span> pointant sur <code>https://lessons.nemunai.re/callback/trigger.json</code></li>
            </ul>

            {#if w.tag}
                <div class="alert alert-info">
                    <i class="bi bi-lightbulb-fill text-info me-1"></i>
                    Vous pouvez utiliser un dépôt pour tous les travaux à effectuer, ou créer un dépôt par travail.
                </div>
            {/if}
        {/if}

        <WorkRepository class="mb-3" readonly={w.corrected || new Date(w.end_availability) <= new Date()} work={w} />
        <p>
            <strong>État du rendu&nbsp;:</strong> <SubmissionStatus work={w} />
        </p>
        {#if w.corrected}
            {#await getScore(w)}
                <div class="spinner-border spinner-border-sm" role="status"></div>
            {:then grade}
                <div class="alert alert-info">
                    <strong>Note finale&nbsp;:</strong> <span title="Établie le {grade.date}">{grade.score}</span> {#if grade.comment}&ndash; {grade.comment}{/if}
                </div>
            {:catch error}
                <div class="alert alert-danger">
                    <i class="bi text-warning bi-exclamation-triangle-fill" title={error}></i>
                    <strong>{error.message}</strong>
                </div>
            {/await}
        {:else}
            <p>
                Pour être reconnu, vous devez pousser un tag <strong><a href="keys">signé</a></strong> sur votre dépôt. {#if w.tag}Le tag attendu doit commencer par&nbsp;: <code>{w.tag}</code>. Par exemple <code>{w.tag}v1.0</code>, <code>{w.tag}v1.1</code>, ...{/if} Seul le dernier tag que vous envoyez avant la date du rendu sera pris en compte. Vous pouvez donc faire autant de tag que vous le souhaitez d'ici la date du rendu. Seul le dernier sera pris en compte.
            </p>
        {/if}
    {/if}
{/await}
<div class="mb-5"></div>