Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-20 21:39:37 +02:00
Code Issues Releases Activity

collection management and type change

Browse source
This commit is contained in:
Sean Morley 2024-07-16 09:12:53 -04:00
parent ad5f98391d
commit e679eada06
5 changed files with 208 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

92
frontend/src/lib/components/AdventureCard.svelte
View file

@ -11,9 +11,16 @@
import MapMarker from '~icons/mdi/map-marker';
import { addToast } from '$lib/toasts';
import Link from '~icons/mdi/link-variant';
import CheckBold from '~icons/mdi/check-bold';
import FormatListBulletedSquare from '~icons/mdi/format-list-bulleted-square';
import LinkVariantRemove from '~icons/mdi/link-variant-remove';
import Plus from '~icons/mdi/plus';
import CollectionLink from './CollectionLink.svelte';
export let type: string;
let isCollectionModalOpen: boolean = false;
export let adventure: Adventure;
async function deleteAdventure() {
@ -32,6 +39,61 @@
}
}
async function removeFromCollection() {
let res = await fetch(`/api/adventures/${adventure.id}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ collection: null })
});
if (res.ok) {
console.log('Adventure removed from collection');
addToast('info', 'Adventure removed from collection successfully!');
dispatch('delete', adventure.id);
} else {
console.log('Error removing adventure from collection');
}
}
function changeType(newType: string) {
return async () => {
let res = await fetch(`/api/adventures/${adventure.id}/`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ type: newType })
});
if (res.ok) {
console.log('Adventure type changed');
addToast('info', 'Adventure type changed successfully!');
adventure.type = newType;
} else {
console.log('Error changing adventure type');
}
};
}
async function linkCollection(event: CustomEvent<number>) {
let collectionId = event.detail;
let res = await fetch(`/api/adventures/${adventure.id}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ collection: collectionId })
});
if (res.ok) {
console.log('Adventure linked to collection');
addToast('info', 'Adventure linked to collection successfully!');
isCollectionModalOpen = false;
dispatch('delete', adventure.id);
} else {
console.log('Error linking adventure to collection');
}
}
function editAdventure() {
dispatch('edit', adventure);
}
@ -41,6 +103,10 @@
}
</script>
{#if isCollectionModalOpen}
<CollectionLink on:link={linkCollection} on:close={() => (isCollectionModalOpen = false)} />
{/if}
<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-primary-content shadow-xl overflow-hidden text-base-content"
>
@ -61,6 +127,11 @@
<h2 class="card-title break-words text-wrap">
{adventure.name}
</h2>
{#if adventure.type == 'visited'}
<div class="badge badge-primary">Visited</div>
{:else}
<div class="badge badge-secondary">Planned</div>
{/if}
{#if adventure.location && adventure.location !== ''}
<div class="inline-flex items-center">
<MapMarker class="w-5 h-5 mr-1" />
@ -108,6 +179,27 @@
{#if type == 'link'}
<button class="btn btn-primary" on:click={link}><Link class="w-6 h-6" /></button>
{/if}
{#if adventure.type == 'visited'}
<button class="btn btn-secondary" on:click={changeType('planned')}
><FormatListBulletedSquare class="w-6 h-6" /></button
>
{/if}
{#if adventure.type == 'planned'}
<button class="btn btn-secondary" on:click={changeType('visited')}
><CheckBold class="w-6 h-6" /></button
>
{/if}
{#if adventure.collection}
<button class="btn btn-secondary" on:click={removeFromCollection}
><LinkVariantRemove class="w-6 h-6" /></button
>
{/if}
{#if !adventure.collection}
<button class="btn btn-secondary" on:click={() => (isCollectionModalOpen = true)}
><Plus class="w-6 h-6" /></button
>
{/if}
</div>
</div>
</div>