diff --git a/web/template/home.gohtml b/web/template/home.gohtml
index f3c318b89..e024662b1 100755
--- a/web/template/home.gohtml
+++ b/web/template/home.gohtml
@@ -417,7 +417,7 @@
:class="plannedStreams.hasElements() ? 'col-span-2' : 'col-span-full'">
@@ -449,7 +454,7 @@
x-for="group in courseStreams.get(sortFn(streamSortMode), filterPred(streamFilterMode))">
(),
+ groupNames: new Map(),
/**
* AlpineJS init function which is called automatically in addition to 'x-init'
@@ -68,10 +78,12 @@ export function courseContext(slug: string, year: number, term: string, userId:
this.loadPinned();
this.plannedStreams.set(this.course.Planned.reverse()).reset();
this.upcomingStreams.set(this.course.Upcoming).reset();
- this.loadProgresses(this.course.Recordings.map((s: Stream) => s.ID)).then((progresses) => {
- this.course.Recordings.forEach((s: Stream, i) => (s.Progress = progresses[i]));
- this.courseStreams.set(this.course.Recordings, (s: Stream) => s.StartDate().getMonth());
- });
+ this.loadProgresses(this.course.Recordings.map((s: Stream) => s.ID))
+ .then((progresses) => {
+ this.course.Recordings.forEach((s: Stream, i) => (s.Progress = progresses[i]));
+ })
+ .then(() => this.initializeWeekMap())
+ .then(() => this.applyGroupView());
console.log("🌑 init course", this.course);
});
},
@@ -132,6 +144,71 @@ export function courseContext(slug: string, year: number, term: string, userId:
return this.viewMode == ViewMode.List;
},
+ toggleWeekView() {
+ this.groupMode = this.groupMode === GroupMode.Month ? GroupMode.Week : GroupMode.Month;
+ setInStorage("groupMode", this.groupMode.toString());
+ this.applyGroupView();
+ },
+
+ isWeekView() {
+ return this.groupMode == GroupMode.Week;
+ },
+
+ applyGroupView() {
+ if (this.groupMode === GroupMode.Month) {
+ this.courseStreams.set(this.course.Recordings, (s: Stream) => s.StartDate().getMonth());
+ } else {
+ this.courseStreams.set(this.course.Recordings, (s: Stream) =>
+ this.getTrueWeek(s.GetWeekNumber(this.dateOfFirstWeek)),
+ );
+ }
+
+ // update group names
+ const groups = this.courseStreams.get(
+ this.sortFn(this.streamSortMode),
+ this.filterPred(this.streamFilterMode),
+ );
+ this.groupNames.clear();
+ for (let i = 0; i < groups.length; i++) {
+ const s1 = groups[i][0];
+ this.groupNames.set(s1.ID, this.getGroupName(s1));
+ const s2 = groups[i][groups[i].length - 1];
+ this.groupNames.set(s2.ID, this.getGroupName(s2));
+ }
+ },
+
+ /**
+ * Maps the difference in Weeks between any lecture and the first lecture to the true week count ignoring weeks without lectures (e.g. Christmas Break)
+ */
+ initializeWeekMap() {
+ let latestWeek = 1;
+ this.course.Recordings.sort(this.sortFn(StreamSortMode.OldestFirst)).forEach((s: Stream, i: number) => {
+ if (i === 0) {
+ this.dateOfFirstWeek = s.StartDate();
+ this.dateOfFirstWeek = new Date(
+ this.dateOfFirstWeek.getTime() - this.dateOfFirstWeek.getDay() * 1000 * 60 * 60 * 24,
+ );
+ this.dateOfFirstWeek.setHours(0, 1); // avoids errors e.g. in case week1 has vod on Monday at 10am, week2 at 8am
+ }
+ const week = s.GetWeekNumber(this.dateOfFirstWeek);
+ if (!this.weekCountWithoutEmptyWeeks.has(week)) {
+ this.weekCountWithoutEmptyWeeks.set(week, latestWeek++);
+ }
+ });
+ },
+
+ getTrueWeek(n: number): number {
+ return this.weekCountWithoutEmptyWeeks.get(n);
+ },
+
+ getGroupName(s: Stream): string {
+ if (this.groupMode === GroupMode.Month) {
+ return s.GetMonthName();
+ } else {
+ return "Week " + this.getTrueWeek(s.GetWeekNumber(this.dateOfFirstWeek)).toString();
+ }
+ },
+
/**
* Depending on the pinned value, pin or unpin course
*/