278 lines
8.3 KiB
Vue
278 lines
8.3 KiB
Vue
<!----------------------------------------------------
|
|
File: LessonRequests.vue
|
|
Author: William Karpinski
|
|
Scope: Extension Horaire
|
|
Description: Lessons Management Page for the teachers
|
|
----------------------------------------------------->
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import i18n from '@/i18n.js'
|
|
import {formatDate,invertedFormatDate,getHoursMinutes,sortByDate, createLessonEvent} from '../scheduleFunctions.js'
|
|
import {getOwnedLessons} from "@/rest/lessonSchedule.js";
|
|
import {getSelf} from "@/rest/Users.js";
|
|
import {createRequest} from "@/rest/LessonRequests.js"
|
|
import {getcurriculum} from "@/rest/curriculum.js";
|
|
import {getAllSchedule} from "@/rest/scheduleRest.js";
|
|
|
|
|
|
const curriculum = ref();
|
|
const allSchedules = ref(await getAllSchedule());
|
|
const schedule = ref(await getOwnedLessons());
|
|
schedule.value.sort((a,b) => sortByDate(b,a))
|
|
const createMod = ref(false);
|
|
const user = await getSelf();
|
|
const editElementID = ref();
|
|
const requestType = ref(0);
|
|
const currentDate = new Date();
|
|
const types = ["TP","TD","Course","Exam"];
|
|
const colors = {"TP":"rgb(36,175,255)","TD":"rgb(255,36,175)","Exam":"rgb(175,255,36)","Course":"rgb(255,36,175)"}
|
|
const courses = ref();
|
|
|
|
const maxDate = ref(invertedFormatDate(new Date([currentDate.getMonth()<7 ? currentDate.getFullYear() : (currentDate.getFullYear())+1],7,31)));
|
|
|
|
const minDate = ref(invertedFormatDate((new Date()).setDate(currentDate.getDate()+1)))
|
|
|
|
/*
|
|
* Checks if a lesson is in the future or not
|
|
*/
|
|
function inFuture(lesson){
|
|
let toCompare = new Date(lesson.lessonStart);
|
|
let current = new Date();
|
|
return (current < toCompare)
|
|
}
|
|
|
|
|
|
async function setCourses(){
|
|
courses.value = (await getcurriculum(curriculum.value.curriculumId)).courses
|
|
}
|
|
|
|
const pattern = {
|
|
"lessonId":null,
|
|
"course": null,
|
|
"day":null,
|
|
"lessonStart": null,
|
|
"lessonEnd": null,
|
|
"lessonType": null,
|
|
}
|
|
const patternRequest ={
|
|
"user": user.regNo,
|
|
"state": "Pending",
|
|
"requestType": 0,
|
|
"lessonId":null,
|
|
"lessonType":null,
|
|
"lessonStart":null,
|
|
"lessonEnd":null,
|
|
"color":null,
|
|
"course":0,}
|
|
|
|
const toModify = ref(Object.assign({}, pattern));
|
|
const requestBuffer = ref(Object.assign({},patternRequest));
|
|
|
|
function setModify(lesson){
|
|
toModify.value.lessonId = editElementID.value;
|
|
toModify.value.day = invertedFormatDate(new Date(lesson.lessonStart));
|
|
toModify.value.lessonStart = getHoursMinutes(lesson.lessonStart);
|
|
toModify.value.lessonEnd = getHoursMinutes(lesson.lessonEnd);
|
|
toModify.value.lessonType = lesson.lessonType
|
|
}
|
|
|
|
function setCreate(){
|
|
toModify.value = ref(Object.assign({},pattern));
|
|
createMod.value = !createMod.value;
|
|
}
|
|
|
|
/*
|
|
* Constructs a request and posts it
|
|
*/
|
|
async function createLessonRequest(){
|
|
if(requestType.value === 0 || requestType.value === 1){
|
|
//modify
|
|
requestBuffer.value.color = colors[toModify.value.lessonType] ;
|
|
requestBuffer.value.requestType = requestType.value;
|
|
requestBuffer.value.course = toModify.value.course;
|
|
let start = createLessonEvent(toModify.value.day,toModify.value.lessonStart)
|
|
let end = createLessonEvent(toModify.value.day,toModify.value.lessonEnd)
|
|
for (let element in toModify.value){
|
|
if(element !== "day" && element !== "lessonStart" && element !== "lessonEnd"){
|
|
requestBuffer.value[element] = toModify.value[element];
|
|
}
|
|
if(element === "lessonStart"){
|
|
requestBuffer.value.lessonStart = start;
|
|
}
|
|
if(element === "lessonEnd"){
|
|
requestBuffer.value.lessonEnd = end;
|
|
}
|
|
}
|
|
|
|
}
|
|
else if(requestType.value === 2 || requestType.value === 1) {
|
|
//delete
|
|
requestBuffer.value.lessonId = editElementID;
|
|
requestBuffer.value.requestType = requestType.value;
|
|
}
|
|
await createRequest(requestBuffer.value);
|
|
editElementID.value = '';
|
|
}
|
|
|
|
/*
|
|
* Creates a request of a certain type
|
|
* 0 = CREATE REQUEST
|
|
* 1 = MODIFY REQUEST
|
|
* 2 = DELETE REQUEST
|
|
*/
|
|
async function askChanges(i){
|
|
requestType.value= i;
|
|
await createLessonRequest()
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<div class="body">
|
|
<div v-if="createMod">
|
|
<form class="listElement" style="width:40%; margin:0 auto 0 auto;">
|
|
<div style="margin-bottom:20px;">
|
|
{{i18n("schedule")}} :
|
|
<select @change="setCourses()"v-model="curriculum">
|
|
<option v-for="item in allSchedules" :value='item.curriculum'>{{item.curriculum.option}}</option>
|
|
</select>
|
|
</div>
|
|
<div style="margin-bottom:20px;">
|
|
{{i18n("course")}}:
|
|
<select v-if="curriculum != null" v-model="toModify.course">
|
|
<option v-for="item in courses" :value='item.courseID'>{{item.title}}</option>
|
|
</select>
|
|
</div>
|
|
<div style="margin-bottom:20px;">
|
|
{{i18n("day")}}:
|
|
<input type="date" :min="minDate" :max="maxDate" v-model="toModify.day">
|
|
</div>
|
|
<div style="margin-bottom:20px;">
|
|
{{i18n("start")}}:
|
|
<input v-model="toModify.lessonStart" type="time" min="08:00" max="18:00" required />
|
|
</div>
|
|
<div style="margin-bottom:20px;">
|
|
{{i18n("end")}}:
|
|
<input v-model="toModify.lessonEnd" type="time" min="10:00" max="20:00" required />
|
|
</div>
|
|
<div style="margin-bottom:20px;">
|
|
Type:
|
|
<select v-model="toModify.lessonType">
|
|
<option v-for="item in types" :value='item'>{{i18n(item)}}</option>
|
|
</select>
|
|
</div>
|
|
|
|
|
|
|
|
<button class="create" @click="createMod=!createMod; askChanges(0);"> {{i18n("courses.confirm")}} </button>
|
|
<button style="float:right;" @click="createMod=!createMod">{{i18n("courses.back")}}</button>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
|
|
<button v-if="!createMod" @click="setCreate()" style="display:flex; margin:0 auto 0 auto;">{{i18n("schedule.askCreate")}}</button>
|
|
<div v-if="!createMod"v-for="element in schedule" style="width:50%;margin-left:auto; margin-right:auto;" >
|
|
<div v-if="editElementID !== element.lessonID" style ="padding:15px 15px 15px 15px;">
|
|
<button v-if="inFuture(element)" @click="editElementID = element.lessonID;setModify(element);">
|
|
{{i18n("schedule.askChanges")}}
|
|
</button>
|
|
</div>
|
|
<div v-else>
|
|
<button @click="askChanges(1);"> {{i18n("courses.confirm")}} </button>
|
|
<button @click="editElementID= '';"> {{i18n("courses.back")}} </button>
|
|
</div>
|
|
<div class="listElement">
|
|
<div v-if="editElementID !== element.lessonID">
|
|
<div>
|
|
{{element.course.title}}
|
|
</div>
|
|
<div>{{formatDate(element.lessonStart)}}</div>
|
|
<div>{{getHoursMinutes(element.lessonStart)}}-{{getHoursMinutes(element.lessonEnd)}}
|
|
</div>
|
|
<div>{{element.local}}</div>
|
|
<div>{{i18n(element.lessonType)}}</div>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<div>{{element.course.title}}</div>
|
|
<div style="margin-bottom:20px;">
|
|
{{i18n("day")}}:
|
|
<input type="date" :min="minDate" :max="maxDate" v-model="toModify.day">
|
|
</div>
|
|
<div style="margin-bottom:20px;">
|
|
{{i18n("start")}}:
|
|
<input v-model="toModify.lessonStart" type="time" min="8:00" max="20:00"/>
|
|
</div>
|
|
<div style="margin-bottom:20px;">
|
|
{{i18n("end")}}:
|
|
<input v-model="toModify.lessonEnd" type="time" min="10:00" max="20:00" required />
|
|
</div>
|
|
<div style="margin-bottom:20px;">
|
|
{{i18n("Type")}}:
|
|
<select v-model="toModify.lessonType">
|
|
<option v-for="item in types" :value='item'>{{i18n(item)}}</option>
|
|
</select>
|
|
</div>
|
|
<div style="margin-bottom:20px;">
|
|
Local:
|
|
{{element.local}}
|
|
<div style="float:right;">
|
|
<button @click="askChanges(2)" class="delete"> {{i18n("schedule.askDeletion")}} </button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
.body {
|
|
width:100%;
|
|
margin-top:3.5%;
|
|
}
|
|
|
|
.listElement{
|
|
min-width:625px;
|
|
border:2px solid black;
|
|
font-size:25px;
|
|
color:white;
|
|
padding:20px;
|
|
background-color:rgb(50,50,50);
|
|
border-radius:20px;
|
|
margin-bottom:10px;
|
|
|
|
}
|
|
|
|
input, select{
|
|
padding:10px 10px 10px 10px;
|
|
font-size:25px;
|
|
cursor: pointer;
|
|
border:none;
|
|
border-radius:15px;
|
|
}
|
|
button{
|
|
font-size:15px;
|
|
height:auto;
|
|
width:100px;
|
|
border:none;
|
|
border-radius:20px;
|
|
|
|
}
|
|
|
|
.delete{
|
|
grid-area:delete;
|
|
background-color:rgb(200,0,0);
|
|
}
|
|
button:hover{
|
|
opacity:0.8;
|
|
}
|
|
|
|
</style>
|