mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
Moving searches to separate components.
This commit is contained in:
Bradley Shellnut
parent
f78e1a638e
commit
0d10bd8787
4 changed files with 219 additions and 107 deletions
102
src/lib/components/search/advancedSearch/index.svelte
Normal file
102
src/lib/components/search/advancedSearch/index.svelte
Normal file
|
|
@ -0,0 +1,102 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { Checkbox } from 'carbon-components-svelte';
|
||||||
|
import { boredState } from '$lib/stores/boredState';
|
||||||
|
import { gameStore } from '$lib/stores/gameSearchStore';
|
||||||
|
|
||||||
|
async function handleSubmit(event: SubmitEvent) {
|
||||||
|
// submitting = true;
|
||||||
|
boredState.set({ loading: true });
|
||||||
|
const form = event.target as HTMLFormElement;
|
||||||
|
console.log('form', form);
|
||||||
|
const response = await fetch('/api/games', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { accept: 'application/json' },
|
||||||
|
body: new FormData(form)
|
||||||
|
});
|
||||||
|
const responseData = await response.json();
|
||||||
|
// submitting = false;
|
||||||
|
boredState.set({ loading: false });
|
||||||
|
gameStore.removeAll();
|
||||||
|
gameStore.addAll(responseData?.games);
|
||||||
|
// games = responseData?.games;
|
||||||
|
}
|
||||||
|
|
||||||
|
let submitting = $boredState?.loading;
|
||||||
|
let minAge = 0;
|
||||||
|
let minPlayers = 1;
|
||||||
|
let maxPlayers = 1;
|
||||||
|
let exactMinAge = false;
|
||||||
|
let exactMinPlayers = false;
|
||||||
|
let exactMaxPlayers = false;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<form on:submit|preventDefault={handleSubmit} method="post">
|
||||||
|
<fieldset aria-busy={submitting} disabled={submitting}>
|
||||||
|
<div>
|
||||||
|
<label htmlfor="minAge">
|
||||||
|
<input id="minAge" name="minAge" bind:value={minAge} type="number" min={0} max={120} />
|
||||||
|
Min Age
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label htmlfor="minPlayers">
|
||||||
|
<input
|
||||||
|
id="minPlayers"
|
||||||
|
name="minPlayers"
|
||||||
|
bind:value={minPlayers}
|
||||||
|
type="number"
|
||||||
|
min={0}
|
||||||
|
max={50}
|
||||||
|
/>
|
||||||
|
Min Players
|
||||||
|
</label>
|
||||||
|
<Checkbox name="exactMinPlayers" labelText="Search exact?" bind:checked={exactMinPlayers} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label htmlfor="maxPlayers">
|
||||||
|
<input
|
||||||
|
id="maxPlayers"
|
||||||
|
name="maxPlayers"
|
||||||
|
bind:value={maxPlayers}
|
||||||
|
type="number"
|
||||||
|
min={0}
|
||||||
|
max={50}
|
||||||
|
/>
|
||||||
|
Max Players
|
||||||
|
</label>
|
||||||
|
<label htmlfor="exactMaxPlayers">
|
||||||
|
<input
|
||||||
|
id="exactMaxPlayers"
|
||||||
|
type="checkbox"
|
||||||
|
name="exactMaxPlayers"
|
||||||
|
bind:checked={exactMaxPlayers}
|
||||||
|
/>
|
||||||
|
<span>Search exact?</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<button type="submit" disabled={submitting}>Submit</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
h1 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
border-radius: 10px;
|
||||||
|
margin: 0.5rem;
|
||||||
|
padding: 1rem;
|
||||||
|
color: var(--clr-input-txt);
|
||||||
|
background-color: var(--color-btn-primary-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: grid;
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
54
src/lib/components/search/random/index.svelte
Normal file
54
src/lib/components/search/random/index.svelte
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { boredState } from '$lib/stores/boredState';
|
||||||
|
import { gameStore } from '$lib/stores/gameSearchStore';
|
||||||
|
|
||||||
|
async function handleSubmit(event: SubmitEvent) {
|
||||||
|
// submitting = true;
|
||||||
|
boredState.set({ loading: true });
|
||||||
|
const form = event.target as HTMLFormElement;
|
||||||
|
console.log('form', form);
|
||||||
|
const response = await fetch('/api/games', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { accept: 'application/json' },
|
||||||
|
body: new FormData(form)
|
||||||
|
});
|
||||||
|
const responseData = await response.json();
|
||||||
|
// submitting = false;
|
||||||
|
boredState.set({ loading: false });
|
||||||
|
gameStore.removeAll();
|
||||||
|
gameStore.addAll(responseData?.games);
|
||||||
|
// games = responseData?.games;
|
||||||
|
}
|
||||||
|
|
||||||
|
let submitting = $boredState?.loading;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<form on:submit|preventDefault={handleSubmit} method="post">
|
||||||
|
<fieldset aria-busy={submitting} disabled={submitting}>
|
||||||
|
<input type="checkbox" id="random" name="random" hidden checked />
|
||||||
|
<button type="submit" disabled={submitting}>🎲</button>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
h1 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
border-radius: 10px;
|
||||||
|
margin: 0.5rem;
|
||||||
|
padding: 1rem;
|
||||||
|
color: var(--clr-input-txt);
|
||||||
|
background-color: var(--color-btn-primary-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: grid;
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
57
src/lib/components/search/textSearch/index.svelte
Normal file
57
src/lib/components/search/textSearch/index.svelte
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { boredState } from '$lib/stores/boredState';
|
||||||
|
import { gameStore } from '$lib/stores/gameSearchStore';
|
||||||
|
|
||||||
|
async function handleSearch(event: SubmitEvent) {
|
||||||
|
boredState.set({ loading: true });
|
||||||
|
const form = event.target as HTMLFormElement;
|
||||||
|
console.log('form', form);
|
||||||
|
const response = await fetch('/api/game', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { accept: 'application/json' },
|
||||||
|
body: new FormData(form)
|
||||||
|
});
|
||||||
|
const responseData = await response.json();
|
||||||
|
boredState.set({ loading: false });
|
||||||
|
gameStore.removeAll();
|
||||||
|
gameStore.addAll(responseData?.games);
|
||||||
|
}
|
||||||
|
|
||||||
|
let submitting = $boredState?.loading;
|
||||||
|
let name = '';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<form on:submit|preventDefault={handleSearch} method="post">
|
||||||
|
<fieldset aria-busy={submitting} disabled={submitting}>
|
||||||
|
<div>
|
||||||
|
<label htmlfor="name">
|
||||||
|
Search
|
||||||
|
<input id="name" name="name" bind:value={name} type="text" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<button type="submit" disabled={submitting}>Search</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
h1 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
border-radius: 10px;
|
||||||
|
margin: 0.5rem;
|
||||||
|
padding: 1rem;
|
||||||
|
color: var(--clr-input-txt);
|
||||||
|
background-color: var(--color-btn-primary-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: grid;
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -6,55 +6,15 @@
|
||||||
import Listbox from '$lib/components/listbox.svelte';
|
import Listbox from '$lib/components/listbox.svelte';
|
||||||
import Loading from '$lib/components/loading.svelte';
|
import Loading from '$lib/components/loading.svelte';
|
||||||
import Portal from '$lib/Portal.svelte';
|
import Portal from '$lib/Portal.svelte';
|
||||||
|
import TextSearch from '$lib/components/search/textSearch/index.svelte';
|
||||||
|
import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte';
|
||||||
|
import RandomSearch from '$lib/components/search/random/index.svelte';
|
||||||
import { gameStore } from '$lib/stores/gameSearchStore';
|
import { gameStore } from '$lib/stores/gameSearchStore';
|
||||||
import { boredState } from '$lib/stores/boredState';
|
import { boredState } from '$lib/stores/boredState';
|
||||||
import { Checkbox } from 'carbon-components-svelte';
|
import { Checkbox } from 'carbon-components-svelte';
|
||||||
// import { enhance } from "$lib/form";
|
// import { enhance } from "$lib/form";
|
||||||
|
|
||||||
// let games: GameType[] = [];
|
// let games: GameType[] = [];
|
||||||
let submitting = $boredState?.loading;
|
|
||||||
|
|
||||||
async function handleSubmit(event: SubmitEvent) {
|
|
||||||
// submitting = true;
|
|
||||||
boredState.set({ loading: true });
|
|
||||||
const form = event.target as HTMLFormElement;
|
|
||||||
console.log('form', form);
|
|
||||||
const response = await fetch('/api/games', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { accept: 'application/json' },
|
|
||||||
body: new FormData(form)
|
|
||||||
});
|
|
||||||
const responseData = await response.json();
|
|
||||||
// submitting = false;
|
|
||||||
boredState.set({ loading: false });
|
|
||||||
gameStore.removeAll();
|
|
||||||
gameStore.addAll(responseData?.games);
|
|
||||||
// games = responseData?.games;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleSearch(event: SubmitEvent) {
|
|
||||||
boredState.set({ loading: true });
|
|
||||||
const form = event.target as HTMLFormElement;
|
|
||||||
console.log('form', form);
|
|
||||||
const response = await fetch('/api/game', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { accept: 'application/json' },
|
|
||||||
body: new FormData(form)
|
|
||||||
});
|
|
||||||
const responseData = await response.json();
|
|
||||||
// submitting = false;
|
|
||||||
boredState.set({ loading: false });
|
|
||||||
gameStore.removeAll();
|
|
||||||
gameStore.addAll(responseData?.games);
|
|
||||||
}
|
|
||||||
|
|
||||||
let name = '';
|
|
||||||
let minAge = 0;
|
|
||||||
let minPlayers = 1;
|
|
||||||
let maxPlayers = 1;
|
|
||||||
let exactMinAge = false;
|
|
||||||
let exactMinPlayers = false;
|
|
||||||
let exactMaxPlayers = false;
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
|
|
@ -64,70 +24,9 @@
|
||||||
<h1>Search Boardgames!</h1>
|
<h1>Search Boardgames!</h1>
|
||||||
<p>Input your requirements to search for board game that match your criteria</p>
|
<p>Input your requirements to search for board game that match your criteria</p>
|
||||||
<div class="game-form">
|
<div class="game-form">
|
||||||
<form on:submit|preventDefault={handleSearch} method="post">
|
<TextSearch />
|
||||||
<fieldset aria-busy={submitting} disabled={submitting}>
|
<AdvancedSearch />
|
||||||
<div>
|
<RandomSearch />
|
||||||
<label htmlfor="minAge">
|
|
||||||
Search
|
|
||||||
<input id="name" name="name" bind:value={name} type="text" />
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<button type="submit" disabled={submitting}>Search</button>
|
|
||||||
</form>
|
|
||||||
<form on:submit|preventDefault={handleSubmit} method="post">
|
|
||||||
<fieldset aria-busy={submitting} disabled={submitting}>
|
|
||||||
<div>
|
|
||||||
<label htmlfor="minAge">
|
|
||||||
<input id="minAge" name="minAge" bind:value={minAge} type="number" min={0} max={120} />
|
|
||||||
Min Age
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label htmlfor="minPlayers">
|
|
||||||
<input
|
|
||||||
id="minPlayers"
|
|
||||||
name="minPlayers"
|
|
||||||
bind:value={minPlayers}
|
|
||||||
type="number"
|
|
||||||
min={0}
|
|
||||||
max={50}
|
|
||||||
/>
|
|
||||||
Min Players
|
|
||||||
</label>
|
|
||||||
<Checkbox name="exactMinPlayers" labelText="Search exact?" bind:checked={exactMinPlayers} />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label htmlfor="maxPlayers">
|
|
||||||
<input
|
|
||||||
id="maxPlayers"
|
|
||||||
name="maxPlayers"
|
|
||||||
bind:value={maxPlayers}
|
|
||||||
type="number"
|
|
||||||
min={0}
|
|
||||||
max={50}
|
|
||||||
/>
|
|
||||||
Max Players
|
|
||||||
</label>
|
|
||||||
<label htmlfor="exactMaxPlayers">
|
|
||||||
<input
|
|
||||||
id="exactMaxPlayers"
|
|
||||||
type="checkbox"
|
|
||||||
name="exactMaxPlayers"
|
|
||||||
bind:checked={exactMaxPlayers}
|
|
||||||
/>
|
|
||||||
<span>Search exact?</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<button type="submit" disabled={submitting}>Submit</button>
|
|
||||||
</form>
|
|
||||||
<form on:submit|preventDefault={handleSubmit} method="post">
|
|
||||||
<fieldset aria-busy={submitting} disabled={submitting}>
|
|
||||||
<input type="checkbox" id="random" name="random" hidden checked />
|
|
||||||
<button type="submit" disabled={submitting}>🎲</button>
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- {#if submitting}
|
<!-- {#if submitting}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue