802 lines
24 KiB
Vue
802 lines
24 KiB
Vue
|
|
<!----------------------------------------------------
|
|
File: Schedule.vue
|
|
Author: William Karpinski
|
|
Scope: Extension Horaire
|
|
Description: Schedules Page accessed by everyone
|
|
----------------------------------------------------->
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import {getDifferenceTime,lastDateOfMonth,formatDate,getFirstDay,sortByDate,weekFromList,sundayToTheEnd,getMarginTop,getHoursMinutes, monthFromList} from '../scheduleFunctions.js'
|
|
import {getAllSchedule} from "@/rest/scheduleRest.js";
|
|
import {getOnesLessons, getOwnedLessons } from "@/rest/lessonSchedule.js"
|
|
import {isLogged, getSelf,getTeachers} from "@/rest/Users.js"
|
|
import {getUserActualCourses} from "@/rest/courses.js";
|
|
import {getcurriculum} from "@/rest/curriculum.js";
|
|
import i18n from "../i18n.js";
|
|
|
|
const trueSchedule = ref()
|
|
const log = await isLogged();
|
|
const schedule = ref();
|
|
const importedJSON = ref();
|
|
const jsonSchedule = ref();
|
|
const jsonMod = ref(false);
|
|
const curriculum = ref();
|
|
const shift = ref(getFirstDay(new Date()).getDay());
|
|
let value = 1;
|
|
let done = false;
|
|
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();
|
|
const filter = ref("null");
|
|
const subFilter = ref("null");
|
|
const focus = ref();
|
|
const focusLessons = ref();
|
|
let user;
|
|
|
|
if(log){
|
|
user = await getSelf();
|
|
if(user.role == "Teacher" || user.role == "Student"){
|
|
|
|
if(user.role == "Teacher"){
|
|
ownSchedule.value = await getOwnedLessons();
|
|
}
|
|
|
|
if(user.role == "Student"){
|
|
let test = await getUserActualCourses();
|
|
console.log(test);
|
|
ownSchedule.value = await getOnesLessons();}
|
|
|
|
schedule.value = ownSchedule.value;
|
|
|
|
schedule.value.sort((a,b) => sortByDate(a,b));
|
|
scheduleByWeek.value = sundayToTheEnd(weekFromList(schedule.value,mondayOfWeek.value));
|
|
month.value = monthFromList(schedule.value,new Date().getMonth());
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const display =ref("Week");
|
|
const format = ref("Grid");
|
|
const filters = ["Type","Teacher","Course"];
|
|
const types = ["TP","TD","Course","Exam"];
|
|
const teachers = await getTeachers() ;
|
|
const courses = ref();
|
|
|
|
|
|
if(curriculum.value != null){
|
|
courses.value = curriculum.value.courses;
|
|
}
|
|
const days = ["monday","tuesday","wednesday","thursday","friday","saturday","sunday"];
|
|
const months = ["january","february","march","april",'may',"june","july","august","september","october","november","december"]
|
|
function getMonday(d) {
|
|
d = new Date(d);
|
|
d.setHours(0,0,0);
|
|
var day = d.getDay(),
|
|
diff = d.getDate() - day + (day == 0 ? -6 : 1);
|
|
return new Date(d.setDate(diff));
|
|
}
|
|
|
|
function getAnyDays(d){
|
|
var day = new Date(mondayOfWeek.value);
|
|
day.setDate(day.getDate() + d );
|
|
return day;
|
|
}
|
|
|
|
|
|
function verifUser(){
|
|
if(log)
|
|
return (user.role == "Student" || user.role == "Teacher");
|
|
return false
|
|
}
|
|
function displayOwnSchedule(){
|
|
schedule.value = ownSchedule.value;
|
|
scheduleByWeek.value = sundayToTheEnd(weekFromList(schedule.value,mondayOfWeek.value));
|
|
month.value = monthFromList(schedule.value,currentDate.value.getMonth());
|
|
value = 1;
|
|
counter=0;
|
|
done = false;
|
|
|
|
}
|
|
|
|
/*
|
|
* Create a JSON from a schedule
|
|
*/
|
|
function createJSON(){
|
|
const json = {"data":[]};
|
|
for(let element in schedule.value){
|
|
let item = {};
|
|
item["title"] = schedule.value[element].course.title + "\n" + schedule.value[element].course.owner.lastName+ "\n" + schedule.value[element].local
|
|
item["start"] = schedule.value[element].lessonStart;
|
|
item["end"] = schedule.value[element].lessonEnd;
|
|
item["color"] = schedule.value[element].color;
|
|
json.data.push(item)
|
|
}
|
|
return json
|
|
}
|
|
|
|
/*
|
|
* Export a JSON
|
|
*/
|
|
|
|
function exportJSON(){
|
|
let json = createJSON();
|
|
const data = JSON.stringify(json);
|
|
const blob = new Blob([data], {type:"application/json"});
|
|
const a = document.createElement('a');
|
|
a.href = URL.createObjectURL(blob);
|
|
a.download = "Schedule.json";
|
|
a.click();
|
|
|
|
}
|
|
|
|
/*
|
|
* Used to convert a JSON imported to an object
|
|
*/
|
|
function onFileChange(e) {
|
|
let files = e.target.files || e.dataTransfer.files;
|
|
if (!files.length) return;
|
|
readFile(files[0]);
|
|
}
|
|
function readFile(file) {
|
|
let reader = new FileReader();
|
|
reader.onload = e => {
|
|
let json = JSON.parse(e.target.result);
|
|
importedJSON.value = json
|
|
createScheduleFromJSON();
|
|
jsonMod.value= true;
|
|
};
|
|
reader.readAsText(file);
|
|
|
|
|
|
}
|
|
|
|
function createScheduleFromJSON(){
|
|
let jsonBrut = importedJSON.value;
|
|
let toEventList = [];
|
|
for(let element in jsonBrut["data"]){
|
|
let temp = {}
|
|
temp["title"] = jsonBrut["data"][element].title;
|
|
temp["lessonStart"] = jsonBrut["data"][element].start;
|
|
temp["lessonEnd"] = jsonBrut["data"][element].end;
|
|
temp["color"] = jsonBrut["data"][element].color;
|
|
toEventList.push(temp);
|
|
}
|
|
jsonSchedule.value = toEventList;
|
|
scheduleByWeek.value = sundayToTheEnd(weekFromList(jsonSchedule.value,mondayOfWeek.value));
|
|
month.value = monthFromList(jsonSchedule.value,new Date().getMonth());
|
|
}
|
|
|
|
/*
|
|
* Display the JSON on the schedule
|
|
*/
|
|
function switchToJSON(){
|
|
jsonMod.value = true;
|
|
scheduleByWeek.value = sundayToTheEnd(weekFromList(jsonSchedule.value,mondayOfWeek.value));
|
|
month.value = monthFromList(jsonSchedule.value,new Date().getMonth());
|
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
* used to focus on a lesson when we click on it
|
|
*/
|
|
function lessonFocus(element){
|
|
if(!jsonMod.value){
|
|
focus.value = element;
|
|
var lessonsList = [];
|
|
for (let element in schedule.value){
|
|
if (schedule.value[element].course.courseID == focus.value.course.courseID){
|
|
lessonsList.push(schedule.value[element]);
|
|
}
|
|
}
|
|
focusLessons.value = lessonsList;}
|
|
}
|
|
|
|
/*
|
|
* convert the current date to a DATE object
|
|
*/
|
|
function dateOfMonth(i){
|
|
|
|
return new Date(currentDate.value.getFullYear(),currentDate.value.getMonth(),i);
|
|
}
|
|
|
|
function sortSchedule(){
|
|
schedule.value =trueSchedule.value.lessons;
|
|
if(filter.value =="Teacher"){
|
|
schedule.value = sortByTeacher(schedule.value,subFilter.value);
|
|
scheduleByWeek.value = sundayToTheEnd(weekFromList(schedule.value,mondayOfWeek.value));
|
|
month.value = monthFromList(schedule.value,currentDate.value.getMonth());
|
|
value = 1;
|
|
counter=0;
|
|
|
|
|
|
}
|
|
else if(filter.value =="Type"){
|
|
schedule.value = sortByType(schedule.value,subFilter.value);
|
|
scheduleByWeek.value = sundayToTheEnd(weekFromList(schedule.value,mondayOfWeek.value));
|
|
month.value = monthFromList(schedule.value,currentDate.value.getMonth());
|
|
value = 1;
|
|
counter=0;
|
|
|
|
|
|
|
|
}
|
|
else if(filter.value =="Course"){
|
|
schedule.value = sortByCourse(schedule.value,subFilter.value);
|
|
scheduleByWeek.value = sundayToTheEnd(weekFromList(schedule.value,mondayOfWeek.value));
|
|
month.value = monthFromList(schedule.value,currentDate.value.getMonth());
|
|
value = 1;
|
|
counter=0;
|
|
}
|
|
|
|
if(focus.value != null){
|
|
lessonFocus(focus.value)
|
|
}
|
|
}
|
|
|
|
function sortByType(lessons,type){
|
|
if(type == null){
|
|
return lessons;
|
|
}
|
|
const matrix = [];
|
|
for (let element in lessons){
|
|
if(lessons[element].lessonType == type){
|
|
matrix.push(lessons[element])
|
|
}
|
|
}
|
|
return matrix
|
|
}
|
|
|
|
|
|
|
|
|
|
function sortByCourse(lessons,course){
|
|
if(course == null){
|
|
return lessons;
|
|
}
|
|
const matrix = [];
|
|
for (let element in lessons){
|
|
if(lessons[element].course.courseID == course.courseID){
|
|
matrix.push(lessons[element])
|
|
}
|
|
}
|
|
return matrix
|
|
}
|
|
|
|
function sortByTeacher(lessons, teacher){
|
|
if(teacher == null){
|
|
return lessons;
|
|
}
|
|
const matrix = [];
|
|
for (let element in lessons){
|
|
if(lessons[element].course.owner.regNo == teacher.regNo){
|
|
matrix.push(lessons[element])
|
|
}
|
|
}
|
|
return matrix
|
|
}
|
|
|
|
/*
|
|
* Change the schedule filter
|
|
*/
|
|
async function changeSchedule(){
|
|
schedule.value =trueSchedule.value.lessons;
|
|
curriculum.value = trueSchedule.value.curriculum;
|
|
|
|
scheduleByWeek.value = sundayToTheEnd(weekFromList(schedule.value,mondayOfWeek.value));
|
|
month.value = monthFromList(schedule.value,currentDate.value.getMonth());
|
|
value = 1;
|
|
counter=0;
|
|
done = false;
|
|
courses.value = (await getcurriculum(curriculum.value.curriculumId)).courses;
|
|
filter.value = "null";
|
|
subFilter.value = "null"
|
|
focus.value = null;
|
|
focusLessons.value = null;
|
|
jsonMod.value = false;
|
|
}
|
|
/*
|
|
* change the week to display
|
|
*/
|
|
function changeWeek(i){
|
|
const temp = getAnyDays(i);
|
|
mondayOfWeek.value = temp;
|
|
if(scheduleByWeek.value != null)
|
|
if(jsonMod.value){
|
|
scheduleByWeek.value = sundayToTheEnd(weekFromList(jsonSchedule.value, mondayOfWeek.value))}
|
|
else{
|
|
scheduleByWeek.value = sundayToTheEnd(weekFromList(schedule.value, mondayOfWeek.value))}
|
|
|
|
}
|
|
|
|
/*
|
|
* change the month to display
|
|
*/
|
|
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);
|
|
shift.value= getFirstDay(currentDate.value).getDay();
|
|
len.value= lastDateOfMonth(currentDate.value);
|
|
value = 1;
|
|
counter = 0;
|
|
done=false;
|
|
if(month.value != null){
|
|
if(jsonMod.value){
|
|
month.value = monthFromList(jsonSchedule.value,currentDate.value.getMonth())}
|
|
}
|
|
else{
|
|
month.value = monthFromList(schedule.value,currentDate.value.getMonth())}
|
|
|
|
}
|
|
|
|
/*
|
|
* used to display correctly the dates of a month
|
|
*/
|
|
|
|
function isAValue(){
|
|
if(value-shift.value<0 ){
|
|
counter++;
|
|
value++;
|
|
return false;
|
|
}
|
|
if(value-shift.value<len.value){
|
|
value++;
|
|
counter++;
|
|
return true;}
|
|
|
|
if(value-shift.value==len.value){
|
|
done = true;
|
|
counter++;
|
|
|
|
|
|
if(counter> 35){
|
|
counter=1;
|
|
value = 2;
|
|
done = false;
|
|
return true; }
|
|
return false;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
<template>
|
|
<div class="grid">
|
|
<div class="schedule" v-if="format == 'Grid'">
|
|
<template v-if="display=='Week'">
|
|
<table class="table">
|
|
<tr style="background-color:rgb(24,24,24)">
|
|
<th>
|
|
<button @click="changeWeek(-7)">{{i18n("schedule.previous")}}</button>
|
|
<button @click="changeWeek(7)">{{i18n("schedule.next")}}</button>
|
|
<button @click="mondayOfWeek = getMonday(new Date());
|
|
scheduleByWeek != null ? scheduleByWeek = sundayToTheEnd(weekFromList(schedule.value, mondayOfWeek)) : null;">{{i18n("schedule.current")}}</button>
|
|
|
|
</th>
|
|
<th class="header" v-for='d,index in 7' >
|
|
<p class="childHeader">
|
|
{{i18n(days[index])}}
|
|
</p>
|
|
<p class="childHeader">
|
|
{{formatDate(getAnyDays(index))}}
|
|
</p>
|
|
</th>
|
|
|
|
|
|
</tr>
|
|
<tr v-for="(n,index) in 12">
|
|
<th class="hour">{{8 + index}}:00-{{9+index}}:00</th>
|
|
<td v-for="m in 7"></td>
|
|
</tr>
|
|
</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" @click.native="lessonFocus(element[index])" v-bind:style="{background:element[index].color,
|
|
|
|
height:((getDifferenceTime(element[index].lessonEnd,element[index].lessonStart)/7.2)-0.5)+'%', top:((getMarginTop(element, index, index-1)/7.20))+'%'}">
|
|
<div class="hourStart">
|
|
{{getHoursMinutes(element[index].lessonStart)}}
|
|
|
|
</div>
|
|
<div class="infos">
|
|
<p class="childInfos" >{{jsonMod ? element[index].title : element[index].course.title}}</p>
|
|
<p class="childInfos"v-if="!jsonMod">{{element[index].local}}</p>
|
|
<p class="childInfos"v-if="!jsonMod">{{element[index].lessonType}}</p>
|
|
<p class="childInfos"v-if="!jsonMod">{{element[index].course.owner.lastName}}</p>
|
|
|
|
</div>
|
|
<div class="hourEnd">
|
|
{{getHoursMinutes(element[index].lessonEnd)}}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<table class="table">
|
|
<tr style="background-color:rgb(24,24,24); height:8.33%;">
|
|
<th colspan="7" class="header">
|
|
<div>{{i18n(months[currentDate.getMonth()])}} {{currentDate.getFullYear()}}</div>
|
|
<button style="position:absolute; top:0; left:0;" @click="changeMonth(-1)">{{i18n("schedule.previous")}}</button>
|
|
<button style="position:absolute; bottom:0; left:0;"@click="changeMonth(1)">{{i18n("schedule.next")}}</button>
|
|
|
|
</th>
|
|
|
|
</tr>
|
|
<tr style="background-color:rgb(24,24,24); height:8.33%;" >
|
|
<th class="header" v-for='d,index in 7' >
|
|
{{i18n(days[index])}}
|
|
</th>
|
|
</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 v-if="month != null" style="overflow-y:scroll; height:100%;" >
|
|
<template v-for="element in month[value-shift]">
|
|
<div v-if="!done"class="course" @click.native="lessonFocus(element)" v-bind:style="{background:element.color, height:100+'%'}">
|
|
|
|
<div class="hourStart">
|
|
{{getHoursMinutes(element.lessonStart)}}
|
|
</div>
|
|
<div class="infos">
|
|
<p class="childInfos" >{{jsonMod ? element.title : element.course.title}}</p>
|
|
<p class="childInfos"v-if="!jsonMod">{{element.local}}</p>
|
|
<p class="childInfos"v-if="!jsonMod">{{element.lessonType}}</p>
|
|
<p class="childInfos"v-if="!jsonMod">{{element.course.owner.lastName}}</p>
|
|
|
|
</div>
|
|
<div class="hourEnd">
|
|
{{getHoursMinutes(element.lessonEnd)}}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</template>
|
|
</div>
|
|
<div class="schedule" v-else>
|
|
|
|
<div v-if="display == 'Week'">
|
|
<button @click="changeWeek(-7)">Previous</button>
|
|
<button @click="changeWeek(7)">Next</button>
|
|
<button @click="mondayOfWeek = getMonday(new Date());
|
|
scheduleByWeek != null ? scheduleByWeek = sundayToTheEnd(weekFromList(schedule.value, mondayOfWeek)) : null;">Current</button>
|
|
|
|
|
|
<template v-for="i,index in 7">
|
|
<div class="body" style="background-color:#181818;">{{i18n(days[index])}} {{formatDate(getAnyDays(index))}}
|
|
</div>
|
|
<template v-if="scheduleByWeek != null">
|
|
<div class="body" style="background-color:#353535;" >
|
|
<div class="containerList"v-for="n,j in scheduleByWeek[index].length" @click.native="lessonFocus(scheduleByWeek[index][j])" >
|
|
<div class="colorList" v-bind:style="{background:scheduleByWeek[index][j].color}"></div>
|
|
<div class="hoursList">{{ getHoursMinutes(scheduleByWeek[index][j].lessonStart)}}-{{getHoursMinutes(scheduleByWeek[index][j].lessonEnd)}}</div>
|
|
<div class="titleList">{{scheduleByWeek[index][j].course.title}}</div>
|
|
<div class="teacherList">{{scheduleByWeek[index][j].course.owner.lastName}}</div>
|
|
<div class="localList">{{scheduleByWeek[index][j].local}}</div>
|
|
<div class="typeList">{{scheduleByWeek[index][j].lessonType}}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
|
|
|
|
|
|
<div v-if="display == 'Month'">
|
|
<button @click="changeMonth(-1)">Previous</button>
|
|
<button @click="changeMonth(1)">Next</button>
|
|
<div class="body" >{{i18n(months[currentDate.getMonth()])}} {{currentDate.getFullYear()}}</div>
|
|
|
|
<template v-for="i,index in lastDateOfMonth(currentDate.getMonth())-1">
|
|
<div class="body" style="background-color:#181818;">{{ dateOfMonth(i).getDay()-1== -1 ? i18n(days[6]) : i18n(days[dateOfMonth(i).getDay()-1]) }} {{formatDate(dateOfMonth(i))}}
|
|
</div>
|
|
<template v-if="scheduleByWeek != null">
|
|
<div class="body" style="background-color:#353535;" >
|
|
<div class="containerList" v-for="n,j in month[i].length" @click.native="lessonFocus( month[i][j])">
|
|
<div class="colorList" v-bind:style="{background:month[i][j].color}"></div>
|
|
<div class="hoursList">{{ getHoursMinutes(month[i][j].lessonStart)}}-{{getHoursMinutes(month[i][j].lessonEnd)}}</div>
|
|
<div class="titleList">{{month[i][j].course.title}}</div>
|
|
<div class="teacherList">{{month[i][j].course.owner.lastName}}</div>
|
|
<div class="localList">{{month[i][j].local}}</div>
|
|
<div class="typeList">{{month[i][j].lessonType}}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="options">
|
|
<div class="settings">
|
|
<div class="body" style="background-color:rgb(50,50,50);margin:5% 0 5% 0;">{{i18n("schedule.settings")}}</div>
|
|
<select @change="changeSchedule()" v-model="trueSchedule">
|
|
<option v-for="item in allSchedules" :value='item'>{{item.curriculum.option}}-{{item.curriculum.year}}</option>
|
|
</select>
|
|
<button v-if="display=='Week'" @click="display='Month'">{{i18n("Week")}}</button>
|
|
<button v-if="display=='Month'" @click="display='Week'; value=1;">{{i18n("Month")}}</button>
|
|
<button v-if="format == 'Grid'" @click="format ='List'">{{i18n("Grid")}}</button>
|
|
<button v-if="format == 'List'" @click ="format = 'Grid'">{{i18n("List")}}</button>
|
|
<button v-if="verifUser()" @click="jsonMod=false ;displayOwnSchedule();">{{i18n("OwnSchedule")}}</button>
|
|
<button v-if="importedJSON != null" @click="switchToJSON()">{{i18n("SwitchToJSON")}}</button>
|
|
|
|
<select v-if="schedule != null && !jsonMod" @change="subFilter = 'null'" v-model="filter">
|
|
<option :value ="null">No Filter</option>
|
|
<option v-for="item in filters" :value="item">{{i18n(item)}}</option>
|
|
</select>
|
|
<select @change="sortSchedule()" v-if="filter == 'Teacher'" v-model="subFilter">
|
|
<option :value ="null">No Filter</option>
|
|
<option v-for="item in teachers" :value=item>{{item.lastName}}</option>
|
|
</select>
|
|
<select @change="sortSchedule()" v-if="filter == 'Course'" v-model="subFilter">
|
|
<option :value ="null">No Filter</option>
|
|
<option v-for="item in courses" :value=item>{{item.title}}</option>
|
|
</select>
|
|
<select @change="sortSchedule()" v-if="filter == 'Type'" v-model="subFilter">
|
|
<option :value ="null">No Filter</option>
|
|
<option v-for="item in types" :value='item'>{{i18n(item)}}</option>
|
|
</select>
|
|
<button @click="exportJSON()" >Export JSON</button>
|
|
|
|
<div style="color:white;">IMPORT JSON</div>
|
|
<input type="file" @change="onFileChange" accept="application/JSON" ></input>
|
|
|
|
|
|
</div>
|
|
<div v-if="focus != null && !jsonMod" class="moreInfos">
|
|
<div class="body" style="background-color:rgb(50,50,50); height:10%; font-size:2em;" >{{i18n("request.moreInfos")}}</div>
|
|
<div class="body" :style="{background:focus.color,height:auto,fontSize:1.2+'em', alignItems:center}">
|
|
{{focus.course.title}}</div>
|
|
|
|
<div class="body" style="background-color:rgb(50,50,50);">{{i18n("schedule.teachers")}}</div>
|
|
<div class="body" style="background-color:#484848;">
|
|
<div>{{focus.course.owner.lastName}}</div>
|
|
<div v-for="element in focus.course.assistants">
|
|
{{element.lastName}}
|
|
</div>
|
|
</div>
|
|
<div class="body" style="background-color:rgb(50,50,50);">{{i18n("schedule.courses")}}</div>
|
|
<div class="body" style="background-color:#484848;"v-for="lesson in focusLessons">
|
|
{{formatDate(lesson.lessonStart)}}
|
|
{{ getHoursMinutes(lesson.lessonStart)}}-{{getHoursMinutes(lesson.lessonEnd)}}
|
|
{{ lesson.local}}
|
|
{{i18n(lesson.lessonType.toString())}}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.grid{
|
|
min-width:1400px;
|
|
display:grid;
|
|
margin-top:2%;
|
|
align-items:center;
|
|
justify-content:center;
|
|
grid-template-columns:72% 14.5%;
|
|
column-gap:2vw;
|
|
overflow:hidden;
|
|
grid-template-areas:"schedule options";
|
|
}
|
|
.schedule{
|
|
min-width:900px;
|
|
position:relative;
|
|
overflow-y:scroll;
|
|
border-radius:20px;
|
|
grid-area:schedule;
|
|
width:100%;
|
|
height:85vh;
|
|
background-color:rgba(255,255,255,0.1);
|
|
}
|
|
.options{
|
|
display:grid;
|
|
border-radius:20px;
|
|
grid-area:options;
|
|
background-color:rgba(255,255,255,0.1);
|
|
width:100%;
|
|
height:85vh;
|
|
min-width:240px;
|
|
|
|
grid-template-rows:40% 60%;
|
|
}
|
|
|
|
.settings{
|
|
display:flex;
|
|
flex-direction:column;
|
|
width:80%;
|
|
margin:0 auto 0 auto;
|
|
}
|
|
|
|
|
|
.settings select,.settings button{
|
|
margin-top:2%;
|
|
width:100%;
|
|
}
|
|
|
|
.moreInfos{
|
|
width:90%;
|
|
display:flex;
|
|
flex-direction:column;
|
|
margin:0 auto 0 auto;
|
|
overflow-y:scroll;
|
|
overflow-x:hidden;
|
|
}
|
|
|
|
.table{
|
|
width:100%;
|
|
height:100%;
|
|
border-spacing:0;
|
|
border-collapse:separate;
|
|
border-radius: 20px;
|
|
border: 2px solid black
|
|
}
|
|
|
|
.hour{
|
|
background-color:rgb(72,72,72)
|
|
|
|
}
|
|
|
|
.header{
|
|
width:12.5%;
|
|
color:#FFFFFF;
|
|
position:relative;
|
|
}
|
|
|
|
|
|
.childHeader{
|
|
margin-top:0;
|
|
margin-bottom:0;
|
|
max-height:14.28%
|
|
|
|
}
|
|
table th:not(:last-child),
|
|
table td:not(:last-child) {
|
|
border-right: 1px solid black;
|
|
}
|
|
|
|
table tr:not(:last-child)>td,
|
|
table tr:not(:last-child)>th
|
|
{
|
|
border-bottom:1px solid black;
|
|
}
|
|
|
|
.courseGrid{
|
|
top:13.75%;
|
|
left:12.5%;
|
|
position:absolute;
|
|
width:87.5%;
|
|
height:86.25%;
|
|
display:grid;
|
|
grid-template-columns:repeat(7,1fr);
|
|
}
|
|
|
|
|
|
.course{
|
|
position:relative;
|
|
border: 1px solid black;
|
|
border-radius:10px;
|
|
width:90%;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
display:grid;
|
|
grid-template-rows:1fr 1fr 1fr;
|
|
}
|
|
|
|
.dayCourse{
|
|
display:block;
|
|
}
|
|
|
|
.infos{
|
|
height:100%;
|
|
width:100%;
|
|
font-size:0.75em;
|
|
display:flex;
|
|
flex-direction:column;
|
|
align-items:center;
|
|
justify-content:center;
|
|
position:absolute;
|
|
}
|
|
|
|
.childInfos{
|
|
text-align:center;
|
|
margin-top:0%;
|
|
margin-bottom:0%;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.hourStart{
|
|
background-color:rgb(200,200,200);
|
|
border-radius:5px;
|
|
position:absolute;
|
|
top:2%;
|
|
left:2%;
|
|
font-size:0.75em;
|
|
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.hourEnd{
|
|
background-color:rgb(200,200,200);
|
|
border-radius:3px;
|
|
position:absolute;
|
|
bottom:2%;
|
|
left:2%;
|
|
font-size:0.7em;
|
|
}
|
|
|
|
.containerList{
|
|
color:white;
|
|
height:100px;
|
|
font-size:20px;
|
|
display:grid;
|
|
grid-template-columns:5vw auto auto auto auto auto;
|
|
grid-template-areas:
|
|
"color hours title teacher local type";
|
|
|
|
}
|
|
|
|
.colorList{
|
|
grid-area:color;
|
|
align-self:center;
|
|
|
|
width:75%;
|
|
height:75%;
|
|
border:1px solid black;
|
|
border-radius:20%;
|
|
}
|
|
|
|
.hoursList{
|
|
grid-area:hours;
|
|
align-self:center;
|
|
}
|
|
|
|
|
|
.titleList{
|
|
grid-area:title;
|
|
align-self:center;
|
|
}
|
|
|
|
.teacherList {
|
|
grid-area:teacher;
|
|
align-self:center;
|
|
}
|
|
.localList{
|
|
grid-area:local;
|
|
align-self:center;
|
|
}
|
|
|
|
.typeList{
|
|
grid-area:type;
|
|
align-self:center;
|
|
}
|
|
.body {
|
|
color:white;
|
|
margin-top:2%;
|
|
width:98%;
|
|
border:2px solid black;
|
|
border-radius:9px;
|
|
text-align:center;
|
|
}
|
|
|
|
|
|
</style>
|