Maxime/Clyde
1
0
Fork 0
forked from PGL/Clyde
Code Pull Requests Activity

Profil Teacher and examples

Browse Source
This commit is contained in:
Wawilski
2024-03-10 16:01:47 +01:00
committed by Wal
parent 3cf5153e79
commit 042553c123
2 changed files with 156 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
frontend/src/Apps/Profil.vue
View File

@ -1,8 +1,11 @@
<script setup>
import {reactive} from 'vue'
const example =reactive({
import {getUser,register} from '../rest/Users.js'
/*
const user = getUser();
*/
const user =reactive({
profilPicture:"../assets/clyde.png",
type:"Inscription",
lastName:"Ghost",
firstName:"Clyde",
role:"student",
@ -27,6 +30,35 @@
option:"IT",
degree:"BAC1",
})
/*
Teacher user
const user =reactive({
profilPicture:"../assets/clyde.png",
lastName:"Ghost",
firstName:"Clyde",
role:"teacher",
address: "Radiator Springs",
email:"ClydeGhost@gmail.com",
coursesOwned:{
cours1:{
"id": 12,
"name": "Math pour l'info",
"faculty": "science",
"teacher": 42,
"Assistants": []},
cours2:{
"id": 42,
"name": "Fonctionnement des ordinateurs",
"credits": 11,
"faculty": "science",
"teacher": 42,
"Assistants": []},
},
faculty:"Science",
})*/
</script>
@ -38,31 +70,61 @@
<img class="subContainter" src="../assets/Clyde.png">
</div>
<div class="globalInfos">
<div style="padding-bottom:50px;border:2px solid black;font-size:25px;color:white;padding:20px;background-color:rgb(50,50,50);border-radius:20px;" >
<div class="infosContainer" >
<div>
{{example.firstName}} {{example.lastName.toUpperCase()}}
{{user.firstName}} {{user.lastName.toUpperCase()}}
</div>
<div>
E-mail: {{example.email}}
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>
{{example.option}} {{example.role.toUpperCase()}}
<button> 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>
<div class="moreInfos">
<div v-if="(example.role==='student')">
<div style="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;">
<div v-if="(user.role==='student')">
<div class="listTitle">
Liste des cours
</div>
<div style="border:2px solid black;font-size:25px;color:white;padding:20px;background-color:rgb(50,50,50);border-radius:20px;margin-bottom:10px;"
v-for="item in example.cursus">
{{item.name}} Teacher: {{item.teacher}} Credits:{{item.credits}}
<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>
@ -104,5 +166,77 @@
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>

13
frontend/src/Apps/Request.vue
View File

@ -17,8 +17,13 @@
<div class="bodu">
<div class="container">
<div class="accept"><button style="background-color:rgb(0,105,50);">jdfhdfgj</button></div>
<div class="refuse"><button style="background-color:rgb(105,0,0);">dfkjghefkgj</button></div>
<div class="id"><a>{{id}}</a></div>
<div class="type"><a>{{type}}</a></div>
<div class="surname"><a>{{lastName}}</a></div>
<div class="firstname"><a>{{firstName}}</a></div>
<div class="infos"><button style="background-color:rgb(105,05,105);" >{{i18n("request.moreInfos")}} </button></div>
<div class="accept"><button style="background-color:rgb(0,105,50);">{{i18n("request.accept")}}</button></div>
<div class="refuse"><button style="background-color:rgb(105,0,0);">{{i18n("request.refuse")}}</button></div>
</div>
</div>
</template>
@ -29,9 +34,9 @@
height:100px;
font-size:20px;
display:grid;
grid-template-columns:[firstCol-start]100px[firstCol-end secondCol-start]150px[endCol];
grid-template-columns:[firstCol-start]100px[firstCol-end secondCol-start]150px[secondCol-end thirdCol-start]200px[thirdCol-end fourthCol-start]150px[fourthCol-end]150px[fifthCol-end]150px[sixthCol-end]150px[endCol];
grid-template-areas:
" accept refuse";
"id type surname firstname infos accept refuse";
column-gap:10px;
}