Merge branch 'master' into Leo/Backend
This commit is contained in:
commit
b7a574a312
@ -7,10 +7,12 @@
|
||||
// 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)
|
||||
|
||||
@ -26,8 +28,7 @@
|
||||
const notifications=ref(i18n("app.notifications"))
|
||||
const settings=ref(i18n("app.settings"))
|
||||
const login=ref(i18n("app.login"))
|
||||
|
||||
|
||||
const active=ref(false)
|
||||
|
||||
</script>
|
||||
|
||||
@ -37,29 +38,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 style="float: right;" title=settings>
|
||||
<a href="#Options">
|
||||
<li @click="active=!active" class="option"style="float: right;" title=settings>
|
||||
<a class="icon" >
|
||||
<div class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></div>
|
||||
</a></li>
|
||||
<div v-if="active" class="dropdown">
|
||||
<div class="dropdown-content">Langage</div>
|
||||
<ul style="list-style-type:none;">
|
||||
<li style=" margin-bottom:10px;margin-right:20px;float:left; font-size:10px; color:black;">
|
||||
<button @:click="setLang('en');" href="#home">EN</button>
|
||||
|
||||
<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>
|
||||
<li style="float:left;font-size:10px; color:black;"><button @:click="setLang('fr');" 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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -122,8 +135,37 @@
|
||||
.leftBar{
|
||||
grid-area:leftBar;
|
||||
}
|
||||
.option {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.dropdown {
|
||||
margin-top:55px;
|
||||
width:160px;
|
||||
display: inline-block;
|
||||
height:110px;
|
||||
font-size: 13px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
min-width: 160px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
right:0;
|
||||
color:rgb(50,50,50);
|
||||
text-decoration: none;
|
||||
font-size:24px
|
||||
}
|
||||
|
||||
.dropdown-content div{
|
||||
display:block;
|
||||
}
|
||||
|
||||
ul.vertical{
|
||||
list-style-type: none;
|
||||
margin-top: 61px;
|
||||
@ -176,7 +218,6 @@
|
||||
position: fixed;
|
||||
height:61px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-color: rgb(24, 24, 24);
|
||||
}
|
||||
|
||||
@ -187,7 +228,7 @@
|
||||
}
|
||||
|
||||
|
||||
ul.horizontal li a:hover:not(.active){
|
||||
ul.horizontal li a.icon:hover:not(.active){
|
||||
background-color: black;
|
||||
border-radius:6px;
|
||||
color:white;
|
||||
@ -221,51 +262,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>
|
||||
|
||||
@ -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);
|
||||
|
||||
273
frontend/src/Apps/Profil.vue
Normal file
273
frontend/src/Apps/Profil.vue
Normal file
@ -0,0 +1,273 @@
|
||||
<script setup>
|
||||
import {reactive, ref} from 'vue'
|
||||
import {getUser} from '../rest/Users.js'
|
||||
/*
|
||||
const user = getUser();
|
||||
*/
|
||||
const user =reactive({
|
||||
profilPicture:"../assets/clyde.png",
|
||||
lastName:"Ghost",
|
||||
firstName:"Clyde",
|
||||
role:"student",
|
||||
address: "Radiator Springs",
|
||||
email:"ClydeGhost@gmail.com",
|
||||
cursus:[
|
||||
{
|
||||
"id": 12,
|
||||
"name": "Math pour l'info",
|
||||
"credits": 11,
|
||||
"faculty": "science",
|
||||
"teacher": 42,
|
||||
"Assistants": []},
|
||||
{
|
||||
"id": 42,
|
||||
"name": "Fonctionnement des ordinateurs",
|
||||
"credits": 11,
|
||||
"faculty": "science",
|
||||
"teacher": 42,
|
||||
"Assistants": []},
|
||||
|
||||
],
|
||||
option:"IT",
|
||||
degree:"BAC1",
|
||||
password:"CeciEstUnMotDePasse123",
|
||||
})
|
||||
|
||||
/*
|
||||
Teacher user
|
||||
const user =reactive({
|
||||
profilPicture:"../assets/clyde.png",
|
||||
lastName:"Ghost",
|
||||
firstName:"Clyde",
|
||||
role:"teacher",
|
||||
address: "Radiator Springs",
|
||||
email:"ClydeGhost@gmail.com",
|
||||
coursesOwned:[
|
||||
{
|
||||
"id": 12,
|
||||
"name": "Math pour l'info",
|
||||
"faculty": "science",
|
||||
"teacher": 42,
|
||||
"Assistants": []},
|
||||
{
|
||||
"id": 42,
|
||||
"name": "Fonctionnement des ordinateurs",
|
||||
"credits": 11,
|
||||
"faculty": "science",
|
||||
"teacher": 42,
|
||||
"Assistants": []},
|
||||
|
||||
],
|
||||
faculty:"Science",
|
||||
})*/
|
||||
|
||||
const modif = ref(false);
|
||||
|
||||
const toModify = Object.assign({}, user);
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<template>
|
||||
<div class="body">
|
||||
<div class="container">
|
||||
<div class="profilPic">
|
||||
<img class="subContainter" src="../assets/Clyde.png">
|
||||
</div>
|
||||
<div class="globalInfos">
|
||||
<div v-if="modif==false" class="infosContainer" >
|
||||
<div>
|
||||
{{user.firstName}} {{user.lastName.toUpperCase()}}
|
||||
</div>
|
||||
<div>
|
||||
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>
|
||||
<button @click="modif=!modif"> 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 v-else class="infosContainer">
|
||||
<div>
|
||||
Profil Picture
|
||||
<input type="file">
|
||||
</div>
|
||||
<div>
|
||||
E-mail:
|
||||
<input type="mail" v-model="toModify.email" />
|
||||
</div>
|
||||
<div>
|
||||
Address:
|
||||
<input type="text" v-model="toModify.address">
|
||||
</div>
|
||||
<div>
|
||||
Password
|
||||
<input type="password" v-model="toModify.password">
|
||||
</div>
|
||||
<div>
|
||||
Confirm Password
|
||||
<input type="password" id="confirm">
|
||||
</div>
|
||||
<div>
|
||||
<button @click=" modif=!modif">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="modif==false"class="moreInfos">
|
||||
|
||||
<div v-if="(user.role==='student')">
|
||||
<div class="listTitle">
|
||||
Liste des cours
|
||||
</div>
|
||||
<div class="listElement "
|
||||
v-for="item in user.cursus">
|
||||
<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>
|
||||
<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;
|
||||
}
|
||||
.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>
|
||||
Loading…
Reference in New Issue
Block a user