feat: schedule layout

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 <https://www.gnu.org/licenses/>.
   -->
+<!-- TODO: modularize duplicate stuff with `schedule-view` -->
 <div class="header">
   <ion-button
     fill="clear"

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

@@ -51,6 +51,13 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
+  ion-button {
+    width: 100%;
+    height: 100%;
+
+    text-transform: none;
+  }
 }
 
 .hour-lines {

src/app/modules/schedule/page/grid/schedule-card.scss

@@ -19,7 +19,6 @@ ion-card {
     width: 100%;
 
     ion-card-title {
-      height: 50px;
       width: 100%;
     }
   }

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

@@ -109,15 +109,6 @@ export class SchedulePageComponent implements OnInit, AfterViewInit {
    */
   tabChoreographer: SharedAxisChoreographer<string | null | undefined>;
 
-  /**
-   * 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
    */

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

@@ -42,7 +42,7 @@
   <!-- Schedule view needs full week -->
   <stapps-schedule-view
     *ngSwitchCase="'recurring'"
-    [layout]="weeklyConfig"
+    [layout]="layout"
   ></stapps-schedule-view>
   <stapps-single-events *ngSwitchCase="'single'"></stapps-single-events>
 </div>

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;

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: 'schedule-view.html',
-  templateUrl: 'calendar-view.html',
+  styleUrls: ['calendar-view.scss', 'schedule-view.scss'],
-  styleUrls: ['calendar-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
+  // @Override
-  /*async loadEvents(): Promise<void> {
+  async loadEvents(): Promise<number> {
-    this.cardsAnimationState = 'out';
     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 weekDays = Object.keys(
-        const date = moment(moment.now())
+        // eslint-disable-next-line unicorn/no-array-reduce
-          .startOf('week')
+        series.dates.reduce((accumulator, date) => {
-          .day(moment(series.dates[0]).day())
+          accumulator[moment(date).isoWeekday()] = true;
-          .unix();
+          return accumulator;
+        }, {} as Record<number, true>),
+      );
 
+      for (const day of weekDays) {
         // fall back to default
-        (this.testSchedule[date] ?? (this.testSchedule[date] = {}))[
+        (this.testSchedule[day] ?? (this.testSchedule[day] = {}))[series.uid] =
-          series.uid
+          {
-        ] = {
+            dateSeries: series,
-          dateSeries: series,
+            time: {
-          time: {
+              start: moment(series.dates[0]).hours(),
-            start: moment(series.dates[0]).hours(),
+              duration: series.duration,
-            duration: series.duration,
+            },
-          },
+          };
-        };
       }
     }
 
-    this.cursor?.scrollIntoView();
+    return this.todaySlideIndex;
-    this.cardsAnimationState = 'in';
+  }
-  }*/
 }

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

@@ -0,0 +1,77 @@
+<!--
+  ~ 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 <https://www.gnu.org/licenses/>.
+  -->
+<!-- TODO: modularize duplicate stuff with `calendar-view` -->
+<div class="header">
+  <ion-button
+    fill="clear"
+    class="left-button"
+    (click)="mainSwiper.swiperRef.slidePrev()"
+  >
+    <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
+  </ion-button>
+  <ion-button
+    fill="clear"
+    class="right-button"
+    (click)="mainSwiper.swiperRef.slideNext()"
+  >
+    <ion-icon slot="icon-only" name="chevron-forward-outline"></ion-icon>
+  </ion-button>
+  <ion-item>
+    <swiper
+      class="header-swiper"
+      #headerSwiper
+      [slidesPerView]="layout.days"
+      (activeIndexChange)="syncSwiper(headerSwiper, mainSwiper)"
+    >
+      <ng-template swiperSlide *ngFor="let date of weekDates">
+        <div class="day-labels">
+          <ion-button expand="block" fill="clear" disabled>
+            <ion-label>
+              {{ date | amDateFormat: 'dddd' }}
+            </ion-label>
+          </ion-button>
+        </div>
+      </ng-template>
+    </swiper>
+  </ion-item>
+</div>
+<ion-content>
+  <swiper
+    #mainSwiper
+    [slidesPerView]="layout.days"
+    (indexChange)="onPageChange($event)"
+    (activeIndexChange)="syncSwiper(mainSwiper, headerSwiper)"
+    class="full-height"
+  >
+    <ng-template swiperSlide *ngFor="let day of weekDates; index as i">
+      <schedule-day
+        [day]="day"
+        [hoursRange]="hoursRange"
+        [scale]="scale"
+        [uuids]="uuids"
+        [dateSeries]="testSchedule[i]"
+      >
+      </schedule-day>
+    </ng-template>
+  </swiper>
+  <div
+    class="hour-lines"
+    *ngFor="let i of hours"
+    [style.marginTop.px]="i * scale"
+  >
+    <ion-label>{{ i + hoursRange.from }}:00</ion-label>
+    <hr class="horizontal-line" />
+  </div>
+</ion-content>

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 <https://www.gnu.org/licenses/>.
+ */
+
+.full-height {
+  height: 100%;
+}