feat: apply new layout overhaul

src/app/util/daytime-key.pipe.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright (C) 2021 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/>.
+ */
+
+import {Injectable, Pipe, PipeTransform} from '@angular/core';
+import moment from 'moment';
+
+/**
+ * Return the extended translation key by the current daytime key
+ */
+@Injectable()
+@Pipe({
+  name: 'daytimeKey',
+})
+export class DaytimeKeyPipe implements PipeTransform {
+  /**
+   * Transform
+   */
+  transform(translationKey: string): string {
+    const hour = Number.parseInt(moment().format('HH'), 10);
+    let key = '';
+    if (hour >= 5 && hour <= 10) {
+      key = 'morning';
+    } else if (hour >= 11 && hour <= 18) {
+      key = 'day';
+    } else if (hour >= 19 && hour <= 23) {
+      key = 'evening';
+    } else {
+      key = 'night';
+    }
+
+    return `${translationKey}_${key}`;
+  }
+}

src/app/util/ion-back-button.directive.ts

@@ -0,0 +1,59 @@
+import {Directive, HostListener, Input, Optional} from '@angular/core';
+import {
+  AnimationBuilder,
+  Config,
+  IonBackButtonDelegate,
+  IonRouterOutlet,
+  NavController,
+} from '@ionic/angular';
+
+/**
+ * Overrides the default ion-back-button directive.
+ *
+ * @see https://github.com/ionic-team/ionic-framework/blob/main/angular/src/directives/navigation/ion-back-button.ts
+ */
+@Directive({
+  selector: 'ion-back-button',
+})
+export class IonBackButtonOverrideDirective {
+  @Input()
+  defaultHref: string | undefined | null;
+
+  @Input()
+  routerAnimation?: AnimationBuilder;
+
+  constructor(
+    @Optional() private routerOutlet: IonRouterOutlet,
+    private navCtrl: NavController,
+    private config: Config,
+    private ionBackButton: IonBackButtonDelegate,
+  ) {
+    this.ionBackButton.onClick = () => {
+      // Override default onClick to prevent double execution and errors
+    };
+  }
+
+  @HostListener('click', ['$event'])
+  onClick(event: Event): void {
+    const defaultHref =
+      this.defaultHref || this.config.get('backButtonDefaultHref');
+
+    // Handle back via angular navCtrl.back()
+    // (which is animated, instead of location.back)
+    if (defaultHref === '..') {
+      this.navCtrl.back();
+    } else if (this.routerOutlet?.canGoBack()) {
+      this.navCtrl.setDirection(
+        'back',
+        undefined,
+        undefined,
+        this.routerAnimation,
+      );
+      this.routerOutlet.pop();
+      event.preventDefault();
+    } else if (defaultHref != undefined) {
+      this.navCtrl.navigateBack(defaultHref, {animation: this.routerAnimation});
+      event.preventDefault();
+    }
+  }
+}

src/app/util/next-date-in-list.pipe.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2021 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/>.
+ */
+
+import {Injectable, Pipe, PipeTransform} from '@angular/core';
+import moment from 'moment';
+
+/**
+ * Get the last value of an array
+ */
+@Injectable()
+@Pipe({
+  name: 'nextDateInList',
+  pure: false, // pure pipe can break in some change detection scenarios,
+  // specifically, on the calendar view it causes it to stay true even when you navigate
+})
+export class NextDateInListPipe implements PipeTransform {
+  /**
+   * Transform
+   */
+  // tslint:disable-next-line:prefer-function-over-method
+  transform(dates: string[]): string {
+    const nextDate = dates
+      .sort((a, b) => moment(a).unix() - moment(b).unix())
+      .find(date => {
+        return moment(date).unix() > moment().unix();
+      });
+    return nextDate || '';
+  }
+}

src/app/util/util.module.ts

@@ -18,7 +18,10 @@ import {ArrayLastPipe} from './array-last.pipe';
 import {DateIsThisPipe} from './date-is-today.pipe';
 import {NullishCoalescingPipe} from './nullish-coalecing.pipe';
 import {DateFromIndexPipe} from './date-from-index.pipe';
+import {DaytimeKeyPipe} from './daytime-key.pipe';
 import {LazyPipe} from './lazy.pipe';
+import {NextDateInListPipe} from './next-date-in-list.pipe';
+import {IonBackButtonOverrideDirective} from './ion-back-button.directive';
 
 @NgModule({
   declarations: [
@@ -27,6 +30,9 @@ import {LazyPipe} from './lazy.pipe';
     NullishCoalescingPipe,
     LazyPipe,
     DateFromIndexPipe,
+    DaytimeKeyPipe,
+    NextDateInListPipe,
+    IonBackButtonOverrideDirective,
   ],
   exports: [
     ArrayLastPipe,
@@ -34,6 +40,9 @@ import {LazyPipe} from './lazy.pipe';
     NullishCoalescingPipe,
     LazyPipe,
     DateFromIndexPipe,
+    DaytimeKeyPipe,
+    NextDateInListPipe,
+    IonBackButtonOverrideDirective,
   ],
 })
 export class UtilModule {}