atsebay.t/ui/src/components/ResponseCorrected.svelte

<script>
 import { user } from '../stores/user';
 import { ToastsStore } from '../stores/toasts';

 export let response = null;
 export let survey = null;
 let reportInProgress = false;

 function report() {
     reportInProgress = true;
     response.report(survey).then((res) => {
	 reportInProgress = false;
         response.time_reported = res.time_reported;
         if (res.time_reported >= res.time_scored) {
             ToastsStore.addToast({
                 msg: "Ton signalement a bien été pris en compte.",
                 color: "success",
                 title: "Signaler une erreur de correction",
             });
         } else if (!res.time_reported) {
             ToastsStore.addToast({
                 msg: "La correction de ta réponse n'est maintenant plus signalée, signalement annulé.",
                 color: "info",
                 title: "Signaler une erreur de correction",
             });
         } else {
             ToastsStore.addErrorToast({
                 msg: "Quelque chose s'est mal passé lors du signalement du problème.\nSi le problème persiste, contacte directement ton professeur.",
             });
         }
     }, (error) => {
	 reportInProgress = false;
         ToastsStore.addErrorToast({
             msg: "Une erreur s'est produite durant le signalement du problème : " + error + "\nSi le problème persiste, contacte directement ton professeur.",
         });
     })
 }
</script>

{#if response.score !== undefined}
    <div
        class="alert row mb-0"
        class:alert-success={response.score >= 95}
        class:alert-info={response.score < 95 && response.score >= 70}
        class:alert-warning={response.score < 70 && response.score >= 45}
        class:alert-danger={response.score < 45}
    >
        <div class="col-auto">
            <strong
                title="Tu as obtenu un score de {response.score}&nbsp;%, ce qui correspond à {Math.trunc(response.score*10/5)/10}/20."
            >
                {response.score}&nbsp;%
            </strong>
        </div>
        <div class="col">
            {#if response.id_user == $user.id}
                <button
                    type="button"
                    class="d-block btn btn-sm float-end"
                    class:btn-outline-success={!response.time_reported && response.score >= 95}
                    class:btn-outline-info={!response.time_reported && response.score < 95 && response.score >= 70}
                    class:btn-outline-warning={!response.time_reported && response.score < 70 && response.score >= 45}
                    class:btn-outline-danger={!response.time_reported && response.score < 45}
                    class:btn-success={response.time_reported && response.score >= 95}
                    class:btn-info={response.time_reported && response.score < 95 && response.score >= 70}
                    class:btn-warning={response.time_reported && response.score < 70 && response.score >= 45}
                    class:btn-danger={response.time_reported && response.score < 45}
                    title="Signaler un problème avec la correction"
                    disabled={reportInProgress}
                    on:click={report}
                >
                    {#if reportInProgress}
                        <div class="spinner-border spinner-border-sm" role="status"></div>
                    {:else if response.time_reported > response.time_scored}
                        <i class="bi bi-exclamation-octagon-fill"></i>
                    {:else}
                        <i class="bi bi-exclamation-octagon"></i>
                    {/if}
                </button>
            {:else if $user.is_admin && response.time_reported}
                {#if response.time_reported > response.time_scored}
                    <i
                        class="float-end bi bi-exclamation-octagon-fill"
                        class:text-warning={response.score < 45}
                        class:text-danger={response.score >= 45}
                    ></i>
                {:else}
                    <i
                        class="float-end bi bi-exclamation-octagon"
                        class:text-warning={response.score < 45}
                        class:text-danger={response.score >= 45}
                    ></i>
                {/if}
            {/if}
            {#if response.score_explaination}
                {response.score_explaination}
            {:else if response.score === 100}
                <i class="bi bi-check"></i>
            {/if}
        </div>
    </div>
{:else if response && survey}
    {#if response.value}
        <div class="alert alert-dark text-danger row mb-0">
            <div class="col-auto" style="margin: -0.4em; font-size: 2em;">
                🤯
            </div>
            <div class="col">
                <strong>Oups, tu sembles être passé entre les mailles du filet&nbsp;!</strong>
                Cette question a bien été corrigée, mais une erreur s'est produite dans la correction de ta réponse.
                <a href="mailto:nemunaire@nemunai.re?subject=Question non corrigée (questionnaire {survey.id})">Contacte ton enseignant</a> au plus vite.
            </div>
        </div>
    {:else}
        <div class="alert alert-danger row mb-0">
            <div class="col-auto" style="margin: -0.4em; font-size: 2em;">
                😟
            </div>
            <div class="col">
                <strong>Tu n'as pas répondu à cette question.</strong>
                Que s'est-il passé&nbsp;?
            </div>
        </div>
    {/if}
{/if}