alex/voyage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Sean Morley
2024-03-29 21:41:22 +00:00
commit 9addb5462e
18 changed files with 2293 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/app.d.ts vendored Normal file
View File

@@ -0,0 +1,13 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
export {};

12
src/app.html Normal file
View File

@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

36
src/lib/components/AdventureCard.svelte Normal file
View File

@@ -0,0 +1,36 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
export let name:String;
export let location:String;
export let created:string;
export let id:Number;
function remove() {
dispatch('remove', name);
}
function edit() {
dispatch('edit', id)
}
</script>
<div>
<!-- <p>ID: {id}</p> -->
<p>Name: {name}</p>
<p>Location: {location}</p>
<p>Created: {created}</p>
<button on:click={remove}>Remove</button>
<button on:click={edit}>Edit</button>
</div>
<style>
div {
margin: 2rem;
padding: .5rem;
background-color: rgb(235, 230, 223);
border: 1px solid grey;
border-radius: .5rem;
box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.182);
}
</style>

1
src/lib/index.ts Normal file
View File

@@ -0,0 +1 @@
// place files you want to import through the `$lib` alias in this folder.

6
src/lib/utils/types.ts Normal file
View File

@@ -0,0 +1,6 @@
export interface Adventure {
id: number
name: string;
location: string;
created:string
}

74
src/routes/+page.svelte Normal file
View File

@@ -0,0 +1,74 @@
<script lang="ts">
import AdventureCard from "$lib/components/AdventureCard.svelte";
import type { Adventure } from '$lib/utils/types';
import { addAdventure, getAdventures, getNextId, removeAdventure ,saveEdit } from "../services/adventureService";
import { onMount } from 'svelte';
let newName = '';
let newLocation = '';
let editId:number = NaN;
let editName:string = '';
let editLocation:string = '';
let editCreated: string = '';
let adventures: Adventure[] = [];
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
};
onMount(async () => {
adventures = getAdventures()
});
function triggerRemoveAdventure(event: { detail: string; }) {
removeAdventure(event)
adventures = getAdventures()
}
function saveAdventure() {
saveEdit(editId, editName, editLocation, editCreated)
adventures = getAdventures()
}
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;
}
}
</script>
<input bind:value={newName} placeholder="Adventure Name" />
<input bind:value={newLocation} placeholder="Adventure Location" />
<button on:click={createNewAdventure}>Add Adventure</button>
{#each adventures as adventure, i}
<div>
<AdventureCard id={adventure.id} name={adventure.name} location={adventure.location} created={adventure.created} on:remove={triggerRemoveAdventure} on:edit={editAdventure} />
</div>
{/each}
{#if editId !== null}
<form on:submit|preventDefault={saveAdventure}>
<input bind:value={editName} />
<input bind:value={editLocation} />
<input type="date" bind:value={editCreated} />
<button type="submit">Save</button>
</form>
{/if}
<style>
</style>

54
src/services/adventureService.ts Normal file
View File

@@ -0,0 +1,54 @@
import type { Adventure } from '$lib/utils/types';
let adventures: Adventure[] = [];
// Check if localStorage is available (browser environment)
const isBrowser = typeof window !== 'undefined';
// Load adventures from localStorage on startup (only in the browser)
if (isBrowser) {
const storedAdventures = localStorage.getItem('adventures');
if (storedAdventures) {
adventures = JSON.parse(storedAdventures);
}
}
export function getNextId() {
let nextId = Math.max(0, ...adventures.map(adventure => adventure.id)) + 1;
return nextId;
}
export function addAdventure(adventure: Adventure) {
adventures = [...adventures, adventure];
if (isBrowser) {
localStorage.setItem('adventures', JSON.stringify(adventures));
}
console.log(adventures);
}
export function getAdventures(): Adventure[] {
return adventures;
}
export function removeAdventure(event: { detail: string; }) {
adventures = adventures.filter(adventure => adventure.name !== event.detail);
if (isBrowser) {
localStorage.setItem('adventures', JSON.stringify(adventures));
}
}
export function saveEdit(editId:number, editName:string, editLocation:string, editCreated:string) {
const adventure = adventures.find(adventure => adventure.id === editId);
if (adventure) {
adventure.name = editName;
adventure.location = editLocation;
adventure.created = editCreated;
}
editId = NaN;
console.log("done")
if (isBrowser) {
localStorage.setItem('adventures', JSON.stringify(adventures));
}
}