From a5183bc511adc16b208a6e71b8d781d5fa23567b Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Sat, 10 Sep 2022 20:05:47 +0200
Subject: [PATCH] Add start live survey button on responses page

---
 ui/src/components/BuildState.svelte           |  2 +-
 ui/src/components/StartStopLiveSurvey.svelte  | 31 +++++++++++++++++++
 ui/src/routes/surveys/[sid]/admin.svelte      | 27 +++++-----------
 .../surveys/[sid]/responses/index.svelte      |  8 +++++
 4 files changed, 47 insertions(+), 21 deletions(-)
 create mode 100644 ui/src/components/StartStopLiveSurvey.svelte

diff --git a/ui/src/components/BuildState.svelte b/ui/src/components/BuildState.svelte
index 70c729b..b651435 100644
--- a/ui/src/components/BuildState.svelte
+++ b/ui/src/components/BuildState.svelte
@@ -13,7 +13,7 @@
         <div
             class="spinner-grow spinner-grow-sm mx-1"
             class:text-primary={state.status == "pending"}
-                   class:text-warning={state.status == "running"}
+            class:text-warning={state.status == "running"}
             title="La récupération est en cours"
             role="status"
         ></div>
diff --git a/ui/src/components/StartStopLiveSurvey.svelte b/ui/src/components/StartStopLiveSurvey.svelte
new file mode 100644
index 0000000..7c0fed9
--- /dev/null
+++ b/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}
diff --git a/ui/src/routes/surveys/[sid]/admin.svelte b/ui/src/routes/surveys/[sid]/admin.svelte
index dbd3bd3..1fae957 100644
--- a/ui/src/routes/surveys/[sid]/admin.svelte
+++ b/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}
-            <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 ms-1 float-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}
+        <StartStopLiveSurvey
+            {survey}
+            class="ms-1 float-end"
+            on:update={() => updateSurvey()}
+            on:end={() => { if (confirm("Sûr ?")) ws.send('{"action":"end"}') }}
+        />
         <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">
diff --git a/ui/src/routes/surveys/[sid]/responses/index.svelte b/ui/src/routes/surveys/[sid]/responses/index.svelte
index 2b4a1b4..f90105f 100644
--- a/ui/src/routes/surveys/[sid]/responses/index.svelte
+++ b/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>