feat: Remove locations API call and implement random background image in stats view

backend/server/adventures/views/stats_view.py

@@ -48,11 +48,4 @@ class StatsViewSet(viewsets.ViewSet):
             'total_regions': total_regions,
             'visited_country_count': visited_country_count,
             'total_countries': total_countries
-        })
-
-    # locations - returns a list of all of the latitude, longitude locations of all public adventrues on the server
-    @action(detail=False, methods=['get'], url_path='locations')
-    def locations(self, request):
-        adventures = Adventure.objects.filter(
-            is_public=True).values('latitude', 'longitude', 'id', 'name')
-        return Response(adventures)
+        })

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

@@ -2,7 +2,7 @@ const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
 import { redirect, type Actions } from '@sveltejs/kit';
 // @ts-ignore
 import psl from 'psl';
-import { themes } from '$lib';
+import { getRandomBackground, themes } from '$lib';
 import { fetchCSRFToken } from '$lib/index.server';
 import type { PageServerLoad } from './$types';
 
@@ -12,16 +12,10 @@ export const load = (async (event) => {
 	if (event.locals.user) {
 		return redirect(302, '/dashboard');
 	} else {
-		let res = await fetch(`${serverEndpoint}/api/stats/locations/`, {
-			method: 'GET',
-			headers: {
-				'Content-Type': 'application/json'
-			}
-		});
-		let data = await res.json();
+		const background = getRandomBackground();
 		return {
 			props: {
-				locations: data
+				background
 			}
 		};
 	}

frontend/src/routes/+page.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { t } from 'svelte-i18n';
-	import { DefaultMarker, MapLibre, Marker, Popup } from 'svelte-maplibre';
 
 	import MapWithPins from '$lib/assets/MapWithPins.webp';
-
-	import InformationSlabCircleOutline from '~icons/mdi/information-slab-circle-outline';
+	import type { Background } from '$lib/types.js';
 
 	export let data;
+
+	let background: Background = data.props?.background ?? { url: '' };
 </script>
 
 <!-- Hero Section -->
@@ -58,35 +58,11 @@
 		</div>
 		<!-- Image -->
 		<div class="w-full md:w-1/2">
-			<p class="flex items-center text-neutral-content">
-				<InformationSlabCircleOutline class="w-4 h-4 mr-1" />
-				{$t('adventures.welcome_map_info')}
-			</p>
-			<MapLibre
-				style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
-				class="flex items-center self-center justify-center aspect-[9/16] max-h-[70vh] sm:aspect-video sm:max-h-full w-10/12 rounded-lg"
-				standardControls
-			>
-				{#each data.props.locations as location}
-					{#if location.latitude && location.longitude}
-						<DefaultMarker
-							lngLat={[location.longitude, location.latitude]}
-							on:click={() => goto(`/locations/${location.id}`)}
-						>
-							<span class="text-xl">{location.name}</span>
-							<Popup openOn="click" offset={[0, -10]}>
-								<div class="text-lg text-black font-bold">{location.name}</div>
-								<button
-									class="btn btn-neutral btn-wide btn-sm mt-4"
-									on:click={() => goto(`/adventures/${location.id}`)}
-								>
-									{$t('map.view_details')}
-								</button>
-							</Popup>
-						</DefaultMarker>
-					{/if}
-				{/each}
-			</MapLibre>
+			<img
+				src={background.url}
+				alt={background.location}
+				class="rounded-lg shadow-lg object-cover w-full h-full"
+			/>
 		</div>
 	</div>
 </section>