weekly set up, end
This commit is contained in:
parent
2b9493422d
commit
443cf55784
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user