From 66ab7f8bec5ea6f28abdb6021f721132d7054c24 Mon Sep 17 00:00:00 2001
From: Raymond Debasa Peralta <UO290054@uniovi.es>
Date: Mon, 8 Apr 2024 14:45:52 +0200
Subject: [PATCH 1/3] menu de usuario desplegable

---
 webapp/src/components/HistoricalUserData.js | 52 ++++++++++++---------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/webapp/src/components/HistoricalUserData.js b/webapp/src/components/HistoricalUserData.js
index 22e2695e..2251523f 100644
--- a/webapp/src/components/HistoricalUserData.js
+++ b/webapp/src/components/HistoricalUserData.js
@@ -8,37 +8,45 @@ const HistoricalUserData = () => {
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
 
   const [gameHistory, setGameHistory] = useState([]);
-  
+  const [expandedRows, setExpandedRows] = useState([]);
 
   const handleLoadHistory = async () => {
     try {
       const username = localStorage.getItem('username');
-    const response = await axios.get(`${apiEndpoint}/getgamehistory/${username}`);
+      const response = await axios.get(`${apiEndpoint}/getgamehistory/${username}`);
 
-    // Ordenar la lista de historial de partidas por fecha (de más reciente a más antigua)
-    const sortedHistory = response.data.sort((a, b) => new Date(b.date) - new Date(a.date));
-
-    setGameHistory(sortedHistory);
-
-      console.log("el historial actual es  "+gameHistory);
+      // Ordenar la lista de historial de partidas por fecha (de más reciente a más antigua)
+      const sortedHistory = response.data.sort((a, b) => new Date(b.date) - new Date(a.date));
 
+      setGameHistory(sortedHistory);
     } catch (error) {
       console.error('Error:', error);
     }
   };
 
-  const  handlePreviousPage = async () => {
-    let path= '/MainPage';
-    navigate(path); 
-  }
+  const handlePreviousPage = async () => {
+    let path = '/MainPage';
+    navigate(path);
+  };
 
+  const toggleRow = (index) => {
+    const newExpandedRows = [...expandedRows];
+    if (newExpandedRows.includes(index)) {
+      // Si la fila ya está expandida, la contraemos
+      newExpandedRows.splice(newExpandedRows.indexOf(index), 1);
+    } else {
+      // Si la fila no está expandida, la expandimos
+      newExpandedRows.push(index);
+    }
+    setExpandedRows(newExpandedRows);
+  };
 
   return (
     <Container component="main" maxWidth="md" sx={{ marginTop: 4 }}>
-      <Button variant="contained" color="primary" onClick={handlePreviousPage}> 
-          Página anterior
-        </Button>
-     
+      <Button variant="contained" color="primary" onClick={handlePreviousPage}>
+        Página anterior
+      </Button>
+
       <Button variant="contained" color="primary" onClick={handleLoadHistory}>
         Cargar historial de partidas
       </Button>
@@ -56,9 +64,9 @@ const HistoricalUserData = () => {
             </tr>
           </thead>
           <tbody>
-            {gameHistory.map((game) => (
+            {gameHistory.map((game, index) => (
               <React.Fragment key={game.id}>
-                <tr>
+                <tr onClick={() => toggleRow(index)}>
                   <td>{game.date}</td>
                   <td>{game.duration}</td>
                   <td>{game.percentage}%</td>
@@ -66,10 +74,10 @@ const HistoricalUserData = () => {
                   <td>{game.correctAnswers}</td>
                   <td>{game.incorrectAnswers}</td>
                 </tr>
-                {game.questions && game.questions.map((question, index) => (
-                  <tr key={index}>
+                {expandedRows.includes(index) && game.questions && game.questions.map((question, qIndex) => (
+                  <tr key={qIndex}>
                     <td colSpan="6">
-                      <p>Pregunta {index + 1}: {question.question}</p>
+                      <p>Pregunta {qIndex + 1}: {question.question}</p>
                       <p>Respuesta Correcta: {question.correctAnswer}</p>
                       <p>Respuesta del Usuario: {question.userAnswer}</p>
                       <p>La respuesta fue: {question.correctAnswer === question.userAnswer ? 'Correcta' : 'Incorrecta'}</p>
@@ -83,7 +91,7 @@ const HistoricalUserData = () => {
       </div>
     </Container>
   );
-  
+
 };
 
 export default HistoricalUserData;

From a3bb07f88fee7d1b21f47fc359c7561fb29c18a2 Mon Sep 17 00:00:00 2001
From: Raymond Debasa Peralta <UO290054@uniovi.es>
Date: Mon, 15 Apr 2024 11:18:41 +0200
Subject: [PATCH 2/3] LogOut terminado

---
 webapp/src/components/Navbar.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/Navbar.js b/webapp/src/components/Navbar.js
index 661a54dd..013ab731 100644
--- a/webapp/src/components/Navbar.js
+++ b/webapp/src/components/Navbar.js
@@ -1,14 +1,20 @@
 import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link ,useNavigate} from 'react-router-dom';
 import './Navbar.css';
 
 const Navbar = () => {
   const [historialDropdownOpen, setHistorialDropdownOpen] = useState(false);
-
+  const navigate = useNavigate();
   const toggleHistorialDropdown = () => {
     setHistorialDropdownOpen(!historialDropdownOpen);
   };
 
+  const handleLogout = () => {
+    localStorage.removeItem('username');
+    navigate("/"); // Redirige a la página de inicio de sesión
+  };
+  
+
   return (
     <nav className="navbar navbar-expand-lg">
       <div className="container">
@@ -36,6 +42,10 @@ const Navbar = () => {
             <li className="nav-item">
               <Link className="nav-link" to="/RegisteredUsers">Usuarios registrados</Link>
             </li>
+            <li className="nav-item">
+                <button className="nav-link btn btn-link" onClick={handleLogout}>Logout</button>
+            </li>
+
           </ul>
         </div>
       </div>

From 04962bd5a3561332a9aeb31c2d3c215d013c4bb1 Mon Sep 17 00:00:00 2001
From: Raymond Debasa Peralta <UO290054@uniovi.es>
Date: Mon, 15 Apr 2024 11:55:44 +0200
Subject: [PATCH 3/3] ScoreBoard imlementado

---
 gatewayservice/gateway-service.js             |  8 +++
 questions/retrieveservice/retrieve-service.js | 39 ++++++++++++
 webapp/src/components/Navbar.js               |  3 +
 webapp/src/components/ScoreBoard.js           | 59 +++++++++++++++++++
 webapp/src/index.js                           |  2 +
 5 files changed, 111 insertions(+)
 create mode 100644 webapp/src/components/ScoreBoard.js

diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js
index 4c82eac9..0a6a749f 100644
--- a/gatewayservice/gateway-service.js
+++ b/gatewayservice/gateway-service.js
@@ -66,6 +66,14 @@ app.get('/getgamehistory/:username', async (req, res) => {
     res.status(error.response.status).json({ error: error.response.data.error });
   }
 });
+app.get('/getScoreBoard', async (req, res) => {
+  try {
+    const userResponse = await axios.get(`${retrieveServiceUrl}/getScoreBoard`);
+    res.json(userResponse.data);
+  } catch (error) {
+    res.status(error.response.status).json({ error: error.response.data.error });
+  }
+});
 
 
 
diff --git a/questions/retrieveservice/retrieve-service.js b/questions/retrieveservice/retrieve-service.js
index c0b233f4..56bd9af3 100644
--- a/questions/retrieveservice/retrieve-service.js
+++ b/questions/retrieveservice/retrieve-service.js
@@ -79,6 +79,45 @@ app.get('/getgamehistory/:username', async (req, res) => {
       });
   }
 });
+app.get('/getScoreBoard', async (req, res) => {
+  try {
+    // Obtener todas las partidas
+    const games = await Game.find({});
+    
+    // Objeto para almacenar el scoreboard
+    const scoreboard = {};
+
+    // Calcular el scoreboard para cada usuario
+    games.forEach(game => {
+      if (!scoreboard[game.username]) {
+        scoreboard[game.username] = {
+          username: game.username,
+          totalCorrect: 0,
+          totalIncorrect: 0,
+          points: 0
+        };
+      }
+
+      // Sumar el número total de preguntas acertadas y falladas
+      scoreboard[game.username].totalCorrect += game.correctAnswers;
+      scoreboard[game.username].totalIncorrect += game.incorrectAnswers;
+
+      // Calcular los puntos totales
+      scoreboard[game.username].points += (game.correctAnswers * 15) - (game.incorrectAnswers * 5);
+    });
+
+    // Convertir el objeto de scoreboard en un array de objetos
+    const scoreboardArray = Object.values(scoreboard);
+
+    // Enviar la respuesta con el scoreboard
+    res.json(scoreboardArray);
+  } catch (error) {
+    res.status(400).json({
+      error: error.message
+    });
+  }
+});
+
 
 const server = app.listen(port, () => {
   console.log(`Creation Service listening at http://localhost:${port}`);
diff --git a/webapp/src/components/Navbar.js b/webapp/src/components/Navbar.js
index 013ab731..280766c4 100644
--- a/webapp/src/components/Navbar.js
+++ b/webapp/src/components/Navbar.js
@@ -42,6 +42,9 @@ const Navbar = () => {
             <li className="nav-item">
               <Link className="nav-link" to="/RegisteredUsers">Usuarios registrados</Link>
             </li>
+            <li className="nav-item">
+              <Link className="nav-link" to="/ScoreBoard">ScoreBoard</Link>
+            </li>
             <li className="nav-item">
                 <button className="nav-link btn btn-link" onClick={handleLogout}>Logout</button>
             </li>
diff --git a/webapp/src/components/ScoreBoard.js b/webapp/src/components/ScoreBoard.js
new file mode 100644
index 00000000..5c9c4042
--- /dev/null
+++ b/webapp/src/components/ScoreBoard.js
@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+import { Container, Button } from '@mui/material';
+
+const ScoreBoard = () => {
+  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+  const navigate = useNavigate();
+  const [scoreboard, setScoreboard] = useState([]);
+
+  useEffect(() => {
+    loadScoreboard();
+  }, []);
+
+  const loadScoreboard = async () => {
+    try {
+      const response = await axios.get(`${apiEndpoint}/getScoreBoard`);
+      setScoreboard(response.data);
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+  const handlePreviousPage = async () => {
+    let path = '/MainPage';
+    navigate(path);
+  };
+  return (
+    <Container component="main" maxWidth="md" sx={{ marginTop: 4 }}>
+      <Button variant="contained" color="primary" onClick={handlePreviousPage}> 
+          Página anterior
+        </Button>
+      <div>
+        <h2>Tabla de Puntuaciones</h2>
+        <table>
+          <thead>
+            <tr>
+              <th>Usuario</th>
+              <th>Preguntas Totales Acertadas</th>
+              <th>Preguntas Totales Falladas</th>
+              <th>Puntos</th>
+            </tr>
+          </thead>
+          <tbody>
+            {scoreboard.map((user, index) => (
+              <tr key={index}>
+                <td>{user.username}</td>
+                <td>{user.totalCorrect}</td>
+                <td>{user.totalIncorrect}</td>
+                <td>{user.points}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </Container>
+  );
+};
+
+export default ScoreBoard;
diff --git a/webapp/src/index.js b/webapp/src/index.js
index b3b8cc0f..b2d639f9 100644
--- a/webapp/src/index.js
+++ b/webapp/src/index.js
@@ -8,6 +8,7 @@ import HistoricalData from './components/HistoricalData';
 import MainPage from './components/MainPage';
 import HistoricalUserData from './components/HistoricalUserData';
 import RegisteredUsers from './components/RegisteredUsers';
+import ScoreBoard from './components/ScoreBoard';
 
 import './index.css';
 import 'animate.css';
@@ -26,6 +27,7 @@ root.render(
         <Route path="/historicaldata" element={<HistoricalData />}> </Route>
         <Route path="/historicalUserdata" element={<HistoricalUserData />}> </Route>
         <Route path="/RegisteredUsers" element={<RegisteredUsers />}> </Route>
+        <Route path="/ScoreBoard" element={<ScoreBoard />}> </Route>
       </Routes>
     </Router>
   </React.StrictMode>