-
+
+
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 133aca06..de8c1039 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1,26 +1,60 @@
-import { error } from '@sveltejs/kit';
-import type { CharacterIndex } from '$lib/types/index/character';
-import type { WeaponIndex } from '$lib/types/index/weapon';
import BackendService from '$lib/services/backend';
-import type { LayoutLoadEvent } from '../../.svelte-kit/types/src/routes/$types';
-
-/** @type {import('./$types').LayoutServerLoad} */
-export async function load({ fetch }: LayoutLoadEvent) {
- let characterIndex: CharacterIndex;
- let weaponIndex: WeaponIndex;
- const backend = new BackendService();
-
- const characterIndexResponse = await fetch(backend.data.getCharacterIndex());
- const weaponIndexResponse = await fetch(backend.data.getWeaponIndex());
-
- if (characterIndexResponse.ok && weaponIndexResponse.ok) {
- characterIndex = await characterIndexResponse.json();
- weaponIndex = await weaponIndexResponse.json();
- weaponIndex['Unknown3Star'] = { name: 'Unknown 3 star', rarity: 3 };
- } else {
- error(500, 'Internal error');
+import { QueryClient } from '@tanstack/svelte-query';
+import { browser } from '$app/environment';
+import { io } from 'socket.io-client';
+import { applicationState } from '$lib/store/application_state';
+import { get } from 'svelte/store';
+import { toast } from 'svelte-sonner';
+import { userProfile } from '$lib/store/user_profile';
+import i18n from '$lib/services/i18n';
+
+/** @type {import('../../.svelte-kit/types/src/routes/$types').LayoutServerLoad} */
+export async function load() {
+ const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ enabled: browser
+ }
+ }
+ });
+ const backend = BackendService.setupInstance(queryClient);
+
+ if (browser) {
+ backend.user.fetchUserProfile().subscribe((response) => {
+ if (response.status === 'success' && response.data.state === 'SUCCESS') {
+ userProfile.set(response.data.data);
+ }
+ });
+
+ const socket = io(import.meta.env.VITE_BACKEND_URL, { withCredentials: true });
+
+ socket.on('authenticationState', (authenticationState: boolean) => {
+ applicationState.update((state) => {
+ state.isAuthenticated = authenticationState;
+ return state;
+ });
+ });
+
+ socket.on('invalidateQuery', (queryKey: string[]) => {
+ queryClient.invalidateQueries({ queryKey });
+ });
+
+ socket.on(
+ 'toast',
+ (toastMessage: { type: 'success' | 'error' | 'info'; message: string }) => {
+ const message = get(i18n).t(toastMessage.message);
+
+ switch (toastMessage.type) {
+ case 'success':
+ return toast.success(message);
+ case 'error':
+ return toast.error(message);
+ case 'info':
+ return toast.info(message);
+ }
+ }
+ );
}
- // eslint-disable-next-line @typescript-eslint/naming-convention
- return { character: characterIndex, weapon: weaponIndex };
+ return { queryClient, backend };
}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c87c0932..cfd2e8bd 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,9 +3,10 @@
import Text from '$lib/components/typography/Text.svelte';
import DefaultLayout from '$lib/components/layout/DefaultLayout.svelte';
import { Card, CardContent, CardFooter, CardHeader } from '$lib/components/ui/card';
+ import i18n from '$lib/services/i18n';
-
+
-
+ {#if isLoading}
+
-
+
+ {:else}
+
+
+
diff --git a/src/routes/characters/[slug]/+page.svelte b/src/routes/characters/[slug]/+page.svelte
index 693d00ec..fdcdfa88 100644
--- a/src/routes/characters/[slug]/+page.svelte
+++ b/src/routes/characters/[slug]/+page.svelte
@@ -1,6 +1,4 @@
-
-
-
- 
- 
-
-
- {data.characterData.name}
-
-
-
- {#each { length: data.characterData.rarity } as _}
-
+ {#if $fetchCharacterData.status === 'success'}
+
+
+
-
-
- Builds
-
-
-
+
+
+ {$i18n.t('characters.detailed.category.builds.title')}
+
+
+
+ {/if}
diff --git a/src/routes/characters/[slug]/+page.ts b/src/routes/characters/[slug]/+page.ts
index dc0c23ac..fd527c4d 100644
--- a/src/routes/characters/[slug]/+page.ts
+++ b/src/routes/characters/[slug]/+page.ts
@@ -1,23 +1,20 @@
import { isCharacterKey } from '$lib/types/keys/CharacterKey';
import { error } from '@sveltejs/kit';
-import type { Character } from '$lib/types/data/Character';
-import BackendService from '$lib/services/backend';
import type { PageLoadEvent } from '../../../../.svelte-kit/types/src/routes/characters/[slug]/$types';
/** @type {import('./$types').PageLoad} */
-export async function load({ params, fetch }: PageLoadEvent) {
- let characterData: Character;
- const backend = new BackendService();
-
+export async function load({ params, parent, fetch }: PageLoadEvent) {
+ const { queryClient, backend } = await parent();
const key = params.slug;
- if (isCharacterKey(key)) {
- const characterDataResponse = await fetch(backend.data.getCharacter(key));
- if (characterDataResponse.ok) {
- characterData = await characterDataResponse.json();
- return { character: key, characterData };
- }
+ if (!isCharacterKey(key)) {
+ return error(404, 'Not found');
}
- error(500, 'Internal error');
+ await queryClient.prefetchQuery({
+ queryKey: ['fetchCharacterData', key],
+ queryFn: async () => (await fetch(backend.data.getCharacterDataUrl(key))).json()
+ });
+
+ return { characterKey: key };
}
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 9b8119a3..4af6de0c 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -1,17 +1,72 @@
-
-
-
-
+
+
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index f4fb887b..b46927c6 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -1,19 +1,20 @@
-
+
diff --git a/src/routes/settings/import/+page.svelte b/src/routes/settings/import/+page.svelte
index 4f9ec47f..4f4ee0f2 100644
--- a/src/routes/settings/import/+page.svelte
+++ b/src/routes/settings/import/+page.svelte
@@ -1,9 +1,8 @@
-
+
Dval.in
@@ -76,19 +77,21 @@
Watch out!
- This will overwrite your existing data
+ {$i18n.t('settings.import.warning.title')}
+ {$i18n.t('settings.import.warning.description')}
- Start import
+ {$i18n.t('settings.import.start_import_button')}
@@ -105,8 +108,12 @@
- Are you sure?
-
+ {$i18n.t('settings.import.confirmation_dialog.title')}
+
+
+ {$i18n.t('settings.import.confirmation_dialog.description')}
+
@@ -116,9 +123,9 @@
}}
variant="outline"
>
- No
+ {$i18n.t('action.no')}
-
+
diff --git a/src/routes/wish-statistics/[slug]/+page.svelte b/src/routes/wish-statistics/[slug]/+page.svelte
index 7aa04713..0593b534 100644
--- a/src/routes/wish-statistics/[slug]/+page.svelte
+++ b/src/routes/wish-statistics/[slug]/+page.svelte
@@ -1,10 +1,8 @@
-
+
- Rarity distribution
+ {$i18n.t('chart.rarity_distribution.title')}
-
+
diff --git a/src/routes/wish-statistics/[slug]/+page.ts b/src/routes/wish-statistics/[slug]/+page.ts
index 49f1e099..69b6e3f5 100644
--- a/src/routes/wish-statistics/[slug]/+page.ts
+++ b/src/routes/wish-statistics/[slug]/+page.ts
@@ -1,31 +1,12 @@
import { error } from '@sveltejs/kit';
-import type { WishBannerKey } from '$lib/types/keys/WishBannerKey';
-import type { RouteParams } from '../../../../.svelte-kit/types/src/routes/wish-statistics/[slug]/$types';
+import { isWishBannerKey } from '$lib/types/keys/WishBannerKey';
+import type { PageLoadEvent } from '../../../../.svelte-kit/types/src/routes/wish-statistics/[slug]/$types';
/** @type {import('./$types').PageLoad} */
-export async function load({ params }: { params: RouteParams }) {
- let pageType: WishBannerKey;
-
- switch (params.slug) {
- case 'character':
- pageType = 'CharacterEvent';
- break;
- case 'weapon':
- pageType = 'WeaponEvent';
- break;
- case 'standard':
- pageType = 'Standard';
- break;
- case 'beginner':
- pageType = 'Beginner';
- break;
- case 'chronicled':
- pageType = 'Chronicled';
- break;
- default:
- error(404, 'Not found');
+export async function load({ params }: PageLoadEvent) {
+ if (!isWishBannerKey(params.slug)) {
+ return error(404, 'Not found');
}
- // eslint-disable-next-line @typescript-eslint/naming-convention
- return { pageType };
+ return { pageType: params.slug };
}
diff --git a/src/routes/wish-statistics/import/+page.svelte b/src/routes/wish-statistics/import/+page.svelte
new file mode 100644
index 00000000..67f59839
--- /dev/null
+++ b/src/routes/wish-statistics/import/+page.svelte
@@ -0,0 +1,125 @@
+
+
+
+
+ You need to login in order to use this feature
+ Login
+
+
+ {#if $fetchHoyoWishHistoryStatus.isError}
+ {$i18n.t('wish.import.state.error.title')}
+ {/if}
+
+ {#if $fetchHoyoWishHistoryStatus.isSuccess}
+ {#if $fetchHoyoWishHistoryStatus.data.state === 'NO_JOB'}
+
+ {$i18n.t('wish.import.instructions.step1')}
+
+ {$i18n.t('wish.import.instructions.step2')}
+
+ {$i18n.t('wish.import.instructions.step3')}
+
+ {$i18n.t('wish.import.instructions.step4')}
+ {$i18n.t('wish.import.instructions.step5')}
+
+
+
+ {:else if $fetchHoyoWishHistoryStatus.data.state === 'QUEUED'}
+
diff --git a/src/routes/wish-statistics/import/+page.ts b/src/routes/wish-statistics/import/+page.ts
new file mode 100644
index 00000000..a6448783
--- /dev/null
+++ b/src/routes/wish-statistics/import/+page.ts
@@ -0,0 +1,18 @@
+import type { PageLoadEvent } from '../../../../.svelte-kit/types/src/routes/wish-statistics/import/$types';
+import { applicationState } from '$lib/store/application_state';
+import { get } from 'svelte/store';
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ parent, fetch }: PageLoadEvent) {
+ const { queryClient, backend } = await parent();
+
+ await queryClient.prefetchQuery({
+ queryKey: ['fetchHoyoWishhistoryStatus', get(applicationState).isAuthenticated],
+ queryFn: async () =>
+ (
+ await fetch(backend.hoyo.getHoyoWishHistoryStatusUrl(), {
+ credentials: 'include'
+ })
+ ).json()
+ });
+}
diff --git a/src/routes/wish-statistics/overview/+page.svelte b/src/routes/wish-statistics/overview/+page.svelte
index 966aa8ea..2fdadc3d 100644
--- a/src/routes/wish-statistics/overview/+page.svelte
+++ b/src/routes/wish-statistics/overview/+page.svelte
@@ -6,13 +6,14 @@
mdiAccount,
mdiBaby,
mdiBook,
+ mdiFileCloud,
mdiGlobeModel,
mdiImport,
+ mdiLogin,
mdiSwordCross,
mdiTrashCanOutline
} from '@mdi/js';
import PullDistributionByMonth from '$lib/components/graphs/PullDistributionByMonth.svelte';
- import { applicationState } from '$lib/store/global_state';
import DefaultLayout from '$lib/components/layout/DefaultLayout.svelte';
import type { IMappedWishes, IWish, IWishes } from '$lib/types/wish';
import { isWishBannerKey } from '$lib/types/keys/WishBannerKey';
@@ -21,9 +22,11 @@
import { CardContent, CardHeader } from '$lib/components/ui/card/index.js';
import { dataIndexStore } from '$lib/store/index_store';
import i18n from '$lib/services/i18n';
+ import { userProfile } from '$lib/store/user_profile';
+ import { applicationState } from '$lib/store/application_state';
let wishData: IMappedWishes = {};
- const wishes: IWishes | undefined = $applicationState.wishes;
+ const wishes: IWishes | undefined = $userProfile.wishes;
if (wishes !== undefined) {
Object.keys(wishes).forEach((key: string) => {
@@ -41,47 +44,69 @@
});
}
});
+ console.log(wishData);
}
-
+
- {$i18n.t('wish.overview.import_wish_button')}
+
+ {$i18n.t('wish.overview.import_wish_button')}
+
{$i18n.t('wish.overview.global_statistic_button')}
+
+ {#if !$applicationState.isAuthenticated}
+
+ {'Login to retrieve your wishes'}
+
+ {:else}
+
+ {$i18n.t('wish.overview.import_wish_button')}
+
+ {/if}
+
+ {'Import data from external sites'}
+
+
+
- Wish distribution over time
+ {$i18n.t('chart.wish_distribution_time.title')}
+
+ {$fetchCharacterData.data.name}
-
-
-
- {data.characterData.element} • {data.characterData.weaponType}
-
- {data.characterData.description}
+
+
+
+
+
+
+
+
- {#each defaultBuilds as build}
-
- {build.name}
-
- {/each}
-
-
-
+ {#each { length: $fetchCharacterData.data.rarity } as _}
+
+
+
+ {$fetchCharacterData.data.element} • {$fetchCharacterData.data.weaponType}
+
+
+ {$fetchCharacterData.data.description}
+
-
-
-
-
+
+ {#each defaultBuilds as build}
+
+ {build.name}
+
+ {/each}
+
+
+
+
+
+
+
+
+ {$i18n.t('login.perk.cross_device_sync.title')}
+
+ {$i18n.t('login.perk.cross_device_sync.description')}
+
+
+
+
+
+ {$i18n.t('login.perk.server_access.title')}
+
+ {$i18n.t('login.perk.server_access.description')}
+
+
+
+
+
+ {$i18n.t('login.perk.personal_profile.title')}
+
+ {$i18n.t('login.perk.personal_profile.description')}
+
+
+
+ nav(backend.auth.login('google'))}
+ >
+ Google
+
+ nav(backend.auth.login('microsoft'))}
+ >
+ Microsoft
+
+ nav(backend.auth.login('github'))}
+ >
+ Github
+
+
+
- Theming
+ {$i18n.t('settings.category.theming.title')}
- Data
+ {$i18n.t('settings.category.data.title')}
- Import Data
- Export Data
+ {#if !$applicationState.isAuthenticated}
+
+ {$i18n.t('settings.category.data.import_data_button')}
+
+ {/if}
+
+ {$i18n.t('settings.category.data.export_data_button')}
+
- Select file
+
+ {$i18n.t('action.select_file')}
+
{#if file !== undefined}
{file?.name}
{:else}
- No file selected
+ {$i18n.t('settings.import.no_file_selected')}
{/if}
-
+
{wishData.length}
@@ -61,7 +70,10 @@
{wishData.length * 160}
-
+
{#if fiveStars.length > 0}
{((fiveStars.length / wishData.length) * 100).toFixed(1)}
@@ -78,22 +90,22 @@
{/if}
-
- {0}
- {0}
+
+ {fiveStarPity}
+ {fourStarPity}
+ {$i18n.t('wish.import.state.queued.title')}
+
+ {$i18n.t('wish.import.state.queued.description', {
+ count: $fetchHoyoWishHistoryStatus.data.data.count
+ })}
+
+
+ {:else if $fetchHoyoWishHistoryStatus.data.state === 'ACTIVE'}
+
+ {$i18n.t('wish.import.state.active.title')}
+
+ {:else if $fetchHoyoWishHistoryStatus.data.state === 'COMPLETED_RATE_LIMIT'}
+
+ {$i18n.t('wish.import.state.completed.title')}
+
+ {$i18n.t('wish.import.state.completed.description', {
+ date: new Date(
+ $fetchHoyoWishHistoryStatus.data.data.completedTimestamp +
+ $fetchHoyoWishHistoryStatus.data.data.rateLimitDuration
+ ).toLocaleString(),
+ interpolation: { escapeValue: false }
+ })}
+
+
+ {/if}
+ {/if}
+
{#if wishData?.CharacterEvent !== undefined}
- {#if $applicationState.wishes}
+ {#if wishes}