<script setup> import {reactive, ref} from 'vue' import {getUser} from '../rest/Users.js' import i18n from "@/i18n.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}} {{i18n(user.role).toUpperCase()}} </div> <div v-else> {{i18n("faculty")}}: {{user.faculty}} Role: {{i18n(user.role).toUpperCase()}} </div> <div> <button @click="modif=!modif"> {{i18n("profile.modify.data")}} </button> </div> <div v-if="(user.role==='student')"> <button>{{i18n("profile.reRegister")}}</button> <button style="float:right;background-color:rgb(150,0,0);">{{i18n("profile.unRegister")}}</button> </div> </div> <div v-else class="infosContainer"> <div> {{i18n("profile.picture")}}: <input type="file"> </div> <div> E-mail: <input type="mail" v-model="toModify.email" /> </div> <div> {{i18n("profile.address")}}: <input type="text" v-model="toModify.address"> </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=" modif=!modif">{{i18n("courses.confirm")}}</button> </div> </div> </div> <div v-if="modif==false"class="moreInfos"> <div v-if="(user.role==='student')"> <div class="listTitle"> {{i18n("profile.course.list")}} </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"> {{i18n("profile.course.list")}} </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>