Consistent code formatting
This commit is contained in:
Sean Morley
@@ -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}
|
||||
|
||||
68
src/lib/components/DeleteConfirmation.svelte
Normal file
68
src/lib/components/DeleteConfirmation.svelte
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user