add colors to each subject

This commit is contained in:
Kenneth SOARES
2025-09-09 14:50:48 +02:00
parent 306b71dad5
commit bd3a392850
2 changed files with 26 additions and 9 deletions

7
package-lock.json generated
View File

@@ -29,7 +29,6 @@
"d3-force-3d": "^3.0.5", "d3-force-3d": "^3.0.5",
"easymde": "^2.19.0", "easymde": "^2.19.0",
"glob": "^11.0.0", "glob": "^11.0.0",
"html-to-image": "^1.11.13",
"html2canvas": "^1.4.1", "html2canvas": "^1.4.1",
"htmx.org": "^2.0.3", "htmx.org": "^2.0.3",
"jquery": "^3.7.1", "jquery": "^3.7.1",
@@ -4204,12 +4203,6 @@
"node": ">= 0.4" "node": ">= 0.4"
} }
}, },
"node_modules/html-to-image": {
"version": "1.11.13",
"resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.13.tgz",
"integrity": "sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==",
"license": "MIT"
},
"node_modules/html2canvas": { "node_modules/html2canvas": {
"version": "1.4.1", "version": "1.4.1",
"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz", "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",

View File

@@ -87,6 +87,17 @@ document.addEventListener("alpine:init", () => {
width: 0, width: 0,
}, },
colors: {} as Record<string, string>,
colorPalette: [
"#f87171",
"#60a5fa",
"#34d399",
"#fbbf24",
"#a78bfa",
"#f472b6",
"#38bdf8",
],
generate() { generate() {
try { try {
this.courses = parseSlots(this.content); this.courses = parseSlots(this.content);
@@ -96,16 +107,28 @@ document.addEventListener("alpine:init", () => {
); );
return; return;
} }
// color each UE
let colorIndex = 0;
for (const slot of this.courses) {
if (!this.colors[slot.ueCode]) {
this.colors[slot.ueCode] =
this.colorPalette[colorIndex % this.colorPalette.length];
colorIndex++;
}
}
this.displayedWeekdays = WEEKDAYS.filter((day) => this.displayedWeekdays = WEEKDAYS.filter((day) =>
this.courses.some((slot: TimetableSlot) => slot.weekday === day), this.courses.some((slot: TimetableSlot) => slot.weekday === day),
); );
this.startSlot = this.courses.reduce( this.startSlot = this.courses.reduce(
(acc: number, curr: TimetableSlot) => Math.min(acc, curr.startSlot), (acc: number, curr: TimetableSlot) => Math.min(acc, curr.startSlot),
24 * 4, 25 * 4,
); );
this.endSlot = this.courses.reduce( this.endSlot = this.courses.reduce(
(acc: number, curr: TimetableSlot) => Math.max(acc, curr.endSlot), (acc: number, curr: TimetableSlot) => Math.max(acc, curr.endSlot),
0, 1,
); );
this.table.height = SLOT_HEIGHT * (this.endSlot - this.startSlot); this.table.height = SLOT_HEIGHT * (this.endSlot - this.startSlot);
this.table.width = SLOT_WIDTH * this.displayedWeekdays.length; this.table.width = SLOT_WIDTH * this.displayedWeekdays.length;
@@ -117,6 +140,7 @@ document.addEventListener("alpine:init", () => {
width: `${SLOT_WIDTH}px`, width: `${SLOT_WIDTH}px`,
top: `${(slot.startSlot - this.startSlot) * SLOT_HEIGHT}px`, top: `${(slot.startSlot - this.startSlot) * SLOT_HEIGHT}px`,
left: `${this.displayedWeekdays.indexOf(slot.weekday) * SLOT_WIDTH}px`, left: `${this.displayedWeekdays.indexOf(slot.weekday) * SLOT_WIDTH}px`,
backgroundColor: this.colors[slot.ueCode],
}; };
}, },