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

  const allSchedule = await getAllSchedule();

    
  const schedule = ref(allSchedule[0].lessons)

   
  const display =ref("Month")

  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()))
  
  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;
  }
  const mondayOfWeek =ref(getMonday(new Date()))
  const currentDate = ref(new Date())

  
  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;
  }
  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 changeWeek(i){
    const temp = getAnyDays(i);
    mondayOfWeek.value = temp;
    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;
  }

  function isAValue(){
    if(value-shift.value<0){
      value++;
      return false
    }
    if(value-shift.value<len.value){
      value++;
      return true;}
    
    if(value-shift.value>=len.value){
      return false
    }
  }


</script>
<template>
  <div class="grid">
    <div class="schedule">
    <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 = sundayToTheEnd(matrixFromList(schedule.value, mondayOfWeek))">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 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,
              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" v-bind:style="{}">
                <p class="childInfos">{{element[index].course.title}}</p>
                <p class="childInfos">{{element[index].local}}</p>
                <p class="childInfos">{{element[index].course.teacher}}</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 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+'%'}">
                  
              <div class="hourStart">
                {{getHoursMinutes(element.lessonStart)}}
              </div>
              <div class="infos">
                <p class="childInfos">{{element.course.title}}</p>
                <p class="childInfos">{{element.local}}</p>
                <p class="childInfos">{{element.course.owner.lastName}}</p>
              </div> 
              <div class="hourEnd">
                {{getHoursMinutes(element.lessonEnd)}}
              </div>
              </div>
              </template>
              </div>
            </td>
        </tr>


        </table>
      </template>




    </div>
    <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>
    </div>
  </div>
</template>
<style scoped>
  .grid{
    display:grid;
    margin-top:2%;
    align-items:center;
    justify-content:center;
    grid-template-columns:72vw 14.5vw;
    column-gap:2vw;
    overflow:hidden;
    grid-template-areas:"schedule options";
  }
  .schedule{
    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:flex;
    flex-direction:column;
    border-radius:20px;
    grid-area:options;
    background-color:rgba(255,255,255,0.1);
    width:100%;
    height:85vh;
  }

  .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.85em;
    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;
  }


</style>