Adding logic start for exact search.

This commit is contained in:
Bradley Shellnut 2022-04-21 17:19:48 -07:00
parent 2a5eafdc1a
commit 8e2257ee79
3 changed files with 57 additions and 16 deletions

View file

@ -2,7 +2,7 @@
"name": "boredgame",
"version": "0.0.1",
"scripts": {
"dev": "svelte-kit dev",
"dev": "svelte-kit dev --host",
"build": "svelte-kit build",
"package": "svelte-kit package",
"preview": "svelte-kit preview",

View file

@ -6,18 +6,57 @@ export const post: RequestHandler = async ({ request }) => {
const queryParams : SearchQuery = {
order_by: 'rank',
ascending: false,
limit: 20,
limit: 2,
client_id: import.meta.env.VITE_PUBLIC_CLIENT_ID,
}
const minAge = form.get('minAge');
const minPlayers = form.get('minPlayers');
const maxPlayers = form.get('maxPlayers');
const exactMinAge = form.get('exactMinAge') === 'on' || false;
const exactMinPlayers = form.get('exactMinPlayers') === 'on' || false;
const exactMaxPlayers = form.get('exactMaxPlayers') === 'on' || false;
const random = form.get('random') === 'on' || false;
if (minPlayers) queryParams.gt_min_players = (+minPlayers === 1 ? 0 : (+minPlayers - 1));
if (maxPlayers) queryParams.lt_max_players = +maxPlayers + 1;
if (minAge) queryParams.gt_min_age = +minAge === 1 ? 0 : +minAge - 1;
console.log("form.get('minAge')", form.get('minAge'));
console.log("form.get('minPlayers')", form.get('minPlayers'));
console.log("form.get('maxPlayers')", form.get('maxPlayers'));
console.log("form.get('exactMinAge')", form.get('exactMinAge'));
console.log("form.get('exactMinPlayers')", form.get('exactMinPlayers'));
console.log("form.get('exactMaxPlayers')", form.get('exactMaxPlayers'));
console.log("form.get('random')", form.get('random'));
console.log('minAge',minAge);
console.log('minPlayers',minPlayers);
console.log('maxPlayers',maxPlayers);
console.log('exactMinAge',exactMinAge);
console.log('exactMinPlayers',exactMinPlayers);
console.log('exactMaxPlayers',exactMaxPlayers);
console.log('random',random);
if (minAge) {
if (exactMinAge) {
queryParams.min_age = +minAge;
} else {
queryParams.gt_min_age = +minAge === 1 ? 0 : +minAge - 1;
}
}
if (minPlayers) {
if (exactMinPlayers) {
queryParams.min_players = +minPlayers;
} else {
queryParams.gt_min_players = (+minPlayers === 1 ? 0 : (+minPlayers - 1));
}
}
if (maxPlayers) {
if (exactMaxPlayers) {
queryParams.max_players = +maxPlayers;
} else {
queryParams.lt_max_players = +maxPlayers + 1;
}
}
queryParams.random = random;
const newQueryParams = {};

View file

@ -1,6 +1,6 @@
<script lang="ts">
import type { Game } from "$lib/types";
import { Checkbox, NumberInput, Tooltip } from "carbon-components-svelte";
import { Checkbox, NumberInput } from "carbon-components-svelte";
// import { enhance } from "$lib/form";
let games: Game[] = [];
@ -9,6 +9,7 @@ import { Checkbox, NumberInput, Tooltip } from "carbon-components-svelte";
async function handleSubmit(event: SubmitEvent) {
submitting = true;
const form = event.target as HTMLFormElement;
console.log('form', form);
const response = await fetch('/api/games', {
method: 'post',
headers: { accept: 'application/json' },
@ -22,6 +23,9 @@ import { Checkbox, NumberInput, Tooltip } from "carbon-components-svelte";
let minAge = 0;
let minPlayers = 1;
let maxPlayers = 1;
let exactMinAge = false;
let exactMinPlayers = false;
let exactMaxPlayers = false;
</script>
@ -29,6 +33,11 @@ import { Checkbox, NumberInput, Tooltip } from "carbon-components-svelte";
<title>Games</title>
</svelte:head>
<h1>Search Boardgames!</h1>
<section>
<p>Input your requirements to search for board game that match your criteria</p>
</section>
<div class="game-form">
<form on:submit|preventDefault={handleSubmit} method="post">
<fieldset aria-busy={submitting} disabled={submitting}>
@ -41,7 +50,7 @@ import { Checkbox, NumberInput, Tooltip } from "carbon-components-svelte";
invalidText="Number must be between 0 and 120"
label="Min Age"
/>
<Checkbox name="exactMinAge" labelText="Exact?" />
<Checkbox name="exactMinAge" labelText="Search exact?" bind:checked={exactMinAge} />
</div>
<div>
<NumberInput
@ -52,14 +61,7 @@ import { Checkbox, NumberInput, Tooltip } from "carbon-components-svelte";
invalidText="Number must be between 1 and 50"
label="Min Players"
/>
<div>
<Checkbox name="exactMinPlayers" labelText="Exact?" />
<Tooltip>
<p id="tooltip-body">
Resources are provisioned based on your account's organization.
</p>
</Tooltip>
</div>
<Checkbox name="exactMinPlayers" labelText="Search exact?" bind:checked={exactMinPlayers} />
</div>
<div>
<NumberInput
@ -70,7 +72,7 @@ import { Checkbox, NumberInput, Tooltip } from "carbon-components-svelte";
invalidText="Number must be between 1 and 50"
label="Max Players"
/>
<Checkbox name="exactMaxPlayers" labelText="Exact?" />
<Checkbox name="exactMaxPlayers" labelText="Search exact?" bind:checked={exactMaxPlayers} />
</div>
</fieldset>
<button type="submit" disabled={submitting}>Submit</button>