From 8758effc999c073355326f8fbae089377afbd27e Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Mon, 7 Nov 2022 01:56:06 +0100
Subject: [PATCH] qa: Add spinners and rework

---
 qa/ui/src/lib/components/ExerciceQA.svelte    |  14 ++-
 qa/ui/src/routes/+layout.svelte               |   4 +-
 qa/ui/src/routes/+page.svelte                 |  10 +-
 qa/ui/src/routes/exercices/+page.svelte       |  71 ++++++------
 qa/ui/src/routes/exercices/[eid]/+page.svelte |  28 ++++-
 qa/ui/src/routes/themes/+page.svelte          |  71 ++++++------
 qa/ui/src/routes/themes/[tid]/+page.svelte    | 106 +++++++++---------
 .../routes/themes/[tid]/[eid]/+page.svelte    |  28 ++++-
 8 files changed, 199 insertions(+), 133 deletions(-)

diff --git a/qa/ui/src/lib/components/ExerciceQA.svelte b/qa/ui/src/lib/components/ExerciceQA.svelte
index 907048f6..fcda18d1 100644
--- a/qa/ui/src/lib/components/ExerciceQA.svelte
+++ b/qa/ui/src/lib/components/ExerciceQA.svelte
@@ -37,8 +37,18 @@
 </h2>
 
 <div class="row mb-3">
-  <div class="col-md-6">{@html exercice.statement}</div>
-  <div class="col-md-6">{@html exercice.overview}</div>
+    <div
+        class="col-md-6"
+        style="overflow-y: auto; max-height: 50vh;"
+    >
+        {@html exercice.statement}
+    </div>
+    <div
+        class="col-md-6"
+        style="overflow-y: auto; max-height: 50vh;"
+    >
+        {@html exercice.overview}
+    </div>
 </div>
 
 <div class="mb-5">
diff --git a/qa/ui/src/routes/+layout.svelte b/qa/ui/src/routes/+layout.svelte
index d26588cd..4b809ae5 100644
--- a/qa/ui/src/routes/+layout.svelte
+++ b/qa/ui/src/routes/+layout.svelte
@@ -18,9 +18,7 @@
 <Styles />
 
 <Header />
-<Container class="mt-2 mb-5">
-    <slot></slot>
-</Container>
+<slot></slot>
 
 <style>
  :global(body) {
diff --git a/qa/ui/src/routes/+page.svelte b/qa/ui/src/routes/+page.svelte
index b495bc49..489083b7 100644
--- a/qa/ui/src/routes/+page.svelte
+++ b/qa/ui/src/routes/+page.svelte
@@ -17,7 +17,9 @@
  }
 </script>
 
-<Row>
-    <MyTodo class="col-6" />
-    <MyExercices class="col-6" />
-</Row>
+<Container class="mt-2 mb-5">
+    <Row>
+        <MyTodo class="col-6" />
+        <MyExercices class="col-6" />
+    </Row>
+</Container>
diff --git a/qa/ui/src/routes/exercices/+page.svelte b/qa/ui/src/routes/exercices/+page.svelte
index 9927f4d3..38760afe 100644
--- a/qa/ui/src/routes/exercices/+page.svelte
+++ b/qa/ui/src/routes/exercices/+page.svelte
@@ -2,7 +2,9 @@
  import { goto } from '$app/navigation';
 
  import {
+     Container,
      Icon,
+     Spinner,
      Table,
  } from 'sveltestrap';
 
@@ -15,37 +17,42 @@
  }
 </script>
 
-<h2>
-    Étapes
-</h2>
+<Container class="mt-2 mb-5">
+    <h2>
+        Étapes
+    </h2>
 
-{#await getExercices()}
-{:then exercices}
-    <p>
-        <input type="search" class="form-control form-control-sm" placeholder="Search" bind:value={query} autofocus>
-    </p>
-    <Table class="table-hover table-bordered table-striped table-sm">
-        <thead class="thead-dark">
-            <tr>
-                {#each fieldsExercices as field}
-	            <th>
-	                {field}
-	            </th>
+    {#await getExercices()}
+        <div class="d-flex justify-content-center">
+            <Spinner size="lg" />
+        </div>
+    {:then exercices}
+        <p>
+            <input type="search" class="form-control form-control-sm" placeholder="Search" bind:value={query} autofocus>
+        </p>
+        <Table class="table-hover table-bordered table-striped table-sm">
+            <thead class="thead-dark">
+                <tr>
+                    {#each fieldsExercices as field}
+	                <th>
+	                    {field}
+	                </th>
+                    {/each}
+                </tr>
+            </thead>
+            <tbody>
+                {#each exercices as exercice (exercice.id)}
+                    {#if exercice.title.indexOf(query) >= 0}
+                        <tr on:click={() => show(exercice.id)}>
+                            {#each fieldsExercices as field}
+	                        <td>
+                                    {@html exercice[field]}
+                                </td>
+                            {/each}
+                        </tr>
+                    {/if}
                 {/each}
-            </tr>
-        </thead>
-        <tbody>
-            {#each exercices as exercice (exercice.id)}
-                {#if exercice.title.indexOf(query) >= 0}
-                    <tr on:click={() => show(exercice.id)}>
-                        {#each fieldsExercices as field}
-	                    <td>
-                                {@html exercice[field]}
-                            </td>
-                        {/each}
-                    </tr>
-                {/if}
-            {/each}
-        </tbody>
-    </Table>
-{/await}
+            </tbody>
+        </Table>
+    {/await}
+</Container>
diff --git a/qa/ui/src/routes/exercices/[eid]/+page.svelte b/qa/ui/src/routes/exercices/[eid]/+page.svelte
index d9e4e37e..db523922 100644
--- a/qa/ui/src/routes/exercices/[eid]/+page.svelte
+++ b/qa/ui/src/routes/exercices/[eid]/+page.svelte
@@ -1,13 +1,33 @@
 <script>
+ import { goto } from '$app/navigation';
  import { page } from '$app/stores';
 
+ import {
+     Button,
+     Container,
+     Icon,
+     Spinner,
+ } from 'sveltestrap';
+
  import { getExercice } from '$lib/exercices';
  import ExerciceQA from '$lib/components/ExerciceQA.svelte';
 
  let exerciceP = getExercice($page.params.eid);
 </script>
 
-{#await exerciceP}
-{:then exercice}
-    <ExerciceQA {exercice} />
-{/await}
+<Container class="mt-2 mb-5">
+    {#await exerciceP}
+        <div class="d-flex justify-content-center">
+            <Spinner size="lg" />
+        </div>
+    {:then exercice}
+        <Button
+            class="float-start"
+            color="link"
+            on:click={() => goto('exercices')}
+        >
+            <Icon name="chevron-left" />
+        </Button>
+        <ExerciceQA {exercice} />
+    {/await}
+</Container>
diff --git a/qa/ui/src/routes/themes/+page.svelte b/qa/ui/src/routes/themes/+page.svelte
index 4bbbca18..2fc72ff7 100644
--- a/qa/ui/src/routes/themes/+page.svelte
+++ b/qa/ui/src/routes/themes/+page.svelte
@@ -4,6 +4,7 @@
  import { themes } from '$lib/stores/themes';
 
  import {
+     Container,
      Table,
  } from 'sveltestrap';
 
@@ -17,38 +18,40 @@
  }
 </script>
 
-<h2>
-  Scénarios
-</h2>
+<Container class="mt-2 mb-5">
+    <h2>
+        Scénarios
+    </h2>
 
-<p>
-    <input type="search" class="form-control" placeholder="Filtrer" bind:value={query} autofocus>
-</p>
-<Table class="table-hover table-bordered table-striped">
-  <thead class="thead-dark">
-      <tr>
-          {#each fields as field}
-              <th>
-	          {field}
-              </th>
-          {/each}
-      </tr>
-  </thead>
-  <tbody>
-      {#each $themes as theme (theme.id)}
-          {#if theme.name.indexOf(query) >= 0 || theme.authors.indexOf(query) >= 0 || theme.intro.indexOf(query) >= 0}
-              <tr on:click={() => show(theme.id)}>
-                  {#each fields as field}
-                      <td>
-                          {#if field == "image"}
-                              <img src={"../files" + theme[field]} alt="Image du scénario">
-                          {:else}
-                              {@html theme[field]}
-                          {/if}
-                      </td>
-                  {/each}
-              </tr>
-          {/if}
-      {/each}
-  </tbody>
-</Table>
+    <p>
+        <input type="search" class="form-control" placeholder="Filtrer" bind:value={query} autofocus>
+    </p>
+    <Table class="table-hover table-bordered table-striped">
+        <thead class="thead-dark">
+            <tr>
+                {#each fields as field}
+                    <th>
+	                {field}
+                    </th>
+                {/each}
+            </tr>
+        </thead>
+        <tbody>
+            {#each $themes as theme (theme.id)}
+                {#if theme.name.indexOf(query) >= 0 || theme.authors.indexOf(query) >= 0 || theme.intro.indexOf(query) >= 0}
+                    <tr on:click={() => show(theme.id)}>
+                        {#each fields as field}
+                            <td>
+                                {#if field == "image"}
+                                    <img src={"../files" + theme[field]} alt="Image du scénario">
+                                {:else}
+                                    {@html theme[field]}
+                                {/if}
+                            </td>
+                        {/each}
+                    </tr>
+                {/if}
+            {/each}
+        </tbody>
+    </Table>
+</Container>
diff --git a/qa/ui/src/routes/themes/[tid]/+page.svelte b/qa/ui/src/routes/themes/[tid]/+page.svelte
index 6dfdfe5d..10304549 100644
--- a/qa/ui/src/routes/themes/[tid]/+page.svelte
+++ b/qa/ui/src/routes/themes/[tid]/+page.svelte
@@ -7,6 +7,7 @@
      Container,
      Icon,
      Table,
+     Spinner,
  } from 'sveltestrap';
 
  import { getTheme } from '$lib/themes';
@@ -19,58 +20,63 @@
  }
 </script>
 
-{#await getTheme($page.params.tid)}
-{:then theme}
-    <div class="d-flex align-items-end">
-        <Button
-            class="align-self-center"
-            color="link"
-            on:click={() => goto('themes/')}
-        >
-            <Icon name="chevron-left" />
-        </Button>
-        <h2>
-            {theme.name}
-        </h2>
-        <small class="m-2 mb-3 text-muted text-truncate">{@html theme.authors}</small>
-    </div>
+<Container class="mt-2 mb-5">
+    {#await getTheme($page.params.tid)}
+        <div class="d-flex justify-content-center">
+            <Spinner size="lg" />
+        </div>
+    {:then theme}
+        <div class="d-flex align-items-end">
+            <Button
+                class="align-self-center"
+                color="link"
+                on:click={() => goto('themes/')}
+            >
+                <Icon name="chevron-left" />
+            </Button>
+            <h2>
+                {theme.name}
+            </h2>
+            <small class="m-2 mb-3 text-muted text-truncate">{@html theme.authors}</small>
+        </div>
 
-    <Container class="text-muted">
-        {@html theme.intro}
-    </Container>
+        <Container class="text-muted">
+            {@html theme.intro}
+        </Container>
 
-    {#await getThemedExercices($page.params.tid)}
-    {:then exercices}
-        <h3>
-            Défis ({exercices.length})
-        </h3>
+        {#await getThemedExercices($page.params.tid)}
+        {:then exercices}
+            <h3>
+                Défis ({exercices.length})
+            </h3>
 
-        <p>
-            <input type="search" class="form-control form-control-sm" placeholder="Search" bind:value={query} autofocus>
-        </p>
-        <Table class="table-hover table-bordered table-striped table-sm">
-            <thead class="thead-dark">
-                <tr>
-                    {#each fieldsExercices as field}
-	                <th>
-	                    {field}
-	                </th>
+            <p>
+                <input type="search" class="form-control form-control-sm" placeholder="Search" bind:value={query} autofocus>
+            </p>
+            <Table class="table-hover table-bordered table-striped table-sm">
+                <thead class="thead-dark">
+                    <tr>
+                        {#each fieldsExercices as field}
+	                    <th>
+	                        {field}
+	                    </th>
+                        {/each}
+                    </tr>
+                </thead>
+                <tbody>
+                    {#each exercices as exercice (exercice.id)}
+                        {#if exercice.title.indexOf(query) >= 0}
+                            <tr on:click={() => show(exercice.id)}>
+                                {#each fieldsExercices as field}
+	                            <td>
+                                        {@html exercice[field]}
+                                    </td>
+                                {/each}
+                            </tr>
+                        {/if}
                     {/each}
-                </tr>
-            </thead>
-            <tbody>
-                {#each exercices as exercice (exercice.id)}
-                    {#if exercice.title.indexOf(query) >= 0}
-                        <tr on:click={() => show(exercice.id)}>
-                            {#each fieldsExercices as field}
-	                        <td>
-                                    {@html exercice[field]}
-                                </td>
-                            {/each}
-                        </tr>
-                    {/if}
-                {/each}
-            </tbody>
-        </Table>
+                </tbody>
+            </Table>
+        {/await}
     {/await}
-{/await}
+</Container>
diff --git a/qa/ui/src/routes/themes/[tid]/[eid]/+page.svelte b/qa/ui/src/routes/themes/[tid]/[eid]/+page.svelte
index 1d3c35bc..f23d645f 100644
--- a/qa/ui/src/routes/themes/[tid]/[eid]/+page.svelte
+++ b/qa/ui/src/routes/themes/[tid]/[eid]/+page.svelte
@@ -1,13 +1,33 @@
 <script>
+ import { goto } from '$app/navigation';
  import { page } from '$app/stores';
 
+ import {
+     Button,
+     Container,
+     Icon,
+     Spinner,
+ } from 'sveltestrap';
+
  import { getThemedExercice } from '$lib/exercices';
  import ExerciceQA from '$lib/components/ExerciceQA.svelte';
 
  let exerciceP = getThemedExercice($page.params.tid, $page.params.eid);
 </script>
 
-{#await exerciceP}
-{:then exercice}
-    <ExerciceQA {exercice} />
-{/await}
+<Container class="mt-2 mb-5">
+    {#await exerciceP}
+        <div class="d-flex justify-content-center">
+            <Spinner size="lg" />
+        </div>
+    {:then exercice}
+        <Button
+            class="float-start"
+            color="link"
+            on:click={() => goto('themes/' + $page.params.tid)}
+        >
+            <Icon name="chevron-left" />
+        </Button>
+        <ExerciceQA {exercice} />
+    {/await}
+</Container>