|
|
|
@ -1,12 +1,49 @@
|
|
|
|
|
<script setup>
|
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
import {getDifferenceTime,lastDateOfMonth,formatDate,getFirstDay,sortByDate,matrixFromList,sundayToTheEnd,getMarginTop,getHoursMinutes, monthFromList} from '../scheduleFunctions.js'
|
|
|
|
|
import {getAllSchedule} from "@/rest/scheduleRest.js";
|
|
|
|
|
import {getAllSchedule, getOwnSchedule, getCurriculumSchedule} from "@/rest/scheduleRest.js";
|
|
|
|
|
import {getLessons, getOwnedLessons } from "@/rest/lessonSchedule.js"
|
|
|
|
|
import {isLogged, getSelf} from "@/rest/Users.js"
|
|
|
|
|
import {getAllCurriculums} from "@/rest/curriculum.js"
|
|
|
|
|
|
|
|
|
|
const log = await isLogged();
|
|
|
|
|
const schedule = ref();
|
|
|
|
|
const shift = ref(getFirstDay(new Date()).getDay());
|
|
|
|
|
let value = 1;
|
|
|
|
|
const len = ref(lastDateOfMonth(new Date()));
|
|
|
|
|
const scheduleByWeek = ref();
|
|
|
|
|
const month = ref();
|
|
|
|
|
const mondayOfWeek =ref(getMonday(new Date()))
|
|
|
|
|
const currentDate = ref(new Date())
|
|
|
|
|
const allSchedules = await getAllSchedule();
|
|
|
|
|
let counter = 0;
|
|
|
|
|
const ownSchedule = ref();
|
|
|
|
|
console.log(allSchedules)
|
|
|
|
|
|
|
|
|
|
const allSchedule = await getAllSchedule();
|
|
|
|
|
let user;
|
|
|
|
|
|
|
|
|
|
if(log){
|
|
|
|
|
user = await getSelf();
|
|
|
|
|
if(user.role == "Admin" || user.role == "Secretary" || user.role == "InscriptionService"){
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
else{
|
|
|
|
|
|
|
|
|
|
if(user.role == "Teacher"){
|
|
|
|
|
ownSchedule.value = await getOwnedLessons();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(user.role == "Student"){
|
|
|
|
|
const trueSchedule = await getOwnSchedule();
|
|
|
|
|
ownSchedule.value = trueSchedule.lessons;}
|
|
|
|
|
|
|
|
|
|
schedule.value = ownSchedule.value;
|
|
|
|
|
scheduleByWeek.value = sundayToTheEnd(matrixFromList(schedule.value,mondayOfWeek.value));
|
|
|
|
|
month.value = monthFromList(schedule.value,new Date().getMonth());
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const schedule = ref(allSchedule[0].lessons)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const display =ref("Month")
|
|
|
|
@ -14,7 +51,7 @@
|
|
|
|
|
const days = ["Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi","Dimanche"];
|
|
|
|
|
const months = ["Janvier","Fevrier","Mars","Avril",'Mai',"Juin","Juillet","Aout","Septembre","Octobre","Novembre","Decembre"]
|
|
|
|
|
const firstDayOfMonth = ref(getFirstDay(new Date()))
|
|
|
|
|
|
|
|
|
|
const monthDone = ref(false);
|
|
|
|
|
function getMonday(d) {
|
|
|
|
|
d = new Date(d);
|
|
|
|
|
d.setHours(0,0,0);
|
|
|
|
@ -28,10 +65,13 @@
|
|
|
|
|
day.setDate(day.getDate() + d );
|
|
|
|
|
return day;
|
|
|
|
|
}
|
|
|
|
|
const mondayOfWeek =ref(getMonday(new Date()))
|
|
|
|
|
const currentDate = ref(new Date())
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function verifUser(){
|
|
|
|
|
if(log)
|
|
|
|
|
return (user.role == "Student" || user.role == "Teacher");
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
function isNotCourse(element){
|
|
|
|
|
return element==null;
|
|
|
|
|
}
|
|
|
|
@ -41,42 +81,67 @@
|
|
|
|
|
const hour = element.lessonEnd.substring(3,5) -element.lessonStart.substring(3,5);
|
|
|
|
|
return (element.lessonEnd - element.lessonStart)%2;
|
|
|
|
|
}
|
|
|
|
|
const scheduleByWeek = ref(sundayToTheEnd(matrixFromList(schedule.value,mondayOfWeek.value)));
|
|
|
|
|
const month = ref(monthFromList(schedule.value,new Date().getMonth()));
|
|
|
|
|
const shift = ref(getFirstDay(new Date()).getDay());
|
|
|
|
|
let value = 1;
|
|
|
|
|
const len = ref(lastDateOfMonth(new Date()));
|
|
|
|
|
|
|
|
|
|
function displayOwnSchedule(){
|
|
|
|
|
schedule.value = ownSchedule.value;
|
|
|
|
|
scheduleByWeek.value = sundayToTheEnd(matrixFromList(schedule.value,mondayOfWeek.value));
|
|
|
|
|
month.value = monthFromList(schedule.value,currentDate.value.getMonth());
|
|
|
|
|
value = 1;
|
|
|
|
|
counter=0;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async function changeSchedule(){
|
|
|
|
|
scheduleByWeek.value = sundayToTheEnd(matrixFromList(schedule.value,mondayOfWeek.value));
|
|
|
|
|
month.value = monthFromList(schedule.value,currentDate.value.getMonth());
|
|
|
|
|
value = 1;
|
|
|
|
|
counter=0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function changeWeek(i){
|
|
|
|
|
const temp = getAnyDays(i);
|
|
|
|
|
mondayOfWeek.value = temp;
|
|
|
|
|
scheduleByWeek.value = sundayToTheEnd(matrixFromList(schedule.value, mondayOfWeek.value))
|
|
|
|
|
if(scheduleByWeek.value != null)
|
|
|
|
|
scheduleByWeek.value = sundayToTheEnd(matrixFromList(schedule.value, mondayOfWeek.value))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function changeMonth(i){
|
|
|
|
|
const temp = currentDate.value;
|
|
|
|
|
currentDate.value = new Date( ( 0< temp.getMonth()+i < 13 ? temp.getFullYear() : temp.getFullYear()+i), (0< temp.getMonth()+i <13 ? temp.getMonth()+i : 12 ),1);
|
|
|
|
|
month.value = monthFromList(schedule.value,currentDate.value.getMonth())
|
|
|
|
|
shift.value= getFirstDay(currentDate.value).getDay();
|
|
|
|
|
len.value= lastDateOfMonth(currentDate.value);
|
|
|
|
|
value = 1;
|
|
|
|
|
counter = 0;
|
|
|
|
|
if(month.value != null){
|
|
|
|
|
month.value = monthFromList(schedule.value,currentDate.value.getMonth())}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function isAValue(){
|
|
|
|
|
if(value-shift.value<0){
|
|
|
|
|
if(value-shift.value<0 ){
|
|
|
|
|
counter++;
|
|
|
|
|
value++;
|
|
|
|
|
return false
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
if(value-shift.value<len.value){
|
|
|
|
|
value++;
|
|
|
|
|
counter++;
|
|
|
|
|
return true;}
|
|
|
|
|
|
|
|
|
|
if(value-shift.value>=len.value){
|
|
|
|
|
return false
|
|
|
|
|
if(value-shift.value==len.value){
|
|
|
|
|
counter++;
|
|
|
|
|
|
|
|
|
|
if(counter> 35){
|
|
|
|
|
counter=1;
|
|
|
|
|
value = 2;
|
|
|
|
|
return true; }
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
<template>
|
|
|
|
|
<div class="grid">
|
|
|
|
@ -87,7 +152,8 @@
|
|
|
|
|
<th>
|
|
|
|
|
<button @click="changeWeek(-7)">Previous</button>
|
|
|
|
|
<button @click="changeWeek(7)">Next</button>
|
|
|
|
|
<button @click="mondayOfWeek = getMonday(new Date()); scheduleByWeek = sundayToTheEnd(matrixFromList(schedule.value, mondayOfWeek))">Current</button>
|
|
|
|
|
<button @click="mondayOfWeek = getMonday(new Date());
|
|
|
|
|
scheduleByWeek != null ? scheduleByWeek = sundayToTheEnd(matrixFromList(schedule.value, mondayOfWeek)) : null;">Current</button>
|
|
|
|
|
|
|
|
|
|
</th>
|
|
|
|
|
<th class="header" v-for='d,index in 7' >
|
|
|
|
@ -105,8 +171,8 @@
|
|
|
|
|
<th class="hour">{{8 + index}}:00-{{9+index}}:00</th>
|
|
|
|
|
<td v-for="m in 7"></td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
<div class="courseGrid">
|
|
|
|
|
</table>
|
|
|
|
|
<div v-if="scheduleByWeek != null " class="courseGrid">
|
|
|
|
|
<div class="dayCourse" v-for="element in scheduleByWeek">
|
|
|
|
|
<template v-for="i,index in element.length">
|
|
|
|
|
<div class="course" v-bind:style="{background:element[index].color,
|
|
|
|
@ -147,14 +213,8 @@
|
|
|
|
|
</tr>
|
|
|
|
|
<tr v-for="n in 5" style="height:16.67%;">
|
|
|
|
|
<td v-for="m,i in 7" style="height:16.67%; position:relative;">
|
|
|
|
|
|
|
|
|
|
<div v-if="isAValue()" style="top:0; right:2%; border-radius:20%;color:rgb(200,200,200) ; position:absolute;z-index:50;">{{value-shift}}</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div style="overflow-y:scroll; height:100%;" >
|
|
|
|
|
<div v-if="isAValue()" style="top:0; right:2%; border-radius:20%;color:rgb(200,200,200) ; position:absolute;z-index:50;">{{value-shift}}</div>
|
|
|
|
|
<div v-if="month != null" style="overflow-y:scroll; height:100%;" >
|
|
|
|
|
<template v-for="element in month[value-shift]">
|
|
|
|
|
<div class="course" v-bind:style="{background:element.color, height:100+'%'}">
|
|
|
|
|
|
|
|
|
@ -173,8 +233,7 @@
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
</table>
|
|
|
|
|
</template>
|
|
|
|
@ -186,6 +245,11 @@
|
|
|
|
|
<div class="options">
|
|
|
|
|
<button v-if="display=='Week'" @click="display='Month'">Month</button>
|
|
|
|
|
<button v-if="display=='Month'" @click="display='Week'; value=1;">Week</button>
|
|
|
|
|
<button v-if="verifUser()" @click="displayOwnSchedule()">OwnSchedule</button>
|
|
|
|
|
<select @change="changeSchedule()" v-model="schedule">
|
|
|
|
|
<option v-for="item in allSchedules" :value='item.lessons'>{{item.curriculum.option}}</option>
|
|
|
|
|
</select>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|