dashboard-workout.component.ts

// app/components/dashboard-workout.component.ts
import {Component} from 'angular2/core';
import {Input} from 'angular2/core';
import {NgForm} from 'angular2/common';
import {Control} from "angular2/common";
import {ControlGroup} from "angular2/common";
import {APIService} from '../services/api.service';
import {HttpClient} from '../services/http.service';
import {Injectable} from "angular2/core";

@Injectable()
@Component({
    selector: 'dashboard-workout',
    template: `
    <div class="col-md-6">
      <ul *ngFor="#exercise_detail of workout.exercise_details">
        <h4>{{exercise_detail.exercise.name}}</h4>
        <li *ngIf="exercise_detail.reps">Reps: {{exercise_detail.reps}}</li>
        <li *ngIf="exercise_detail.sets">Sets: {{exercise_detail.sets}}</li>
        <li *ngIf="exercise_detail.time">Time: {{exercise_detail.time}}</li>
        <li *ngIf="exercise_detail.weight">Weight: {{exercise_detail.weight}}</li>
      </ul>
      <form [ngFormModel]="singleWorkoutGroup" (ngSubmit)="onSubmit(singleWorkoutGroup.value)">
        <input type="hidden" class="form-control" [ngFormControl]="workoutIdControl" ([ngModel])="id" />
        <input type="hidden" class="form-control" [ngFormControl]="completeControl" ([ngModel])="complete" />
        <input type="submit" />
      </form>
    </div>

    <hr />
    `,
  directives: []
})

export class DashboardWorkoutComponent {
  singleWorkoutGroup = new ControlGroup({});
  completeControl = new Control();
  workoutIdControl = new Control();
  userId:number;

  @Input() workout;
  @Input() workoutControlGroup;
  
  constructor(public apiService:APIService, public http:HttpClient) {
        this.userId = localStorage.getItem("user_id");
        this.apiService = apiService;
        this.http = http;
    }

  ngOnInit() {
      this.singleWorkoutGroup.addControl("complete", this.completeControl);
      this.singleWorkoutGroup.addControl("id", this.workoutIdControl);
      this.workoutIdControl.updateValue(this.workout.id);
      this.completeControl.updateValue(1);
  }
  
  onSubmit(data) {
      return new Promise((resolve, reject) => {
            let workoutParams = {"workout": data};
            console.log(workoutParams);
            this.http.patch(`${this.apiService.baseUrl}/users/${this.userId}/workouts/${this.workout.id}`, JSON.stringify(workoutParams))
                .subscribe(
                    data => { console.log("workout is now complete!")},
                    err => reject(err),
                    () => console.log("workout submitted")
                );
        })
  }
}

user-dashboard.ts

// app/pages/user-dashboard/user-dashboard.ts
import {Component} from 'angular2/core';
import {HttpClient} from "../../services/http.service";
import {APIService} from "../../services/api.service";
import {CORE_DIRECTIVES} from "angular2/common";
import {DashboardWorkoutComponent} from "../../components/dashboard-workout.component";
import {ControlGroup, Control} from "angular2/common";
import {Page} from 'ionic-angular';
import {forwardRef} from 'angular2/core';


@Page({
    selector: 'cw-user-dashboard',
    templateUrl: 'build/pages/user-dashboard/user-dashboard.html',
    inputs: ['userDashboardJSON', 'goals', 'user'],
    providers: [CORE_DIRECTIVES, HttpClient, APIService, DashboardWorkoutComponent],
    directives: [forwardRef(() => DashboardWorkoutComponent)]
})

export class UserDashboardPage {
    http: HttpClient;
    userId:number;
    public userDashboardJSON:any;
    apiService:APIService;
    goals:Array<Object>;
    personalDetails:Array<Object>;
    workouts:Array<Object>;
    user:Object;
    workoutControlGroup = new ControlGroup({});

    constructor(private _http:HttpClient, private _apiService:APIService) {
        this.userId = localStorage.getItem("user_id");
        this.http = _http;
        this.apiService = _apiService;
        console.log("user constructed");
        this.getUserDashboardData();
    }

    getUserDashboardData() {
        return new Promise((resolve, reject) => {
            this.http.get(`${this.apiService.baseUrl}/users/${this.userId}/dashboard`)
                .subscribe(
                    data => { console.log(data),
                        this.userDashboardJSON = data.json(),
                        this.goals = this.userDashboardJSON.goals,
                        this.personalDetails = this.userDashboardJSON.personal_details,
                        this.workouts = this.userDashboardJSON.workouts,
                        this.user = this.userDashboardJSON,
                        console.log(this.userDashboardJSON)},
                    err => reject(err),
                    () => console.log(this.workouts)
                );
        })
    }
}