Can ask questions during live sessions

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

@@ -63,6 +63,7 @@
      responsesbyid = tmp;
  }
 
+ let asks = [];
  function wsconnect() {
      if (ws !== null) return;
 
@@ -72,6 +73,7 @@
          ws_up = true;
          ws.send('{"action":"get_responses"}');
          ws.send('{"action":"get_stats"}');
+         ws.send('{"action":"get_asks"}');
      });
 
      ws.addEventListener("close", (e) => {
@@ -99,6 +101,9 @@
          } else if (data.action && data.action == "new_response") {
              if (!responses[data.question]) responses[data.question] = {};
              responses[data.question][data.user] = data.value;
+         } else if (data.action && data.action == "new_ask") {
+             asks.push({"id": data.question, "content": data.value, "userid": data.user});
+             asks = asks;
          } else {
              current_question = null;
          }
@@ -224,6 +229,67 @@
         {/await}
     {/if}
 
+    <hr>
+    <button
+        type="button"
+        class="btn btn-sm btn-info ms-1 float-end"
+        on:click={() => { ws.send('{"action":"get_asks"}'); asks = []; }}
+        title="Rafraîchir les réponses"
+    >
+        <i class="bi bi-arrow-counterclockwise"></i>
+        <i class="bi bi-question-diamond"></i>
+    </button>
+    <button
+        type="button"
+        class="btn btn-sm btn-light ms-1 float-end"
+        on:click={() => { ws.send('{"action":"get_asks", "value": "unanswered"}'); asks = []; }}
+        title="Rafraîchir les réponses, en rapportant les réponses déjà répondues"
+    >
+        <i class="bi bi-arrow-counterclockwise"></i>
+        <i class="bi bi-question-diamond"></i>
+    </button>
+    <h3>
+        Questions
+        {#if asks.length}
+            <small class="text-muted">
+                {asks.length}&nbsp;question{#if asks.length > 1}s{/if}
+            </small>
+        {/if}
+    </h3>
+    {#if asks.length}
+        {#each asks as ask (ask.id)}
+            <div class="card mb-3">
+                <div class="card-body">
+                    <p class="card-text">
+                        {ask.content}
+                    </p>
+                </div>
+                <div class="card-footer">
+                    <button
+                        type="button"
+                        class="btn btn-sm btn-success float-end"
+                        title="Marqué comme répondu"
+                        on:click={() => { ws.send('{"action":"mark_answered", "question": ' + ask.id + '}'); asks = asks.filter((e) => e.id != ask.id) }}
+                    >
+                        <i class="bi bi-check"></i>
+                    </button>
+                    Par
+                    <a href="users/{ask.userid}" target="_blank">
+                        {#if users && users[ask.userid]}
+                            {users[ask.userid].login}
+                        {:else}
+                            {ask.userid}
+                        {/if}
+                    </a>
+                </div>
+            </div>
+        {/each}
+    {:else}
+        <div class="text-center text-muted">
+            Pas de question pour l'instant.
+        </div>
+    {/if}
+
     <hr>
     <button
         type="button"

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

@@ -91,6 +91,36 @@
          });
      }
  }
+
+ let myQuestion = "";
+ let submitQuestionInProgress = false;
+ function askQuestion() {
+     if (!myQuestion) {
+         ToastsStore.addErrorToast({
+             msg: "Quel est ta question ?",
+         });
+         return;
+     }
+
+     submitQuestionInProgress = true;
+     fetch(`api/surveys/${survey.id}/ask`, {
+         method: 'POST',
+         headers: {'Accept': 'application/json'},
+         body: JSON.stringify({"content": myQuestion}),
+     }).then((r) => {
+         submitQuestionInProgress = false;
+         myQuestion = "";
+         ToastsStore.addToast({
+             msg: "Ta question a bien été envoyée.",
+             title: survey.title,
+             color: "success",
+         });
+     }, (error) => {
+         ToastsStore.addErrorToast({
+             msg: "Un problème est survenu : " + error.errmsg,
+         });
+     });
+ }
 </script>
 
 {#await surveyP then survey}
@@ -139,9 +169,36 @@
                 {/if}
             {/await}
         {:else if ws_up}
-            <h2 class="text-center">
-                Pas de question actuellement
+            <h2 class="text-center mb-4">
+                Pas de question actuellement.
             </h2>
+            <form on:submit|preventDefault={askQuestion}>
+                <h3 class="text-center text-muted mb-3"><label for="askquestion">Vous avez une question&nbsp;?</label></h3>
+                <div class="row">
+                    <div class="offset-md-1 col-md-10 offset-lg-2 col-lg-8 offset-xl-3 col-xl-6">
+                        <textarea
+                            id="askquestion"
+                            class="form-control"
+                            bind:value={myQuestion}
+                            autofocus
+                            placeholder="Remarques, soucis, choses pas claire ? Demandez !"
+                        ></textarea>
+                    </div>
+                </div>
+                {#if myQuestion}
+                    <div class="text-center mt-2">
+                        <button
+                            class="btn btn-primary"
+                            disabled={submitQuestionInProgress}
+                        >
+                            {#if submitQuestionInProgress}
+                                <div class="spinner-border spinner-border-sm me-1" role="status"></div>
+                            {/if}
+                            Poser cette question
+                        </button>
+                    </div>
+                {/if}
+            </form>
         {:else}
             <h2 class="text-center">
                 La session est terminée. <small class="text-muted">On se retrouve une prochaine fois&hellip;</small>