aboutsummaryrefslogtreecommitdiff
path: root/src/routes/completed/+page.svelte
blob: b80ccb8c2e8e302398575443e0c0a6e40ab166f3 (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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<script lang="ts">
	import { onMount } from 'svelte';
	import { userIdentity as getUserIdentity } from '$lib/AniList/identity';
	import userIdentity from '../../stores/userIdentity';
	import settings from '../../stores/settings';
	import WatchingAnimeList from '$lib/List/Anime/CompletedAnimeList.svelte';
	import { lastActivityDate } from '$lib/AniList/activity';
	import ListTitle from '$lib/List/ListTitle.svelte';
	import MangaListTemplate from '$lib/List/Template/MangaListTemplate.svelte';

	export let data;

	let currentUserIdentity = { name: '', id: -1 };
	let lastActivityWasToday = true;

	onMount(async () => {
		if ($settings.limitListHeight) {
			document.querySelectorAll('.list').forEach((list) => {
				(list as HTMLElement).style.maxHeight = `calc(100vh - ${
					document.querySelector('#list-container')?.getBoundingClientRect().bottom
				}px + 1.1rem)`;
			});
		}

		if (data.user !== undefined) {
			if ($userIdentity === '') {
				userIdentity.set(JSON.stringify(await getUserIdentity(data.user)));
			}

			currentUserIdentity = JSON.parse($userIdentity);
			currentUserIdentity.name = currentUserIdentity.name;
			lastActivityWasToday =
				(await lastActivityDate(currentUserIdentity)).toDateString() >= new Date().toDateString();

			if (!lastActivityWasToday) {
				if ($settings.limitListHeight) {
					document.querySelectorAll('.list').forEach((list) => {
						(list as HTMLElement).style.maxHeight = `calc((100vh - ${
							document.querySelector('#list-container')?.getBoundingClientRect().bottom
						}px) - 1.9rem)`;
					});
				}
			}
		}
	});

	const timeLeftToday = () => {
		const now = new Date();
		const currentHour = now.getHours();
		const currentMinute = now.getMinutes();
		const hoursLeft = 24 - currentHour;
		let minutesLeft = 0;
		let timeLeft = '';

		if (hoursLeft > 0) {
			minutesLeft = hoursLeft * 60 - currentMinute;
		} else {
			minutesLeft = 24 * 60 - (currentHour * 60 + currentMinute);
		}

		if (minutesLeft > 60) {
			timeLeft = `${Math.round(minutesLeft / 60)} hours`;
		} else {
			timeLeft = `${minutesLeft} minutes`;
		}

		return timeLeft;
	};
</script>

{#if !lastActivityWasToday}
	<p>
		You don't have any new activity statuses from the past day! Create one within {timeLeftToday()}
		to keep your streak!
	</p>
{/if}

<div id="list-container">
	{#if data.user === undefined}
		Please log in to view due media.
	{:else}
		<details open={!$settings.closeAnimeByDefault} class="list">
			{#if currentUserIdentity.id != -1}
				<WatchingAnimeList user={data.user} identity={currentUserIdentity} />
			{:else}
				<ListTitle custom="Completed Anime" />

				<ul><li>Loading ...</li></ul>
			{/if}
		</details>

		<details open={!$settings.closeMangaByDefault} class="list">
			{#if currentUserIdentity.id != -1}
				<MangaListTemplate
					user={data.user}
					identity={currentUserIdentity}
					displayUnresolved={$settings.displayUnresolved}
					due={false}
				/>
			{:else}
				<ListTitle custom="Completed Anime" />

				<ul><li>Loading ...</li></ul>
			{/if}
		</details>
	{/if}
</div>

<style>
	#list-container {
		display: flex;
		flex-wrap: wrap;
	}

	.list {
		overflow-y: auto;
		min-width: 300px;
		flex: 1 1 300px;
	}
</style>