Conditional rendering to the country card to show visited status as a badge

backend/server/worldtravel/serializers.py

@@ -7,15 +7,25 @@ class CountrySerializer(serializers.ModelSerializer):
         return os.environ.get('PUBLIC_URL', 'http://127.0.0.1:8000').rstrip('/').replace("'", "")
 
     flag_url = serializers.SerializerMethodField()
+    num_regions = serializers.SerializerMethodField()
+    num_visits = serializers.SerializerMethodField()
 
     def get_flag_url(self, obj):
         public_url = self.get_public_url(obj)
         return public_url + '/media/' + 'flags/' + obj.country_code.lower() + '.png'
     
+    def get_num_regions(self, obj):
+        # get the number of regions in the country
+        return Region.objects.filter(country=obj).count()
+    
+    def get_num_visits(self, obj):
+        return VisitedRegion.objects.filter(region__country=obj).count()
+
     class Meta:
         model = Country
         fields = '__all__'
-        read_only_fields = ['id', 'name', 'country_code', 'subregion', 'flag_url']
+        read_only_fields = ['id', 'name', 'country_code', 'subregion', 'flag_url', 'num_regions', 'num_visits']
+
 
 class RegionSerializer(serializers.ModelSerializer):
     class Meta:

frontend/src/lib/components/CountryCard.svelte

@@ -23,12 +23,26 @@
 	</figure>
 	<div class="card-body">
 		<h2 class="card-title overflow-ellipsis">{country.name}</h2>
+		<div class="flex flex-wrap gap-2">
 			{#if country.subregion}
 				<div class="badge badge-primary">{country.subregion}</div>
 			{/if}
 			{#if country.capital}
-			<div class="badge badge-secondary"><MapMarkerStar class="-ml-1 mr-1" />{country.capital}</div>
+				<div class="badge badge-secondary">
+					<MapMarkerStar class="-ml-1 mr-1" />{country.capital}
+				</div>
 			{/if}
+			{#if country.num_visits > 0 && country.num_visits != country.num_regions}
+				<div class="badge badge-accent">
+					Visited {country.num_visits} time{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> -->
 			<button class="btn btn-primary" on:click={nav}>Open</button>

frontend/src/lib/types.ts

@@ -46,6 +46,8 @@ export type Country = {
 	subregion: string;
 	flag_url: string;
 	capital: string;
+	num_regions: number;
+	num_visits: number;
 };
 
 export type Region = {