Merge Schedule Extension to Master #168
@ -17,7 +17,7 @@
 | 
			
		||||
  const editElementID = ref("")
 | 
			
		||||
 | 
			
		||||
  function editItem(id){
 | 
			
		||||
    editElementID = id;
 | 
			
		||||
    editElementID.value = id;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  //Juste pour montrer le Create Mode
 | 
			
		||||
 | 
			
		||||
@ -3,23 +3,26 @@
 | 
			
		||||
 
 | 
			
		||||
  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"},
 | 
			
		||||
     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:00 GMT+0100",
 | 
			
		||||
      end:"Wed Mar 27 2024 10:00 GMT+0100"
 | 
			
		||||
      
 | 
			
		||||
      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:15 GMT+0100",
 | 
			
		||||
      end:"Tue Mar 26 2024 12:15 GMT+0100"      
 | 
			
		||||
      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:"Thu Mar 28 2024 10:15 GMT+0100",
 | 
			
		||||
      end:"Thu Mar 28 2024 12:15 GMT+0100"      
 | 
			
		||||
      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),
 | 
			
		||||
@ -97,10 +100,28 @@
 | 
			
		||||
      return matrix;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  function sundayToTheEnd(list){
 | 
			
		||||
    const newlist = list;
 | 
			
		||||
    const sunday = newlist.shift();
 | 
			
		||||
    newlist.push(sunday);
 | 
			
		||||
    return newlist;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  const schedule2 = matrixFromList(schedule);
 | 
			
		||||
  const scheduleByWeek = transpose(schedule2);
 | 
			
		||||
  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>
 | 
			
		||||
@ -126,8 +147,15 @@
 | 
			
		||||
        </tr>
 | 
			
		||||
      </table>
 | 
			
		||||
      <div class="courseGrid">
 | 
			
		||||
        <div v-for="i in 7">
 | 
			
		||||
          Test
 | 
			
		||||
        <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>
 | 
			
		||||
@ -201,11 +229,20 @@
 | 
			
		||||
      }
 | 
			
		||||
  
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
  .course{
 | 
			
		||||
    width:100%;
 | 
			
		||||
    height:100%;
 | 
			
		||||
    background-color:rgb(100,0,100);
 | 
			
		||||
    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>
 | 
			
		||||
 | 
			
		||||
		Reference in New Issue
	
	Block a user