Move new ui to ui directory

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

@@ -0,0 +1,151 @@
+<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}