Display Week and Month End

frontend/src/Apps/Schedule.vue

@@ -1,145 +1,152 @@
 <script setup>
   import { ref } from 'vue'
+  import {getDifferenceTime,lastDateOfMonth,formatDate,getFirstDay,sortByDate,matrixFromList,sundayToTheEnd,getMarginTop,getHoursMinutes, monthFromList} from '../schedule.js'
  
   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",
+     course:{
-      start:"Wed Mar 27 2024 08:15 GMT+0100",
+        id:14,
-      end:"Wed Mar 27 2024 09:15 GMT+0100",   
+        name:"Math Pour L'info",
-      color:"rgb(100,50,0)"
+        faculty:"Science",
+        teacher:"Doofenschmirtz",
+        assistants:[14,25,13],},
+
+     start:"Mon Apr 01 2024 08:15",
+      
+     end:"Mon Apr 01 2024 10:15",
+     color:"rgb(0,50,100)",
+     local:"A0B2"
     },
-  {
+    {course:{
-      course:"Physique II",
+      id:12,
-      start:"Tue Mar 26 2024 10:30 GMT+0100",
+      name:"Calculus",
-      end:"Tue Mar 26 2024 12:30 GMT+0100", 
+      faculty:"Science",
-      color:"rgb(100,50,100)"
+      teacher:"Doofenschmirtz",
+      assistants:[],
+
     },
-    {
+      start:"Wed Mar 27 2024 08:15",
-      course:"Math Pour L'info",
+      end:"Wed Mar 27 2024 09:15",   
-      start:"Tue Mar 26 2024 13:30 GMT+0100",
+      color:"rgb(100,50,0)",
-      end:"Tue Mar 26 2024 15:30 GMT+0100", 
+      local:"A0B2"
-      color:"rgb(100,0,50)"
+  },
+  {course:{
+      id:2,
+      name:"Physique II",
+      faculty:"Science",
+      teacher:3,
+      assistants:[],
+
+    },
+      start:"Sun Mar 24 2024 10:30 ",
+      end:"Sun Mar 24 2024 12:30 ", 
+      color:"rgb(100,50,100)",
+      local:"A0B2"
+  },
+    {course:{
+      id:14,
+      name:"Math Pour L'info",
+      faculty:"Science",
+      teacher:14,
+      assistants:[14,25,13],
+    },
+      start:"Sun Mar 24 2024 13:30",
+      end:"Sun Mar 24 2024 15:30", 
+      color:"rgb(100,0,50)",
+      local:"A0B2"
   }]
-  function formatDate(date) {
-    var d = new Date(date),
-        month = '' + (d.getMonth() + 1),
-        day = '' + d.getDate(),
-        year = d.getFullYear();
    
-    if (month.length < 2) 
+  const display =ref("Month")
-        month = '0' + month;
+
-    if (day.length < 2) 
+  const days = ["Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi","Dimanche"];
-        day = '0' + day;
+  const months = ["Janvier","Fevrier","Mars","Avril",'Mai',"Juin","Juillet","Aout","Septembre","Octobre","Novembre","Decembre"]
+  const firstDayOfMonth = ref(getFirstDay(new Date(schedule[1].start)))
   
-    return [day, month, year].join('-');
-  }
   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())
 
-  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 scheduleByWeek = ref(sundayToTheEnd(matrixFromList(schedule,mondayOfWeek.value)));
-    const nameA = a.start; // ignore upper and lowercase
+  const month = ref(monthFromList(schedule,new Date().getMonth()));
-    const nameB = b.start; // ignore upper and lowercase
+  const shift = ref(getFirstDay(new Date()).getDay());
+  let value = 1;
+  const len = ref(lastDateOfMonth(new Date()));
   
-    if (nameA < nameB) {
+  function changeWeek(i){
-      return -1;
+    const temp = getAnyDays(i);
-    }
+    mondayOfWeek.value = temp;
-    if (nameA > nameB) {
+    scheduleByWeek.value = sundayToTheEnd(matrixFromList(schedule, mondayOfWeek.value))
-      return 1;
-    }
-    return 0; 
   }
 
-  function transpose(a) {
+  function changeMonth(i){
-    const trans = [[],[],[],[],[],[]];
+    const temp = currentDate.value;
-    for(let i = 0; i < 6;i++){
+    currentDate.value = new Date( ( 0< temp.getMonth()+i < 13 ? temp.getFullYear() : temp.getFullYear()+i), (0< temp.getMonth()+i <13 ? temp.getMonth()+i :  12 ),1);
-      for(let j=0; j< 7; j++){
+    month.value = monthFromList(schedule,currentDate.value.getMonth())
-        if(a[j][i] !== null){
+    shift.value= getFirstDay(currentDate.value).getDay();
-          trans[i].push(a[j][i]);
+    len.value= lastDateOfMonth(currentDate.value);
-        }
+    value = 1;
-      }
-    }
-    return trans;
   }
 
-  function matrixFromList(list){
+  function isAValue(){
-    const matrix = [[],[],[],[],[],[],[]];
+    if(value-shift.value<0){
-    for(let key in list){
+      value++;
-      const temp = [];
+      return false
-      const day = new Date(list[key].start);
+    }
-      matrix[day.getDay()].push(list[key]);
+    if(value-shift.value<len.value){
-      matrix[day.getDay()].sort((a,b) => sortByDate(a,b));
+      value++;
+      return true;}
+    
+    if(value-shift.value>=len.value){
+      return false
     }
-      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">
+    <template v-if="display=='Week'">
       <table class="table">
         <tr style="background-color:rgb(24,24,24)">
-          <th/>
+          <th>
-          <th class="header">Lundi {{formatDate(getAnyDays(0))}}</th>
+            <button @click="changeWeek(-7)">Previous</button>
-          <th class="header">Mardi {{formatDate(getAnyDays(1))}}</th>
+            <button @click="changeWeek(7)">Next</button>
-          <th class="header">Mercredi {{formatDate(getAnyDays(2))}}</th>
+            <button @click="mondayOfWeek = getMonday(new Date()); scheduleByWeek = sundayToTheEnd(matrixFromList(schedule, mondayOfWeek))">Current</button>
-          <th class="header">Jeudi {{formatDate(getAnyDays(3))}}</th>
+            
-          <th class="header">Vendredi {{formatDate(getAnyDays(4))}}</th>
+          </th>
-          <th class="header">Samedi {{formatDate(getAnyDays(5))}}</th>
+          <th class="header" v-for='d,index in 7' >
-          <th class="header">Dimanche {{formatDate(getAnyDays(6))}}</th>
+            <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>
@@ -149,15 +156,83 @@
       <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 class="hourStart">
+                {{getHoursMinutes(element[index].start)}}
 
-              <div>Local</div> 
+              </div>
+              <div class="infos" v-bind:style="{}">
+                <p class="childInfos">{{element[index].course.name}}</p>
+                <p class="childInfos">{{element[index].local}}</p>
+                <p class="childInfos">{{element[index].course.teacher}}</p>
+              </div> 
+              <div class="hourEnd">
+                {{getHoursMinutes(element[index].end)}}
+              </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.start)}}
+              </div>
+              <div class="infos">
+                <p class="childInfos">{{element.course.name}}</p>
+                <p class="childInfos">{{element.local}}</p>
+                <p class="childInfos">{{element.course.teacher}}</p>
+              </div> 
+              <div class="hourEnd">
+                {{getHoursMinutes(element.end)}}
+              </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>
@@ -167,13 +242,14 @@
     margin-top:2%;
     align-items:center;
     justify-content:center;
-    grid-template-columns:15vw 70vw;
+    grid-template-columns:72vw 14.5vw;
-    column-gap:2.5vw;
+    column-gap:2vw;
-
+    overflow:hidden;
-    grid-template-areas:"options schedule";
+    grid-template-areas:"schedule options";
   }
   .schedule{
     position:relative; 
+    overflow-y:scroll;
     border-radius:20px;
     grid-area:schedule;
     width:100%;
@@ -181,6 +257,8 @@
     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);
@@ -203,9 +281,17 @@
   }
   
   .header{
-    align-items:center;
     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) {
@@ -229,7 +315,6 @@
       }
   
   
-
   .course{
     position:relative;
     border: 1px solid black;
@@ -245,4 +330,43 @@
     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>

frontend/src/schedule.js

@@ -0,0 +1,114 @@
+  import {ref} from 'vue'
+  export 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('-');
+  }
+
+  
+
+  export function durationCourse(element){
+    const hour = element.end.substring(3,5) -element.start.substring(3,5);
+    
+    
+    return (element.end - element.start)%2;
+  }
+
+  export 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; 
+      }
+
+
+  export function getFirstDay(d){
+    var date = new Date(d);
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+  }
+
+  
+
+  export function matrixFromList(list,weekMonday){
+    const weekStart = new Date(weekMonday); 
+    const matrix = new Array(7);
+    for (let i = 0; i < matrix.length; i++) {
+      matrix[i] = [];
+    }
+    for(let key in list){
+      const temp = list[key];
+      const day = new Date(list[key].start);
+      if((((day.getTime()-weekStart.getTime())/60000)<10080) && (((day.getTime()-weekStart.getTime())/60000)>0)){
+        matrix[day.getDay()].push(temp);
+        matrix[day.getDay()].sort((a,b) => sortByDate(a,b));
+      }
+    }
+      return matrix;
+  }
+
+  export function lastDateOfMonth(d){
+    const date = new Date(d);
+    const temp = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+    return temp.getDate();
+  }
+  
+  export function monthFromList(list,month){
+    const beginning = getFirstDay(month);
+    const matrix = new Array(lastDateOfMonth(month))
+    for (let i = 0; i < matrix.length; i++) {
+      matrix[i] = [];
+      
+    }
+    for(let key in list){
+      const temp = list[key];
+      const day = new Date(list[key].start);
+      if(day.getMonth()==month){
+      matrix[day.getDate()].push(temp);
+      matrix[day.getDay()].sort((a,b) => sortByDate(a,b));
+      }}
+    
+    
+    return matrix;
+  }
+  
+
+
+  export function sundayToTheEnd(list){
+    const newlist = list;
+    const sunday = newlist.shift();
+    newlist.push(sunday);
+    return newlist;
+  }
+
+  export function getDifferenceTime(date1,date2){
+    return Math.abs((new Date(date2).getTime() - new Date(date1).getTime())/60000);
+  }
+
+  export 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);
+  }
+  
+  export function getHoursMinutes(date){
+    const d = new Date(date);
+    return d.getHours()+ ":" + d.getMinutes();  
+  }
+