diff --git a/src/app/modules/schedule/page/calendar-view.component.ts b/src/app/modules/schedule/page/calendar-view.component.ts index 0912830f..03adcb11 100644 --- a/src/app/modules/schedule/page/calendar-view.component.ts +++ b/src/app/modules/schedule/page/calendar-view.component.ts @@ -1,18 +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 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. + * 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 . + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . */ -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.mainSwiper.goToIndex(newIndex); + this.calendarService.goToDateClicked.subscribe(async newIndex => { + await this.mainSwiper.goToIndex(newIndex); this.setDateRange(newIndex); + await this.scrollCursorIntoView(this.content); }); } + ngAfterViewInit() { + void this.scrollCursorIntoView(this.content); + } + /** * OnDestroy */ diff --git a/src/app/modules/schedule/page/calendar-view.html b/src/app/modules/schedule/page/calendar-view.html index 18539d86..83d68a17 100644 --- a/src/app/modules/schedule/page/calendar-view.html +++ b/src/app/modules/schedule/page/calendar-view.html @@ -1,16 +1,16 @@
- +
. + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . */ import {Component, Input, OnDestroy, OnInit} from '@angular/core'; import {ActivatedRoute} from '@angular/router'; @@ -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) { diff --git a/src/app/modules/schedule/page/grid/schedule-cursor-offset.ts b/src/app/modules/schedule/page/grid/schedule-cursor-offset.ts new file mode 100644 index 00000000..15e3b68c --- /dev/null +++ b/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 . + */ + +/** + * + */ +export function getScheduleCursorOffset( + from: number, + scale: number, + now = new Date().getHours(), +) { + return (now - from) * scale + 45; +} diff --git a/src/app/modules/schedule/page/grid/schedule-cursor.component.ts b/src/app/modules/schedule/page/grid/schedule-cursor.component.ts index 853674db..dab8764e 100644 --- a/src/app/modules/schedule/page/grid/schedule-cursor.component.ts +++ b/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 */ diff --git a/src/app/modules/schedule/page/grid/schedule-cursor.html b/src/app/modules/schedule/page/grid/schedule-cursor.html index 76fcfd90..67f7dba4 100644 --- a/src/app/modules/schedule/page/grid/schedule-cursor.html +++ b/src/app/modules/schedule/page/grid/schedule-cursor.html @@ -1,4 +1,21 @@ -
+ + +

diff --git a/src/app/modules/schedule/page/grid/schedule-day.component.ts b/src/app/modules/schedule/page/grid/schedule-day.component.ts index 31046728..684a12dd 100644 --- a/src/app/modules/schedule/page/grid/schedule-day.component.ts +++ b/src/app/modules/schedule/page/grid/schedule-day.component.ts @@ -1,16 +1,16 @@ /* * 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 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. + * 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 . + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . */ import {Component, HostListener, Input, OnInit} from '@angular/core'; import moment from 'moment'; diff --git a/src/app/modules/schedule/page/schedule-view.component.ts b/src/app/modules/schedule/page/schedule-view.component.ts index 8a1e0e8d..0e5800a1 100644 --- a/src/app/modules/schedule/page/schedule-view.component.ts +++ b/src/app/modules/schedule/page/schedule-view.component.ts @@ -1,16 +1,16 @@ /* * 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 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. + * 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 . + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . */ import { AfterViewInit, @@ -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); } /** diff --git a/src/app/modules/schedule/page/schedule-view.html b/src/app/modules/schedule/page/schedule-view.html index 29ce85de..783d05d7 100644 --- a/src/app/modules/schedule/page/schedule-view.html +++ b/src/app/modules/schedule/page/schedule-view.html @@ -1,16 +1,16 @@
- +