120 lines
2.9 KiB
Svelte
120 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
export let data;
|
|
import AdventureCard from "$lib/components/AdventureCard.svelte";
|
|
import { countryCodeToName } from "$lib";
|
|
import { getFlag } from "$lib";
|
|
import { goto } from "$app/navigation";
|
|
import { onMount } from "svelte";
|
|
import Us from "$lib/components/maps/US.svelte";
|
|
import WorldTravelCard from "$lib/components/WorldTravelCard.svelte";
|
|
|
|
let viewType: String = "cards";
|
|
|
|
function markVisited(event: { detail: string }) {
|
|
console.log(`Marked ${event.detail} as visited`);
|
|
fetch("/api/regionvisit", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
region_id: event.detail,
|
|
country_code: data.countrycode,
|
|
}),
|
|
}).then((response) => {
|
|
if (response.status === 401) {
|
|
goto("/login");
|
|
}
|
|
return response.json();
|
|
});
|
|
}
|
|
|
|
function removeVisit(event: { detail: string }) {
|
|
console.log(`Removed visit to ${event.detail}`);
|
|
fetch("/api/regionvisit", {
|
|
method: "DELETE",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
region_id: event.detail,
|
|
}),
|
|
}).then((response) => {
|
|
if (response.status === 401) {
|
|
goto("/login");
|
|
}
|
|
return response.json();
|
|
});
|
|
}
|
|
|
|
function setViewType(type: String) {
|
|
viewType = type;
|
|
}
|
|
|
|
onMount(() => {
|
|
console.log(data.visitedRegions);
|
|
});
|
|
</script>
|
|
|
|
<h1 class="text-center text-4xl font-bold">
|
|
Regions in {countryCodeToName(data.countrycode)}
|
|
<img
|
|
src={getFlag(40, data.countrycode)}
|
|
class="inline-block -mt-1 mr-1"
|
|
alt="Flag"
|
|
/>
|
|
</h1>
|
|
|
|
<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)}
|
|
<WorldTravelCard
|
|
countryCode={data.countrycode}
|
|
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 data.countrycode.toLowerCase() == "us"}
|
|
<Us on:marked={markVisited} />
|
|
{/if}
|
|
{/if}
|
|
|
|
<svelte:head>
|
|
<title>{countryCodeToName(data.countrycode)} Regions | AdventureLog</title>
|
|
<meta
|
|
name="description"
|
|
content="Explore the regions in {countryCodeToName(
|
|
data.countrycode
|
|
)} and add them to your visited list!"
|
|
/>
|
|
</svelte:head>
|