blob: 5de98065101fffdb50b50e1a65176e3c87a58799 (
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
|
<script lang="ts">
import {
activityHistory,
fillMissingDays,
type ActivityHistoryEntry
} from '$lib/AniList/activity';
import { onMount } from 'svelte';
import userIdentity from '$stores/identity';
import type { AniListAuthorisation } from '$lib/AniList/identity';
import { clearAllParameters } from '../../Utility/parameters';
import { domToBlob } from 'modern-screenshot';
import ActivityHistoryGrid from './Grid.svelte';
import SettingHint from '$lib/Settings/SettingHint.svelte';
import Skeleton from '$lib/Loading/Skeleton.svelte';
import Popup from '$lib/Popup.svelte';
export let user: AniListAuthorisation;
let activityHistoryData: Promise<ActivityHistoryEntry[]>;
let generated = false;
onMount(async () => {
clearAllParameters();
if (user !== undefined) activityHistoryData = activityHistory($userIdentity);
});
// const incrementDate = (date: Date): Date => {
// date.setDate(date.getDate() + 1);
// return date;
// };
const screenshot = async () => {
let element = document.querySelector('.grid') as HTMLElement;
if (element !== null) {
domToBlob(element, {
quality: 1,
scale: 2
}).then((blob) => {
const downloadWrapper = document.createElement('a');
const image = document.createElement('img');
const object = (window.URL || window.webkitURL || window || {}).createObjectURL(blob);
downloadWrapper.href = object;
downloadWrapper.target = '_blank';
image.src = object;
downloadWrapper.appendChild(image);
const gridFinal = document.getElementById('grid-final');
if (gridFinal !== null) {
gridFinal.innerHTML = '';
gridFinal.appendChild(downloadWrapper);
generated = true;
}
downloadWrapper.click();
});
}
};
</script>
{#if user === undefined}
<Popup fullscreen locked>
<div class="message">Please log in to view this page.</div>
</Popup>
{:else}
{#await activityHistoryData}
<Skeleton card={false} count={5} height="0.9rem" list />
{:then activities}
{#if activities === undefined}
<Skeleton card={false} count={5} height="0.9rem" list />
{:else}
{@const filledActivities = fillMissingDays(activities)}
<div class="card">
<ActivityHistoryGrid {user} />
<p />
<div id="grid-final" />
{#if generated}
<p />
{/if}
<button on:click={screenshot}>Generate grid image</button>
</div>
<p />
<details open>
<summary>Days in risk of developing an activity history hole</summary>
<SettingHint>
Days in which you did not log any activity or only have one activity logged.
</SettingHint>
<ul>
{#each filledActivities as activity}
{#if activity.amount === 0}
<li>
{new Date(
activity.date * 1000 + new Date().getTimezoneOffset() * 60 * 1000
).toDateString()}
</li>
{/if}
{/each}
</ul>
</details>
{/if}
{/await}
{/if}
|