update course landing page

add image to userlogin page
add course service

src/app/app.component.html

@@ -1,10 +1,4 @@
 <ion-app>
-  <ion-header>
-    <ion-toolbar>
-      <ion-title><p align="center">Apnea Elearning</p></ion-title>
-      <ion-button (click)="logout()" size="small" color="dark" fill="clear" slot="end"><ion-icon slot="icon-only" name="ellipsis-vertical-outline"></ion-icon></ion-button>
-    </ion-toolbar>
-  </ion-header>
   <ion-content>
       <ion-router-outlet id="main-content"></ion-router-outlet>
   </ion-content>

src/app/app.module.ts

@@ -7,11 +7,12 @@ import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
 
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, FormsModule],
+  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, FormsModule, CommonModule],
   providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
   bootstrap: [AppComponent],
 })

src/app/course-landing/course-landing.page.html

@@ -1,9 +1,33 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>courseLanding</ion-title>
+    <ion-buttons>
+      <ion-back-button></ion-back-button>
+    </ion-buttons>  
+    <ion-title slot="secondary">{{thisCourse}} Course</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>{{thisCourse}} Course Progress</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <h1>Module Completion</h1>
+      <h1>Quiz Completion</h1>
+    </ion-card-content>
+  </ion-card>
+  <ion-grid>
+    <ion-row>
+      <ion-col>
+        <ion-button expand="block">Continue Module</ion-button>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col>
+        <ion-button expand="block">Take Quiz</ion-button>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 
 </ion-content>

src/app/course-landing/course-landing.page.ts

@@ -1,15 +1,23 @@
 import { Component, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { CourseService } from './course.service';
 
 @Component({
   selector: 'app-course-landing',
   templateUrl: './course-landing.page.html',
   styleUrls: ['./course-landing.page.scss'],
 })
 export class CourseLandingPage implements OnInit {
-
-  constructor() { }
+  thisCourse: String;
+  thisCourseChanged: Subscription;
+  constructor(private courseService: CourseService) { }
 
   ngOnInit() {
+    this.thisCourse = this.courseService.thisCourse
+    this.thisCourseChanged = this.courseService.courseChange
+        .subscribe(course => {
+          this.thisCourse = course;
+        })
   }
 
 }

src/app/course-landing/course.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CourseService } from './course.service';
+
+describe('CourseService', () => {
+  let service: CourseService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CourseService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/course-landing/course.service.ts

@@ -0,0 +1,23 @@
+import { Injectable, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CourseService implements OnInit {
+  allCourses = ["AIDA1","AIDA2","AIDA3","AIDA4","AIDA Instructor"]
+  thisCourse: String;
+  courseChange: Subject<String>;
+  constructor() {}
+
+  ngOnInit(){
+    this.courseChange.next(this.getCourse())
+  }
+
+  getCourse() {
+    return this.thisCourse
+  }
+  setCourse(course) {
+    this.thisCourse = course
+  }
+}

src/app/landing/landing-routing.module.ts

@@ -7,7 +7,7 @@ const routes: Routes = [
   {
     path: '',
     component: LandingPage
-  }
+  },
 ];
 
 @NgModule({

src/app/landing/landing.page.html

@@ -1,15 +1,22 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title><p align="center">Apnea Elearning</p></ion-title>
+    <ion-button size="small" color="dark" fill="clear" slot="end"><ion-icon slot="icon-only" name="ellipsis-vertical-outline"></ion-icon></ion-button>
+  </ion-toolbar>
+</ion-header>
+
 <ion-content>
   <ion-grid>
     <ion-row><hr></ion-row>
     <ion-row>
-     <ion-label (click)="tester()" align="center">Welcome <ion-text color="secondary"><span>{{username}}</span></ion-text> to your Apnea Elearning App.</ion-label>
+     <ion-label align="center">Welcome <ion-text color="secondary"><span>{{username}}</span></ion-text> to your Apnea Elearning App.</ion-label>
     </ion-row>
     <hr>
     <ion-row>
       <p align="center">To get started, select an available course from below</p>
     </ion-row>
     <ion-row  *ngFor="let course of availableCourses; index as i">
-      <ion-col><ion-button expand="full"> {{course}} </ion-button></ion-col>
+      <ion-col><ion-button (click)="onSelectCourse(course)" expand="block"> {{course}} </ion-button></ion-col>
       </ion-row>
     </ion-grid>
 </ion-content>

src/app/landing/landing.page.ts

@@ -1,5 +1,7 @@
 import { Component, Injectable, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
+import { CourseService } from '../course-landing/course.service';
 import { UserService } from '../users/user.service';
 @Component({
   selector: 'app-landing',
@@ -12,7 +14,7 @@ export class LandingPage implements OnInit{
   username: String;
   loggedIn: Boolean;
 
-  constructor(private userService: UserService) {
+  constructor(private userService: UserService, private courseService: CourseService, private router: Router) {
     this.availableCourses = this.userService.getCourses()
     this.username = this.userService.getUsername()
    }
@@ -21,21 +23,18 @@ export class LandingPage implements OnInit{
    this.loggedInSubscribed = this.userService.loggedInChanged
         .subscribe(logged => {
           this.loggedIn = logged;
-          this.tester()
+          this.synchroniseUser()
         })
   }
+  onSelectCourse(course) {
+    this.courseService.setCourse(course)
+    this.router.navigate(['/course-landing'])
+  }
 
-  tester(){
+  synchroniseUser(){
     this.availableCourses = this.userService.getCourses()
     this.username = this.userService.getUsername()
    }
 
 }
-function next(next: any, arg1: (logged: Boolean) => void, error: any, arg3: null, complete: any, arg5: null): Subscription {
-  throw new Error('Function not implemented.');
-}
-
-function complete(next: (next: any, arg1: (logged: Boolean) => void, error: any, arg3: null, complete: any, arg5: null) => Subscription, arg1: (logged: Boolean) => void, Error: ErrorConstructor, arg3: null, complete: any, arg5: null): Subscription {
-  throw new Error('Function not implemented.');
-}
 

src/app/users/login/login.page.html

@@ -1,21 +1,33 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>login</ion-title>
+    <ion-title><p align="center">User Login</p></ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-item>
-  <ion-label position="floating" for="username">Username</ion-label>
-  <ion-input ngModel #username id="username" type="text"></ion-input>
-</ion-item>
-<ion-item>
-  <ion-label position="floating" for="password">Password</ion-label>
-  <ion-input ngModel #password id="password" type="text"></ion-input>
-</ion-item>
-<ion-button expand="full" (click)="login()">Login</ion-button>
-
-
-
 <ion-content>
+  <div align="center" class="ion-margin-top">
+    <ion-label class="ion-padding">Welcome to Apnea E-Learning</ion-label>
+    <img class="ion-padding" src=\..\..\..\..\assets\img\maskimage.png width="50%">
+  </div>
+  <div align="center" class="ion-margin-bottom">
+    <ion-label>Enter your details to begin</ion-label>
+  </div>
 
+  <ion-list>
+    <ion-item>
+      <ion-label position="floating" for="username">Username</ion-label>
+      <ion-input ngModel #username id="username" type="text"></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="floating" for="password">Password</ion-label>
+      <ion-input ngModel #password id="password" type="text"></ion-input>
+    </ion-item>
+    </ion-list>
+    <hr>
+    <div align="center">
+    <ion-button expand="block" (click)="login()">LOGIN</ion-button>
+    <ion-item *ngIf="incorrectPassword">
+      <p >Incorrect details, please try again</p>
+  </ion-item >
+    </div>
 </ion-content>

src/app/users/login/login.page.ts

@@ -10,15 +10,20 @@ import { UserService } from '../user.service';
 export class LoginPage implements OnInit {
   @ViewChild('username') usernameRef: ElementRef<HTMLInputElement>;
   @ViewChild('password') passwordRef: ElementRef<HTMLInputElement>;
-  username: String
-  password: String
+  incorrectPassword: Boolean = false;
+  username: String;
+  password: String;
   constructor(private userService: UserService, private modalController: ModalController, private router: Router) {}
 
   login(){
     this.userService.login(this.usernameRef.nativeElement.value,this.passwordRef.nativeElement.value)
-    if (this.userService.loggedIn) {
-      this.modalController.dismiss()
+    if (!this.userService.loggedIn){
+      this.incorrectPassword = true;
+      console.log(this.incorrectPassword)
+      return
     }
+      this.router.navigate(['landing'])
+      this.modalController.dismiss()
   }
 
   ngOnInit() {

typings/cordova-typings.d.ts

@@ -0,0 +1,3 @@
+
+/// <reference path="..\.vscode\typings\cordova-ionic\plugins\keyboard.d.ts"/>
+/// <reference path="..\.vscode\typings\jquery\jquery.d.ts"/>