1
0
forked from PGL/Clyde
This commit is contained in:
LeoMoulin 2024-03-23 18:04:36 +01:00
parent ad0e7b3e35
commit 67fa630ecf
2 changed files with 74 additions and 13 deletions

View File

@ -1,24 +1,82 @@
<script setup> <script setup>
import i18n from "@/i18n.js"
import {getSelf, getUser} from '../rest/Users.js'
import {ref} from "vue";
const user = await getSelf();
function getPP(){
if(user.value.profilePictureUrl === null){
return "/Clyde.png"
}
return user.profilePictureUrl
}
</script> </script>
<template> <template>
<div class="aboutbox"> <div class="body">
<h1 class="test">Coucou</h1> <div class="container">
<div class="profilPic">
<img class="subContainter" :src=getPP()>
</div> </div>
<div class = "globalInfos">
<div class="infosContainer">
<div>
{{user.firstName}} {{user.lastName}}
</div>
<div>
E-mail: {{user.email}}
</div>
</div>
</div>
</div>
</div>
</template> </template>
<style scoped>
.aboutbox { <style>
background-color: rgb(24,24,24); .container{
width: 400px;
display:flex; display:grid;
justify-content: center; grid-template-columns:200px 900px;
padding: 40px; grid-template-rows:200px auto;
border-radius: 20px; column-gap:30px;
box-shadow:0 5px 25px #000000; row-gap:45px;
grid-template-areas:
"profilPic globalInfos"
"minfos minfos";
} }
.test{ .profilPic{
color: red; grid-area:profilPic;
}
.globalInfos {
grid-area:globalInfos;
align-self :center;
}
.body {
width:100%;
margin-bottom:10px;
}
.subContainter{
width:100%;
background-color:rgb(50,50,50);
border-radius:20px;
border:4px solid black;
}
.infosContainer {
padding-bottom:50px;
border:2px solid black;
font-size:25px;
color:white;
padding:20px;
background-color:rgb(50,50,50);
border-radius:20px;
} }
</style> </style>

View File

@ -9,6 +9,7 @@ import Profil from "@/Apps/Profil.vue"
import Courses from "@/Apps/ManageCourses.vue" import Courses from "@/Apps/ManageCourses.vue"
import Users from "@/Apps/UsersList.vue" import Users from "@/Apps/UsersList.vue"
import Students from "@/Apps/StudentsList.vue" import Students from "@/Apps/StudentsList.vue"
import AboutStudent from "@/Apps/AboutStudent.vue";
const apps = { const apps = {
'/login': LoginPage, '/login': LoginPage,
@ -17,6 +18,7 @@ const apps = {
'/manage-courses' : Courses, '/manage-courses' : Courses,
'/users-list' : Users, '/users-list' : Users,
'/students-list' : Students, '/students-list' : Students,
'/about-students': AboutStudent
} }
const appsList = { const appsList = {
@ -28,6 +30,7 @@ const appsList = {
'ManageCourses': { path: '#/manage-courses', icon: 'fa-book', text: i18n("app.manage.courses") }, 'ManageCourses': { path: '#/manage-courses', icon: 'fa-book', text: i18n("app.manage.courses") },
'StudentsList':{ path: '#/students-list',icon: 'fa-users',text: i18n("app.studentList")}, 'StudentsList':{ path: '#/students-list',icon: 'fa-users',text: i18n("app.studentList")},
'UsersList':{ path: '#/users-list',icon: 'fa-users',text: i18n("app.users")}, 'UsersList':{ path: '#/users-list',icon: 'fa-users',text: i18n("app.users")},
'AboutStudent':{ path: '#/about-users', icon: 'fa-users', text:i18n("app.aboutStudent")}
} }
const currentPath = ref(window.location.hash) const currentPath = ref(window.location.hash)