Clyde/frontend/src/Apps/Schedule.vue

<script setup>
  import { ref } from 'vue'
 
  const schedule = [
    {course:"Math Pour L'info",
     start:"Wed Mar 27 2024 10:15 GMT+0100",
     end:"Wed Mar 27 2024 12:15 GMT+0100"},
    {
      course:"Calculus",
      start:"Wed Mar 27 2024 08:00 GMT+0100",
      end:"Wed Mar 27 2024 10:00 GMT+0100"
      
  },
  {
      course:"Physique II",
      start:"Tue Mar 26 2024 10:15 GMT+0100",
      end:"Tue Mar 26 2024 12:15 GMT+0100"      
  },
    {
      course:"Math Pour L'info",
      start:"Thu Mar 28 2024 10:15 GMT+0100",
      end:"Thu Mar 28 2024 12:15 GMT+0100"      
  }]
  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;
  }

  
  const schedule2 = matrixFromList(schedule);
  const scheduleByWeek = transpose(schedule2);
  
  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 v-for="i in 7">
          Test
        </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{
    width:100%;
    height:100%;
    background-color:rgb(100,0,100);
  }

  
</style>