Added new trip plan creator and removed visit count stores
This commit is contained in:
Sean Morley
@@ -5,7 +5,6 @@
|
||||
export let data: PageData;
|
||||
import { goto } from "$app/navigation";
|
||||
import campingDrawing from "$lib/assets/camping.svg";
|
||||
import { visitCount } from "$lib/utils/stores/visitCountStore";
|
||||
import AdventureOverlook from "$lib/assets/AdventureOverlook.webp";
|
||||
import MapWithPins from "$lib/assets/MapWithPins.webp";
|
||||
|
||||
@@ -19,7 +18,9 @@
|
||||
// https://v0.dev/t/PyTNahbwxVP
|
||||
-->
|
||||
|
||||
<section class="w-full py-12 md:py-24 lg:py-32">
|
||||
<section
|
||||
class="flex items-center justify-center w-full py-12 md:py-24 lg:py-32"
|
||||
>
|
||||
<div class="container px-4 md:px-6">
|
||||
<div
|
||||
class="grid gap-6 lg:grid-cols-[1fr_550px] lg:gap-12 xl:grid-cols-[1fr_650px]"
|
||||
@@ -27,7 +28,7 @@
|
||||
<div class="flex flex-col justify-center space-y-4">
|
||||
<div class="space-y-2">
|
||||
<h1
|
||||
class="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"
|
||||
class="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent pb-4"
|
||||
>
|
||||
Discover the World's Most Thrilling Adventures
|
||||
</h1>
|
||||
@@ -56,7 +57,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-gray-800">
|
||||
<section
|
||||
class="flex items-center justify-center w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-gray-800"
|
||||
>
|
||||
<div class="container px-4 md:px-6">
|
||||
<div
|
||||
class="flex flex-col items-center justify-center space-y-4 text-center"
|
||||
@@ -132,172 +135,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- <section class="w-full py-12 md:py-24 lg:py-32 border-t">
|
||||
<div
|
||||
class="container grid items-center justify-center gap-4 px-4 text-center md:px-6"
|
||||
>
|
||||
<div class="space-y-3">
|
||||
<h2 class="text-3xl font-bold tracking-tighter md:text-4xl/tight">
|
||||
Explore the World's Most Breathtaking Destinations
|
||||
</h2>
|
||||
<p
|
||||
class="mx-auto max-w-[600px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400"
|
||||
>
|
||||
F
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
aria-roledescription="carousel"
|
||||
class="relative w-full max-w-5xl"
|
||||
role="region"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex -ml-4" style="transform: translate3d(0px, 0px, 0px);">
|
||||
<div
|
||||
aria-roledescription="slide"
|
||||
class="min-w-0 shrink-0 grow-0 basis-full pl-4 md:basis-1/2 lg:basis-1/3"
|
||||
role="group"
|
||||
>
|
||||
<div class="p-1">
|
||||
<div
|
||||
class="rounded-lg border bg-card text-card-foreground shadow-sm"
|
||||
data-v0-t="card"
|
||||
>
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
width="400"
|
||||
height="300"
|
||||
alt="Destination"
|
||||
class="aspect-[4/3] overflow-hidden rounded-t-xl object-cover"
|
||||
/>
|
||||
<div class="space-y-2 p-4">
|
||||
<h3 class="text-xl font-bold">Machu Pic</h3>
|
||||
<p class="text-gray-500 dark:text-gray-400"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-roledescription="slide"
|
||||
class="min-w-0 shrink-0 grow-0 basis-full pl-4 md:basis-1/2 lg:basis-1/3"
|
||||
role="group"
|
||||
>
|
||||
<div class="p-1">
|
||||
<div
|
||||
class="rounded-lg border bg-card text-card-foreground shadow-sm"
|
||||
data-v0-t="card"
|
||||
>
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
width="400"
|
||||
height="300"
|
||||
alt="Destination"
|
||||
class="aspect-[4/3] overflow-hidden rounded-t-xl object-cover"
|
||||
/>
|
||||
<div class="space-y-2 p-4">
|
||||
<h3 class="text-xl font-bold">Patagonia, Argentina</h3>
|
||||
<p class="text-gray-500 dark:text-gray-400"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-roledescription="slide"
|
||||
class="min-w-0 shrink-0 grow-0 basis-full pl-4 md:basis-1/2 lg:basis-1/3"
|
||||
role="group"
|
||||
>
|
||||
<div class="p-1">
|
||||
<div
|
||||
class="rounded-lg border bg-card text-card-foreground shadow-sm"
|
||||
data-v0-t="card"
|
||||
>
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
width="400"
|
||||
height="300"
|
||||
alt="Destination"
|
||||
class="aspect-[4/3] overflow-hidden rounded-t-xl object-cover"
|
||||
/>
|
||||
<div class="space-y-2 p-4">
|
||||
<h3 class="text-xl font-bold">Bali, Indonesia</h3>
|
||||
<p class="text-gray-500 dark:text-gray-400">
|
||||
Discover lush jungles, stunning beaches, and ancient
|
||||
temples.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-roledescription="slide"
|
||||
class="min-w-0 shrink-0 grow-0 basis-full pl-4 md:basis-1/2 lg:basis-1/3"
|
||||
role="group"
|
||||
>
|
||||
<div class="p-1">
|
||||
<div
|
||||
class="rounded-lg border bg-card text-card-foreground shadow-sm"
|
||||
data-v0-t="card"
|
||||
>
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
width="400"
|
||||
height="300"
|
||||
alt="Destination"
|
||||
class="aspect-[4/3] overflow-hidden rounded-t-xl object-cover"
|
||||
/>
|
||||
<div class="space-y-2 p-4">
|
||||
<h3 class="text-xl font-bold">Banff, Canada</h3>
|
||||
<p class="text-gray-500 dark:text-gray-400"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground absolute h-8 w-8 rounded-full -left-12 top-1/2 -translate-y-1/2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="h-4 w-4"
|
||||
>
|
||||
<path d="m12 19-7-7 7-7"></path>
|
||||
<path d="M19 12H5"></path>
|
||||
</svg>
|
||||
<span class="sr-only">Previous slide</span>
|
||||
</button>
|
||||
<button
|
||||
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground absolute h-8 w-8 rounded-full -right-12 top-1/2 -translate-y-1/2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="h-4 w-4"
|
||||
>
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="m12 5 7 7-7 7"></path>
|
||||
</svg>
|
||||
<span class="sr-only">Next slide</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
|
||||
<svelte:head>
|
||||
<title>Home | AdventureLog</title>
|
||||
<meta
|
||||
|
||||
94
src/routes/api/trips/+server.ts
Normal file
94
src/routes/api/trips/+server.ts
Normal file
@@ -0,0 +1,94 @@
|
||||
import { db } from "$lib/db/db.server";
|
||||
import { userPlannedTrips } from "$lib/db/schema";
|
||||
import { error, type RequestEvent } from "@sveltejs/kit";
|
||||
import { eq } from "drizzle-orm";
|
||||
|
||||
export async function POST(event: RequestEvent): Promise<Response> {
|
||||
if (!event.locals.user) {
|
||||
return new Response(JSON.stringify({ error: "No user found" }), {
|
||||
status: 401,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const body = await event.request.json();
|
||||
if (!body.newTrip) {
|
||||
return error(400, {
|
||||
message: "No adventure data provided",
|
||||
});
|
||||
}
|
||||
|
||||
const { name, description, startDate, endDate } = body.newTrip;
|
||||
|
||||
if (!name) {
|
||||
return error(400, {
|
||||
message: "Name field is required!",
|
||||
});
|
||||
}
|
||||
|
||||
// insert the adventure to the user's visited list
|
||||
let res = await db
|
||||
.insert(userPlannedTrips)
|
||||
.values({
|
||||
userId: event.locals.user.id,
|
||||
name: name,
|
||||
description: description || null,
|
||||
startDate: startDate || null,
|
||||
endDate: endDate || null,
|
||||
adventures: JSON.stringify([]),
|
||||
})
|
||||
.returning({ insertedId: userPlannedTrips.id })
|
||||
.execute();
|
||||
|
||||
let insertedId = res[0].insertedId;
|
||||
console.log(insertedId);
|
||||
|
||||
body.newTrip.id = insertedId;
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
tirp: body.newTrip,
|
||||
message: { message: "Trip added" },
|
||||
id: insertedId,
|
||||
}),
|
||||
{
|
||||
status: 200,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export async function GET(event: RequestEvent): Promise<Response> {
|
||||
if (!event.locals.user) {
|
||||
return new Response(JSON.stringify({ error: "No user found" }), {
|
||||
status: 401,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
let trips = await db
|
||||
.select()
|
||||
.from(userPlannedTrips)
|
||||
.where(eq(userPlannedTrips.userId, event.locals.user.id))
|
||||
.execute();
|
||||
|
||||
// json parse the adventures into an Adventure array
|
||||
for (let trip of trips) {
|
||||
if (trip.adventures) {
|
||||
trip.adventures = JSON.parse(trip.adventures as unknown as string);
|
||||
}
|
||||
}
|
||||
|
||||
return new Response(JSON.stringify(trips), {
|
||||
status: 200,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
import { lucia } from "$lib/server/auth";
|
||||
import type { RequestEvent } from "@sveltejs/kit";
|
||||
|
||||
export async function GET(event: RequestEvent): Promise<Response> {
|
||||
if (!event.locals.user) {
|
||||
return new Response(JSON.stringify({ error: "No user found" }), {
|
||||
status: 401,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
message: "Welcome user info page!",
|
||||
userId: event.locals.user.id,
|
||||
username: event.locals.user.username,
|
||||
firstName: event.locals.user.first_name,
|
||||
lastName: event.locals.user.last_name,
|
||||
}),
|
||||
{
|
||||
status: 200,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
return new Response(JSON.stringify({ error: "Internal server error" }), {
|
||||
status: 500,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import type { RequestEvent } from "@sveltejs/kit";
|
||||
import { count } from "drizzle-orm";
|
||||
import { eq } from "drizzle-orm";
|
||||
import { adventureTable } from "$lib/db/schema";
|
||||
import { db } from "$lib/db/db.server";
|
||||
|
||||
export async function GET(event: RequestEvent): Promise<Response> {
|
||||
if (!event.locals.user) {
|
||||
return new Response(JSON.stringify({ error: "No user found" }), {
|
||||
status: 401,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
}
|
||||
// get the count of the number of adventures the user has visited
|
||||
let result = await db
|
||||
.select({ count: count() })
|
||||
.from(adventureTable)
|
||||
.where(eq(adventureTable.userId, event.locals.user.id))
|
||||
.execute();
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
visitCount: result[0].count,
|
||||
}),
|
||||
{
|
||||
status: 200,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
@@ -2,14 +2,8 @@
|
||||
export let data;
|
||||
import { goto } from "$app/navigation";
|
||||
import AdventureCard from "$lib/components/AdventureCard.svelte";
|
||||
import { visitCount } from "$lib/utils/stores/visitCountStore.js";
|
||||
import type { Adventure } from "$lib/utils/types.js";
|
||||
|
||||
let count = 0;
|
||||
visitCount.subscribe((value) => {
|
||||
count = value;
|
||||
});
|
||||
|
||||
async function add(event: CustomEvent<Adventure>) {
|
||||
let detailAdventure = event.detail;
|
||||
|
||||
@@ -25,8 +19,6 @@
|
||||
|
||||
if (response.status === 401) {
|
||||
goto("/login");
|
||||
} else {
|
||||
visitCount.update((n) => n + 1);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
import mapDrawing from "$lib/assets/adventure_map.svg";
|
||||
import EditModal from "$lib/components/EditModal.svelte";
|
||||
import { generateRandomString } from "$lib";
|
||||
import { visitCount } from "$lib/utils/stores/visitCountStore";
|
||||
import MoreFieldsInput from "$lib/components/CreateNewAdventure.svelte";
|
||||
import {
|
||||
addAdventure,
|
||||
@@ -36,11 +35,6 @@
|
||||
isLoading = false;
|
||||
});
|
||||
|
||||
let count = 0;
|
||||
visitCount.subscribe((value) => {
|
||||
count = value;
|
||||
});
|
||||
|
||||
function showToast(action: string) {
|
||||
toastAction = action;
|
||||
isShowingToast = true;
|
||||
@@ -141,7 +135,6 @@
|
||||
// remove adventure from array where id matches
|
||||
adventures = [];
|
||||
showToast("Adventure removed successfully!");
|
||||
visitCount.set(0);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error:", error);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import type { Adventure } from "$lib/utils/types.js";
|
||||
import type { Adventure, Trip } from "$lib/utils/types";
|
||||
import { onMount } from "svelte";
|
||||
import AdventureCard from "$lib/components/AdventureCard.svelte";
|
||||
import EditModal from "$lib/components/EditModal.svelte";
|
||||
@@ -9,20 +9,27 @@
|
||||
removeAdventure,
|
||||
addAdventure,
|
||||
changeType,
|
||||
} from "../../services/adventureService.js";
|
||||
} from "../../services/adventureService";
|
||||
import SucessToast from "$lib/components/SucessToast.svelte";
|
||||
import mapDrawing from "$lib/assets/adventure_map.svg";
|
||||
import CreateNewTripPlan from "$lib/components/CreateNewTripPlan.svelte";
|
||||
export let data;
|
||||
let plans: Adventure[] = [];
|
||||
|
||||
let adventuresPlans: Adventure[] = [];
|
||||
let tripPlans: Trip[] = [];
|
||||
|
||||
let isLoading = true;
|
||||
|
||||
onMount(async () => {
|
||||
console.log(data);
|
||||
plans = data.result;
|
||||
|
||||
console.log(tripPlans);
|
||||
adventuresPlans = data.result;
|
||||
isLoading = false;
|
||||
});
|
||||
|
||||
let isShowingMoreFields: boolean = false;
|
||||
let isShowingNewTrip: boolean = false;
|
||||
|
||||
let isShowingToast: boolean = false;
|
||||
let toastAction: string = "";
|
||||
@@ -42,7 +49,9 @@
|
||||
}
|
||||
|
||||
function editPlan(event: { detail: number }) {
|
||||
const adventure = plans.find((adventure) => adventure.id === event.detail);
|
||||
const adventure = adventuresPlans.find(
|
||||
(adventure) => adventure.id === event.detail
|
||||
);
|
||||
if (adventure) {
|
||||
adventureToEdit = adventure;
|
||||
}
|
||||
@@ -54,9 +63,9 @@
|
||||
}
|
||||
|
||||
async function savePlan(event: { detail: Adventure }) {
|
||||
let newArray = await saveAdventure(event.detail, plans);
|
||||
let newArray = await saveAdventure(event.detail, adventuresPlans);
|
||||
if (newArray.length > 0) {
|
||||
plans = newArray;
|
||||
adventuresPlans = newArray;
|
||||
showToast("Adventure updated successfully!");
|
||||
} else {
|
||||
showToast("Failed to update adventure");
|
||||
@@ -65,12 +74,14 @@
|
||||
}
|
||||
|
||||
async function remove(event: { detail: number }) {
|
||||
let initialLength: number = plans.length;
|
||||
let theAdventure = plans.find((adventure) => adventure.id === event.detail);
|
||||
let initialLength: number = adventuresPlans.length;
|
||||
let theAdventure = adventuresPlans.find(
|
||||
(adventure) => adventure.id === event.detail
|
||||
);
|
||||
if (theAdventure) {
|
||||
let newArray = await removeAdventure(theAdventure, plans);
|
||||
let newArray = await removeAdventure(theAdventure, adventuresPlans);
|
||||
if (newArray.length === initialLength - 1) {
|
||||
plans = newArray;
|
||||
adventuresPlans = newArray;
|
||||
showToast("Adventure removed successfully!");
|
||||
} else {
|
||||
showToast("Failed to remove adventure");
|
||||
@@ -80,9 +91,9 @@
|
||||
|
||||
const createNewAdventure = async (event: { detail: Adventure }) => {
|
||||
isShowingMoreFields = false;
|
||||
let newArray = await addAdventure(event.detail, plans);
|
||||
let newArray = await addAdventure(event.detail, adventuresPlans);
|
||||
if (newArray.length > 0) {
|
||||
plans = newArray;
|
||||
adventuresPlans = newArray;
|
||||
showToast("Adventure added successfully!");
|
||||
} else {
|
||||
showToast("Failed to add adventure");
|
||||
@@ -90,41 +101,73 @@
|
||||
};
|
||||
|
||||
async function markVisited(event: { detail: Adventure }) {
|
||||
let initialLength: number = plans.length;
|
||||
let newArray = await changeType(event.detail, "mylog", plans);
|
||||
let initialLength: number = adventuresPlans.length;
|
||||
let newArray = await changeType(event.detail, "mylog", adventuresPlans);
|
||||
if (newArray.length + 1 == initialLength) {
|
||||
plans = newArray;
|
||||
adventuresPlans = newArray;
|
||||
showToast("Adventure moved to visit log!");
|
||||
} else {
|
||||
showToast("Failed to moves adventure");
|
||||
}
|
||||
adventureToEdit = undefined;
|
||||
}
|
||||
|
||||
async function createNewTrip(event: { detail: Trip }) {
|
||||
isShowingNewTrip = false;
|
||||
let newTrip: Trip = event.detail;
|
||||
// post the trip object to /api/trips
|
||||
// if successful, add the trip to the tripPlans array
|
||||
const response = await fetch("/api/trips", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ newTrip }),
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log("Success:", data);
|
||||
tripPlans = [...tripPlans, newTrip];
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error:", error);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if isShowingToast}
|
||||
<SucessToast action={toastAction} />
|
||||
{/if}
|
||||
|
||||
<div class="flex justify-center items-center w-full mt-4 mb-4">
|
||||
<article class="prose">
|
||||
<h2 class="text-center">Add new Plan</h2>
|
||||
</article>
|
||||
<div class="fixed bottom-4 right-4">
|
||||
<div class="flex flex-row items-center justify-center gap-4">
|
||||
<div class="dropdown dropdown-top dropdown-end">
|
||||
<div tabindex="0" role="button" class="btn m-1 size-16 btn-primary">
|
||||
<iconify-icon icon="mdi:plus" class="text-2xl"></iconify-icon>
|
||||
</div>
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content z-[1] menu p-4 shadow bg-base-300 text-base-content rounded-box w-52 gap-4"
|
||||
>
|
||||
<p class="text-center font-bold text-lg">Create new...</p>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
on:click={() => (isShowingMoreFields = true)}>Adventure Idea</button
|
||||
>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
on:click={() => (isShowingNewTrip = true)}>Trip Planner</button
|
||||
>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
on:click={() => (isShowingMoreFields = !isShowingMoreFields)}
|
||||
>
|
||||
<iconify-icon icon="mdi:plus" class="text-2xl"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
{#if plans.length != 0}
|
||||
{#if adventuresPlans.length != 0}
|
||||
<div class="flex justify-center items-center w-full mt-4 mb-4">
|
||||
<article class="prose">
|
||||
<h1 class="text-center">My Adventure Plans</h1>
|
||||
<h1 class="text-center">My Adventure Ideas</h1>
|
||||
</article>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -138,7 +181,7 @@
|
||||
<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 plans as adventure (adventure.id)}
|
||||
{#each adventuresPlans as adventure (adventure.id)}
|
||||
<AdventureCard
|
||||
{adventure}
|
||||
type="planner"
|
||||
@@ -149,7 +192,7 @@
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if plans.length == 0 && !isLoading}
|
||||
{#if adventuresPlans.length == 0 && !isLoading}
|
||||
<div class="flex flex-col items-center justify-center mt-16">
|
||||
<article class="prose mb-4"><h2>Add some plans!</h2></article>
|
||||
<img src={mapDrawing} width="25%" alt="Logo" />
|
||||
@@ -168,6 +211,35 @@
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if isShowingNewTrip}
|
||||
<CreateNewTripPlan
|
||||
on:close={() => (isShowingNewTrip = false)}
|
||||
on:create={createNewTrip}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if tripPlans.length !== 0}
|
||||
<div class="flex justify-center items-center w-full mt-4 mb-4">
|
||||
<article class="prose">
|
||||
<h1 class="text-center">My Trip Plans</h1>
|
||||
</article>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#each tripPlans as trip (trip.id)}
|
||||
<div class="flex justify-center items-center w-full mt-4 mb-4">
|
||||
<article class="prose">
|
||||
<h2>{trip.name}</h2>
|
||||
<p>{trip.description}</p>
|
||||
<p>
|
||||
<strong>Start Date:</strong>
|
||||
{trip.startDate} <strong>End Date:</strong>
|
||||
{trip.endDate}
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<!-- ----------------------- -->
|
||||
|
||||
<!-- {#if plans.length == 0 && !isLoading}
|
||||
|
||||
Reference in New Issue
Block a user