mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
Mergin searces.
This commit is contained in:
Bradley Shellnut
parent
d7665d1a94
commit
bb08f03b9c
5 changed files with 127 additions and 123 deletions
|
|
@ -17,12 +17,12 @@
|
|||
"@rgossiaux/svelte-headlessui": "1.0.2",
|
||||
"@rgossiaux/svelte-heroicons": "^0.1.2",
|
||||
"@sveltejs/adapter-auto": "1.0.0-next.64",
|
||||
"@sveltejs/kit": "1.0.0-next.403",
|
||||
"@sveltejs/kit": "1.0.0-next.405",
|
||||
"@types/cookie": "^0.5.1",
|
||||
"@types/node": "^18.6.4",
|
||||
"@typescript-eslint/eslint-plugin": "^5.32.0",
|
||||
"@typescript-eslint/parser": "^5.32.0",
|
||||
"carbon-components-svelte": "^0.67.5",
|
||||
"carbon-components-svelte": "^0.67.7",
|
||||
"carbon-icons-svelte": "^11.2.0",
|
||||
"eslint": "^8.21.0",
|
||||
"eslint-config-prettier": "^8.1.0",
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@ specifiers:
|
|||
'@rgossiaux/svelte-headlessui': 1.0.2
|
||||
'@rgossiaux/svelte-heroicons': ^0.1.2
|
||||
'@sveltejs/adapter-auto': 1.0.0-next.64
|
||||
'@sveltejs/kit': 1.0.0-next.403
|
||||
'@sveltejs/kit': 1.0.0-next.405
|
||||
'@types/cookie': ^0.5.1
|
||||
'@types/feather-icons': ^4.7.0
|
||||
'@types/node': ^18.6.4
|
||||
'@typescript-eslint/eslint-plugin': ^5.32.0
|
||||
'@typescript-eslint/parser': ^5.32.0
|
||||
carbon-components-svelte: ^0.67.5
|
||||
carbon-components-svelte: ^0.67.7
|
||||
carbon-icons-svelte: ^11.2.0
|
||||
cookie: ^0.5.0
|
||||
eslint: ^8.21.0
|
||||
|
|
@ -49,12 +49,12 @@ devDependencies:
|
|||
'@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.49.0
|
||||
'@rgossiaux/svelte-heroicons': 0.1.2_svelte@3.49.0
|
||||
'@sveltejs/adapter-auto': 1.0.0-next.64
|
||||
'@sveltejs/kit': 1.0.0-next.403_svelte@3.49.0+vite@3.0.4
|
||||
'@sveltejs/kit': 1.0.0-next.405_svelte@3.49.0+vite@3.0.4
|
||||
'@types/cookie': 0.5.1
|
||||
'@types/node': 18.6.4
|
||||
'@typescript-eslint/eslint-plugin': 5.32.0_iosr3hrei2tubxveewluhu5lhy
|
||||
'@typescript-eslint/parser': 5.32.0_qugx7qdu5zevzvxaiqyxfiwquq
|
||||
carbon-components-svelte: 0.67.5
|
||||
carbon-components-svelte: 0.67.7
|
||||
carbon-icons-svelte: 11.2.0
|
||||
eslint: 8.21.0
|
||||
eslint-config-prettier: 8.5.0_eslint@8.21.0
|
||||
|
|
@ -268,8 +268,8 @@ packages:
|
|||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@sveltejs/kit/1.0.0-next.403_svelte@3.49.0+vite@3.0.4:
|
||||
resolution: {integrity: sha512-pKlmthl1SZkbx671Jp+LBoRne0vNzsjSgta9iRhqW/bt/0mx/IjlMd/NOeLuJGo30dAJdefrySoSamiaq47M/g==}
|
||||
/@sveltejs/kit/1.0.0-next.405_svelte@3.49.0+vite@3.0.4:
|
||||
resolution: {integrity: sha512-jHSa74F7k+hC+0fof75g/xm/+1M5sM66Qt6v8eLLMSgjkp36Lb5xOioBhbl6w0NYoE5xysLsBWuu+yHytfvCBA==}
|
||||
engines: {node: '>=16.9'}
|
||||
hasBin: true
|
||||
requiresBuild: true
|
||||
|
|
@ -281,6 +281,7 @@ packages:
|
|||
chokidar: 3.5.3
|
||||
sade: 1.8.1
|
||||
svelte: 3.49.0
|
||||
tiny-glob: 0.2.9
|
||||
vite: 3.0.4_sass@1.54.3
|
||||
transitivePeerDependencies:
|
||||
- diff-match-patch
|
||||
|
|
@ -601,8 +602,8 @@ packages:
|
|||
engines: {node: '>=6'}
|
||||
dev: true
|
||||
|
||||
/carbon-components-svelte/0.67.5:
|
||||
resolution: {integrity: sha512-2azoyIy5xuWYOW+voMJe5p1J72bi8L+BpxkZR0FXCxv/+eK8wrDySaLRmyeYku/qNcD1/PAm4Fl4JZoakeGW4A==}
|
||||
/carbon-components-svelte/0.67.7:
|
||||
resolution: {integrity: sha512-fx/O38tzw9uLiquqqB9zOI5ARA8pSBTOt1gSbgMNwLADYW0weAsr1dLvLnOmSLmXr3T0jaPgWHSkuEv4VTeo/w==}
|
||||
dependencies:
|
||||
flatpickr: 4.6.9
|
||||
dev: true
|
||||
|
|
|
|||
|
|
@ -2,23 +2,23 @@
|
|||
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;
|
||||
}
|
||||
// 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 = 1;
|
||||
|
|
@ -28,62 +28,62 @@
|
|||
let exactMaxPlayers = false;
|
||||
</script>
|
||||
|
||||
<form on:submit|preventDefault={handleSubmit} method="post">
|
||||
<fieldset aria-busy={submitting} disabled={submitting}>
|
||||
<div>
|
||||
<label for="minAge">
|
||||
Min Age
|
||||
<input id="minAge" name="minAge" bind:value={minAge} type="number" min={1} max={120} />
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="minPlayers">
|
||||
Min Players
|
||||
<input
|
||||
id="minPlayers"
|
||||
name="minPlayers"
|
||||
bind:value={minPlayers}
|
||||
type="number"
|
||||
min={0}
|
||||
max={50}
|
||||
/>
|
||||
</label>
|
||||
<label for="exactMinPlayers" style="display: flex; gap: 1rem; place-items: center;">
|
||||
<span>Exact?</span>
|
||||
<input
|
||||
id="exactMinPlayers"
|
||||
type="checkbox"
|
||||
name="exactMinPlayers"
|
||||
bind:checked={exactMinPlayers}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="maxPlayers">
|
||||
Max Players
|
||||
<input
|
||||
id="maxPlayers"
|
||||
name="maxPlayers"
|
||||
bind:value={maxPlayers}
|
||||
type="number"
|
||||
min={0}
|
||||
max={50}
|
||||
/>
|
||||
</label>
|
||||
<label for="exactMaxPlayers" style="display: flex; gap: 1rem; place-items: center;">
|
||||
<span>Exact?</span>
|
||||
<input
|
||||
id="exactMaxPlayers"
|
||||
type="checkbox"
|
||||
name="exactMaxPlayers"
|
||||
bind:checked={exactMaxPlayers}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<button type="submit" disabled={submitting}>Submit</button>
|
||||
</form>
|
||||
<!-- <form on:submit|preventDefault={handleSubmit} method="post"> -->
|
||||
<fieldset class="advanced-search" aria-busy={submitting} disabled={submitting}>
|
||||
<div>
|
||||
<label for="minAge">
|
||||
Min Age
|
||||
<input id="minAge" name="minAge" bind:value={minAge} type="number" min={1} max={120} />
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="minPlayers">
|
||||
Min Players
|
||||
<input
|
||||
id="minPlayers"
|
||||
name="minPlayers"
|
||||
bind:value={minPlayers}
|
||||
type="number"
|
||||
min={0}
|
||||
max={50}
|
||||
/>
|
||||
</label>
|
||||
<label for="exactMinPlayers" style="display: flex; gap: 1rem; place-items: center;">
|
||||
<span>Exact?</span>
|
||||
<input
|
||||
id="exactMinPlayers"
|
||||
type="checkbox"
|
||||
name="exactMinPlayers"
|
||||
bind:checked={exactMinPlayers}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="maxPlayers">
|
||||
Max Players
|
||||
<input
|
||||
id="maxPlayers"
|
||||
name="maxPlayers"
|
||||
bind:value={maxPlayers}
|
||||
type="number"
|
||||
min={0}
|
||||
max={50}
|
||||
/>
|
||||
</label>
|
||||
<label for="exactMaxPlayers" style="display: flex; gap: 1rem; place-items: center;">
|
||||
<span>Exact?</span>
|
||||
<input
|
||||
id="exactMaxPlayers"
|
||||
type="checkbox"
|
||||
name="exactMaxPlayers"
|
||||
bind:checked={exactMaxPlayers}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<!-- <button type="submit" disabled={submitting}>Submit</button> -->
|
||||
|
||||
<!-- </form> -->
|
||||
<style lang="scss">
|
||||
button {
|
||||
border-radius: 10px;
|
||||
|
|
|
|||
|
|
@ -1,21 +1,7 @@
|
|||
<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);
|
||||
}
|
||||
import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte';
|
||||
|
||||
export let showButton: boolean = false;
|
||||
export let advancedSearch: boolean = false;
|
||||
|
|
@ -25,30 +11,29 @@
|
|||
let name = '';
|
||||
</script>
|
||||
|
||||
<form on:submit|preventDefault={handleSearch} method="post">
|
||||
<fieldset aria-busy={submitting} disabled={submitting}>
|
||||
<label for="name">
|
||||
Search
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
bind:value={name}
|
||||
type="text"
|
||||
aria-label="Search boardgame"
|
||||
placeholder="Search boardgame"
|
||||
/>
|
||||
{#if showButton}
|
||||
<button class="btn" type="submit" disabled={submitting}>Search</button>
|
||||
{/if}
|
||||
</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
<!-- <form on:submit|preventDefault={handleSearch} method="post"> -->
|
||||
<fieldset class="text-search" aria-busy={submitting} disabled={submitting}>
|
||||
<label for="name">
|
||||
Search
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
bind:value={name}
|
||||
type="text"
|
||||
aria-label="Search boardgame"
|
||||
placeholder="Search boardgame"
|
||||
/>
|
||||
</label>
|
||||
</fieldset>
|
||||
{#if advancedSearch}
|
||||
<AdvancedSearch />
|
||||
{/if}
|
||||
{#if showButton}
|
||||
<button class="btn" type="submit" disabled={submitting}>Submit</button>
|
||||
{/if}
|
||||
|
||||
<!-- </form> -->
|
||||
<style lang="scss">
|
||||
form {
|
||||
display: grid;
|
||||
place-items: start;
|
||||
}
|
||||
h1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -64,8 +49,8 @@
|
|||
margin: 1rem;
|
||||
|
||||
@media (max-width: 850px) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,22 @@
|
|||
import RandomSearch from '$lib/components/search/random/index.svelte';
|
||||
import Random from '$lib/components/random/index.svelte';
|
||||
import { gameStore } from '$lib/stores/gameSearchStore';
|
||||
import { boredState } from '$root/lib/stores/boredState';
|
||||
|
||||
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);
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -15,8 +31,10 @@
|
|||
<h1>Search Boardgames!</h1>
|
||||
<p>Input your requirements to search for board game that match your criteria</p>
|
||||
<div class="game-search">
|
||||
<TextSearch showButton />
|
||||
<AdvancedSearch />
|
||||
<form on:submit|preventDefault={handleSearch} method="post">
|
||||
<TextSearch showButton advancedSearch />
|
||||
</form>
|
||||
<!-- <AdvancedSearch /> -->
|
||||
<div class="random-buttons">
|
||||
<RandomSearch />
|
||||
<Random />
|
||||
|
|
|
|||
Loading…
Reference in a new issue