diff --git a/src/app/modules/schedule/page/calendar-view.html b/src/app/modules/schedule/page/calendar-view.html index f03f6f50..8548acc8 100644 --- a/src/app/modules/schedule/page/calendar-view.html +++ b/src/app/modules/schedule/page/calendar-view.html @@ -12,6 +12,7 @@ ~ You should have received a copy of the GNU General Public License along with ~ this program. If not, see . --> +
; - /** - * Weekly config for schedule - */ - weeklyConfig: ScheduleResponsiveBreakpoint = { - until: Number.POSITIVE_INFINITY, - days: 7, - startOf: 'week', - }; - /** * Amount of days that should be shown according to current display width */ diff --git a/src/app/modules/schedule/page/schedule-page.html b/src/app/modules/schedule/page/schedule-page.html index 6b57c013..8400bbc7 100644 --- a/src/app/modules/schedule/page/schedule-page.html +++ b/src/app/modules/schedule/page/schedule-page.html @@ -42,7 +42,7 @@
diff --git a/src/app/modules/schedule/page/schedule-page.scss b/src/app/modules/schedule/page/schedule-page.scss index 38766243..231bb026 100644 --- a/src/app/modules/schedule/page/schedule-page.scss +++ b/src/app/modules/schedule/page/schedule-page.scss @@ -32,6 +32,10 @@ div { grid-row: 1; } +ion-segment-button { + text-transform: none; +} + .add-modal { align-items: flex-end !important; justify-content: flex-end !important; diff --git a/src/app/modules/schedule/page/schedule-view.component.ts b/src/app/modules/schedule/page/schedule-view.component.ts index 2c11c506..af08b8cc 100644 --- a/src/app/modules/schedule/page/schedule-view.component.ts +++ b/src/app/modules/schedule/page/schedule-view.component.ts @@ -24,15 +24,15 @@ import { } from '../../../animation/material-motion'; import {ScheduleProvider} from '../schedule.provider'; import {CalendarViewComponent} from './calendar-view.component'; +import {SwiperComponent} from 'swiper/angular'; /** * Component that displays the schedule */ @Component({ selector: 'stapps-schedule-view', - // this is intentional for extending - templateUrl: 'calendar-view.html', - styleUrls: ['calendar-view.scss'], + templateUrl: 'schedule-view.html', + styleUrls: ['calendar-view.scss', 'schedule-view.scss'], animations: [materialFade, materialSharedAxisX, materialManualFade], }) export class ScheduleViewComponent extends CalendarViewComponent { @@ -42,6 +42,10 @@ export class ScheduleViewComponent extends CalendarViewComponent { // @Override routeFragment = 'schedule/recurring'; + weekDates = Array.from({length: 7}).map( + (_, i) => moment(new Date(2022, 0, 2 + i)), // 02/01/2022 is a Sunday + ); + constructor( scheduleProvider: ScheduleProvider, activatedRoute: ActivatedRoute, @@ -51,6 +55,10 @@ export class ScheduleViewComponent extends CalendarViewComponent { super(scheduleProvider, activatedRoute, datePipe, platform); } + syncSwiper(self: SwiperComponent, other: SwiperComponent) { + other.swiperRef.slideTo(self.swiperRef.activeIndex); + } + /** * Determine displayed dates according to display size */ @@ -71,38 +79,38 @@ export class ScheduleViewComponent extends CalendarViewComponent { /** * Load events */ - // TODO: @Override - /*async loadEvents(): Promise { - this.cardsAnimationState = 'out'; + // @Override + async loadEvents(): Promise { const dateSeries = await this.scheduleProvider.getDateSeries( this.uuids, - undefined, + ['P1W', 'P2W', 'P3W', 'P4W'], moment(moment.now()).startOf('week').toISOString(), ); this.testSchedule = {}; for (const series of dateSeries.dates) { - if (series.dates.length > 0) { - const date = moment(moment.now()) - .startOf('week') - .day(moment(series.dates[0]).day()) - .unix(); + const weekDays = Object.keys( + // eslint-disable-next-line unicorn/no-array-reduce + series.dates.reduce((accumulator, date) => { + accumulator[moment(date).isoWeekday()] = true; + return accumulator; + }, {} as Record), + ); + for (const day of weekDays) { // fall back to default - (this.testSchedule[date] ?? (this.testSchedule[date] = {}))[ - series.uid - ] = { - dateSeries: series, - time: { - start: moment(series.dates[0]).hours(), - duration: series.duration, - }, - }; + (this.testSchedule[day] ?? (this.testSchedule[day] = {}))[series.uid] = + { + dateSeries: series, + time: { + start: moment(series.dates[0]).hours(), + duration: series.duration, + }, + }; } } - this.cursor?.scrollIntoView(); - this.cardsAnimationState = 'in'; - }*/ + return this.todaySlideIndex; + } } diff --git a/src/app/modules/schedule/page/schedule-view.html b/src/app/modules/schedule/page/schedule-view.html new file mode 100644 index 00000000..91f2821b --- /dev/null +++ b/src/app/modules/schedule/page/schedule-view.html @@ -0,0 +1,77 @@ + + +
+ + + + + + + + + +
+ + + {{ date | amDateFormat: 'dddd' }} + + +
+ + + +
+ + + + + + + +
+ {{ i + hoursRange.from }}:00 +
+
+ diff --git a/src/app/modules/schedule/page/schedule-view.scss b/src/app/modules/schedule/page/schedule-view.scss new file mode 100644 index 00000000..1d8830d2 --- /dev/null +++ b/src/app/modules/schedule/page/schedule-view.scss @@ -0,0 +1,18 @@ +/*! + * 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 Licens for + * more details. + * + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . + */ + +.full-height { + height: 100%; +}