Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2026-01-10 19:52:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: scroll schedule cursor into view

Browse Source
This commit is contained in:
Thea Schöbl
2022-10-24 17:21:12 +00:00
committed by Rainer Killinger
parent 42e2f3a0cb
commit bc4c3d78db
9 changed files with 140 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 <https://www.gnu.org/licenses/>.
* 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.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
*/

20
src/app/modules/schedule/page/calendar-view.html
View File

@@ -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 <https://www.gnu.org/licenses/>.
~ 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 class="header">
<ion-button
@@ -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"

30
src/app/modules/schedule/page/components/calendar.component.ts
View File

@@ -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 <https://www.gnu.org/licenses/>.
* 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} 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) {

25
src/app/modules/schedule/page/grid/schedule-cursor-offset.ts Normal file
View File

@@ -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;
}

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

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

19
src/app/modules/schedule/page/grid/schedule-cursor.html
View File

@@ -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>

18
src/app/modules/schedule/page/grid/schedule-day.component.ts
View File

@@ -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 <https://www.gnu.org/licenses/>.
* 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, HostListener, Input, OnInit} from '@angular/core';
import moment from 'moment';

26
src/app/modules/schedule/page/schedule-view.component.ts
View File

@@ -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 <https://www.gnu.org/licenses/>.
* 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 {
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);
}
/**

20
src/app/modules/schedule/page/schedule-view.html
View File

@@ -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 <https://www.gnu.org/licenses/>.
~ 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 class="header">
<ion-button
@@ -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"