Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tournaments List Page upgrades #418

Merged
merged 2 commits into from
Dec 29, 2024
Merged

Tournaments List Page upgrades #418

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
238b959
tournaments: Show type badge
Joe2k Dec 29, 2024
b31c964
tournaments: Add filters based on type
Joe2k Dec 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 88 additions & 2 deletions frontend/src/components/Tournaments.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,95 @@
import { A } from "@solidjs/router";
import { createQuery } from "@tanstack/solid-query";
import clsx from "clsx";
import { For, Match, Show, Switch } from "solid-js";
import { createSignal, For, Match, Show, Switch } from "solid-js";

import { fetchTournaments } from "../queries";

const Tournaments = () => {
const tournamentsQuery = createQuery(() => ["tournaments"], fetchTournaments);

const [showMixed, setShowMixed] = createSignal(true);
const [showOpens, setShowOpens] = createSignal(true);
const [showWomens, setShowWomens] = createSignal(true);

return (
<div>
<h1 class="mb-5 text-center">
<span class="w-fit bg-gradient-to-r from-blue-500 to-green-500 bg-clip-text text-3xl font-extrabold text-transparent ">
Tournaments
</span>
</h1>

<ul class="flex w-full items-center rounded-lg border border-blue-500 bg-white text-sm font-medium text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
<li class="w-full border-b-0 border-r border-blue-500 dark:border-gray-600">
<div class="flex items-center ps-3">
<input
id="mixed-checkbox"
type="checkbox"
value="mixed"
checked={showMixed()}
onChange={e => setShowMixed(e.target.checked)}
class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:ring-offset-gray-700 dark:focus:ring-blue-600 dark:focus:ring-offset-gray-700"
/>
<label
for="mixed-checkbox"
class="ms-2 w-full py-3 text-sm font-medium text-blue-600 dark:text-gray-300"
>
Mixed
</label>
</div>
</li>
<li class="w-full border-b-0 border-r border-blue-500 dark:border-gray-600">
<div class="flex items-center ps-3">
<input
id="opens-checkbox"
type="checkbox"
value="mens"
checked={showOpens()}
onChange={e => setShowOpens(e.target.checked)}
class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:ring-offset-gray-700 dark:focus:ring-blue-600 dark:focus:ring-offset-gray-700"
/>
<label
for="opens-checkbox"
class="ms-2 w-full py-3 text-sm font-medium text-blue-600 dark:text-gray-300"
>
Opens
</label>
</div>
</li>
<li class="w-full border-b-0 border-blue-500 dark:border-gray-600">
<div class="flex items-center ps-3">
<input
id="womens-checkbox"
type="checkbox"
value="womens"
checked={showWomens()}
onChange={e => setShowWomens(e.target.checked)}
class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:ring-offset-gray-700 dark:focus:ring-blue-600 dark:focus:ring-offset-gray-700"
/>
<label
for="womens-checkbox"
class="ms-2 w-full py-3 text-sm font-medium text-blue-600 dark:text-gray-300"
>
Womens
</label>
</div>
</li>
</ul>

<div
class={
"mt-5 grid grid-cols-1 justify-items-center gap-5 md:grid-cols-2 lg:grid-cols-3 "
}
>
<For each={tournamentsQuery.data}>
<For
each={tournamentsQuery.data?.filter(t => {
if (t.event?.type === "OPN" && showOpens()) return true;
if (t.event?.type === "MXD" && showMixed()) return true;
if (t.event?.type === "WMN" && showWomens()) return true;
return false;
})}
>
{tournament => (
<Show when={tournament.status !== "DFT"}>
<A
Expand All @@ -30,6 +100,22 @@ const Tournaments = () => {
}
class="block w-full rounded-lg border border-blue-600 bg-white p-4 shadow dark:border-blue-400 dark:bg-gray-800"
>
<Show when={tournament.event?.type}>
<span class="mr-2 h-fit rounded bg-blue-200 px-2.5 py-0.5 text-sm font-medium text-blue-800 dark:bg-green-900 dark:text-green-300">
<Switch>
<Match when={tournament.event?.type === "MXD"}>
Mixed
</Match>
<Match when={tournament.event?.type === "OPN"}>
Opens
</Match>
<Match when={tournament.event?.type === "WMN"}>
Womens
</Match>
</Switch>
</span>
</Show>

<Switch>
<Match when={tournament.status === "REG"}>
<span class="h-fit rounded bg-green-200 px-2.5 py-0.5 text-sm font-medium text-green-800 dark:bg-green-900 dark:text-green-300">
Expand Down
Loading