Request and changes
This commit is contained in:
270
frontend/src/Apps/ManageOwnLessons.vue
Normal file
270
frontend/src/Apps/ManageOwnLessons.vue
Normal file
@ -0,0 +1,270 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import i18n from '@/i18n.js'
|
||||
import {formatDate,getHoursMinutes} 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());
|
||||
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();
|
||||
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
|
||||
}
|
||||
function invertedFormatDate(date) {
|
||||
var d = new Date(date),
|
||||
month = '' + (d.getMonth() + 1),
|
||||
day = '' + d.getDate(),
|
||||
year = d.getFullYear();
|
||||
|
||||
if (month.length < 2)
|
||||
month = '0' + month;
|
||||
if (day.length < 2)
|
||||
day = '0' + day;
|
||||
|
||||
return [year, month, day].join('-');
|
||||
}
|
||||
function createLessonEvent(date,hour){
|
||||
const str = date.concat(' ',hour);
|
||||
return new Date(str);
|
||||
}
|
||||
|
||||
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)))
|
||||
|
||||
|
||||
const pattern = {
|
||||
"lessonId":null,
|
||||
"course": null,
|
||||
"day":null,
|
||||
"lessonStart": null,
|
||||
"lessonEnd": null,
|
||||
"lessonType": null,
|
||||
}
|
||||
|
||||
|
||||
const patternRequest ={
|
||||
"user": user,
|
||||
"state": "Pending",
|
||||
"requestType": null,
|
||||
"lessonId":null,
|
||||
"lessonType":null,
|
||||
"lessonStart":null,
|
||||
"lessonEnd":null,
|
||||
"color":null,
|
||||
"course":null,}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
async function createLessonRequest(){
|
||||
if(requestType.value === 0 || requestType.value === 1){
|
||||
//modify
|
||||
requestBuffer.value.color = colors[toModify.value.lessonType] ;
|
||||
requestBuffer.value.requestType = requestType.value;
|
||||
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) {
|
||||
//delete
|
||||
requestBuffer.value.lessonId = editElementID;
|
||||
requestBuffer.value.requestType = requestType.value;
|
||||
}
|
||||
await createRequest(requestBuffer.value);
|
||||
editElementID.value = '';
|
||||
}
|
||||
|
||||
|
||||
async function askChanges(i){
|
||||
requestType.value= i;
|
||||
await createLessonRequest()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="body">
|
||||
<button @click="createMod = !createMod">Ask Create Request</button>
|
||||
<div v-if="createMod">
|
||||
<form class="listElement" style="width:40%; margin:0 auto 0 auto;">
|
||||
<div style="margin-bottom:20px;">
|
||||
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;">
|
||||
Lesson :
|
||||
<select v-if="curriculum != null" v-model="toModify.course">
|
||||
<option v-for="item in courses" :value='item'>{{item.title}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="margin-bottom:20px;">
|
||||
Day:
|
||||
<input type="date" :min="minDate" :max="maxDate" v-model="toModify.day">
|
||||
</div>
|
||||
<div style="margin-bottom:20px;">
|
||||
Start:
|
||||
<input v-model="toModify.lessonStart" type="time" min="08:00" max="18:00" required />
|
||||
</div>
|
||||
<div style="margin-bottom:20px;">
|
||||
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'>{{item}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<button class="create" @click="createMod=!createMod; askChanges(1);"> {{i18n("courses.confirm")}} </button>
|
||||
<button style="float:right;" @click="createMod=!createMod">{{i18n("courses.back")}}</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<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);">
|
||||
Ask Changes
|
||||
</button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<button @click="askChanges(0);"> {{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>{{element.lessonType}}</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div>{{element.course.title}}</div>
|
||||
<div style="margin-bottom:20px;">
|
||||
Day:
|
||||
<input type="date" :min="minDate" :max="maxDate" v-model="toModify.day">
|
||||
</div>
|
||||
<div style="margin-bottom:20px;">
|
||||
Start:
|
||||
<input v-model="toModify.lessonStart" type="time" min="8:00" max="20:00"/>
|
||||
</div>
|
||||
<div style="margin-bottom:20px;">
|
||||
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'>{{item}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="margin-bottom:20px;">
|
||||
Local:
|
||||
{{element.local}}
|
||||
<div style="float:right;">
|
||||
<button @click="askChanges(2)" class="delete"> ask Deletion </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:50px;
|
||||
width:100px;
|
||||
border:none;
|
||||
border-radius:20px;
|
||||
|
||||
}
|
||||
|
||||
.delete{
|
||||
grid-area:delete;
|
||||
background-color:rgb(200,0,0);
|
||||
}
|
||||
button:hover{
|
||||
opacity:0.8;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user