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

Added new trip plan creator and removed visit count stores

Browse Source
This commit is contained in:
Sean Morley
2024-05-06 23:13:32 +00:00
parent 75da1f4cc6
commit 01865951ac
19 changed files with 967 additions and 522 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/lib/components/CreateNewTripPlan.svelte Normal file
View File

@@ -0,0 +1,105 @@
<script lang="ts">
let newTrip: Trip;
newTrip = {
id: -1,
name: "",
description: "",
startDate: "",
endDate: "",
adventures: [],
};
import { createEventDispatcher } from "svelte";
import type { Adventure, Trip } from "$lib/utils/types";
const dispatch = createEventDispatcher();
import { onMount } from "svelte";
let modal: HTMLDialogElement;
onMount(() => {
modal = document.getElementById("my_modal_1") as HTMLDialogElement;
if (modal) {
modal.showModal();
}
});
function create() {
if (newTrip.name.trim() === "") {
alert("Name is required");
return;
}
dispatch("create", newTrip);
console.log(newTrip);
}
function close() {
dispatch("close");
}
function handleKeydown(event: KeyboardEvent) {
if (event.key === "Escape") {
close();
}
}
</script>
<dialog id="my_modal_1" class="modal">
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
<h3 class="font-bold text-lg">New Trip Plan</h3>
<p class="py-4">Press ESC key or click the button below to close</p>
<div
class="modal-action items-center"
style="display: flex; flex-direction: column; align-items: center; width: 100%;"
>
<form method="dialog" style="width: 100%;">
<div>
<label for="name">Name</label>
<input
type="text"
id="name"
required
bind:value={newTrip.name}
class="input input-bordered w-full max-w-xs"
/>
</div>
<div>
<label for="location">Description</label>
<input
type="text"
id="description"
bind:value={newTrip.description}
class="input input-bordered w-full max-w-xs"
/>
</div>
<div>
<label for="date">Start Date</label>
<input
type="date"
id="startDate"
bind:value={newTrip.startDate}
class="input input-bordered w-full max-w-xs"
/>
</div>
<div>
<label for="date">End Date</label>
<input
type="text"
id="endDate"
bind:value={newTrip.endDate}
class="input input-bordered w-full max-w-xs"
/>
</div>
<button
type="submit"
class="btn btn-primary mr-4 mt-4"
on:click={create}>Create</button
>
<!-- if there is a button in form, it will close the modal -->
<button class="btn mt-4" on:click={close}>Close</button>
</form>
</div>
</div>
</dialog>

169
src/lib/components/Navbar copy.svelte
View File

@@ -1,169 +0,0 @@
<script lang="ts">
import { enhance } from "$app/forms";
import { visitCount } from "$lib/utils/stores/visitCountStore";
import { goto } from "$app/navigation";
import type { DatabaseUser } from "$lib/server/auth";
export let user: any;
import UserAvatar from "./UserAvatar.svelte";
import { onMount } from "svelte";
import InfoModal from "./InfoModal.svelte";
import infoIcon from "$lib/assets/info.svg";
import type { SubmitFunction } from "@sveltejs/kit";
async function goHome() {
goto("/");
}
async function goToLog() {
goto("/log");
}
async function goToFeatured() {
goto("/featured");
}
async function toToLogin() {
goto("/login");
}
async function goToSignup() {
goto("/signup");
}
async function goToWorldTravel() {
goto("/worldtravel");
}
const submitUpdateTheme: SubmitFunction = ({ action }) => {
const theme = action.searchParams.get("theme");
if (theme) {
document.documentElement.setAttribute("data-theme", theme);
}
};
let count = 0;
let infoModalOpen = false;
function showModal() {
infoModalOpen = true;
}
function closeModal() {
infoModalOpen = false;
}
// get value from fetch /api/visitcount
$: if (user) {
onMount(async () => {
const res = await fetch("/api/visitcount");
const data = await res.json();
visitCount.set(data.visitCount);
});
}
visitCount.subscribe((value) => {
count = value;
});
// Set the visit count to the number of adventures stored in local storage
const isBrowser = typeof window !== "undefined";
if (isBrowser) {
const storedAdventures = localStorage.getItem("adventures");
}
</script>
<div class="navbar bg-base-100 flex flex-col md:flex-row">
<div class="navbar-start flex justify-around md:justify-start">
<button
class="btn btn-primary my-2 md:my-0 md:mr-4 md:ml-2"
on:click={goHome}>Home</button
>
{#if user}
<button class="btn btn-primary my-2 md:my-0 md:mr-4" on:click={goToLog}
>My Log</button
>
<button
class="btn btn-primary my-2 md:my-0 md:mr-4"
on:click={() => goto("/planner")}>Planner</button
>
<!-- <button
class="btn btn-primary my-2 md:my-0 md:mr-4"
on:click={() => goto("/planner")}>Planner</button
> -->
{/if}
<button
class="btn btn-primary my-2 md:my-0 md:mr-4"
on:click={goToWorldTravel}>World Tavel Log</button
>
<button class="btn btn-primary my-2 md:my-0" on:click={goToFeatured}
>Featured</button
>
</div>
<div class="navbar-center flex justify-center md:justify-center">
<a class="btn btn-ghost text-xl" href="/">AdventureLog 🗺️</a>
</div>
{#if infoModalOpen}
<InfoModal on:close={closeModal} />
{/if}
<div class="navbar-end flex justify-around md:justify-end mr-4">
{#if !user}
<button class="btn btn-primary ml-4" on:click={toToLogin}>Login</button>
<button class="btn btn-primary ml-4" on:click={goToSignup}>Signup</button>
{/if}
{#if user}
<p class="font-bold">Adventures: {count}</p>
<UserAvatar {user} />
{/if}
<button class="btn btn-neutral ml-4 btn-circle" on:click={showModal}
><iconify-icon icon="mdi:information" class="text-xl"
></iconify-icon></button
>
<div class="dropdown dropdown-bottom dropdown-end">
<div tabindex="0" role="button" class="btn m-1 ml-4">
<iconify-icon icon="mdi:theme-light-dark" class="text-xl"
></iconify-icon>
</div>
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<ul
tabindex="0"
class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
>
<form method="POST" use:enhance={submitUpdateTheme}>
<li>
<button formaction="/?/setTheme&theme=light"
>Light<iconify-icon icon="mdi:weather-sunny" class="text-xl"
></iconify-icon></button
>
</li>
<li>
<button formaction="/?/setTheme&theme=dark"
>Dark<iconify-icon icon="mdi:weather-night" class="text-xl"
></iconify-icon></button
>
</li>
<li>
<button formaction="/?/setTheme&theme=night"
>Night<iconify-icon icon="mdi:weather-night" class="text-xl"
></iconify-icon></button
>
</li>
<!-- <li><button formaction="/?/setTheme&theme=nord">Nord</button></li> -->
<!-- <li><button formaction="/?/setTheme&theme=retro">Retro</button></li> -->
<li>
<button formaction="/?/setTheme&theme=forest"
>Forest<iconify-icon icon="mdi:forest" class="text-xl"
></iconify-icon></button
>
<button formaction="/?/setTheme&theme=garden"
>Garden<iconify-icon icon="mdi:flower" class="text-xl"
></iconify-icon></button
>
<button formaction="/?/setTheme&theme=aqua"
>Aqua<iconify-icon icon="mdi:water" class="text-xl"
></iconify-icon></button
>
</li>
</form>
</ul>
</div>
</div>
</div>

15
src/lib/components/Navbar.svelte
View File

@@ -1,6 +1,5 @@
<script lang="ts">
import { enhance } from "$app/forms";
import { visitCount } from "$lib/utils/stores/visitCountStore";
import { goto } from "$app/navigation";
import type { DatabaseUser } from "$lib/server/auth";
export let user: any;
@@ -47,20 +46,6 @@
infoModalOpen = false;
}
// get value from fetch /api/visitcount
$: if (user) {
onMount(async () => {
const res = await fetch("/api/visitcount");
const data = await res.json();
visitCount.set(data.visitCount);
});
}
visitCount.subscribe((value) => {
count = value;
});
// Set the visit count to the number of adventures stored in local storage
const isBrowser = typeof window !== "undefined";
if (isBrowser) {

8
src/lib/db/schema.ts
View File

@@ -82,16 +82,16 @@ export const userVisitedWorldTravel = pgTable("userVisitedWorldTravel", {
.references(() => worldTravelCountryRegions.id),
});
export const userPlannedAdventures = pgTable("userPlannedAdventures", {
export const userPlannedTrips = pgTable("userPlannedTrips", {
id: serial("id").primaryKey(),
userId: text("userId")
.notNull()
.references(() => userTable.id),
name: text("adventureName").notNull(),
location: text("location"),
activityTypes: json("activityTypes"),
description: text("description"),
date: text("plannedDate"),
startDate: text("startDate"),
endDate: text("endDate"),
adventures: json("adventures"),
});
export const adventureTable = pgTable("adventures", {

5
src/lib/utils/stores/visitCountStore.ts
View File

@@ -1,5 +0,0 @@
import { writable } from "svelte/store";
let value = 0;
export const visitCount = writable(value);

9
src/lib/utils/types.ts
View File

@@ -10,3 +10,12 @@ export interface Adventure {
imageUrl?: string | undefined;
date?: string | undefined;
}
export interface Trip {
id: number;
name: string;
description: string;
startDate: string;
endDate: string;
adventures?: Adventure[] | [];
}