Remove course

frontend/src/App.vue

@@ -8,11 +8,13 @@
   import LoginPage from './Apps/Login.vue'
   import Inscription from "./Apps/Inscription.vue"
   import Profil from "./Apps/Profil.vue"
+  import Courses from "./Apps/ManageCourses.vue" 
 
   const apps = {
   	'/login': LoginPage,
 	'/inscription': Inscription,
-  '/profil': Profil
+  '/profil': Profil,
+  '/manage-courses' : Courses,
   }
   const currentPath = ref(window.location.hash)
 
@@ -97,8 +99,12 @@
             <div class="fa-solid fa-envelope" style="font-size: 40px;" ></div>
             <div class="text">{{i18n("app.forum")}}</div></a></li>
         <li><a href="#/inscription">
-            <div class="fa-solid fa-users" style="font-size: 40px;"></div>
+            <div class="fa-solid fa-users" style="align-self:center;font-size: 40px;"></div>
-            <div class="text">{{i18n("app.inscription.requests")}}</div></a></li>
+            <div class="text" style="top:0;">{{i18n("app.inscription.requests")}}</div></a></li>
+
+        <li><a href="#/manage-courses">
+            <div class="fa-solid fa-book" style="align-self:center;font-size: 40px;overflow:none;"></div>
+            <div class="text">Manage courses</div></a></li>
     </ul>
 
     </div>
@@ -246,7 +252,6 @@
 	  }
 
 	  .text {
-		position: absolute;
 		right: 0%;
 		width: 0%;
 		opacity: 0;
@@ -258,9 +263,9 @@
 
 	  ul.vertical:hover .text {
 		opacity: 1;
-		width: 70%;
+		width: 60%;
 		transition-duration: .3s;
-		padding-left: 5px;
+		padding-left: 15px;
 	  }
     
 </style>

frontend/src/Apps/Login.vue

@@ -165,7 +165,6 @@
 .inputBox input,button,select {
   
   width:100%;
-  background:rgb(255, 0 255);
   border: none;
   margin-right: 50px;
   padding-left: 10px;

frontend/src/Apps/ManageCourses.vue

@@ -0,0 +1,277 @@
+<script setup>
+
+  import {ref} from 'vue'
+const cursus=[
+  {
+  "id": 12,
+  "name": "Math pour l'info",
+  "credits": 11,
+  "faculty": "science",
+  "teacher": 42,
+  "Assistants": []},
+  {
+  "id": 42,
+  "name": "Operating Systems",
+  "credits": 8,
+  "faculty": "science",
+  "teacher": 62,
+  "Assistants": []},
+  {
+  "id": 52,
+  "name": "Fonctionnement des ordinateurs",
+  "credits": 11,
+  "faculty": "science",
+  "teacher": 59,
+  "Assistants": []},
+
+  ]
+
+  const profList=[42,45,62,84,59]
+
+  const createMod = ref(false)
+  const deleteMod = ref(false)
+
+  const editElementID = ref(""); 
+
+  function editItem(id){
+    editElementID = id;
+  }
+
+  //Juste pour montrer le Create Mode
+  const pattern = {
+
+  "id": 0,
+  "name": null,
+  "credits": null,
+  "faculty": null,
+  "teacher": null,
+  "Assistants": []}
+
+
+  let toAdd = Object.assign({}, pattern);
+
+  function addToCourse (){
+  if (cursus.length>0){
+    toAdd.id=(cursus[cursus.length-1].id)-1;}
+    else{
+    toAdd.id=0;
+    }
+    let isnull= false;
+    for(const [key, value] of Object.entries(toAdd)){
+      if(value === null){
+        isnull=true;
+      }
+    }
+      if (!isnull){
+      cursus.push(toAdd);
+      }
+      toAdd= Object.assign({},pattern);
+    } 
+  
+
+  //Juste pour montrer le Delete Mode
+  let toRemove;
+
+  function removeCourse() {
+  console.log("ok");
+  console.log(toRemove);
+  let rem=-1;
+  for(const [key, value] of Object.entries(cursus)){
+    console.log(key);
+    console.log(value)
+    if(value.name === toRemove){
+         rem = key;
+        break;
+      }
+    }
+    console.log(rem)
+  if (rem > -1){
+    cursus.splice(rem, 1);}
+  console.log(cursus);
+  }
+
+</script>
+<template>
+  <div class="body">
+    <div v-if="!deleteMod && !createMod" class="listTitle buttonGrid">
+      <button class="create" @click="createMod = true">
+        Create Course
+      </button>
+      <button class="delete" @click="deleteMod=true" >
+        Delete Course
+      </button>
+    </div>
+    <div v-if="createMod">
+      <form class="listElement">
+        <div style="margin-bottom:20px;">
+         Name: 
+        <input v-model="toAdd.name">
+        </div>
+        <div style="margin-bottom:20px;">
+          Teacher: 
+         <select style="max-width:200px;" class="teacher" v-model="toAdd.teacher">
+          <option v-for="item in profList">{{item}}</option>
+        </select>
+        </div>
+        <div style="margin-bottom:20px;">
+          Credits: 
+        <input v-model="toAdd.credits">
+        </div>
+        <div style="margin-bottom:20px;">
+          Faculty: 
+        <input v-model="toAdd.faculty">
+        </div>
+      <button class="create" @click="createMod=!createMod; addToCourse();"> Confirm </button>
+      <button style="float:right;" @click="createMod=!createMod"> Back</button>
+      </form>
+    </div>
+    <div v-if="deleteMod">
+      <form class="listElement">
+        <div style="margin-bottom:20px;">
+          Course to delete: 
+         <select style="max-width:200px;" class="teacher" v-model="toRemove">
+          <option v-for="item in cursus">{{item.name}}</option>
+          
+        </select>
+        </div>
+        <div style="margin-bottom:20px;">
+          Password: 
+        <input >
+        </div>
+        <div style="margin-bottom:20px;">
+          Confirm Password: 
+        <input>
+        </div>
+      <button class="delete" @click="deleteMod=!deleteMod;removeCourse();"> Delete </button>
+      <button style="float:right;" @click="deleteMod=!deleteMod"> Back</button>
+      </form>
+    </div>
+
+    <div v-if="!createMod && !deleteMod" v-for="item in cursus" :key="item.name">
+      <div style ="padding:15px 15px 15px 15px;">
+      <button  v-if="editElementID !== item.name"  @click="editElementID = item.name"> Modify</button>
+      <button v-else @click="editElementID= ''"> Confirm </button>
+      </div>
+      <div  class="listElement" > 
+      <div class="containerElement" v-if="editElementID !== item.name" >
+
+        <div class="name"> {{item.name}} </div>
+        <div class="teacher">{{item.teacher}}</div> 
+        <div class="credits">Credits:{{item.credits}}</div>  
+      </div>
+      <div class="containerElement"v-else>
+        <input style="max-width:200px;" class="name" v-model="item.name">
+        <select style="max-width:200px;" class="teacher" v-model="item.teacher">
+          <option v-for="item in profList">{{item}}</option>
+        </select>
+        <input style="max-width:100px;"class="credits" v-model="item.credits">  
+      </div>
+    </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.body {
+    width:100%;
+    margin-bottom:10px;
+  }
+ .containerElement{ 
+   justify-content:center;
+    display:grid;
+    grid-template-columns:350px 350px 200px;
+    grid-template-areas:
+    "name teacher credits"; 
+    column-gap:10px;
+    
+  }
+  
+  .name {
+    grid-area:name;
+    align-self:center;
+  }
+
+  .teacher{
+    grid-area:teacher;
+    align-self:center;
+  }
+
+  .credits{
+    grid-area:credits;
+    align-self:center;
+  }
+
+.listElement{
+  border:2px solid black;
+  font-size:25px;
+  color:white;
+  padding:20px;
+  background-color:rgb(50,50,50);
+  border-radius:20px;
+  margin-bottom:10px;
+}
+
+.modify{
+  font-size:25px;
+  padding:10px 10px 10px 10px;
+  background-color: rgb(239,60,168);
+  cursor: pointer;
+  border:none;
+  border-radius:15px;
+}
+
+  input, select{
+  padding:10px 10px 10px 10px; 
+  font-size:25px;
+  cursor: pointer;
+  border:none;
+  border-radius:15px;
+  }
+  button{
+    font-size:15px;
+     height:50px;
+     width:100px;
+    border:none;
+    border-radius:20px;
+
+  }
+
+  .buttonGrid{
+    display:grid;
+    grid-template-columns: auto auto;
+    column-gap:50px;
+    grid-template-areas:
+      "create delete";
+  }
+
+  .create{
+    grid-area:create;
+    
+    background-color:rgb(0,200,0);
+
+  }
+
+  .delete{
+    grid-area:delete;
+    background-color:rgb(200,0,0);
+  }
+
+  .listTitle{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width:400px;
+    margin-left:auto;
+    margin-right:auto;
+    border:2px solid black;
+    font-size:25px;
+    color:white;
+    padding:20px;
+    background-color:rgb(50,50,50);
+    border-radius:20px;margin-bottom:10px;
+
+    button:hover{
+      opacity:0.8;
+    }
+}
+</style>