add some comments

VueJS/src/App.vue

+
 <template>
+        <!--LE COMPOSANT APP EST LE PRINCIPALE C'EST LUI QUI APPELE LES AUTRES-->
   <div id="app">
+    
+    <!--Boutton pour accéder à l'ajout des cours-->
     <div id="add-course-button">
       <SimpleButton @click.native="popupVisible=true" value="Ajouter" color="#2A27D8" size="15px" />
     </div>
 
     <div id="Choice">
+
+      <!--FILTER are not implemented for the moment-->
       <div id="ChooseFilter">    
         <p>Filtre</p> 
         <button>Groupe</button>
         <button>Professeur</button>
         <button>Module</button>
       </div>
+
+      <!--Allow to choose the way to display (by teacher or by group)-->
       <div id="ChooseDisplay">
         <button :class="ShowGroupe ? 'active' : 'inactive'" @click="ShowGroupe = true; ShowProf = false;">Groupe</button>
         <button :class="ShowProf ? 'active' : 'inactive'" @click="ShowGroupe = false; ShowProf = true;">Professeur</button>
@@ -19,10 +27,14 @@
   
     </div>
 
+    <!--Buttons to change the weeks to dipslay-->
     <div class="button-container">
+           <!--If you want to change the gap when we click on one of the button : Change -2 and 2 in getlistWeek()--> 
       <button class="custom-button" @click="listeWeek = getlistWeek(-2)">&lt;</button>
       <button class="custom-button" @click="listeWeek = getlistWeek(2)">></button>
     </div>
+
+    <!--Creation of all the composants week to display-->
     <div class="weeks">
       <Week class="main" v-for="i in listeWeek" :key="i" :nbweek="i" :ShowGroupe="ShowGroupe" :ShowProf="ShowProf"></Week>
     </div>
@@ -48,14 +60,17 @@ export default {
 
   data() {
     return {
+      //ShowGroupe, ShowProf, popupVisible are booleans that permits to choose what is currently displaying
       ShowGroupe: false,
       ShowProf: false,
       popupVisible: false,
+      //listWeek is a list of number corresponding to all the week number to display. Ex: [19,20,21,22,23,24]
       listeWeek : []
     };
   },
 
   created(){
+    //Init of listeWeek
     setTimeout(() => {
       this.listeWeek = this.getlistWeek(0);
         }, 1000);
@@ -64,6 +79,7 @@ export default {
 
   methods :{
 
+    //Methods that allows to return the listWeek
     getlistWeek(delay){
       let currentWeek = 0;
 
@@ -78,6 +94,7 @@ export default {
 
 
       const weekList = [];
+      //If you want to display more week : change the stop limit condition
       for (let i = currentWeek - 4; i <= currentWeek + 1; i++) {
          weekList.push(i);
       }

VueJS/src/Cours.vue

@@ -2,6 +2,8 @@
     <div class="Cours">
         
         <div class="affich" :style="cssVars" @click="showPopup = !showPopup"></div>
+
+        <!--Class Popup is only displaying when we click on a cours to have more information about this one-->
         <div class="popup" v-if="showPopup">
             <div class="info" >
                 <h2 class="Titre"> Module : {{ module }}</h2>
@@ -12,8 +14,10 @@
                 <p class="Date">Date : {{ date }}</p>
                 <button class="close-button" @click="showPopup = !showPopup">&times;</button>
             </div>
+            <!--This class is only use to add the blanck behing when we click on a Cours componant-->
             <div class="overlay"></div>
         </div>
+
     </div>
 </template>
 
@@ -36,6 +40,8 @@ export default{
         salle : String,
     },
     computed: {
+
+        //If you want to change the way to show a Cours (bigger, smaler ....)
         cssVars () {
             return{
                 /* variables you want to pass to css */

VueJS/src/Groupe.vue

 <template>
+    <!--The comments are the same as Prof.vue-->
     <div class="Groupe">
         <p class="GroupeName" @mouseover="showFullGroupName" @mouseout="hideFullGroupName">{{GroupeName}}</p>
         <div v-for="(cours, index) in listeCours" :key="index">

VueJS/src/Prof.vue

 <template>
+    <!--Componant Prof-->
     <div class="Prof" >
         <p class="ProfName" @mouseover="showFullGroupName"  @mouseout="hideFullGroupName">{{ProfName}}</p>
+        <!--Creation of all the Cours that corresponds to this Prof-->
         <div v-for="(cours, index) in listeCours" :key="index">
             <Cours :salle="cours.salle" :date="cours.day" :module="cours.titre" :prof="cours.prof" :groupe="cours.groupe" :heure="cours.heure" :duree="cours.duree" :color="cours.color" :nbCoursOnThisTime="cours.nbCoursOnThisTime"/>
         </div>
@@ -34,6 +36,7 @@ export default{
     },
     methods :{
     
+        //Function to Show the name of the prof. It useful when there is a lot of Prof/Groups
         showFullGroupName(event) {
             // Récupère le texte complet du groupe
             const fullGroupName = this.ProfName;

VueJS/src/Week.vue

 <template>
+      <!--Componant Week that created Componant Groupe and Prof-->
+
     <div class="week" :id="nbweek">
         <p class="numberoftheweek">SEMAINE {{nbweek}}</p>
         <div class="theweek">
+            <!--if ShowGroupe = True : diplay, else not display
+            Even if ShowGroupe = False, the componants are created (they are just not diplaied)-->
             <div v-for="groupe in listeGroupe" class="ByGroup" v-if="ShowGroupe">
                 <Groupe :GroupeName="groupe" :nbweek="nbweek"></Groupe>
             </div>
+            <!--if ShowProf = True : diplay, else not display-->
             <div v-for="prof in listeProf"  class="ByProf" v-if="ShowProf" >
                 <Prof :ProfName="prof" :nbweek="nbweek"></Prof>
             </div>
@@ -33,6 +38,7 @@ export default{
 
     data(){
         return {
+            //Each list contains all the names of all the groups and prof
             listeGroupe: [""],
             listeProf: [""],
         }
@@ -45,7 +51,9 @@ export default{
     },
 
     methods:{
+        //This function : get the data and after organise it.
       async fetchData() {
+        //WARNING : The arguments Year and Dept are here. You have to change it ! 
         const courseData = await getCourse(this.nbweek,"2023","HES3");
         this.listeProf= getListeProf(courseData,this.nbweek);
         this.listeGroupe = getListeGroupe(courseData,this.nbweek);

VueJS/src/main.js

@@ -134,12 +134,14 @@ export function getCoursByGroupe(GroupeName,NbWeek){
 }
 
 
-
+//Fonction qui renvoi le numero du jours dans la semaine a partir des initiales du jour
 function getDayNumber(day) {
   const daysOfWeek = ["su", "m", "tu", "w", "th", "f", "sa"];
   return daysOfWeek.indexOf(day);
 }
 
+
+//Fonction pour obtenir une date de type : "Vendredi 19 Mai 2023", a partir du jour de la semaine, l'année et le numéro de semaine)
 function getDateFromWeekdayYearWeek(dayOf, year, week) {
   const weekday = getDayNumber(dayOf);
   const date = new Date(year, 0, 1 + (week - 1) * 7);
@@ -150,7 +152,7 @@ function getDateFromWeekdayYearWeek(dayOf, year, week) {
   return date.toLocaleDateString("fr-FR", options);
 }
 
-
+//Modif du prototype Date de JS pour lui ajouter la fonction getWeek qui retourner le numero de semaine d'une date
 Date.prototype.getWeek = function() {
   const date = new Date(this.getTime());
   date.setHours(0, 0, 0, 0);