Implemented Log Segments/Points

Author: chrisn

src/app/app.component.html

@@ -20,5 +20,12 @@ <h3>Select audio</h3>
     </button>&nbsp;
   </div>
 
-  <waveform-view [selectedAudio]="selectedAudio"></waveform-view>
+  <waveform-view
+    [selectedAudio]="selectedAudio"
+    (segmentsEmitter)="updateSegments($event)"
+    (pointsEmitter)="updatePoints($event)">
+  </waveform-view>
+
+  <segments-list [segments]="segments"></segments-list>
+  <points-list [points]="points"></points-list>
 </div>

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { Point, Segment } from 'peaks.js';
 
 import ExampleAudio from './example-audio';
 
@@ -29,7 +30,18 @@ export class AppComponent {
   exampleAudio: ExampleAudio[] = audioUrls;
   selectedAudio: ExampleAudio = audioUrls[0];
 
+  segments: Segment[] = [];
+  points: Point[] = [];
+
   onSelect(audio: ExampleAudio): void {
     this.selectedAudio = audio;
   }
+
+  updateSegments(segments: Segment[]) {
+    this.segments = segments;
+  }
+
+  updatePoints(points: Point[]) {
+    this.points = points;
+  }
 }

src/app/app.module.ts

@@ -4,11 +4,15 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { WaveformViewComponent } from './waveform-view/waveform-view.component';
+import { SegmentsListComponent } from './segments-list/segments-list.component';
+import { PointsListComponent } from './points-list/points-list.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    WaveformViewComponent
+    WaveformViewComponent,
+    SegmentsListComponent,
+    PointsListComponent
   ],
   imports: [
     BrowserModule,

src/app/points-list/points-list.component.css

@@ -0,0 +1,18 @@
+<h3 *ngIf="points.length > 0">Points</h3>
+
+<table class="table table-striped" *ngIf="points.length > 0">
+  <thead>
+    <tr>
+        <th scope="col">ID</th>
+        <th scope="col">Time</th>
+        <th scope="col">Label</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let point of points">
+      <td>{{ point.id }}</td>
+      <td>{{ point.time }}</td>
+      <td>{{ point.labelText }}</td>
+    </tr>
+  </tbody>
+</table>

src/app/points-list/points-list.component.html

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PointsListComponent } from './points-list.component';
+
+describe('PointsListComponent', () => {
+  let component: PointsListComponent;
+  let fixture: ComponentFixture<PointsListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PointsListComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PointsListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/points-list/points-list.component.spec.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+import { Point } from 'peaks.js';
+
+@Component({
+  selector: 'points-list',
+  templateUrl: './points-list.component.html',
+  styleUrls: ['./points-list.component.css']
+})
+export class PointsListComponent {
+  @Input() points: Point[] = [];
+}

src/app/points-list/points-list.component.ts

@@ -0,0 +1,20 @@
+<h3 *ngIf="segments.length > 0">Segments</h3>
+
+<table class="table table-striped" *ngIf="segments.length > 0">
+  <thead>
+    <tr>
+      <th scope="col">ID</th>
+      <th scope="col">Start Time</th>
+      <th scope="col">End Time</th>
+      <th scope="col">Label</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let segment of segments">
+      <td>{{ segment.id }}</td>
+      <td>{{ segment.startTime }}</td>
+      <td>{{ segment.endTime }}</td>
+      <td>{{ segment.labelText }}</td>
+    </tr>
+  </tbody>
+</table>

src/app/segments-list/segments-list.component.css

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SegmentsListComponent } from './segments-list.component';
+
+describe('SegmentsListComponent', () => {
+  let component: SegmentsListComponent;
+  let fixture: ComponentFixture<SegmentsListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SegmentsListComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SegmentsListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});