1
0
forked from PGL/Clyde

Merge branch 'master' into Max/Backend/Curriculum

This commit is contained in:
2024-03-15 17:40:42 +01:00
23 changed files with 675 additions and 141 deletions

View File

@ -1,11 +1,9 @@
# English translations (some examples to remove)
login.guest.signin=Sign in
login.guest.register=Register
login.guest.alregister=Already Registered
login.guest.welcome=WELCOME TO THE UNIVERSITY
login.guest.email=E-MAIL
login.guest.firstname= FIRSTNAME
login.guest.firstname=FIRSTNAME
login.guest.surname=SURNAME
login.guest.country=COUNTRY
login.guest.address=ADDRESS
@ -15,6 +13,8 @@ login.guest.lastpage=Last Page
login.guest.submit=Submit
login.guest.birthday=BIRTHDAY
login.guest.confirm=CONFIRM
login.cPassword=Confirm Password
login.password=Password
app.home=Home
app.login=Login
app.notifications=Notifications
@ -23,8 +23,28 @@ app.messages=Messages
app.forum=Forum
app.schedules=Schedules
app.inscription.requests=Inscription Requests
app.manage.courses=Manage Courses
app.language=Language
app.manage.profile=Manage profile
request.moreInfos=More Infos
request.accept=Accept
request.refuse=Refuse
#=====================================================
courses.createCourse=Create course
courses.deleteCourse=Delete course
courses.modify=Modify
courses.toDelete=Course to Delete
courses.confirm=Confirm
courses.back=Back
profile.modify.data=Modify personnal data
profile.reRegister=Re-register
profile.unRegister=Unregister
profile.course.list=Courses list
profile.address=Address
profile.picture=Profile picture
name=Name
teacher=Teacher
student=Student
secretary=Secretary
curriculum=curriculum
credits=Credits
faculty=Faculty

View File

@ -1,20 +1,20 @@
# Traductions françaises (Quelques examples a enlever)
login.guest.signin=SE CONNECTER
login.guest.register=S'enregistrer
login.guest.alregister=Déjà Enregistré
login.guest.welcome=BIENVENUE A L'UNIVERSITE
login.guest.email=E-MAIL
login.guest.firstname= PRENOM
login.guest.surname= NOM
login.guest.country= PAYS
login.guest.firstname=PRENOM
login.guest.surname=NOM
login.guest.country=PAYS
login.guest.address=ADRESSE
login.guest.password= MOT DE PASSE
login.guest.password=MOT DE PASSE
login.guest.nextpage=Prochaine Page
login.guest.lastpage=Derniere Page
login.guest.submit=Envoyer
login.guest.birthday=DATE DE NAISSANCE
login.guest.confirm=CONFIRMER
login.cPassword=Confirmer mot de passe
login.password=Mot de passe
app.home=Home
app.login=Se connecter
app.notifications=Notifications
@ -23,7 +23,28 @@ app.messages=Messages
app.forum=Forum
app.schedules=Horaires
app.inscription.requests=Demandes d'Inscription
app.manage.courses=Gérer les cours
app.language=Langue
app.manage.profile=Gérer le profil
request.moreInfos=Plus d'Infos
request.accept=Accepter
request.refuse=Refuser
#=====================================================
courses.createCourse=Créer un cours
courses.deleteCourse=Supprimer un cours
courses.modify=Modifier
courses.toDelete=Cours à supprimer
courses.confirm=Confirmer
courses.back=Retour
profile.modify.data=Modifier données personnelles
profile.reRegister=Réinsciption
profile.unRegister=Désinscription
profile.course.list=Liste des cours
profile.address=Adresse
profile.picture=Photo de profil
name=Nom
teacher=Enseignant
student=Etudiant
secretary=Secrétaire
curriculum=Cursus
credits=Credits
faculty=Faculté

View File

@ -8,11 +8,13 @@
import LoginPage from './Apps/Login.vue'
import Inscription from "./Apps/Inscription.vue"
import Profil from "./Apps/Profil.vue"
import Courses from "./Apps/ManageCourses.vue"
const apps = {
'/login': LoginPage,
'/inscription': Inscription,
'/profil': Profil
'/profil': Profil,
'/manage-courses' : Courses,
}
const currentPath = ref(window.location.hash)
@ -39,7 +41,7 @@
<ul class="horizontal">
<li title=home>
<a class="icon" href="#home">
<img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
<img class="clyde" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
</a></li>
<li title=home>
<a class="icon" href="#home">
@ -57,7 +59,7 @@
<a class="icon" >
<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>
<div class="dropdown-content">{{i18n("app.language")}}</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>
@ -67,7 +69,7 @@
</ul>
<div style='align-items:center;'>
<a style="cursor:pointer;font-size:20px;" href="#/profil" class="dropdown-content">
Manage Profile
{{i18n("app.manage.profile")}}
</a>
</div>
@ -97,8 +99,12 @@
<div class="fa-solid fa-envelope" style="font-size: 40px;" ></div>
<div class="text">{{i18n("app.forum")}}</div></a></li>
<li><a href="#/inscription">
<div class="fa-solid fa-users" style="font-size: 40px;"></div>
<div class="text">{{i18n("app.inscription.requests")}}</div></a></li>
<div class="fa-solid fa-users" style="align-self:center;font-size: 40px;"></div>
<div class="text" style="top:0;">{{i18n("app.inscription.requests")}}</div></a></li>
<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>
</ul>
</div>
@ -246,7 +252,6 @@
}
.text {
position: absolute;
right: 0%;
width: 0%;
opacity: 0;
@ -258,9 +263,13 @@
ul.vertical:hover .text {
opacity: 1;
width: 70%;
width: 60%;
transition-duration: .3s;
padding-left: 5px;
padding-left: 15px;
}
.clyde:hover{
content: url("./assets/angry_clyde.png")
}
</style>

View File

@ -1,32 +1,10 @@
<script setup>
import Req from "./Request.vue"
const requests_example = [ {
id:0,
type:"Inscription",
lastName:"DoefenschmirtzLEMAGNIFIQUE",
firstName:"Jhon",
address: "Radiator Springs",
country: "USA",
birthdate:"2004-02-02",
email:"JohnDoe@gmail.com",
cursus:"IT",
degree:"BAC1",
},
{
id:1,
type:"ReInscription",
lastName:"Doe",
firstName:"Jane",
address: "Radiator Springs",
country: "USA",
birthdate:"2004-03-03",
email:"JaneDoe@gmail.com",
cursus:"Psychology",
degree:"BAC1",
}]
import { getRegisters } from '@/rest/ServiceInscription.js'
const requests_example = getRegisters();
</script>
<template>
<Req v-for="item of requests_example" v-bind="item">
</Req>
<Req v-for="item of requests_example"/>
</template>

View File

@ -1,28 +1,25 @@
<script setup>
import { login , register} from '@/rest/Users.js'
import { ref } from 'vue'
import i18n from '@/i18n.js'
import { login , register } from '@/rest/Users.js'
import { uploadProfilePicture } from '@/rest/uploads.js'
const loginPage= ref(true)
const page = ref(0)
const emailID=ref("")
const passwordIN=ref("")
const submitValue= ref(i18n("login.guest.submit"))
const surname=ref("")
const firstname=ref("")
const passwordOUT=ref("")
const password=ref("")
const passwordConfirm=ref("")
const birthday=ref("")
const emailOUT=ref("")
const email=ref("")
const address=ref("")
const country=ref("")
const cursus=ref("")
const loginInfos = [{_emailID:emailID},{_passwordIN:passwordIN}]
const registerInfos= [{_surname:surname},{_firstname:firstname},{_birthday:birthday},{_passwordOUT:passwordOUT},
{_passwordConfirm:passwordConfirm},{_emailOUT:emailOUT},{_address:address},{_country:country},{_cursus:cursus}]
const imageSaved = ref(false)
const ppData = ref(false)
</script>
@ -30,17 +27,17 @@
<div class='loginBox'>
<div v-if="loginPage">
<form @submit.prevent="login(emailID, passwordIN)"class="form">
<form @submit.prevent="login(email, password)"class="form">
<h1 style="color:rgb(239,60,168); font-family: sans-serif;">
{{i18n("login.guest.signin")}}
</h1>
<div class="inputBox">
<p>ID / {{i18n("login.guest.email")}}</p>
<input type="text" v-model="emailID">
<input type="text" v-model="email">
</div>
<div class="inputBox">
<p>{{i18n("login.guest.password")}}</p>
<input type="password" v-model="passwordIN">
<input type="password" v-model="password">
</div>
<div class="register">
<a @click="loginPage=!loginPage">{{i18n("login.guest.register")}}</a>
@ -52,7 +49,7 @@
</div>
<div v-else>
<form @submit.prevent="register(surname,firstname,emailOUT)" class="form">
<form @submit.prevent="register(firstname, surname, birthday, password, mail, address, country, cursus)" class="form">
<h1 style="color:rgb(239,60,168); font-family: sans-serif; text-align:center;">
{{i18n("login.guest.welcome")}}
</h1>
@ -71,11 +68,12 @@
</div>
<div class="inputBox">
<p>{{i18n("login.guest.password")}}</p>
<input type="password" v-model="passwordOUT">
<input type="password" v-model="password">
</div>
<div class="inputBox">
<p>{{i18n("login.guest.confirm")}} {{i18n("login.guest.password")}}</p>
<input type="password" v-model="passwordConfirm">
<!-- TODO: Verify password is same as passwordConfirm -->
</div>
<div class="switchpage">
@ -89,7 +87,7 @@
<div v-else>
<div class="inputBox">
<p>{{i18n("login.guest.email")}}</p>
<input type="mail" v-model="emailOUT">
<input type="mail" v-model="email">
</div>
<div class="inputBox">
<p>{{i18n("login.guest.address")}}</p>
@ -99,8 +97,12 @@
<p>{{i18n("login.guest.country")}}</p>
<input type="text" v-model="country">
</div>
<form novalidate enctype="multipart/form-data" class="inputBox">
<p>ProfilePicture</p>
<input type="file" :disabled="imageSaved" @change="ppData = uploadProfilePicture($event.target.files); imageSaved = true;" accept="image/*">
</form>
<div class="inputBox">
<p>CURSUS</p>
<p>{{i18n("curriculum").toUpperCase()}}</p>
<select v-model="cursus">
<option value="Chemistry">Chemistry</option>
<option value="Psycho">Psychology</option>
@ -165,7 +167,6 @@
.inputBox input,button,select {
width:100%;
background:rgb(255, 0 255);
border: none;
margin-right: 50px;
padding-left: 10px;

View File

@ -0,0 +1,279 @@
<script setup>
import i18n from "@/i18n.js"
import {ref} from 'vue'
const cursus=[
{
"id": 12,
"name": "Math pour l'info",
"credits": 11,
"faculty": "science",
"teacher": 42,
"Assistants": []},
{
"id": 42,
"name": "Operating Systems",
"credits": 8,
"faculty": "science",
"teacher": 62,
"Assistants": []},
{
"id": 52,
"name": "Fonctionnement des ordinateurs",
"credits": 11,
"faculty": "science",
"teacher": 59,
"Assistants": []},
]
const profList=[42,45,62,84,59]
const createMod = ref(false)
const deleteMod = ref(false)
const editElementID = ref("");
function editItem(id){
editElementID = id;
}
//Juste pour montrer le Create Mode
const pattern = {
"id": 0,
"name": null,
"credits": null,
"faculty": null,
"teacher": null,
"Assistants": []}
let toAdd = Object.assign({}, pattern);
function addToCourse (){
if (cursus.length>0){
toAdd.id=(cursus[cursus.length-1].id)-1;}
else{
toAdd.id=0;
}
let isnull= false;
for(const [key, value] of Object.entries(toAdd)){
if(value === null){
isnull=true;
}
}
if (!isnull){
cursus.push(toAdd);
}
toAdd= Object.assign({},pattern);
}
//Juste pour montrer le Delete Mode
let toRemove;
function removeCourse() {
console.log("ok");
console.log(toRemove);
let rem=-1;
for(const [key, value] of Object.entries(cursus)){
console.log(key);
console.log(value)
if(value.name === toRemove){
rem = key;
break;
}
}
console.log(rem)
if (rem > -1){
cursus.splice(rem, 1);}
console.log(cursus);
}
</script>
<template>
<div class="body">
<div v-if="!deleteMod && !createMod" class="listTitle buttonGrid">
<button class="create" @click="createMod = true">
{{i18n("courses.createCourse")}}
</button>
<button class="delete" @click="deleteMod=true" >
{{i18n("courses.deleteCourse")}}
</button>
</div>
<div v-if="createMod">
<form class="listElement">
<div style="margin-bottom:20px;">
{{i18n("name")}} :
<input v-model="toAdd.name">
</div>
<div style="margin-bottom:20px;">
{{i18n("teacher")}} :
<select style="max-width:200px;" class="teacher" v-model="toAdd.teacher">
<option v-for="item in profList">{{item}}</option>
</select>
</div>
<div style="margin-bottom:20px;">
{{i18n("credits")}} :
<input v-model="toAdd.credits">
</div>
<div style="margin-bottom:20px;">
{{i18n("faculty")}} :
<input v-model="toAdd.faculty">
</div>
<button class="create" @click="createMod=!createMod; addToCourse();"> {{i18n("courses.confirm")}} </button>
<button style="float:right;" @click="createMod=!createMod">{{i18n("courses.back")}}</button>
</form>
</div>
<div v-if="deleteMod">
<form class="listElement">
<div style="margin-bottom:20px;">
{{i18n("courses.toDelete")}} :
<select style="max-width:200px;" class="teacher" v-model="toRemove">
<option v-for="item in cursus">{{item.name}}</option>
</select>
</div>
<div style="margin-bottom:20px;">
{{i18n("login.password")}}:
<input >
</div>
<div style="margin-bottom:20px;">
{{i18n("login.cPassword")}} :
<input>
</div>
<button class="delete" @click="deleteMod=!deleteMod;removeCourse();"> {{i18n("courses.deleteCourse")}} </button>
<button style="float:right;" @click="deleteMod=!deleteMod"> {{i18n("courses.back")}}</button>
</form>
</div>
<div v-if="!createMod && !deleteMod" v-for="item in cursus" :key="item.name">
<div style ="padding:15px 15px 15px 15px;">
<button v-if="editElementID !== item.name" @click="editElementID = item.name">
{{i18n("courses.modify")}}
</button>
<button v-else @click="editElementID= ''"> {{i18n("courses.confirm")}} </button>
</div>
<div class="listElement" >
<div class="containerElement" v-if="editElementID !== item.name" >
<div class="name"> {{item.name}} </div>
<div class="teacher">{{item.teacher}}</div>
<div class="credits">{{i18n("credits")}}:{{item.credits}}</div>
</div>
<div class="containerElement"v-else>
<input style="max-width:200px;" class="name" v-model="item.name">
<select style="max-width:200px;" class="teacher" v-model="item.teacher">
<option v-for="item in profList">{{item}}</option>
</select>
<input style="max-width:100px;"class="credits" v-model="item.credits">
</div>
</div>
</div>
</div>
</template>
<style scoped>
.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;
}
.listElement{
border:2px solid black;
font-size:25px;
color:white;
padding:20px;
background-color:rgb(50,50,50);
border-radius:20px;
margin-bottom:10px;
}
.modify{
font-size:25px;
padding:10px 10px 10px 10px;
background-color: rgb(239,60,168);
cursor: pointer;
border:none;
border-radius:15px;
}
input, select{
padding:10px 10px 10px 10px;
font-size:25px;
cursor: pointer;
border:none;
border-radius:15px;
}
button{
font-size:15px;
height:50px;
width:100px;
border:none;
border-radius:20px;
}
.buttonGrid{
display:grid;
grid-template-columns: auto auto;
column-gap:50px;
grid-template-areas:
"create delete";
}
.create{
grid-area:create;
background-color:rgb(0,200,0);
}
.delete{
grid-area:delete;
background-color:rgb(200,0,0);
}
.listTitle{
display: flex;
justify-content: center;
align-items: center;
width:400px;
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;
button:hover{
opacity:0.8;
}
}
</style>

View File

@ -1,6 +1,7 @@
<script setup>
import {reactive, ref} from 'vue'
import {getUser} from '../rest/Users.js'
import i18n from "@/i18n.js"
/*
const user = getUser();
*/
@ -84,23 +85,23 @@ const toModify = Object.assign({}, user);
E-mail: {{user.email}}
</div>
<div v-if="user.role==='student'">
{{user.option}} {{user.role.toUpperCase()}}
{{user.option}} {{i18n(user.role).toUpperCase()}}
</div>
<div v-else>
Faculty: {{user.faculty}}
Role: {{user.role}}
{{i18n("faculty")}}: {{user.faculty}}
Role: {{i18n(user.role).toUpperCase()}}
</div>
<div>
<button @click="modif=!modif"> Modifier données personnelles </button>
<button @click="modif=!modif"> {{i18n("profile.modify.data")}} </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>
<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>
Profil Picture
{{i18n("profile.picture")}}:
<input type="file">
</div>
<div>
@ -108,19 +109,19 @@ const toModify = Object.assign({}, user);
<input type="mail" v-model="toModify.email" />
</div>
<div>
Address:
{{i18n("profile.address")}}:
<input type="text" v-model="toModify.address">
</div>
<div>
Password
{{i18n("login.password")}}:
<input type="password" v-model="toModify.password">
</div>
<div>
Confirm Password
{{i18n("login.cPassword")}}:
<input type="password" id="confirm">
</div>
<div>
<button @click=" modif=!modif">Confirm</button>
<button @click=" modif=!modif">{{i18n("courses.confirm")}}</button>
</div>
</div>
</div>
@ -128,7 +129,7 @@ const toModify = Object.assign({}, user);
<div v-if="(user.role==='student')">
<div class="listTitle">
Liste des cours
{{i18n("profile.course.list")}}
</div>
<div class="listElement "
v-for="item in user.cursus">
@ -145,7 +146,7 @@ const toModify = Object.assign({}, user);
<div v-if="(user.role==='teacher')">
<div class="listTitle">
Liste des cours
{{i18n("profile.course.list")}}
</div>
<div class="listElement " v-for="item in user.coursesOwned">
{{item.name}}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -15,16 +15,22 @@ export async function createRegister(){
/**
* list all register request in a list of Objects
*/
export async function getRegisters(){
return restGet("/requests/register")
}
/**
* Get info on a particular registering request
* Shall return a list of
* - id
* - type
* - lastName
* - firstName
* - address
* - country
* - birthdate
* - email
* - cursus
* - degree
*/
export async function getRegisters(id){
return restGet("/request/register/" + id);
if(id != null)
return restGet("/request/register/" + id);
return restGet("/request/register")
}
/**

View File

@ -4,8 +4,57 @@ export async function login(user, pass, exp){
return restPost("/login", {identifier: user, password: pass, expirationDate: exp});
}
export async function register(user, pass, mail){
return restPost("/user", {name: user, password: pass, mail: mail});
/**
* Register a user (tokenless)
*
* @param firstname
* @param lastname
* @param birthdate
* @param password
* @param mail
* @param address
* @param country
* @param cursus
* @param imageId id of the image in database returned when uploaded
*/
export async function register(firstname, lastname, birthDate, password, email, address, country, cursus, imageId){
return restPost("/register", {
firstname: firstname,
lastname: lastname,
birthDate: birthDate,
password: password,
email: email,
address: address,
country: country,
cursus: cursus
});
}
/**
* Register a user (by secretary)
*
* @param firstname
* @param lastname
* @param birthdate
* @param password
* @param mail
* @param address
* @param country
* @param imageId id of the image in database returned when uploaded
*
* PS: the password is not is not required as it is generated by the backend and sent to the user
* by mail. it's up to the user to change it if he cares about security
*/
export async function createUser(firstname, lastname, birthDate, email, address, country, role, imageId){
return restPost("/user", {
firstname: firstname,
lastname: lastname,
birthDate: birthDate,
password: password,
email: email,
address: address,
country: country,
});
}
/**

View File

@ -11,6 +11,11 @@ export async function restPost(endPoint, data) {
return await _rest(endPoint, {method: "POST", credentials: 'include', body: JSON.stringify(data)});
}
export async function restPostFile(endPoint, file){
let headers = new Headers();
return await _rest(endPoint, {method: "POST", credentials: 'include', body: file, headers: headers });
}
export async function restDelete(endPoint, data) {
return await _rest(endPoint, {method: "DELETE", credentials: 'include', body: JSON.stringify(data)});
}
@ -35,13 +40,14 @@ async function _rest(endPoint, config){
'Authorization': session_token,
'Content-Type': 'application/json',
});
config['headers'] = headers;
config['headers'] = config['headers'] == null ? headers : config['headers'];
return toast.promise(fetch(restURL + endPoint, config),
{
pending: config['pending'] != null ? config['pending'] : 'pending',
error: config['error'] != null ? config['error'] : 'Network Failure...',
success: config['success'] != null ? config['success'] : {render(res){
return res.ok ? "Success" : "error";
console.log(res);
return res.data.ok ? "Success" : "error";
}},
})
.then( e => e.json()).catch( e => e );

View File

@ -0,0 +1,11 @@
import { restPostFile } from '@/rest/restConsumer.js'
/**
* Upload a file to the server and return the url of this image
*/
export async function uploadProfilePicture(file){
const formData = new FormData();
formData.append("file", file[0]);
return restPostFile("/upload/ProfilePicture", formData)
}