feat: add classements par équipe et individuel

back/index.js

@@ -19,10 +19,18 @@ app.listen(process.env.REACT_APP_SERVER_PORT, () => {
   console.log(`App server now listening on port ${process.env.REACT_APP_SERVER_PORT}`);
 });
 
-app.get('/test', (req, res) => {
-  const { table } = 'Equipe';
+app.get('/classement_par_equipes', (req, res) => {
+  pool.query(`SELECT Equipe.name,SUM(score) AS score,COUNT(participantId) AS nbParticipant,COUNT(score) AS nbScores FROM Score JOIN Equipe ON Equipe.id=Score.equipeId GROUP BY equipeId;`, (err, results) => {
+    if (err) {
+      return res.send(err);
+    } else {
+      return res.send(results);
+    }
+  });
+});
 
-  pool.query(`select * from ${table}`, (err, results) => {
+app.get('/classement_individuel', (req, res) => {
+  pool.query(`SELECT Participant.name,SUM(score) AS score,COUNT(equipeId) AS nbEquipes,COUNT(score) AS nbScores FROM Score JOIN Participant ON Participant.id=Score.participantId GROUP BY participantId;`, (err, results) => {
     if (err) {
       return res.send(err);
     } else {

front/src/app/accueil/Accueil.js

 import React from 'react';
 //import { Link } from 'react-router-dom';
-import axios from 'axios';
-
-function callServer() {
-  axios.get('http://localhost:8000/test').then((response) => {
-    console.log(response.data);
-  });
-}
 
 export default () => (
   <div>
   Accueil
-  {callServer()}
   </div>
 );

front/src/app/classementEquipe/ClassementEquipe.js

 import React from 'react';
 //import { Link } from 'react-router-dom';
+import { TableauClassementEquipes } from './TableauClassementEquipes';
 
 export default () => (
-  <div>Classement par équipe</div>
+  <div>
+  <h1>Classement par équipe</h1>
+  <TableauClassementEquipes/>
+  </div>
 );

front/src/app/classementEquipe/TableauClassementEquipes.js

+import React, { useState } from 'react';
+import axios from 'axios';
+
+
+export function TableauClassementEquipes(){
+  var [equipes,setEquipes] = useState([]);
+  axios.get('http://localhost:8000/classement_par_equipes').then((response) => setEquipes(response.data))
+  return(
+    <table class="table">
+      <thead class="thead-light">
+        <tr>
+          <th scope="col">Equipe</th>
+          <th scope="col">Score total</th>
+          <th scope="col">Nombre de participants</th>
+          <th scope="col">Nombre de scores saisis</th>
+        </tr>
+      </thead>
+      <tbody>
+        {equipes.map((item) =>
+          <tr>
+            <th scope="row">{item.name}</th>
+            <td>{item.score}</td>
+            <td>{item.nbParticipant}</td>
+            <td>{item.nbScores}</td>
+          </tr>
+        )}
+      </tbody>
+    </table>
+  )
+};

front/src/app/classementIndividuel/ClassementIndividuel.js

 import React from 'react';
 //import { Link } from 'react-router-dom';
+import { TableauClassementIndividuel } from './TableauClassementIndividuel';
 
 export default () => (
-  <div>Classement individuel</div>
+  <div>
+  <h1>Classement individuel</h1>
+  <TableauClassementIndividuel/>
+  </div>
 );

front/src/app/classementIndividuel/TableauClassementIndividuel.js

+import React, { useState } from 'react';
+import axios from 'axios';
+
+
+export function TableauClassementIndividuel(){
+  var [equipes,setEquipes] = useState([]);
+  axios.get('http://localhost:8000/classement_individuel').then((response) => setEquipes(response.data))
+  return(
+    <table class="table">
+      <thead class="thead-light">
+        <tr>
+          <th scope="col">Equipe</th>
+          <th scope="col">Score total</th>
+          <th scope="col">Nombre équipes</th>
+          <th scope="col">Nombre de scores saisis</th>
+        </tr>
+      </thead>
+      <tbody>
+        {equipes.map((item) =>
+          <tr>
+            <th scope="row">{item.name}</th>
+            <td>{item.score}</td>
+            <td>{item.nbEquipes}</td>
+            <td>{item.nbScores}</td>
+          </tr>
+        )}
+      </tbody>
+    </table>
+  )
+};

front/src/index.js

-import React from 'react';
+import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
 import Navbar from './app/navbar/Navbar';