feat: enhance region visit tracking with improved toast messages, update localization, and modify page titles

backend/server/worldtravel/management/commands/download-countries.py

@@ -57,7 +57,7 @@ class Command(BaseCommand):
         elif os.path.getsize(countries_json_path) == 0:
             self.stdout.write(self.style.ERROR('countries+regions+states.json is empty'))
         else:
-            self.stdout.write(self.style.SUCCESS('countries+regions+states.json already exists'))
+            self.stdout.write(self.style.SUCCESS('Latest country, region, and state data already downloaded.'))
             return
             
         with open(countries_json_path, 'r') as f:

backend/server/worldtravel/migrations/0014_alter_visitedcity_options.py

@@ -0,0 +1,17 @@
+# Generated by Django 5.0.8 on 2025-01-09 18:08
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('worldtravel', '0013_visitedcity'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='visitedcity',
+            options={'verbose_name_plural': 'Visited Cities'},
+        ),
+    ]

frontend/src/lib/components/RegionCard.svelte

@@ -23,11 +23,14 @@
 		if (res.ok) {
 			visited = true;
 			let data = await res.json();
-			addToast('success', `Visit to ${region.name} marked`);
+			addToast(
+				'success',
+				`${$t('worldtravel.visit_to')} ${region.name} ${$t('worldtravel.marked_visited')}`
+			);
 			dispatch('visit', data);
 		} else {
-			console.error('Failed to mark region as visited');
-			addToast('error', `Failed to mark visit to ${region.name}`);
+			console.error($t('worldtravel.region_failed_visited'));
+			addToast('error', `${$t('worldtravel.failed_to_mark_visit')} ${region.name}`);
 		}
 	}
 	async function removeVisit() {
@@ -37,11 +40,11 @@
 		});
 		if (res.ok) {
 			visited = false;
-			addToast('info', `Visit to ${region.name} removed`);
+			addToast('info', `${$t('worldtravel.visit_to')} ${region.name} ${$t('worldtravel.removed')}`);
 			dispatch('remove', region);
 		} else {
-			console.error('Failed to remove visit');
-			addToast('error', `Failed to remove visit to ${region.name}`);
+			console.error($t('worldtravel.visit_remove_failed'));
+			addToast('error', `${$t('worldtravel.failed_to_remove_visit')} ${region.name}`);
 		}
 	}
 </script>

frontend/src/locales/en.json

@@ -277,7 +277,17 @@
 		"clear_search": "Clear Search",
 		"no_countries_found": "No countries found",
 		"view_cities": "View Cities",
-		"no_cities_found": "No cities found"
+		"no_cities_found": "No cities found",
+		"visit_to": "Visit to",
+		"region_failed_visited": "Failed to mark region as visited",
+		"failed_to_mark_visit": "Failed to mark visit to",
+		"visit_remove_failed": "Failed to remove visit",
+		"removed": "removed",
+		"failed_to_remove_visit": "Failed to remove visit to",
+		"marked_visited": "marked as visited",
+		"regions_in": "Regions in",
+		"region_stats": "Region Stats",
+		"all_visited": "You've visited all regions in"
 	},
 	"auth": {
 		"username": "Username",

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

@@ -39,11 +39,14 @@
 		});
 		if (!res.ok) {
 			console.error('Failed to mark region as visited');
-			addToast('error', `Failed to mark visit to ${region.name}`);
+			addToast('error', `${$t('worldtravel.failed_to_mark_visit')} ${region.name}`);
 			return;
 		} else {
 			visitedRegions = [...visitedRegions, await res.json()];
-			addToast('success', `Visit to ${region.name} marked`);
+			addToast(
+				'success',
+				`${$t('worldtravel.visit_to')} ${region.name} ${$t('worldtravel.marked_visited')}`
+			);
 		}
 	}
 	async function removeVisit(region: Region) {
@@ -52,12 +55,12 @@
 			method: 'DELETE'
 		});
 		if (!res.ok) {
-			console.error('Failed to remove visit');
-			addToast('error', `Failed to remove visit to ${region.name}`);
+			console.error($t('worldtravel.region_failed_visited'));
+			addToast('error', `${$t('worldtravel.failed_to_mark_visit')} ${region.name}`);
 			return;
 		} else {
 			visitedRegions = visitedRegions.filter((visitedRegion) => visitedRegion.region !== region.id);
-			addToast('info', `Visit to ${region.name} removed`);
+			addToast('info', `${$t('worldtravel.visit_to')} ${region.name} ${$t('worldtravel.removed')}`);
 		}
 	}
 
@@ -70,16 +73,16 @@
 	);
 </script>
 
-<h1 class="text-center font-bold text-4xl mb-4">Regions in {country?.name}</h1>
+<h1 class="text-center font-bold text-4xl mb-4">{$t('worldtravel.regions_in')} {country?.name}</h1>
 <div class="flex items-center justify-center mb-4">
 	<div class="stats shadow bg-base-300">
 		<div class="stat">
-			<div class="stat-title">Region Stats</div>
-			<div class="stat-value">{numVisitedRegions}/{numRegions} Visited</div>
+			<div class="stat-title">{$t('worldtravel.region_stats')}</div>
+			<div class="stat-value">{numVisitedRegions}/{numRegions} {$t('adventures.visited')}</div>
 			{#if numRegions === numVisitedRegions}
-				<div class="stat-desc">You've visited all regions in {country?.name} 🎉!</div>
+				<div class="stat-desc">{$t('worldtravel.all_visited')} {country?.name} 🎉!</div>
 			{:else}
-				<div class="stat-desc">Keep exploring!</div>
+				<div class="stat-desc">{$t('adventures.keep_exploring')}</div>
 			{/if}
 		</div>
 	</div>

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

@@ -218,6 +218,6 @@
 {/if}
 
 <svelte:head>
-	<title>Countries | World Travel</title>
+	<title>Cities in {data.props?.region.name} | World Travel</title>
 	<meta name="description" content="Explore the world and add countries to your visited list!" />
 </svelte:head>