Working on live surveys

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

@@ -0,0 +1,118 @@
+<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 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;
+
+ 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) {
+         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;
+             console.log("Une erreur s'est produite durant l'envoi de vos réponses : " + error + "<br>Veuillez 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 getQuestion(show_question)}
+                Please wait
+            {: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>
+            {/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}