From f0894a964f9ad7ec56c7df09a3710009e7f8a73e Mon Sep 17 00:00:00 2001 From: Sean Morley Date: Tue, 2 Apr 2024 21:33:41 +0000 Subject: [PATCH 1/3] Refactor AdventureCard component and remove FeaturedAdventureCard --- src/lib/components/AdventureCard.svelte | 28 +++++++++++++++++++ .../components/FeaturedAdventureCard.svelte | 24 ---------------- src/routes/featured/+page.svelte | 4 +-- src/routes/log/+page.svelte | 2 +- 4 files changed, 31 insertions(+), 27 deletions(-) delete mode 100644 src/lib/components/FeaturedAdventureCard.svelte diff --git a/src/lib/components/AdventureCard.svelte b/src/lib/components/AdventureCard.svelte index a94b0be..f185407 100644 --- a/src/lib/components/AdventureCard.svelte +++ b/src/lib/components/AdventureCard.svelte @@ -4,6 +4,8 @@ import calendar from "$lib/assets/calendar.svg"; const dispatch = createEventDispatcher(); + export let type:String; + export let name:String; export let location:String; export let created:string; @@ -15,13 +17,22 @@ function edit() { dispatch('edit', id) } + function add() { + dispatch('add', {name, location}); + } +{#if type === 'mylog'} +

{name}

+ {#if location !== ""}

Logo{location}

+ {/if} + {#if created !== ""}

Logo{created}

+ {/if}
@@ -29,3 +40,20 @@
+{/if} + +{#if type === 'featured'} + +
+
+

{name}

+ {#if location!=""} +

Logo{location}

+ {/if} +
+ +
+
+
+ +{/if} \ No newline at end of file diff --git a/src/lib/components/FeaturedAdventureCard.svelte b/src/lib/components/FeaturedAdventureCard.svelte deleted file mode 100644 index a442402..0000000 --- a/src/lib/components/FeaturedAdventureCard.svelte +++ /dev/null @@ -1,24 +0,0 @@ - - -
-
-

{name}

-

Logo{location}

-
- -
-
-
- diff --git a/src/routes/featured/+page.svelte b/src/routes/featured/+page.svelte index 4099954..df1be87 100644 --- a/src/routes/featured/+page.svelte +++ b/src/routes/featured/+page.svelte @@ -1,7 +1,7 @@ -{#if type === 'mylog'} - -
+{#if type === "mylog"} +

{name}

{#if location !== ""} -

Logo{location}

+

+ Logo{location} +

{/if} {#if created !== ""} -

Logo{created}

+

+ Logo{created} +

{/if}
-
- +
{/if} -{#if type === 'featured'} - -
-
-

{name}

- {#if location!=""} -

Logo{location}

- {/if} -
- +{#if type === "featured"} +
+
+

{name}

+ {#if location != ""} +

+ Logo{location} +

+ {/if} +
+ +
-
- -{/if} \ No newline at end of file +{/if} diff --git a/src/lib/components/DeleteConfirmation.svelte b/src/lib/components/DeleteConfirmation.svelte new file mode 100644 index 0000000..96d5b85 --- /dev/null +++ b/src/lib/components/DeleteConfirmation.svelte @@ -0,0 +1,68 @@ + + + + + + + diff --git a/src/lib/components/EditModal.svelte b/src/lib/components/EditModal.svelte index 861795e..59a813b 100644 --- a/src/lib/components/EditModal.svelte +++ b/src/lib/components/EditModal.svelte @@ -1,66 +1,88 @@ - - - - diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte index ed3bef5..75b3737 100644 --- a/src/lib/components/Footer.svelte +++ b/src/lib/components/Footer.svelte @@ -1,19 +1,53 @@ -
- - +
+ +
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte index 1df7f89..3a47ee9 100644 --- a/src/lib/components/Navbar.svelte +++ b/src/lib/components/Navbar.svelte @@ -1,44 +1,51 @@ +
-
- - - -
-
- AdventureLog πŸ—ΊοΈ -
-
-

Adventures: {count}

-
+
+ + + +
+
+ AdventureLog πŸ—ΊοΈ +
+
+

Adventures: {count}

+
diff --git a/src/lib/components/SucessToast.svelte b/src/lib/components/SucessToast.svelte index 3bc831e..b7a8010 100644 --- a/src/lib/components/SucessToast.svelte +++ b/src/lib/components/SucessToast.svelte @@ -1,9 +1,9 @@
-
- Adventure {action} successfully! -
-
\ No newline at end of file +
+ Adventure {action} successfully! +
+
diff --git a/src/lib/db/db.server.ts b/src/lib/db/db.server.ts index 8151ad8..9288f10 100644 --- a/src/lib/db/db.server.ts +++ b/src/lib/db/db.server.ts @@ -1,8 +1,8 @@ -import { drizzle } from 'drizzle-orm/postgres-js'; -import postgres from 'postgres'; -import dotenv from 'dotenv'; +import { drizzle } from "drizzle-orm/postgres-js"; +import postgres from "postgres"; +import dotenv from "dotenv"; dotenv.config(); const { DATABASE_URL } = process.env; -const client = postgres(DATABASE_URL) +const client = postgres(DATABASE_URL); export const db = drizzle(client, {}); diff --git a/src/lib/db/schema.ts b/src/lib/db/schema.ts index 7ac75d8..f289086 100644 --- a/src/lib/db/schema.ts +++ b/src/lib/db/schema.ts @@ -1,12 +1,12 @@ -import { pgTable,json,text,serial } from "drizzle-orm/pg-core"; +import { pgTable, json, text, serial } from "drizzle-orm/pg-core"; -export const featuredAdventures = pgTable("featuredAdventures",{ - id:serial("id").primaryKey(), - name:text("name").notNull(), - location:text("location"), -}) +export const featuredAdventures = pgTable("featuredAdventures", { + id: serial("id").primaryKey(), + name: text("name").notNull(), + location: text("location"), +}); -export const sharedAdventures = pgTable("sharedAdventures",{ - id:text("id").primaryKey(), - data:json("data").notNull(), -}) \ No newline at end of file +export const sharedAdventures = pgTable("sharedAdventures", { + id: text("id").primaryKey(), + data: json("data").notNull(), +}); diff --git a/src/lib/index.ts b/src/lib/index.ts index 938c29f..c1e2c9f 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -1,11 +1,12 @@ // place files you want to import through the `$lib` alias in this folder. export function generateRandomString() { - let randomString = ''; - const digits = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; + let randomString = ""; + const digits = + "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; - for (let i = 0; i < 10; i++) { - const randomIndex = Math.floor(Math.random() * digits.length); - randomString += digits[randomIndex]; - } - return randomString; -} \ No newline at end of file + for (let i = 0; i < 10; i++) { + const randomIndex = Math.floor(Math.random() * digits.length); + randomString += digits[randomIndex]; + } + return randomString; +} diff --git a/src/lib/utils/stores/visitCountStore.ts b/src/lib/utils/stores/visitCountStore.ts index 347f1fc..a61dbd5 100644 --- a/src/lib/utils/stores/visitCountStore.ts +++ b/src/lib/utils/stores/visitCountStore.ts @@ -1,4 +1,3 @@ -import { onMount } from "svelte"; import { writable } from "svelte/store"; export const visitCount = writable(0); diff --git a/src/lib/utils/types.ts b/src/lib/utils/types.ts index 476d517..39cb486 100644 --- a/src/lib/utils/types.ts +++ b/src/lib/utils/types.ts @@ -1,6 +1,6 @@ export interface Adventure { - id: number - name: string; - location: string; - created:string -} \ No newline at end of file + id: number; + name: string; + location: string; + created: string; +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index a4b71d7..b262a24 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,22 +1,21 @@
- -
- + + + - \ No newline at end of file + --> diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 5dc9a5f..d6ed621 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,27 +1,25 @@
-

Welcome. Let's get Exploring!

- Logo - +
+

Welcome. Let's get Exploring!

+
+ Logo + - -
-
-
Logged Adventures
-
{$visitCount}
- -
- -
- +
+
+
Logged Adventures
+
{$visitCount}
+ +
+
- diff --git a/src/routes/api/share/+server.ts b/src/routes/api/share/+server.ts index 4a42082..5fdf9a3 100644 --- a/src/routes/api/share/+server.ts +++ b/src/routes/api/share/+server.ts @@ -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})); -} \ No newline at end of file + 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 })); +} diff --git a/src/routes/featured/+page.server.ts b/src/routes/featured/+page.server.ts index af5c7ad..eb91938 100644 --- a/src/routes/featured/+page.server.ts +++ b/src/routes/featured/+page.server.ts @@ -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[] - }; -}) \ No newline at end of file +export const load = async () => { + const result = await db + .select() + .from(featuredAdventures) + .orderBy(featuredAdventures.id); + return { + result: result as Adventure[], + }; +}; diff --git a/src/routes/featured/+page.svelte b/src/routes/featured/+page.svelte index df1be87..93f0ad0 100644 --- a/src/routes/featured/+page.svelte +++ b/src/routes/featured/+page.svelte @@ -1,31 +1,39 @@
-
-

Featured Adventure Locations

-
+
+

Featured Adventure Locations

+
-
- {#each data.result as adventure (adventure.id)} - - {/each} -
\ No newline at end of file +
+ {#each data.result as adventure (adventure.id)} + + {/each} +
diff --git a/src/routes/log/+page.svelte b/src/routes/log/+page.svelte index 6958ed5..5af4f81 100644 --- a/src/routes/log/+page.svelte +++ b/src/routes/log/+page.svelte @@ -1,179 +1,224 @@
-
-

Add new Location

-
+
+

Add new Location

+
-
- - - -
+
+ + + +
{#if adventures.length != 0} -
+
-

My Visited Adventure Locations

+

My Visited Adventure Locations

-
+
{/if} {#if isShowingToast} - + {/if} {#if !Number.isNaN(editId)} - + {/if} -
- {#each adventures as adventure (adventure.id)} - - {/each} +
+ {#each adventures as adventure (adventure.id)} + + {/each}
{#if adventures.length == 0} -
+

Add some adventures!

Logo -
+
{/if} {#if adventures.length != 0} -
+
-

Actions

+

Actions

-
-
-
+
+ -
+
{/if} diff --git a/src/routes/shared/[key]/+page.server.ts b/src/routes/shared/[key]/+page.server.ts index ac4f2f4..ef5dc65 100644 --- a/src/routes/shared/[key]/+page.server.ts +++ b/src/routes/shared/[key]/+page.server.ts @@ -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 - }; -}; \ No newline at end of file + 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, + }; +} diff --git a/src/routes/shared/[key]/+page.svelte b/src/routes/shared/[key]/+page.svelte index 1496ad7..90e6a62 100644 --- a/src/routes/shared/[key]/+page.svelte +++ b/src/routes/shared/[key]/+page.svelte @@ -1,8 +1,7 @@ -

{result}

\ No newline at end of file +

{result}

diff --git a/src/services/adventureService.ts b/src/services/adventureService.ts index 529de88..c994ee9 100644 --- a/src/services/adventureService.ts +++ b/src/services/adventureService.ts @@ -1,80 +1,76 @@ -import type { Adventure } from '$lib/utils/types'; +import type { Adventure } from "$lib/utils/types"; let adventures: Adventure[] = []; -import { visitCount } from '$lib/utils/stores/visitCountStore'; +import { visitCount } from "$lib/utils/stores/visitCountStore"; // Check if localStorage is available (browser environment) -const isBrowser = typeof window !== 'undefined'; - +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); - } + 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; + let nextId = Math.max(0, ...adventures.map((adventure) => adventure.id)) + 1; + return nextId; } export function setAdventures(importArray: Adventure[]) { - adventures = importArray + adventures = importArray; } export function addAdventure(adventure: Adventure) { - adventures = [...adventures, adventure]; - if (isBrowser) { - localStorage.setItem('adventures', JSON.stringify(adventures)); - visitCount.update((n) => n + 1); - } - console.log(adventures); - + adventures = [...adventures, adventure]; + if (isBrowser) { + localStorage.setItem("adventures", JSON.stringify(adventures)); + visitCount.update((n) => n + 1); + } + console.log(adventures); } export function getAdventures(): Adventure[] { - return adventures; + return adventures; } -export function removeAdventure(event: { detail: number; }) { - adventures = adventures.filter(adventure => adventure.id !== event.detail); - if (isBrowser) { - localStorage.setItem('adventures', JSON.stringify(adventures)); - visitCount.update((n) => n - 1); - } - +export function removeAdventure(event: { detail: number }) { + adventures = adventures.filter((adventure) => adventure.id !== event.detail); + if (isBrowser) { + localStorage.setItem("adventures", JSON.stringify(adventures)); + visitCount.update((n) => n - 1); + } } -export function saveEdit(adventure:Adventure) { - let editId = adventure.id; - console.log("saving edit") - let editName = adventure.name; - let editLocation = adventure.location; - let editCreated = adventure.created; - let oldAdventure: Adventure | undefined = adventures.find(adventure => adventure.id === editId); - console.log("old" + oldAdventure) - if (oldAdventure) { - oldAdventure.name = editName; - oldAdventure.location = editLocation; - oldAdventure.created = editCreated; - } - editId = NaN; - console.log("done") - if (isBrowser) { - localStorage.setItem('adventures', JSON.stringify(adventures)); - } +export function saveEdit(adventure: Adventure) { + let editId = adventure.id; + console.log("saving edit"); + let editName = adventure.name; + let editLocation = adventure.location; + let editCreated = adventure.created; + let oldAdventure: Adventure | undefined = adventures.find( + (adventure) => adventure.id === editId + ); + console.log("old" + oldAdventure); + if (oldAdventure) { + oldAdventure.name = editName; + oldAdventure.location = editLocation; + oldAdventure.created = editCreated; + } + editId = NaN; + console.log("done"); + if (isBrowser) { + localStorage.setItem("adventures", JSON.stringify(adventures)); + } } export function clearAdventures() { - adventures = []; - if (isBrowser) { - localStorage.setItem('adventures', JSON.stringify(adventures)); - visitCount.set(0); - } - + adventures = []; + if (isBrowser) { + localStorage.setItem("adventures", JSON.stringify(adventures)); + visitCount.set(0); + } } - - diff --git a/src/services/export.ts b/src/services/export.ts index 028ed73..313a860 100644 --- a/src/services/export.ts +++ b/src/services/export.ts @@ -1,11 +1,11 @@ -import type { Adventure } from '$lib/utils/types'; -import { getAdventures } from './adventureService'; +import type { Adventure } from "$lib/utils/types"; +import { getAdventures } from "./adventureService"; export function exportData() { - let adventures: Adventure[] = getAdventures() - let jsonArray = JSON.stringify(adventures) - console.log(jsonArray) - let blob = new Blob([jsonArray], {type: "application/json"}); - let url = URL.createObjectURL(blob); - return url -} \ No newline at end of file + let adventures: Adventure[] = getAdventures(); + let jsonArray = JSON.stringify(adventures); + console.log(jsonArray); + let blob = new Blob([jsonArray], { type: "application/json" }); + let url = URL.createObjectURL(blob); + return url; +} diff --git a/src/services/import.ts b/src/services/import.ts index cfbc353..4ee2e29 100644 --- a/src/services/import.ts +++ b/src/services/import.ts @@ -1,12 +1,11 @@ -import type { Adventure } from '$lib/utils/types'; -import { setAdventures } from './adventureService'; +import type { Adventure } from "$lib/utils/types"; +import { setAdventures } from "./adventureService"; -export function importData(file:File) { - let reader = new FileReader(); - reader.onload = function() { - let importArray: Adventure[] = JSON.parse(reader.result as string); - setAdventures(importArray); - } - reader.readAsText(file); - -} \ No newline at end of file +export function importData(file: File) { + let reader = new FileReader(); + reader.onload = function () { + let importArray: Adventure[] = JSON.parse(reader.result as string); + setAdventures(importArray); + }; + reader.readAsText(file); +} diff --git a/svelte.config.js b/svelte.config.js index d4dbcda..c2bb7a1 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,20 +1,20 @@ -import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; -import adapterNode from '@sveltejs/adapter-node'; -import adapterVercel from '@sveltejs/adapter-vercel'; +import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"; +import adapterNode from "@sveltejs/adapter-node"; +import adapterVercel from "@sveltejs/adapter-vercel"; let adapter; -if (process.env.USING_VERCEL === 'true') { - adapter = adapterVercel; +if (process.env.USING_VERCEL === "true") { + adapter = adapterVercel; } else { - adapter = adapterNode; + adapter = adapterNode; } /** @type {import('@sveltejs/kit').Config} */ const config = { - preprocess: vitePreprocess(), - kit: { - adapter: adapter() - } + preprocess: vitePreprocess(), + kit: { + adapter: adapter(), + }, }; export default config; diff --git a/tailwind.config.js b/tailwind.config.js index 6ac2cd3..2d48b1b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,11 +1,11 @@ /** @type {import('tailwindcss').Config} */ export default { - content: ['./src/**/*.{html,js,svelte,ts}'], + content: ["./src/**/*.{html,js,svelte,ts}"], theme: { - extend: {} + extend: {}, }, plugins: [require("@tailwindcss/typography"), require("daisyui")], daisyui: { themes: ["night"], }, -}; \ No newline at end of file +}; diff --git a/tsconfig.json b/tsconfig.json index fc93cbd..593dc19 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,19 +1,19 @@ { - "extends": "./.svelte-kit/tsconfig.json", - "compilerOptions": { - "allowJs": true, - "checkJs": true, - "esModuleInterop": true, - "forceConsistentCasingInFileNames": true, - "resolveJsonModule": true, - "skipLibCheck": true, - "sourceMap": true, - "strict": true, - "moduleResolution": "bundler" - } - // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias - // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files - // - // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes - // from the referenced tsconfig.json - TypeScript does not merge them in + "extends": "./.svelte-kit/tsconfig.json", + "compilerOptions": { + "allowJs": true, + "checkJs": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "strict": true, + "moduleResolution": "bundler" + } + // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias + // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files + // + // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes + // from the referenced tsconfig.json - TypeScript does not merge them in } diff --git a/vite.config.ts b/vite.config.ts index bbf8c7d..80864b9 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,6 +1,6 @@ -import { sveltekit } from '@sveltejs/kit/vite'; -import { defineConfig } from 'vite'; +import { sveltekit } from "@sveltejs/kit/vite"; +import { defineConfig } from "vite"; export default defineConfig({ - plugins: [sveltekit()] + plugins: [sveltekit()], });