New route to delete grades

ui/src/lib/grades.js

@@ -0,0 +1,31 @@
+export class Grade {
+  constructor(res) {
+    if (res) {
+      this.update(res);
+    }
+  }
+
+  update({ id, login, id_user, id_work, date, score, comment }) {
+    this.id = id;
+    this.login = login;
+    this.id_user = id_user;
+    this.id_work = id_work;
+    this.date = date;
+    this.score = score;
+    this.comment = comment;
+  }
+
+  async delete() {
+    if (this.id) {
+      const res = await fetch(`api/works/${this.id_work}/grades/${this.id}`, {
+        method: 'DELETE',
+        headers: {'Accept': 'application/json'},
+      });
+      if (res.status == 200) {
+        return true;
+      } else {
+        throw new Error((await res.json()).errmsg);
+      }
+    }
+  }
+}

ui/src/lib/works.js

@@ -1,3 +1,5 @@
+import { Grade } from '$lib/grades';
+
 export class Work {
   constructor(res) {
     this.kind = "w";
@@ -110,7 +112,7 @@ export class Work {
       headers: {'Accept': 'application/json'},
     });
     if (res.status == 200) {
-      return await res.json();
+      return (await res.json()).map((g) => new Grade(g));
     } else {
       throw new Error((await res.json()).errmsg);
     }

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

@@ -14,13 +14,29 @@
  let my_submission = null;
  let warn_already_used = false;
  let w = null;
+ let gradesP = null;
+ let mean = 0;
 
  $: w = data.work;
  $: refresh_submission(data.work);
+ $: refresh_grades(data.work);
 
  function refresh_submission(w) {
      my_submission = w.getSubmission();
  }
+
+ function refresh_grades(w) {
+     gradesP = w.getGrades();
+     gradesP.then((grades) => {
+         if (grades.length <= 0) return;
+
+         let sum = 0;
+         for (const grade of grades) {
+             sum += grade.score;
+         }
+         mean = sum / grades.length;
+     });
+ }
 </script>
 
 {#if $user && $user.is_admin}
@@ -46,17 +62,20 @@
     <hr>
     <h3 class="mt-3">Notes</h3>
     <div class="card mt-3 mb-5">
-        {#await w.getGrades()}
-            <div class="text-center">
+        {#await gradesP}
+            <div class="text-center mb-5">
                 <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">
+            <table class="table table-hover table-striped table-sm mb-0">
                 <thead>
                     <tr>
                         <th>Login</th>
-                        <th>Note</th>
+                        <th>
+                            Note
+                            {#if mean > 0}(moyenne&nbsp;: {Math.round(mean*100)/100}){/if}
+                        </th>
                         <th>Commentaire</th>
                         <th>Date de la note</th>
                     </tr>
@@ -75,6 +94,15 @@
                                 <td>{grade.score}</td>
                                 <td>{#if grade.comment}{grade.comment}{:else}-{/if}</td>
                                 <td>{grade.date}</td>
+                                <td>
+                                    <button
+                                        class="btn btn-sm btn-danger mx-1"
+                                        title="Supprimer la note"
+                                        on:click={() => { grade.delete(); refresh_grades(w); }}
+                                    >
+                                        <i class="bi bi-trash"></i>
+                                    </button>
+                                </td>
                             </tr>
                         {/each}
                     {/if}