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

feat: add VisitedCity model and serializer, update admin interface, and enhance city visit tracking functionality

Browse source
This commit is contained in:
Sean Morley 2025-01-09 12:38:29 -05:00
parent 44810e6343
commit 80cec30fda
15 changed files with 344 additions and 234 deletions
Download patch file Download diff file Expand all files Collapse all files

59
frontend/src/lib/components/CityCard.svelte
View file

@ -1,13 +1,42 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { continentCodeToString, getFlag } from '$lib';
import type { City, Country } from '$lib/types';
import { addToast } from '$lib/toasts';
import type { City } from '$lib/types';
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
import MapMarkerStar from '~icons/mdi/map-marker-star';
import { t } from 'svelte-i18n';
export let city: City;
export let visited: boolean;
async function markVisited() {
let res = await fetch(`/api/visitedcity/`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ city: city.id })
});
if (res.ok) {
visited = true;
let data = await res.json();
addToast('success', `Visit to ${city.name} marked`);
dispatch('visit', data);
} else {
console.error('Failed to mark city as visited');
addToast('error', `Failed to mark visit to ${city.name}`);
}
}
async function removeVisit() {
let res = await fetch(`/api/visitedcity/${city.id}`, {
method: 'DELETE'
});
if (res.ok) {
visited = false;
addToast('info', `Visit to ${city.name} removed`);
dispatch('remove', city);
} else {
console.error('Failed to remove visit');
addToast('error', `Failed to remove visit to ${city.name}`);
}
}
</script>
<div
@ -16,17 +45,15 @@
<div class="card-body">
<h2 class="card-title overflow-ellipsis">{city.name}</h2>
<div class="flex flex-wrap gap-2">
<div class="badge badge-primary">{city.region}</div>
<!--
{#if country.num_visits > 0 && country.num_visits != country.num_regions}
<div class="badge badge-accent">
Visited {country.num_visits} Region{country.num_visits > 1 ? 's' : ''}
</div>
{:else if country.num_visits > 0 && country.num_visits === country.num_regions}
<div class="badge badge-success">Completed</div>
{:else}
<div class="badge badge-error">Not Visited</div>
{/if} -->
<div class="badge badge-primary">{city.id}</div>
{#if !visited}
<button class="btn btn-primary" on:click={markVisited}
>{$t('adventures.mark_visited')}</button
>
{/if}
{#if visited}
<button class="btn btn-warning" on:click={removeVisit}>{$t('adventures.remove')}</button>
{/if}
</div>
<div class="card-actions justify-end">

40
frontend/src/lib/components/RegionCard.svelte
View file

@ -9,55 +9,39 @@
export let region: Region;
export let visited: boolean;
export let visit_id: number | undefined | null;
function goToCity() {
console.log(region);
goto(`/worldtravel/${region.id.split('-')[0]}/${region.id}`);
}
async function markVisited() {
let res = await fetch(`/worldtravel?/markVisited`, {
let res = await fetch(`/api/visitedregion/`, {
headers: { 'Content-Type': 'application/json' },
method: 'POST',
body: JSON.stringify({ regionId: region.id })
body: JSON.stringify({ region: region.id })
});
if (res.ok) {
// visited = true;
const result = await res.json();
const data = JSON.parse(result.data);
if (data[1] !== undefined) {
console.log('New adventure created with id:', data[3]);
let visit_id = data[3];
let region_id = data[5];
let user_id = data[4];
let newVisit: VisitedRegion = {
id: visit_id,
region: region_id,
user_id: user_id,
longitude: 0,
latitude: 0,
name: ''
};
addToast('success', `Visit to ${region.name} marked`);
dispatch('visit', newVisit);
}
visited = true;
let data = await res.json();
addToast('success', `Visit to ${region.name} marked`);
dispatch('visit', data);
} else {
console.error('Failed to mark region as visited');
addToast('error', `Failed to mark visit to ${region.name}`);
}
}
async function removeVisit() {
let res = await fetch(`/worldtravel?/removeVisited`, {
method: 'POST',
body: JSON.stringify({ visitId: visit_id })
let res = await fetch(`/api/visitedregion/${region.id}`, {
headers: { 'Content-Type': 'application/json' },
method: 'DELETE'
});
if (res.ok) {
visited = false;
addToast('info', `Visit to ${region.name} removed`);
dispatch('remove', null);
dispatch('remove', region);
} else {
console.error('Failed to remove visit');
addToast('error', `Failed to remove visit to ${region.name}`);
}
}
</script>

11
frontend/src/lib/types.ts
View file

@ -74,7 +74,16 @@ export type City = {
export type VisitedRegion = {
id: number;
region: number;
region: string;
user_id: string;
longitude: number;
latitude: number;
name: string;
};
export type VisitedCity = {
id: number;
city: string;
user_id: string;
longitude: number;
latitude: number;

3
frontend/src/locales/en.json
View file

@ -276,7 +276,8 @@
"all_subregions": "All Subregions",
"clear_search": "Clear Search",
"no_countries_found": "No countries found",
"view_cities": "View Cities"
"view_cities": "View Cities",
"no_cities_found": "No cities found"
},
"auth": {
"username": "Username",

2
frontend/src/routes/api/[...path]/+server.ts
View file

@ -12,7 +12,7 @@ export async function GET(event) {
/** @type {import('./$types').RequestHandler} */
export async function POST({ url, params, request, fetch, cookies }) {
const searchParam = url.search ? `${url.search}&format=json` : '?format=json';
const searchParam = url.search ? `${url.search}` : '';
return handleRequest(url, params, request, fetch, cookies, searchParam, true);
}

77
frontend/src/routes/worldtravel/+page.server.ts
View file

@ -30,80 +30,3 @@ export const load = (async (event) => {
}
}
}) satisfies PageServerLoad;
export const actions: Actions = {
markVisited: async (event) => {
const body = await event.request.json();
if (!body || !body.regionId) {
return {
status: 400
};
}
let sessionId = event.cookies.get('sessionid');
if (!event.locals.user || !sessionId) {
return redirect(302, '/login');
}
let csrfToken = await fetchCSRFToken();
const res = await fetch(`${endpoint}/api/visitedregion/`, {
method: 'POST',
headers: {
Cookie: `sessionid=${sessionId}; csrftoken=${csrfToken}`,
'Content-Type': 'application/json',
'X-CSRFToken': csrfToken
},
body: JSON.stringify({ region: body.regionId })
});
if (!res.ok) {
console.error('Failed to mark country as visited');
return { status: 500 };
} else {
return {
status: 200,
data: await res.json()
};
}
},
removeVisited: async (event) => {
const body = await event.request.json();
if (!body || !body.visitId) {
return {
status: 400
};
}
const visitId = body.visitId as number;
let sessionId = event.cookies.get('sessionid');
if (!event.locals.user || !sessionId) {
return redirect(302, '/login');
}
let csrfToken = await fetchCSRFToken();
const res = await fetch(`${endpoint}/api/visitedregion/${visitId}/`, {
method: 'DELETE',
headers: {
Cookie: `sessionid=${sessionId}; csrftoken=${csrfToken}`,
'Content-Type': 'application/json',
'X-CSRFToken': csrfToken
}
});
if (res.status !== 204) {
console.error('Failed to remove country from visited');
return { status: 500 };
} else {
return {
status: 200
};
}
}
};

62
frontend/src/routes/worldtravel/[id]/+page.svelte
View file

@ -24,7 +24,7 @@
visitedRegions = visitedRegions.filter(
(visitedRegion) => visitedRegion.region !== region.id
);
removeVisit(region, visitedRegion.id);
removeVisit(region);
} else {
markVisited(region);
}
@ -32,48 +32,32 @@
}
async function markVisited(region: Region) {
let res = await fetch(`/worldtravel?/markVisited`, {
let res = await fetch(`/api/visitedregion/`, {
method: 'POST',
body: JSON.stringify({ regionId: region.id })
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ region: region.id })
});
if (res.ok) {
// visited = true;
const result = await res.json();
const data = JSON.parse(result.data);
if (data[1] !== undefined) {
console.log('New adventure created with id:', data[3]);
let visit_id = data[3];
let region_id = data[5];
let user_id = data[4];
visitedRegions = [
...visitedRegions,
{
id: visit_id,
region: region_id,
user_id: user_id,
longitude: 0,
latitude: 0,
name: ''
}
];
addToast('success', `Visit to ${region.name} marked`);
}
} else {
if (!res.ok) {
console.error('Failed to mark region as visited');
addToast('error', `Failed to mark visit to ${region.name}`);
return;
} else {
visitedRegions = [...visitedRegions, await res.json()];
addToast('success', `Visit to ${region.name} marked`);
}
}
async function removeVisit(region: Region, visitId: number) {
let res = await fetch(`/worldtravel?/removeVisited`, {
method: 'POST',
body: JSON.stringify({ visitId: visitId })
async function removeVisit(region: Region) {
let res = await fetch(`/api/visitedregion/${region.id}`, {
headers: { 'Content-Type': 'application/json' },
method: 'DELETE'
});
if (res.ok) {
addToast('info', `Visit to ${region.name} removed`);
} else {
if (!res.ok) {
console.error('Failed to remove visit');
addToast('error', `Failed to remove visit to ${region.name}`);
return;
} else {
visitedRegions = visitedRegions.filter((visitedRegion) => visitedRegion.region !== region.id);
addToast('info', `Visit to ${region.name} removed`);
}
}
@ -110,8 +94,12 @@
visitedRegions = [...visitedRegions, e.detail];
numVisitedRegions++;
}}
visit_id={visitedRegions.find((visitedRegion) => visitedRegion.region === region.id)?.id}
on:remove={() => numVisitedRegions--}
on:remove={() => {
visitedRegions = visitedRegions.filter(
(visitedRegion) => visitedRegion.region !== region.id
);
numVisitedRegions--;
}}
/>
{/each}
</div>

32
frontend/src/routes/worldtravel/[id]/[id]/+page.server.ts
View file

@ -1,5 +1,5 @@
const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
import type { City, Country, Region, VisitedRegion } from '$lib/types';
import type { City, Country, Region, VisitedCity, VisitedRegion } from '$lib/types';
import { redirect } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';
@ -10,6 +10,7 @@ export const load = (async (event) => {
let cities: City[] = [];
let region = {} as Region;
let visitedCities: VisitedCity[] = [];
let sessionId = event.cookies.get('sessionid');
@ -30,19 +31,6 @@ export const load = (async (event) => {
cities = (await res.json()) as City[];
}
// res = await fetch(`${endpoint}/api/${id}/visits/`, {
// method: 'GET',
// headers: {
// Cookie: `sessionid=${sessionId}`
// }
// });
// if (!res.ok) {
// console.error('Failed to fetch visited regions');
// return { status: 500 };
// } else {
// visitedRegions = (await res.json()) as VisitedRegion[];
// }
res = await fetch(`${endpoint}/api/regions/${id}/`, {
method: 'GET',
headers: {
@ -56,10 +44,24 @@ export const load = (async (event) => {
region = (await res.json()) as Region;
}
res = await fetch(`${endpoint}/api/regions/${region.id}/cities/visits/`, {
method: 'GET',
headers: {
Cookie: `sessionid=${sessionId}`
}
});
if (!res.ok) {
console.error('Failed to fetch visited regions');
return { status: 500 };
} else {
visitedCities = (await res.json()) as VisitedCity[];
}
return {
props: {
cities,
region
region,
visitedCities
}
};
}) satisfies PageServerLoad;

177
frontend/src/routes/worldtravel/[id]/[id]/+page.svelte
View file

@ -1,8 +1,7 @@
<script lang="ts">
import { goto } from '$app/navigation';
import CityCard from '$lib/components/CityCard.svelte';
import CountryCard from '$lib/components/CountryCard.svelte';
import type { City, Country } from '$lib/types';
import { addToast } from '$lib/toasts';
import type { City } from '$lib/types';
import type { PageData } from './$types';
import { t } from 'svelte-i18n';
import { MapLibre, Marker } from 'svelte-maplibre';
@ -14,10 +13,7 @@
let filteredCities: City[] = [];
const allCities: City[] = data.props?.cities || [];
let showMap: boolean = false;
let filterOption: string = 'all';
let subRegionOption: string = '';
let visitedCities = data.props?.visitedCities || [];
$: {
if (searchQuery === '') {
@ -29,15 +25,78 @@
);
}
}
function togleVisited(city: City) {
return () => {
const visitedCity = visitedCities.find((visitedCity) => visitedCity.city === city.id);
if (visitedCity) {
visitedCities = visitedCities.filter((visitedCity) => visitedCity.city !== city.id);
removeVisit(city);
} else {
markVisited(city);
}
};
}
async function markVisited(city: City) {
let res = await fetch(`/api/visitedcity/`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ city: city.id })
});
if (!res.ok) {
console.error('Failed to mark city as visited');
addToast('error', `Failed to mark visit to ${city.name}`);
return;
} else {
visitedCities = [...visitedCities, await res.json()];
addToast('success', `Visit to ${city.name} marked`);
}
}
async function removeVisit(region: City) {
let res = await fetch(`/api/visitedcity/${region.id}`, {
headers: { 'Content-Type': 'application/json' },
method: 'DELETE'
});
if (!res.ok) {
console.error('Failed to remove visit');
addToast('error', `Failed to remove visit to ${region.name}`);
return;
} else {
visitedCities = visitedCities.filter((visitedCity) => visitedCity.city !== region.id);
addToast('info', `Visit to ${region.name} removed`);
}
}
let numCities: number = data.props?.cities?.length || 0;
let numVisitedCities: number = visitedCities.length;
$: {
numVisitedCities = visitedCities.length;
}
</script>
<h1 class="text-center font-bold text-4xl">{$t('worldtravel.country_list')}</h1>
<h1 class="text-center font-bold text-4xl">Cities in {data.props?.region.name}</h1>
<!-- result count -->
<p class="text-center mb-4">
{allCities.length}
Cities Found
</p>
<div class="flex items-center justify-center mb-4">
<div class="stats shadow bg-base-300">
<div class="stat">
<div class="stat-title">City Stats</div>
<div class="stat-value">{numVisitedCities}/{numCities} Visited</div>
{#if numCities === numVisitedCities}
<div class="stat-desc">You've visited all cities in {data.props?.region.name} 🎉!</div>
{:else}
<div class="stat-desc">Keep exploring!</div>
{/if}
</div>
</div>
</div>
<!-- <div class="flex items-center justify-center mb-4">
<div class="join">
<input
@ -88,58 +147,74 @@
</div>
</div> -->
<div class="flex items-center justify-center mb-4">
<input
type="text"
placeholder={$t('navbar.search')}
class="input input-bordered w-full max-w-xs"
bind:value={searchQuery}
/>
{#if searchQuery.length > 0}
<!-- clear button -->
<div class="flex items-center justify-center ml-4">
<button class="btn btn-neutral" on:click={() => (searchQuery = '')}>
{$t('worldtravel.clear_search')}
</button>
</div>
{/if}
</div>
{#if allCities.length > 0}
<div class="flex items-center justify-center mb-4">
<input
type="text"
placeholder={$t('navbar.search')}
class="input input-bordered w-full max-w-xs"
bind:value={searchQuery}
/>
{#if searchQuery.length > 0}
<!-- clear button -->
<div class="flex items-center justify-center ml-4">
<button class="btn btn-neutral" on:click={() => (searchQuery = '')}>
{$t('worldtravel.clear_search')}
</button>
</div>
{/if}
</div>
<div class="mt-4 mb-4 flex justify-center">
<!-- checkbox to toggle marker -->
<div class="mt-4 mb-4 flex justify-center">
<!-- checkbox to toggle marker -->
<MapLibre
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
class="aspect-[9/16] max-h-[70vh] sm:aspect-video sm:max-h-full w-10/12 rounded-lg"
standardControls
center={allCities[0] && allCities[0].longitude !== null && allCities[0].latitude !== null
? [allCities[0].longitude, allCities[0].latitude]
: [0, 0]}
zoom={8}
>
{#each filteredCities as city}
{#if city.latitude && city.longitude}
<Marker
lngLat={[city.longitude, city.latitude]}
class="grid px-2 py-1 place-items-center rounded-full border border-gray-200 bg-green-200 text-black focus:outline-6 focus:outline-black"
>
<span class="text-xs">
{city.name}
</span>
</Marker>
{/if}
{/each}
</MapLibre>
</div>
<MapLibre
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
class="aspect-[9/16] max-h-[70vh] sm:aspect-video sm:max-h-full w-10/12 rounded-lg"
standardControls
center={allCities[0] && allCities[0].longitude !== null && allCities[0].latitude !== null
? [allCities[0].longitude, allCities[0].latitude]
: [0, 0]}
zoom={8}
>
{#each filteredCities as city}
{#if city.latitude && city.longitude}
<Marker
lngLat={[city.longitude, city.latitude]}
class="grid px-2 py-1 place-items-center rounded-full border border-gray-200 {visitedCities.some(
(visitedCity) => visitedCity.city === city.id
)
? 'bg-red-300'
: 'bg-blue-300'} text-black focus:outline-6 focus:outline-black"
on:click={togleVisited(city)}
>
<span class="text-xs">
{city.name}
</span>
</Marker>
{/if}
{/each}
</MapLibre>
</div>
{/if}
<div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
{#each filteredCities as city}
<CityCard {city} />
<CityCard
{city}
visited={visitedCities.some((visitedCity) => visitedCity.city === city.id)}
on:visit={(e) => {
visitedCities = [...visitedCities, e.detail];
}}
on:remove={() => {
visitedCities = visitedCities.filter((visitedCity) => visitedCity.city !== city.id);
}}
/>
{/each}
</div>
{#if filteredCities.length === 0}
<p class="text-center font-bold text-2xl mt-12">{$t('worldtravel.no_countries_found')}</p>
<p class="text-center font-bold text-2xl mt-12">{$t('worldtravel.no_cities_found')}</p>
{/if}
<svelte:head>