mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-08-02 03:35:18 +02:00
Add layout and footer components, update adventureService, and create log page
This commit is contained in:
Sean Morley
parent
2f180a204b
commit
90036c5c14
5 changed files with 144 additions and 103 deletions
18
src/lib/components/Footer.svelte
Normal file
18
src/lib/components/Footer.svelte
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<style>
|
||||
.footer {
|
||||
clear: both;
|
||||
position: relative;
|
||||
height: 4rem;
|
||||
margin-top: -4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<div class="footer">
|
||||
<hr>
|
||||
<br>
|
||||
<p>AdventureLog 🗺️</p>
|
||||
</div>
|
||||
15
src/routes/+layout.svelte
Normal file
15
src/routes/+layout.svelte
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<script>
|
||||
import Footer from "$lib/components/Footer.svelte";
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<slot></slot>
|
||||
</section>
|
||||
<Footer />
|
||||
|
||||
<style>
|
||||
section {
|
||||
margin-bottom: 5rem;
|
||||
/* gives the footer space! */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,105 +1,8 @@
|
|||
<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';
|
||||
import { exportData } from "../services/export";
|
||||
import { importData } from "../services/import";
|
||||
|
||||
import mapDrawing from "$lib/assets/adventure_map.svg"
|
||||
|
||||
|
||||
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 navToLog() {
|
||||
window.location.href = '/log';
|
||||
}
|
||||
|
||||
function saveAdventure() {
|
||||
saveEdit(editId, editName, editLocation, editCreated)
|
||||
editId = NaN;
|
||||
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 adventures.length == 0}
|
||||
<div class="addsomething">
|
||||
<h2>Add some adventures!</h2>
|
||||
<img src={mapDrawing} width="25%" alt="Logo" />
|
||||
</div >
|
||||
|
||||
{/if}
|
||||
|
||||
{#if !Number.isNaN(editId)}
|
||||
<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}
|
||||
|
||||
{#if adventures.length != 0}
|
||||
<button on:click={async () => { window.location.href = exportData(); }}>Save as File</button>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.addsomething {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 90vh;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<h1>Welcome to AdventureLog 🗺️</h1>
|
||||
<button on:click={navToLog}>Open Log</button>
|
||||
|
|
|
|||
105
src/routes/log/+page.svelte
Normal file
105
src/routes/log/+page.svelte
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<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';
|
||||
import { exportData } from "../../services/export";
|
||||
import { importData } from "../../services/import";
|
||||
|
||||
import mapDrawing from "$lib/assets/adventure_map.svg"
|
||||
|
||||
|
||||
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: number; }) {
|
||||
removeAdventure(event)
|
||||
adventures = getAdventures()
|
||||
}
|
||||
|
||||
function saveAdventure() {
|
||||
saveEdit(editId, editName, editLocation, editCreated)
|
||||
editId = NaN;
|
||||
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 adventures.length == 0}
|
||||
<div class="addsomething">
|
||||
<h2>Add some adventures!</h2>
|
||||
<img src={mapDrawing} width="25%" alt="Logo" />
|
||||
</div >
|
||||
|
||||
{/if}
|
||||
|
||||
{#if !Number.isNaN(editId)}
|
||||
<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}
|
||||
|
||||
{#if adventures.length != 0}
|
||||
<button on:click={async () => { window.location.href = exportData(); }}>Save as File</button>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.addsomething {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 90vh;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -34,8 +34,8 @@ export function getAdventures(): Adventure[] {
|
|||
return adventures;
|
||||
}
|
||||
|
||||
export function removeAdventure(event: { detail: string; }) {
|
||||
adventures = adventures.filter(adventure => adventure.name !== event.detail);
|
||||
export function removeAdventure(event: { detail: number; }) {
|
||||
adventures = adventures.filter(adventure => adventure.id !== event.detail);
|
||||
if (isBrowser) {
|
||||
localStorage.setItem('adventures', JSON.stringify(adventures));
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue