mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-08-05 13:15:18 +02:00
feat: Add addAdventure, removeAdventure, and saveAdventure functions
The code changes include adding the addAdventure, removeAdventure, and saveAdventure functions to the +page.svelte file and adventureService.js module. These functions handle the API requests for adding, removing, and saving adventures respectively. They update the local plans array based on the API response and display appropriate toast messages. These changes enhance the functionality of the planner page by allowing users to add, remove, and save adventures.
This commit is contained in:
parent
609d3743ed
commit
66d2dc7b15
1 changed files with 37 additions and 91 deletions
|
@ -14,6 +14,11 @@
|
|||
import { generateRandomString } from "$lib";
|
||||
import { visitCount } from "$lib/utils/stores/visitCountStore";
|
||||
import MoreFieldsInput from "$lib/components/CreateNewAdventure.svelte";
|
||||
import {
|
||||
addAdventure,
|
||||
removeAdventure,
|
||||
saveAdventure,
|
||||
} from "../../services/adventureService.js";
|
||||
|
||||
let isShowingMoreFields = false;
|
||||
|
||||
|
@ -56,72 +61,26 @@
|
|||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
const createNewAdventure = (event: { detail: Adventure }) => {
|
||||
const createNewAdventure = async (event: { detail: Adventure }) => {
|
||||
isShowingMoreFields = false;
|
||||
let detailAdventure = event.detail;
|
||||
console.log("Event" + event.detail.name);
|
||||
|
||||
fetch("/api/visits", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
detailAdventure,
|
||||
}),
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
return response.json().then((data) => {
|
||||
throw new Error(
|
||||
data.error || `Failed to add adventure - ${data?.message}`
|
||||
);
|
||||
});
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
// add to local array for instant view update
|
||||
adventures = [...adventures, data.adventure];
|
||||
showToast("Adventure added successfully!");
|
||||
visitCount.update((n) => n + 1);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error:", error);
|
||||
showToast(error.message);
|
||||
});
|
||||
let newArray = await addAdventure(event.detail, adventures);
|
||||
if (newArray.length > 0) {
|
||||
adventures = newArray;
|
||||
showToast("Adventure added successfully!");
|
||||
} else {
|
||||
showToast("Failed to add adventure");
|
||||
}
|
||||
};
|
||||
|
||||
function saveAdventure(event: { detail: Adventure }) {
|
||||
console.log("Event", event.detail);
|
||||
let detailAdventure = event.detail;
|
||||
|
||||
// put request to /api/visits with id and adventure data
|
||||
fetch("/api/visits", {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
detailAdventure,
|
||||
}),
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log("Success:", data);
|
||||
// update local array with new data
|
||||
const index = adventures.findIndex(
|
||||
(adventure) => adventure.id === detailAdventure.id
|
||||
);
|
||||
if (index !== -1) {
|
||||
adventures[index] = detailAdventure;
|
||||
}
|
||||
adventureToEdit = undefined;
|
||||
showToast("Adventure edited successfully!");
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error:", error);
|
||||
});
|
||||
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 }) {
|
||||
|
@ -186,29 +145,20 @@
|
|||
});
|
||||
}
|
||||
|
||||
function removeAdventure(event: { detail: number }) {
|
||||
console.log("Event ID " + event.detail);
|
||||
// send delete request to server at /api/visits
|
||||
fetch("/api/visits", {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ id: event.detail }),
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log("Success:", data);
|
||||
// remove adventure from array where id matches
|
||||
adventures = adventures.filter(
|
||||
(adventure) => adventure.id !== event.detail
|
||||
);
|
||||
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!");
|
||||
visitCount.update((n) => n - 1);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error:", error);
|
||||
});
|
||||
} else {
|
||||
showToast("Failed to remove adventure");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -254,11 +204,7 @@
|
|||
{/if}
|
||||
|
||||
{#if adventureToEdit && adventureToEdit.id != undefined}
|
||||
<EditModal
|
||||
bind:adventureToEdit
|
||||
on:submit={saveAdventure}
|
||||
on:close={handleClose}
|
||||
/>
|
||||
<EditModal bind:adventureToEdit on:submit={save} on:close={handleClose} />
|
||||
{/if}
|
||||
|
||||
<div
|
||||
|
@ -269,7 +215,7 @@
|
|||
{adventure}
|
||||
type="mylog"
|
||||
on:edit={editAdventure}
|
||||
on:remove={removeAdventure}
|
||||
on:remove={remove}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue