Display graph on admin page

ui/src/components/CorrectionPieChart.svelte

@@ -31,9 +31,20 @@
      return req;
  }
  let req_proposals = null;
+ export let proposals = null;
  let req_responses = null;
  let mean = null;
 
+ export let data = {
+     labels: [],
+     datasets: [
+         {
+             values: []
+         }
+     ]
+ };
+
+ if (!proposals) {
      if (question.kind == "int") {
          req_responses = question.getResponses();
          req_responses.then((responses) => {
@@ -54,15 +65,7 @@
      } else {
          req_proposals = refreshProposals();
      }
-
- let data = {
-     labels: [],
-     datasets: [
-         {
-             values: []
  }
-     ]
-   };
 </script>
 
 <div class="{className}">

ui/src/components/QuestionProposals.svelte

@@ -35,7 +35,8 @@
         {#if kind == 'mcq'}
             <input
                 type="checkbox"
-                class="form-check-input"
+                class:btn-check={live}
+                class:form-check-input={!live}
                 disabled={readonly}
                 name={prefixid + 'proposal' + proposal.id_question}
                 id={prefixid + 'p' + proposal.id}
@@ -90,7 +91,8 @@
                 class:form-check-label={!live}
                 class:btn={live}
                 class:btn-lg={live}
-                class:btn-primary={live}
+                class:btn-primary={live && value.indexOf(proposal.id.toString()) != -1}
+                class:btn-outline-primary={live && value.indexOf(proposal.id.toString()) == -1}
                 for={prefixid + 'p' + proposal.id}
             >
                 {proposal.label}

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

@@ -11,6 +11,7 @@
 
 <script>
  import { user } from '../../../stores/user';
+ import CorrectionPieChart from '../../../components/CorrectionPieChart.svelte';
  import SurveyAdmin from '../../../components/SurveyAdmin.svelte';
  import SurveyBadge from '../../../components/SurveyBadge.svelte';
  import { getSurvey } from '../../../lib/surveys';
@@ -84,6 +85,52 @@
      responsesbyid = tmp;
  }
 
+ let graph_data = {labels:[]};
+ async function reset_graph_data(questionid) {
+     if (questionid) {
+         const labels = [];
+         const flabels = [];
+
+         let question = null;
+         for (const q of await req_questions) {
+             if (q.id == current_question) {
+                 question = q;
+             }
+         }
+
+         if (question) {
+             for (const p of await question.getProposals()) {
+                 flabels.push(p.id.toString());
+                 labels.push(p.label);
+             }
+         }
+
+         graph_data = {
+             labels,
+             flabels,
+             datasets: [
+                 {
+                     values: labels.map(() => 0)
+                 }
+             ]
+         }
+     }
+
+     if (current_question && responses[current_question] && graph_data.labels.length != 0) {
+         const values = graph_data.datasets[0].values.map(() => 0);
+
+         for (const u in responses[current_question]) {
+             const res = responses[current_question][u];
+             for (const r of res.split(',')) {
+                 let idx = graph_data.flabels.indexOf(r);
+                 values[idx] += 1;
+             }
+         }
+
+         graph_data.datasets[0].values = values;
+     }
+ }
+
  let asks = [];
  function wsconnect() {
      if (ws !== null) return;
@@ -127,11 +174,14 @@
              } else {
                  timer_end = null;
              }
+             reset_graph_data(data.question);
          } else if (data.action && data.action == "stats") {
              wsstats = data.stats;
          } else if (data.action && data.action == "new_response") {
-             if (!responses[data.question]) responses[data.question] = {};
+             if (!responses[data.question]) responses[data.question] = { };
              responses[data.question][data.user] = data.value;
+
+             reset_graph_data();
          } else if (data.action && data.action == "new_ask") {
              asks.push({"id": data.question, "content": data.value, "userid": data.user});
              asks = asks;
@@ -258,7 +308,6 @@
                                     class="btn btn-sm"
                                     class:btn-outline-success={!corrected}
                                     class:btn-success={corrected}
-                                    disabled={!current_question || !ws_up}
                                     on:click={() => { corrected = !corrected } }
                                     title="La prochaine question est affichée corrigée"
                                 >
@@ -419,6 +468,17 @@
                                         <span>Chargement des propositions &hellip;</span>
                                     </div>
                                 {:then proposals}
+                                    {#if current_question == question.id}
+                                        <CorrectionPieChart
+                                            {question}
+                                            {proposals}
+                                            data={graph_data}
+                                        />
+                                    {:else}
+                                        <CorrectionPieChart
+                                            {question}
+                                        />
+                                    {/if}
                                     <div class="card mb-4">
                                         <table class="table table-sm table-striped table-hover mb-0">
                                             <tbody>
@@ -446,6 +506,17 @@
                                         <span>Chargement des propositions &hellip;</span>
                                     </div>
                                 {:then proposals}
+                                    {#if current_question == question.id}
+                                        <CorrectionPieChart
+                                            {question}
+                                            {proposals}
+                                            data={graph_data}
+                                        />
+                                    {:else}
+                                        <CorrectionPieChart
+                                            {question}
+                                        />
+                                    {/if}
                                     <div class="card mb-4">
                                         <table class="table table-sm table-striped table-hover mb-0">
                                             <tbody>