Skip to content

Commit

Permalink
update home page, use modal component on display card
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexanderjoe
alexanderjoe committed May 2, 2024
1 parent 09fa514 commit 8b03333
Show file tree
Hide file tree
Showing 7 changed files with 261 additions and 265 deletions.
2 changes: 2 additions & 0 deletions ui/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Component, useContext } from "solid-js";
import { Navbar } from "~/components/navbar";
import { IThemeContext, ThemeContext } from "~/context/ThemeContext.tsx";
import { Footer } from "~/components/footer.tsx";

const App: Component = (props: any) => {
const themeContext: IThemeContext = useContext(ThemeContext);
Expand All @@ -10,6 +11,7 @@ const App: Component = (props: any) => {
<div class={`flex flex-col min-h-screen bg-primary ${themeContext.theme}`}>
<Navbar />
{props.children}
<Footer />
</div>
</>
);
Expand Down
104 changes: 41 additions & 63 deletions ui/src/components/display-card.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,9 @@
import { Component, createSignal, For, Show } from "solid-js";
import { Component, For, Show } from "solid-js";
import { Game, GameWithPrediction, Period, Team } from "~/interface";
import { FiClock } from "solid-icons/fi";
import { IoLocationOutline } from "solid-icons/io";
import { OcDotfill3 } from "solid-icons/oc";
import { Motion } from "solid-motionone";
import {
AlertDialog,
AlertDialogContent,
AlertDialogDescription,
AlertDialogTitle
} from "~/components/ui/alert-dialog.tsx";
import { Avatar, AvatarImage } from "~/components/ui/avatar";
import { Badge } from "~/components/ui/badge";
import { Button } from "~/components/ui/button";
Expand All @@ -31,7 +25,8 @@ import {
} from "~/components/ui/table";
import { isLive, timeUntilGame } from "~/lib/utils.ts";
import { Prediction } from "~/model/prediction.ts";
import { AnimationDiv } from '~/components/animated-div.tsx';
import { AnimationDiv } from "~/components/animated-div.tsx";
import { DialogModal } from "~/components/dialog-modal.tsx";

const logos = import.meta.glob("../assets/teams/*.svg", { eager: true });

Expand Down Expand Up @@ -168,14 +163,14 @@ export const TeamInfo: Component<ITeamInfoProps> = (props: ITeamInfoProps) => {
}
>
<AnimationDiv animate={{ x: [0, 0], opacity: [0, 1] }}>
<Badge
class={`ml-2 ${getColorFromStatusAndOutcome(
props.game.status,
props.winner === props.team.id
)} text-white`}
>
Projected Winner
</Badge>
<Badge
class={`ml-2 ${getColorFromStatusAndOutcome(
props.game.status,
props.winner === props.team.id
)} text-white`}
>
Projected Winner
</Badge>
</AnimationDiv>
</Show>
</span>
Expand Down Expand Up @@ -241,7 +236,6 @@ export const AdvancedGameCard: Component<ITeamProps> = (props: ITeamProps) => {
};

export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
const [injuryReportOpen, setInjuryReportOpen] = createSignal(false);
return (
<div>
<Card
Expand Down Expand Up @@ -318,7 +312,6 @@ export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
<span class="text-white light:text-black">{props.game.home_team.name}</span>
<span class="text-white light:text-200 bg-700 py-2 px-4 rounded inline-block">
{props.game.home_team.score.points}

</span>
</div>
<span class="text-sm text-gray-400"> - </span>
Expand Down Expand Up @@ -361,54 +354,39 @@ export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
team => team.injuries.length > 0
)}
>
<Button
class="bg-700 text-white light:text-black"
variant="default"
onClick={() => setInjuryReportOpen(true)}
>
View Injury Report
</Button>
<AlertDialog
open={injuryReportOpen()}
onOpenChange={setInjuryReportOpen}
preventScroll={true}
<DialogModal
title="Injury Report"
trigger={
<Button class="bg-700 text-white light:text-black" variant="default">
View Injury Report
</Button>
}
>
<AlertDialogContent class="bg-primary opacity-100 p-4 rounded-lg">
<AlertDialogTitle class="flex flex-row justify-center items-center text-2xl font-bold mb-2">
Injury Report
</AlertDialogTitle>
<AlertDialogDescription>
<Table class="mt-2">
<TableHeader>
<TableRow class="bg-700 text-300">
<TableHead class="text-center font-semibold">Team</TableHead>
<TableHead class="text-center font-semibold">Player</TableHead>
<TableHead class="text-center font-semibold">Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<For each={[props.game.home_team, props.game.away_team]}>
{(team, _) => (
<For each={team.injuries}>
{(injury, _) => (
<TableRow>
<TableCell class="text-center text-100">{team.name}</TableCell>
<TableCell class="text-center text-100">
{injury.player}
</TableCell>
<TableCell class="text-center text-100">
{injury.status}
</TableCell>
</TableRow>
)}
</For>
<Table class="mt-2">
<TableHeader>
<TableRow class="bg-700 text-100 hover:bg-600">
<TableHead class="text-center text-200 font-semibold">Team</TableHead>
<TableHead class="text-center text-200 font-semibold">Player</TableHead>
<TableHead class="text-center text-200 font-semibold">Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<For each={[props.game.home_team, props.game.away_team]}>
{(team, _) => (
<For each={team.injuries}>
{(injury, _) => (
<TableRow>
<TableCell class="text-center text-100">{team.name}</TableCell>
<TableCell class="text-center text-100">{injury.player}</TableCell>
<TableCell class="text-center text-100">{injury.status}</TableCell>
</TableRow>
)}
</For>
</TableBody>
</Table>
</AlertDialogDescription>
</AlertDialogContent>
</AlertDialog>
)}
</For>
</TableBody>
</Table>
</DialogModal>
</Show>
</div>
</CardFooter>
Expand Down
34 changes: 34 additions & 0 deletions ui/src/components/footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { AiFillGithub } from "solid-icons/ai";

export function Footer() {
return (
<>
<footer class="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6 bg-primary light:bg-primary text-100 light:text-black font-monserrat">
<p class="mt-2 sm:mt-auto text-xs text-100 light:text-black order-last sm:order-first">
&copy;&nbsp;{new Date().getFullYear()}&nbsp;Accuribet. All rights reserved.
</p>
<nav class="sm:ml-auto flex flex-col items-center sm:items-end gap-4 sm:gap-6">
<a
href="https://github.com/day-mon/sports-betting-ai"
class="text-xs flex flex-row hover:underline underline-offset-4"
target="_blank"
>
<AiFillGithub class="w-4 h-4 mx-2" />
Github
</a>
<p class="text-xs">
Some assets from{" "}
<a href="https://solid-icons.vercel.app/" class="hover:underline" target="_blank">
Solid Icons
</a>{" "}
and{" "}
<a href="https://www.solid-ui.com/" class="hover:underline" target="_blank">
Solid-UI
</a>
.
</p>
</nav>
</footer>
</>
);
}
2 changes: 2 additions & 0 deletions ui/src/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:wght@700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;
Expand Down
145 changes: 71 additions & 74 deletions ui/src/pages/History.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,17 @@ interface IHistory {
date: string;
}

async function fetchHistoryForModelOnDate(
value: IHistory
): Promise<HistoryGame[] | undefined> {
async function fetchHistoryForModelOnDate(value: IHistory): Promise<HistoryGame[] | undefined> {
if (value.date === "" || value.model === "") return undefined;
const instance = AccuribetAPI.getInstance();
return await instance.getPredictedGames(value.date, value.model);
}



export function History() {
const [dates] = createResource<HistoryDate[]>(fetchHistory);
const [currentData, setCurrentData] = createSignal<IHistory>({ model: "", date: "" } as IHistory);
const [historyResource] = createResource(currentData, fetchHistoryForModelOnDate);


const oldestDateForModel = () => {
if (!dates.error && dates()) {
const datesForModel = dates()?.find(date => date.model_name === currentData().model);
Expand All @@ -40,76 +35,78 @@ export function History() {
};

return (
<AnimationDiv>
<Switch>
<Match when={dates.loading}>
<Loading />
</Match>
<Match when={dates.error}>
<h1>Error fetching dates</h1>
</Match>
<Match when={dates()}>
<AnimationDiv class={"flex flex-col items-center"}>
<span class={"text-100 text-2xl"}>
I would like to see the history of the
<select
class={"mx-3 bg-primary border-b appearance-none border-white text-100"}
onChange={e => setCurrentData({ ...currentData(), model: e.target.value })}
disabled={dates.loading}
>
<option disabled selected>
...
</option>
<For each={dates()}>
{date => <option value={date.model_name}>{date.model_name}</option>}
</For>
</select>
model
</span>

<Show when={historyResource.error}>
<span class={"text-red-500 bg-gray-200 rounded-full font-bold px-3 py-1 mt-2"}>
Error! {historyResource.error.message}
<main class="pt-4 min-h-screen bg-primary">
<AnimationDiv>
<Switch>
<Match when={dates.loading}>
<Loading />
</Match>
<Match when={dates.error}>
<h1>Error fetching dates</h1>
</Match>
<Match when={dates()}>
<AnimationDiv class={"flex flex-col items-center"}>
<span class={"text-100 text-2xl"}>
I would like to see the history of the
<select
class={"mx-3 bg-primary border-b appearance-none border-white text-100"}
onChange={e => setCurrentData({ ...currentData(), model: e.target.value })}
disabled={dates.loading}
>
<option disabled selected>
...
</option>
<For each={dates()}>
{date => <option value={date.model_name}>{date.model_name}</option>}
</For>
</select>
model
</span>
</Show>

<Show when={currentData().model}>
<input
type={"date"}
class={
"appearance-none mb-2 block bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
}
onChange={(event) => {
setCurrentData({ ...currentData(), date: event.target.value });
}}
max={new Date().toISOString().split("T")[0]}
min={oldestDateForModel()}
/>
</Show>
<Show when={historyResource.error}>
<span class={"text-red-500 bg-gray-200 rounded-full font-bold px-3 py-1 mt-2"}>
Error! {historyResource.error.message}
</span>
</Show>

<Show when={currentData().model}>
<input
type={"date"}
class={
"appearance-none mb-2 block bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
}
onChange={event => {
setCurrentData({ ...currentData(), date: event.target.value });
}}
max={new Date().toISOString().split("T")[0]}
min={oldestDateForModel()}
/>
</Show>

<Show when={historyResource()}>
<AnimationDiv class={"flex flex-col justify-between items-center h-fit w-1/2"}>
<For each={historyResource()}>
{game => (
<AnimationDiv
id={game.game_id}
class="flex flex-col items-center mx-100 mt-2 text-100 w-full font-bold bg-secondary rounded-lg p-4"
>
<span>
{game.home_team_name} vs {game.away_team_name}
</span>
<span>
{game.home_team_score} - {game.away_team_score}
</span>
<span>{game.date}</span>
</AnimationDiv>
)}
</For>
</AnimationDiv>
</Show>
</AnimationDiv>
</Match>
</Switch>
</AnimationDiv>
<Show when={historyResource()}>
<AnimationDiv class={"flex flex-col justify-between items-center h-fit w-1/2"}>
<For each={historyResource()}>
{game => (
<AnimationDiv
id={game.game_id}
class="flex flex-col items-center mx-100 mt-2 text-100 w-full font-bold bg-secondary rounded-lg p-4"
>
<span>
{game.home_team_name} vs {game.away_team_name}
</span>
<span>
{game.home_team_score} - {game.away_team_score}
</span>
<span>{game.date}</span>
</AnimationDiv>
)}
</For>
</AnimationDiv>
</Show>
</AnimationDiv>
</Match>
</Switch>
</AnimationDiv>
</main>
);
}
Loading

0 comments on commit 8b03333

Please sign in to comment.