From 4abaaa5fb375a429c95469b726abb0655c7aad63 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Thu, 18 Jul 2024 22:12:47 -0400
Subject: [PATCH] new sidebar

---
 .../lib/components/ActivityComplete.svelte    |   6 +-
 .../src/lib/components/AdventureCard.svelte   |  31 ++-
 frontend/src/routes/adventures/+page.svelte   | 195 +++++++-----------
 3 files changed, 102 insertions(+), 130 deletions(-)

diff --git a/frontend/src/lib/components/ActivityComplete.svelte b/frontend/src/lib/components/ActivityComplete.svelte
index 6d76abf..773f771 100644
--- a/frontend/src/lib/components/ActivityComplete.svelte
+++ b/frontend/src/lib/components/ActivityComplete.svelte
@@ -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>
diff --git a/frontend/src/lib/components/AdventureCard.svelte b/frontend/src/lib/components/AdventureCard.svelte
index d8c1649..4afacb7 100644
--- a/frontend/src/lib/components/AdventureCard.svelte
+++ b/frontend/src/lib/components/AdventureCard.svelte
@@ -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>
diff --git a/frontend/src/routes/adventures/+page.svelte b/frontend/src/routes/adventures/+page.svelte
index 1221802..353b4a7 100644
--- a/frontend/src/routes/adventures/+page.svelte
+++ b/frontend/src/routes/adventures/+page.svelte
@@ -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>