server/frontend/fic/src/lib/components/NavThemes.svelte

56 lines
1.6 KiB
Svelte

<script>
import {
Badge,
Dropdown,
DropdownItem,
DropdownMenu,
DropdownToggle,
Icon,
} from 'sveltestrap';
import { my } from '$lib/stores/my.js';
import { max_solved } from '$lib/stores/themes.js';
import { myThemes, themes } from '$lib/stores/mythemes.js';
</script>
<Dropdown nav inNavbar>
<DropdownToggle nav caret>
<Icon name="tv" />
Scenarii
</DropdownToggle>
<DropdownMenu class="niceborder">
<div>
{#each $themes as th, index}
<DropdownItem href="{th.urlid}">
{th.name}
{#if $max_solved > 1 && th.solved == $max_solved}
<Badge color="danger">
<Icon name="heart-fill" />
</Badge>
{/if}
{#if th.exercice_coeff_max > 1}
<Badge color="success">
<Icon name="gift-fill" />
</Badge>
{/if}
{#if th.locked}
<Badge color="light">
<Icon name="lock-fill" />
</Badge>
{/if}
<Badge>
{#if $my && $my.team_id}{$myThemes[th.id].exercice_solved}/{/if}{th.exercice_count}
</Badge>
</DropdownItem>
{/each}
</div>
</DropdownMenu>
</Dropdown>
<style>
div {
overflow-y: auto;
max-height: calc(80vh - 100px);
}
</style>