user stats

backend/server/adventures/views.py

@@ -2,7 +2,7 @@ from rest_framework.decorators import action
 from rest_framework import viewsets
 from rest_framework.response import Response
 from .models import Adventure, Trip
-from worldtravel.models import VisitedRegion
+from worldtravel.models import VisitedRegion, Region, Country
 from .serializers import AdventureSerializer, TripSerializer
 from rest_framework.permissions import IsAuthenticated
 from django.db.models import Q, Prefetch
@@ -88,15 +88,19 @@ class StatsViewSet(viewsets.ViewSet):
             type='featured', is_public=True).count()
         trips_count = Trip.objects.filter(
             user_id=request.user.id).count()
-        region_count = VisitedRegion.objects.filter(
+        visited_region_count = VisitedRegion.objects.filter(
             user_id=request.user.id).count()
+        total_regions = Region.objects.count()
         country_count = VisitedRegion.objects.filter(
             user_id=request.user.id).values('region__country').distinct().count()
+        total_countries = Country.objects.count()
         return Response({
             'visited_count': visited_count,
             'planned_count': planned_count,
             'featured_count': featured_count,
             'trips_count': trips_count,
-            'region_count': region_count,
+            'visited_region_count': visited_region_count,
+            'total_regions': total_regions,
             'country_count': country_count,
+            'total_countries': total_countries
         })

frontend/src/routes/profile/+page.server.ts

@@ -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
 	};
 };

frontend/src/routes/profile/+page.svelte

@@ -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}