refactor: Création de nouveaux composants / update formulaire de

création de classe (#2)

Front-End/src/components/Structure/Planning/PlanningClassView.js

@@ -0,0 +1,130 @@
+import React, {useRef} from 'react';
+import PropTypes from 'prop-types';
+import { format, isToday, isSameDay, startOfWeek, addDays } from 'date-fns';
+import { fr } from 'date-fns/locale';
+import DropTargetCell from './DropTargetCell';
+
+const PlanningClassView = ({ schedule, onDrop, planningType }) => {
+  const weekDays = ["lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"];
+  const isCurrentWeek = weekDays.some(day => isSameDay(day, new Date()));
+  const scrollContainerRef = useRef(null);
+  // Calcul des dates des jours de la semaine
+  const startDate = startOfWeek(new Date(), { weekStartsOn: 1 }); // Début de la semaine (lundi)
+  const weekDayDates = weekDays.map((_, index) => addDays(startDate, index));
+
+  // Fonction pour formater l'heure
+  const formatTime = (time) => {
+    const [hour, minute] = time.split(':');
+    return `${hour}h${minute}`;
+  };
+
+  const renderCells = () => {
+    const cells = [];
+    const timeSlots = Array.from({ length: 12 }, (_, index) => index + 8); // Heures de 08:00 à 19:00
+  
+    timeSlots.forEach(hour => {
+      cells.push(
+        <div key={`hour-${hour}`} className="h-20 p-1 text-right text-sm text-gray-500 bg-gray-100 font-medium">
+          {`${hour.toString().padStart(2, '0')}:00`}
+        </div>
+      );
+  
+      weekDays.forEach(day => {
+        const daySchedule = schedule?.emploiDuTemps?.[day] || [];
+        const courses = daySchedule.filter(course => {
+          const courseHour = parseInt(course.heure.split(':')[0], 10);
+          const courseDuration = parseInt(course.duree, 10); // Utiliser la durée comme un nombre
+          return courseHour <= hour && hour < (courseHour + courseDuration);
+        });
+  
+        const course = courses.length > 0 ? courses[0] : null;
+  
+        cells.push(
+          <DropTargetCell
+            key={`${day}-${hour}`}
+            day={day}
+            hour={hour}
+            course={course}
+            onDrop={onDrop}
+          />
+        );
+      });
+    });
+  
+    return cells;
+  };
+  
+
+  // Calculer la position de la ligne de temps
+  const getCurrentTimePosition = () => {
+    const hours = currentTime.getHours();
+    const minutes = currentTime.getMinutes();
+  
+    if (hours < 8 || hours > 18) {
+      return -1; // Hors de la plage horaire
+    }
+  
+    const totalMinutes = (hours - 8) * 60 + minutes; // Minutes écoulées depuis 8h
+    const cellHeight = 80; // Hauteur des cellules (par exemple 80px pour 20rem / 24)
+    
+    const position = (totalMinutes / 60) * cellHeight;
+  
+    return position;
+  };
+
+  return (
+    <div className="flex-1 max-h-[calc(100vh-192px)] overflow-hidden">
+      {/* En-tête des jours */}
+      <div className="grid gap-[1px] bg-gray-100 w-full" style={{ gridTemplateColumns: "2.5rem repeat(6, 1fr)" }}>
+        <div className="bg-white h-14"></div>
+        {weekDayDates.map((day) => (
+          <div
+            key={day}
+            className={`p-3 text-center border-b ${isToday(day) ? 'bg-emerald-400 border-x border-emerald-600' : 'bg-white'}`} >
+            <div className={`text font-medium ${isToday(day) ? 'text-white' : 'text-gray-500'}`}>
+              {format(day, 'EEEE', { locale: fr })}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Grille horaire */}
+      <div ref={scrollContainerRef} className="flex-1 overflow-y-auto relative">
+        {isCurrentWeek && (
+          <div
+            className="absolute left-0 right-0 z-10 border-emerald-500 border pointer-events-none"
+            style={{
+              top: getCurrentTimePosition(),
+            }}
+          >
+            <div
+              className="absolute -left-2 -top-1 w-2 h-2 rounded-full bg-emerald-500"
+            />
+          </div>
+        )}
+
+        <div className={`grid gap-[1px] bg-white`} style={{ gridTemplateColumns: `2.5rem repeat(6, 1fr)` }}>
+          {renderCells()}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+PlanningClassView.propTypes = {
+  schedule: PropTypes.shape({
+    emploiDuTemps: PropTypes.objectOf(
+      PropTypes.arrayOf(
+        PropTypes.shape({
+          duree: PropTypes.string.isRequired,
+          heure: PropTypes.string.isRequired,
+          matiere: PropTypes.string.isRequired,
+          teachers: PropTypes.arrayOf(PropTypes.string).isRequired,
+          color: PropTypes.string.isRequired,
+        })
+      )
+    ).isRequired,
+  }).isRequired,
+};
+
+export default PlanningClassView;