Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-25 15:59:38 +02:00
Code Issues Releases Activity

feat: add City model and serializer, update RegionCard and create CityCard component, enhance admin interface for City management

Browse source
This commit is contained in:
Sean Morley 2025-01-09 11:11:02 -05:00
parent a883d4104d
commit 44810e6343
14 changed files with 409 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

36
frontend/src/lib/components/CityCard.svelte Normal file
View file

@ -0,0 +1,36 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { continentCodeToString, getFlag } from '$lib';
import type { City, Country } from '$lib/types';
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
import MapMarkerStar from '~icons/mdi/map-marker-star';
export let city: City;
</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-primary">{city.region}</div>
<!--
{#if country.num_visits > 0 && country.num_visits != country.num_regions}
<div class="badge badge-accent">
Visited {country.num_visits} Region{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> -->
</div>
</div>
</div>

15
frontend/src/lib/components/RegionCard.svelte
View file

@ -4,12 +4,18 @@
import type { Region, VisitedRegion } from '$lib/types';
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
import { t } from 'svelte-i18n';
export let region: Region;
export let visited: boolean;
export let visit_id: number | undefined | null;
function goToCity() {
console.log(region);
goto(`/worldtravel/${region.id.split('-')[0]}/${region.id}`);
}
async function markVisited() {
let res = await fetch(`/worldtravel?/markVisited`, {
method: 'POST',
@ -65,11 +71,16 @@
<div class="card-actions justify-end">
<!-- <button class="btn btn-info" on:click={moreInfo}>More Info</button> -->
{#if !visited}
<button class="btn btn-primary" on:click={markVisited}>Mark Visited</button>
<button class="btn btn-primary" on:click={markVisited}
>{$t('adventures.mark_visited')}</button
>
{/if}
{#if visited}
<button class="btn btn-warning" on:click={removeVisit}>Remove</button>
<button class="btn btn-warning" on:click={removeVisit}>{$t('adventures.remove')}</button>
{/if}
<button class="btn btn-neutral-300" on:click={goToCity}
>{$t('worldtravel.view_cities')}</button
>
</div>
</div>
</div>