Clyde/frontend/src/Apps/Schedule.vue

<script setup>
  import { ref } from 'vue'
 
  const schedule = [
    {course:"Math Pour L'info",
     start:"Tue Mar 26 2024 08:15 GMT+0100",
     end:"Tue Mar 26 2024 10:15 GMT+0100",
    color:"rgb(0,50,100)"},
    {
      course:"Calculus",
      start:"Wed Mar 27 2024 08:15 GMT+0100",
      end:"Wed Mar 27 2024 09:15 GMT+0100",   
      color:"rgb(100,50,0)"
  },
  {
      course:"Physique II",
      start:"Tue Mar 26 2024 10:30 GMT+0100",
      end:"Tue Mar 26 2024 12:30 GMT+0100", 
      color:"rgb(100,50,100)"
  },
    {
      course:"Math Pour L'info",
      start:"Tue Mar 26 2024 13:30 GMT+0100",
      end:"Tue Mar 26 2024 15:30 GMT+0100", 
      color:"rgb(100,0,50)"
  }]
  function formatDate(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 [day, month, year].join('-');
  }
  function getMonday(d) {
    d = new Date(d);
    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(schedule[1].start)))

  function isNotCourse(element){
    return element==null;
  }

  function durationCourse(element){
    const hour = element.end.substring(3,5) -element.start.substring(3,5);
    
    
    return (element.end - element.start)%2;
  }
  function sortByDate(a, b) {
    const nameA = a.start; // ignore upper and lowercase
    const nameB = b.start; // ignore upper and lowercase
    
    if (nameA < nameB) {
      return -1;
    }
    if (nameA > nameB) {
      return 1;
    }
    return 0; 
      }

  function transpose(a) {
    const trans = [[],[],[],[],[],[]];
    for(let i = 0; i < 6;i++){
      for(let j=0; j< 7; j++){
        if(a[j][i] !== null){
          trans[i].push(a[j][i]);
        }
      }
    }
    return trans;
}

  function matrixFromList(list){
    const matrix = [[],[],[],[],[],[],[]];
    for(let key in list){
      const temp = [];
      const day = new Date(list[key].start);
      matrix[day.getDay()].push(list[key]);
      matrix[day.getDay()].sort((a,b) => sortByDate(a,b));
    }
      return matrix;
  }

  function sundayToTheEnd(list){
    const newlist = list;
    const sunday = newlist.shift();
    newlist.push(sunday);
    return newlist;
  }

  function getDifferenceTime(date1,date2){
    return Math.abs((new Date(date2).getTime() - new Date(date1).getTime())/60000);
  }

  function getMarginTop(list, index1, index2){
    if(index2 < 0){
      const temp = new Date(list[index1].start);
      temp.setHours(8,0,0);
      return Math.abs((new Date(list[index1].start).getTime()- temp.getTime())/60000);
    }   
    return Math.abs((new Date(list[index1].start).getTime()- new Date(list[index2].end).getTime())/60000)+getMarginTop(list,index2,index2-1);
  }


  const scheduleByWeek = sundayToTheEnd(matrixFromList(schedule));
  console.log(scheduleByWeek)

</script>
<template>
  <div class="grid">
    <div class="options" >
    </div>
    <div class="schedule">
      <table class="table">
        <tr style="background-color:rgb(24,24,24)">
          <th/>
          <th class="header">Lundi {{formatDate(getAnyDays(0))}}</th>
          <th class="header">Mardi {{formatDate(getAnyDays(1))}}</th>
          <th class="header">Mercredi {{formatDate(getAnyDays(2))}}</th>
          <th class="header">Jeudi {{formatDate(getAnyDays(3))}}</th>
          <th class="header">Vendredi {{formatDate(getAnyDays(4))}}</th>
          <th class="header">Samedi {{formatDate(getAnyDays(5))}}</th>
          <th class="header">Dimanche {{formatDate(getAnyDays(6))}}</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">
            {{console.log(element[index].start)}}
            <div class="course" v-bind:style="{background:element[index].color,
              height:((getDifferenceTime(element[index].end,element[index].start)/7.2)-0.5)+'%', top:((getMarginTop(element, index, index-1)/7.20))+'%'}">      
              
              <div>Local</div> 
          </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .grid{
    display:grid;
    margin-top:2%;
    align-items:center;
    justify-content:center;
    grid-template-columns:15vw 70vw;
    column-gap:2.5vw;

    grid-template-areas:"options schedule";
  }
  .schedule{
    position:relative;  
    border-radius:20px;
    grid-area:schedule;
    width:100%;
    height:85vh;
    background-color:rgba(255,255,255,0.1);    
  }
  .options{
    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{
    align-items:center;
    width:12.5%;
    color:#FFFFFF;
  }
  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; 
  }
  
</style>