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;
 let my_submission = null;

 work.then((w) => {
     refresh_submission(w);
 })

 function refresh_submission(w) {
     my_submission = w.getSubmission();
 }
</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>
            {#if w.submission_url != "-"}
                <dt>Rendu&nbsp;?</dt>
                <dd>
                    {#if w.submission_url}
                        <SubmissionStatus work={w} />
                    {:else}
                        {#await my_submission}
                            <div class="spinner-grow spinner-grow-sm mx-1" role="status"></div>
                        {:then submission}
                            <i
                                class="bi bi-check-circle text-success"
                                title="Oui !"
                            ></i>
                            <DateFormat date={new Date(submission.date)} dateStyle="medium" timeStyle="medium" />
                        {:catch}
                            <i
                                class="bi bi-x-circle text-danger"
                                title="Pas de rendu trouvé"
                            ></i>
                            Non
                        {/await}
                    {/if}
                </dd>
            {/if}
        </dl>
        {#if w.description}
        <hr>
        {@html w.description}
        {/if}

        <hr>

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

        {#if !w.corrected && w.submission_url != "-"}
            <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>avoir configuré un <span class="fst-italic">webhook <strong>Tag push events</strong></span> pointant sur <code>https://lessons.nemunai.re/api/callbacks/trigger.json</code> avec le secret donné.</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}

        {#if w.submission_url != "-"}
            <WorkRepository class="mb-3" readonly={w.corrected || new Date(w.end_availability) <= new Date()} work={w} on:update_submission={() => refresh_submission(w)} />
            <div class="card mb-3">
                <div class="card-body d-flex justify-content-between">
                    <div>
                        {#if w.submission_url}
                            <strong>État du rendu&nbsp;:</strong> <SubmissionStatus work={w} />
                        {:else}
                            Rendu&nbsp;:
                            {#await my_submission}
                                <div class="spinner-grow spinner-grow-sm mx-1" role="status"></div>
                            {:then submission}
                                <strong>{submission.commit} ({submission.tag})</strong> (taille&nbsp;: {submission.size}&nbsp;o, date&nbsp;: <DateFormat date={new Date(submission.date)} dateStyle="medium" timeStyle="medium" />)
                            {:catch}
                                <strong>-</strong>
                            {/await}
                        {/if}
                    </div>
                    <div class="d-flex flex-column justify-content-center">
                        {#await my_submission then submission}
                            <a
                                href="/api/works/{w.id}/download"
                                class="btn btn-sm btn-dark"
                                title="Voir la tarball de mon rendu"
                            >
                                <i class="bi bi-download"></i>
                            </a>
                        {:catch}
                            <i
                                class="bi bi-x-circle text-danger"
                                title="Pas de rendu trouvé"
                            ></i>
                        {/await}
                    </div>
                </div>
            </div>
        {/if}

        {#if w.corrected}
            {#await getScore(w)}
                <div class="spinner-border spinner-border-sm" role="status"></div>
            {:then grade}
                <div class="alert alert-info">
                    <i class="bi bi-clipboard2-check-fill text-info me-1"></i>
                    <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 if w.submission_url != "-"}
            <div class="alert alert-warning">
                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>, &hellip;{/if} Seul le dernier tag <strong>alphabétique</strong> 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.
            </div>
        {:else}
            <div class="alert alert-primary">
                Ce travail n'a pas de modalité de rendu.
            </div>
        {/if}
    {/if}
{/await}
<div class="mb-5"></div>