Merge pull request #28 from FGA0138-MDS-Ajax/server

canais e times feito
FGA0138-MDS-Ajax · Jun 30, 2024 · 2f344af · 2f344af
2 parents ca2970c + 189830d
commit 2f344af
Show file tree

Hide file tree

Showing 18 changed files with 187 additions and 79 deletions.
diff --git a/projeto/client/app/favicon.ico b/projeto/client/app/favicon.ico
diff --git a/projeto/client/app/home/canais/Premiere/page.tsx b/projeto/client/app/home/canais/Premiere/page.tsx
diff --git a/projeto/client/app/home/canais/Band/page.tsx → projeto/client/app/home/canais/band/page.tsx b/projeto/client/app/home/canais/Band/page.tsx → projeto/client/app/home/canais/band/page.tsx
diff --git a/projeto/client/app/home/canais/ESPN/page.tsx → projeto/client/app/home/canais/espn/page.tsx b/projeto/client/app/home/canais/ESPN/page.tsx → projeto/client/app/home/canais/espn/page.tsx
diff --git a/...eto/client/app/home/canais/Globo/page.tsx → ...eto/client/app/home/canais/globo/page.tsx b/...eto/client/app/home/canais/Globo/page.tsx → ...eto/client/app/home/canais/globo/page.tsx
diff --git a/projeto/client/app/home/canais/premiere/page.tsx b/projeto/client/app/home/canais/premiere/page.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+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";
+
+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/premiere")
+            .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);
+            });
+    }, []);
+  return (
+    <main className="flex flex-col items-center justify-center flex-grow">
+      <img
+        src="https://upload.wikimedia.org/wikipedia/pt/thumb/a/a2/Logo_Premiere_FC_2018.png/1200px-Logo_Premiere_FC_2018.png"
+        alt="Premiere"
+        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
+          )}
+        >
+          Premiere
+        </h1>
+          <div className="grid grid-cols-2 gap-2">
+              {matches.map((match, index) => (
+                  <CardTimes key={index} match={match} />
+              ))}
+          </div>
+      </div>
+    </main>
+  );
+}
diff --git a/...to/client/app/home/canais/Record/page.tsx → ...to/client/app/home/canais/record/page.tsx b/...to/client/app/home/canais/Record/page.tsx → ...to/client/app/home/canais/record/page.tsx
diff --git a/...to/client/app/home/canais/SporTv/page.tsx → ...to/client/app/home/canais/sportv/page.tsx b/...to/client/app/home/canais/SporTv/page.tsx → ...to/client/app/home/canais/sportv/page.tsx
diff --git a/...o/client/app/home/canais/Youtube/page.tsx → ...o/client/app/home/canais/youtube/page.tsx b/...o/client/app/home/canais/Youtube/page.tsx → ...o/client/app/home/canais/youtube/page.tsx
diff --git a/projeto/client/app/home/page.tsx b/projeto/client/app/home/page.tsx
@@ -19,17 +19,27 @@ const h2ClassName = "text-3xl font-semibold text-white drop-shadow-md";
 
 const lib = new Match("Libertadores", "Sem Jogos", "", "", [""]);
 const br = new Match("Brasileirão", "Sem Jogos", "", "", [""]);
-const canais = ["Sportv", "Premiere", "Globo", "ESPN", "Disney+", "Paramount+"].sort();
 
 export default function HomePage() {
     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[]>([]);
 
     const { data: session, status } = useSession();
     const id = session?.user?.id;
 
+    useEffect(() => {
+        fetch("http://localhost:8000/api/v1/canais")
+            .then(response => response.json())
+            .then(data => {
+                setCanais(data);
+            })
+            .catch(error => {
+                console.error('Erro ao buscar os dados:', error);
+            });
+    }, []);
 
     useEffect(() => {
         if (id) {
@@ -99,6 +109,8 @@ export default function HomePage() {
         }
     }, [favorito]);
 
+
+
     if (status === 'loading') {
         return <div>Loading...</div>;
     }

diff --git a/projeto/client/app/home/timesBr/Flamengo/page.tsx b/projeto/client/app/home/timesBr/Flamengo/page.tsx
@@ -1,31 +1,55 @@
-import React from 'react';
+'use client';
+
+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";
 
 const font = Bebas_Neue({
-  subsets: ['latin'],
-  weight: ['400'],
+    subsets: ['latin'],
+    weight: ['400'],
 });
 
 export default function Home() {
-  return (
-    <main className="flex flex-col items-center justify-center flex-grow">
-      <img src="https://logodetimes.com/times/flamengo/logo-flamengo-2048.png" alt="Flamengo" width={100} height={100} />
-        <div className="space-y-6 text-center">
-
-         <h1
-            className={cn(
-              'text-6xl font-semibold text-white drop-shadow-md',
-              font.className
-            )}
-          >
-            Flamengo
-          </h1>
-          <p className="text-lg text-black">
-            Chega de ficar se perguntando onde o jogo do seu time favorito será transmitido
-          </p>
-        </div>
-    </main>
+    const [matches, setMatches] = useState<Match[]>([]);
+
+    useEffect(() => {
+        fetch("http://localhost:8000/api/v1/games/flamengo")
+            .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);
+            });
+    }, []);
 
-  );
-}
+    return (
+        <main className="flex flex-col items-center justify-center flex-grow">
+            <img src="https://logodetimes.com/times/flamengo/logo-flamengo-2048.png" alt="Flamengo" width={100} height={100} />
+            <div className="space-y-6 text-center">
+                <h1
+                    className={cn(
+                        'text-6xl font-semibold text-white drop-shadow-md',
+                        font.className
+                    )}
+                >
+                    Flamengo
+                </h1>
+                <div className="grid grid-cols-2 gap-2">
+                    {matches.map((match, index) => (
+                        <CardTimes key={index} match={match} />
+                    ))}
+                </div>
+            </div>
+        </main>
+    );
+}
diff --git a/projeto/client/app/layout.tsx b/projeto/client/app/layout.tsx
@@ -8,6 +8,7 @@ const inter = Inter({ subsets: ["latin"] });
 export const metadata: Metadata = {
     title: "Onde é o jogo",
     description: "Listagem dos canais de trasmissão dos jogos dos campeonatos Libertadores e Brasileirão",
+
 };
 
 export default function RootLayout({
@@ -17,9 +18,9 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="pt-br">
-        <body className={inter.className}>
-        <ClientSessionProvider>{children}</ClientSessionProvider>
-        </body>
+            <body className={inter.className}>
+                <ClientSessionProvider>{children}</ClientSessionProvider>
+            </body>
         </html>
     );
 }
diff --git a/projeto/client/components/Navbar.tsx b/projeto/client/components/Navbar.tsx
@@ -1,20 +1,44 @@
+'use client';
+
 import Image from 'next/image';
+import { usePathname } from 'next/navigation';
 import { HomeButton } from '@/components/auth/home-button';
 
 const Navbar = () => {
+  const pathname = usePathname();
+
+  if (pathname === "/home") {
+    return (
+        <nav className="bg-[#005B14] p-3 relative">
+          <div className="container mx-auto flex justify-between items-center">
+            <div className="container mx-auto flex justify-center items-center">
+                <a href={"/"}>
+              <Image
+                  src="/logoss.png" alt="Logo" width={120} height={120} />
+                </a>
+            </div>
+            <div className="absolute right-8 top-5 bg-transparent text-black hover:bg-gray-200 text-lg font-semibold py-2 px-4 rounded-lg">
+            </div>
+          </div>
+        </nav>
+    );
+  }
+
   return (
-    <nav className="bg-[#005B14] p-3 relative">
-      <div className="container mx-auto flex justify-between items-center">
-        <div className="container mx-auto flex justify-center items-center">
-        <Image src="/logoss.png" alt="Logo" width={120} height={120} />
+      <nav className="bg-[#005B14] p-3 relative">
+        <div className="container mx-auto flex justify-between items-center">
+          <div className="container mx-auto flex justify-center items-center">
+              <a href={"/"}>
+                  <Image
+                      src="/logoss.png" alt="Logo" width={120} height={120} />
+              </a>
+          </div>
+          <div className="absolute right-8 top-5 bg-transparent text-black hover:bg-gray-200 text-lg font-semibold py-2 px-4 rounded-lg">
+            <HomeButton mode="redirect">Home</HomeButton>
+          </div>
         </div>
-        <div className="absolute right-8 top-5 bg-transparent text-black hover:bg-gray-200 text-lg font-semibold py-2 px-4 rounded-lg">
-          <HomeButton mode="redirect">Home</HomeButton>
-        </div>
-      </div>
-    </nav>
+      </nav>
   );
 };
 
 export default Navbar;
-
diff --git a/projeto/client/components/home/card-canais.tsx b/projeto/client/components/home/card-canais.tsx
@@ -15,12 +15,15 @@ export const CardCanais = ({ canais }: CardCanaisProps) => {
             <CardContent className="flex justify-center">
                 <div className="flex gap-8">
                     {canais.sort().map((canal, index) => (
-                        <div key={index} className="flex flex-col items-center justify-center px-2">
-                            <div className="h-24 flex items-center justify-center">
-                                <Image src={`/${canal}.png`} alt={canal} width={100} height={100} />
+                        // eslint-disable-next-line react/jsx-key
+                        <a href={`/home/canais/${canal.toLowerCase()}`}>
+                            <div key={index} className="flex flex-col items-center justify-center px-2">
+                                <div className="h-24 flex items-center justify-center">
+                                    <Image src={`/${canal}.png`} alt={canal} width={100} height={100} />
+                                </div>
+                                <span className="mt-2">{canal}</span>
                             </div>
-                            <span className="mt-2">{canal}</span>
-                        </div>
+                        </a>
                     ))}
                 </div>
             </CardContent>

diff --git a/projeto/client/components/home/card-times.tsx b/projeto/client/components/home/card-times.tsx
@@ -6,7 +6,7 @@ import {
     CardFooter,
     CardHeader,
     CardTitle,
-} from "@/components/ui/card_custom"
+} from "@/components/ui/card_custom";
 
 import { Match } from "@/models/match";
 
@@ -38,8 +38,8 @@ export const CardTimes = ({ match }: CardTimesProps) => {
             <CardFooter className="flex space-x-2 justify-center">
                 {match.channels.map((channel, index) => (
                     <span key={index} className="channel-item">
-            {channel} 
-          </span>
+                        {channel}
+                    </span>
                 ))}
             </CardFooter>
         </Card>

diff --git a/projeto/client/public/favicon.ico b/projeto/client/public/favicon.ico
diff --git a/projeto/server/src/repositories/api.repository.ts b/projeto/server/src/repositories/api.repository.ts
@@ -267,6 +267,16 @@ class GameRepository {
         }
     }
 
+    async getCanais(): Promise<string[]> {
+        try {
+            const [response]: [any[], any[]] = await mysqlConn.execute("SELECT NOME_CANAL FROM CANAL");
+            return response.map((canal: any) => canal.NOME_CANAL);
+        } catch (error) {
+            console.error(error);
+            return [];
+        }
+    }
+
 }
 
 export default new GameRepository();
diff --git a/projeto/server/src/routes/api.route.ts b/projeto/server/src/routes/api.route.ts
@@ -85,4 +85,13 @@ router.get('/v1/games/liberta/:favorito', async (req, res) => {
     }
 });
 
+router.get('/v1/canais', async (req, res) => {
+    try {
+        const canais = await GameRepository.getCanais();
+        res.send(canais);
+    } catch (error) {
+        res.status(500).send(error);
+    }
+});
+
 export default router;