1
0
forked from PGL/Clyde
Clyde/frontend/src/Apps/Profil.vue

283 lines
5.9 KiB
Vue
Raw Normal View History

2024-03-09 22:48:33 +01:00
<script setup>
2024-03-15 15:12:01 +01:00
import {reactive, ref } from 'vue'
2024-03-11 21:45:51 +01:00
import {getUser} from '../rest/Users.js'
2024-03-14 21:27:03 +01:00
import i18n from "@/i18n.js"
2024-03-15 15:12:01 +01:00
import { uploadProfilePicture } from '@/rest/uploads.js'
2024-03-10 16:01:47 +01:00
/*
const user = getUser();
*/
const user =reactive({
2024-03-15 20:23:33 +01:00
profilePicture:"/Clyde.png",
2024-03-09 22:48:33 +01:00
lastName:"Ghost",
firstName:"Clyde",
role:"student",
address: "Radiator Springs",
email:"ClydeGhost@gmail.com",
2024-03-11 21:45:51 +01:00
cursus:[
{
"id": 12,
2024-03-09 22:48:33 +01:00
"name": "Math pour l'info",
"credits": 11,
"faculty": "science",
2024-03-10 12:34:44 +01:00
"teacher": 42,
2024-03-09 22:48:33 +01:00
"Assistants": []},
2024-03-11 21:45:51 +01:00
{
2024-03-10 12:34:44 +01:00
"id": 42,
2024-03-09 22:48:33 +01:00
"name": "Fonctionnement des ordinateurs",
"credits": 11,
"faculty": "science",
2024-03-10 12:34:44 +01:00
"teacher": 42,
"Assistants": []},
2024-03-09 22:48:33 +01:00
2024-03-11 21:45:51 +01:00
],
2024-03-09 22:48:33 +01:00
option:"IT",
degree:"BAC1",
2024-03-11 21:24:40 +01:00
password:"CeciEstUnMotDePasse123",
2024-03-09 22:48:33 +01:00
})
2024-03-11 21:24:40 +01:00
2024-03-10 16:01:47 +01:00
/*
Teacher user
const user =reactive({
profilPicture:"../assets/clyde.png",
lastName:"Ghost",
firstName:"Clyde",
role:"teacher",
address: "Radiator Springs",
email:"ClydeGhost@gmail.com",
2024-03-11 21:45:51 +01:00
coursesOwned:[
{
2024-03-10 16:01:47 +01:00
"id": 12,
"name": "Math pour l'info",
"faculty": "science",
"teacher": 42,
"Assistants": []},
2024-03-11 21:45:51 +01:00
{
2024-03-10 16:01:47 +01:00
"id": 42,
"name": "Fonctionnement des ordinateurs",
"credits": 11,
"faculty": "science",
"teacher": 42,
"Assistants": []},
2024-03-11 21:45:51 +01:00
],
2024-03-10 16:01:47 +01:00
faculty:"Science",
})*/
2024-03-11 21:24:40 +01:00
const modif = ref(false);
const toModify = Object.assign({}, user);
2024-03-10 16:01:47 +01:00
2024-03-15 15:12:01 +01:00
function getPP(){
return user.profilePicture
}
2024-03-09 22:48:33 +01:00
</script>
<template>
<div class="body">
<div class="container">
<div class="profilPic">
2024-03-15 15:12:01 +01:00
<img class="subContainter" :src=getPP()>
2024-03-09 22:48:33 +01:00
</div>
<div class="globalInfos">
2024-03-11 21:24:40 +01:00
<div v-if="modif==false" class="infosContainer" >
2024-03-10 12:34:44 +01:00
<div>
2024-03-10 16:01:47 +01:00
{{user.firstName}} {{user.lastName.toUpperCase()}}
2024-03-09 22:48:33 +01:00
</div>
<div>
2024-03-10 16:01:47 +01:00
E-mail: {{user.email}}
</div>
<div v-if="user.role==='student'">
2024-03-14 21:27:03 +01:00
{{user.option}} {{i18n(user.role).toUpperCase()}}
2024-03-10 16:01:47 +01:00
</div>
<div v-else>
2024-03-14 21:27:03 +01:00
{{i18n("faculty")}}: {{user.faculty}}
Role: {{i18n(user.role).toUpperCase()}}
2024-03-09 22:48:33 +01:00
</div>
<div>
2024-03-14 21:27:03 +01:00
<button @click="modif=!modif"> {{i18n("profile.modify.data")}} </button>
2024-03-10 16:01:47 +01:00
</div>
<div v-if="(user.role==='student')">
2024-03-14 21:27:03 +01:00
<button>{{i18n("profile.reRegister")}}</button>
<button style="float:right;background-color:rgb(150,0,0);">{{i18n("profile.unRegister")}}</button>
2024-03-09 22:48:33 +01:00
</div>
2024-03-15 20:23:33 +01:00
<div>
<button>{{i18n("profile.change.curriculum")}}</button>
</div>
2024-03-09 22:48:33 +01:00
</div>
2024-03-11 21:24:40 +01:00
<div v-else class="infosContainer">
<div>
2024-03-14 21:27:03 +01:00
{{i18n("profile.picture")}}:
2024-03-15 15:12:01 +01:00
<input type="file" @change="user.profilPicture = uploadProfilePicture($event.target.files);" accept="image/*">
2024-03-11 21:24:40 +01:00
</div>
<div>
E-mail:
<input type="mail" v-model="toModify.email" />
</div>
<div>
2024-03-14 21:27:03 +01:00
{{i18n("profile.address")}}:
2024-03-11 21:24:40 +01:00
<input type="text" v-model="toModify.address">
</div>
<div>
2024-03-14 21:27:03 +01:00
{{i18n("login.password")}}:
2024-03-11 21:24:40 +01:00
<input type="password" v-model="toModify.password">
</div>
<div>
2024-03-14 21:27:03 +01:00
{{i18n("login.cPassword")}}:
2024-03-11 21:24:40 +01:00
<input type="password" id="confirm">
</div>
<div>
2024-03-14 21:27:03 +01:00
<button @click=" modif=!modif">{{i18n("courses.confirm")}}</button>
2024-03-11 21:24:40 +01:00
</div>
</div>
2024-03-09 22:48:33 +01:00
</div>
2024-03-11 21:24:40 +01:00
<div v-if="modif==false"class="moreInfos">
2024-03-10 16:01:47 +01:00
<div v-if="(user.role==='student')">
<div class="listTitle">
2024-03-14 21:27:03 +01:00
{{i18n("profile.course.list")}}
2024-03-10 12:34:44 +01:00
</div>
2024-03-10 16:01:47 +01:00
<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>
2024-03-10 12:34:44 +01:00
</div>
</div>
2024-03-10 16:01:47 +01:00
<div>
</div>
<div v-if="(user.role==='teacher')">
<div class="listTitle">
2024-03-14 21:27:03 +01:00
{{i18n("profile.course.list")}}
2024-03-10 16:01:47 +01:00
</div>
<div class="listElement " v-for="item in user.coursesOwned">
{{item.name}}
</div>
</div>
<div>
</div>
2024-03-09 22:48:33 +01:00
</div>
</div>
</div>
</template>
<style scoped>
.container{
display:grid;
grid-template-columns:200px 900px;
grid-template-rows:200px auto;
column-gap:30px;
2024-03-15 20:23:33 +01:00
row-gap:45px;
2024-03-09 22:48:33 +01:00
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;
}
2024-03-10 16:01:47 +01:00
.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;
}
2024-03-09 22:48:33 +01:00
2024-03-10 16:01:47 +01:00
.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;
}
2024-03-09 22:48:33 +01:00
</style>