Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-23 14:59:36 +02:00
Code Issues Releases Activity

new sidebar

Browse source
This commit is contained in:
Sean Morley 2024-07-18 22:12:47 -04:00
parent 2ca24b9f15
commit 4abaaa5fb3
3 changed files with 102 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/lib/components/ActivityComplete.svelte
View file

@ -81,7 +81,11 @@
{#each activities as activity} {#each activities as activity}
<li class="flex items-center justify-between bg-base-200 p-2 rounded"> <li class="flex items-center justify-between bg-base-200 p-2 rounded">
{activity} {activity}
<button class="btn btn-sm btn-error" on:click={() => removeActivity(activity)}> <button
type="button"
class="btn btn-sm btn-error"
on:click={() => removeActivity(activity)}
>
Remove Remove
</button> </button>
</li> </li>

17
frontend/src/lib/components/AdventureCard.svelte
View file

@ -26,6 +26,19 @@
export let adventure: Adventure; export let adventure: Adventure;
let activityTypes: string[] = [];
// makes it reactivty to changes so it updates automatically
$: {
if (adventure.activity_types) {
activityTypes = adventure.activity_types;
if (activityTypes.length > 3) {
activityTypes = activityTypes.slice(0, 3);
let remaining = adventure.activity_types.length - 3;
activityTypes.push('+' + remaining);
}
}
}
async function deleteAdventure() { async function deleteAdventure() {
let res = await fetch(`/adventures/${adventure.id}?/delete`, { let res = await fetch(`/adventures/${adventure.id}?/delete`, {
method: 'POST', method: 'POST',
@ -131,6 +144,7 @@
<h2 class="text-2xl font-semibold -mt-2 break-words text-wrap"> <h2 class="text-2xl font-semibold -mt-2 break-words text-wrap">
{adventure.name} {adventure.name}
</h2> </h2>
</div>
<div> <div>
{#if adventure.type == 'visited' && user?.pk == adventure.user_id} {#if adventure.type == 'visited' && user?.pk == adventure.user_id}
<div class="badge badge-primary">Visited</div> <div class="badge badge-primary">Visited</div>
@ -139,7 +153,6 @@
{/if} {/if}
<div class="badge badge-neutral">{adventure.is_public ? 'Public' : 'Private'}</div> <div class="badge badge-neutral">{adventure.is_public ? 'Public' : 'Private'}</div>
</div> </div>
</div>
{#if adventure.location && adventure.location !== ''} {#if adventure.location && adventure.location !== ''}
<div class="inline-flex items-center"> <div class="inline-flex items-center">
<MapMarker class="w-5 h-5 mr-1" /> <MapMarker class="w-5 h-5 mr-1" />
@ -154,7 +167,7 @@
{/if} {/if}
{#if adventure.activity_types && adventure.activity_types.length > 0} {#if adventure.activity_types && adventure.activity_types.length > 0}
<ul class="flex flex-wrap"> <ul class="flex flex-wrap">
{#each adventure.activity_types as activity} {#each activityTypes as activity}
<div class="badge badge-primary mr-1 text-md font-semibold pb-2 pt-1 mb-1"> <div class="badge badge-primary mr-1 text-md font-semibold pb-2 pt-1 mb-1">
{activity} {activity}
</div> </div>

115
frontend/src/routes/adventures/+page.svelte
View file

@ -181,7 +181,7 @@
> >
{sidebarOpen ? 'Close Filters' : 'Open Filters'} {sidebarOpen ? 'Close Filters' : 'Open Filters'}
</button> </button>
{#if currentView == 'cards'}
<div class="flex flex-wrap gap-4 mr-4 justify-center content-center"> <div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
{#each adventures as adventure} {#each adventures as adventure}
<AdventureCard <AdventureCard
@ -193,45 +193,7 @@
/> />
{/each} {/each}
</div> </div>
{/if}
{#if currentView == 'table'}
<table class="table table-compact w-full">
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Rating</th>
<th>Type</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{#each adventures as adventure}
<tr>
<td>{adventure.name}</td>
<td>{adventure.date}</td>
<td>{adventure.rating}</td>
<td>{adventure.type}</td>
<td>
<button
class="btn btn-sm btn-primary"
on:click={() => editAdventure(new CustomEvent('edit', { detail: adventure }))}
>
Edit
</button>
<button
class="btn btn-sm btn-error"
on:click={() =>
deleteAdventure(new CustomEvent('delete', { detail: adventure.id }))}
>
Delete
</button>
</td>
</tr>
{/each}
</tbody>
</table>
{/if}
<div class="join flex items-center justify-center mt-4"> <div class="join flex items-center justify-center mt-4">
{#if next || previous} {#if next || previous}
<div class="join"> <div class="join">
@ -254,10 +216,11 @@
</div> </div>
<div class="drawer-side"> <div class="drawer-side">
<label for="my-drawer" class="drawer-overlay"></label> <label for="my-drawer" class="drawer-overlay"></label>
<ul class="menu p-4 w-80 h-full bg-base-200 text-base-content rounded-lg"> <ul class="menu p-4 w-80 h-full bg-base-200 text-base-content rounded-lg">
<!-- Sidebar content here --> <!-- Sidebar content here -->
<h3 class="text-center font-semibold text-lg mb-4">Adventure Types</h3>
<div class="form-control"> <div class="form-control">
<h3 class="text-center font-bold text-lg mb-4">Adventure Types</h3>
<form action="?/get" method="post" use:enhance={handleSubmit}> <form action="?/get" method="post" use:enhance={handleSubmit}>
<label class="label cursor-pointer"> <label class="label cursor-pointer">
<span class="label-text">Completed</span> <span class="label-text">Completed</span>
@ -280,56 +243,67 @@
/> />
</label> </label>
<!-- <div class="divider"></div> --> <!-- <div class="divider"></div> -->
<h3 class="text-center font-semibold text-lg mb-4">Sort</h3> <h3 class="text-center font-bold text-lg mb-4">Sort</h3>
<p class="text-md font-semibold mb-2">Order Direction</p> <p class="text-lg font-semibold mb-2">Order Direction</p>
<label for="asc">Ascending</label> <div class="join">
<input <input
class="join-item btn btn-neutral"
type="radio" type="radio"
name="order_direction" name="order_direction"
id="asc" id="asc"
class="radio radio-primary"
checked
value="asc" value="asc"
aria-label="Ascending"
checked
/> />
<label for="desc">Descending</label>
<input <input
class="join-item btn btn-neutral"
type="radio" type="radio"
name="order_direction" name="order_direction"
id="desc" id="desc"
value="desc" value="desc"
class="radio radio-primary" aria-label="Descending"
/> />
</div>
<br /> <br />
<p class="text-md font-semibold mt-2 mb-2">Order By</p> <p class="text-lg font-semibold mt-2 mb-2">Order By</p>
<label for="name">Created At</label> <div class="flex join overflow-auto">
<input <input
class="join-item btn btn-neutral"
type="radio" type="radio"
name="order_by" name="order_by"
id="created_at" id="created_at"
class="radio radio-primary"
checked
value="created_at" value="created_at"
aria-label="Created"
checked
/> />
<label for="name">Name</label>
<input <input
class="join-item btn btn-neutral"
type="radio" type="radio"
name="order_by" name="order_by"
id="name" id="name"
class="radio radio-primary" aria-label="Name"
checked
value="name" value="name"
/> />
<label for="date">Date</label>
<input type="radio" value="date" name="order_by" id="date" class="radio radio-primary" />
<label for="rating">Rating</label>
<input <input
class="join-item btn btn-neutral"
type="radio"
value="date"
name="order_by"
id="date"
aria-label="Date"
/>
<input
class="join-item btn btn-neutral"
type="radio" type="radio"
value="rating"
name="order_by" name="order_by"
id="rating" id="rating"
class="radio radio-primary" aria-label="Rating"
value="rating"
/> />
</div>
<br /> <br />
<p class="text-lg font-semibold mt-2 mb-2">Sources</p>
<label class="label cursor-pointer"> <label class="label cursor-pointer">
<span class="label-text">Include Collection Adventures</span> <span class="label-text">Include Collection Adventures</span>
<input <input
@ -339,27 +313,8 @@
class="checkbox checkbox-primary" class="checkbox checkbox-primary"
/> />
</label> </label>
<button type="submit" class="btn btn-primary mt-4">Filter</button> <button type="submit" class="btn btn-success mt-4">Filter</button>
</form> </form>
<div class="divider"></div>
<h3 class="text-center font-semibold text-lg mb-4">View</h3>
<div class="join">
<input
class="join-item btn-neutral btn"
type="radio"
name="options"
aria-label="Cards"
on:click={() => (currentView = 'cards')}
checked
/>
<input
class="join-item btn btn-neutral"
type="radio"
name="options"
aria-label="Table"
on:click={() => (currentView = 'table')}
/>
</div>
</div> </div>
</ul> </ul>
</div> </div>