Feat 17

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';  // Ensure this path is correct
+
+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('http://127.0.0.1:5000/api/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,23 +1,27 @@
-// 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';
+import DeleteAppointment from './DeleteAppointment';
 
 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 />} />
+      <Route path="/delete-appointment" element={<DeleteAppointment />} />
     </Routes>
   );
 }

src/components/DeleteAppointment.js

@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import Cookies from 'js-cookie';
+import config from '../config';
+import { useNavigate } from 'react-router-dom';
+import backgroundImage from '../image/supprimer rendez_vous.PNG'; // Update this path
+
+function DeleteAppointment() {
+  const [appointmentDate, setAppointmentDate] = useState('');
+  const [error, setError] = useState(null);
+  const navigate = useNavigate();
+
+  const handleDelete = async () => {
+    try {
+      if (!appointmentDate) {
+        alert('Veuillez entrer la date du rendez-vous.');
+        return;
+      }
+
+      const patientId = Cookies.get('patientId');
+      const medecinId = Cookies.get('medecinId');
+
+      if (!medecinId || !patientId) {
+        alert('Identifiants du médecin ou du patient manquants.');
+        return;
+      }
+
+      const response = await fetch(`${config.BACKEND_URL}/delete_rendez_vous`, {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          medecinId: medecinId,
+          patientId: patientId,
+          date: appointmentDate,
+        }),
+      });
+
+      if (!response.ok) {
+        setError(new Error('Erreur de réseau lors de la suppression du rendez-vous.'));
+        return;
+      }
+
+      const data = await response.json();
+      if (data.message) {
+        alert('Rendez-vous supprimé avec succès.');
+        navigate('/rendezvous-patient');
+      } else {
+        alert('Erreur lors de la suppression du rendez-vous.');
+      }
+    } catch (error) {
+      console.error('Erreur lors de la suppression du rendez-vous:', error);
+      setError(error);
+    }
+  };
+
+  return (
+    <div style={pageStyle}>
+      <h1 style={titleStyle}>Supprimer un Rendez-vous</h1>
+      <input
+        type="text"
+        value={appointmentDate}
+        onChange={(e) => setAppointmentDate(e.target.value)}
+        placeholder="Entrez la date du rendez-vous (ex: 2024-09-24)"
+        style={inputStyle}
+      />
+      <button style={buttonStyle} onClick={handleDelete}>Supprimer</button>
+      {error && <p style={{ color: 'red' }}>{error.message}</p>}
+    </div>
+  );
+}
+
+const pageStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100vh',
+  backgroundImage: `url(${backgroundImage})`, // Use the imported image here
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
+  fontFamily: "'Roboto', 'Helvetica Neue', Arial, sans-serif",
+};
+
+const titleStyle = {
+  fontSize: '36px',
+  fontWeight: 'bold',
+  color: '#333',
+  marginBottom: '20px',
+};
+
+const inputStyle = {
+  padding: '10px',
+  fontSize: '16px',
+  marginBottom: '20px',
+  width: '300px',
+};
+
+const buttonStyle = {
+  padding: '10px 20px',
+  fontSize: '16px',
+  fontWeight: 'bold',
+  backgroundColor: '#FF0000',
+  color: '#fff',
+  border: 'none',
+  borderRadius: '5px',
+  cursor: 'pointer',
+  boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+};
+
+export default DeleteAppointment;

src/components/DoctorHome.js

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