Distribute some traces to students

ui/src/lib/components/TraceStatus.svelte

@@ -0,0 +1,15 @@
+<script>
+ export let status = null;
+</script>
+
+{#if status}
+    <span
+        class="badge"
+        class:bg-success={status == "success"}
+        class:bg-danger={status == "failure" || status == "killed"}
+        class:bg-warning={status == "pending" || status == "running"}
+        class:bg-dark={status != "success" && status != "failure" && status != "killed" && status != "pending" && status != "running"}
+    >
+        {status}
+    </span>
+{/if}

ui/src/lib/works.js

@@ -132,6 +132,18 @@ export class Work {
     }
   }
 
+  async getMyTraces() {
+    const res = await fetch(`api/works/${this.id}/traces`, {
+      method: 'GET',
+      headers: {'Accept': 'application/json'},
+    });
+    if (res.status == 200) {
+      return await res.json();
+    } else {
+      throw new Error((await res.json()).errmsg);
+    }
+  }
+
   async getGrades() {
     const res = await fetch(`api/works/${this.id}/grades`, {
       method: 'GET',

ui/src/routes/works/[wid]/+page.svelte

@@ -6,6 +6,7 @@
  import ScoreBadge from '$lib/components/ScoreBadge.svelte';
  import SubmissionStatus from '$lib/components/SubmissionStatus.svelte';
  import SurveyBadge from '$lib/components/SurveyBadge.svelte';
+ import TraceStatus from '$lib/components/TraceStatus.svelte';
  import WorkAdmin from '$lib/components/WorkAdmin.svelte';
  import WorkRepository from '$lib/components/WorkRepository.svelte';
  import { getScore } from '$lib/users';
@@ -293,7 +294,25 @@
                 <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}
+            {#await w.getMyTraces()}
+                <div class="spinner-border spinner-border-sm" role="status"></div>
+            {:then traces}
+                {#each traces as trace}
+                    <div class="d-flex align-items-center gap-2">
+                        <h4>{trace.title}</h4>
+                        <TraceStatus status={trace.status} />
+                    </div>
+                    <div class="bg-dark text-light px-2 pt-2">
+                        <pre class="pb-2">{#each trace.logs as l (l.pos)}{l.out}{/each}</pre>
+                    </div>
+                {/each}
+            {: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}
+        {:catch error}
             <div class="alert alert-danger">
                 <i class="bi text-warning bi-exclamation-triangle-fill" title={error}></i>
                 <strong>{error.message}</strong>