Merge Schedule Extension to Master #168
@ -17,7 +17,7 @@
 | 
				
			|||||||
  const editElementID = ref("")
 | 
					  const editElementID = ref("")
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  function editItem(id){
 | 
					  function editItem(id){
 | 
				
			||||||
    editElementID = id;
 | 
					    editElementID.value = id;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  //Juste pour montrer le Create Mode
 | 
					  //Juste pour montrer le Create Mode
 | 
				
			||||||
 | 
				
			|||||||
@ -3,23 +3,26 @@
 | 
				
			|||||||
 
 | 
					 
 | 
				
			||||||
  const schedule = [
 | 
					  const schedule = [
 | 
				
			||||||
    {course:"Math Pour L'info",
 | 
					    {course:"Math Pour L'info",
 | 
				
			||||||
     start:"Wed Mar 27 2024 10:15 GMT+0100",
 | 
					     start:"Tue Mar 26 2024 08:15 GMT+0100",
 | 
				
			||||||
     end:"Wed Mar 27 2024 12:15 GMT+0100"},
 | 
					     end:"Tue Mar 26 2024 10:15 GMT+0100",
 | 
				
			||||||
 | 
					    color:"rgb(0,50,100)"},
 | 
				
			||||||
    {
 | 
					    {
 | 
				
			||||||
      course:"Calculus",
 | 
					      course:"Calculus",
 | 
				
			||||||
      start:"Wed Mar 27 2024 08:00 GMT+0100",
 | 
					      start:"Wed Mar 27 2024 08:15 GMT+0100",
 | 
				
			||||||
      end:"Wed Mar 27 2024 10:00 GMT+0100"
 | 
					      end:"Wed Mar 27 2024 09:15 GMT+0100",   
 | 
				
			||||||
      
 | 
					      color:"rgb(100,50,0)"
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  {
 | 
					  {
 | 
				
			||||||
      course:"Physique II",
 | 
					      course:"Physique II",
 | 
				
			||||||
      start:"Tue Mar 26 2024 10:15 GMT+0100",
 | 
					      start:"Tue Mar 26 2024 10:30 GMT+0100",
 | 
				
			||||||
      end:"Tue Mar 26 2024 12:15 GMT+0100"      
 | 
					      end:"Tue Mar 26 2024 12:30 GMT+0100", 
 | 
				
			||||||
 | 
					      color:"rgb(100,50,100)"
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
    {
 | 
					    {
 | 
				
			||||||
      course:"Math Pour L'info",
 | 
					      course:"Math Pour L'info",
 | 
				
			||||||
      start:"Thu Mar 28 2024 10:15 GMT+0100",
 | 
					      start:"Tue Mar 26 2024 13:30 GMT+0100",
 | 
				
			||||||
      end:"Thu Mar 28 2024 12:15 GMT+0100"      
 | 
					      end:"Tue Mar 26 2024 15:30 GMT+0100", 
 | 
				
			||||||
 | 
					      color:"rgb(100,0,50)"
 | 
				
			||||||
  }]
 | 
					  }]
 | 
				
			||||||
  function formatDate(date) {
 | 
					  function formatDate(date) {
 | 
				
			||||||
    var d = new Date(date),
 | 
					    var d = new Date(date),
 | 
				
			||||||
@ -97,10 +100,28 @@
 | 
				
			|||||||
      return matrix;
 | 
					      return matrix;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  function sundayToTheEnd(list){
 | 
				
			||||||
 | 
					    const newlist = list;
 | 
				
			||||||
 | 
					    const sunday = newlist.shift();
 | 
				
			||||||
 | 
					    newlist.push(sunday);
 | 
				
			||||||
 | 
					    return newlist;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  const schedule2 = matrixFromList(schedule);
 | 
					  function getDifferenceTime(date1,date2){
 | 
				
			||||||
  const scheduleByWeek = transpose(schedule2);
 | 
					    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)
 | 
					  console.log(scheduleByWeek)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
@ -126,8 +147,15 @@
 | 
				
			|||||||
        </tr>
 | 
					        </tr>
 | 
				
			||||||
      </table>
 | 
					      </table>
 | 
				
			||||||
      <div class="courseGrid">
 | 
					      <div class="courseGrid">
 | 
				
			||||||
        <div v-for="i in 7">
 | 
					        <div class="dayCourse" v-for="element in scheduleByWeek">
 | 
				
			||||||
          Test
 | 
					          <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>
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
@ -201,11 +229,20 @@
 | 
				
			|||||||
      }
 | 
					      }
 | 
				
			||||||
  
 | 
					  
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  .course{
 | 
					  .course{
 | 
				
			||||||
    width:100%;
 | 
					    position:relative;
 | 
				
			||||||
    height:100%;
 | 
					    border: 1px solid black;
 | 
				
			||||||
    background-color:rgb(100,0,100);
 | 
					    border-radius:10px;
 | 
				
			||||||
 | 
					    width:90%;
 | 
				
			||||||
 | 
					    margin-left:auto;
 | 
				
			||||||
 | 
					    margin-right:auto;
 | 
				
			||||||
 | 
					    display:grid;
 | 
				
			||||||
 | 
					    grid-template-rows:1fr 1fr 1fr;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  
 | 
					  
 | 
				
			||||||
 | 
					  .dayCourse{
 | 
				
			||||||
 | 
					    display:block; 
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
  
 | 
					  
 | 
				
			||||||
</style>
 | 
					</style>
 | 
				
			||||||
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user