Ajout deuxième graphique + error restart password + insert event dans la base de donnée + récupération dans la base (error)

server-api/api.js

@@ -130,7 +130,22 @@ app.get('/Sale/Pie/:iduser/:month/:year', (req, res) => {
     const iduser = req.params.iduser;
     const month = req.params.month;
     const year = req.params.year;
-    let sql = 'SELECT DISTINCT SUM(s.amount) as total,cu.name FROM sales s,customers cu,contacts co WHERE co.iduser = ? AND co.idcustomer = cu.idcustomer AND cu.idcustomer = s.idcustomer AND ((s.month >= ? AND s.year = ?) OR s.year > ?) GROUP BY cu.name ORDER BY total DESC';
+    let sql = 'SELECT DISTINCT SUM(s.amount) as total,cu.name FROM sales s,customers cu,contacts co WHERE co.iduser = ? AND co.idcustomer = cu.idcustomer AND cu.idcustomer = s.idcustomer AND ((s.month >= ? AND s.year = ?) OR s.year > ?) GROUP BY cu.name ORDER BY total DESC LIMIT 10';
+
+    db.query(sql, [iduser,month,year,year], (err, result) => {
+        if (err) throw err;
+
+        console.log(result);
+        res.send(result);
+    });
+});
+
+app.get('/Sale/Line/:iduser/:month/:year', (req, res) => {
+    
+    const iduser = req.params.iduser;
+    const month = req.params.month;
+    const year = req.params.year;
+    let sql = 'SELECT DISTINCT SUM(s.amount) as total,s.year,s.month FROM sales s,customers cu,contacts co WHERE co.iduser = 41 AND co.idcustomer = cu.idcustomer AND cu.idcustomer = s.idcustomer AND ((s.month >= 12 AND s.year = 2021) OR s.year > 2021) GROUP BY s.year,s.month ORDER BY s.year,s.month';
 
     db.query(sql, [iduser,month,year,year], (err, result) => {
         if (err) throw err;
@@ -267,6 +282,46 @@ app.get('/Contact/AllWithCustomerName', (req, res) => {
     let sql = 'SELECT c.*, cu.name FROM contacts c, customers cu WHERE cu.idCustomer = c.idCustomer ORDER BY idcontact';
     db.query(sql, (err, result) => {
         if (err) throw err;
+        console.log(result);
+        res.send(result);
+    });
+});
+
+app.get('/Contact/:iduser', (req, res) => {
+
+    const iduser = req.params.iduser;
+
+    let sql = 'SELECT c.idcontact,c.firstname,c.lastname,cu.name FROM contacts c,customers cu WHERE cu.idcustomer = c.idcustomer AND c.iduser = ?';
+    db.query(sql,[iduser], (err, result) => {
+        if (err) throw err;
+        console.log(result);
+        res.send(result);
+    });
+});
+
+app.post('/Event/Add', (req, res) => {
+    
+    let form = req.body;
+    
+    console.log(form);
+    
+    const sql = `INSERT INTO events(date,starttime,endtime,comment,idusersend,iduserreceive,idcontact) VALUES ('${form.date}', '${form.starttime}', '${form.endtime}', '${form.comment}', '${form.idusersend}', '${form.iduserreceive}', '${form.idcontact}')`;
+     db.query(sql , (err, result) => { 
+        if (err) throw err;
+        console.log(result);
+        res.send('Post added...');
+    });
+});
+
+app.get('/Event/:iduser', (req, res) => {
+
+    const iduser = req.params.iduser;
+
+    let sql = 'SELECT * FROM events e where e.iduserreceive = ?';
+
+    db.query(sql,[iduser], (err, result) => {
+        if (err) throw err;
+
         console.log(result);
         res.send(result);
     });

src/pages/Analyse.js

@@ -2,7 +2,7 @@ import React, {useState,useEffect} from 'react';
 import axios from 'axios'
 import Chart from 'chart.js/auto'
 import NavigationDashboard from '../components/NavigationDashboard';
-import { Pie } from "react-chartjs-2";
+import { Pie,Line } from "react-chartjs-2";
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
 import { setDefaultLocale } from 'react-datepicker';
 import { private_excludeVariablesFromRoot } from '@mui/material';
@@ -22,6 +22,7 @@ const Analyse = () => {
     }    
 
     const [pieDatas, setPieDatas] = useState([]);
+    const [lineDatas, setLineDatas] = useState([]);
 
     useEffect(() => {
         const date = new Date();
@@ -67,6 +68,11 @@ const Analyse = () => {
         
             setPieDatas(response.data);
         });
+
+        const apiStringLine = '/Sale/Line/' + Session.get("idUser") + '/' + month + '/' + year;
+        api.get(apiStringLine).then((response) => {
+            setLineDatas(response.data);
+        });
     }, []);
 
     const data = {
@@ -102,13 +108,33 @@ const Analyse = () => {
         data.datasets[0].data[i] = pieDatas[i].total;
     }
 
+    const dataH = {
+        labels: [],
+        datasets: [
+                {
+                label: 'Sales',
+                fill: true,
+                data: [],
+                backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                borderColor:'rgba(255, 99, 132, 1)',
+                borderWidth: 1,
+                },
+            ],
+    };
+
+    for(let i = 0; i < lineDatas.length; i++)
+    {
+        console.log(lineDatas);
+        dataH.labels[i] = lineDatas[i].month +"/" +lineDatas[i].year;
+        dataH.datasets[0].data[i] = lineDatas[i].total;
+    }
+
     return (
         <body className={theme}>
 
             <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
 
             <div className="page_analyse">
-                {/* Create an analysis page */}
                 <div className="haut_de_page">
                     <h2 className="titre">Analyse</h2>
                     <div className="rechLogo">
@@ -129,10 +155,10 @@ const Analyse = () => {
                         </div>
                         <div className="Stat-2">
                             <div className="Stat-2_titre">
-                                <p>coucou2</p>
+                                <p>Courbe des ventes</p>
                             </div>
                             <div className="histogramme">
-                                coucou21
+                                <Line data={dataH}/>
                             </div>
                         </div>
                     </div>                       

src/pages/Calendrier.js

@@ -1,6 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState,useEffect } from 'react';
 import "react-datepicker/dist/react-datepicker.css";
 import NavigationDashboard from '../components/NavigationDashboard';
+import axios from 'axios';
+import Session from 'react-session-api';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
 
 import format from "date-fns/format";
 import getDay from "date-fns/getDay";
@@ -9,26 +13,51 @@ import startOfWeek from "date-fns/startOfWeek";
 import { Calendar, dateFnsLocalizer } from "react-big-calendar";
 import "react-big-calendar/lib/css/react-big-calendar.css";
 
+
+const api = axios.create({
+    baseURL: 'http://localhost:8080'
+})
+
 const locales = {
     'fr': require('date-fns/locale/fr')
-  };
-  const localizer = dateFnsLocalizer({
+};
+const localizer = dateFnsLocalizer({
     format,
     parse,
     startOfWeek,
     getDay,
     locales,
     
-  });
+});
   
-  const events = [
+const events = [
     
-  ];
+];
 
-    
+function Calendrier(){
+
+    const [contacts, setContacts] = useState([]);
+    const [events, setEvents] = useState([]);
+    const [selectedContact, setSelectedContact] = useState(1);
 
+    useEffect(() =>{
+        const apiString = '/Contact/' + Session.get("idUser");
+        api.get(apiString).then((response) => {
+            setContacts(response.data);
+            setSelectedContact(response.data[0].idcontact)
+        });
 
-const Calendrier = () => {
+        const apiStringEvent = '/Event/' + Session.get("idUser");
+        api.get(apiStringEvent).then((response) => {
+            setEvents(response.data);
+        });
+
+        events.forEach(event => {
+            const newEvent = { title: event.comment, start: new Date(event.date+" "+event.starttime), end: new Date(event.date+" "+event.endtime) };
+            setAllEvents([...allEvents, newEvent]);
+            console.log("here");
+        });
+    }, []);
 
     const [theme, setTheme] = useState("light");    
     if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) {
@@ -43,9 +72,17 @@ const Calendrier = () => {
 
     function handleAddEvent() {
         const newEvent = { title: titre, start: new Date(jour+" "+heureDebut), end: new Date(jour+" "+heureFin) };
+        const newEventBD = { date: jour,starttime: heureDebut,endtime: heureFin,comment: titre, idusersend: Session.get("idUser"),iduserreceive: Session.get("idUser"), idcontact: selectedContact};
+        api.post('/Event/Add', newEventBD).then (function(response) {
+            console.log(response.data);
+        });
         setAllEvents([...allEvents, newEvent]);
     }
 
+    function handleChangeContact(event){
+        setSelectedContact(event.target.value);
+    };
+
     return (
         <body className={theme}>
 
@@ -74,10 +111,15 @@ const Calendrier = () => {
                                 onChange={(e) => setHeureDebut(e.target.value)} />
                                 <input className='date' type="time" placeholder="Ajoutez une heure de fin" style={{height: "20px", width: "100%", marginRight: "10px"}}
                                 onChange={(e) => setHeureFin(e.target.value)} />
-
-
-
-                                
+                                <Select
+                                    name='idcontact'
+                                    value={selectedContact}
+                                    onChange={handleChangeContact}
+                                    >
+                                    {contacts.map(contact => (
+                                        <MenuItem value={contact.idcontact}>{contact.firstname + contact.lastname + '\n(' + contact.name + ')'}</MenuItem>    
+                                    ))}
+                                </Select>
                             </div>
                             <button className="bouton_ajout" onClick={handleAddEvent}>
                                 <p>Ajouter l'évènement</p>

src/pages/RestartPassword.js

@@ -21,6 +21,7 @@ function RestartPassword() {
     const [password, setPassword] = useState("");
     const [confPassword, setConfPassword] = useState("");
     const [newPassword, setNewPassword] = useState("");
+    const [resetPasswordError, setResetPasswordError] = useState(false);
     
     const navigate = useNavigate();
 
@@ -61,7 +62,7 @@ function RestartPassword() {
                     navigate("/Parametres");
                 }
                 else{
-                    console.log("trt");
+                    setResetPasswordError(true);
                 }
             });
         }
@@ -70,8 +71,6 @@ function RestartPassword() {
     return (
         <div className="page_admin">
             <div className="Titre_Formulaire">
-                <p className="Titre">Admin</p>
-                <p className="Sous-titre">Modification d'utilisateur</p>
                 <div className="Formulaire">
                     <form className="form" onSubmit={checkRestartPassword}>
                         <table className="Formulaire_de_connexion">
@@ -83,11 +82,12 @@ function RestartPassword() {
                                 </div>
                             </tr>
                             <tr>
-                                <input id="MotDePasse" value={password} onChange={handleChangePassword} name='password' className="texte_zone" type="text" placeholder="Mot de passe..." required/>
-                                <input id="ConfirmeMotDePasse" value={confPassword} onChange={handleChangeConfPassword} name='confimPassword' className="texte_zone" type="text" placeholder="Confirmation mot de passe..." required/>
-                                <input id="NouvMotDePasse" value={newPassword} onChange={handleChangeNewPassword} name='newPassword' className="texte_zone" type="text" placeholder="Nouveau mot de passe..." required/>
+                                <input id="MotDePasse" value={password} onChange={handleChangePassword} name='password' className="texte_zone" type="password" placeholder="Mot de passe..." required/>
+                                <input id="ConfirmeMotDePasse" value={confPassword} onChange={handleChangeConfPassword} name='confimPassword' className="texte_zone" type="password" placeholder="Confirmation mot de passe..." required/>
+                                <input id="NouvMotDePasse" value={newPassword} onChange={handleChangeNewPassword} name='newPassword' className="texte_zone" type="password" placeholder="Nouveau mot de passe..." required/>
                             </tr>
                         </table>
+                        <p>{resetPasswordError === true?"Le mot de passe est incorrect":''}</p>
                         <div className="bouton_submit">
                             <button className="bouton_val" type="submit">Valider</button>
                             <NavLink className="bouton_ann" to="/Parametres">Retour</NavLink>