Feat 15

package.json

@@ -9,7 +9,9 @@
     "axios": "^1.7.2",
     "cors": "^2.8.5",
     "js-cookie": "^3.0.5",
+    "moment": "^2.30.1",
     "react": "^18.3.1",
+    "react-big-calendar": "^1.13.2",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.25.1",

src/components/AddAppointment.js

@@ -0,0 +1,165 @@
+import React, { useState } from 'react';
+import backgroundImage from '../image/backaddrdv.jpg'; 
+
+function AddAppointment() {
+  const [date, setDate] = useState('');
+  const [time, setTime] = useState('');
+  const [duration, setDuration] = useState('');
+  const [description, setDescription] = useState('');
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    const appointmentData = {
+      config: {
+        DB_HOST: "localhost",
+        DB_USER: "root",
+        DB_PASSWD: "",
+        DB_DATABASE: "pfe"
+      },
+
+      date: date,
+      heure: time,
+      description: description,
+      duree: parseInt(duration),
+    };
+
+    try {
+      const response = await fetch(`${config.BACKEND_URL}/rendezvous`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(appointmentData)
+      });
+
+      if (response.ok) {
+        const result = await response.json();
+        setMessage('Rendez-vous programmé avec succès!');
+        console.log(result);
+      } else {
+        const errorData = await response.json();
+        setMessage(`Erreur: ${errorData.error}`);
+        console.error('Error:', errorData);
+      }
+    } catch (error) {
+      console.error('There was an error scheduling the appointment!', error);
+      setMessage('Erreur lors de la programmation du rendez-vous.');
+    }
+  };
+
+  return (
+    <div style={pageStyle}>
+      <h1 style={titleStyle}>Programmer un nouveau rendez-vous</h1>
+      <form onSubmit={handleSubmit} style={formStyle}>
+        <label style={labelStyle}>
+          Date:
+          <input 
+            type="date" 
+            value={date} 
+            onChange={(e) => setDate(e.target.value)} 
+            style={inputStyle}
+            required
+          />
+        </label>
+        <label style={labelStyle}>
+          Heure:
+          <input 
+            type="time" 
+            value={time} 
+            onChange={(e) => setTime(e.target.value)} 
+            style={inputStyle}
+            required
+          />
+        </label>
+        <label style={labelStyle}>
+          Durée (minutes):
+          <input 
+            type="number" 
+            value={duration} 
+            onChange={(e) => setDuration(e.target.value)} 
+            style={inputStyle}
+            required
+          />
+        </label>
+        <label style={labelStyle}>
+          Description:
+          <textarea 
+            value={description} 
+            onChange={(e) => setDescription(e.target.value)} 
+            style={textareaStyle}
+            required
+          />
+        </label>
+        <button type="submit" style={buttonStyle}>Programmer le rendez-vous</button>
+      </form>
+      {message && <p>{message}</p>}
+    </div>
+  );
+}
+
+const pageStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100vh',
+  fontFamily: "'Roboto', 'Helvetica Neue', Arial, sans-serif",
+  backgroundImage: `url(${backgroundImage})`,
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
+};
+
+const titleStyle = {
+  fontSize: '36px',
+  fontWeight: 'bold',
+  marginBottom: '20px',
+};
+
+const formStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '400px',
+  backgroundColor: 'rgba(255, 255, 255, 0.9)',
+  padding: '20px',
+  borderRadius: '10px',
+  boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
+};
+
+const labelStyle = {
+  marginBottom: '10px',
+  fontWeight: 'bold',
+};
+
+const inputStyle = {
+  width: '100%',
+  padding: '8px',
+  marginBottom: '10px',
+  borderRadius: '5px',
+  border: '1px solid #ccc',
+};
+
+const textareaStyle = {
+  width: '100%',
+  padding: '8px',
+  borderRadius: '5px',
+  border: '1px solid #ccc',
+  resize: 'none',
+  height: '100px',
+  marginBottom: '10px',
+};
+
+const buttonStyle = {
+  padding: '10px 20px',
+  fontSize: '16px',
+  fontWeight: 'bold',
+  backgroundColor: '#1E90FF',
+  color: '#fff',
+  border: 'none',
+  borderRadius: '5px',
+  cursor: 'pointer',
+  boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+};
+
+export default AddAppointment;

src/components/App.js

@@ -1,22 +1,26 @@
-// App.js
 import React from 'react';
 import { Routes, Route } from 'react-router-dom';
 import Home from './Home';
 import Login from './login';
 import Dashboard from './Dashboard';
 import DoctorLogin from './DoctorLogin';
 import FicheTechnique from './FicheTechnique';
-import rendezvousPatient from './rendezvousPatient';
+import RendezvousPatient from './rendezvousPatient';  
+import DashboardMedecin from './dashboardMedecin';
+import AddAppointment from './AddAppointment';
+
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<Home />} />
+      <Route path="/dashboardMedecin" element={<DashboardMedecin />} /> 
       <Route path="/login" element={<Login />} />
       <Route path="/dashboard" element={<Dashboard />} />
       <Route path="/doctor-login" element={<DoctorLogin />} />
       <Route path="/fiche-technique" element={<FicheTechnique />} />
-      <Route path="/appointments" element={<rendezvousPatient />} />
+      <Route path="/add-appointment" element={<AddAppointment />} />
+      <Route path="/appointments" element={<RendezvousPatient />} />
 
     </Routes>
   );

src/components/DoctorHome.js

@@ -13,5 +13,4 @@ function DoctorHome() {
     </div>
   );
 }
-
 export default DoctorHome;

src/components/DoctorLogin.js

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import Cookies from 'js-cookie';
+import config from '../config';  
 import background from '../image/background_med.PNG';
 
 function DoctorLogin() {
@@ -10,30 +12,45 @@ function DoctorLogin() {
 
   const handleLogin = async (e) => {
     e.preventDefault();
-    console.log('Username:', username);
-    console.log('Password:', password);
 
     try {
-      const response = await fetch('http://127.0.0.1:5000/loginMedecin', {  
+      const response = await fetch(`${config.BACKEND_URL}loginMedecin`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-          username: username,  
+          username: username,
           password: password,
         }),
       });
 
+      if (!response.ok) {
+        if (response.status === 401) {
+          setErrorMessage('Nom complet ou mot de passe incorrect!');
+        } else {
+          setErrorMessage('Une erreur est survenue. Veuillez réessayer plus tard.');
+        }
+        return;
+      }
+
       const data = await response.json();
-      console.log('Response:', data);
+      console.log('API Response data:', data); 
+      if (data && data.medecins && data.medecins.length > 0) {
+        const medecinId = data.medecins[0].Id_Medecin;  
+        console.log('medecinId:', medecinId); 
+
+        if (medecinId) {
+          Cookies.set('id_medecin', medecinId, { expires: 30, path: '/' });
+          console.log('Cookie set: id_medecin =', Cookies.get('id_medecin')); 
 
-      if (response.ok) {
-        setErrorMessage('');
-        alert('Connexion réussie!');
-        navigate('/dashboard', { state: { medecins: data.medecins } }); // Pass the medecins data to the dashboard
+          alert('Connexion réussie!');
+          navigate('/dashboardMedecin', { state: { medecins: data.medecins } });
+        } else {
+          setErrorMessage('Erreur: Identifiant du médecin non trouvé.');
+        }
       } else {
-        setErrorMessage(data.error || 'Nom complet ou mot de passe incorrect!');
+        setErrorMessage('Erreur: Identifiant du médecin non trouvé dans la réponse du serveur.');
       }
     } catch (error) {
       console.error('Error:', error);
@@ -42,63 +59,63 @@ function DoctorLogin() {
   };
 
   return (
-    <div style={{ 
-      backgroundImage: `url(${background})`, 
-      backgroundSize: 'cover', 
-      height: '100vh', 
-      display: 'flex', 
-      justifyContent: 'center', 
-      alignItems: 'center', 
-      color: 'white' 
+    <div style={{
+      backgroundImage: `url(${background})`,
+      backgroundSize: 'cover',
+      height: '100vh',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      color: 'white'
     }}>
-      <div style={{ 
-        backgroundColor: 'rgba(0, 0, 0, 0.6)', 
-        padding: '40px', 
-        borderRadius: '10px', 
-        textAlign: 'center', 
-        width: '400px' 
+      <div style={{
+        backgroundColor: 'rgba(0, 0, 0, 0.6)',
+        padding: '40px',
+        borderRadius: '10px',
+        textAlign: 'center',
+        width: '400px'
       }}>
         <h1>Connexion Médecin</h1>
         <form onSubmit={handleLogin} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
           <div style={{ marginBottom: '15px', width: '100%' }}>
-            <input 
-              type="text" 
-              id="username" 
-              placeholder="Nom d'utilisateur" 
-              value={username} 
-              onChange={(e) => setUsername(e.target.value)} 
+            <input
+              type="text"
+              id="username"
+              placeholder="Nom d'utilisateur"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
               style={{
-                width: '100%', 
-                padding: '15px', 
-                borderRadius: '5px', 
+                width: '100%',
+                padding: '15px',
+                borderRadius: '5px',
                 border: '1px solid #ccc'
               }}
               required
             />
           </div>
           <div style={{ marginBottom: '20px', width: '100%' }}>
-            <input 
-              type="password" 
-              id="password" 
-              placeholder="Mot de passe" 
-              value={password} 
-              onChange={(e) => setPassword(e.target.value)} 
+            <input
+              type="password"
+              id="password"
+              placeholder="Mot de passe"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
               style={{
-                width: '100%', 
-                padding: '15px', 
-                borderRadius: '5px', 
+                width: '100%',
+                padding: '15px',
+                borderRadius: '5px',
                 border: '1px solid #ccc'
               }}
               required
             />
           </div>
-          <button type="submit" style={{ 
-            padding: '15px 30px', 
-            borderRadius: '5px', 
-            border: 'none', 
-            backgroundColor: '#28a745', 
-            color: 'white', 
-            cursor: 'pointer', 
+          <button type="submit" style={{
+            padding: '15px 30px',
+            borderRadius: '5px',
+            border: 'none',
+            backgroundColor: '#28a745',
+            color: 'white',
+            cursor: 'pointer',
             fontSize: '16px'
           }}>Se connecter</button>
         </form>
@@ -121,4 +138,4 @@ function DoctorLogin() {
   );
 }
 
-export default DoctorLogin;
+export default DoctorLogin;