fic/server
2
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

ui: Solve scenario loading mess

Browse Source
This commit is contained in:
nemunaire 2022-11-02 11:30:12 +01:00
parent ffd43ac8e1
commit 3d35cee67d
10 changed files with 202 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/ui/src/lib/stores/exercices.js Normal file
View File

@ -0,0 +1,19 @@
import { derived, writable } from 'svelte/store';
import { exercices_idx_urlid } from './themes';
export const set_current_exercice = writable(null)
export const current_exercice = derived(
[set_current_exercice, exercices_idx_urlid],
([$set_current_exercice, $exercices_idx_urlid]) => {
if ($exercices_idx_urlid === null || Object.keys($exercices_idx_urlid).length == 0) {
return null;
}
if ($exercices_idx_urlid[$set_current_exercice])
return $exercices_idx_urlid[$set_current_exercice];
return undefined;
}
)

49
frontend/ui/src/lib/stores/themes.js
View File

@ -78,6 +78,22 @@ export const themes = derived(
},
);
export const themes_idx = derived(
themes,
($themes) => {
const ret = {};
for (const key in $themes) {
const theme = $themes[key];
ret[theme.urlid] = theme;
}
return ret;
},
null,
);
export const exercices_idx = derived(
themesStore,
($themesStore) => {
@ -94,6 +110,23 @@ export const exercices_idx = derived(
},
);
export const exercices_idx_urlid = derived(
themesStore,
($themesStore) => {
const ret = {};
for (const key in $themesStore) {
const theme = $themesStore[key];
for (let k in theme.exercices) {
ret[theme.exercices[k].urlid] = theme.exercices[k];
}
}
return ret;
},
null
);
export const max_solved = derived(
themesStore,
($themesStore) => {
@ -109,3 +142,19 @@ export const max_solved = derived(
return ret;
},
);
export const set_current_theme = writable(null)
export const current_theme = derived(
[set_current_theme, themes_idx],
([$set_current_theme, $themes_idx]) => {
if ($themes_idx === null || Object.keys($themes_idx).length == 0) {
return null;
}
if ($themes_idx[$set_current_theme])
return $themes_idx[$set_current_theme];
return undefined;
}
)

20
frontend/ui/src/routes/[theme]/+layout.js
View File

@ -1,19 +1,5 @@
import { get_store_value } from 'svelte/internal';
import { set_current_theme } from '$lib/stores/themes';
import { themes } from '$lib/stores/themes.js';
export async function load({ params }) {
const thms = get_store_value(themes);
let theme = null;
for (let th in thms) {
if (thms[th] && thms[th].urlid === params.theme) {
theme = thms[th];
break;
}
}
return {
theme,
};
export function load({ params }) {
set_current_theme.set(params.theme);
}

45
frontend/ui/src/routes/[theme]/+layout.svelte
View File

@ -1,31 +1,44 @@
<script>
import {
Alert,
Container,
Spinner,
} from 'sveltestrap';
import { challengeInfo } from '$lib/stores/challengeinfo.js';
export let data;
import { challengeInfo } from '$lib/stores/challengeinfo';
import { current_theme } from '$lib/stores/themes';
</script>
<svelte:head>
<title>{data.theme?data.theme.name:""} - {$challengeInfo.title}</title>
<title>{$current_theme?($current_theme.name + " - "):""}{$challengeInfo.title}</title>
</svelte:head>
{#if data.theme}
<div style="background-image: url({data.theme.image})" class="page-header">
<Container class="text-primary">
<h1 class="display-2">
<a href="{data.theme.urlid}">{data.theme.name}</a>
</h1>
<h2>{@html data.theme.authors}</h2>
{#if $current_theme === null}
<Container class="d-flex justify-content-center mt-5 text-dark align-items-center">
<Spinner size="lg" type="border" color="dark" />
<span class="ms-3 display-6">Chargement en cours&hellip;</span>
</Container>
{:else if !$current_theme}
<Container>
<Alert color="danger" class="mt-3" fade={false}>
<Icon name="dash-circle-fill" />
Ce scénario n'existe pas.
</Alert>
</Container>
{:else}
<div style="background-image: url({$current_theme.image})" class="page-header">
<Container class="text-primary">
<h1 class="display-2">
<a href="{$current_theme.urlid}">{$current_theme.name}</a>
</h1>
<h2>{@html $current_theme.authors}</h2>
</Container>
<div class="headerfade"></div>
</div>
<Container>
<slot></slot>
</Container>
<div class="headerfade"></div>
</div>
{/if}
<Container>
<slot></slot>
</Container>
<style>
.page-header {

7
frontend/ui/src/routes/[theme]/+page.js
View File

@ -1,7 +0,0 @@
export async function load({ parent }) {
const data = await parent();
return {
theme: data.theme,
};
}

53
frontend/ui/src/routes/[theme]/+page.svelte
View File

@ -1,6 +1,5 @@
<script>
import {
Alert,
Badge,
Button,
Card,
@ -13,33 +12,31 @@
import { goto } from '$app/navigation';
import { current_theme } from '$lib/stores/themes';
import { my } from '$lib/stores/my.js';
export let data;
</script>
{#if data && data.theme && data.theme.exercices}
<Card class="niceborder text-indent mt-2 mb-4">
<CardBody class="bg-dark text-light">
<Row>
<Col>
<p class="mt-4 mx-3 card-text lead text-justify">{@html data.theme.headline}</p>
<p class="mb-4 mx-3 card-text text-justify">{@html data.theme.intro}</p>
<p class="mt-4 mx-3 card-text lead text-justify">{@html $current_theme.headline}</p>
<p class="mb-4 mx-3 card-text text-justify">{@html $current_theme.intro}</p>
</Col>
{#if data.theme.partner_txt || data.theme.partner_img || data.theme.partner_href}
{#if $current_theme.partner_txt || $current_theme.partner_img || $current_theme.partner_href}
<Col md="2" lg="3" class="d-none d-md-block">
<Card class="pt-3 px-3">
{#if data.theme.partner_img}
<img src="{data.theme.partner_img}" class="card-img-top">
{#if $current_theme.partner_img}
<img src="{$current_theme.partner_img}" class="card-img-top">
{/if}
{#if data.theme.partner_txt || data.theme.partner_href}
{#if $current_theme.partner_txt || $current_theme.partner_href}
<CardBody class="p-0 mt-3">
{#if data.theme.partner_txt}
{@html data.theme.partner_txt}
{#if $current_theme.partner_txt}
{@html $current_theme.partner_txt}
{/if}
{#if data.theme.partner_href}
<Button tag="a" color="primary" href="{data.theme.partner_href}">
{#if $current_theme.partner_href}
<Button tag="a" color="primary" href="{$current_theme.partner_href}">
Visiter le site
</Button>
{/if}
@ -51,12 +48,13 @@
</Row>
</CardBody>
{#if $current_theme.exercices}
<ul class="list-group">
{#each Object.keys(data.theme.exercices) as k, index}
{#each Object.keys($current_theme.exercices) as k, index}
<li
class="list-group-item"
class:list-group-item-action={$my && $my.exercices[k]}
on:click={goto(`${data.theme.urlid}/${data.theme.exercices[k].urlid}`)}
on:click={goto(`${$current_theme.urlid}/${$current_theme.exercices[k].urlid}`)}
>
<div class="row">
<div class="col-1" style="margin-top: -0.5rem; margin-bottom: -0.5rem; text-align: right; border-right: 5px solid #{$my && $my.exercices[k] && $my.exercices[k].solved_rank ? '62c462' : 'bbb'}">
@ -65,37 +63,37 @@
<div style="position: absolute; margin-left: calc(var(--bs-gutter-x) * -.5 - 15px); margin-top: -0.5rem;">
<svg style="height: 50px; width: 23px;">
<rect
style="fill:#{$my && $my.exercices[k] && (index < 1 || ($my.exercices[Object.keys(data.theme.exercices)[index-1]] && $my.exercices[Object.keys(data.theme.exercices)[index-1]].solved_rank)) ? '62c462' : 'bbb'}"
style="fill:#{$my && $my.exercices[k] && (index < 1 || ($my.exercices[Object.keys($current_theme.exercices)[index-1]] && $my.exercices[Object.keys($current_theme.exercices)[index-1]].solved_rank)) ? '62c462' : 'bbb'}"
width="5"
height="30"
x="10"
y="0" />
<path
style="fill:#{$my && $my.exercices[k] ? ($my.exercices[k].solved_rank ? '62c462' : (data.theme.exercices[k].curcoeff > 1.0 ? 'f89406' : '5bc0de')) : '555'}"
style="fill:#{$my && $my.exercices[k] ? ($my.exercices[k].solved_rank ? '62c462' : ($current_theme.exercices[k].curcoeff > 1.0 ? 'f89406' : '5bc0de')) : '555'}"
d="m 22,20 a 9.5700617,9.5700617 0 0 1 -9.5690181,9.57006 9.5700617,9.5700617 0 0 1 -9.57110534,-9.56797 9.5700617,9.5700617 0 0 1 9.56692984,-9.57215 9.5700617,9.5700617 0 0 1 9.5731926,9.56588" />
</svg>
</div>
{#each data.theme.exercices[k].tags as tag, idx}
{#each $current_theme.exercices[k].tags as tag, idx}
<Badge href="tags/{tag}" pill color="secondary" class="mx-1 float-end">#{tag}</Badge>
{/each}
<h5 class="fw-bold">
{#if $my && $my.exercices[k]}
{data.theme.exercices[k].title}
{$current_theme.exercices[k].title}
{:else}
<span style="white-space: nowrap">
<Icon name="lock-fill" aria-hidden="true" title="Vous n'avez pas encore accès à ce défi" />
{data.theme.exercices[k].title}
{$current_theme.exercices[k].title}
</span>
{/if}
{#if data.theme.exercices[k].curcoeff > 1.0}
{#if $current_theme.exercices[k].curcoeff > 1.0}
<Icon name="gift" aria-hidden="true" title="Un bonus est actuellement appliqué lors de la résolution de ce défi" />
{/if}
</h5>
<p>{@html data.theme.exercices[k].headline}</p>
<p>{@html $current_theme.exercices[k].headline}</p>
</div>
<div class="d-none d-md-block col-1">
{#if $my && $my.exercices[k]}
<a class="float-right" href="{data.theme.urlid}/{data.theme.exercices[k].urlid}" style="font-size: 3rem">
<a class="float-right" href="{$current_theme.urlid}/{$current_theme.exercices[k].urlid}" style="font-size: 3rem">
<Icon name="chevron-right" aria-hidden="true" />
</a>
{:else}
@ -108,14 +106,9 @@
</li>
{/each}
</ul>
{/if}
</Card>
{:else}
<Alert color="danger" fade={false}>
<Icon name="dash-circle-fill" />
Ce scénario n'existe pas.
</Alert>
{/if}
<style>
.list-group-item-action {

5
frontend/ui/src/routes/[theme]/[exercice]/+layout.js Normal file
View File

@ -0,0 +1,5 @@
import { set_current_exercice } from '$lib/stores/exercices';
export function load({ params }) {
set_current_exercice.set(params.exercice);
}

31
frontend/ui/src/routes/[theme]/[exercice]/+layout.svelte Normal file
View File

@ -0,0 +1,31 @@
<script>
import {
Alert,
Spinner,
} from 'sveltestrap';
import ThemeNav from '$lib/components/ThemeNav.svelte';
import { challengeInfo } from '$lib/stores/challengeinfo';
import { current_exercice } from '$lib/stores/exercices';
import { current_theme } from '$lib/stores/themes';
</script>
<svelte:head>
<title>{$current_exercice?$current_exercice.title+" - ":""}{$challengeInfo.title}</title>
</svelte:head>
{#if $current_exercice === null}
<div class="d-flex justify-content-center mt-5 text-dark align-items-center">
<Spinner size="lg" type="border" color="dark" />
<span class="ms-3 display-6">Chargement en cours&hellip;</span>
</div>
{:else if !$current_exercice}
<Alert color="warning" class="mt-3" fade={false}>
<Icon name="dash-circle-fill" />
Vous n'avez pas encore accès à ce défi.
</Alert>
{:else}
<ThemeNav theme={$current_theme} exercice={$current_exercice} />
<slot></slot>
{/if}

22
frontend/ui/src/routes/[theme]/[exercice]/+page.js
View File

@ -1,22 +0,0 @@
import { get_store_value } from 'svelte/internal';
import { themes } from '$lib/stores/themes.js';
export async function load({ params, parent }) {
const stuff = await parent();
let exercice = null;
for (let ex in stuff.theme.exercices) {
if (stuff.theme.exercices[ex].urlid === params.exercice) {
exercice = stuff.theme.exercices[ex];
exercice.id = ex;
break;
}
}
return {
theme: stuff.theme,
exercice: exercice,
};
}

102
frontend/ui/src/routes/[theme]/[exercice]/+page.svelte
View File

@ -16,46 +16,30 @@
import ExerciceHints from '$lib/components/ExerciceHints.svelte';
import ExerciceSolved from '$lib/components/ExerciceSolved.svelte';
import ExerciceVideo from '$lib/components/ExerciceVideo.svelte';
import ThemeNav from '$lib/components/ThemeNav.svelte';
import { challengeInfo } from '$lib/stores/challengeinfo.js';
import { my } from '$lib/stores/my.js';
import { settings } from '$lib/stores/settings.js';
import { current_exercice } from '$lib/stores/exercices';
import { my } from '$lib/stores/my';
import { current_theme } from '$lib/stores/themes';
import { settings } from '$lib/stores/settings';
export let data;
let solved = {};
</script>
<svelte:head>
<title>{data.exercice?data.exercice.title+" - ":""}{$challengeInfo.title}</title>
</svelte:head>
{#if data.exercice}
<ThemeNav theme={data.theme} exercice={data.exercice} />
{/if}
{#if !$my || !data.exercice || !$my.exercices[data.exercice.id]}
<Alert color="warning" class="mt-3" fade={false}>
<Icon name="dash-circle-fill" />
Vous n'avez pas encore accès à ce défi.
</Alert>
{/if}
{#if data.exercice}
{#if $current_exercice}
<Card body class="niceborder text-indent my-3">
<h3 class="display-4">{data.exercice.title}</h3>
<h3 class="display-4">{$current_exercice.title}</h3>
<div>
{#each data.exercice.tags as tag, index}
{#each $current_exercice.tags as tag, index}
<Badge href="tags/{tag}" pill color="secondary" class="mx-1 mb-2" >#{tag}</Badge>
{/each}
</div>
{#if !$my || !$my.exercices[data.exercice.id]}
<p class="lead text-justify">{@html data.exercice.headline}</p>
{#if !$my || !$my.exercices[$current_exercice.id]}
<p class="lead text-justify">{@html $current_exercice.headline}</p>
{:else}
<p class="lead text-justify">{@html $my.exercices[data.exercice.id].statement}</p>
{#if $my.exercices[data.exercice.id].issue}
<Alert color="{$my.exercices[data.exercice.id].issuekind}">
{@html $my.exercices[data.exercice.id].issue}
<p class="lead text-justify">{@html $my.exercices[$current_exercice.id].statement}</p>
{#if $my.exercices[$current_exercice.id].issue}
<Alert color="{$my.exercices[$current_exercice.id].issuekind}">
{@html $my.exercices[$current_exercice.id].issue}
</Alert>
{/if}
{/if}
@ -65,31 +49,31 @@
<ul>
<li>
<strong>Gain&nbsp;:</strong>
{data.exercice.gain} {data.exercice.gain==1?"point":"points"}
{#if $settings.firstBlood && data.exercice.solved < 1}
{$current_exercice.gain} {$current_exercice.gain==1?"point":"points"}
{#if $settings.firstBlood && $current_exercice.solved < 1}
<em>+{$settings.firstBlood * 100}% (prem's)</em>
{/if}
{#if data.exercice.curcoeff != 1.0 || $settings.exerciceCurrentCoefficient != 1.0}
<em>{#if data.exercice.curcoeff * $settings.exerciceCurrentCoefficient > 1}+{Math.round((data.exercice.curcoeff * $settings.exerciceCurrentCoefficient - 1) * 100)}{:else}-{Math.round((1-(data.exercice.curcoeff * $settings.exerciceCurrentCoefficient)) * 100)}{/if}% (bonus)</em>
{#if $current_exercice.curcoeff != 1.0 || $settings.exerciceCurrentCoefficient != 1.0}
<em>{#if $current_exercice.curcoeff * $settings.exerciceCurrentCoefficient > 1}+{Math.round(($current_exercice.curcoeff * $settings.exerciceCurrentCoefficient - 1) * 100)}{:else}-{Math.round((1-($current_exercice.curcoeff * $settings.exerciceCurrentCoefficient)) * 100)}{/if}% (bonus)</em>
{/if}
</li>
<li>
<strong>Tenté par&nbsp;:</strong>
{#if !data.exercice.tried}
{#if !$current_exercice.tried}
aucune équipe
{:else}
{data.exercice.tried} {data.exercice.tried == 1?"équipe":"équipes"}
{#if $my && $my.exercices[data.exercice.id] && $my.exercices[data.exercice.id].total_tries}
(cumulant {$my.exercices[data.exercice.id].total_tries} {$my.exercices[data.exercice.id].total_tries == 1?"tentative":"tentatives"})
{$current_exercice.tried} {$current_exercice.tried == 1?"équipe":"équipes"}
{#if $my && $my.exercices[$current_exercice.id] && $my.exercices[$current_exercice.id].total_tries}
(cumulant {$my.exercices[$current_exercice.id].total_tries} {$my.exercices[$current_exercice.id].total_tries == 1?"tentative":"tentatives"})
{/if}
{/if}
</li>
<li>
<strong>Résolu par&nbsp;:</strong>
{#if !data.exercice.solved}
{#if !$current_exercice.solved}
aucune équipe
{:else}
{data.exercice.solved} {data.exercice.solved == 1?"équipe":"équipes"}
{$current_exercice.solved} {$current_exercice.solved == 1?"équipe":"équipes"}
{/if}
</li>
</ul>
@ -97,13 +81,13 @@
{#if $my && $my.team_id}
<Col>
{#if $settings.acceptNewIssue}
<a href="issues/?eid={data.exercice.id}" class="float-end btn btn-sm btn-warning">
<a href="issues/?eid={$current_exercice.id}" class="float-end btn btn-sm btn-warning">
<Icon name="bug" />
Rapporter une anomalie sur ce défi
</a>
{/if}
{#if $settings.QAenabled}
<a href="qa/exercices/{data.exercice.id}" class="float-end btn btn-sm btn-info" target="_self">
<a href="qa/exercices/{$current_exercice.id}" class="float-end btn btn-sm btn-info" target="_self">
<Icon name="bug" />
Voir les éléments QA sur ce défi
</a>
@ -113,48 +97,48 @@
</Row>
</Card>
{#if $my && $my.exercices[data.exercice.id]}
{#if $my && $my.exercices[$current_exercice.id]}
<Row class="mt-4">
<Col lg="6" class="mb-5">
{#if $my.exercices[data.exercice.id].files}
{#if $my.exercices[$current_exercice.id].files}
<ExerciceDownloads
files={$my.exercices[data.exercice.id].files}
files={$my.exercices[$current_exercice.id].files}
/>
{/if}
{#if $my.exercices[data.exercice.id].hints}
{#if $my.exercices[$current_exercice.id].hints}
<ExerciceHints
exercice={$my.exercices[data.exercice.id]}
hints={$my.exercices[data.exercice.id].hints}
exercice={$my.exercices[$current_exercice.id]}
hints={$my.exercices[$current_exercice.id].hints}
/>
{/if}
</Col>
<Col lg="6" class="mb-5">
{#if $my.exercices[data.exercice.id].flags && $my.exercices[data.exercice.id].non_found_flags > 0 && !solved[data.exercice.id]}
{#if $my.exercices[$current_exercice.id].flags && $my.exercices[$current_exercice.id].non_found_flags > 0 && !solved[$current_exercice.id]}
<ExerciceFlags
exercice={$my.exercices[data.exercice.id]}
bind:forcesolved={solved[data.exercice.id]}
flags={$my.exercices[data.exercice.id].flags}
exercice={$my.exercices[$current_exercice.id]}
bind:forcesolved={solved[$current_exercice.id]}
flags={$my.exercices[$current_exercice.id].flags}
/>
{/if}
{#if $my.exercices[data.exercice.id].solved_rank || solved[data.exercice.id]}
{#if $my.exercices[$current_exercice.id].solved_rank || solved[$current_exercice.id]}
<ExerciceSolved
theme={data.theme}
exercice={$my.exercices[data.exercice.id]}
theme={$current_theme}
exercice={$my.exercices[$current_exercice.id]}
/>
{/if}
{#if $my.exercices[data.exercice.id].resolution || $my.exercices[data.exercice.id].video_uri}
{#if $my.exercices[$current_exercice.id].resolution || $my.exercices[$current_exercice.id].video_uri}
<Card class="border-success mb-2">
<CardHeader class="bg-success text-light">
<Icon name="laptop-fill" />
Solution du défi
</CardHeader>
{#if $my.exercices[data.exercice.id].resolution}
{#if $my.exercices[$current_exercice.id].resolution}
<CardBody>
{@html $my.exercices[data.exercice.id].resolution}
{@html $my.exercices[$current_exercice.id].resolution}
</CardBody>
{/if}
{#if $my.exercices[data.exercice.id].video_uri}
<ExerciceVideo uri={$my.exercices[data.exercice.id].video_uri} />
{#if $my.exercices[$current_exercice.id].video_uri}
<ExerciceVideo uri={$my.exercices[$current_exercice.id].video_uri} />
{/if}
</Card>
{/if}