Consistent code formatting

This commit is contained in:
Sean Morley
2024-04-02 22:02:20 +00:00
parent 302a59c86d
commit 83cca15a8f
35 changed files with 6716 additions and 6511 deletions

View File

@@ -1,59 +1,77 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import locationDot from "$lib/assets/locationDot.svg";
import calendar from "$lib/assets/calendar.svg";
const dispatch = createEventDispatcher();
import { createEventDispatcher } from "svelte";
import locationDot from "$lib/assets/locationDot.svg";
import calendar from "$lib/assets/calendar.svg";
const dispatch = createEventDispatcher();
export let type:String;
export let type: String;
export let name:String;
export let location:String;
export let created:string;
export let id:Number;
export let name: String;
export let location: String;
export let created: string;
export let id: Number;
function remove() {
dispatch('remove', id);
}
function edit() {
dispatch('edit', id)
}
function add() {
dispatch('add', {name, location});
}
function remove() {
dispatch("remove", id);
}
function edit() {
dispatch("edit", id);
}
function add() {
dispatch("add", { name, location });
}
</script>
{#if type === 'mylog'}
<div class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral shadow-xl overflow-hidden">
{#if type === "mylog"}
<div
class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral shadow-xl overflow-hidden"
>
<div class="card-body">
<h2 class="card-title overflow-ellipsis">{name}</h2>
{#if location !== ""}
<p><img src={locationDot} class="inline-block -mt-1 mr-1" alt="Logo" />{location}</p>
<p>
<img
src={locationDot}
class="inline-block -mt-1 mr-1"
alt="Logo"
/>{location}
</p>
{/if}
{#if created !== ""}
<p><img src={calendar} class="inline-block -mt-1 mr-1" alt="Logo" />{created}</p>
<p>
<img
src={calendar}
class="inline-block -mt-1 mr-1"
alt="Logo"
/>{created}
</p>
{/if}
<div class="card-actions justify-end">
<button class="btn btn-primary" on:click={edit}>Edit</button>
<button class="btn btn-secondary" on:click={remove}>Remove</button>
</div>
</div>
</div>
</div>
{/if}
{#if type === 'featured'}
<div class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral shadow-xl overflow-hidden">
<div class="card-body">
<h2 class="card-title overflow-ellipsis">{name}</h2>
{#if location!=""}
<p><img src={locationDot} class="inline-block -mt-1 mr-1" alt="Logo" />{location}</p>
{/if}
<div class="card-actions justify-end">
<button class="btn btn-primary" on:click={add}>Add</button>
{#if type === "featured"}
<div
class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral shadow-xl overflow-hidden"
>
<div class="card-body">
<h2 class="card-title overflow-ellipsis">{name}</h2>
{#if location != ""}
<p>
<img
src={locationDot}
class="inline-block -mt-1 mr-1"
alt="Logo"
/>{location}
</p>
{/if}
<div class="card-actions justify-end">
<button class="btn btn-primary" on:click={add}>Add</button>
</div>
</div>
</div>
</div>
{/if}
{/if}

View File

@@ -0,0 +1,68 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import type { Adventure } 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 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">Edit Adventure</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"
class="input input-bordered w-full max-w-xs"
/>
</div>
<div>
<label for="location">Location</label>
<input
type="text"
id="location"
class="input input-bordered w-full max-w-xs"
/>
</div>
<div>
<label for="created">Created</label>
<input
type="date"
id="created"
class="input input-bordered w-full max-w-xs"
/>
</div>
<!-- <button class="btn btn-primary mr-4 mt-4" on:click={submit}>Save</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>

View File

@@ -1,66 +1,88 @@
<script lang="ts">
export let editId:number = NaN;
export let editName:string = '';
export let editLocation:string = '';
export let editCreated: string = '';
import { createEventDispatcher } from 'svelte';
import type { Adventure } from '$lib/utils/types';
const dispatch = createEventDispatcher();
import { onMount } from 'svelte';
let modal: HTMLDialogElement;
export let editId: number = NaN;
export let editName: string = "";
export let editLocation: string = "";
export let editCreated: string = "";
import { createEventDispatcher } from "svelte";
import type { Adventure } from "$lib/utils/types";
const dispatch = createEventDispatcher();
import { onMount } from "svelte";
let modal: HTMLDialogElement;
let originalName = editName;
let originalName = editName;
onMount(() => {
modal = document.getElementById("my_modal_1") as HTMLDialogElement;
if (modal) {
modal.showModal();
}
});
function submit() {
const adventureEdited: Adventure = { id: editId, name: editName, location: editLocation, created: editCreated };
dispatch('submit', adventureEdited);
console.log(adventureEdited)
onMount(() => {
modal = document.getElementById("my_modal_1") as HTMLDialogElement;
if (modal) {
modal.showModal();
}
});
function close() {
dispatch('close');
}
function submit() {
const adventureEdited: Adventure = {
id: editId,
name: editName,
location: editLocation,
created: editCreated,
};
dispatch("submit", adventureEdited);
console.log(adventureEdited);
}
function handleKeydown(event: KeyboardEvent) {
if (event.key === 'Escape') {
close();
}
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">Edit Adventure {originalName}</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" bind:value={editName} class="input input-bordered w-full max-w-xs" />
</div>
<div>
<label for="location">Location</label>
<input type="text" id="location" bind:value={editLocation} class="input input-bordered w-full max-w-xs" />
</div>
<div>
<label for="created">Created</label>
<input type="date" id="created" bind:value={editCreated} class="input input-bordered w-full max-w-xs" />
</div>
<button class="btn btn-primary mr-4 mt-4" on:click={submit}>Save</button>
<!-- if there is a button in form, it will close the modal -->
<button class="btn mt-4" on:click={close}>Close</button>
</form>
<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">Edit Adventure {originalName}</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"
bind:value={editName}
class="input input-bordered w-full max-w-xs"
/>
</div>
<div>
<label for="location">Location</label>
<input
type="text"
id="location"
bind:value={editLocation}
class="input input-bordered w-full max-w-xs"
/>
</div>
<div>
<label for="created">Created</label>
<input
type="date"
id="created"
bind:value={editCreated}
class="input input-bordered w-full max-w-xs"
/>
</div>
<button class="btn btn-primary mr-4 mt-4" on:click={submit}>Save</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>
</dialog>
</div>
</dialog>

View File

@@ -1,19 +1,53 @@
<script>
import pinLogo from "$lib/assets/pinLogo.svg";
import pinLogo from "$lib/assets/pinLogo.svg";
</script>
<footer class="footer items-center p-4 bg-neutral text-neutral-content fixed bottom-0 left-0 w-full">
<aside class="items-center grid-flow-col">
<img src={pinLogo} class="inline-block -mt-1 mr-1" alt="Logo" />
<p>Copyright © 2024 Sean Morley - All rights reserved</p>
</aside>
<nav class="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
<!-- svelte-ignore a11y-missing-attribute -->
<a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg>
</a>
<!-- svelte-ignore a11y-missing-attribute -->
<a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path></svg></a>
<!-- svelte-ignore a11y-missing-attribute -->
<a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg></a>
</nav>
<footer
class="footer items-center p-4 bg-neutral text-neutral-content fixed bottom-0 left-0 w-full"
>
<aside class="items-center grid-flow-col">
<img src={pinLogo} class="inline-block -mt-1 mr-1" alt="Logo" />
<p>Copyright © 2024 Sean Morley - All rights reserved</p>
</aside>
<nav class="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
<!-- svelte-ignore a11y-missing-attribute -->
<a
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
class="fill-current"
><path
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
></path></svg
>
</a>
<!-- svelte-ignore a11y-missing-attribute -->
<a
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
class="fill-current"
><path
d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"
></path></svg
></a
>
<!-- svelte-ignore a11y-missing-attribute -->
<a
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
class="fill-current"
><path
d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"
></path></svg
></a
>
</nav>
</footer>

View File

@@ -1,44 +1,51 @@
<script lang="ts">
import { visitCount } from '$lib/utils/stores/visitCountStore';
import { goto } from '$app/navigation';
import { visitCount } from "$lib/utils/stores/visitCountStore";
import { goto } from "$app/navigation";
async function goHome() {
goto('/');
async function goHome() {
goto("/");
}
async function goToLog() {
goto("/log");
}
async function goToFeatured() {
goto("/featured");
}
let count = 0;
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");
if (storedAdventures) {
let parsed = JSON.parse(storedAdventures);
visitCount.set(parsed.length);
}
async function goToLog() {
goto('/log');
}
async function goToFeatured() {
goto('/featured');
}
let count = 0;
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');
if (storedAdventures) {
let parsed = JSON.parse(storedAdventures);
visitCount.set (parsed.length);
}
}
}
</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>
<button class="btn btn-primary my-2 md:my-0 md:mr-4 md:ml-2" on:click={goToLog}>My 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>
<div class="navbar-end flex justify-around md:justify-end mr-4">
<p>Adventures: {count} </p>
</div>
<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
>
<button
class="btn btn-primary my-2 md:my-0 md:mr-4 md:ml-2"
on:click={goToLog}>My 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>
<div class="navbar-end flex justify-around md:justify-end mr-4">
<p>Adventures: {count}</p>
</div>
</div>

View File

@@ -1,9 +1,9 @@
<script lang="ts">
export let action:string;
export let action: string;
</script>
<div class="toast toast-top toast-end z-50">
<div class="alert alert-info">
<span>Adventure {action} successfully!</span>
</div>
</div>
<div class="alert alert-info">
<span>Adventure {action} successfully!</span>
</div>
</div>

View File

@@ -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, {});

View File

@@ -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(),
})
export const sharedAdventures = pgTable("sharedAdventures", {
id: text("id").primaryKey(),
data: json("data").notNull(),
});

View File

@@ -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;
}
for (let i = 0; i < 10; i++) {
const randomIndex = Math.floor(Math.random() * digits.length);
randomString += digits[randomIndex];
}
return randomString;
}

View File

@@ -1,4 +1,3 @@
import { onMount } from "svelte";
import { writable } from "svelte/store";
export const visitCount = writable(0);

View File

@@ -1,6 +1,6 @@
export interface Adventure {
id: number
name: string;
location: string;
created:string
}
id: number;
name: string;
location: string;
created: string;
}