mirror of
https://github.com/ae-utbm/sith.git
synced 2025-10-09 00:04:41 +00:00
add hour indicator
This commit is contained in:
@@ -82,6 +82,7 @@ document.addEventListener("alpine:init", () => {
|
||||
displayedWeekdays: [] as WeekDay[],
|
||||
courses: [] as TimetableSlot[],
|
||||
startSlot: 0,
|
||||
endSlot: 0,
|
||||
table: {
|
||||
height: 0,
|
||||
width: 0,
|
||||
@@ -150,6 +151,25 @@ document.addEventListener("alpine:init", () => {
|
||||
};
|
||||
},
|
||||
|
||||
getHours(): [string, object][] {
|
||||
let hour: number = Number.parseInt(
|
||||
this.courses
|
||||
.map((c: TimetableSlot) => c.startHour)
|
||||
.reduce((res: string, hour: string) => (hour < res ? hour : res), "24:00")
|
||||
.split(":")[0],
|
||||
);
|
||||
const res: [string, object][] = [];
|
||||
for (let i = 0; i <= this.endSlot - this.startSlot; i += 60 / MINUTES_PER_SLOT) {
|
||||
res.push([`${hour}:00`, { top: `${i * SLOT_HEIGHT}px` }]);
|
||||
hour += 1;
|
||||
}
|
||||
return res;
|
||||
},
|
||||
|
||||
getWidth() {
|
||||
return this.displayedWeekdays.length * SLOT_WIDTH + 20;
|
||||
},
|
||||
|
||||
async savePng() {
|
||||
const elem = document.getElementById("timetable");
|
||||
const img = (await html2canvas(elem)).toDataURL();
|
||||
|
@@ -1,10 +1,17 @@
|
||||
@import "core/static/core/colors";
|
||||
|
||||
#timetable {
|
||||
--hour-side-width: 60px;
|
||||
|
||||
display: block;
|
||||
margin: 2em auto ;
|
||||
margin: 2em auto;
|
||||
.header {
|
||||
background-color: white;
|
||||
background-color: $white-color;
|
||||
font-weight: bold;
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
width: calc(100% - var(--hour-side-width) - 10px);
|
||||
margin-left: var(--hour-side-width);
|
||||
padding-left: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0;
|
||||
@@ -15,7 +22,32 @@
|
||||
}
|
||||
.content {
|
||||
position: relative;
|
||||
}
|
||||
.hours {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
left: 0;
|
||||
top: -.5em;
|
||||
|
||||
.hour {
|
||||
position: absolute;
|
||||
|
||||
.hour-bar {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
background: lightgray;
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.courses {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
left: var(--hour-side-width);
|
||||
|
||||
.slot {
|
||||
background-color: cadetblue;
|
||||
|
@@ -28,7 +28,7 @@
|
||||
<div
|
||||
id="timetable"
|
||||
x-show="table.height > 0 && table.width > 0"
|
||||
:style="{width: `${table.width}px`, height: `${table.height+40}px`}"
|
||||
:style="{width: `${table.width+80}px`, height: `${table.height+40}px`}"
|
||||
>
|
||||
<div class="header">
|
||||
<template x-for="weekday in displayedWeekdays">
|
||||
@@ -36,15 +36,25 @@
|
||||
</template>
|
||||
</div>
|
||||
<div class="content">
|
||||
<template x-for="course in courses">
|
||||
<div class="slot" :style="getStyle(course)">
|
||||
<span class="course-type" x-text="course.courseType"></span>
|
||||
<span x-text="course.ueCode"></span>
|
||||
<span x-text="`${course.startHour} - ${course.endHour}`"></span>
|
||||
<span x-text="(course.weekGroup ? `\nGroupe ${course.weekGroup}` : '')"></span>
|
||||
<span x-text="course.room"></span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="hours" :height="(endSlot - endSlot%4) - (startSlot - startSlot%4)">
|
||||
<template x-for="[hour, style] in getHours()">
|
||||
<div class="hour" :style="style">
|
||||
<div x-text="hour"></div>
|
||||
<div class="hour-bar" :style="{width: `${getWidth()}px`}"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="courses">
|
||||
<template x-for="course in courses">
|
||||
<div class="slot" :style="getStyle(course)">
|
||||
<span class="course-type" x-text="course.courseType"></span>
|
||||
<span x-text="course.ueCode"></span>
|
||||
<span x-text="`${course.startHour} - ${course.endHour}`"></span>
|
||||
<span x-text="(course.weekGroup ? `\nGroupe ${course.weekGroup}` : '')"></span>
|
||||
<span x-text="course.room"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
|
Reference in New Issue
Block a user