feat: apply new layout overhaul

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

@@ -16,6 +16,7 @@ import {
   AfterViewInit,
   Component,
   HostListener,
+  Input,
   OnInit,
   ViewChild,
 } from '@angular/core';
@@ -25,6 +26,8 @@ import {IonRouterOutlet} from '@ionic/angular';
 import {SharedAxisChoreographer} from '../../../animation/animation-choreographer';
 import {materialSharedAxisX} from '../../../animation/material-motion';
 import {ScheduleResponsiveBreakpoint} from './schema/schema';
+import {CalendarService} from '../../calendar/calendar.service';
+import moment from 'moment';
 
 /**
  * This needs to be sorted by break point low -> high
@@ -34,7 +37,7 @@ import {ScheduleResponsiveBreakpoint} from './schema/schema';
 const responsiveConfig: ScheduleResponsiveBreakpoint[] = [
   {
     until: 768,
-    days: 1,
+    days: 3,
     startOf: 'day',
   },
   {
@@ -69,6 +72,10 @@ export class SchedulePageComponent implements OnInit, AfterViewInit {
    */
   actualSegmentValue?: string | null;
 
+  /**
+   * Trigger event to go to today in calendar component
+   */
+
   /**
    * Layout
    */
@@ -76,18 +83,25 @@ export class SchedulePageComponent implements OnInit, AfterViewInit {
     this.currentWindowWidth,
   );
 
-  /**
-   * Vertical scale of the schedule (distance between hour lines)
-   */
-  scale = 60;
-
   @ViewChild('segment') segmentView!: HTMLIonSegmentElement;
 
+  /**
+   * Show the navigation drawer
+   */
+  @Input() showDrawer = true;
+
+  /**
+   * Search value from search bar
+   */
+  queryText: string;
+
   /**
    * Choreographer for the tab switching
    */
   tabChoreographer: SharedAxisChoreographer<string | null | undefined>;
 
+  isModalOpen = false;
+
   /**
    * Amount of days that should be shown according to current display width
    */
@@ -104,22 +118,36 @@ export class SchedulePageComponent implements OnInit, AfterViewInit {
 
   constructor(
     private readonly activatedRoute: ActivatedRoute,
+    private calendarService: CalendarService,
     readonly routerOutlet: IonRouterOutlet,
     private router: Router,
     private location: Location,
   ) {}
 
   ngOnInit() {
-    this.tabChoreographer = new SharedAxisChoreographer(
-      this.activatedRoute.snapshot.paramMap.get('mode'),
-      ['calendar', 'recurring', 'single'],
-    );
+    this.onInit();
+  }
+
+  /**
+   * ngOnInit is not reliably called after first navigation to app/schedule. This leads to URL and segmentView being out of sync.
+   * ionViewWillEnter is called on second, third, ... navigation to app/schedule
+   */
+  ionViewWillEnter() {
+    this.onInit();
+    this.segmentView.value = this.tabChoreographer.currentValue;
   }
 
   ngAfterViewInit() {
     this.segmentView.value = this.tabChoreographer.currentValue;
   }
 
+  onInit() {
+    this.tabChoreographer = new SharedAxisChoreographer(
+      this.activatedRoute.snapshot.paramMap.get('mode'),
+      ['calendar', 'recurring', 'single'],
+    );
+  }
+
   /**
    * Resize callback
    *
@@ -144,9 +172,21 @@ export class SchedulePageComponent implements OnInit, AfterViewInit {
    */
   onSegmentChange() {
     const url = this.router
-      .createUrlTree([[], this.segmentView.value])
+      .createUrlTree([[], 'schedule', this.segmentView.value])
       .toString();
     this.location.go(url);
     this.tabChoreographer.changeViewForState(this.segmentView.value);
   }
+
+  onTodayClick() {
+    this.calendarService.emitGoToDate(moment().startOf('day'));
+  }
+
+  onFABClick() {
+    this.isModalOpen = true;
+  }
+
+  onModalDismiss() {
+    this.isModalOpen = false;
+  }
 }