atsebay.t/atsebayt/src/routes/surveys/[sid]/live.svelte

<script context="module">
 export async function load({ params, stuff }) {
     return {
         props: {
             surveyP: stuff.survey,
             sid: params.sid,
         },
     };
 }
</script>

<script>
 import { user } from '../../../stores/user';
 import { ToastsStore } from '../../../stores/toasts';
 import SurveyBadge from '../../../components/SurveyBadge.svelte';
 import QuestionForm from '../../../components/QuestionForm.svelte';
 import { getQuestion } from '../../../lib/questions';

 export let surveyP;
 export let sid;
 let survey;

 surveyP.then((s) => survey = s);

 let ws_up = false;
 let show_question = null;
 let value;

 let req_question;
 let nosend = false;

 function afterQUpdate(q) {
     value = undefined;
     if (q) {
         q.getMyResponse().then((response) => {
             if (response && response.value)
                 value = response.value;
         })
     }
 }

 $: {
     if (show_question) {
         req_question = getQuestion(show_question);
         req_question.then(afterQUpdate);
     }
 }

 function wsconnect() {
     const ws = new WebSocket((window.location.protocol == 'https'?'wss://':'ws://') + window.location.host + `/api/surveys/${sid}/ws`);

     ws.addEventListener("open", () => {
         ws_up = true;
     });

     ws.addEventListener("close", (e) => {
         ws_up = false;
         show_question = false;
         console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
         setTimeout(function() {
             wsconnect();
         }, 1500);
     });

     ws.addEventListener("error", (err) => {
         ws_up = false;
         console.log('Socket closed due to error.', err.message);
     });

     ws.addEventListener("message", (message) => {
         const data = JSON.parse(message.data);
         console.log(data);
         if (data.action && data.action == "new_question") {
             show_question = data.question;
         } else {
             show_question = null;
         }
     });
 }
 wsconnect();

 function sendValue() {
     if (show_question && value && !nosend) {
         survey.submitAnswers([{"id_question": show_question, "value": value}], $user.id_user).then((response) => {
             console.log("Vos réponses ont bien étés sauvegardées.");
         }, (error) => {
             value = null;
             ToastsStore.addErrorToast({
                 msg: "Une erreur s'est produite durant l'envoi de vos réponses : " + error + "\nVeuillez réessayer dans quelques instants.",
             });
         });
     }
 }
</script>

{#await surveyP then survey}
    {#if $user && $user.is_admin}
        <a href="surveys/{survey.id}/admin" class="btn btn-primary ms-1 float-end" title="Aller à l'interface d'administration"><i class="bi bi-pencil"></i></a>
        <a href="surveys/{survey.id}/responses" class="btn btn-success ms-1 float-end" title="Voir les réponses"><i class="bi bi-files"></i></a>
    {/if}
    <div class="d-flex align-items-center mb-5">
        <h2>
            <a href="surveys/" class="text-muted" style="text-decoration: none">&lt;</a>
            {survey.title}
        </h2>
        <div
            class="badge rounded-pill ms-2"
            class:bg-success={ws_up}
            class:bg-danger={!ws_up}
        >
            {#if ws_up}Connecté{:else}Déconnecté{/if}
        </div>
    </div>

    <form on:submit|preventDefault={sendValue}>
        {#if show_question}
            {#await req_question}
                <div class="text-center">
                    <div class="spinner-border text-primary mx-3" role="status"></div>
                    <span>Chargement d'une nouvelle question &hellip;</span>
                </div>
            {:then question}
                <QuestionForm
                    qid={show_question}
                    {question}
                    bind:value={value}
                    on:change={sendValue}
                >
                    <!--div class="progress" style="border-radius: 0; height: 4px">
                    <div class="progress-bar" role="progressbar" style="width: 25%"></div>
                </div-->
                </QuestionForm>
                {#if question.kind != 'mcq' && question.kind != 'ucq'}
                    <button
                        class="btn btn-primary"
                    >
                        Soumettre la réponse
                    </button>
                {/if}
            {/await}
        {:else if ws_up}
            <h2 class="text-center">
                Pas de question actuellement
            </h2>
        {:else}
            <h2 class="text-center">
                La session est terminée. <small class="text-muted">On se retrouve une prochaine fois&hellip;</small>
            </h2>
        {/if}
    </form>
{/await}