blob: 67c00c53c23d02029e32e716147786d34bf042b5 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
<script lang="ts">
import Spacer from "$lib/Layout/Spacer.svelte";
import LinkedTooltip from "$lib/Tooltip/LinkedTooltip.svelte";
import tooltip from "$lib/Tooltip/tooltip";
import locale from "$stores/locale";
import { databaseTimeToDate } from "$lib/Utility/time";
import FallbackImage from "$lib/Image/FallbackImage.svelte";
import { cdn, thumbnail } from "$lib/Utility/image";
import FallbackBadge from "./FallbackBadge.svelte";
import type { Preferences } from "../../../graphql/$types";
import type { IndexedBadge } from "./badge";
export let ungroupedBadges: IndexedBadge[];
export let groupedBadges: [string, IndexedBadge[]][];
export let categoryFilter: string | null;
export let editMode: boolean;
export let preferences: Preferences | undefined;
export let selectedBadge: IndexedBadge | undefined = undefined;
</script>
{#if ungroupedBadges.length === 0}
<div class="card">
No due.moe registered badges found for this user. <a
href={'#'}
onclick={(e) => e.preventDefault()}
title="This alert does not include AWC badges."
use:tooltip>?</a
>
</div>
{/if}
{#each groupedBadges as [category, unsortedBadges]}
{@const badges = unsortedBadges.sort(
(a, b) => new Date(b.time || 0).getTime() - new Date(a.time || 0).getTime()
)}
<details open={categoryFilter ? categoryFilter === category : true}>
<summary>{category}</summary>
<Spacer />
<div class="badges">
{#each badges as badge}
<div id={`badge-${badge.id}`}>
{#if editMode}
<LinkedTooltip
content={`${
badge.time ? $locale().dateFormatter(databaseTimeToDate(badge.time)) : ''
}${badge.description ? `\n${badge.description}` : ''}${
badge.designer ? `\nDesigner: ${badge.designer}` : ''
}${badge.source ? `\nSource: ${badge.source}` : ''}`}
pin={`badge-${badge.id}`}
pinPosition="top"
relative
>
<a
href={`#`}
onclick={() => {
selectedBadge = badge;
const hiddenInput = document.querySelector('input[name="hidden"]');
if (hiddenInput instanceof HTMLInputElement)
hiddenInput.value = badge.hidden ? 'Hidden' : 'Shown';
}}
>
<FallbackImage
source={cdn(thumbnail(badge.image))}
alternative={badge.description}
fallback={thumbnail(badge.image)}
style={badge.hidden || badge.shadow_hidden
? 'filter: grayscale(100%); opacity: 50%;'
: ''}
/>
</a>
</LinkedTooltip>
{:else}
<FallbackBadge
{badge}
bind:selectedBadge
source={cdn(thumbnail(badge.image))}
alternative={badge.description}
fallback={thumbnail(badge.image)}
hideOnError={preferences ? preferences.hide_missing_badges : true}
style={badge.hidden || badge.shadow_hidden
? 'filter: grayscale(100%); opacity: 50%;'
: ''}
{preferences}
/>
{/if}
</div>
{/each}
</div>
</details>
{#if groupedBadges[groupedBadges.length - 1][0] !== category}
<Spacer />
{/if}
{/each}
|