Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-08-05 05:05:17 +02:00
Code Issues Releases Activity

feat: Refactor user detail view and enhance localization strings for multiple languages

Browse source
This commit is contained in:
Sean Morley 2025-02-03 19:56:25 -05:00
parent ad5fb02ebb
commit 9c3a52ae85
14 changed files with 121 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

29
frontend/src/routes/profile/[uuid]/+page.server.ts
View file

@ -1,31 +1,29 @@
import { redirect, error } from '@sveltejs/kit';
import type { PageServerLoad, RequestEvent } from '../../$types';
import { t } from 'svelte-i18n';
const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
export const load: PageServerLoad = async (event: RequestEvent) => {
const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
let uuid = event.params.uuid as string;
// @ts-ignore
let username = event.params.uuid as string;
if (!uuid) {
if (!username) {
return error(404, 'Not found');
}
// let sessionId = event.cookies.get('sessionid');
// let stats = null;
let stats = null;
// let res = await event.fetch(`${endpoint}/api/stats/counts/`, {
// headers: {
// Cookie: `sessionid=${sessionId}`
// }
// });
// if (!res.ok) {
// console.error('Failed to fetch user stats');
// } else {
// stats = await res.json();
// }
let res = await event.fetch(`${endpoint}/api/stats/counts/${username}`, {});
if (!res.ok) {
console.error('Failed to fetch user stats');
} else {
stats = await res.json();
}
let userData = await event.fetch(`${endpoint}/auth/user/${uuid}/`);
let userData = await event.fetch(`${endpoint}/auth/user/${username}/`);
if (!userData.ok) {
return error(404, 'Not found');
}
@ -35,6 +33,7 @@ export const load: PageServerLoad = async (event: RequestEvent) => {
return {
user: data.user,
adventures: data.adventures,
collections: data.collections
collections: data.collections,
stats: stats
};
};

52
frontend/src/routes/profile/[uuid]/+page.svelte
View file

@ -5,26 +5,21 @@
import type { Adventure, Collection, User } from '$lib/types.js';
import { t } from 'svelte-i18n';
// let stats: {
// visited_country_count: number;
// total_regions: number;
// trips_count: number;
// adventure_count: number;
// visited_region_count: number;
// total_countries: number;
// visited_city_count: number;
// total_cities: number;
// } | null;
let stats: {
visited_country_count: number;
total_regions: number;
trips_count: number;
adventure_count: number;
visited_region_count: number;
total_countries: number;
visited_city_count: number;
total_cities: number;
} | null;
const user: User = data.user;
const adventures: Adventure[] = data.adventures;
const collections: Collection[] = data.collections;
// console.log(user);
// console.log(adventures);
// console.log(collections);
// stats = data.stats || null;
stats = data.stats || null;
</script>
<section class="min-h-screen bg-base-100 py-8 px-4">
@ -83,7 +78,7 @@
</div>
<!-- Stats Section -->
<!-- {#if stats}
{#if stats}
<div class="divider my-8"></div>
<h2 class="text-2xl font-bold text-center mb-6 text-primary">
@ -105,35 +100,44 @@
<div class="stat">
<div class="stat-title">{$t('profile.visited_countries')}</div>
<div class="stat-value text-center">
{Math.round((stats.visited_country_count / stats.total_countries) * 100)}%
{stats.visited_country_count}
</div>
<div class="stat-desc text-center">
{stats.visited_country_count}/{stats.total_countries}
{Math.round((stats.visited_country_count / stats.total_countries) * 100)}% {$t(
'adventures.of'
)}
{stats.total_countries}
</div>
</div>
<div class="stat">
<div class="stat-title">{$t('profile.visited_regions')}</div>
<div class="stat-value text-center">
{Math.round((stats.visited_region_count / stats.total_regions) * 100)}%
{stats.visited_region_count}
</div>
<div class="stat-desc text-center">
{stats.visited_region_count}/{stats.total_regions}
{Math.round((stats.visited_region_count / stats.total_regions) * 100)}% {$t(
'adventures.of'
)}
{stats.total_regions}
</div>
</div>
<div class="stat">
<div class="stat-title">{$t('profile.visited_cities')}</div>
<div class="stat-value text-center">
{Math.round((stats.visited_city_count / stats.total_cities) * 100)}%
{stats.visited_city_count}
</div>
<div class="stat-desc text-center">
{stats.visited_city_count}/{stats.total_cities}
{Math.round((stats.visited_city_count / stats.total_cities) * 100)}% {$t(
'adventures.of'
)}
{stats.total_cities}
</div>
</div>
</div>
</div>
{/if} -->
{/if}
<!-- Adventures Section -->
<div class="divider my-8"></div>