qa: Refactor layout

qa/ui/src/routes/exercices/[eid]/+layout.js

@@ -0,0 +1,13 @@
+import { getExercice } from '$lib/exercices';
+import { getExerciceQA } from '$lib/qa.js';
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ depends, params }) {
+  const exercice = getExercice(params.eid)
+  depends(`api/exercices/${params.eid}`);
+
+  const qaitems = getExerciceQA(params.eid);
+  depends(`api/exercices/${params.eid}/qa`);
+
+  return { exercice, qaitems };
+}

qa/ui/src/routes/exercices/[eid]/+layout.svelte

@@ -0,0 +1,20 @@
+<script>
+ import { page } from '$app/stores';
+
+ import ExerciceLayout from '$lib/components/ExerciceLayout.svelte';
+ import { themes } from '$lib/stores/themes';
+
+ if ($themes.length == 0) {
+      themes.refresh();
+ }
+
+ export let data;
+</script>
+
+<ExerciceLayout
+    exercice={data.exercice}
+    qaitems={data.qaitems}
+    query_selected={$page.params.qid}
+>
+    <slot></slot>
+</ExerciceLayout>

qa/ui/src/routes/exercices/[eid]/+page.svelte

@@ -1,26 +1,34 @@
 <script>
- import { goto } from '$app/navigation';
- import { page } from '$app/stores';
-
  import {
      Button,
+     Col,
      Container,
      Icon,
-     Spinner,
+     Row,
+     Table,
  } from 'sveltestrap';
 
- import { getExercice } from '$lib/exercices';
- import ExerciceQA from '$lib/components/ExerciceQA.svelte';
+ import QANewItem from '$lib/components/QANewItem.svelte';
 
- let exerciceP = getExercice($page.params.eid);
+ export let data;
 </script>
 
-{#await exerciceP}
-    <Container class="mt-2 mb-5">
-        <div class="d-flex justify-content-center">
-            <Spinner size="lg" />
-        </div>
-    </Container>
-{:then exercice}
-    <ExerciceQA {exercice} />
-{/await}
+<Row class="mb-3">
+    <div
+        class="col-md-6"
+        style="overflow-y: auto; max-height: 40vh;"
+    >
+        {@html data.exercice.statement.replace("$FILES$", "../files")}
+    </div>
+    <div
+        class="col-md-6"
+        style="overflow-y: auto; max-height: 40vh;"
+    >
+        {@html data.exercice.overview.replace("$FILES$", "../files")}
+    </div>
+</Row>
+
+<QANewItem
+    theme={data.theme}
+    exercice={data.exercice}
+/>

qa/ui/src/routes/exercices/[eid]/[qid]/+layout.js

@@ -0,0 +1,21 @@
+import { error } from '@sveltejs/kit';
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ params, parent }) {
+  const { exercice, qaitems } = await parent();
+
+  let query_selected = null;
+  for (const qaitem of qaitems) {
+    if (qaitem.id == params.qid) {
+      query_selected = qaitem;
+    }
+  }
+
+  if (!query_selected) {
+    throw error(404, {
+      message: 'Not found'
+    });
+  }
+
+  return { exercice, qaitems, query_selected };
+}

qa/ui/src/routes/exercices/[eid]/[qid]/+page.svelte

@@ -0,0 +1,10 @@
+<script>
+ import QAItem from '$lib/components/QAItem.svelte';
+
+ export let data;
+</script>
+
+<QAItem
+    exercice={data.exercice}
+    query={data.query_selected}
+/>