273 lines
7.7 KiB
Svelte
273 lines
7.7 KiB
Svelte
<script lang="ts">
|
|
export let data;
|
|
let adventures: Adventure[] = [];
|
|
let isLoading = true;
|
|
|
|
import AdventureCard from "$lib/components/AdventureCard.svelte";
|
|
import type { Adventure } from "$lib/utils/types";
|
|
import { onMount } from "svelte";
|
|
import exportFile from "$lib/assets/exportFile.svg";
|
|
import ConfirmModal from "$lib/components/ConfirmModal.svelte";
|
|
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 { generateRandomString } from "$lib";
|
|
import MoreFieldsInput from "$lib/components/CreateNewAdventure.svelte";
|
|
import {
|
|
addAdventure,
|
|
removeAdventure,
|
|
saveAdventure,
|
|
} from "../../services/adventureService.js";
|
|
|
|
let isShowingMoreFields = false;
|
|
|
|
let adventureToEdit: Adventure | undefined;
|
|
|
|
let isShowingToast: boolean = false;
|
|
let toastAction: string = "";
|
|
let confirmModalOpen: boolean = false;
|
|
|
|
// Sets the adventures array to the data from the server
|
|
onMount(async () => {
|
|
console.log(data);
|
|
adventures = data.result;
|
|
isLoading = false;
|
|
});
|
|
|
|
function showToast(action: string) {
|
|
toastAction = action;
|
|
isShowingToast = true;
|
|
|
|
setTimeout(() => {
|
|
isShowingToast = false;
|
|
toastAction = "";
|
|
}, 3000);
|
|
}
|
|
|
|
function exportData() {
|
|
let jsonString = JSON.stringify(adventures);
|
|
let blob = new Blob([jsonString], { type: "application/json" });
|
|
let url = URL.createObjectURL(blob);
|
|
|
|
let link = document.createElement("a");
|
|
link.download = "adventurelog-export.json";
|
|
link.href = url;
|
|
link.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
const createNewAdventure = async (event: { detail: Adventure }) => {
|
|
isShowingMoreFields = false;
|
|
let newArray = await addAdventure(event.detail, adventures);
|
|
if (newArray.length > 0) {
|
|
adventures = newArray;
|
|
showToast("Adventure added successfully!");
|
|
} else {
|
|
showToast("Failed to add adventure");
|
|
}
|
|
};
|
|
|
|
async function save(event: { detail: Adventure }) {
|
|
let newArray = await saveAdventure(event.detail, adventures);
|
|
if (newArray.length > 0) {
|
|
adventures = newArray;
|
|
showToast("Adventure updated successfully!");
|
|
} else {
|
|
showToast("Failed to update adventure");
|
|
}
|
|
adventureToEdit = undefined;
|
|
}
|
|
|
|
function editAdventure(event: { detail: number }) {
|
|
const adventure = adventures.find(
|
|
(adventure) => adventure.id === event.detail
|
|
);
|
|
if (adventure) {
|
|
adventureToEdit = adventure;
|
|
}
|
|
}
|
|
|
|
function shareLink() {
|
|
let key = generateRandomString();
|
|
|
|
// console log each adventure in the array
|
|
for (let i = 0; i < adventures.length; i++) {
|
|
console.log(adventures[i]);
|
|
}
|
|
|
|
let data = JSON.stringify(adventures);
|
|
fetch("/api/share", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ key, data }),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
console.log("Success:", data);
|
|
let url = window.location.origin + "/shared/" + key;
|
|
navigator.clipboard.writeText(url);
|
|
showToast("Link copied to clipboard!");
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error:", error);
|
|
});
|
|
}
|
|
|
|
function handleClose() {
|
|
adventureToEdit = undefined;
|
|
confirmModalOpen = false;
|
|
isShowingMoreFields = false;
|
|
}
|
|
|
|
function deleteData() {
|
|
fetch("/api/clearvisits", {
|
|
method: "DELETE",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
console.log("Success:", data);
|
|
// remove adventure from array where id matches
|
|
adventures = [];
|
|
showToast("Adventure removed successfully!");
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error:", error);
|
|
});
|
|
}
|
|
|
|
async function remove(event: { detail: number }) {
|
|
let initialLength: number = adventures.length;
|
|
let theAdventure = adventures.find(
|
|
(adventure) => adventure.id === event.detail
|
|
);
|
|
if (theAdventure) {
|
|
let newArray = await removeAdventure(theAdventure, adventures);
|
|
if (newArray.length === initialLength - 1) {
|
|
adventures = newArray;
|
|
showToast("Adventure removed successfully!");
|
|
} else {
|
|
showToast("Failed to remove adventure");
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="fixed bottom-4 right-4 z-[999]">
|
|
<div class="flex flex-row items-center justify-center gap-4">
|
|
<div class="dropdown dropdown-top dropdown-end">
|
|
<div tabindex="0" role="button" class="btn m-1 size-16 btn-primary">
|
|
<iconify-icon icon="mdi:plus" class="text-2xl"></iconify-icon>
|
|
</div>
|
|
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
|
<ul
|
|
tabindex="0"
|
|
class="dropdown-content z-[1] menu p-4 shadow bg-base-300 text-base-content rounded-box w-52 gap-4"
|
|
>
|
|
<p class="text-center font-bold text-lg">Create new...</p>
|
|
<button
|
|
class="btn btn-primary"
|
|
on:click={() => (isShowingMoreFields = true)}
|
|
>Visited Adventure</button
|
|
>
|
|
<!-- <button
|
|
class="btn btn-primary"
|
|
on:click={() => (isShowingNewTrip = true)}>Trip Planner</button
|
|
> -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{#if adventures.length != 0}
|
|
<div class="flex justify-center items-center w-full mt-4 mb-4">
|
|
<article class="prose">
|
|
<h1 class="text-center">My Visited Adventure Locations</h1>
|
|
</article>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if isLoading}
|
|
<div class="flex justify-center items-center w-full mt-16">
|
|
<span class="loading loading-spinner w-24 h-24"></span>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if isShowingToast}
|
|
<SucessToast action={toastAction} />
|
|
{/if}
|
|
|
|
{#if isShowingMoreFields}
|
|
<MoreFieldsInput
|
|
on:create={createNewAdventure}
|
|
on:close={handleClose}
|
|
type="mylog"
|
|
/>
|
|
{/if}
|
|
|
|
{#if adventureToEdit && adventureToEdit.id != undefined}
|
|
<EditModal bind:adventureToEdit on:submit={save} on:close={handleClose} />
|
|
{/if}
|
|
|
|
<div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
|
|
{#each adventures as adventure (adventure.id)}
|
|
<AdventureCard
|
|
{adventure}
|
|
type="mylog"
|
|
on:edit={editAdventure}
|
|
on:remove={remove}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
|
|
{#if adventures.length == 0 && !isLoading}
|
|
<div class="flex flex-col items-center justify-center mt-16">
|
|
<article class="prose mb-4"><h2>Add some adventures!</h2></article>
|
|
<img src={mapDrawing} width="25%" alt="Logo" />
|
|
</div>
|
|
{/if}
|
|
|
|
{#if adventures.length != 0 && !isLoading}
|
|
<div class="flex justify-center items-center w-full mt-4">
|
|
<article class="prose">
|
|
<h2 class="text-center">Actions</h2>
|
|
</article>
|
|
</div>
|
|
<div
|
|
class="flex flex-row items-center justify-center mt-2 gap-4 mb-4 flex-wrap"
|
|
>
|
|
<button class="btn btn-neutral" on:click={exportData}>
|
|
<img src={exportFile} class="inline-block -mt-1" alt="Logo" /> Save as File
|
|
</button>
|
|
<button class="btn btn-neutral" on:click={() => (confirmModalOpen = true)}>
|
|
<img src={deleteIcon} class="inline-block -mt-1" alt="Logo" /> Delete Data
|
|
</button>
|
|
<button class="btn btn-neutral" on:click={shareLink}>
|
|
<iconify-icon icon="mdi:share-variant" class="text-xl"></iconify-icon> Share
|
|
as Link
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if confirmModalOpen}
|
|
<ConfirmModal
|
|
on:close={handleClose}
|
|
on:confirm={deleteData}
|
|
title="Delete all Adventures"
|
|
isWarning={false}
|
|
message="Are you sure you want to delete all adventures?"
|
|
/>
|
|
{/if}
|
|
|
|
<svelte:head>
|
|
<title>My Log | AdventureLog</title>
|
|
<meta
|
|
name="description"
|
|
content="Displays the user's visited adventure locations."
|
|
/>
|
|
</svelte:head>
|