refactor(tools): activity history to module

1 files changed, 87 insertions, 0 deletions

diff --git a/src/lib/Tools/ActivityHistory/Grid.svelte b/src/lib/Tools/ActivityHistory/Grid.svelte
new file mode 100644
index 00000000..a53c1c90
--- /dev/null
+++ b/src/lib/Tools/ActivityHistory/Grid.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+	import {
+		fillMissingDays,
+		type ActivityHistoryEntry,
+		activityHistory
+	} from '$lib/AniList/activity';
+	import { onMount } from 'svelte';
+	import userIdentity from '../../../stores/userIdentity';
+	import {
+		userIdentity as getUserIdentity,
+		type AniListAuthorisation
+	} from '$lib/AniList/identity';
+	import { clearAllParameters } from '../../Utility/parameters';
+
+	export let user: AniListAuthorisation;
+	export let activityData: ActivityHistoryEntry[] | null = null;
+
+	let activityHistoryData: ActivityHistoryEntry[];
+	let currentUserIdentity = { name: '', id: -1 };
+	let baseHue = Math.floor(Math.random() * 360);
+
+	onMount(async () => {
+		clearAllParameters();
+
+		if (user !== undefined) {
+			if ($userIdentity === '') userIdentity.set(JSON.stringify(await getUserIdentity(user)));
+
+			currentUserIdentity = JSON.parse($userIdentity);
+			currentUserIdentity.name = currentUserIdentity.name;
+			activityHistoryData = activityData || (await activityHistory(currentUserIdentity));
+		}
+	});
+
+	const gradientColour = (amount: number, maxAmount: number, baseHue: number) => {
+		const lightness = 100 - Math.round((amount / maxAmount) * 50);
+
+		return `hsl(${baseHue}, 100%, ${lightness}%)`;
+	};
+</script>
+
+{#if user === undefined}
+	Please log in to view this page.
+{:else if activityHistoryData === undefined}
+	Loading activity history ... 50%
+{:else}
+	{@const filledActivities = fillMissingDays(activityHistoryData)}
+	{@const highestActivity = Math.max(...filledActivities.map((activity) => activity.amount))}
+
+	<div class="grid">
+		{#each filledActivities as activity}
+			<div
+				class="grid-item"
+				style="background-color: {gradientColour(activity.amount, highestActivity, baseHue)}"
+				on:click={() => (baseHue = Math.floor(Math.random() * 360))}
+				on:keydown={() => {
+					return;
+				}}
+				role="button"
+				tabindex="0"
+				title={`Date: ${new Date(activity.date * 1000).toLocaleDateString()}\nAmount: ${
+					activity.amount
+				}`}
+			/>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(52, 1fr);
+		grid-template-rows: repeat(7, 1fr);
+		/* gap: 2px; */
+		grid-auto-flow: column;
+		width: min-content;
+		background-color: white;
+		border-radius: 3px;
+		overflow: hidden;
+	}
+	.grid-item {
+		width: 20px;
+		height: 20px;
+		/* width: 3.25vw; */
+		/* height: 3.25vw; */
+		/* border: 1px solid #ccc; */
+	}
+</style>