Consistent code formatting
This commit is contained in:
Sean Morley
@@ -1,22 +1,21 @@
|
||||
<script>
|
||||
import Footer from "$lib/components/Footer.svelte";
|
||||
import Navbar from "$lib/components/Navbar.svelte";
|
||||
import "../app.css";
|
||||
import Footer from "$lib/components/Footer.svelte";
|
||||
import Navbar from "$lib/components/Navbar.svelte";
|
||||
import "../app.css";
|
||||
|
||||
// only show footer if scrolled to the bottom
|
||||
|
||||
// only show footer if scrolled to the bottom
|
||||
</script>
|
||||
|
||||
<Navbar />
|
||||
<section>
|
||||
<slot></slot>
|
||||
</section>
|
||||
<!-- <Footer /> -->
|
||||
<slot />
|
||||
</section>
|
||||
<!-- <Footer /> -->
|
||||
|
||||
<!-- <style>
|
||||
<!-- <style>
|
||||
section {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 5rem;
|
||||
/* gives the footer space! */
|
||||
}
|
||||
</style> -->
|
||||
</style> -->
|
||||
|
||||
@@ -1,27 +1,25 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import campingDrawing from "$lib/assets/camping.svg";
|
||||
import { visitCount } from '$lib/utils/stores/visitCountStore';
|
||||
import { goto } from "$app/navigation";
|
||||
import campingDrawing from "$lib/assets/camping.svg";
|
||||
import { visitCount } from "$lib/utils/stores/visitCountStore";
|
||||
|
||||
async function navToLog() {
|
||||
goto('/log');
|
||||
}
|
||||
async function navToLog() {
|
||||
goto("/log");
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<article class="prose"><h1 class="mb-4">Welcome. Let's get Exploring!</h1></article>
|
||||
<img src={campingDrawing} class="w-1/4 mb-4" alt="Logo" />
|
||||
<button on:click={navToLog} class="btn btn-primary">Open Log</button>
|
||||
<article class="prose">
|
||||
<h1 class="mb-4">Welcome. Let's get Exploring!</h1>
|
||||
</article>
|
||||
<img src={campingDrawing} class="w-1/4 mb-4" alt="Logo" />
|
||||
<button on:click={navToLog} class="btn btn-primary">Open Log</button>
|
||||
|
||||
|
||||
<div class="stats shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-title">Logged Adventures</div>
|
||||
<div class="stat-value text-center">{$visitCount}</div>
|
||||
<!-- <div class="stat-desc">21% more than last month</div> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="stats shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-title">Logged Adventures</div>
|
||||
<div class="stat-value text-center">{$visitCount}</div>
|
||||
<!-- <div class="stat-desc">21% more than last month</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -3,9 +3,12 @@ import { sharedAdventures } from "$lib/db/schema";
|
||||
import type { Adventure } from "$lib/utils/types";
|
||||
|
||||
export async function POST({ request }: { request: Request }) {
|
||||
const { key , data } = await request.json();
|
||||
let adventure = data as Adventure;
|
||||
console.log(adventure);
|
||||
await db.insert(sharedAdventures).values({ id:key,data:adventure }).execute();
|
||||
return new Response(JSON.stringify({key:key}));
|
||||
}
|
||||
const { key, data } = await request.json();
|
||||
let adventure = data as Adventure;
|
||||
console.log(adventure);
|
||||
await db
|
||||
.insert(sharedAdventures)
|
||||
.values({ id: key, data: adventure })
|
||||
.execute();
|
||||
return new Response(JSON.stringify({ key: key }));
|
||||
}
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
import { db } from '$lib/db/db.server';
|
||||
import { featuredAdventures } from '$lib/db/schema';
|
||||
import type { Adventure } from '$lib/utils/types';
|
||||
import { db } from "$lib/db/db.server";
|
||||
import { featuredAdventures } from "$lib/db/schema";
|
||||
import type { Adventure } from "$lib/utils/types";
|
||||
|
||||
|
||||
export const load = (async () => {
|
||||
const result = await db.select().from(featuredAdventures).orderBy(featuredAdventures.id);
|
||||
return {
|
||||
result : result as Adventure[]
|
||||
};
|
||||
})
|
||||
export const load = async () => {
|
||||
const result = await db
|
||||
.select()
|
||||
.from(featuredAdventures)
|
||||
.orderBy(featuredAdventures.id);
|
||||
return {
|
||||
result: result as Adventure[],
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,31 +1,39 @@
|
||||
<script lang="ts">
|
||||
export let data
|
||||
console.log(data.result);
|
||||
import AdventureCard from '$lib/components/AdventureCard.svelte';
|
||||
import type { Adventure } from '$lib/utils/types.js';
|
||||
import { addAdventure, getNextId } from '../../services/adventureService.js';
|
||||
export let data;
|
||||
console.log(data.result);
|
||||
import AdventureCard from "$lib/components/AdventureCard.svelte";
|
||||
import type { Adventure } from "$lib/utils/types.js";
|
||||
import { addAdventure, getNextId } from "../../services/adventureService.js";
|
||||
|
||||
function add(event: CustomEvent<{name: string, location: string}>) {
|
||||
console.log(event.detail);
|
||||
let newAdventure:Adventure = {
|
||||
id: getNextId(),
|
||||
name: event.detail.name,
|
||||
location: event.detail.location,
|
||||
created: ""
|
||||
}
|
||||
addAdventure(newAdventure);
|
||||
|
||||
}
|
||||
function add(event: CustomEvent<{ name: string; location: string }>) {
|
||||
console.log(event.detail);
|
||||
let newAdventure: Adventure = {
|
||||
id: getNextId(),
|
||||
name: event.detail.name,
|
||||
location: event.detail.location,
|
||||
created: "",
|
||||
};
|
||||
addAdventure(newAdventure);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex justify-center items-center w-full mt-4 mb-4">
|
||||
<article class="prose">
|
||||
<h1 class="text-center">Featured Adventure Locations</h1>
|
||||
</article>
|
||||
<article class="prose">
|
||||
<h1 class="text-center">Featured Adventure Locations</h1>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<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 data.result as adventure (adventure.id)}
|
||||
<AdventureCard type="featured" on:add={add} name={adventure.name} location={adventure.location} created="" id={NaN} />
|
||||
{/each}
|
||||
</div>
|
||||
<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 data.result as adventure (adventure.id)}
|
||||
<AdventureCard
|
||||
type="featured"
|
||||
on:add={add}
|
||||
name={adventure.name}
|
||||
location={adventure.location}
|
||||
created=""
|
||||
id={NaN}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@@ -1,179 +1,224 @@
|
||||
<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 { generateRandomString } from "$lib";
|
||||
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 { generateRandomString } from "$lib";
|
||||
|
||||
let newName = '';
|
||||
let newLocation = '';
|
||||
let newName = "";
|
||||
let newLocation = "";
|
||||
|
||||
let editId:number = NaN;
|
||||
let editName:string = '';
|
||||
let editLocation:string = '';
|
||||
let editCreated: string = '';
|
||||
let editId: number = NaN;
|
||||
let editName: string = "";
|
||||
let editLocation: string = "";
|
||||
let editCreated: string = "";
|
||||
|
||||
let adventures: Adventure[] = [];
|
||||
let adventures: Adventure[] = [];
|
||||
|
||||
let isShowingToast:boolean = false;
|
||||
let toastAction:string = '';
|
||||
let isShowingToast: boolean = false;
|
||||
let toastAction: string = "";
|
||||
|
||||
function showToast(action:string) {
|
||||
toastAction = action;
|
||||
isShowingToast = true;
|
||||
console.log('showing toast');
|
||||
function showToast(action: string) {
|
||||
toastAction = action;
|
||||
isShowingToast = true;
|
||||
console.log("showing toast");
|
||||
|
||||
setTimeout(() => {
|
||||
isShowingToast = false;
|
||||
toastAction = '';
|
||||
console.log('hiding toast');
|
||||
}, 3000);
|
||||
}
|
||||
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');
|
||||
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()
|
||||
});
|
||||
onMount(async () => {
|
||||
adventures = getAdventures();
|
||||
});
|
||||
|
||||
function triggerRemoveAdventure(event: { detail: number; }) {
|
||||
removeAdventure(event)
|
||||
showToast('removed');
|
||||
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 saveAdventure(event: { detail: Adventure; }) {
|
||||
console.log("Event" + event.detail)
|
||||
saveEdit(event.detail)
|
||||
editId = NaN;
|
||||
editName = '';
|
||||
editLocation = '';
|
||||
editCreated = '';
|
||||
adventures = getAdventures()
|
||||
showToast('edited');
|
||||
function shareLink() {
|
||||
let key = generateRandomString();
|
||||
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);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error:", error);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
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 shareLink() {
|
||||
let key = generateRandomString()
|
||||
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)
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
editId = NaN;
|
||||
editName = '';
|
||||
editLocation = '';
|
||||
editCreated = '';
|
||||
}
|
||||
|
||||
function deleteData() {
|
||||
clearAdventures();
|
||||
adventures = getAdventures();
|
||||
showToast('deleted');
|
||||
}
|
||||
function handleClose() {
|
||||
editId = NaN;
|
||||
editName = "";
|
||||
editLocation = "";
|
||||
editCreated = "";
|
||||
}
|
||||
|
||||
function deleteData() {
|
||||
clearAdventures();
|
||||
adventures = getAdventures();
|
||||
showToast("deleted");
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex justify-center items-center w-full mt-4 mb-4">
|
||||
<article class="prose">
|
||||
<h2 class="text-center">Add new Location</h2>
|
||||
</article>
|
||||
<article class="prose">
|
||||
<h2 class="text-center">Add new Location</h2>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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 adventures.length != 0}
|
||||
<div class="flex justify-center items-center w-full mt-4 mb-4">
|
||||
<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>
|
||||
<h1 class="text-center">My Visited Adventure Locations</h1>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if isShowingToast}
|
||||
<SucessToast action={toastAction} />
|
||||
<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} />
|
||||
<EditModal
|
||||
bind:editId
|
||||
bind:editName
|
||||
bind:editLocation
|
||||
bind: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 type="mylog" id={adventure.id} name={adventure.name} location={adventure.location} created={adventure.created} on:remove={triggerRemoveAdventure} on:edit={editAdventure} />
|
||||
{/each}
|
||||
<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
|
||||
type="mylog"
|
||||
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-16">
|
||||
<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>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if adventures.length != 0}
|
||||
<div class="flex justify-center items-center w-full mt-4">
|
||||
<div class="flex justify-center items-center w-full mt-4">
|
||||
<article class="prose">
|
||||
<h2 class="text-center">Actions</h2>
|
||||
<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={async () => { window.location.href = exportData(); }}>
|
||||
<img src={exportFile} class="inline-block -mt-1" alt="Logo" /> Save as File
|
||||
</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={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
|
||||
<img src={deleteIcon} class="inline-block -mt-1" alt="Logo" /> Delete Data
|
||||
</button>
|
||||
<button class="btn btn-neutral" on:click={shareLink}>
|
||||
<img src={deleteIcon} class="inline-block -mt-1" alt="Logo" /> Share as Link
|
||||
<img src={deleteIcon} class="inline-block -mt-1" alt="Logo" /> Share as Link
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -4,11 +4,15 @@ import { eq } from "drizzle-orm";
|
||||
import type { Adventure } from "$lib/utils/types";
|
||||
|
||||
export async function load({ params }) {
|
||||
let key = params.key;
|
||||
let result = await db.select().from(sharedAdventures).where(eq(sharedAdventures.id, key)).execute();
|
||||
let adventure = result[0].data as Adventure;
|
||||
console.log(adventure);
|
||||
return {
|
||||
result: adventure
|
||||
};
|
||||
};
|
||||
let key = params.key;
|
||||
let result = await db
|
||||
.select()
|
||||
.from(sharedAdventures)
|
||||
.where(eq(sharedAdventures.id, key))
|
||||
.execute();
|
||||
let adventure = result[0].data as Adventure;
|
||||
console.log(adventure);
|
||||
return {
|
||||
result: adventure,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { Adventure } from '$lib/utils/types'
|
||||
export let data;
|
||||
let result = data.result;
|
||||
|
||||
import type { Adventure } from "$lib/utils/types";
|
||||
export let data;
|
||||
let result = data.result;
|
||||
</script>
|
||||
|
||||
<p>{result}</p>
|
||||
<p>{result}</p>
|
||||
|
||||
Reference in New Issue
Block a user