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

user stats

Browse source
This commit is contained in:
Sean Morley 2024-07-10 18:05:12 -04:00
parent bb1f2d92cf
commit b3878bff72
3 changed files with 93 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

22
frontend/src/routes/profile/+page.server.ts
View file

@ -1,11 +1,27 @@
import { redirect } from '@sveltejs/kit';
import type { PageServerLoad, RequestEvent } from '../$types';
import { PUBLIC_SERVER_URL } from '$env/static/public';
const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
export const load: PageServerLoad = async (event: RequestEvent) => {
if (!event.locals.user) {
if (!event.locals.user || !event.cookies.get('auth')) {
return redirect(302, '/login');
}
let stats = null;
let res = await event.fetch(`${endpoint}/api/stats/counts/`, {
headers: {
Cookie: `${event.cookies.get('auth')}`
}
});
if (!res.ok) {
console.error('Failed to fetch user stats');
} else {
stats = await res.json();
}
return {
user: event.locals.user
user: event.locals.user,
stats
};
};

67
frontend/src/routes/profile/+page.svelte
View file

@ -1,5 +1,23 @@
<script lang="ts">
export let data;
let stats: {
country_count: number;
featured_count: number;
planned_count: number;
total_regions: number;
trips_count: number;
visited_count: number;
visited_region_count: number;
total_countries: number;
} | null;
if (data.stats) {
stats = data.stats;
} else {
stats = null;
}
console.log(stats);
</script>
<!--
@ -36,3 +54,52 @@
<p class="ml-1 text-xl">{new Date(data.user.date_joined).toLocaleDateString()}</p>
</div>
{/if}
{#if stats}
<!-- divider -->
<div class="divider pr-8 pl-8"></div>
<h1 class="text-center text-2xl font-bold mt-8 mb-2">User Stats</h1>
<div class="flex justify-center items-center">
<div class="stats stats-vertical lg:stats-horizontal shadow bg-base-200">
<div class="stat">
<div class="stat-title">Completed Adventures</div>
<div class="stat-value text-center">{stats.visited_count}</div>
<!-- <div class="stat-desc">Jan 1st - Feb 1st</div> -->
</div>
<div class="stat">
<div class="stat-title">Planned Adventures</div>
<div class="stat-value text-center">{stats.planned_count}</div>
<!-- <div class="stat-desc">↗︎ 400 (22%)</div> -->
</div>
<div class="stat">
<div class="stat-title">Trips</div>
<div class="stat-value text-center">{stats.trips_count}</div>
<!-- <div class="stat-desc">↘︎ 90 (14%)</div> -->
</div>
<div class="stat">
<div class="stat-title">Visited Countries</div>
<div class="stat-value text-center">
{Math.round((stats.country_count / stats.total_countries) * 100)}%
</div>
<div class="stat-desc">
{stats.country_count}/{stats.total_countries}
</div>
</div>
<div class="stat">
<div class="stat-title">Visited Regions</div>
<div class="stat-value text-center">
{Math.round((stats.visited_region_count / stats.total_regions) * 100)}%
</div>
<div class="stat-desc">
{stats.visited_region_count}/{stats.total_regions}
</div>
</div>
</div>
</div>
{/if}