Clyde/frontend/src/Apps/Schedule.vue

<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 {getOnesLessons, getOwnedLessons } from "@/rest/lessonSchedule.js"
  import {isLogged, getSelf,getTeachers} from "@/rest/Users.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 == "Admin" || user.role == "Secretary" || user.role == "InscriptionService"){
    }

    else{

      if(user.role == "Teacher"){
         ownSchedule.value  = await getOwnedLessons(); 
      }

      if(user.role == "Student"){
        ownSchedule.value = await getOnesLessons();}

      schedule.value = ownSchedule.value;

      schedule.value.sort((a,b) => sortByDate(a,b));
      scheduleByWeek.value = sundayToTheEnd(matrixFromList(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 = ["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);
    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 isNotCourse(element){
    return element==null;
  }
  

  function durationCourse(element){
    const hour = element.lessonEnd.substring(3,5) -element.lessonStart.substring(3,5);
    return (element.lessonEnd - element.lessonStart)%2;
  }
  
  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;
      done = false;

  }

  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
  }

  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();

  }
    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(matrixFromList(jsonSchedule.value,mondayOfWeek.value));
    month.value = monthFromList(jsonSchedule.value,new Date().getMonth());
  }

  function switchToJSON(){
    jsonMod.value = true;
    scheduleByWeek.value = sundayToTheEnd(matrixFromList(jsonSchedule.value,mondayOfWeek.value));
    month.value = monthFromList(jsonSchedule.value,new Date().getMonth());

  }




  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;}
  }


  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(matrixFromList(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(matrixFromList(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(matrixFromList(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
  }

    
  async function changeSchedule(){
      schedule.value =trueSchedule.value.lessons;
      curriculum.value = trueSchedule.value.curriculum;
          
      scheduleByWeek.value = sundayToTheEnd(matrixFromList(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;
  }
  
  function changeWeek(i){
    const temp = getAnyDays(i);
    mondayOfWeek.value = temp;
    if(scheduleByWeek.value != null)
      if(jsonMod.value){
        scheduleByWeek.value = sundayToTheEnd(matrixFromList(jsonSchedule.value, mondayOfWeek.value))}
      else{
        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);
    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())}
  
  }


  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)">Previous</button>
            <button @click="changeWeek(7)">Next</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' >
            <p class="childHeader">
            {{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>{{months[currentDate.getMonth()]}} {{currentDate.getFullYear()}}</div>            
            <button style="position:absolute; top:0; left:0;" @click="changeMonth(-1)">previous</button>
            <button  style="position:absolute; bottom:0; left:0;"@click="changeMonth(1)">next</button>

            </th>

          </tr>
          <tr style="background-color:rgb(24,24,24); height:8.33%;" >
          <th class="header"  v-for='d,index in 7' >
            {{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(matrixFromList(schedule.value, mondayOfWeek)) : null;">Current</button>
            

        <template  v-for="i,index in 7">
          <div class="body" style="background-color:#181818;">{{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" >{{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 ? days[6] : 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;">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'">Week</button>
      <button v-if="display=='Month'" @click="display='Week'; value=1;">Month</button>
      <button v-if="format == 'Grid'" @click="format ='List'">Grid</button>
      <button v-if="format == 'List'" @click ="format = 'Grid'">List</button>
      <button v-if="verifUser()" @click="jsonMod=false ;displayOwnSchedule();">OwnSchedule</button>
      <button v-if="importedJSON != null" @click="switchToJSON()">Switch to JSON FILE</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">{{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'>{{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;" >More infos</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);">Teacher(s)</div>
        <div class="body" style="background-color:#484848;">
          <div>{{focus.course.owner.lastName}}</div>
          <div v-for="element in focus.course.owner.assistants">
            {{element.lastName}}
          </div>
        </div>
        <div class="body"  style="background-color:rgb(50,50,50);">Lessons</div>
       <div class="body" style="background-color:#484848;"v-for="lesson in focusLessons">
          {{ getHoursMinutes(lesson.lessonStart)}}-{{getHoursMinutes(lesson.lessonEnd)}}
          {{ lesson.local}}
          {{lesson.lessonType}}
        </div>  

      </div>
    </div>
  </div>
</template>
<style scoped>
  .grid{
    min-width:1200px;
    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>