ui: Use ScoreBadge component
This commit is contained in:
parent
5020f378c8
commit
906501cc7b
14
ui/src/lib/components/ScoreBadge.svelte
Normal file
14
ui/src/lib/components/ScoreBadge.svelte
Normal file
@ -0,0 +1,14 @@
|
||||
<script>
|
||||
export let score = 0;
|
||||
</script>
|
||||
|
||||
<span
|
||||
class="badge"
|
||||
class:bg-success={score >= 18}
|
||||
class:bg-info={score < 18 && score >= 15}
|
||||
class:bg-warning={score < 15 && score >= 9}
|
||||
class:bg-danger={score < 9}
|
||||
class:bg-dark={score == "N/A"}
|
||||
>
|
||||
{score}
|
||||
</span>
|
@ -4,6 +4,7 @@
|
||||
import { user } from '$lib/stores/user';
|
||||
import DateFormat from '$lib/components/DateFormat.svelte';
|
||||
import SurveyBadge from '$lib/components/SurveyBadge.svelte';
|
||||
import ScoreBadge from '$lib/components/ScoreBadge.svelte';
|
||||
import SubmissionStatus from '$lib/components/SubmissionStatus.svelte';
|
||||
import { getCategories } from '$lib/categories';
|
||||
import { getSurveys } from '$lib/surveys';
|
||||
@ -144,16 +145,7 @@
|
||||
{/if}
|
||||
</span>
|
||||
{:else}
|
||||
<span
|
||||
class="badge"
|
||||
class:bg-success={score.score >= 18}
|
||||
class:bg-info={score.score < 18 && score.score >= 15}
|
||||
class:bg-warning={score.score < 15 && score.score >= 9}
|
||||
class:bg-danger={score.score < 9}
|
||||
class:bg-dark={score.score == "N/A"}
|
||||
>
|
||||
{score.score}
|
||||
</span>
|
||||
<ScoreBadge score={score.score} />
|
||||
{/if}
|
||||
{:catch error}
|
||||
<i class="bi text-warning bi-exclamation-triangle-fill" title={error}></i>
|
||||
|
@ -3,6 +3,7 @@
|
||||
|
||||
import { user } from '$lib/stores/user';
|
||||
import DateFormat from '$lib/components/DateFormat.svelte';
|
||||
import ScoreBadge from '$lib/components/ScoreBadge.svelte';
|
||||
import SurveyBadge from '$lib/components/SurveyBadge.svelte';
|
||||
import SubmissionStatus from '$lib/components/SubmissionStatus.svelte';
|
||||
import { getCategories } from '$lib/categories';
|
||||
@ -120,16 +121,7 @@
|
||||
{#await getScore(work)}
|
||||
<div class="spinner-border spinner-border-sm" role="status"></div>
|
||||
{:then score}
|
||||
<span
|
||||
class="badge"
|
||||
class:bg-success={score.score >= 18}
|
||||
class:bg-info={score.score < 18 && score.score >= 15}
|
||||
class:bg-warning={score.score < 15 && score.score >= 9}
|
||||
class:bg-danger={score.score < 9}
|
||||
class:bg-dark={score.score == "N/A"}
|
||||
>
|
||||
{score.score}
|
||||
</span>
|
||||
<ScoreBadge score={score.score} />
|
||||
{:catch error}
|
||||
<i class="bi text-warning bi-exclamation-triangle-fill" title={error}></i>
|
||||
{/await}
|
||||
|
@ -3,6 +3,7 @@
|
||||
|
||||
import { user } from '$lib/stores/user';
|
||||
import DateFormat from '$lib/components/DateFormat.svelte';
|
||||
import ScoreBadge from '$lib/components/ScoreBadge.svelte';
|
||||
import SubmissionStatus from '$lib/components/SubmissionStatus.svelte';
|
||||
import SurveyBadge from '$lib/components/SurveyBadge.svelte';
|
||||
import WorkAdmin from '$lib/components/WorkAdmin.svelte';
|
||||
@ -99,7 +100,7 @@
|
||||
<td>
|
||||
<a href="users/{grade.id_user}">{grade.login}</a>
|
||||
</td>
|
||||
<td>{grade.score}</td>
|
||||
<td><ScoreBadge score={grade.score} /></td>
|
||||
<td>{#if grade.comment}{grade.comment}{:else}-{/if}</td>
|
||||
<td>{grade.date}</td>
|
||||
<td>
|
||||
|
Reference in New Issue
Block a user