working example

src/models/course.ts

@@ -1,6 +1,7 @@
+import { Student } from './student';
 export class Course {
 
-    private _id?: string;
+    private id?: string;
  //   private classId: string;
     private ownerId: string;
     private department: string;
@@ -12,6 +13,7 @@ export class Course {
     private building: string;
     private startDate: number;
     private endDate: number;
+    public students: Student[];
 
     constructor(ownerId: string, department: string, courseNum: string,
         section: string, term: string, year: string, room: string, building: string,
@@ -28,6 +30,7 @@ export class Course {
         this.building = building;
         this.startDate = startDate;
         this.endDate = endDate;
+        this.students = [];
     }
 
     // SETTERS
@@ -38,7 +41,7 @@ export class Course {
      * @memberof Course
      */
     setId(id: string) {
-        this._id = id;
+        this.id = id;
     }
 
     // /**
@@ -136,7 +139,7 @@ export class Course {
      * @memberof Course
      */
     getId() {
-        return this._id;
+        return this.id;
     }
 
     // /**
@@ -231,10 +234,22 @@ export class Course {
         return new Date(this.startDate).toDateString();
     }
 
+    getStudents() {
+        return this.students;
+    }
+
     getFormattedEndDate() {
         return new Date(this.endDate).toDateString();
     }
 
+    addStudent(student: Student) {
+        this.students.push(student);
+    }
+
+    addStudents(students: Student[]) {
+        this.students.push(...students);
+    }
+
     // toJSON() {
     //     return JSON.stringify(this);
     // }

src/models/student.ts

@@ -0,0 +1,5 @@
+export interface Student {
+    name: string;
+    image: string;
+    imageData: string;
+}

src/pages/add-course/add-course.html

@@ -115,4 +115,20 @@
 
   </form>
 
+  <ion-list>
+    <ion-list-header class="header">Students</ion-list-header>
+    <ion-item *ngFor="let student of students; let i = index">
+      <ion-input [(ngModel)]="students[i].name"></ion-input>
+      <button class="round" color="danger" ion-button item-end icon-only>
+        <ion-icon name="remove"></ion-icon>
+      </button>
+    </ion-item>
+
+    <button ion-button clear block (click)="addStudent()">Add Student</button>
+
+  </ion-list>
+
+
+
+
 </ion-content>

src/pages/add-course/add-course.scss

@@ -26,4 +26,10 @@ page-add-course {
     .list-md>.item-block:last-child {
         border-bottom: none;
     }
+    .round {
+        width: 25px;
+        border-radius: 20px;
+    }
+
+
 }

src/pages/add-course/add-course.ts

@@ -1,11 +1,13 @@
 import { Component } from '@angular/core';
-import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
+import { IonicPage, NavController, NavParams, ViewController, ModalController } from 'ionic-angular';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { DEPARTMENTS } from '../../providers/constants';
 import { Course } from '../../models/course';
 import { AuthServiceProvider } from '../../providers/auth-service/auth-service';
 import { UtilitiesProvider } from '../../providers/utilities/utilities';
 import { CourseDataServiceProvider } from '../../providers/data-service/course-data-service';
+import { Student } from '../../models/student';
+import { ImageDataServiceProvider } from '../../providers/data-service/image-data-service';
 
 /**
  * Generated class for the AddCoursePage page.
@@ -25,8 +27,13 @@ export class AddCoursePage {
   departments: string[];
   startDate: string;
   endDate: string;
-  constructor(private view: ViewController, private formBuilder: FormBuilder, private auth: AuthServiceProvider, private utilities: UtilitiesProvider, private data: CourseDataServiceProvider) {
+  students: Student[];
+  courseId: string;
+  constructor(private view: ViewController, private formBuilder: FormBuilder, private auth: AuthServiceProvider, private utilities: UtilitiesProvider, private data: CourseDataServiceProvider,
+              private modal: ModalController, private imageDataProvider: ImageDataServiceProvider) {
     this.departments = DEPARTMENTS;
+    this.students = [];
+    this.courseId = Math.floor(Date.now() / 1000).toString();
 
     this.createCourseForm = this.formBuilder.group({
       department: ['', Validators.required],
@@ -45,7 +52,7 @@ export class AddCoursePage {
 
   async save() {
 
-    if (this.startDate != null && this.endDate != null) {
+    if (this.startDate != null && this.endDate != null && this.students.length > 0) {
 
       let loader = this.utilities.createLoading('Creating course...');
         loader.present();
@@ -66,19 +73,26 @@ export class AddCoursePage {
           startDate.getTime(),
           endDate.getTime());
 
-
+        course.setId(this.courseId);
+        course.addStudents(this.students);
         console.log(course);
 
 
 
+        let promises = course.getStudents().map((student)=> this.imageDataProvider.uploadImage(student.imageData, course.getId(), student.image));
+        await Promise.all(promises);
         await this.data.createCourse(course);
+        await this.imageDataProvider.train(course.getId());
+
+        console.log('Done Uploading');
         console.log('hi');
         loader.dismiss();
         this.utilities.createToast('Course created!', 3000).present();
         this.view.dismiss();
 
       } catch (e) {
         loader.dismiss();
+        console.log(JSON.stringify(e));
         this.utilities.createToast(e, 3000).present();
 
       }
@@ -92,6 +106,21 @@ export class AddCoursePage {
 
   }
 
+  addStudent() {
+    let modal = this.modal.create('AddStudentPage', {courseId: this.courseId});
+    modal.onDidDismiss((data) => {
+      if (data.added == true) {
+        console.log(JSON.stringify(data.student.name));
+        this.students.push(data.student);
+      }
+    });
+    modal.present();
+  }
+
+  removeStudent(i: number) {
+    this.students.splice(i, 1);
+  }
+
   dismiss() {
     this.view.dismiss();
   }

src/pages/add-student/add-student.html

@@ -0,0 +1,44 @@
+<!--
+  Generated template for the HomePage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+
+  <ion-navbar color="primary">
+    <ion-title>Add Student</ion-title>
+    <ion-buttons end>
+      <button ion-button>Save</button>
+    </ion-buttons>
+
+    <ion-buttons start>
+      <button ion-button (click)="dismiss()" >Cancel</button>
+    </ion-buttons>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content>
+
+    <ion-item>
+      <ion-input placeholder="Student Full Name" [(ngModel)]="student.name"></ion-input>
+    </ion-item>
+
+    <ion-card style="margin-top: 5%;">
+        <div *ngIf="imageData; else upload">
+          <img class="image1" [src]="domSanitizer.bypassSecurityTrustUrl(imageData)" alt="image source">
+        </div>
+        <ng-template #upload>
+          <div class="upload" (click)="takePhoto()">
+            <ion-icon name="camera"></ion-icon>
+          </div>
+        </ng-template>
+    </ion-card>
+
+      <div padding>
+        <button color="primary" ion-button block (click)="submit()">Submit</button>
+        <button *ngIf="imageData" color="danger" ion-button block (click)="delete()">Delete</button>
+      </div>
+</ion-content>

src/pages/add-student/add-student.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { AddStudentPage } from './add-student';
+
+@NgModule({
+  declarations: [
+    AddStudentPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(AddStudentPage),
+  ],
+})
+export class AddStudentPageModule {}

src/pages/add-student/add-student.scss

@@ -0,0 +1,31 @@
+page-add-student {
+    .upload {
+        //height: 90px;
+        line-height: 400px;
+        text-align: center;
+        border: 2px maroon;
+        border-style: inset;
+        font-size: 60px;
+        background-color: transparentize($color: gray, $amount: 0.9);
+        font-weight: bold;
+        //border-style: outset;
+    }
+
+    .item {
+        background-color: transparentize($color: white, $amount: 0.25);
+        margin-bottom: 15px;
+       }
+
+    span {
+        display: inline-block;
+        vertical-align: middle;
+        line-height: normal;
+      }
+
+    .image1 {
+        line-height: 400px;
+        text-align: center;
+        height: 100%;
+        width: 100%;
+    }
+}

src/pages/add-student/add-student.ts

@@ -0,0 +1,67 @@
+import { Course } from './../../models/course';
+import { ImageDataServiceProvider } from './../../providers/data-service/image-data-service';
+import { UtilitiesProvider } from './../../providers/utilities/utilities';
+import { CameraServiceProvider } from './../../providers/camera-service/camera-service';
+import { Student } from './../../models/student';
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
+import { DomSanitizer } from '@angular/platform-browser';
+
+/**
+ * Generated class for the AddStudentPage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+
+@IonicPage()
+@Component({
+  selector: 'page-add-student',
+  templateUrl: 'add-student.html',
+})
+export class AddStudentPage {
+
+  imageData: string;
+  nonNormalized: string;
+  student = {} as Student;
+  courseId: string;
+
+  constructor(public navCtrl: NavController, public navParams: NavParams,
+    private cam: CameraServiceProvider, public domSanitizer: DomSanitizer,
+    private view: ViewController, private utilities: UtilitiesProvider,
+    private data: ImageDataServiceProvider) {
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad HomePage');
+    this.courseId = this.navParams.get('courseId');
+  }
+
+  async takePhoto() {
+    try {
+      this.imageData = await this.cam.takePicture();      
+    } catch (e) {
+      this.utilities.createToast(e, 3000).present();
+    }
+  }
+
+  async submit() {
+    this.student.image = `stu-${this.courseId}-${this.student.name.replace(/\s/g, '')}`;
+    if (this.student.name != '' && this.imageData != null && this.student.image != '') {
+      this.student.imageData = this.imageData;
+      this.utilities.createToast('Added student!', 2000).present();
+      this.view.dismiss({student: this.student, added: true});
+    } else {
+      this.utilities.createToast('Complete missing fields.', 3000).present();
+    }
+  }
+
+  delete() {
+    this.imageData = null;
+  }
+
+  dismiss() {
+    this.view.dismiss({added: false});
+  }
+
+}

src/pages/courses/courses.html

@@ -22,7 +22,13 @@
 
 
 <ion-content class="background card-background-page">
-
+  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
+    <ion-refresher-content
+      pullingIcon="arrow-dropdown"
+      pullingText="Pull to refresh"
+      refreshingSpinner="circles">
+    </ion-refresher-content>
+  </ion-refresher>
   <ion-card *ngFor="let course of courses; let i = index" [@visibilityChanged]="visibility" style="opacity: 0">
     <div tappable (click)="toggleButtons(i)" class="image-container">
       <img *one-time [src]="getRandomImage()" />
@@ -55,4 +61,6 @@ <h3 style="color:gray;">{{course.getBuilding()}} {{course.getRoom()}}</h3>
 
   </ion-card>
 
+  <div class="no-courses" *ngIf="courses?.length === 0">No courses found.</div>
+
 </ion-content>

src/pages/courses/courses.scss

@@ -61,6 +61,13 @@ page-courses {
 
       }
 
+      .no-courses {
+        top: 50%;
+        position: relative;
+        color: gray;
+        text-align: center;
+      }
+
 
 
 }