feat: scroll schedule cursor into view

src/app/modules/schedule/page/calendar-view.component.ts

@@ -12,7 +12,14 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import moment from 'moment';
 import {
@@ -25,6 +32,8 @@ import {ScheduleProvider} from '../../calendar/schedule.provider';
 import {CalendarComponent} from './components/calendar.component';
 import {CalendarService} from '../../calendar/calendar.service';
 import {InfiniteSwiperComponent} from './grid/infinite-swiper.component';
+import {IonContent} from '@ionic/angular';
+
 /**
  * Component that displays the schedule
  */
@@ -36,12 +45,14 @@ import {InfiniteSwiperComponent} from './grid/infinite-swiper.component';
 })
 export class CalendarViewComponent
   extends CalendarComponent
-  implements OnInit, OnDestroy
+  implements OnInit, OnDestroy, AfterViewInit
 {
   @ViewChild('mainSwiper') mainSwiper: InfiniteSwiperComponent;
 
   @ViewChild('headerSwiper') headerSwiper: InfiniteSwiperComponent;
 
+  @ViewChild('content') content: IonContent;
+
   /**
    * Layout of the schedule
    */
@@ -81,12 +92,17 @@ export class CalendarViewComponent
       this.calendarServiceSubscription.unsubscribe();
     }
     this.calendarServiceSubscription =
-      this.calendarService.goToDateClicked.subscribe(newIndex => {
+      this.calendarService.goToDateClicked.subscribe(async newIndex => {
-        this.mainSwiper.goToIndex(newIndex);
+        await this.mainSwiper.goToIndex(newIndex);
         this.setDateRange(newIndex);
+        await this.scrollCursorIntoView(this.content);
       });
   }
 
+  ngAfterViewInit() {
+    void this.scrollCursorIntoView(this.content);
+  }
+
   /**
    * OnDestroy
    */

src/app/modules/schedule/page/calendar-view.html

@@ -69,7 +69,7 @@
   </infinite-swiper>
 </div>
 
-<ion-content>
+<ion-content #content>
   <div
     class="schedule-wrapper"
     [style.height.px]="scale * (hoursRange.to - hoursRange.from + 1) + scale"

src/app/modules/schedule/page/components/calendar.component.ts

@@ -25,9 +25,10 @@ import {ScheduleProvider} from '../../../calendar/schedule.provider';
 import {ScheduleEvent, ScheduleResponsiveBreakpoint} from '../schema/schema';
 import {SwiperComponent} from 'swiper/angular';
 import {InfiniteSwiperComponent} from '../grid/infinite-swiper.component';
-import {IonDatetime} from '@ionic/angular';
+import {IonContent, IonDatetime} from '@ionic/angular';
 import {Subscription} from 'rxjs';
 import {CalendarService} from '../../../calendar/calendar.service';
+import {getScheduleCursorOffset} from '../grid/schedule-cursor-offset';
 
 /**
  * Component that displays the schedule
@@ -156,6 +157,15 @@ export class CalendarComponent implements OnInit, OnDestroy {
     );
   }
 
+  async scrollCursorIntoView(content: IonContent) {
+    const scrollElement = await content.getScrollElement();
+    scrollElement.scrollTo({
+      top:
+        getScheduleCursorOffset(this.hoursRange.from, this.scale) -
+        scrollElement.clientHeight / 3,
+    });
+  }
+
   onDestroy() {
     this.uuidSubscription.unsubscribe();
     if (this.calendarServiceSubscription) {

src/app/modules/schedule/page/grid/schedule-cursor-offset.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright (C) 2022 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/**
+ *
+ */
+export function getScheduleCursorOffset(
+  from: number,
+  scale: number,
+  now = new Date().getHours(),
+) {
+  return (now - from) * scale + 45;
+}

src/app/modules/schedule/page/grid/schedule-cursor.component.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2021 StApps
+ * Copyright (C) 2022 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -15,6 +15,7 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {HoursRange} from '../schema/schema';
 import moment from 'moment';
+import {getScheduleCursorOffset} from './schedule-cursor-offset';
 
 /**
  * Component that displays the schedule
@@ -47,6 +48,8 @@ export class ScheduleCursorComponent implements OnInit {
    */
   @Input() readonly scale: number;
 
+  getScheduleCursorOffset = getScheduleCursorOffset;
+
   /**
    * Get a floating point time 0..24
    */

src/app/modules/schedule/page/grid/schedule-cursor.html

@@ -1,4 +1,21 @@
-<div [style.marginTop.px]="(now - hoursRange.from) * scale + 45">
+<!--
+  ~ Copyright (C) 2022 StApps
+  ~ This program is free software: you can redistribute it and/or modify it
+  ~ under the terms of the GNU General Public License as published by the Free
+  ~ Software Foundation, version 3.
+  ~
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License along with
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<div
+  [style.marginTop.px]="getScheduleCursorOffset(hoursRange.from, scale, now)"
+>
   <div>
     <hr />
     <div></div>

src/app/modules/schedule/page/schedule-view.component.ts

@@ -32,7 +32,7 @@ import {SCISO8601Date, SCUuid} from '@openstapps/core';
 import {ScheduleEvent, ScheduleResponsiveBreakpoint} from './schema/schema';
 import {CalendarService} from '../../calendar/calendar.service';
 import {CalendarComponent} from './components/calendar.component';
-import {IonDatetime} from '@ionic/angular';
+import {IonContent, IonDatetime} from '@ionic/angular';
 import {SwiperComponent} from 'swiper/angular';
 
 /**
@@ -46,12 +46,14 @@ import {SwiperComponent} from 'swiper/angular';
 })
 export class ScheduleViewComponent
   extends CalendarComponent
-  implements OnInit, AfterViewInit, OnDestroy
+  implements OnInit, AfterViewInit, OnDestroy, AfterViewInit
 {
   @ViewChild('mainSwiper') mainSwiper: SwiperComponent;
 
   @ViewChild('headerSwiper') headerSwiper: SwiperComponent;
 
+  @ViewChild('content') content: IonContent;
+
   /**
    * The day that the schedule started out on
    */
@@ -140,6 +142,8 @@ export class ScheduleViewComponent
     const todayIndex = Number(moment().startOf('week').format('d')) + 1;
     this.mainSwiper?.swiperRef.slideTo(todayIndex);
     this.setDateRange(todayIndex);
+
+    this.scrollCursorIntoView(this.content);
   }
 
   /**

src/app/modules/schedule/page/schedule-view.html

@@ -62,7 +62,7 @@
   </swiper>
 </div>
 
-<ion-content>
+<ion-content #content>
   <div
     class="schedule-wrapper"
     [style.height.px]="scale * (hoursRange.to - hoursRange.from + 1) + scale"