ui: Use $lib in imports

ui/src/lib/components/CorrectionResponseFooter.svelte

@@ -0,0 +1,124 @@
+<script>
+ import { user } from '$lib/stores/user';
+ import { autoCorrection } from '$lib/correctionTemplates';
+
+ export let cts = null;
+ export let rid = 0;
+ export let response = null;
+ export let templates = [];
+
+ let my_tpls = { };
+ let my_correction = null;
+
+ function submitCorrection() {
+     if (response.score === undefined || response.score === null) {
+         if (my_correction && my_correction.score !== undefined) {
+             response.score = my_correction.score;
+         } else {
+             response.score = 100;
+         }
+     }
+
+     if (response.score_explaination === undefined || response.score_explaination === null) {
+         if (my_correction && my_correction.score_explaination !== undefined) {
+             response.score_explaination = my_correction.score_explaination;
+         }
+     }
+
+     response.id_corrector = $user.id
+     response.time_scored = (new Date()).toISOString()
+
+     response.save().then((res) => {
+
+     });
+ }
+
+ $: {
+     if (cts && templates && response && response.id_user) {
+         for (const t of templates) {
+             if (my_tpls[t.id] === undefined && cts[t.id.toString()]) {
+                 my_tpls[t.id] = cts[t.id.toString()][response.id_user] !== undefined;
+             }
+         }
+     }
+ }
+</script>
+
+<form
+    class="row"
+    on:submit|preventDefault={submitCorrection}
+>
+    <div class="col-auto">
+        <button
+            class="btn btn-success me-1"
+            class:mt-4={rid%2}
+        >
+            <i class="bi bi-check"></i>
+        </button>
+    </div>
+    <div class="col-7">
+        <div class="row row-cols-3">
+            {#each templates as template (template.id)}
+                <div class="form-check">
+                    <input
+                        type="checkbox"
+                        class="form-check-input"
+                        id="r{response.id}t{template.id}"
+                        on:change={() => {my_tpls[template.id] = !my_tpls[template.id]; autoCorrection(response.id_user, my_tpls).then((r) => my_correction = r); }}
+                        checked={my_tpls[template.id]}
+                    >
+                    <label
+                        class="form-check-label"
+                        for="r{response.id}t{template.id}"
+                    >
+                        {template.label}
+                    </label>
+                </div>
+            {/each}
+        </div>
+    </div>
+    <div class="col">
+
+        <div class="input-group mb-2">
+            <input
+                type="number"
+                class="form-control"
+                placeholder="Score"
+                bind:value={response.score}
+            >
+            {#if my_correction}
+                <button
+                    type="button"
+                    class="btn btn-light"
+                    on:click={() => { response.score = my_correction.score; response.score_explaination = my_correction.score_explaination; }}
+                >
+                    {my_correction.score}
+                </button>
+            {/if}
+            <span class="input-group-text">/100</span>
+        </div>
+
+        <textarea
+            class="form-control mb-2"
+            placeholder="Appréciation"
+            bind:value={response.score_explaination}
+        ></textarea>
+    </div>
+</form>
+{#if my_correction}
+    <div
+        class="alert row mt-1 mb-0"
+        class:bg-success={my_correction.score > 100}
+        class:alert-success={my_correction.score >= 95 && my_correction.score <= 100}
+        class:alert-info={my_correction.score < 95 && my_correction.score >= 70}
+        class:alert-warning={my_correction.score < 70 && my_correction.score >= 45}
+        class:alert-danger={my_correction.score < 45}
+    >
+        <strong class="col-auto">
+            {my_correction.score}&nbsp;%
+        </strong>
+        <div class="col">
+            {my_correction.score_explaination}
+        </div>
+    </div>
+{/if}