|
1 | 1 | <script lang="ts">
|
2 | 2 | import VoteCard from '$components/VoteCard/VoteCard.svelte';
|
3 | 3 | import { formatThaiDate } from '$lib/date-parser';
|
| 4 | + import type { GlobalEvent } from '$models/global-event'; |
4 | 5 | import { PromiseStatus, type Promise } from '$models/promise';
|
5 | 6 | import { Bullhorn, CheckmarkFilled } from 'carbon-icons-svelte';
|
6 | 7 | import { twMerge } from 'tailwind-merge';
|
7 | 8 |
|
8 | 9 | export let promise: Promise;
|
| 10 | + export let globalEvents: GlobalEvent[]; |
9 | 11 |
|
10 |
| - $: timeline = promise.progresses.sort((a, b) => { |
| 12 | + $: timeline = [...promise.progresses, ...globalEvents].sort((a, b) => { |
11 | 13 | return b.date > a.date ? 1 : -1;
|
12 | 14 | });
|
13 | 15 |
|
|
26 | 28 | };
|
27 | 29 | </script>
|
28 | 30 |
|
29 |
| -{#each timeline as progress, index} |
| 31 | +{#each timeline as event, index} |
| 32 | + {@const isProgress = 'type' in event} |
30 | 33 | <div
|
31 | 34 | class={twMerge(
|
32 | 35 | 'p-4 pb-0 text-text-01',
|
33 |
| - progress.type === 'indirect' && 'text-gray-60', |
| 36 | + isProgress && event.type === 'indirect' && 'text-gray-60', |
34 | 37 | index === 0 && promise.status === PromiseStatus.inProgress && 'bg-yellow-10',
|
35 | 38 | index === 0 && promise.status === PromiseStatus.fulfilled && 'bg-green-10',
|
36 | 39 | index === 0 && promise.status === PromiseStatus.unhonored && 'bg-magenta-10'
|
|
45 | 48 | class={twMerge(
|
46 | 49 | 'absolute inset-0 mx-auto w-[1px] flex-1 border-l border-l-text-primary',
|
47 | 50 | index !== 0 && '-top-4',
|
48 |
| - progress.type === 'indirect' && 'border-dashed', |
| 51 | + isProgress && event.type === 'indirect' && 'border-dashed border-l-gray-60', |
49 | 52 | index === timeline.length - 1 && 'h-4',
|
50 |
| - progress.type === 'indirect' && 'border-l-gray-60' |
| 53 | + !isProgress && 'border-dashed border-l-gray-60' |
51 | 54 | )}
|
52 |
| - ></div> |
53 |
| - {#if progress.type === 'checkpoint'} |
| 55 | + /> |
| 56 | + {#if isProgress && event.type === 'checkpoint'} |
54 | 57 | <CheckmarkFilled
|
55 | 58 | size={24}
|
56 | 59 | class={twMerge(
|
|
61 | 64 | )}
|
62 | 65 | />
|
63 | 66 | {/if}
|
64 |
| - {#if progress.type === 'indirect'} |
| 67 | + {#if !isProgress || event.type === 'indirect'} |
65 | 68 | <Bullhorn
|
66 | 69 | size={24}
|
67 | 70 | class={twMerge(
|
|
75 | 78 | </div>
|
76 | 79 | <div class="flex flex-1 flex-col gap-6 md:flex-row">
|
77 | 80 | <div class="mb-4 flex flex-1 flex-col gap-2">
|
78 |
| - <div class="body-01">{formatThaiDate(progress.date, true)}</div> |
79 |
| - <div class="heading-02">{progress.title}</div> |
80 |
| - {#if progress.description} |
81 |
| - <div class="body-01">{progress.description}</div> |
| 81 | + <div class={twMerge('body-01', !isProgress && 'text-text-02')}> |
| 82 | + {formatThaiDate(event.date, true)} |
| 83 | + </div> |
| 84 | + <div class={twMerge('heading-02', !isProgress && 'text-text-02')}> |
| 85 | + {event.title} |
| 86 | + </div> |
| 87 | + {#if event.description} |
| 88 | + <div class={twMerge('body-01', !isProgress && 'text-text-02')}> |
| 89 | + {event.description} |
| 90 | + </div> |
82 | 91 | {/if}
|
83 |
| - {#if progress.url} |
| 92 | + {#if event.url} |
84 | 93 | <div class="label-01 text-gray-60">
|
85 | 94 | ที่มา: <a
|
86 |
| - href={progress.url} |
| 95 | + href={event.url} |
87 | 96 | target="_blank"
|
88 | 97 | rel="noopener noreferrer"
|
89 | 98 | class="label-01 break-all underline"
|
90 | 99 | >
|
91 |
| - {progress.url} |
| 100 | + {event.url} |
92 | 101 | </a>
|
93 | 102 | </div>
|
94 | 103 | {/if}
|
95 | 104 | </div>
|
96 |
| - {#if progress.votingSummary} |
| 105 | + {#if isProgress && event.votingSummary} |
97 | 106 | <VoteCard
|
98 | 107 | voting={{
|
99 |
| - id: progress.votingSummary.id, |
100 |
| - nickname: progress.votingSummary.title || '', |
101 |
| - date: progress.votingSummary.date, |
102 |
| - result: progress.votingSummary.result |
| 108 | + id: event.votingSummary.id, |
| 109 | + nickname: event.votingSummary.title || '', |
| 110 | + date: event.votingSummary.date, |
| 111 | + result: event.votingSummary.result |
103 | 112 | }}
|
104 | 113 | highlightedVoteByGroups={highlightedVoteByGroups(
|
105 |
| - progress.votingSummary.resultsByAffiliation, |
106 |
| - progress.votingSummary.result |
| 114 | + event.votingSummary.resultsByAffiliation, |
| 115 | + event.votingSummary.result |
107 | 116 | )}
|
108 | 117 | class="mb-4"
|
109 | 118 | />
|
|
0 commit comments