Create Course

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

@@ -1,4 +1,6 @@
 <script setup>
+
+  import {ref} from 'vue'
 const cursus=[
   {
   "id": 12,
@@ -15,7 +17,7 @@ const cursus=[
   "teacher": 14,
   "Assistants": []},
   {
-  "id": 42,
+  "id": 52,
   "name": "Fonctionnement des ordinateurs",
   "credits": 11,
   "faculty": "science",
@@ -23,15 +25,102 @@ const cursus=[
   "Assistants": []},
 
   ]
+
+  const pattern = {
+
+  "id": 0,
+  "name": null,
+  "credits": null,
+  "faculty": null,
+  "teacher": null,
+  "Assistants": []}
+
+const profList=[42,45,62,84,59]
+
+  const createMod = ref(false)
+  const deleteMod = ref(false)
+
+  const editElementID = ref(""); 
+
+
+  let toAdd = Object.assign({}, pattern);
+
+  function addToCourse (){
+    toAdd.id=(cursus[cursus.length-1].id)-1;
+    let isnull= false;
+    for(const [key, value] of Object.entries(toAdd)){
+      console.log(value)
+      if(value === null){
+        isnull=true;
+      }
+      console.log(isnull)
+    }
+     console.log(toAdd) 
+      if (!isnull){
+      cursus.push(toAdd);
+      }
+      
+      toAdd= Object.assign({},pattern);
+    } 
+
+  function editItem(id){
+    editElementID = id;
+  }
+
 </script>
 <template>
   <div class="body">
-    <div  class="listElement " v-for="item in cursus">
-      <div class=" containerElement">
+    <div class="listTitle buttonGrid">
+      <button class="create" @click="createMod = true" v-if="!deleteMod && !createMod">
+        Create Course
+      </button>
+      <button v-if="createMod" class="create" @click="createMod=!createMod; addToCourse();"> Confirm </button>
+      <button class="delete" @click="deleteMod=true" v-if="!deleteMod && !createMod">
+        Delete Course
+      </button>
+    </div>
+    <div v-if="createMod">
+      <form class="listElement">
+        <div>
+         Name: 
+        <input v-model="toAdd.name">
+        </div>
+        <div>
+          Teacher: 
+         <select style="max-width:200px;" class="teacher" v-model="toAdd.teacher">
+          <option v-for="item in profList">{{item}}</option>
+        </select>
+        </div>
+        <div>
+          Credit: 
+        <input v-model="toAdd.credits">
+        </div>
+        <div>
+          Faculty: 
+        <input v-model="toAdd.faculty">
+        </div>
+      </form>
+    </div>
+    <div v-if="!createMod" 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>
@@ -75,4 +164,68 @@ const cursus=[
   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{
+  
+  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>