weekly set up, end

This commit is contained in:
Wawilski 2024-04-02 16:52:40 +02:00
parent 2b9493422d
commit 443cf55784
2 changed files with 58 additions and 21 deletions

View File

@ -17,7 +17,7 @@
const editElementID = ref("")
function editItem(id){
editElementID = id;
editElementID.value = id;
}
//Juste pour montrer le Create Mode

View File

@ -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>