Ajout page MonHumaviron

back/src/controllers/scores.controller.js

@@ -15,7 +15,7 @@ const dbConfig = {
 
 function getAdminScores(req, res){
   var con = mysql.createConnection(dbConfig);
-  var query = "SELECT Score.id AS id, score, Part.name AS participant, Equi.name AS equipe, createdAt as date ,Part.id as partid ,Equi.id as equid FROM Score LEFT JOIN (SELECT * FROM Participant WHERE deleted = 0) AS Part ON Part.id=Score.ParticipantId LEFT JOIN (SELECT * FROM Equipe WHERE deleted = 0) AS Equi ON Score.equipeId=Equi.id WHERE Score.deleted = 0 ORDER BY date DESC;"
+  var query = "SELECT Score.id, score, Part.name AS participant, Equi.name AS equipe, createdAt as date ,Part.id as partid ,Equi.id as equid FROM Score LEFT JOIN (SELECT * FROM Participant WHERE deleted = 0) AS Part ON Part.id=Score.ParticipantId LEFT JOIN (SELECT * FROM Equipe WHERE deleted = 0) AS Equi ON Score.equipeId=Equi.id WHERE Score.deleted = 0 ORDER BY date DESC;"
   con.connect();
   con.query(query, (err, result) => {
   if(err){

front_thomas/src/App.js

@@ -10,6 +10,7 @@ import Leaderboard from './components/LeaderboardSB';
 import Navbar from "./components/Navbar";
 import Formulaire from "./components/Login/Kilometrage";
 import Gestion from "./components/Login/Gestion";
+import MonHumaviron from "./components/Login/MonHumaviron";
 
 function App() {
   return (
@@ -35,8 +36,8 @@ function App() {
       <Route exact path="/Gestion">
         <Gestion />
       </Route>
-      <Route exact path="/MonHumaviron/:id">
-        <Gestion />
+      <Route exact path="/MonHumaviron">
+        <MonHumaviron />
       </Route>
     </Switch>
   </Router>

front_thomas/src/components/Login/Gestion.js

-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { TableauScoresAdmin } from './gestionScore/TableauScoresAdmin';
 import { MDBDataTableV5, MDBContainer, MDBBtn, MDBTable, MDBTableHead, MDBTableBody, MDBDataTable, MDBIcon } from 'mdbreact';
 
-export default function Basic() {
-  const [datatable, setDatatable] = React.useState({
+export default function GestionScore() {
+
+  return (
+    <div className="container">
+      <div className="row">
+        <div className="col">
+          <h1>Gestion des scores</h1>
+        </div>
+        <div className="col-4">
+        </div>
+        <div className="col">
+          <a className="btn btn-secondary" href="/admin/scores/nouveau" role="button">Saisie nouveau score</a>
+        </div>
+      </div>
+      <div className="row">
+        <div className="col">
+          <TableauScoresAdmin />
+        </div>
+      </div>
+    </div>
+)
+
+  /*const [datatable, setDatatable] = React.useState({
     columns: [
       {
         label: 'Heure',
@@ -511,7 +534,7 @@ export default function Basic() {
   return (
     <>  
     <MDBContainer className="mt-4">
-        {/*<MDBDataTableV5 hover entriesOptions={[5, 20, 25, 50, 100]} entries={25} pagesAmount={4} data={datatable} />*/}
+        {/*<MDBDataTableV5 hover entriesOptions={[5, 20, 25, 50, 100]} entries={25} pagesAmount={4} data={datatable} />*//*}
         <MDBTable btn hover responsive small>
             <MDBTableHead columns={datatable.columns} />
             <MDBTableBody rows={datatable.rows} />
@@ -524,4 +547,4 @@ export default function Basic() {
     />
     </>
       );
-}
\ No newline at end of file
+  */}
\ No newline at end of file

front_thomas/src/components/Login/MonHumaviron.js

+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import ListeScores from "./MonHumaviron/ListeScores";
+import { MDBDataTableV5, MDBContainer, MDBBtn, MDBTable, MDBTableHead, MDBTableBody, MDBDataTable, MDBIcon, MDBListGroup, MDBBadge, MDBListGroupItem, MDBRow, MDBCol } from 'mdbreact';
+
+export default function Partenaires () {
+    return (
+        <MDBContainer className="mt-4">
+            
+        <h2><MDBIcon icon="address-card" className="mr-1" /> Mon Humaviron</h2>
+        <br/>
+        <MDBRow>
+            <MDBCol md="4">
+        <MDBListGroup style={{ width: "22rem" }}>
+        <MDBListGroupItem active><MDBIcon icon="heart" className="mr-1" /><strong>&nbsp; Participation caritative</strong></MDBListGroupItem>    
+            <MDBListGroupItem className="d-flex justify-content-between align-items-center"><MDBIcon icon="tachometer-alt" className="mr-1" /> Distance totale ramée<MDBBadge color="primary"
+                pill>560 KM</MDBBadge>
+            </MDBListGroupItem>
+            <MDBListGroupItem className="d-flex justify-content-between align-items-center"><MDBIcon icon="hand-holding-heart" className="mr-1" /> Dons collectés<MDBBadge
+                color="primary" pill>1500 €</MDBBadge>
+            </MDBListGroupItem>
+            </MDBListGroup>
+        <br /> 
+        <MDBListGroup style={{ width: "22rem" }}>
+        <MDBListGroupItem active><MDBIcon icon="chart-line" className="mr-1" /><strong>&nbsp;Statistiques personnelles</strong></MDBListGroupItem>    
+            <MDBListGroupItem className="d-flex justify-content-between align-items-center"><MDBIcon icon="trophy" className="mr-1" /> Classement individuel<MDBBadge color="primary"
+                pill>65e</MDBBadge>
+            </MDBListGroupItem>
+            <MDBListGroupItem className="d-flex justify-content-between align-items-center"><MDBIcon icon="clipboard-list" className="mr-1" /> Nombre de sessions<MDBBadge color="primary"
+                pill>10</MDBBadge>
+            </MDBListGroupItem>
+            <MDBListGroupItem className="d-flex justify-content-between align-items-center"><MDBIcon icon="angle-double-up" className="mr-1" /> Meilleure session<MDBBadge
+                color="primary" pill>20568 M</MDBBadge>
+            </MDBListGroupItem>
+            <MDBListGroupItem className="d-flex justify-content-between align-items-center"><MDBIcon icon="flag-checkered" className="mr-1" /> Distance moyenne par session<MDBBadge color="primary"
+                pill>4850 M</MDBBadge>
+            </MDBListGroupItem>
+            </MDBListGroup> 
+            </MDBCol>
+            <MDBCol md="8">
+                <ListeScores />
+            </MDBCol>
+            </MDBRow>
+            <MDBRow>
+                <br />
+                <p> </p>
+            </MDBRow>  
+        </MDBContainer>
+    );
+}
\ No newline at end of file

front_thomas/src/components/Login/MonHumaviron/ListeScores.js

+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { MDBDataTableV5 } from 'mdbreact';
+
+export default function ClassIndiv() {
+
+  var data = [];
+  var [participants,setParticipants] = useState([]);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      axios.get('/api/classement_individuel').then((response) => setParticipants(response.data));
+    }, 500);
+    return () => clearInterval(interval);
+  }, []);
+
+  function RefreshData() {
+    var i = 1;
+    participants.map((item) => 
+    data.push(
+      {
+        rank: i++,
+        nom: item.name,
+        assos: item.nbEquipes,
+        distance: item.score
+      },
+    ),
+  );
+  return({
+    columns: [
+      {
+        label: '# Session',
+        field: 'rank',
+        sort: 'disabled',
+        width: 100,
+      },
+      {
+        label: 'Heure',
+        field: 'nom',
+        width: 250,
+        sort: 'disabled',
+        attributes: {
+          'aria-controls': 'DataTable',
+          'aria-label': 'Association',
+        },
+      },
+      {
+        label: 'Association',
+        field: 'assos',
+        sort: 'disabled',
+        width: 100,
+      },
+      {
+        label: 'Distance (m)',
+        field: 'distance',
+        sort: 'disabled',
+        width: 100,
+      },
+    ],
+    rows: data})
+  }
+
+  return <MDBDataTableV5 hover striped entries={5} entriesOptions={[ 5, 10, 15 ]} info={false}  data={RefreshData()} searchLabel="Rechercher" responsiveLg />;
+}
\ No newline at end of file

front_thomas/src/components/Login/gestionScore/AfficheScore.js

+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { useForm } from 'react-hook-form';
+
+export function AfficheScore({ match }){
+
+  const { params: { id } } = match;
+
+  const [scores, setScores] = useState([]);
+  useEffect(() => {axios.get('/api/admin/admin_scores').then((response) => setScores(response.data))}, []);
+  const [currentScore, setCurrentScore] = useState({});
+  useEffect(() => {
+    scores.map(item => {
+      if (item.id==id) {setCurrentScore(item)}
+      return null;
+    })
+  });
+
+  var editScoreUrl='/admin/scores/edit/score/'+id;
+  var editEquipeUrl='/admin/scores/edit/equipe/'+id;
+  var editParticipantUrl='/admin/scores/edit/participant/'+id;
+  return(
+    <div>
+      <h1>Modification du score</h1>
+      <a className="btn btn-secondary" href="/admin/scores" role="button">Retour</a>
+      <table className="table">
+        <thead className="thead-light">
+          <tr>
+            <th scope="col">Champ</th>
+            <th scope="col">Valeur</th>
+            <th scope="col">Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row">Score</th>
+            <td>{currentScore.score}</td>
+            <td><a className="btn btn-secondary" href={editScoreUrl} role="button">Modifier</a></td>
+          </tr>
+          <tr>
+            <th scope="row">Equipe</th>
+            <td>{currentScore.equipe}</td>
+            <td><a className="btn btn-secondary" href={editEquipeUrl} role="button">Modifier</a></td>
+          </tr>
+          <tr>
+            <th scope="row">Participant</th>
+            <td>{currentScore.participant}</td>
+            <td><a className="btn btn-secondary" href={editParticipantUrl} role="button">Modifier</a></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export function UpdateScoreScore({ match }){
+
+  const { params: { id } } = match;
+
+  const editScore = (props) => {
+    axios.post('/api/admin/update_score/score',{id: props.id, score:props.score})
+    .then(() => {
+      alert('Score mis à jour');
+      window.location='/admin/scores/view/'+id;
+    }, (error) => {
+      console.log(error);
+    });
+  };
+
+  const { register, handleSubmit } = useForm();
+  const onSubmit = data => {editScore({id:id,score:data.score})}
+
+  const returnUrl = "/admin/scores/view/"+id;
+
+  return(
+    <div>
+      <a className="btn btn-secondary" href={returnUrl} role="button">Retour</a>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="form-group">
+          <label htmlFor="scoreInput">Score</label>
+          <input type="number" className="form-control" id="scoreInput" name="score" ref={register}/>
+        </div>
+        <button type="submit" className="btn btn-secondary">Modifier</button>
+      </form>
+    </div>
+  )
+
+}
+
+export function UpdateScoreEquipe({ match }){
+
+  const { params: { id } } = match;
+
+  const editEquipe = (props) => {
+    axios.post('/api/admin/update_score/equipe',{id: id, equipe:props.equipe})
+    .then(() => {
+      alert('Score mis à jour');
+      window.location='/admin/scores/view/'+id;
+    }, (error) => {
+      console.log(error);
+    });
+  };
+
+  const [equipes,setEquipes] = useState([]);
+  useEffect(() => {axios.get('/api/equipes').then((response) => setEquipes(response.data))}, []);
+
+  console.log(equipes);
+
+  const { register, handleSubmit } = useForm();
+  const onSubmit = data => {editEquipe(data)}
+
+  const returnUrl = "/admin/scores/view/"+id;
+
+  return(
+    <div>
+      <a className="btn btn-secondary" href={returnUrl} role="button">Retour</a>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="form-group">
+          <label htmlFor="equipeInput">Equipe</label>
+          <select className="form-control" id="equipeInput" name="equipe" ref={register}>
+            {equipes.map(item => (<option key={item.id} value={item.id}>{item.name}</option>))}
+          </select>
+        </div>
+        <button type="submit" className="btn btn-secondary">Modifier</button>
+      </form>
+    </div>
+  )
+
+}
+
+export function UpdateScoreParticipant({ match }){
+
+  const { params: { id } } = match;
+
+  const editParticipant = (props) => {
+    axios.post('/api/admin/update_score/participant',{id: id, participant:props.participant})
+    .then(() => {
+      alert('Score mis à jour');
+      window.location='/admin/scores/view/'+id;
+    }, (error) => {
+      console.log(error);
+    });
+  };
+
+  const [participants,setParticipants] = useState([]);
+  useEffect(() => {axios.get('/api/participants').then((response) => setParticipants(response.data))}, []);
+
+  const { register, handleSubmit } = useForm();
+  const onSubmit = data => {editParticipant(data)}
+
+  const returnUrl = "/admin/scores/view/"+id;
+
+  return(
+    <div>
+      <a className="btn btn-secondary" href={returnUrl} role="button">Retour</a>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="form-group">
+          <label htmlFor="participantInput">Equipe</label>
+          <select className="form-control" id="participantInput" name="participant" ref={register}>
+            {participants.map(item => (<option key={item.id} value={item.id}>{item.name}</option>))}
+          </select>
+        </div>
+        <button type="submit" className="btn btn-secondary">Modifier</button>
+      </form>
+    </div>
+  )
+
+}

front_thomas/src/components/Login/gestionScore/DeleteScore.js

+import React from 'react';
+import axios from 'axios';
+
+export function DeleteScore({ match }){
+
+  const { params: { id } } = match;
+
+  axios.post('/api/admin/delete_score',{id: id})
+  .then(() => {
+    alert('Score supprimé');
+    window.location='/admin/scores';
+  }, (error) => {
+    console.log(error);
+  });
+
+  return(
+    <div><h1>Suppression...</h1></div>
+  )
+
+}

front_thomas/src/components/Login/gestionScore/NouveauScore.js

+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { useForm } from 'react-hook-form';
+
+export function AddScoreForm(){
+
+  const addScore = (props) => {
+    axios.post('/api/admin/new_score',
+    {
+        score: props.score,
+        equipe: props.equipe,
+        participant: props.participant
+    })
+    .then(() => {
+      alert("Score ajouté");
+      window.location='/admin/scores';
+    }, (error) => {
+      console.log(error);
+    });
+  };
+
+
+  const [equipes,setEquipes] = useState([]);
+  const [participants,setParticipants] = useState([]);
+
+  useEffect(() => {axios.get('/api/equipes').then((response) => setEquipes(response.data))}, []);
+  useEffect(() => {axios.get('/api/participants').then((response) => setParticipants(response.data))}, []);
+
+  const { register, handleSubmit } = useForm();
+  const onSubmit = data => {addScore(data)}
+  return(
+  <div>
+    <a className="btn btn-secondary" href="/admin/scores" role="button">Retour</a>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="form-group">
+        <label htmlFor="scoreInput">Score</label>
+        <input type="number" className="form-control" id="scoreInput" name="score" ref={register} placeholder="1000" required/>
+      </div>
+      <div className="form-group">
+        <label htmlFor="participantInput">Participant</label>
+        <select className="form-control" id="participantInput" name="participant" ref={register} placeholder="Gérard">
+          {participants.map(item => (<option key={item.id} value={item.id}>{item.name}</option>))}
+        </select>
+      </div>
+      <div className="form-group">
+        <label htmlFor="equipeInput">Equipe</label>
+        <select className="form-control" id="equipeInput" name="equipe" ref={register} placeholder="ViaRézo">
+          {equipes.map(item => (<option key={item.id} value={item.id}>{item.name}</option>))}
+        </select>
+      </div>
+      <button type="submit" className="btn btn-secondary">Ajouter</button>
+    </form>
+  </div>
+  )
+}

front_thomas/src/components/Login/gestionScore/TableauScoresAdmin.js

+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+export function TableauScoresAdmin(){
+  var [scores,setScores] = useState([]);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      axios.get('/api/admin/admin_scores').then((response) => setScores(response.data));
+    }, 500);
+    return () => clearInterval(interval);
+  }, []);
+
+  return(
+    <table className="table">
+      <thead className="thead-light">
+        <tr>
+          <th scope="col">Date</th>
+          <th scope="col">Score</th>
+          <th scope="col">Participant</th>
+          <th scope="col">Equipe</th>
+          <th scope="col">Voir</th>
+          <th scope="col">Supprimer</th>
+        </tr>
+      </thead>
+      <tbody>
+        {scores.map((item) => {
+          var viewUrl='/admin/scores/view/'+item.id;
+          var deleteUrl='/admin/scores/delete/'+item.id;
+          return (
+          <tr key={item.id}>
+            <th scope="row">{item.date.split('T')[0]} - {item.date.split('T')[1].split('.')[0]}</th>
+            <td>{item.score}</td>
+            <td>{item.participant}</td>
+            <td>{item.equipe}</td>
+            <td><a className="btn btn-secondary" href={viewUrl} role="button">Voir</a></td>
+            <td><a className="btn btn-danger" href={deleteUrl} role="button">Delete</a></td>
+          </tr>
+          )
+        })}
+      </tbody>
+    </table>
+  )
+}