Add start live survey button on responses page

ui/src/components/StartStopLiveSurvey.svelte

@@ -0,0 +1,31 @@
+<script>
+ import { createEventDispatcher } from 'svelte';
+
+ const dispatch = createEventDispatcher();
+
+ let className = '';
+ export { className as class };
+
+ export let survey = null;
+</script>
+
+{#if survey.direct !== null}
+    <a href="surveys/{survey.id}/live" class="btn btn-danger ms-1 float-end" title="Aller au direct"><i class="bi bi-film"></i></a>
+    <button
+        type="button"
+        class="btn btn-primary {className}"
+        title="Terminer le direct"
+        on:click={() => dispatch('end')}
+    >
+        <i class="bi bi-align-end"></i>
+    </button>
+{:else}
+    <button
+        type="button"
+        class="btn btn-primary {className}"
+        title="Commencer le direct"
+        on:click={() => {survey.shown = true; survey.direct = 0; survey.start_availability = new Date(); survey.end_availability = new Date(Date.now() + 43200000); survey.save().then(() => dispatch('update'));}}
+    >
+        <i class="bi bi-align-start"></i>
+    </button>
+{/if}

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

@@ -14,6 +14,7 @@
  import CorrectionPieChart from '../../../components/CorrectionPieChart.svelte';
  import ListInputResponses from '../../../components/ListInputResponses.svelte';
  import QuestionForm from '../../../components/QuestionForm.svelte';
+ import StartStopLiveSurvey from '../../../components/StartStopLiveSurvey.svelte';
  import SurveyAdmin from '../../../components/SurveyAdmin.svelte';
  import SurveyBadge from '../../../components/SurveyBadge.svelte';
  import { getSurvey } from '../../../lib/surveys';
@@ -234,26 +235,12 @@
 
 {#await surveyP then survey}
     {#if $user && $user.is_admin}
-        {#if survey.direct !== null}
+        <StartStopLiveSurvey
-            <a href="surveys/{survey.id}/live" class="btn btn-danger ms-1 float-end" title="Aller au direct"><i class="bi bi-film"></i></a>
+            {survey}
-            <button
+            class="ms-1 float-end"
-                type="button"
+            on:update={() => updateSurvey()}
-                class="btn btn-primary ms-1 float-end"
+            on:end={() => { if (confirm("Sûr ?")) ws.send('{"action":"end"}') }}
-                title="Terminer le direct"
+        />
-                on:click={() => { if (confirm("Sûr ?")) ws.send('{"action":"end"}') }}
-            >
-                <i class="bi bi-align-end"></i>
-            </button>
-        {:else}
-            <button
-                type="button"
-                class="btn btn-primary ms-1 float-end"
-                title="Commencer le direct"
-                on:click={() => {survey.shown = true; survey.direct = 0; survey.start_availability = new Date(); survey.end_availability = new Date(Date.now() + 43200000); survey.save().then(() => updateSurvey());}}
-            >
-                <i class="bi bi-align-start"></i>
-            </button>
-        {/if}
         <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">

ui/src/routes/surveys/[sid]/responses/index.svelte

@@ -11,6 +11,9 @@
 </script>
 
 <script lang="ts">
+ import { goto } from '$app/navigation';
+
+ import StartStopLiveSurvey from '../../../../components/StartStopLiveSurvey.svelte';
  import SurveyBadge from '../../../../components/SurveyBadge.svelte';
  import SurveyQuestions from '../../../../components/SurveyQuestions.svelte';
  import { getQuestions } from '../../../../lib/questions';
@@ -19,6 +22,11 @@
 </script>
 
 {#await surveyP then survey}
+    <StartStopLiveSurvey
+        {survey}
+        class="ms-1 float-end"
+        on:update={() => goto(`surveys/${survey.id}/admin`)}
+    />
     <div class="d-flex align-items-center">
         <h2>
             <a href="surveys/{survey.id}" class="text-muted" style="text-decoration: none">&lt;</a>