ajout de commentaires

VueJS/src/App.vue

 <template>
   <div id="app">
+    <!-- Bouton pour créer un cours -->
     <div id="add-course-button">
       <SimpleButton @click.native="popupVisible=true" value="Ajouter" color="#2A27D8" size="15px" />
     </div>
@@ -21,6 +22,8 @@
     <div class="weeks">
       <Week class="main" v-for="i in [16,17,18,19,20,21]" :key="i" :nbweek="i" :ShowGroupe="ShowGroupe" :ShowProf="ShowProf" ></Week>
     </div>
+
+    <!-- Afficher le popup d'ajout de cours si la varibale popupVisible est vraie -->
     <PopupAddCourses v-if="popupVisible" />
   </div>
 </template>

VueJS/src/components/PopupAddCourses.vue

@@ -7,6 +7,7 @@
             <div class="container">
                 <div v-if="homeScreen">
                     <li v-for="(course, key) in savedCourses" :key="key" class="vertical-list">
+                        <!-- Affiche chaque cours enegistré -->
                         <HorizontalBanner :value="resumeCourse(savedCourses[key])" color="#2A27D8"
                             @delete="savedCourses.splice(key, 1)" @edit="editCourse(key)" />
                     </li>
@@ -18,11 +19,13 @@
                 <div v-else>
                     <div id="week-numbers">
                         <li v-for="week in weeks" :key="week" class="horizontal-list">
+                            <!-- Enregistre la semaine ou la supprime si le nomnbre de cours est égale à 0 -->
                             <WeekNumber :number=week
                                 @value="v => v > 0 ? $set(course.weeks, week, v) : $delete(course.weeks, week)" />
                         </li>
                     </div>
                     <div id="forms">
+                        <!-- SimpleInput pour les choix uniques et MultipleInput pour les choix multiples -->
                         <SimpleInput class="form-element" label="Module" :options="modules" edit="module"
                             @value="v => $set(course, 'module', v)" />
                         <MultipleInput class="form-element" label="Groupe(s)" :options="groups" edit="groups"
@@ -90,6 +93,7 @@ export default {
             this.homeScreen = show;
         },
         saveCourse() {
+            //Ajoute le cours actuel dans la liste des cours enregistrés
             if (this.edit === -1) this.savedCourses.push(this.course);
             else this.savedCourses[this.edit] = this.course
             this.setHomeScreen(true);
@@ -99,15 +103,18 @@ export default {
             this.edit = -1;
         },
         editCourse(key) {
+            //Passe en mode modification en indiquant key comme la position du cours dans la liste
             this.course = this.savedCourses[key];
             this.edit = key;
             this.setHomeScreen(false);
         },
         optionsToString(ids, options) {
+            //Convertit une liste d'id en string avec les name
             return ids.map(id => options.find(o => o.id == id).name).join(", ");
         },
         resumeCourse(course) {
-            //TODO: change 90 by real data
+            //Créé un résumé du cours à partir des informations de ce dernier
+            //TODO: Changer la valeur 90 par la durée réelle du cours à partir du type de cours en utilisant l'API
             let minutes = Object.values(course.weeks).reduce((a, b) => a + b, 0) * 90;
             let time = Math.floor(minutes / 60) + "h" + ((minutes % 60) >= 10 ? (minutes % 60) : "0" + (minutes % 60));
             let weeks = Object.keys(course.weeks).join(", ");
@@ -140,12 +147,7 @@ export default {
             this.groups = res[Object.keys(this.routes).indexOf("groups")].map(e => { return { "id": e.id, "name": e.name } });
             this.courseTypes = res[Object.keys(this.routes).indexOf("courseTypes")];
             this.roomTypes = res[Object.keys(this.routes).indexOf("roomTypes")];
-        })/*
-        this.modules = data.modules.map(e => { return { "id": e.abbrev, "name": e.name } });
-        this.teachers = data.teachers;
-        this.groups = data.groups.map(e => { return { "id": e.id, "name": e.name } });
-        this.courseTypes = data.courseTypes;
-        this.roomTypes = data.roomTypes;*/
+        })
     }
 }
 </script>

VueJS/src/components/SimpleInput.vue

@@ -2,7 +2,10 @@
     <div>
         <label for="select">{{ label }}</label>
         <select name="select" @change="$emit('value', $event.target.value)">
+            <!-- si edit est différent de -1 alors on sélectionne les éléments qui correspondent au cours modifié -->
             <option :selected="$parent.edit == -1"></option>
+
+            <!-- options doit être au format [{id: id, name: name }, ...] -->
             <option v-for="option in options" :key="option.id" :value="option.id"
                 :selected="$parent.edit != -1 && option.id == $parent.savedCourses[$parent.edit][edit]">{{ option.name }}</option>
         </select>

VueJS/src/components/WeekNumber.vue

@@ -19,6 +19,8 @@ export default {
     },
     data() {
         return {
+            // si  edit est différent de -1 alors on sélectionne la semaine si c'est le cas et on mets le bon nombre de cours 
+
             selected: this.$parent.edit == -1 ? false : Object.keys(this.$parent.savedCourses[this.$parent.edit].weeks).includes(this.number.toString()),
             courses: this.$parent.edit == -1 || !this.$parent.savedCourses[this.$parent.edit].weeks[this.number] ? 0 : this.$parent.savedCourses[this.$parent.edit].weeks[this.number]        }
     },