Profile comparison - Waypoints Table

projects/planner/src/app/app.module.ts

@@ -84,6 +84,9 @@ import { RedundanciesComponent } from './redundancies/redundancies.component';
 import { RedundanciesService } from './shared/redundancies.service';
 import { ReloadDispatcher } from './shared/reloadDispatcher';
 import { ManagedDiveSchedules } from './shared/managedDiveSchedules';
+import { WaypointsDifferenceComponent } from './diff/waypoints/diff-waypoints.component';
+import { DiveInfoDifferenceComponent } from './diff/diveinfo/diff-diveinfo.component';
+import { ProfileDifferenceChartComponent } from './diff/profilechart/diff-profilechart.component';
 import { MaskitoModule } from '@maskito/angular';
 import { SurfaceIntervalComponent } from './surface-interval/surface-interval.component';
 
@@ -142,7 +145,10 @@ const COMPONENTS = [
     TanksSimpleComponent,
     TankSizeComponent,
     WayPointsComponent,
-    WeightCalcComponent
+    WeightCalcComponent,
+    WaypointsDifferenceComponent,
+    DiveInfoDifferenceComponent,
+    ProfileDifferenceChartComponent
 ];
 
 const SERVICES = [

projects/planner/src/app/diff/diff.component.html

@@ -1,5 +1,14 @@
-<div class="row mt-5">
-    <div class="col mt-3">
-        <p>diff works!</p>
+<div class="mt-5">
+    <div class="row">
+        <div class="col-12 col-lg-12 col-xl-6 col-xxl-6 mt-4">
+            <app-diff-profilechart></app-diff-profilechart>
+        </div>
+        <div class="col-md-6 col-xl-6 mt-4">
+            <app-diff-waypoints [data]="testData"></app-diff-waypoints>
+        </div>
+        <div class="col-md-6 col-xl-5 col-xxl-3 mt-4">
+            <app-diff-diveinfo></app-diff-diveinfo>
+        </div>
     </div>
 </div>
+

projects/planner/src/app/diff/diff.component.ts

@@ -1,18 +1,14 @@
-import { Component } from '@angular/core';
-import { WayPointsService } from '../shared/waypoints.service';
-import { UnitConversion } from '../shared/UnitConversion';
-import {
-    Ceiling, Segments, StandardGases,
-    Tank, Time, Event
-} from 'scuba-physics';
-import { WayPoint } from '../shared/models';
-
-
-class TestData {
-    public readonly profileA: WayPoint[];
+import {Component} from '@angular/core';
+import {WayPointsService} from '../shared/waypoints.service';
+import {UnitConversion} from '../shared/UnitConversion';
+import {Segments, StandardGases, Tank, Time} from 'scuba-physics';
+import {WayPoint} from '../shared/models';
+
+export class TestData {
+    public readonly wayPointsA: WayPoint[];
     public readonly tanksA: Tank[];
 
-    public readonly profileB: WayPoint[];
+    public readonly wayPointsB: WayPoint[];
     public readonly tanksB: Tank[];
 
     constructor() {
@@ -36,7 +32,7 @@ class TestData {
         segmentsA.add(21, 3, StandardGases.ean50, Time.oneMinute * 3);
         segmentsA.add(3, 3, StandardGases.oxygen, Time.oneMinute * 6);
         segmentsA.add(3, 0, StandardGases.oxygen, Time.oneMinute);
-        this.profileA = waypointService.calculateWayPoints(segmentsA.items);
+        this.wayPointsA = waypointService.calculateWayPoints(segmentsA.items);
 
         this.tanksB = [
             new Tank(24, 200, 21),
@@ -51,7 +47,7 @@ class TestData {
         segmentsB.add(30, 15, StandardGases.air, Time.oneMinute * 3);
         segmentsB.add(15, 15, StandardGases.ean50, Time.oneMinute);
         segmentsB.add(15, 0, StandardGases.ean50, Time.oneMinute * 2);
-        this.profileB = waypointService.calculateWayPoints(segmentsB.items);
+        this.wayPointsB = waypointService.calculateWayPoints(segmentsB.items);
     }
 }
 
@@ -61,8 +57,5 @@ class TestData {
     styleUrls: ['./diff.component.scss']
 })
 export class DiffComponent {
-    public data = new TestData();
-
-    // run: npm start
-    // Navigate to the component: http://localhost:4200/diff
+    public testData = new TestData();
 }

projects/planner/src/app/diff/diveinfo/diff-diveinfo.component.html

@@ -0,0 +1 @@
+<app-diveinfo></app-diveinfo>

projects/planner/src/app/diff/diveinfo/diff-diveinfo.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DiveInfoDifferenceComponent } from './diff-diveinfo.component';
+
+describe('DiveInfoDifferenceComponent', () => {
+    let component: DiveInfoDifferenceComponent;
+    let fixture: ComponentFixture<DiveInfoDifferenceComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [DiveInfoDifferenceComponent]
+        });
+        fixture = TestBed.createComponent(DiveInfoDifferenceComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

projects/planner/src/app/diff/diveinfo/diff-diveinfo.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-diff-diveinfo',
+    templateUrl: './diff-diveinfo.component.html',
+    styleUrls: ['./diff-diveinfo.component.scss']
+})
+export class DiveInfoDifferenceComponent {
+
+}

projects/planner/src/app/diff/profilechart/diff-profilechart.component.html

@@ -0,0 +1 @@
+<app-profilechart></app-profilechart>

projects/planner/src/app/diff/profilechart/diff-profilechart.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfileDifferenceChartComponent } from './diff-profilechart.component';
+
+describe('ProfileDifferenceChartComponent', () => {
+    let component: ProfileDifferenceChartComponent;
+    let fixture: ComponentFixture<ProfileDifferenceChartComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [ProfileDifferenceChartComponent]
+        });
+        fixture = TestBed.createComponent(ProfileDifferenceChartComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

projects/planner/src/app/diff/profilechart/diff-profilechart.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-diff-profilechart',
+    templateUrl: './diff-profilechart.component.html',
+    styleUrls: ['./diff-profilechart.component.scss']
+})
+export class ProfileDifferenceChartComponent {
+
+}

projects/planner/src/app/diff/waypoints/diff-waypoints.component.html

@@ -0,0 +1,50 @@
+<div class="card overflow-y-scroll">
+    <div class="card-header">
+        <div class="float-start">
+            <fa-icon [icon]="tasks" class="me-3"></fa-icon>
+            <span>Dive way points</span>
+        </div>
+    </div>
+    <div class="card-body card-minheight table-responsive card-max-height-md">
+        <table id="waypointsDiffTable" class="table table-sm p-0 text-center table-hover">
+            <thead class="table-light sticky-top">
+            <tr>
+                <th colspan="1" ></th>
+                <th colspan="2" class="fw-bold px-1 active-profile">Profile A</th>
+                <th colspan="2" class="fw-bold px-1">Profile B</th>
+            </tr>
+            <tr>
+                <th class="fw-bold px-1 ">Run [min]</th>
+                <th class="fw-bold px-1 active-profile">Depth [{{units.length}}]</th>
+                <th class="fw-bold px-1 active-profile">Duration [min]</th>
+                <th class="fw-bold px-1">Depth [{{units.length}}]</th>
+                <th class="fw-bold px-1">Duration [min]</th>
+            </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let row of tableRowProvider.getRows()">
+                    <td class="px-1 vertical-right-border">
+                        {{ row.runTime * 1000 | date:'mm:ss' }}
+                    </td>
+                    <td  *ngIf="row.depthA !== undefined; else emptyRow" class="px-1">
+                        {{ row.depthA  | number: '1.0-0'}}
+                    </td>
+                    <td *ngIf="row.durationA !== undefined else emptyRowWithDivider" class="px-1 vertical-right-border">
+                        {{ row.durationA * 1000 | date: 'mm:ss'}}
+                    </td>
+                    <td *ngIf="row.depthB !== undefined else emptyRow" class="px-1">
+                        {{ row.depthB | number:'1.0-0' }}
+                    </td>
+                    <td *ngIf="row.durationB !== undefined else emptyRow" class="px-1">
+                        {{ row.durationB * 1000 | date: 'mm:ss'}}
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<ng-template #emptyRow><td class="px-1"></td></ng-template>
+<ng-template #emptyRowWithDivider><td class="px-1 vertical-right-border"></td></ng-template>
+
+

projects/planner/src/app/diff/waypoints/diff-waypoints.component.scss

@@ -0,0 +1,24 @@
+@import "node_modules/mdb-angular-ui-kit/assets/scss/free/variables";
+#waypointsDiffTable {
+    .vertical-right-border {
+        border-right-width: medium;
+    }
+    .vertical-left-border {
+        border-left-width: medium;
+    }
+
+    .vertical-borders {
+        border-left-width: medium;
+        border-right-width: medium;
+    }
+
+    tr {
+        border-top: hidden;
+        border-bottom: hidden;
+    }
+
+    .active-profile {
+        background: $primary;
+        border-color: $primary;
+    }
+}

projects/planner/src/app/diff/waypoints/diff-waypoints.component.spec.ts

@@ -0,0 +1,24 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {WaypointsDifferenceComponent} from './diff-waypoints.component';
+import {UnitConversion} from '../../shared/UnitConversion';
+import {TestData} from '../diff.component';
+
+describe('WaypointsDifferenceComponent', () => {
+    let component: WaypointsDifferenceComponent;
+    let fixture: ComponentFixture<WaypointsDifferenceComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [WaypointsDifferenceComponent],
+            providers: [UnitConversion]
+        });
+        fixture = TestBed.createComponent(WaypointsDifferenceComponent);
+        component = fixture.componentInstance;
+        component.data = new TestData();
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

projects/planner/src/app/diff/waypoints/diff-waypoints.component.ts

@@ -0,0 +1,24 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {TestData} from '../diff.component';
+import {faTasks} from '@fortawesome/free-solid-svg-icons';
+import {UnitConversion} from '../../shared/UnitConversion';
+import {WaypointsComparisonTableRowProvider} from '../../shared/waypointsComparisonTableRowProvider';
+
+@Component({
+    selector: 'app-diff-waypoints',
+    templateUrl: './diff-waypoints.component.html',
+    styleUrls: ['./diff-waypoints.component.scss'],
+})
+export class WaypointsDifferenceComponent implements OnInit {
+    @Input({ required: true }) data!: TestData;
+    public tasks = faTasks;
+    public tableRowProvider: WaypointsComparisonTableRowProvider =
+        new WaypointsComparisonTableRowProvider([], []);
+
+    constructor(public units: UnitConversion) {
+    }
+
+    ngOnInit() {
+        this.tableRowProvider = new WaypointsComparisonTableRowProvider(this.data.wayPointsA, this.data.wayPointsB);
+    }
+}

projects/planner/src/app/shared/WaypointsComparisonTableRow.ts

@@ -0,0 +1,7 @@
+export interface WaypointsComparisonTableRow {
+    runTime: number;
+    depthA: number | undefined;
+    durationA: number | undefined;
+    depthB: number | undefined;
+    durationB: number | undefined;
+}

projects/planner/src/app/shared/waypointsComparisonTableRowProvider.ts

@@ -0,0 +1,66 @@
+import {WayPoint} from './models';
+import {WaypointsComparisonTableRow} from './WaypointsComparisonTableRow';
+
+// TODO: Rework into injectable service that gets data from services instead of constructor
+export class WaypointsComparisonTableRowProvider {
+
+    private wayPointsA: WayPoint[];
+    private wayPointsB: WayPoint[];
+    private _waypointRows: WaypointsComparisonTableRow[] = [];
+
+    constructor(wayPointsA: WayPoint[], wayPointsB: WayPoint[]) {
+        this.wayPointsA = wayPointsA;
+        this.wayPointsB = wayPointsB;
+    }
+
+    public getRows(): WaypointsComparisonTableRow[] {
+        const MAX_SAFETY_LIMIT = 65536; // 2**16
+        let waypointA: WayPoint | undefined = this.wayPointsA.pop();
+        let waypointB: WayPoint | undefined = this.wayPointsB.pop();
+
+        for (let i = 0; i < MAX_SAFETY_LIMIT; i++) {
+            let row: WaypointsComparisonTableRow;
+            if (waypointA === undefined && waypointB === undefined) {
+                break;
+            }
+
+            if ((waypointA?.endTime || -1) > (waypointB?.endTime || -1)) {
+                row = {
+                    runTime: waypointA!.endTime,
+                    durationA: waypointA?.duration,
+                    depthA: waypointA?.endDepth,
+                    durationB: undefined,
+                    depthB: undefined,
+                };
+                waypointA = this.wayPointsA.pop();
+                this._waypointRows.unshift(row);
+                continue;
+            }
+
+            if ((waypointA?.endTime || -1) < (waypointB?.endTime || -1)) {
+                row = {
+                    runTime: waypointB!.endTime,
+                    durationA: undefined,
+                    depthA: undefined,
+                    durationB: waypointB?.duration,
+                    depthB: waypointB?.endDepth,
+                };
+                waypointB = this.wayPointsB.pop();
+                this._waypointRows.unshift(row);
+                continue;
+            }
+
+            row = {
+                runTime: waypointA!.endTime,
+                durationA: waypointA?.duration,
+                depthA: waypointA?.endDepth,
+                durationB: waypointB?.duration,
+                depthB: waypointB?.endDepth,
+            };
+            waypointA = this.wayPointsA.pop();
+            waypointB = this.wayPointsB.pop();
+            this._waypointRows.unshift(row);
+        }
+        return this._waypointRows;
+    }
+}

projects/planner/src/styles.scss

@@ -13,3 +13,8 @@
 .dropdown-menu {
     position: relative !important;
 }
+
+.card-max-height-md {
+    max-height: 500px;
+    overflow-y: scroll;
+}