Profil Teacher and examples

frontend/src/Apps/Profil.vue

@@ -1,8 +1,11 @@
 <script setup>
   import {reactive} from 'vue'
-  const example =reactive({
+  import {getUser,register} from '../rest/Users.js'
+ /* 
+  const user = getUser(); 
+*/
+ const user =reactive({
   profilPicture:"../assets/clyde.png",
-  type:"Inscription",
   lastName:"Ghost",
   firstName:"Clyde",
   role:"student",
@@ -27,6 +30,35 @@
   option:"IT",
   degree:"BAC1",
   })
+  /*
+  Teacher user
+  const user =reactive({
+  profilPicture:"../assets/clyde.png",
+  lastName:"Ghost",
+  firstName:"Clyde",
+  role:"teacher",
+  address: "Radiator Springs",
+  email:"ClydeGhost@gmail.com",
+  coursesOwned:{
+  cours1:{  
+  "id": 12,
+  "name": "Math pour l'info",
+  "faculty": "science",
+  "teacher": 42,
+  "Assistants": []},
+  cours2:{ 
+  "id": 42,
+  "name": "Fonctionnement des ordinateurs",
+  "credits": 11,
+  "faculty": "science",
+  "teacher": 42,
+  "Assistants": []},
+
+  },
+  faculty:"Science",
+  })*/
+
+
 </script>
 
 
@@ -38,31 +70,61 @@
       <img class="subContainter" src="../assets/Clyde.png">
     </div>
       <div class="globalInfos">
-        <div  style="padding-bottom:50px;border:2px solid black;font-size:25px;color:white;padding:20px;background-color:rgb(50,50,50);border-radius:20px;" >
+        <div  class="infosContainer" >
           <div>
-            {{example.firstName}} {{example.lastName.toUpperCase()}}   
+            {{user.firstName}} {{user.lastName.toUpperCase()}}   
           </div>
           <div>
-            E-mail: {{example.email}}      
+            E-mail: {{user.email}}      
+          </div>
+          <div v-if="user.role==='student'">
+            {{user.option}} {{user.role.toUpperCase()}} 
+          </div>
+          <div v-else>
+            Faculty: {{user.faculty}} 
+            Role: {{user.role}}
           </div>
           <div>
-           {{example.option}} {{example.role.toUpperCase()}} 
+            <button> Modifier données personnelles </button>
+          </div>
+          <div v-if="(user.role==='student')">
+            <button>Réinscription</button>
+            <button style="float:right;background-color:rgb(150,0,0);">Désinscription</button>
           </div>
         </div>
       </div>
       <div class="moreInfos">
-        <div v-if="(example.role==='student')">
+
-          <div style="display: flex;
+        <div v-if="(user.role==='student')">
-    justify-content: center;
+          <div class="listTitle">
-    align-items: center;width:200px;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;">
            Liste des cours
           </div>
-        <div  style="border:2px solid black;font-size:25px;color:white;padding:20px;background-color:rgb(50,50,50);border-radius:20px;margin-bottom:10px;"
+        <div  class="listElement "
-          v-for="item in example.cursus">
+          v-for="item in user.cursus">
-          {{item.name}} Teacher: {{item.teacher}} Credits:{{item.credits}}   
+          <div class=" containerElement">
+            <div class="name"> {{item.name}} </div>
+            <div class="teacher">{{item.teacher}}</div> 
+            <div class="credits">Credits:{{item.credits}}</div>  
           </div>
           </div>
         </div>
+        
+        <div>
+        </div>
+    
+      <div v-if="(user.role==='teacher')">
+          <div class="listTitle">
+           Liste des cours
+          </div>
+          <div class="listElement " v-for="item in user.coursesOwned">
+          {{item.name}}       
+          </div>
+        </div>
+        
+        <div>
+        </div>
+        
+      </div>
   </div>
 </div>
 </template>
@@ -104,5 +166,77 @@
     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;
+  }
+
+.listTitle{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width:200px;
+    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;
+}
+
+.listElement{
+  border:2px solid black;
+  font-size:25px;
+  color:white;
+  padding:20px;
+  background-color:rgb(50,50,50);
+  border-radius:20px;
+  margin-bottom:10px;
+}
+
+.infosContainer {
+padding-bottom:50px;
+border:2px solid black;
+font-size:25px;
+color:white;
+padding:20px;
+background-color:rgb(50,50,50);
+border-radius:20px;
+}
+
+
+button{
+  border:none;
+  background-color:rgb(239, 60, 168);
+  border-radius:10px;
+  height:35px;
+  margin-top:10px;
+
+}
+
+button:hover{
+  opacity:0.8;
+}
 </style>

frontend/src/Apps/Request.vue

@@ -17,8 +17,13 @@
   <div class="bodu">
   <div class="container">
  
-   <div class="accept"><button style="background-color:rgb(0,105,50);">jdfhdfgj</button></div>
+    <div class="id"><a>{{id}}</a></div>
-    <div class="refuse"><button style="background-color:rgb(105,0,0);">dfkjghefkgj</button></div>
+    <div class="type"><a>{{type}}</a></div>
+    <div class="surname"><a>{{lastName}}</a></div>
+    <div class="firstname"><a>{{firstName}}</a></div>
+    <div class="infos"><button style="background-color:rgb(105,05,105);" >{{i18n("request.moreInfos")}}   </button></div>
+    <div class="accept"><button style="background-color:rgb(0,105,50);">{{i18n("request.accept")}}</button></div>
+    <div class="refuse"><button style="background-color:rgb(105,0,0);">{{i18n("request.refuse")}}</button></div>
   </div>
   </div>
 </template>
@@ -29,9 +34,9 @@
     height:100px;
   font-size:20px;
     display:grid;
-    grid-template-columns:[firstCol-start]100px[firstCol-end secondCol-start]150px[endCol];
+    grid-template-columns:[firstCol-start]100px[firstCol-end secondCol-start]150px[secondCol-end thirdCol-start]200px[thirdCol-end fourthCol-start]150px[fourthCol-end]150px[fifthCol-end]150px[sixthCol-end]150px[endCol];
     grid-template-areas:
-    " accept refuse"; 
+    "id type surname firstname infos accept refuse"; 
     column-gap:10px;
     
   }