330 lines
8.5 KiB
Vue
330 lines
8.5 KiB
Vue
<script setup>
|
|
import {reactive, ref } from 'vue'
|
|
import {getSelf,alterSelf,disconnect,deleteUser} from '../rest/Users.js'
|
|
import {getSelfCurriculum, getAllCurriculums} from '../rest/curriculum.js'
|
|
import {getCourses} from "../rest/courses.js"
|
|
import i18n from "@/i18n.js"
|
|
import { uploadProfilePicture } from '@/rest/uploads.js'
|
|
|
|
const user = ref(await getSelf());
|
|
const UserCurriculum = ref("");
|
|
const curricula = ref (await getAllCurriculums());
|
|
if(user.value.role === "Student"){
|
|
UserCurriculum.value = await getSelfCurriculum();
|
|
}
|
|
|
|
if(user.role === "Teacher"){
|
|
UserCurriculum.value = await getCourses("Teacher");
|
|
}
|
|
const modif = ref(false);
|
|
const curric = ref(false);
|
|
const reg = ref(false);
|
|
|
|
const pattern = {
|
|
profilPictureUrl:null,
|
|
email:null,
|
|
address:null,
|
|
password:null,
|
|
};
|
|
|
|
const patternInfos ={
|
|
email: null,
|
|
password: null,
|
|
passwordConfirm:null,
|
|
id:null,
|
|
}
|
|
|
|
|
|
let toModify= Object.assign({}, pattern);
|
|
let personnalInfos = Object.assign({}, patternInfos);
|
|
|
|
function resetInputs(inputs,list){
|
|
inputs=Object.assign({},list);
|
|
}
|
|
|
|
async function ChangeInfos(){
|
|
for (let element in toModify){
|
|
if (element =="email" && (toModify[element] !== null)){
|
|
await alterSelf(user.value.regNo,{email : toModify[element]});
|
|
}
|
|
|
|
if (element =="profilPictureUrl" && (toModify[element] !== null)){
|
|
await alterSelf(user.value.regNo,{ profilPictureUrl : toModify[element]});
|
|
}
|
|
else if(element == "address" && (toModify[element] !== null)){
|
|
await alterSelf(user.value.regNo,{address : toModify[element]});
|
|
}
|
|
else if(element == "password" && (toModify[element] !== null)){
|
|
await alterSelf(user.value.regNo,{password : toModify[element]});
|
|
}
|
|
}
|
|
toModify= Object.assign({},pattern);
|
|
user.value = await getSelf()
|
|
|
|
}
|
|
|
|
function setModify(item){
|
|
toModify.address = item.address;
|
|
toModify.profilPictureUrl = item.profilPictureUrl;
|
|
toModify.email= item.email;
|
|
toModify.password= item.password;
|
|
}
|
|
|
|
|
|
async function unRegister(){
|
|
deleteUser(user.value.regNo);
|
|
disconnect()
|
|
setTimeout(() => {
|
|
window.location.href="#/home";
|
|
}, "500");
|
|
|
|
}
|
|
|
|
function getPP(){
|
|
if(user.value.profilePictureUrl === null){
|
|
return "/Clyde.png"
|
|
}
|
|
return user.profilePictureUrl
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="body">
|
|
<div class="container">
|
|
<div class="profilPic">
|
|
<img class="subContainter" :src=getPP()>
|
|
|
|
</div>
|
|
<div class="globalInfos">
|
|
<div v-if="modif==false && curric==false && reg==false " class="infosContainer" >
|
|
<div>
|
|
{{user.firstName}} {{user.lastName}}
|
|
</div>
|
|
<div>
|
|
E-mail: {{user.email}}
|
|
</div>
|
|
<div v-if="user.role==='Student'">
|
|
{{user.option}} {{i18n(user.role)}}
|
|
</div>
|
|
<div v-else>
|
|
Role: {{i18n((user.role))}}
|
|
</div>
|
|
<div>
|
|
<button @click="modif=!modif; setModify(user)"> {{i18n("profile.modify.data")}} </button>
|
|
</div>
|
|
<div v-if="(user.role==='Student')">
|
|
<button @click="reg=!reg">{{i18n("profile.reRegister")}}</button>
|
|
<button @click="unRegister()" style="float:right;background-color:rgb(150,0,0);">{{i18n("profile.unRegister")}}</button>
|
|
</div>
|
|
<div v-if="(user.role==='Student')">
|
|
<button @click="curric=!curric">{{i18n("profile.change.curriculum")}}</button>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="modif" class="infosContainer">
|
|
<div>
|
|
{{i18n("profile.picture")}}:
|
|
<input type="file" @change="user.profilPicture = uploadProfilePicture($event.target.files);" accept="image/*">
|
|
</div>
|
|
<div>
|
|
E-mail:
|
|
<input type="mail" v-model="toModify.email" />
|
|
</div>
|
|
<div>
|
|
{{i18n("profile.address")}}:
|
|
<input type="text" v-model="toModify.id">
|
|
</div>
|
|
<div>
|
|
{{i18n("login.password")}}:
|
|
<input type="password" v-model="toModify.password">
|
|
</div>
|
|
<div>
|
|
{{i18n("login.cPassword")}}:
|
|
<input type="password" v-model="toModify.passwordConfirm">
|
|
</div>
|
|
<div>
|
|
<button @click=" modif=!modif; ChangeInfos();">{{i18n("courses.confirm")}}</button>
|
|
<button @click="modif=!modif; resetInputs(toModify,pattern);" style="float:right;">{{i18n("courses.back")}}</button>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="curric" class="infosContainer">
|
|
<div style="height:40px;">
|
|
{{i18n("Curriculum")}}:
|
|
<select v-model="curriculum" >
|
|
<option v-for="item in curricula" style="font-size:20px;" :value="item">{{item.option}}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<button @click=" curric=!curric;">{{i18n("courses.confirm")}}</button>
|
|
<button @click="curric=!curric; resetInputs(personnalInfos,patternInfos);" style="float:right;">{{i18n("courses.back")}}</button>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="reg" class="infosContainer">
|
|
<div>
|
|
E-mail:
|
|
<input type="mail" v-model="toModify.email" />
|
|
</div>
|
|
<div>
|
|
ID :
|
|
<input type="text" v-model="toModify.id">
|
|
</div>
|
|
<div>
|
|
{{i18n("login.password")}}:
|
|
<input type="password" v-model="toModify.password">
|
|
</div>
|
|
<div>
|
|
{{i18n("login.cPassword")}}:
|
|
<input type="password" id="confirm">
|
|
</div>
|
|
|
|
<div>
|
|
<button @click=" reg=!reg;">{{i18n("courses.confirm")}}</button>
|
|
<button @click=" reg=!reg; resetInputs(personnalInfos,patternInfos);" style="float:right;">{{i18n("courses.back")}}</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-if="modif==false && curric==false && reg==false "class="moreInfos">
|
|
|
|
<div v-if="(user.role ==='Student')">
|
|
<div class="listTitle">
|
|
{{i18n("profile.course.list")}}
|
|
</div>
|
|
<div class="listElement" v-for="item in UserCurriculum.courses">
|
|
<div class=" containerElement">
|
|
<div class="name"> {{item.title}} </div>
|
|
<div class="teacher">{{item.owner.lastName}}</div>
|
|
<div class="credits">Credits:{{item.credits}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
|
|
.container{
|
|
min-width:675px;
|
|
display:grid;
|
|
grid-template-columns:10vw 50vw;
|
|
grid-template-rows:200px auto;
|
|
column-gap:2.7%;
|
|
row-gap:45px;
|
|
grid-template-areas:
|
|
"profilPic globalInfos"
|
|
"minfos minfos";
|
|
}
|
|
|
|
.profilPic{
|
|
width:100%;
|
|
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 {
|
|
min-width:960px;
|
|
width:100%;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
margin-top:5%;
|
|
}
|
|
.containerElement{
|
|
justify-content:center;
|
|
display:grid;
|
|
grid-template-columns:38.8% 38.8% 22.4%;
|
|
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{
|
|
min-width:197px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width:8vw;
|
|
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{
|
|
min-width:625px;
|
|
border:2px solid black;
|
|
font-size:25px;
|
|
color:white;
|
|
padding:20px;
|
|
background-color:rgb(50,50,50);
|
|
border-radius:20px;
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
.infosContainer {
|
|
min-width:350px;
|
|
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>
|