mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-24 23:39:37 +02:00
65 lines
1.9 KiB
Svelte
65 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import { goto } from '$app/navigation';
|
|
import { addToast } from '$lib/toasts';
|
|
import type { City } from '$lib/types';
|
|
import { createEventDispatcher } from 'svelte';
|
|
const dispatch = createEventDispatcher();
|
|
import { t } from 'svelte-i18n';
|
|
|
|
export let city: City;
|
|
export let visited: boolean;
|
|
|
|
async function markVisited() {
|
|
let res = await fetch(`/api/visitedcity/`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ city: city.id })
|
|
});
|
|
if (res.ok) {
|
|
visited = true;
|
|
let data = await res.json();
|
|
addToast('success', `Visit to ${city.name} marked`);
|
|
dispatch('visit', data);
|
|
} else {
|
|
console.error('Failed to mark city as visited');
|
|
addToast('error', `Failed to mark visit to ${city.name}`);
|
|
}
|
|
}
|
|
async function removeVisit() {
|
|
let res = await fetch(`/api/visitedcity/${city.id}`, {
|
|
method: 'DELETE'
|
|
});
|
|
if (res.ok) {
|
|
visited = false;
|
|
addToast('info', `Visit to ${city.name} removed`);
|
|
dispatch('remove', city);
|
|
} else {
|
|
console.error('Failed to remove visit');
|
|
addToast('error', `Failed to remove visit to ${city.name}`);
|
|
}
|
|
}
|
|
</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-neutral-300">
|
|
{city.region_name}, {city.country_name}
|
|
</div>
|
|
<div class="badge badge-neutral-300">{city.region}</div>
|
|
</div>
|
|
<div class="card-actions justify-end">
|
|
{#if !visited}
|
|
<button class="btn btn-primary" on:click={markVisited}
|
|
>{$t('adventures.mark_visited')}</button
|
|
>
|
|
{/if}
|
|
{#if visited}
|
|
<button class="btn btn-warning" on:click={removeVisit}>{$t('adventures.remove')}</button>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|