Add staff components

back/src/controller.js

@@ -4,5 +4,6 @@ const participant = require('./controllers/participant.controller');
 const objectifs = require('./controllers/objectifs.controller');
 const administrateur = require('./controllers/administrateur.controller');
 const evenement = require('./controllers/evenement.controller');
+const staffeurs = require('./controllers/staffeurs.controller');
 
-module.exports = {scores, equipe, participant, objectifs, administrateur, evenement}
+module.exports = {scores, equipe, participant, objectifs, administrateur, evenement, staffeurs}

back/src/controllers/staffeurs.controller.js

+const mysql = require('mysql');
+const fetch = require('node-fetch');
+var secrets = require('../secrets.js');
+var dbhost = secrets.dbhost;
+var dbuser = secrets.dbuser;
+var dbpassword = secrets.dbpassword;
+var dbdatabase = secrets.dbdatabase;
+
+const dbConfig = {
+  host: dbhost,
+  user: dbuser,
+  password: dbpassword,
+  database: dbdatabase
+};
+
+function getStaffeurs(req, res){
+  var con = mysql.createConnection(dbConfig);
+  var query = "SELECT id,login FROM Staffeurs WHERE deleted = 0 ORDER BY login ASC;"
+  con.connect();
+  con.query(query, (err, result) => {
+  if(err){
+      console.log(err)
+      return res.send({success: false})
+  }
+  return res.send(result)
+  });
+  con.end();
+}
+
+function addNewStaffeur(req, res){
+  var con = mysql.createConnection(dbConfig);
+  var query = "INSERT INTO `Staffeurs` (`login`) VALUES ('"+req.body.login+"');"
+  con.connect();
+  con.query(query, (err, result) => {
+  if(err){
+      console.log(err)
+      return res.send({success: false})
+  }
+  return res.send(result)
+  });
+  con.end();
+}
+
+function deleteStaffeur(req, res){
+  var con = mysql.createConnection(dbConfig);
+  var query = "UPDATE Staffeurs SET deleted = 1 WHERE id="+req.body.id+";"
+  con.connect();
+  con.query(query, (err, result) => {
+  if(err){
+      console.log(err)
+      return res.send({success: false})
+  }
+  return res.send(result)
+  });
+  con.end();
+}
+
+function getStaffeursLogins(req, res){
+  var con = mysql.createConnection(dbConfig);
+  var query = "SELECT login FROM Staffeurs WHERE deleted = 0;"
+  con.connect();
+  con.query(query, (err, result) => {
+  if(err){
+      console.log(err)
+      return res.send({success: false})
+  }
+  var data = result.map((item) => { return item.login });
+  return res.send(data)
+  });
+  con.end();
+}
+
+module.exports = {getStaffeurs, addNewStaffeur, deleteStaffeur, getStaffeursLogins}

back/src/routes/apiAdmin.js

@@ -36,5 +36,10 @@ router.post('/delete_evenement', controller.evenement.DeleteEvenement);
 router.get('/administrateurs', controller.administrateur.getAdministrateurs);
 router.get('/administrateurs/login', controller.administrateur.getAdminsLogins);
 
+router.post('/new_staffeur', controller.staffeurs.addNewStaffeur);
+router.post('/delete_staffeur', controller.staffeurs.deleteStaffeur);
+router.get('/staffeurs', controller.staffeurs.getStaffeurs);
+router.get('/staffeurs/login', controller.staffeurs.getStaffeursLogins);
+
 
 module.exports = router;

front_thomas/src/App.js

@@ -34,6 +34,7 @@ import { DeleteObjectif } from './components/Login/Gestion/gestionObjectifs/Dele
 import { AddAdministrateurForm } from './components/Login/Gestion/gestionAdministrateurs/NouvelAdministrateur';
 import { UpdateAdministrateur } from './components/Login/Gestion/gestionAdministrateurs/EditAdministrateur';
 import { DeleteAdministrateur } from './components/Login/Gestion/gestionAdministrateurs/DeleteAdministrateur';
+import { DeleteStaffeur } from './components/Login/Gestion/gestionStaffeurs/DeleteStaffeur';
 import { AddEvenementForm } from './components/Login/Gestion/gestionEvenements/NouvelEvenement';
 import { AfficheEvenement, UpdateEvenementName, UpdateEvenementStartDate, UpdateEvenementEndDate } from './components/Login/Gestion/gestionEvenements/AfficheEvenement';
 import { DeleteEvenement } from './components/Login/Gestion/gestionEvenements/DeleteEvenement';
@@ -96,6 +97,7 @@ function App() {
         {/*<Route path="/Gestion/admins/nouveau" component={AddAdministrateurForm} />*/}
         <Route path="/admin/admins/edit/:id" component={UpdateAdministrateur} />
         <Route path="/admin/admins/delete/:id" component={DeleteAdministrateur} />
+        <Route path="/admin/staffeurs/delete/:id" component={DeleteStaffeur} />
     {/*<Route path="/admin/evenements/nouveau" component={AddEvenementForm} />*/}
         <Route path="/admin/evenements/view/:id" component={AfficheEvenement} />
         <Route path="/admin/evenements/edit/name/:id" component={UpdateEvenementName} />

front_thomas/src/components/Login/Gestion.js

@@ -8,6 +8,7 @@ import GestionEquipes from "./Gestion/GestionEquipes";
 //import GestionObjectifs from "./Gestion/GestionObjectifs";
 import GestionParticipants from "./Gestion/GestionParticipants";
 import GestionScore from "./Gestion/GestionScore";
+import GestionStaffeurs from "./Gestion/GestionStaffeurs";
 
 import { MDBContainer, MDBRow, MDBCol, MDBTabPane, MDBTabContent, MDBNav, MDBNavItem, MDBNavLink, MDBIcon } from "mdbreact";
 
@@ -66,6 +67,11 @@ class Pills extends Component {
                   <MDBIcon icon="chart-line" className="mr-1" /> Scores
                   </MDBNavLink>
                 </MDBNavItem>
+                <MDBNavItem>
+                  <MDBNavLink link to="#" active={this.state.items["default"] === "7"} onClick={this.togglePills("default", "7")} >
+                  <MDBIcon icon="user-edit" className="mr-1" /> Staffeurs
+                  </MDBNavLink>
+                </MDBNavItem>
                 </MDBNav>
               <MDBTabContent activeItem={this.state.items["default"]}>
                 <MDBTabPane tabId="1">
@@ -86,6 +92,9 @@ class Pills extends Component {
                 <MDBTabPane tabId="6">
                   <GestionScore />
                 </MDBTabPane>
+                <MDBTabPane tabId="7">
+                  <GestionScore />
+                </MDBTabPane>
               </MDBTabContent>
             </MDBCol>
           </MDBRow>

front_thomas/src/components/Login/Gestion/GestionStaffeurs.js

+import React from 'react';
+import { TableauStaffeursAdmin } from './gestionStaffeurs/TableauStaffeursAdmin';
+import { useIsAdmin } from '../../../hooks/authTools';
+import BtnNouvauStaffeur from "./gestionStaffeurs/ModalNouveauStaffeur";
+import GestionAdministrateurs from './GestionAdministrateurs';
+
+const GestionStaffeurs =  function(){
+
+  if (useIsAdmin() === false){
+    return <div>Oups, accès réservé aux administrateurs...</div>
+  }
+
+  return (
+    <div className="container">
+      <div className="row">
+        <div className="col">
+          <h1>Gestion des staffeurs</h1>
+        </div>
+        <div className="col-3">
+          {/*<a className="btn btn-secondary" href="/Gestion/admins/nouveau" role="button">Nouvel administrateur</a>*/}
+          <BtnNouvauStaffeur />
+        </div>
+      </div>
+      <div className="row">
+        <div className="col">
+          <TableauStaffeursAdmin />
+        </div>
+      </div>
+    </div>
+)}
+
+export default GestionStaffeurs;

front_thomas/src/components/Login/Gestion/gestionStaffeurs/DeleteStaffeur.js

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

front_thomas/src/components/Login/Gestion/gestionStaffeurs/ModalNouveauStaffeur.js

+import React, { Component } from 'react';
+import { MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBIcon } from 'mdbreact';
+import {AddStaffeurForm} from "./NouveauStaffeur"
+
+class ModalPage extends Component {
+state = {
+  modal: false
+}
+
+toggle = () => {
+  this.setState({
+    modal: !this.state.modal
+  });
+}
+
+render() {
+  return (
+    <MDBContainer>
+      <MDBBtn onClick={this.toggle}><MDBIcon icon="plus" className="mr-1" /> Ajouter</MDBBtn>
+      <MDBModal isOpen={this.state.modal} toggle={this.toggle}>
+        <MDBModalHeader toggle={this.toggle}>Ajouter un staffeur</MDBModalHeader>
+        <MDBModalBody>
+          <AddAdministrateurForm />
+        </MDBModalBody>
+      </MDBModal>
+    </MDBContainer>
+    );
+  }
+}
+
+export default ModalPage;
\ No newline at end of file

front_thomas/src/components/Login/Gestion/gestionStaffeurs/NouveauStaffeur.js

+import React from 'react';
+import axios from 'axios';
+import { useForm } from 'react-hook-form';
+
+export function AddAStaffeurForm(){
+
+  const addStaffeur = (props) => {
+    axios.post('/api/admin/new_staffeur',
+    {
+        login: props.login
+    })
+    .then(() => {
+      alert("Staffeur ajouté");
+      window.location='/Gestion';
+    }, (error) => {
+      console.log(error);
+    });
+  };
+
+  const { register, handleSubmit } = useForm();
+  const onSubmit = data => {addStaffeur(data)}
+  return(
+  <div>
+    {/*<a className="btn btn-secondary" href="/Gestion" role="button">Retour</a>*/}
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="form-group">
+        <label htmlFor="loginInput">Nom</label>
+        <input type="text" className="form-control" id="loginInput" name="login" ref={register} placeholder="2019xxxxxy" required/>
+      </div>
+      <button type="submit" className="btn btn-secondary">Ajouter</button>
+    </form>
+  </div>
+  )
+}

front_thomas/src/components/Login/Gestion/gestionStaffeurs/TableauStaffeursAdmin.js

+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+export function TableauStaffeursAdmin(){
+  var [staffeurs,setStaffeurs] = useState([]);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      axios.get('/api/admin/staffeurs').then((response) => setStaffeurs(response.data));
+    }, 500);
+    return () => clearInterval(interval);
+  }, []);
+
+  return(
+    <table className="table">
+      <thead className="thead-light">
+        <tr>
+          <th scope="col">Login</th>
+          {/*<th scope="col">Modifier</th>*/}
+          <th scope="col">Supprimer</th>
+        </tr>
+      </thead>
+      <tbody>
+        {staffeurs.map((item) => {
+          var deleteUrl='/admin/staffeurs/delete/'+item.id;
+          return (
+          <tr key={item.id}>
+            <th scope="row">{item.login}</th>
+            {/*<td><a className="btn btn-secondary" href={editUrl} role="button">Modifier</a></td>*/}
+            <td><a className="btn btn-danger" href={deleteUrl} role="button">Supprimer</a></td>
+          </tr>
+          )
+        })}
+      </tbody>
+    </table>
+  )
+}