From 8133e8e99e1bc5e0804d04915d34ad8fb9b3def9 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sun, 14 Apr 2024 17:44:52 +0000
Subject: [PATCH] Update AdventureCard component to include viewType property
 and add radio buttons for card and map views

---
 .../components/maps/{us.svelte => US.svelte}  |  0
 .../worldtravel/[countrycode]/+page.svelte    | 58 ++++++++++++++-----
 2 files changed, 43 insertions(+), 15 deletions(-)
 rename src/lib/components/maps/{us.svelte => US.svelte} (100%)

diff --git a/src/lib/components/maps/us.svelte b/src/lib/components/maps/US.svelte
similarity index 100%
rename from src/lib/components/maps/us.svelte
rename to src/lib/components/maps/US.svelte
diff --git a/src/routes/worldtravel/[countrycode]/+page.svelte b/src/routes/worldtravel/[countrycode]/+page.svelte
index 2d73dc4..cb7f916 100644
--- a/src/routes/worldtravel/[countrycode]/+page.svelte
+++ b/src/routes/worldtravel/[countrycode]/+page.svelte
@@ -6,6 +6,8 @@
     import { goto } from "$app/navigation";
     import { onMount } from "svelte";
 
+    let viewType: String = "cards";
+
     function markVisited(event: { detail: string }) {
         console.log(`Marked ${event.detail} as visited`);
         fetch("/api/regionvisit", {
@@ -43,6 +45,10 @@
         });
     }
 
+    function setViewType(type: String) {
+        viewType = type;
+    }
+
     onMount(() => {
         console.log(data.visitedRegions);
     });
@@ -57,19 +63,41 @@
     />
 </h1>
 
-<div
-    class="grid xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4 mt-4 content-center auto-cols-auto ml-6 mr-6"
->
-    {#each data.regions as region (region.id)}
-        <AdventureCard
-            type="worldtravelregion"
-            regionId={region.id}
-            name={region.name}
-            on:markVisited={markVisited}
-            visited={data.visitedRegions.some(
-                (visitedRegion) => visitedRegion.region_id === region.id,
-            )}
-            on:removeVisit={removeVisit}
-        />
-    {/each}
+<div class="join items-center justify-center flex">
+    <input
+        class="join-item btn btn-neutral"
+        type="radio"
+        name="viewtype"
+        checked
+        aria-label="Cards"
+        on:click={() => setViewType("cards")}
+    />
+    <input
+        class="join-item btn btn-neutral"
+        type="radio"
+        name="viewtype"
+        aria-label="Map"
+        on:click={() => setViewType("map")}
+    />
 </div>
+
+{#if viewType == "cards"}
+    <div
+        class="grid xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4 mt-4 content-center auto-cols-auto ml-6 mr-6"
+    >
+        {#each data.regions as region (region.id)}
+            <AdventureCard
+                type="worldtravelregion"
+                regionId={region.id}
+                name={region.name}
+                on:markVisited={markVisited}
+                visited={data.visitedRegions.some(
+                    (visitedRegion) => visitedRegion.region_id === region.id,
+                )}
+                on:removeVisit={removeVisit}
+            />
+        {/each}
+    </div>
+{/if}
+
+{#if viewType == "map"}{/if}