Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-08-05 21:25:19 +02:00
Code Issues Releases Activity

Fix search filter UI

Browse source
This commit is contained in:
Sean Morley 2024-06-07 20:40:05 +00:00
parent 82eb6c2f97
commit 25337776a1
1 changed files with 89 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

135
src/routes/search/+page.svelte
View file

@ -5,8 +5,29 @@
import type { SubmitFunction } from "@sveltejs/kit"; import type { SubmitFunction } from "@sveltejs/kit";
import type { PageData } from "./$types"; import type { PageData } from "./$types";
// let visitedValue = "all"; let typeValue: string = "";
// let typeValue = ""; let visitedValue: string = "all";
async function filterResults() {
console.log(typeValue);
console.log(visitedValue);
if (!typeValue) {
typeValue = "";
}
const value = new URLSearchParams(location.search).get("value");
console.log(value);
console.log(
`/api/search?value=${value}&type=${typeValue}&visited=${visitedValue}`
);
let data = await fetch(
`/api/search?value=${value}&type=${typeValue}&visited=${visitedValue}`
);
console.log(data);
adventureArray = [];
let res = await data.json();
adventureArray = res.adventures as Adventure[];
}
export let data: PageData; export let data: PageData;
let adventureArray: Adventure[] = data.props?.adventures as Adventure[]; let adventureArray: Adventure[] = data.props?.adventures as Adventure[];
@ -34,51 +55,73 @@
</script> </script>
<main> <main>
<form method="post" use:enhance={filter}> <h1 class="text-center font-semibold text-2xl mb-2">Filtering Options</h1>
<input <div class="flex items-center justify-center gap-6 mb-4">
type="radio" <div class="join">
name="visited" <input
value="all" type="radio"
checked name="visited"
class="radio radio-primary" value="all"
/> checked
All class="join-item btn"
<input aria-label="All"
type="radio" bind:group={visitedValue}
name="visited" />
value="false" <input
class="radio radio-primary" type="radio"
/> name="visited"
Not Visited value="false"
<input class="join-item btn"
type="radio" bind:group={visitedValue}
name="visited" aria-label="Not Visited"
value="true" />
class="radio radio-primary" <input
/> type="radio"
Visited name="visited"
value="true"
class="join-item btn"
bind:group={visitedValue}
aria-label="Visited"
/>
</div>
<br /> <br />
<input type="radio" name="type" value="" class="radio radio-primary" /> <div class="join">
All <input
<input type="radio"
type="radio" name="type"
name="type" value=""
value="activity" class="join-item btn"
class="radio radio-primary" bind:group={typeValue}
/> aria-label="All"
Activity />
<input <input
type="radio" type="radio"
name="type" name="type"
value="location" value="activity"
class="radio radio-primary" class="join-item btn"
/> bind:group={typeValue}
Location aria-label="Activity"
<input type="radio" name="type" value="name" class="radio radio-primary" /> />
Name <input
<!-- submit button --> type="radio"
<button type="submit" class="btn btn-primary">Search</button> name="type"
</form> value="location"
class="join-item btn"
bind:group={typeValue}
aria-label="Location"
/>
<input
type="radio"
name="type"
value="name"
class="join-item btn"
aria-label="Name"
bind:group={typeValue}
/>
</div>
<button class="btn btn-primary" on:click={filterResults}>Filter</button>
</div>
<h1 class="text-center font-bold text-4xl">Search Results</h1> <h1 class="text-center font-bold text-4xl">Search Results</h1>
{#if adventureArray.length > 0} {#if adventureArray.length > 0}
<div <div