Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-22 22:39: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}
<li class="flex items-center justify-between bg-base-200 p-2 rounded">
{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
</button>
</li>

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

@ -26,6 +26,19 @@
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() {
let res = await fetch(`/adventures/${adventure.id}?/delete`, {
method: 'POST',
@ -131,6 +144,7 @@
<h2 class="text-2xl font-semibold -mt-2 break-words text-wrap">
{adventure.name}
</h2>
</div>
<div>
{#if adventure.type == 'visited' && user?.pk == adventure.user_id}
<div class="badge badge-primary">Visited</div>
@ -139,7 +153,6 @@
{/if}
<div class="badge badge-neutral">{adventure.is_public ? 'Public' : 'Private'}</div>
</div>
</div>
{#if adventure.location && adventure.location !== ''}
<div class="inline-flex items-center">
<MapMarker class="w-5 h-5 mr-1" />
@ -154,7 +167,7 @@
{/if}
{#if adventure.activity_types && adventure.activity_types.length > 0}
<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">
{activity}
</div>

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

@ -181,7 +181,7 @@
>
{sidebarOpen ? 'Close Filters' : 'Open Filters'}
</button>
{#if currentView == 'cards'}
<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
{#each adventures as adventure}
<AdventureCard
@ -193,45 +193,7 @@
/>
{/each}
</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">
{#if next || previous}
<div class="join">
@ -254,10 +216,11 @@
</div>
<div class="drawer-side">
<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">
<!-- Sidebar content here -->
<h3 class="text-center font-semibold text-lg mb-4">Adventure Types</h3>
<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}>
<label class="label cursor-pointer">
<span class="label-text">Completed</span>
@ -280,56 +243,67 @@
/>
</label>
<!-- <div class="divider"></div> -->
<h3 class="text-center font-semibold text-lg mb-4">Sort</h3>
<p class="text-md font-semibold mb-2">Order Direction</p>
<label for="asc">Ascending</label>
<h3 class="text-center font-bold text-lg mb-4">Sort</h3>
<p class="text-lg font-semibold mb-2">Order Direction</p>
<div class="join">
<input
class="join-item btn btn-neutral"
type="radio"
name="order_direction"
id="asc"
class="radio radio-primary"
checked
value="asc"
aria-label="Ascending"
checked
/>
<label for="desc">Descending</label>
<input
class="join-item btn btn-neutral"
type="radio"
name="order_direction"
id="desc"
value="desc"
class="radio radio-primary"
aria-label="Descending"
/>
</div>
<br />
<p class="text-md font-semibold mt-2 mb-2">Order By</p>
<label for="name">Created At</label>
<p class="text-lg font-semibold mt-2 mb-2">Order By</p>
<div class="flex join overflow-auto">
<input
class="join-item btn btn-neutral"
type="radio"
name="order_by"
id="created_at"
class="radio radio-primary"
checked
value="created_at"
aria-label="Created"
checked
/>
<label for="name">Name</label>
<input
class="join-item btn btn-neutral"
type="radio"
name="order_by"
id="name"
class="radio radio-primary"
checked
aria-label="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
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"
value="rating"
name="order_by"
id="rating"
class="radio radio-primary"
aria-label="Rating"
value="rating"
/>
</div>
<br />
<p class="text-lg font-semibold mt-2 mb-2">Sources</p>
<label class="label cursor-pointer">
<span class="label-text">Include Collection Adventures</span>
<input
@ -339,27 +313,8 @@
class="checkbox checkbox-primary"
/>
</label>
<button type="submit" class="btn btn-primary mt-4">Filter</button>
<button type="submit" class="btn btn-success mt-4">Filter</button>
</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>
</ul>
</div>