profil menu base

frontend/src/App.vue

@@ -7,16 +7,21 @@
   // Liste des apps
   import LoginPage from './Apps/Login.vue'
   import Inscription from "./Apps/Inscription.vue"
+  import Profil from "./Apps/Profil.vue"
 
   const apps = {
   	'/login': LoginPage,
-	'/inscription': Inscription
+	'/inscription': Inscription,
+  '/profil': Profil
   }
   const currentPath = ref(window.location.hash)
 
   window.addEventListener('hashchange', () => {
     currentPath.value = window.location.hash
   })
+
+  function refreshPage() {
+  window.location.reload();}
   
   const currentView = computed(() => {
     return apps[currentPath.value.slice(1) || '/']
@@ -27,10 +32,7 @@
   const settings=ref(i18n("app.settings"))
   const login=ref(i18n("app.login"))
   const active=ref(false)
-  function toggle() {
+  
-    active = !active;
-  }
-
 </script>
 
 <template>
@@ -39,37 +41,41 @@
     <div class="topBar">
       <ul class="horizontal">
         <li title=home>
-            <a href="#home">
+            <a class="icon" href="#home">
                 <img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
             </a></li>
         <li title=home>
-            <a href="#home">
+            <a class="icon" href="#home">
                 <div class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
         <li style="float: right;" title=login>
-            <a href="#/login">
+            <a class="icon" href="#/login">
                 <div class="fa-solid fa-user"  style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
         <li style="float: right;" title=notifications>
-            <a href="#Notifications">
+            <a class="icon" href="#Notifications">
                 <div class="fa-solid fa-bell"  style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
-        <li @click="active=true"  class="option"style="float: right;" title=settings>
+        <li @click="active=!active"  class="option"style="float: right;" title=settings>
-            <a href="#Options">
+            <a class="icon" >
                 <div  class="fa-solid fa-gear"  style="margin-top: 7px; margin-bottom: 3px;"></div>
                 <div v-if="active"class="dropdown">
-                  <div class="content">Langage</div>
+                  <div class="dropdown-content">Langage</div>
-                  <ul style="list-style-type:none;margin:0;padding:0;">
+                  <ul style="list-style-type:none;">
-                    <li style="float:left; font-size:10px; color:black;"><button @:click="setLang('en')" href="#home">EN</button></li>
+                    <li style=" margin-bottom:10px;margin-right:20px;float:left; font-size:10px; color:black;">
-                    <li style="float:left;font-size:10px; color:black;"><button @:click="setLang('fr')" href="#home">FR</button></li>
+                      <button @:click="setLang('en');refreshPage();" href="#home">EN</button>
+
+                    </li>
+                    <li style="float:left;font-size:10px; color:black;"><button @:click="setLang('fr');refreshPage();" href="#home">FR</button></li>
                   </ul>
+                  <div style='align-items:center;'>
+                  <a style="cursor:pointer;font-size:20px;" href="#/profil" class="dropdown-content">
+                    Manage Profile
+                  </a>
+                  </div>
 
                 </div>
             </a></li>
-
-        <li style="float:right; margin-top:7.5px;" title="Language">
-            <input type="checkbox" @:click="setLang( toggle? 'fr' : 'en' )" v-model="toggle" class="theme-checkbox">
-        </li>
       </ul>
     </div>
 
@@ -140,22 +146,29 @@
 
 .dropdown {
   margin-top:55px;
-  display: block;
+  width:160px;
-  height:150px;
+  display: inline-block;
+  height:110px;
   font-size: 13px;
   position: absolute;
   z-index: 1;
   background-color:white;
 }
 
-.dropdown .content {
+.dropdown-content { 
-  color: #4CAF50;
+  min-width: 160px;
-  padding: 8px 10px;
+  text-align: center;
+  margin-bottom: 10px;
+  right:0;
+  color:rgb(50,50,50);
   text-decoration: none;
-  display: block;
+  font-size:24px
-  transition: 0.1s;
 }
 
+  .dropdown-content div{
+    display:block;
+  }
+
 	ul.vertical{
 		list-style-type: none;
 		margin-top: 61px;
@@ -218,7 +231,7 @@
 	}
 
 
-	ul.horizontal li a:hover:not(.active){
+	ul.horizontal li a.icon:hover:not(.active){
 		background-color: black;
 		border-radius:6px;
 		color:white;
@@ -252,51 +265,5 @@
 		transition-duration: .3s;
 		padding-left: 5px;
 	  }
-    .theme-checkbox {
+    
-    --toggle-size: 16px;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    width: 80px;
-    height: 40px;
-    background: -webkit-gradient(linear, left top, right top, color-stop(50%, #efefef), color-stop(50%, #2a2a2a)) no-repeat;
-    background: -o-linear-gradient(left, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
-    background: linear-gradient(to right, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
-    background-size: 205%;
-    background-position: 0;
-    -webkit-transition: 0.4s;
-    -o-transition: 0.4s;
-    transition: 0.4s;
-    border-radius: 99em;
-    position: relative;
-    cursor: pointer;
-    font-size: var(--toggle-size);
-    }
-
-    .theme-checkbox::before {
-    content: "";
-    width: 35px;
-    height: 35px;
-    position: absolute;
-    top: 2px;
-    left: 3px;
-    background: -webkit-gradient(linear, left top, right top, color-stop(50%, #efefef), color-stop(50%, #2rgb(239, 60, 168))) no-repeat;
-    background: -o-linear-gradient(left, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
-    background: linear-gradient(to right, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
-    background-size: 205%;
-    background-position: 100%;
-    border-radius: 50%;
-    -webkit-transition: 0.4s;
-    -o-transition: 0.4s;
-    transition: 0.4s;
-    }
-
-    .theme-checkbox:checked::before {
-    left: calc(100% - 35px - 3px);
-    background-position: 0;
-    }
-
-    .theme-checkbox:checked {
-    background-position: 100%;
-    }
 </style>

frontend/src/Apps/Login.vue

@@ -27,7 +27,6 @@
 
 
 <template>
-    <div class="logBoxCenterer">
       <div class='loginBox'>
 
         <div v-if="loginPage">
@@ -121,7 +120,6 @@
           </form>
          </div>
         </div>
-      </div>
 </template>
 
 <style scoped>
@@ -142,14 +140,6 @@
   transform: translate(0px ,1px);
 }
 
-.logBoxCenterer {
-  width: 100%;
-  height:  100%;
-  display: flex;
-  align-items: center;
-  justify-content: center; 
-  overflow: hidden;
-}
 
 .loginBox {
   background-color: rgb(24,24,24);

frontend/src/Apps/Profil.vue

@@ -0,0 +1,98 @@
+<script setup>
+  import {reactive} from 'vue'
+  const example =reactive({
+  profilPicture:"../assets/clyde.png",
+  type:"Inscription",
+  lastName:"Ghost",
+  firstName:"Clyde",
+  role:"student",
+  address: "Radiator Springs",
+  email:"ClydeGhost@gmail.com",
+  cursus:{
+  cours1:{  "id": 12,
+  "name": "Math pour l'info",
+  "credits": 11,
+  "faculty": "science",
+  "Teacher": 42,
+  "Assistants": []},
+  cours2:{ "id": 42,
+  "name": "Fonctionnement des ordinateurs",
+  "credits": 11,
+  "faculty": "science",
+  "Teacher": 42,
+  "Assistants": []}
+
+  },
+  option:"IT",
+  degree:"BAC1",
+  })
+</script>
+
+
+
+<template>
+  <div class="body">
+  <div class="container">
+    <div class="profilPic">
+      <img class="subContainter" src="../assets/Clyde.png">
+    </div>
+      <div class="globalInfos">
+        <div  style="border:2px solid black;font-size:25px;color:white;padding:20px;background-color:rgb(50,50,50);border-radius:20px;" >
+          <div >
+            {{example.firstName}} {{example.lastName.toUpperCase()}}   
+          </div>
+          <div>
+            E-mail: {{example.email}}      
+          </div>
+          <div>
+           {{example.option}} {{example.role.toUpperCase()}} 
+          </div>
+        </div>
+      </div>
+      <div class="moreInfos">
+        <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;" v-for="item in example.cursus
+"></div>
+      </div>
+  </div>
+</div>
+</template>
+<style scoped>
+
+.container{
+  
+  display:grid;
+  grid-template-columns:200px 900px;
+  grid-template-rows:200px auto;
+  column-gap:30px;
+  row-gap:25px;
+  grid-template-areas:
+  "profilPic globalInfos"
+  "minfos minfos";
+}
+
+.profilPic{
+  grid-area:profilPic;
+}
+
+.globalInfos {
+  grid-area:globalInfos;
+  align-self :center;
+
+}
+
+.subContainter{
+  width:100%;
+  background-color:rgb(50,50,50);
+  border-radius:20px;
+  border:4px solid black;
+}
+
+.moreInfos {
+  grid-area:minfos;
+}
+.body {
+    width:100%;
+    margin-bottom:10px;
+  }
+
+</style>

frontend/src/Apps/Request.vue

@@ -17,13 +17,8 @@
   <div class="bodu">
   <div class="container">
  
-    <div class="id"><a>{{id}}</a></div>
+   <div class="accept"><button style="background-color:rgb(0,105,50);">jdfhdfgj</button></div>
-    <div class="type"><a>{{type}}</a></div>
+    <div class="refuse"><button style="background-color:rgb(105,0,0);">dfkjghefkgj</button></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>
@@ -32,11 +27,11 @@
   .container{
     color:white;
     height:100px;
-    font-size:20px;
+  font-size:20px;
     display:grid;
-    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-columns:[firstCol-start]100px[firstCol-end secondCol-start]150px[endCol];
     grid-template-areas:
-    "id type surname firstname infos accept refuse"; 
+    " accept refuse"; 
     column-gap:10px;
     
   }