feat: add objectives and rankings on home page

back/index.js

@@ -19,6 +19,7 @@ app.listen(process.env.REACT_APP_SERVER_PORT, () => {
   console.log(`App server now listening on port ${process.env.REACT_APP_SERVER_PORT}`);
 });
 
+//Get data for team ranking
 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 ORDER BY score DESC;`, (err, results) => {
     if (err) {
@@ -29,6 +30,7 @@ app.get('/classement_par_equipes', (req, res) => {
   });
 });
 
+//Get data for individual ranking
 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 ORDER BY score DESC;`, (err, results) => {
     if (err) {
@@ -38,3 +40,14 @@ app.get('/classement_individuel', (req, res) => {
     }
   });
 });
+
+//Get data about goals
+app.get('/objectifs', (req, res) => {
+  pool.query(`SELECT name,description,value,coef,realise FROM Objectif CROSS JOIN (SELECT SUM(score) as realise FROM Score) AS Realise ORDER BY value DESC;`, (err, results) => {
+    if (err) {
+      return res.send(err);
+    } else {
+      return res.send(results);
+    }
+  });
+});

front/src/app/accueil/Accueil.js

 import React from 'react';
 //import { Link } from 'react-router-dom';
-import { TableauClassementEquipe } from '../classementEquipe/TableauClassementEquipe';
-import { TableauClassementIndividuel } from '../classementIndividuel/TableauClassementIndividuel';
+import Objectifs from './objectifs/Objectifs';
+import Classements from './Classements';
+
 
 export default () => (
   <div>
-  <h1>Classement par équipe</h1>
-  <TableauClassementEquipe/>
-  <h1>Classement individuel</h1>
-  <TableauClassementIndividuel/>
+  <Objectifs />
+  <Classements />
   </div>
 );

front/src/app/accueil/Classements.js

+import React from 'react';
+//import { Link } from 'react-router-dom';
+import { TableauClassementEquipe } from '../classementEquipe/TableauClassementEquipe';
+import { TableauClassementIndividuel } from '../classementIndividuel/TableauClassementIndividuel';
+
+export default () => (
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <h1>Classement par équipe</h1>
+        <TableauClassementEquipe/>
+      </div>
+      <div class="col">
+        <h1>Classement individuel</h1>
+        <TableauClassementIndividuel/>
+      </div>
+    </div>
+</div>
+);

front/src/app/accueil/objectifs/Objectifs.js

+import React from 'react';
+import { TableauObjectifs } from './TableauObjectifs';
+
+export default () => (
+  <div class="jumbotron jumbotron-fluid">
+    <div class="container">
+    <div class="row">
+      <div class="col">
+        <h1 class="display-4">Objectifs</h1>
+        <p class="lead">Avancement des différents objectifs :</p>
+      </div>
+      <div class="col">
+        <TableauObjectifs/>
+      </div>
+    </div>
+    </div>
+  </div>
+);

front/src/app/accueil/objectifs/TableauObjectifs.js

+import React, { useState } from 'react';
+import axios from 'axios';
+
+
+export function TableauObjectifs(){
+  var [objectifs,setObjectifs] = useState([]);
+  axios.get('http://localhost:8000/objectifs').then((response) => setObjectifs(response.data))
+  return(
+    <table class="table">
+      <thead class="thead-light">
+        <tr>
+          <th scope="col">Nom</th>
+          <th scope="col">Description</th>
+          <th scope="col">Objectif</th>
+          <th scope="col">Somme visée</th>
+          <th scope="col">Réalisé</th>
+          <th scope="col">Somme récoltée</th>
+        </tr>
+      </thead>
+      <tbody>
+        {objectifs.map((item) =>
+          <tr>
+            <th scope="row">{item.name}</th>
+            <td>{item.description}</td>
+            <td>{item.value}</td>
+            <td>{item.value*item.coef} €</td>
+            <td>{item.realise}</td>
+            <td>{item.realise*item.coef} €</td>
+          </tr>
+        )}
+      </tbody>
+    </table>
+  )
+};

front/src/app/administration/GestionObjectifs.js

+import React from 'react';
+//import { Link } from 'react-router-dom';
+
+export default () => (
+  <div>Gestion des objectifs</div>
+);

front/src/app/classementIndividuel/TableauClassementIndividuel.js

@@ -3,8 +3,8 @@ import axios from 'axios';
 
 
 export function TableauClassementIndividuel(){
-  var [equipes,setEquipes] = useState([]);
-  axios.get('http://localhost:8000/classement_individuel').then((response) => setEquipes(response.data))
+  var [participants,setParticipants] = useState([]);
+  axios.get('http://localhost:8000/classement_individuel').then((response) => setParticipants(response.data))
   return(
     <table class="table">
       <thead class="thead-light">
@@ -16,7 +16,7 @@ export function TableauClassementIndividuel(){
         </tr>
       </thead>
       <tbody>
-        {equipes.map((item) =>
+        {participants.map((item) =>
           <tr>
             <th scope="row">{item.name}</th>
             <td>{item.score}</td>

front/src/app/navbar/Navbar.js

@@ -18,6 +18,7 @@ export default () => (
         <NavDropdown.Item href="/admin/equipes">Gestion des équipes</NavDropdown.Item>
         <NavDropdown.Item href="/admin/participants">Gestion des participants</NavDropdown.Item>
         <NavDropdown.Item href="/admin/admins">Gestion des administrateurs</NavDropdown.Item>
+        <NavDropdown.Item href="/admin/objectifs">Gestion des objectifs</NavDropdown.Item>
       </NavDropdown>
     </Nav>
   </Navbar.Collapse>

front/src/index.js

@@ -10,6 +10,7 @@ import SaisieScore from './app/administration/SaisieScore';
 import GestionEquipes from './app/administration/GestionEquipes';
 import GestionParticipants from './app/administration/GestionParticipants';
 import GestionAdministrateurs from './app/administration/GestionAdministrateurs';
+import GestionObjectifs from './app/administration/GestionObjectifs';
 
 import './index.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -26,6 +27,7 @@ ReactDOM.render(
         <Route path="/admin/equipes" component={GestionEquipes} />
         <Route path="/admin/participants" component={GestionParticipants} />
         <Route path="/admin/admins" component={GestionAdministrateurs} />
+        <Route path="/admin/objectifs" component={GestionObjectifs} />
       </div>
   </Router>,
   document.getElementById('root')