feat: apply new layout overhaul

src/app/modules/dashboard/dashboard.component.ts

@@ -0,0 +1,107 @@
+/*
+ * 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 {Component, OnInit, OnDestroy} from '@angular/core';
+import {Router} from '@angular/router';
+import {Location} from '@angular/common';
+import {Subscription} from 'rxjs';
+import moment from 'moment';
+import {SCDateSeries, SCUuid} from '@openstapps/core';
+import {SplashScreen} from '@capacitor/splash-screen';
+
+import {DataRoutingService} from '../data/data-routing.service';
+import {ScheduleProvider} from '../calendar/schedule.provider';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss'],
+})
+export class DashboardComponent implements OnInit, OnDestroy {
+  /**
+   * Array of all subscriptions to Observables
+   */
+  subscriptions: Subscription[] = [];
+
+  /**
+   * UUID subscription
+   */
+  private _uuidSubscription: Subscription;
+
+  /**
+   * The events to display
+   */
+  private uuids: SCUuid[];
+
+  /**
+   * Next event in calendar
+   */
+  nextEvent: SCDateSeries | undefined;
+
+  /**
+   * Slider options
+   */
+  quickNavigationOptions = {
+    slidesPerView: 'auto',
+    spaceBetween: 12,
+    freeMode: {
+      enabled: true,
+      sticky: true,
+    },
+  };
+
+  constructor(
+    private readonly dataRoutingService: DataRoutingService,
+    private scheduleProvider: ScheduleProvider,
+    protected router: Router,
+    public location: Location,
+  ) {
+    this.subscriptions.push(
+      this.dataRoutingService.itemSelectListener().subscribe(item => {
+        void this.router.navigate(['data-detail', item.uid]);
+      }),
+    );
+  }
+
+  async ngOnInit() {
+    this._uuidSubscription = this.scheduleProvider.uuids$.subscribe(
+      async result => {
+        this.uuids = result;
+        await this.loadNextEvent();
+      },
+    );
+    await SplashScreen.hide();
+  }
+
+  async loadNextEvent() {
+    const dataSeries = await this.scheduleProvider.getDateSeries(
+      this.uuids,
+      ['P1W', 'P2W', 'P3W', 'P4W'],
+      moment(moment.now()).startOf('week').toISOString(),
+    );
+
+    this.nextEvent =
+      (dataSeries && dataSeries.dates && dataSeries.dates[0]) || undefined;
+  }
+
+  /**
+   * Remove subscriptions when the component is removed
+   */
+  ngOnDestroy() {
+    for (const sub of this.subscriptions) {
+      sub.unsubscribe();
+    }
+    this._uuidSubscription.unsubscribe();
+  }
+}