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'">

VODs

-
+
+
@@ -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 */