mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-23 06:49:37 +02:00
new sidebar
This commit is contained in:
Sean Morley
parent
2ca24b9f15
commit
4abaaa5fb3
3 changed files with 102 additions and 130 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,14 +144,14 @@
|
|||
<h2 class="text-2xl font-semibold -mt-2 break-words text-wrap">
|
||||
{adventure.name}
|
||||
</h2>
|
||||
<div>
|
||||
{#if adventure.type == 'visited' && user?.pk == adventure.user_id}
|
||||
<div class="badge badge-primary">Visited</div>
|
||||
{:else if user?.pk == adventure.user_id}
|
||||
<div class="badge badge-secondary">Planned</div>
|
||||
{/if}
|
||||
<div class="badge badge-neutral">{adventure.is_public ? 'Public' : 'Private'}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{#if adventure.type == 'visited' && user?.pk == adventure.user_id}
|
||||
<div class="badge badge-primary">Visited</div>
|
||||
{:else if user?.pk == adventure.user_id}
|
||||
<div class="badge badge-secondary">Planned</div>
|
||||
{/if}
|
||||
<div class="badge badge-neutral">{adventure.is_public ? 'Public' : 'Private'}</div>
|
||||
</div>
|
||||
{#if adventure.location && adventure.location !== ''}
|
||||
<div class="inline-flex items-center">
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -181,57 +181,19 @@
|
|||
>
|
||||
{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
|
||||
user={data.user}
|
||||
type={adventure.type}
|
||||
{adventure}
|
||||
on:delete={deleteAdventure}
|
||||
on:edit={editAdventure}
|
||||
/>
|
||||
{/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="flex flex-wrap gap-4 mr-4 justify-center content-center">
|
||||
{#each adventures as adventure}
|
||||
<AdventureCard
|
||||
user={data.user}
|
||||
type={adventure.type}
|
||||
{adventure}
|
||||
on:delete={deleteAdventure}
|
||||
on:edit={editAdventure}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<input
|
||||
type="radio"
|
||||
name="order_direction"
|
||||
id="asc"
|
||||
class="radio radio-primary"
|
||||
checked
|
||||
value="asc"
|
||||
/>
|
||||
<label for="desc">Descending</label>
|
||||
<input
|
||||
type="radio"
|
||||
name="order_direction"
|
||||
id="desc"
|
||||
value="desc"
|
||||
class="radio radio-primary"
|
||||
/>
|
||||
<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"
|
||||
value="asc"
|
||||
aria-label="Ascending"
|
||||
checked
|
||||
/>
|
||||
<input
|
||||
class="join-item btn btn-neutral"
|
||||
type="radio"
|
||||
name="order_direction"
|
||||
id="desc"
|
||||
value="desc"
|
||||
aria-label="Descending"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<p class="text-md font-semibold mt-2 mb-2">Order By</p>
|
||||
<label for="name">Created At</label>
|
||||
<input
|
||||
type="radio"
|
||||
name="order_by"
|
||||
id="created_at"
|
||||
class="radio radio-primary"
|
||||
checked
|
||||
value="created_at"
|
||||
/>
|
||||
<label for="name">Name</label>
|
||||
<input
|
||||
type="radio"
|
||||
name="order_by"
|
||||
id="name"
|
||||
class="radio radio-primary"
|
||||
checked
|
||||
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
|
||||
type="radio"
|
||||
value="rating"
|
||||
name="order_by"
|
||||
id="rating"
|
||||
class="radio radio-primary"
|
||||
/>
|
||||
<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"
|
||||
value="created_at"
|
||||
aria-label="Created"
|
||||
checked
|
||||
/>
|
||||
<input
|
||||
class="join-item btn btn-neutral"
|
||||
type="radio"
|
||||
name="order_by"
|
||||
id="name"
|
||||
aria-label="Name"
|
||||
value="name"
|
||||
/>
|
||||
<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"
|
||||
name="order_by"
|
||||
id="rating"
|
||||
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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue