feat: add City model and serializer, update RegionCard and create CityCard component, enhance admin interface for City management

frontend/src/lib/components/CityCard.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { continentCodeToString, getFlag } from '$lib';
+	import type { City, Country } from '$lib/types';
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	import MapMarkerStar from '~icons/mdi/map-marker-star';
+
+	export let city: City;
+</script>
+
+<div
+	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl overflow-hidden"
+>
+	<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>
+
+		<div class="card-actions justify-end">
+			<!-- <button class="btn btn-info" on:click={moreInfo}>More Info</button> -->
+		</div>
+	</div>
+</div>

frontend/src/lib/components/RegionCard.svelte

@@ -4,12 +4,18 @@
 	import type { Region, VisitedRegion } from '$lib/types';
 	import { createEventDispatcher } from 'svelte';
 	const dispatch = createEventDispatcher();
+	import { t } from 'svelte-i18n';
 
 	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`, {
 			method: 'POST',
@@ -65,11 +71,16 @@
 		<div class="card-actions justify-end">
 			<!-- <button class="btn btn-info" on:click={moreInfo}>More Info</button> -->
 			{#if !visited}
-				<button class="btn btn-primary" on:click={markVisited}>Mark Visited</button>
+				<button class="btn btn-primary" on:click={markVisited}
+					>{$t('adventures.mark_visited')}</button
+				>
 			{/if}
 			{#if visited}
-				<button class="btn btn-warning" on:click={removeVisit}>Remove</button>
+				<button class="btn btn-warning" on:click={removeVisit}>{$t('adventures.remove')}</button>
 			{/if}
+			<button class="btn btn-neutral-300" on:click={goToCity}
+				>{$t('worldtravel.view_cities')}</button
+			>
 		</div>
 	</div>
 </div>

frontend/src/lib/types.ts

@@ -57,13 +57,21 @@ export type Country = {
 };
 
 export type Region = {
-	id: number;
+	id: string;
 	name: string;
-	country: number;
+	country: string;
 	latitude: number;
 	longitude: number;
 };
 
+export type City = {
+	id: string;
+	name: string;
+	latitude: number | null;
+	longitude: number | null;
+	region: string;
+};
+
 export type VisitedRegion = {
 	id: number;
 	region: number;

frontend/src/locales/en.json

@@ -275,7 +275,8 @@
 		"completely_visited": "Completely Visited",
 		"all_subregions": "All Subregions",
 		"clear_search": "Clear Search",
-		"no_countries_found": "No countries found"
+		"no_countries_found": "No countries found",
+		"view_cities": "View Cities"
 	},
 	"auth": {
 		"username": "Username",

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

@@ -0,0 +1,65 @@
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+import type { City, Country, Region, VisitedRegion } from '$lib/types';
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load = (async (event) => {
+	const id = event.params.id.toUpperCase();
+
+	let cities: City[] = [];
+	let region = {} as Region;
+
+	let sessionId = event.cookies.get('sessionid');
+
+	if (!sessionId) {
+		return redirect(302, '/login');
+	}
+
+	let res = await fetch(`${endpoint}/api/regions/${id}/cities/`, {
+		method: 'GET',
+		headers: {
+			Cookie: `sessionid=${sessionId}`
+		}
+	});
+	if (!res.ok) {
+		console.error('Failed to fetch regions');
+		return redirect(302, '/404');
+	} else {
+		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: {
+			Cookie: `sessionid=${sessionId}`
+		}
+	});
+	if (!res.ok) {
+		console.error('Failed to fetch country');
+		return { status: 500 };
+	} else {
+		region = (await res.json()) as Region;
+	}
+
+	return {
+		props: {
+			cities,
+			region
+		}
+	};
+}) satisfies PageServerLoad;

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

@@ -0,0 +1,148 @@
+<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 type { PageData } from './$types';
+	import { t } from 'svelte-i18n';
+	import { MapLibre, Marker } from 'svelte-maplibre';
+
+	export let data: PageData;
+	console.log(data);
+
+	let searchQuery: string = '';
+
+	let filteredCities: City[] = [];
+	const allCities: City[] = data.props?.cities || [];
+	let showMap: boolean = false;
+
+	let filterOption: string = 'all';
+	let subRegionOption: string = '';
+
+	$: {
+		if (searchQuery === '') {
+			filteredCities = allCities;
+		} else {
+			// otherwise, filter countries by name
+			filteredCities = filteredCities.filter((country) =>
+				country.name.toLowerCase().includes(searchQuery.toLowerCase())
+			);
+		}
+	}
+</script>
+
+<h1 class="text-center font-bold text-4xl">{$t('worldtravel.country_list')}</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="join">
+		<input
+			class="join-item btn"
+			type="radio"
+			name="filter"
+			aria-label={$t('worldtravel.all')}
+			checked
+			on:click={() => (filterOption = 'all')}
+		/>
+		<input
+			class="join-item btn"
+			type="radio"
+			name="filter"
+			aria-label={$t('worldtravel.partially_visited')}
+			on:click={() => (filterOption = 'partial')}
+		/>
+		<input
+			class="join-item btn"
+			type="radio"
+			name="filter"
+			aria-label={$t('worldtravel.completely_visited')}
+			on:click={() => (filterOption = 'complete')}
+		/>
+		<input
+			class="join-item btn"
+			type="radio"
+			name="filter"
+			aria-label={$t('worldtravel.not_visited')}
+			on:click={() => (filterOption = 'not')}
+		/>
+	</div>
+	<select class="select select-bordered w-full max-w-xs ml-4" bind:value={subRegionOption}>
+		<option value="">{$t('worldtravel.all_subregions')}</option>
+		{#each worldSubregions as subregion}
+			<option value={subregion}>{subregion}</option>
+		{/each}
+	</select>
+
+	<div class="flex items-center justify-center ml-4">
+		<input
+			type="checkbox"
+			class="checkbox checkbox-bordered"
+			bind:checked={showMap}
+			aria-label={$t('adventures.show_map')}
+		/>
+		<span class="ml-2">{$t('adventures.show_map')}</span>
+	</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>
+
+<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>
+
+<div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
+	{#each filteredCities as city}
+		<CityCard {city} />
+	{/each}
+</div>
+
+{#if filteredCities.length === 0}
+	<p class="text-center font-bold text-2xl mt-12">{$t('worldtravel.no_countries_found')}</p>
+{/if}
+
+<svelte:head>
+	<title>Countries | World Travel</title>
+	<meta name="description" content="Explore the world and add countries to your visited list!" />
+</svelte:head>