Clyde/frontend/src/Apps/ManageSchedule.vue

<script setup>
import { ref } from 'vue'
import i18n from '@/i18n.js'
  import {getDifferenceTime,lastDateOfMonth,formatDate,getFirstDay,sortByDate,matrixFromList,sundayToTheEnd,getMarginTop,getHoursMinutes, monthFromList} from '../scheduleFunctions.js'
  import {getAllSchedule, getOwnSchedule, getCurriculumSchedule,addLessonToSchedule} from "@/rest/scheduleRest.js";
  import {getLessons, getOwnedLessons, createLesson } from "@/rest/lessonSchedule.js"
  import {isLogged, getSelf,getTeachers} from "@/rest/Users.js"
  import {getAllCurriculums, getcurriculum} from "@/rest/curriculum.js"
  import {getCourse} from "@/rest/courses.js"
  
  const trueSchedule = ref()
  const schedule = ref();
  const lessonFinder = ref();
  const curriculum = ref();
  const allSchedules = await getAllSchedule();
  const filter = ref("null");
  const subFilter = ref("null");
  const lesson = ref();
  const filters = ["Type","Teacher","Course"];
  const types = ["TP","TD","Course","Exam"];
  const locals = ["A0B1","A1B1","A2B1","A0B2"]
  const teachers = await getTeachers() ;
  const courses = ref();
  
  const createMod = ref(false);
  const deleteMod = ref(false);

const colors = {"TP":"rgb(36,175,255)","TD":"rgb(255,36,175)","Exam":"rgb(175,255,36)","Course":"rgb(255,36,175)"}
const currentDate = new Date();



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

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)))
console.log(minDate.value)

function createLessonEvent(date,hour){
    const str = date.concat(' ',hour);
    return new Date(str);
}



  const pattern = {
    "course": null,
    "day":null,
    "lessonStart": null,
    "lessonEnd": null,
    "lessonType": null,
    "local": null,
    "color": null,
  }

  const lessonBuffer = ref(Object.assign({}, pattern));

async function setCourses(){
  courses.value = (await getcurriculum(curriculum.value.curriculumId)).courses
}

  function sortSchedule(){
    schedule.value =trueSchedule.value.lessons;
    if(filter.value =="Teacher"){
      schedule.value = sortByTeacher(schedule.value,subFilter.value);

    }
    else if(filter.value =="Type"){
      schedule.value = sortByType(schedule.value,subFilter.value);
    }
    else if(filter.value =="Course"){
      schedule.value = sortByCourse(schedule.value,subFilter.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;
          
      courses.value = (await getcurriculum(curriculum.value.curriculumId)).courses;
      filter.value = "null";
      subFilter.value = "null"
  }

  function findCreatedLesson(){
  console.log(lessonFinder.value);
  for(let element in lessonFinder.value){
    console.log(lessonFinder.value[element].course.courseId, lessonFinder.value[element].local);
    
    console.log(lessonBuffer.value.course.courseId, lessonBuffer.value.local)

      if((lessonFinder.value[element].course.courseId ==lessonBuffer.value.course.courseId) && (lessonFinder.value[element].local == lessonBuffer.value.local) ){
        return lessonFinder.value[element];
     }
    }
    return null;
}
  
 async function newLesson(){
    let isnull = false;
    if (lessonBuffer.value.lessonType != null){
      lessonBuffer.value.color = colors[lessonBuffer.value.lessonType];
      for(let element in lessonBuffer.value){
        if(lessonBuffer.value[element] == null){
          isnull=true;
          break;
        }
        }
      if(!isnull){
        let course = await getCourse(lessonBuffer.value.course.courseId);
        console.log(course)
        let start = createLessonEvent(lessonBuffer.value.day,lessonBuffer.value.lessonStart)
        let end = createLessonEvent(lessonBuffer.value.day,lessonBuffer.value.lessonEnd)
        await createLesson(course,
        start,
        end,
        lessonBuffer.value.lessonType,
        lessonBuffer.value.color,lessonBuffer.value.local)

        lessonFinder.value = await getLessons();
        lesson.value = findCreatedLesson();
        trueSchedule.value = await getCurriculumSchedule(curriculum.value.curriculumId) 
        await addLessonToSchedule(trueSchedule.value.scheduleId,lesson.value.lessonID)

    }
    }
    lessonBuffer.value = Object.assign({}, pattern);
    trueSchedule.value = null;

  } 


</script>
<template>
  <div class="body">
    <div class="listTitle buttonGrid"v-if="!deleteMod && !createMod" >
      <button class="create" @click="createMod = true;">Create</button>
      <button class="delete" @click="deleteMod = true;">Delete</button>
    </div>
    <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="lessonBuffer.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="lessonBuffer.day">
        </div>
        <div style="margin-bottom:20px;">
          Start: 
          <input v-model="lessonBuffer.lessonStart" type="time" min="08:00" max="18:00" required />
        </div>
        <div style="margin-bottom:20px;">
          End: 
          <input v-model="lessonBuffer.lessonEnd" type="time" min="10:00" max="20:00" required />
        </div>
        <div style="margin-bottom:20px;">
          Type: 
          <select v-model="lessonBuffer.lessonType">
           <option v-for="item in types" :value='item'>{{item}}</option>
          </select>
        </div>
        <div style="margin-bottom:20px;">
          Local: 
          <select v-model="lessonBuffer.local">
           <option v-for="item in locals" :value='item'>{{item}}</option>
          </select>


        </div>
        <div></div>



      <button class="create" @click="createMod=!createMod; newLesson();"> {{i18n("courses.confirm")}} </button>
      <button style="float:right;" @click="createMod=!createMod">{{i18n("courses.back")}}</button>
      </form>
    </div>



    <div v-if="!deleteMod && !createMod">
      <select @change="changeSchedule()" v-model="trueSchedule">
        <option v-for="item in allSchedules" :value='item'>{{item.curriculum.option}}</option>
      </select>
      <select v-if="schedule != null" @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>

    </div>
    <div v-for="element in schedule" style="width:50%;margin-left:auto; margin-right:auto;" >
      <div class="listElement">
        <div class="containerElement">
          <div>
          {{element.course.title}}
          </div>
          <div>{{formatDate(element.lessonStart)}}</div>
          <div>{{getHoursMinutes(element.lessonStart)}}-{{getHoursMinutes(element.lessonEnd)}}</div>
        </div>
      </div>
    </div>
  </div>


</template>
<style scoped>
.body {
    width:100%;
    margin-top:3.5%;
  }

.infosContainer {
  min-width:350px;
  padding-bottom:50px;
  border:2px solid black;
  font-size:25px;
  color:white;
  padding:20px;
  background-color:rgb(50,50,50);
  border-radius:20px;
}

 .containerElement{ 
    justify-content:center;
    display:grid;
    grid-template-columns:38.8% 38.8% 22.4%;
    grid-template-areas:
    "name teacher credits"; 
    column-gap:10px;  }
  
  .name {
    grid-area:name;
    align-self:center;
  }

  .teacher{
    grid-area:teacher;
    align-self:center;
  }

  .credits{
    grid-area:credits;
    align-self:center;
  }

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

}

.modify{
  font-size:25px;
  padding:10px 10px 10px 10px;
  background-color: rgb(239,60,168);
  cursor: pointer;
  border:none;
  border-radius:15px;
}

  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;

  }

  .buttonGrid{
    display:grid;
    grid-template-columns: auto auto;
    column-gap:50px;
    grid-template-areas:
      "create delete";
  }

  .create{
    grid-area:create;
    
    background-color:rgb(0,200,0);

  }

  .delete{
    grid-area:delete;
    background-color:rgb(200,0,0);
  }

  .listTitle{
    min-width:380px;
    display: flex;
    justify-content: center;
    align-items: center;
    width:25%;
    margin-left:auto;
    margin-right:auto;
    border:2px solid black;
    font-size:25px;
    color:white;
    padding:20px;
    background-color:rgb(50,50,50);
    border-radius:20px;
    margin-bottom:10px;

    button:hover{
      opacity:0.8;
    }
}
</style>