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

adding list of user PROTO

Browse Source
This commit is contained in:
Wawilski 2024-03-15 15:12:01 +01:00
parent 20d52b2b21
commit a0c38a8d59
7 changed files with 343 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/public/i18n/EN.txt
View File

@ -26,6 +26,8 @@ app.inscription.requests=Inscription Requests
app.manage.courses=Manage Courses
app.language=Language
app.manage.profile=Manage profile
app.studentList=Students List
app.users=Users
request.moreInfos=More Infos
request.accept=Accept
request.refuse=Refuse

2
frontend/public/i18n/FR.txt
View File

@ -26,6 +26,8 @@ app.inscription.requests=Demandes d'Inscription
app.manage.courses=Gérer les cours
app.language=Langue
app.manage.profile=Gérer le profil
app.studentList=Liste des étudiants
app.users=Utilisateurs
request.moreInfos=Plus d'Infos
request.accept=Accepter
request.refuse=Refuser

11
frontend/src/App.vue
View File

@ -9,12 +9,16 @@
import Inscription from "./Apps/Inscription.vue"
import Profil from "./Apps/Profil.vue"
import Courses from "./Apps/ManageCourses.vue"
import Students from "./Apps/StudentsList.vue"
import Users from "./Apps/UsersList.vue"
const apps = {
'/login': LoginPage,
'/inscription': Inscription,
'/profil': Profil,
'/manage-courses' : Courses,
'/students' : Students,
'/users' : Users,
}
const currentPath = ref(window.location.hash)
@ -105,8 +109,13 @@
<li><a href="#/manage-courses">
<div class="fa-solid fa-book" style="align-self:center;font-size: 40px;overflow:none;"></div>
<div class="text">{{i18n("app.manage.courses")}}</div></a></li>
<li><a href="#/students-list">
<div class="fa-solid fa-users-between-lines" style="font-size: 40px"></div>
<div class="text">{{i18n("app.studentList")}}</div></a></li>
<li><a href="#/users">
<div class="fa-solid fa-users" style="font-size: 40px"></div>
<div class="text">{{i18n("app.users")}}</div></a></li>
</ul>
</div>
<div class="page">
<div style=" margin:50px;">

2
frontend/src/Apps/Login.vue
View File

@ -104,7 +104,7 @@
<input type="text" v-model="country">
</div>
<form novalidate enctype="multipart/form-data" class="inputBox">
<p>ProfilePicture</p>
<p>{{i18n("profile.picture").toUpperCase()}}</p>
<input type="file" :disabled="imageSaved" @change="ppData = uploadProfilePicture($event.target.files); imageSaved = true;" accept="image/*">
</form>
<div class="inputBox">

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

@ -2,11 +2,12 @@
import {reactive, ref } from 'vue'
import {getUser} from '../rest/Users.js'
import i18n from "@/i18n.js"
import { uploadProfilePicture } from '@/rest/uploads.js'
/*
const user = getUser();
*/
const user =reactive({
profilPicture:"../assets/clyde.png",
profilePicture:"../assets/Clyde.png",
lastName:"Ghost",
firstName:"Clyde",
role:"student",
@ -66,6 +67,9 @@ const modif = ref(false);
const toModify = Object.assign({}, user);
function getPP(){
return user.profilePicture
}
</script>
@ -74,7 +78,8 @@ const toModify = Object.assign({}, user);
<div class="body">
<div class="container">
<div class="profilPic">
<img class="subContainter" src="../assets/Clyde.png">
<img class="subContainter" :src=getPP()>
</div>
<div class="globalInfos">
<div v-if="modif==false" class="infosContainer" >
@ -102,7 +107,7 @@ const toModify = Object.assign({}, user);
<div v-else class="infosContainer">
<div>
{{i18n("profile.picture")}}:
<input type="file">
<input type="file" @change="user.profilPicture = uploadProfilePicture($event.target.files);" accept="image/*">
</div>
<div>
E-mail:

160
frontend/src/Apps/StudentsList.vue Normal file
View File

@ -0,0 +1,160 @@
<script setup>
import i18n from "@/i18n.js"
import { reactive } from 'vue'
const users =[{
state: "Inscrit",
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",},
{
state: "En attente",
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",
}]
console.log(users[0])
</script>
<template>
<div v-for="item in users">
<div class="bodu">
<div class="container">
<div class="id"><a>{{item.state}}</a></div>
<div class="type"><a>{{item.role}}</a></div>
<div class="surname"><a>{{item.lastName}}</a></div>
<div class="firstname"><a>{{item.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>
</div>
</template>
<style scoped>
.container{
color:white;
height:100px;
font-size:20px;
display:grid;
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:
"id type surname firstname infos accept refuse";
column-gap:10px;
}
.infos {
grid-area:infos;
align-self:center;
}
.accept{
grid-area:accept;
align-self:center;
}
.refuse{
grid-area:refuse;
align-self:center;
}
.titles {
grid-area:titles;
background-color:rgb(215,215,215);
}
.id{
grid-area:id;
margin-left:40px;
align-self:center;
}
.type{
grid-area:type;
align-self:center;
}
.surname{
grid-area:surname;
align-self:center;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
.firstname{
grid-area:firstname;
align-self:center;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
button{
font-size:15px;
height:50px;
width:100px;
border:none;
border-radius:20px;
}
.bodu {
width:100%;
margin-bottom:10px;
border:2px solid black;
border-radius:9px;
background-color:rgb(50,50,50);
}
</style>

157
frontend/src/Apps/UsersList.vue Normal file
View File

@ -0,0 +1,157 @@
<script setup>
import i18n from "@/i18n.js"
import { reactive } from 'vue'
const users =[{
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",},
{
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",
}]
console.log(users[0])
</script>
<template>
<div v-for="item in users">
<div class="bodu">
<div class="container">
<div class="id"><a>{{item.faculty}}</a></div>
<div class="type"><a>{{item.role}}</a></div>
<div class="surname"><a>{{item.lastName}}</a></div>
<div class="firstname"><a>{{item.firstName}}</a></div>
<div class="infos"><button style="background-color:rgb(105,05,105);" >{{i18n("request.moreInfos")}} </button></div>
</div>
</div>
</div>
</template>
<style scoped>
.container{
color:white;
height:100px;
font-size:20px;
display:grid;
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:
"id type surname firstname infos accept refuse";
column-gap:10px;
}
.infos {
grid-area:infos;
align-self:center;
}
.accept{
grid-area:accept;
align-self:center;
}
.refuse{
grid-area:refuse;
align-self:center;
}
.titles {
grid-area:titles;
background-color:rgb(215,215,215);
}
.id{
grid-area:id;
margin-left:40px;
align-self:center;
}
.type{
grid-area:type;
align-self:center;
}
.surname{
grid-area:surname;
align-self:center;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
.firstname{
grid-area:firstname;
align-self:center;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
button{
font-size:15px;
height:50px;
width:100px;
border:none;
border-radius:20px;
}
.bodu {
width:100%;
margin-bottom:10px;
border:2px solid black;
border-radius:9px;
background-color:rgb(50,50,50);
}
</style>