Skip to content

Commit

Permalink
Merge pull request #34 from FGA0138-MDS-Ajax/front
Browse files Browse the repository at this point in the history
add comments
  • Loading branch information
fabinsz authored Jul 2, 2024
2 parents 856f59c + be29095 commit 88f0e6b
Show file tree
Hide file tree
Showing 15 changed files with 272 additions and 130 deletions.
3 changes: 3 additions & 0 deletions projeto/client/app/home/canais/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Atenção

A lógica dos comentários das demais páginas seguem o padrão dos comentários da página do canal da [Band](\band\page.tsx).
86 changes: 47 additions & 39 deletions projeto/client/app/home/canais/band/page.tsx
Original file line number Diff line number Diff line change
@@ -1,61 +1,69 @@
'use client';

// Imports necessários para a página do canal
import React, {useEffect, useState} from "react";
import { Bebas_Neue } from "next/font/google";
import { cn } from "@/lib/utils";
import {CardTimes} from "@/components/home/card-times";
import {Match} from "@/models/match";

// Define a fonte utilizada na página
const font = Bebas_Neue({
subsets: ["latin"],
weight: ["400"],
});

export default function Home() {
const [matches, setMatches] = useState<Match[]>([]);

useEffect(() => {
fetch("http://localhost:8000/api/v2/games/band")
.then(response => response.json())
.then(data => {
const matchInstances = data.map((matchData: any) => new Match(
matchData.campeonato,
matchData.data_hora,
matchData.time_1,
matchData.time_2,
matchData.channels
));
setMatches(matchInstances);
})
.catch(error => {
console.error('Erro ao buscar os dados:', error);
});
}, []);
// Realiza a busca dos jogos que passam no canal
const [matches, setMatches] = useState<Match[]>([]);

useEffect(() => {
fetch("http://localhost:8000/api/v2/games/band")
.then(response => response.json())
.then(data => {
// Converte os dados para o modelo de partida
const matchInstances = data.map((matchData: any) => new Match(
matchData.campeonato,
matchData.data_hora,
matchData.time_1,
matchData.time_2,
matchData.channels
));
setMatches(matchInstances);
})

// Exibe um erro caso ocorra algum problema na busca dos dados
.catch(error => {
console.error('Erro ao buscar os dados:', error);
});
}, []);

return (
<div className="min-h-screen bg-custom-gradient">
<main className="flex flex-col items-center justify-center flex-grow">
<img
src="https://seeklogo.com/images/B/bandeirantes-logo-51FB194B24-seeklogo.com.png?v=638249318130000000"
alt="Band"
width={200}
height={200}
/>
<div className="space-y-6 text-center">
<h1
className={cn(
"text-6xl font-semibold text-white drop-shadow-md",
font.className
)}
>
Band
</h1>
<main className="flex flex-col items-center justify-center flex-grow">
{/* Busca a logo do canal */}
<img
src="https://seeklogo.com/images/B/bandeirantes-logo-51FB194B24-seeklogo.com.png?v=638249318130000000"
alt="Band"
width={200}
height={200}
/>
<div className="space-y-6 text-center">

{/* Define um titulo com o nome do canal */}
<h1 className={cn(
"text-6xl font-semibold text-white drop-shadow-md", font.className)}>
Band</h1>

{/* Lista os jogos que irão passar no canal em cards*/}
<div className="grid grid-cols-2 gap-2">
{matches.map((match, index) => (
<CardTimes key={index} match={match} />
))}
<CardTimes key={index} match={match} />))}
</div>
</div>
</main>

</div>

</main>
</div>
);
}
Expand Down
7 changes: 7 additions & 0 deletions projeto/client/app/home/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
import Navbar from '@/components/Navbar';
import Sidebar from '@/components/Sidebar';

// Define o layout da página
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<div className="h-full bg-custom-gradient">

{/* Adiciona a Navbar na pagina */}
<Navbar />
<main className="items-center justify-centerv">
<div className="absolute top-4 left-4">

{/* Adiciona a Sidebar na pagina */}
<Sidebar />
</div>

{/* Define o local aonde será os elementos principais da pagina */}
{children}
</main>
</div>
Expand Down
94 changes: 60 additions & 34 deletions projeto/client/app/home/page.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
"use client";

// Imports necessários para a página Home
import React, { useEffect, useState } from 'react';
import { cn } from '@/lib/utils';
import { Match } from '@/models/match';
Expand All @@ -9,27 +10,34 @@ import { CardTimes } from '@/components/home/card-times';
import { useSession } from "next-auth/react";
import { CardCanais } from '@/components/home/card-canais';

// Define a fonte padrão para a página
const font = Bebas_Neue({
subsets: ['latin'],
weight: ['400'],
});

// Define algumas constantes de estilos que são repetidos
const h1ClassName = "text-4xl font-semibold text-white drop-shadow-md text-center mt-8 mb-8";
const h2ClassName = "text-3xl font-semibold text-white drop-shadow-md";

// Define as partidas padrões para a página
const lib = new Match("Libertadores", "Sem Jogos", "", "", [""]);
const br = new Match("Brasileirão", "Sem Jogos", "", "", [""]);

export default function HomePage() {

// Define os estados da página
const [favorito, setFavorito] = useState<string | undefined>();
const [rodada, setRodada] = useState<number>(0);
const [jogoBr, setJogoBr] = useState<Match>(br);
const [jogoLib, setJogoLib] = useState<Match>(lib);
const [canais, setCanais] = useState<string[]>([]);

// Busca os dados do usuário logado
const { data: session, status } = useSession();
const id = session?.user?.id;

// Busca os dados dos canais disponiveis
useEffect(() => {
fetch("http://localhost:8000/api/v1/canais")
.then(response => response.json())
Expand All @@ -41,6 +49,7 @@ export default function HomePage() {
});
}, []);

// Busca o time favorito do usuário
useEffect(() => {
if (id) {
fetch(`http://localhost:8000/auth/v1/favorito/${id}`)
Expand All @@ -54,6 +63,7 @@ export default function HomePage() {
}
}, [id]);

// Busca a rodada atual do Brasileirão
useEffect(() => {
fetch("http://localhost:8000/api/v1/rodada")
.then(response => response.json())
Expand All @@ -65,10 +75,12 @@ export default function HomePage() {
});
}, []);

// Verifica se a rodada é 0 para setar como 13, ou seja, a rodada atual
if(rodada === 0){
setRodada(13);
}

// Busca o jogo mais próximo do time favorito do usuário no Brasileirão
useEffect(() => {
if (favorito) {
fetch(`http://localhost:8000/api/v1/games/brasileirao/${favorito}`)
Expand All @@ -88,6 +100,7 @@ export default function HomePage() {
}
}, [favorito]);

// Busca o jogo mais próximo do time favorito do usuário na Libertadores
useEffect(() => {
if (favorito) {
fetch(`http://localhost:8000/api/v1/games/liberta/${favorito}`)
Expand All @@ -107,57 +120,70 @@ export default function HomePage() {
}
}, [favorito]);



// Verifica o status da página
if (status === 'loading') {
return <div>Loading...</div>;
}

// Verifica se o usuário está logado
if (!id) {
return <div>User not logged in</div>;
}

return (
<div className="min-h-screen bg-custom-gradient">
<div className="h-full">
<div className="grid grid-cols-2 divide-white content-start">

<div className="pt-2 pl-4 pr-4 pb-2">
<h1 className={cn(h1ClassName, font.className)}>Rodada {rodada} do Brasileirão e Oitavas Libertadores</h1>
<GridTimes />
</div>

<div className="pt-2 pl-4 pr-4 pb-2">
<h1 className={cn(h1ClassName, font.className)}>{favorito}</h1>

<div className="grid grid-rows-3 divide-y-2 divide-white gap-2">
<div className="pb-2">
<h2 className={cn(h2ClassName, font.className)}>Brasileirão</h2>
<div className='w-432px mx-auto'>
<CardTimes match={jogoBr} />
<div className="h-full">

{/* Separa a pagina em duas colunas principais */}
<div className="grid grid-cols-2 divide-white content-start">

{/* Coluna da Esquerda */}
<div className="pt-2 pl-4 pr-4 pb-2">

{/* Define o titulo para os proximos 8 jogos */}
<h1 className={cn(h1ClassName, font.className)}>Rodada {rodada} do Brasileirão e Oitavas Libertadores</h1>
<GridTimes />
</div>

{/* Coluna da Direita */}
<div className="pt-2 pl-4 pr-4 pb-2">

{/* Time favorito do usuario */}
<h1 className={cn(h1ClassName, font.className)}>{favorito}</h1>

{/* Define 3 linhas para separar o conteudo*/}
<div className="grid grid-rows-3 divide-y-2 divide-white gap-2">

{/* Linha para o jogo mais próximo do time do usuário */}
<div className="pb-2">
<h2 className={cn(h2ClassName, font.className)}>Brasileirão</h2>
<div className='w-432px mx-auto'>
<CardTimes match={jogoBr} />
</div>
</div>
</div>

<div className="pb-2">
<h2 className={cn(h2ClassName, font.className)}>Libertadores</h2>
<div className='w-432px mx-auto'>
<CardTimes match={jogoLib} />

{/* Linha para o jogo mais próximo do time do usuário */}
<div className="pb-2">
<h2 className={cn(h2ClassName, font.className)}>Libertadores</h2>
<div className='w-432px mx-auto'>
<CardTimes match={jogoLib} />
</div>
</div>
</div>

<div className="pt-2 pb-2">
<h2 className={cn(h2ClassName, font.className)}>Canais de Transmissão</h2>
<div>
<CardCanais canais={canais}/>

{/* Linha para os canais de transmissão */}
<div className="pt-2 pb-2">
<h2 className={cn(h2ClassName, font.className)}>Canais de Transmissão</h2>
<div>
<CardCanais canais={canais}/>
</div>
</div>
</div>

</div>

</div>

</div>

</div>
</div>
</div>
);
};
Loading

0 comments on commit 88f0e6b

Please sign in to comment.