reports-add component was completely implemented. (#42)

src/app/app.module.ts

@@ -3,6 +3,7 @@ import { environment } from '../environments/environment';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 
@@ -58,7 +59,8 @@ import { ReportsAddComponent } from './components/reports-add/reports-add.compon
     MatIconModule,
     MatInputModule,
     MatDatepickerModule,
-    MatNativeDateModule
+    MatNativeDateModule,
+    FormsModule
   ],
   providers: [UserService, ReportService, AuthGuard],
   bootstrap: [AppComponent]

src/app/components/reports-add/reports-add.component.html

@@ -1,16 +1,16 @@
 <div class="form-wrapper">
   <form class="form-container">
       <mat-form-field class="example-full-width">
-        <input matInput [(ngModel)]="report.distance" placeholder="Distance (Metres)">
+        <input matInput placeholder="Distance (Metres)" name="distance" [(ngModel)]="distance" >
       </mat-form-field>
       <mat-form-field class="example-full-width">
-        <input matInput [(ngModel)]="report.time" placeholder="Time (seconds)">
+        <input matInput placeholder="Time (seconds)" name="time" [(ngModel)]="time">
       </mat-form-field>
       <mat-form-field>
-          <input matInput [(ngModel)]="report.timestamp" [matDatepicker]="picker" placeholder="Choose a date">
+          <input matInput [matDatepicker]="picker" placeholder="Choose a date" name="timestamp" [(ngModel)]="timestamp" color="primary">
           <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
           <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
       </mat-form-field>
-      <button mat-raised-button (click)="addReport()">Add</button>
+      <button mat-raised-button (click)="addReport(distance, time, timestamp)">Add</button>
   </form>
 </div>

src/app/components/reports-add/reports-add.component.ts

@@ -7,23 +7,21 @@ import { Report } from '../../models/Report';
   templateUrl: './reports-add.component.html',
   styleUrls: ['./reports-add.component.css']
 })
-export class ReportsAddComponent implements OnInit {
 
-  readonly report: Report = {
-    timestamp: '',
-    distance: 0,
-    time: ''
-  };
+export class ReportsAddComponent implements OnInit {
 
   startDate = new Date();
   constructor(public reportService: ReportService) { }
 
   ngOnInit() {
   }
 
-  addReport() {
-    this.reportService.addReport(this.report);
-    // const report = new Report({time =})
-    // this.reportService.addReport(new Report({distance}))
+  addReport(distance: number, time: string, timestamp: string) {
+    const report: Report = {
+      timestamp: timestamp,
+      distance: distance,
+      time: time
+    };
+    this.reportService.addReport(report);
   }
 }

src/app/services/user/user.service.ts

@@ -53,10 +53,4 @@ export class UserService {
   get currentUserId(): string {
     return this._angularFireAuth.auth.currentUser.uid;
   }
-
-  // get authenticated(): Observable<boolean> {
-  //   return this._angularFireAuth.authState
-  //   .take(1)
-  //   .map(user => !!user);
-  // }
 }