course management secretary #96
@ -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)
|
||||
|
||||
@ -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">Manage courses</div></a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
@ -246,7 +252,6 @@
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
right: 0%;
|
||||
width: 0%;
|
||||
opacity: 0;
|
||||
@ -258,9 +263,9 @@
|
||||
|
||||
ul.vertical:hover .text {
|
||||
opacity: 1;
|
||||
width: 70%;
|
||||
width: 60%;
|
||||
transition-duration: .3s;
|
||||
padding-left: 5px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -165,7 +165,6 @@
|
||||
.inputBox input,button,select {
|
||||
|
||||
width:100%;
|
||||
background:rgb(255, 0 255);
|
||||
border: none;
|
||||
margin-right: 50px;
|
||||
padding-left: 10px;
|
||||
|
||||
277
frontend/src/Apps/ManageCourses.vue
Normal file
277
frontend/src/Apps/ManageCourses.vue
Normal file
@ -0,0 +1,277 @@
|
||||
<script setup>
|
||||
|
||||
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">
|
||||
Create Course
|
||||
</button>
|
||||
<button class="delete" @click="deleteMod=true" >
|
||||
Delete Course
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="createMod">
|
||||
<form class="listElement">
|
||||
<div style="margin-bottom:20px;">
|
||||
Name:
|
||||
<input v-model="toAdd.name">
|
||||
</div>
|
||||
<div style="margin-bottom:20px;">
|
||||
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;">
|
||||
Credits:
|
||||
<input v-model="toAdd.credits">
|
||||
</div>
|
||||
<div style="margin-bottom:20px;">
|
||||
Faculty:
|
||||
<input v-model="toAdd.faculty">
|
||||
</div>
|
||||
<button class="create" @click="createMod=!createMod; addToCourse();"> Confirm </button>
|
||||
<button style="float:right;" @click="createMod=!createMod"> Back</button>
|
||||
</form>
|
||||
</div>
|
||||
<div v-if="deleteMod">
|
||||
<form class="listElement">
|
||||
<div style="margin-bottom:20px;">
|
||||
Course to delete:
|
||||
<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;">
|
||||
Password:
|
||||
<input >
|
||||
</div>
|
||||
<div style="margin-bottom:20px;">
|
||||
Confirm Password:
|
||||
<input>
|
||||
</div>
|
||||
<button class="delete" @click="deleteMod=!deleteMod;removeCourse();"> Delete </button>
|
||||
<button style="float:right;" @click="deleteMod=!deleteMod"> 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"> Modify</button>
|
||||
<button v-else @click="editElementID= ''"> 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">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>
|
||||
Loading…
Reference in New Issue
Block a user