fic/server
Archived
1
0
Fork 0
Code Issues Pull requests 10 Releases Wiki Activity

qa: Add spinners and rework

Browse source
This commit is contained in:
nemunaire 2022-11-07 01:56:06 +01:00
parent 1aa82bb2ef
commit 8758effc99
8 changed files with 199 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

14
qa/ui/src/lib/components/ExerciceQA.svelte
View file

@ -37,8 +37,18 @@
</h2> </h2>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-6">{@html exercice.statement}</div> <div
<div class="col-md-6">{@html exercice.overview}</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>
<div class="mb-5"> <div class="mb-5">

4
qa/ui/src/routes/+layout.svelte
View file

@ -18,9 +18,7 @@
<Styles /> <Styles />
<Header /> <Header />
<Container class="mt-2 mb-5"> <slot></slot>
<slot></slot>
</Container>
<style> <style>
:global(body) { :global(body) {

10
qa/ui/src/routes/+page.svelte
View file

@ -17,7 +17,9 @@
} }
</script> </script>
<Row> <Container class="mt-2 mb-5">
<MyTodo class="col-6" /> <Row>
<MyExercices class="col-6" /> <MyTodo class="col-6" />
</Row> <MyExercices class="col-6" />
</Row>
</Container>

71
qa/ui/src/routes/exercices/+page.svelte
View file

@ -2,7 +2,9 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { import {
Container,
Icon, Icon,
Spinner,
Table, Table,
} from 'sveltestrap'; } from 'sveltestrap';
@ -15,37 +17,42 @@
} }
</script> </script>
<h2> <Container class="mt-2 mb-5">
Étapes <h2>
</h2> Étapes
</h2>
{#await getExercices()} {#await getExercices()}
{:then exercices} <div class="d-flex justify-content-center">
<p> <Spinner size="lg" />
<input type="search" class="form-control form-control-sm" placeholder="Search" bind:value={query} autofocus> </div>
</p> {:then exercices}
<Table class="table-hover table-bordered table-striped table-sm"> <p>
<thead class="thead-dark"> <input type="search" class="form-control form-control-sm" placeholder="Search" bind:value={query} autofocus>
<tr> </p>
{#each fieldsExercices as field} <Table class="table-hover table-bordered table-striped table-sm">
<th> <thead class="thead-dark">
{field} <tr>
</th> {#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} {/each}
</tr> </tbody>
</thead> </Table>
<tbody> {/await}
{#each exercices as exercice (exercice.id)} </Container>
{#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}

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

@ -1,13 +1,33 @@
<script> <script>
import { goto } from '$app/navigation';
import { page } from '$app/stores'; import { page } from '$app/stores';
import {
Button,
Container,
Icon,
Spinner,
} from 'sveltestrap';
import { getExercice } from '$lib/exercices'; import { getExercice } from '$lib/exercices';
import ExerciceQA from '$lib/components/ExerciceQA.svelte'; import ExerciceQA from '$lib/components/ExerciceQA.svelte';
let exerciceP = getExercice($page.params.eid); let exerciceP = getExercice($page.params.eid);
</script> </script>
{#await exerciceP} <Container class="mt-2 mb-5">
{:then exercice} {#await exerciceP}
<ExerciceQA {exercice} /> <div class="d-flex justify-content-center">
{/await} <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>

71
qa/ui/src/routes/themes/+page.svelte
View file

@ -4,6 +4,7 @@
import { themes } from '$lib/stores/themes'; import { themes } from '$lib/stores/themes';
import { import {
Container,
Table, Table,
} from 'sveltestrap'; } from 'sveltestrap';
@ -17,38 +18,40 @@
} }
</script> </script>
<h2> <Container class="mt-2 mb-5">
Scénarios <h2>
</h2> Scénarios
</h2>
<p> <p>
<input type="search" class="form-control" placeholder="Filtrer" bind:value={query} autofocus> <input type="search" class="form-control" placeholder="Filtrer" bind:value={query} autofocus>
</p> </p>
<Table class="table-hover table-bordered table-striped"> <Table class="table-hover table-bordered table-striped">
<thead class="thead-dark"> <thead class="thead-dark">
<tr> <tr>
{#each fields as field} {#each fields as field}
<th> <th>
{field} {field}
</th> </th>
{/each} {/each}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each $themes as theme (theme.id)} {#each $themes as theme (theme.id)}
{#if theme.name.indexOf(query) >= 0 || theme.authors.indexOf(query) >= 0 || theme.intro.indexOf(query) >= 0} {#if theme.name.indexOf(query) >= 0 || theme.authors.indexOf(query) >= 0 || theme.intro.indexOf(query) >= 0}
<tr on:click={() => show(theme.id)}> <tr on:click={() => show(theme.id)}>
{#each fields as field} {#each fields as field}
<td> <td>
{#if field == "image"} {#if field == "image"}
<img src={"../files" + theme[field]} alt="Image du scénario"> <img src={"../files" + theme[field]} alt="Image du scénario">
{:else} {:else}
{@html theme[field]} {@html theme[field]}
{/if} {/if}
</td> </td>
{/each} {/each}
</tr> </tr>
{/if} {/if}
{/each} {/each}
</tbody> </tbody>
</Table> </Table>
</Container>

106
qa/ui/src/routes/themes/[tid]/+page.svelte
View file

@ -7,6 +7,7 @@
Container, Container,
Icon, Icon,
Table, Table,
Spinner,
} from 'sveltestrap'; } from 'sveltestrap';
import { getTheme } from '$lib/themes'; import { getTheme } from '$lib/themes';
@ -19,58 +20,63 @@
} }
</script> </script>
{#await getTheme($page.params.tid)} <Container class="mt-2 mb-5">
{:then theme} {#await getTheme($page.params.tid)}
<div class="d-flex align-items-end"> <div class="d-flex justify-content-center">
<Button <Spinner size="lg" />
class="align-self-center" </div>
color="link" {:then theme}
on:click={() => goto('themes/')} <div class="d-flex align-items-end">
> <Button
<Icon name="chevron-left" /> class="align-self-center"
</Button> color="link"
<h2> on:click={() => goto('themes/')}
{theme.name} >
</h2> <Icon name="chevron-left" />
<small class="m-2 mb-3 text-muted text-truncate">{@html theme.authors}</small> </Button>
</div> <h2>
{theme.name}
</h2>
<small class="m-2 mb-3 text-muted text-truncate">{@html theme.authors}</small>
</div>
<Container class="text-muted"> <Container class="text-muted">
{@html theme.intro} {@html theme.intro}
</Container> </Container>
{#await getThemedExercices($page.params.tid)} {#await getThemedExercices($page.params.tid)}
{:then exercices} {:then exercices}
<h3> <h3>
Défis ({exercices.length}) Défis ({exercices.length})
</h3> </h3>
<p> <p>
<input type="search" class="form-control form-control-sm" placeholder="Search" bind:value={query} autofocus> <input type="search" class="form-control form-control-sm" placeholder="Search" bind:value={query} autofocus>
</p> </p>
<Table class="table-hover table-bordered table-striped table-sm"> <Table class="table-hover table-bordered table-striped table-sm">
<thead class="thead-dark"> <thead class="thead-dark">
<tr> <tr>
{#each fieldsExercices as field} {#each fieldsExercices as field}
<th> <th>
{field} {field}
</th> </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} {/each}
</tr> </tbody>
</thead> </Table>
<tbody> {/await}
{#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} {/await}
{/await} </Container>

28
qa/ui/src/routes/themes/[tid]/[eid]/+page.svelte
View file

@ -1,13 +1,33 @@
<script> <script>
import { goto } from '$app/navigation';
import { page } from '$app/stores'; import { page } from '$app/stores';
import {
Button,
Container,
Icon,
Spinner,
} from 'sveltestrap';
import { getThemedExercice } from '$lib/exercices'; import { getThemedExercice } from '$lib/exercices';
import ExerciceQA from '$lib/components/ExerciceQA.svelte'; import ExerciceQA from '$lib/components/ExerciceQA.svelte';
let exerciceP = getThemedExercice($page.params.tid, $page.params.eid); let exerciceP = getThemedExercice($page.params.tid, $page.params.eid);
</script> </script>
{#await exerciceP} <Container class="mt-2 mb-5">
{:then exercice} {#await exerciceP}
<ExerciceQA {exercice} /> <div class="d-flex justify-content-center">
{/await} <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>