weekly set up, end
This commit is contained in:
		| @ -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; | ||||
|   } | ||||
|  | ||||
|    | ||||
|   const schedule2 = matrixFromList(schedule); | ||||
|   const scheduleByWeek = transpose(schedule2); | ||||
|    | ||||
|   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> | ||||
| @ -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); | ||||
|   } | ||||
|  | ||||
|   .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> | ||||
|  | ||||
		Reference in New Issue
	
	Block a user