138 lines
4.8 KiB
Svelte
138 lines
4.8 KiB
Svelte
<script lang="ts">
|
|
import AdventureCard from "$lib/components/AdventureCard.svelte";
|
|
import type { Adventure } from '$lib/utils/types';
|
|
import { addAdventure, clearAdventures, getAdventures, getNextId, removeAdventure ,saveEdit } from "../../services/adventureService";
|
|
import { onMount } from 'svelte';
|
|
import { exportData } from "../../services/export";
|
|
import { importData } from "../../services/import";
|
|
import exportFile from "$lib/assets/exportFile.svg";
|
|
import deleteIcon from "$lib/assets/deleteIcon.svg";
|
|
import SucessToast from "$lib/components/SucessToast.svelte";
|
|
import mapDrawing from "$lib/assets/adventure_map.svg"
|
|
import EditModal from "$lib/components/EditModal.svelte";
|
|
import { Input } from "postcss";
|
|
|
|
|
|
let newName = '';
|
|
let newLocation = '';
|
|
|
|
let editId:number = NaN;
|
|
let editName:string = '';
|
|
let editLocation:string = '';
|
|
let editCreated: string = '';
|
|
|
|
let adventures: Adventure[] = [];
|
|
|
|
let isShowingToast:boolean = false;
|
|
let toastAction:string = '';
|
|
|
|
function showToast(action:string) {
|
|
toastAction = action;
|
|
isShowingToast = true;
|
|
console.log('showing toast');
|
|
|
|
setTimeout(() => {
|
|
isShowingToast = false;
|
|
toastAction = '';
|
|
console.log('hiding toast');
|
|
}, 3000);
|
|
}
|
|
|
|
const createNewAdventure = () => {
|
|
let currentDate = new Date();
|
|
let dateString = currentDate.toISOString().slice(0,10); // Get date in "yyyy-mm-dd" format
|
|
const newAdventure: Adventure = { id:getNextId(), name: newName, location: newLocation, created: dateString};
|
|
addAdventure(newAdventure);
|
|
newName = ''; // Reset newName and newLocation after adding adventure
|
|
newLocation = '';
|
|
adventures = getAdventures(); // add to local array
|
|
showToast('added');
|
|
};
|
|
|
|
onMount(async () => {
|
|
adventures = getAdventures()
|
|
});
|
|
|
|
function triggerRemoveAdventure(event: { detail: number; }) {
|
|
removeAdventure(event)
|
|
showToast('removed');
|
|
adventures = getAdventures()
|
|
}
|
|
|
|
function saveAdventure(event: { detail: Adventure; }) {
|
|
console.log("Event" + event.detail)
|
|
saveEdit(event.detail)
|
|
editId = NaN;
|
|
editName = '';
|
|
editLocation = '';
|
|
editCreated = '';
|
|
adventures = getAdventures()
|
|
showToast('edited');
|
|
|
|
}
|
|
|
|
function editAdventure(event: { detail: number; }) {
|
|
const adventure = adventures.find(adventure => adventure.id === event.detail);
|
|
if (adventure) {
|
|
editId = adventure.id;
|
|
editName = adventure.name;
|
|
editLocation = adventure.location;
|
|
editCreated = adventure.created;
|
|
}
|
|
}
|
|
|
|
function handleClose() {
|
|
editId = NaN;
|
|
editName = '';
|
|
editLocation = '';
|
|
editCreated = '';
|
|
}
|
|
|
|
function deleteData() {
|
|
clearAdventures();
|
|
adventures = getAdventures();
|
|
showToast('deleted');
|
|
}
|
|
|
|
</script>
|
|
|
|
<div class="flex flex-row items-center justify-center gap-4">
|
|
<form on:submit={createNewAdventure} class="flex gap-2">
|
|
<input type="text" bind:value={newName} placeholder="Adventure Name" class="input input-bordered w-full max-w-xs" />
|
|
<input type="text" bind:value={newLocation} placeholder="Adventure Location" class="input input-bordered w-full max-w-xs" />
|
|
<input class="btn btn-primary" type="submit" value="Add Adventure">
|
|
</form>
|
|
</div>
|
|
|
|
{#if isShowingToast}
|
|
<SucessToast action={toastAction} />
|
|
{/if}
|
|
|
|
{#if !Number.isNaN(editId)}
|
|
<EditModal bind:editId={editId} bind:editName={editName} bind:editLocation={editLocation} bind:editCreated={editCreated} on:submit={saveAdventure} on:close={handleClose} />
|
|
{/if}
|
|
|
|
<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 adventures as adventure (adventure.id)}
|
|
<AdventureCard id={adventure.id} name={adventure.name} location={adventure.location} created={adventure.created} on:remove={triggerRemoveAdventure} on:edit={editAdventure} />
|
|
{/each}
|
|
</div>
|
|
|
|
{#if adventures.length == 0}
|
|
<div class="flex flex-col items-center justify-center mt-28">
|
|
<article class="prose mb-4"><h2>Add some adventures!</h2></article>
|
|
<img src={mapDrawing} width="25%" alt="Logo" />
|
|
</div>
|
|
{/if}
|
|
|
|
{#if adventures.length != 0}
|
|
<div class="flex flex-row items-center justify-center mt-28 gap-4">
|
|
<button class="btn btn-neutral" on:click={async () => { window.location.href = exportData(); }}>
|
|
<img src={exportFile} class="inline-block -mt-1" alt="Logo" /> Save as File
|
|
</button>
|
|
<button class="btn btn-neutral" on:click={deleteData}>
|
|
<img src={deleteIcon} class="inline-block -mt-1" alt="Logo" /> Delete Data
|
|
</button>
|
|
</div>
|
|
{/if}
|