PGL/Clyde
PGL/Clyde
3
2
Fork 3
Code Issues 13 Pull Requests Actions Projects 3 Releases 2 Wiki Activity

Compare commits

base: PGL:b7a574a312cab1858771b9704393080c6d1e8653
Branches Tags
PGL:master
PGL:tonitch/fix/scrollIsue
PGL:tonitch/max/front/fix/vue
PGL:Schedule/master
PGL:wal/front/temp
PGL:JalonB
PGL:jalonA
..
compare: PGL:8fbfb3695811756250bceed5efc3e5ec66995d27
Branches Tags
PGL:master
PGL:tonitch/fix/scrollIsue
PGL:tonitch/max/front/fix/vue
PGL:Schedule/master
PGL:wal/front/temp
PGL:JalonB
PGL:jalonA

No commits in common. "b7a574a312cab1858771b9704393080c6d1e8653" and "8fbfb3695811756250bceed5efc3e5ec66995d27" have entirely different histories.
b7a574a312 ... 8fbfb36958

3 changed files with 73 additions and 331 deletions
Show Stats Expand all files Collapse all files

117
frontend/src/App.vue
View File

@ -7,12 +7,10 @@
// Liste des apps // Liste des apps
import LoginPage from './Apps/Login.vue' import LoginPage from './Apps/Login.vue'
import Inscription from "./Apps/Inscription.vue" import Inscription from "./Apps/Inscription.vue"
import Profil from "./Apps/Profil.vue"
const apps = { const apps = {
'/login': LoginPage, '/login': LoginPage,
'/inscription': Inscription, '/inscription': Inscription
'/profil': Profil
} }
const currentPath = ref(window.location.hash) const currentPath = ref(window.location.hash)
@ -28,7 +26,8 @@
const notifications=ref(i18n("app.notifications")) const notifications=ref(i18n("app.notifications"))
const settings=ref(i18n("app.settings")) const settings=ref(i18n("app.settings"))
const login=ref(i18n("app.login")) const login=ref(i18n("app.login"))
const active=ref(false)
</script> </script>
@ -38,41 +37,29 @@
<div class="topBar"> <div class="topBar">
<ul class="horizontal"> <ul class="horizontal">
<li title=home> <li title=home>
<a class="icon" href="#home"> <a href="#home">
<img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px"> <img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
</a></li> </a></li>
<li title=home> <li title=home>
<a class="icon" href="#home"> <a href="#home">
<div class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></div> <div class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></div>
</a></li> </a></li>
<li style="float: right;" title=login> <li style="float: right;" title=login>
<a class="icon" href="#/login"> <a href="#/login">
<div class="fa-solid fa-user" style="margin-top: 7px; margin-bottom: 3px;"></div> <div class="fa-solid fa-user" style="margin-top: 7px; margin-bottom: 3px;"></div>
</a></li> </a></li>
<li style="float: right;" title=notifications> <li style="float: right;" title=notifications>
<a class="icon" href="#Notifications"> <a href="#Notifications">
<div class="fa-solid fa-bell" style="margin-top: 7px; margin-bottom: 3px;"></div> <div class="fa-solid fa-bell" style="margin-top: 7px; margin-bottom: 3px;"></div>
</a></li> </a></li>
<li @click="active=!active" class="option"style="float: right;" title=settings> <li style="float: right;" title=settings>
<a class="icon" > <a href="#Options">
<div class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></div> <div class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></div>
<div v-if="active" class="dropdown">
<div class="dropdown-content">Langage</div>
<ul style="list-style-type:none;">
<li style=" margin-bottom:10px;margin-right:20px;float:left; font-size:10px; color:black;">
<button @:click="setLang('en');" href="#home">EN</button>
</li>
<li style="float:left;font-size:10px; color:black;"><button @:click="setLang('fr');" href="#home">FR</button></li>
</ul>
<div style='align-items:center;'>
<a style="cursor:pointer;font-size:20px;" href="#/profil" class="dropdown-content">
Manage Profile
</a>
</div>
</div>
</a></li> </a></li>
<li style="float:right; margin-top:7.5px;" title="Language">
<input type="checkbox" @:click="setLang( toggle? 'fr' : 'en' )" v-model="toggle" class="theme-checkbox">
</li>
</ul> </ul>
</div> </div>
@ -135,37 +122,8 @@
.leftBar{ .leftBar{
grid-area:leftBar; grid-area:leftBar;
} }
.option {
position: relative;
display: block;
}
.dropdown {
margin-top:55px;
width:160px;
display: inline-block;
height:110px;
font-size: 13px;
position: absolute;
z-index: 1;
background-color:white;
}
.dropdown-content {
min-width: 160px;
text-align: center;
margin-bottom: 10px;
right:0;
color:rgb(50,50,50);
text-decoration: none;
font-size:24px
}
.dropdown-content div{
display:block;
}
ul.vertical{ ul.vertical{
list-style-type: none; list-style-type: none;
margin-top: 61px; margin-top: 61px;
@ -218,6 +176,7 @@
position: fixed; position: fixed;
height:61px; height:61px;
width: 100%; width: 100%;
overflow: hidden;
background-color: rgb(24, 24, 24); background-color: rgb(24, 24, 24);
} }
@ -228,7 +187,7 @@
} }
ul.horizontal li a.icon:hover:not(.active){ ul.horizontal li a:hover:not(.active){
background-color: black; background-color: black;
border-radius:6px; border-radius:6px;
color:white; color:white;
@ -262,5 +221,51 @@
transition-duration: .3s; transition-duration: .3s;
padding-left: 5px; padding-left: 5px;
} }
.theme-checkbox {
--toggle-size: 16px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 80px;
height: 40px;
background: -webkit-gradient(linear, left top, right top, color-stop(50%, #efefef), color-stop(50%, #2a2a2a)) no-repeat;
background: -o-linear-gradient(left, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
background: linear-gradient(to right, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
background-size: 205%;
background-position: 0;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
border-radius: 99em;
position: relative;
cursor: pointer;
font-size: var(--toggle-size);
}
.theme-checkbox::before {
content: "";
width: 35px;
height: 35px;
position: absolute;
top: 2px;
left: 3px;
background: -webkit-gradient(linear, left top, right top, color-stop(50%, #efefef), color-stop(50%, #2rgb(239, 60, 168))) no-repeat;
background: -o-linear-gradient(left, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
background: linear-gradient(to right, #efefef 50%, rgb(239, 60, 168) 50%) no-repeat;
background-size: 205%;
background-position: 100%;
border-radius: 50%;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
.theme-checkbox:checked::before {
left: calc(100% - 35px - 3px);
background-position: 0;
}
.theme-checkbox:checked {
background-position: 100%;
}
</style> </style>

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

@ -27,6 +27,7 @@
<template> <template>
<div class="logBoxCenterer">
<div class='loginBox'> <div class='loginBox'>
<div v-if="loginPage"> <div v-if="loginPage">
@ -120,6 +121,7 @@
</form> </form>
</div> </div>
</div> </div>
</div>
</template> </template>
<style scoped> <style scoped>
@ -140,6 +142,14 @@
transform: translate(0px ,1px); transform: translate(0px ,1px);
} }
.logBoxCenterer {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.loginBox { .loginBox {
background-color: rgb(24,24,24); background-color: rgb(24,24,24);

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

@ -1,273 +0,0 @@
<script setup>
import {reactive, ref} from 'vue'
import {getUser} from '../rest/Users.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}} {{user.role.toUpperCase()}}
</div>
<div v-else>
Faculty: {{user.faculty}}
Role: {{user.role}}
</div>
<div>
<button @click="modif=!modif"> 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 v-else class="infosContainer">
<div>
Profil Picture
<input type="file">
</div>
<div>
E-mail:
<input type="mail" v-model="toModify.email" />
</div>
<div>
Address:
<input type="text" v-model="toModify.address">
</div>
<div>
Password
<input type="password" v-model="toModify.password">
</div>
<div>
Confirm Password
<input type="password" id="confirm">
</div>
<div>
<button @click=" modif=!modif">Confirm</button>
</div>
</div>
</div>
<div v-if="modif==false"class="moreInfos">
<div v-if="(user.role==='student')">
<div class="listTitle">
Liste des cours
</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">
Liste des cours
</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>