commit #16 - updating routing for student pages, stopped using ngif to hide/show templates

ompp-web/src/app/StudentComponents/StudentClassView/student-class-view.component.html

+<app-navbar></app-navbar>
 <div class="row">
   <div id="closed-papers" class="col">
     <h3>Your Submitted One-minute Papers</h3>

ompp-web/src/app/StudentComponents/StudentClassView/student-class-view.component.ts

 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {MinutePaperDao} from '../../dao/minute-paper.dao';
+import {MinutePaperDao} from 'src/app/dao/minute-paper.dao';
 import {StudentInfoService} from 'src/app/services/student-info.service';
 import {StudentDataService} from 'src/app/services/student-data.service';
 import {StudentViewService} from 'src/app/services/student-view.service';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-student-class-view',
@@ -17,7 +18,8 @@ export class StudentClassViewComponent implements OnInit, OnDestroy {
 
   constructor(private studentInfoService: StudentInfoService,
               private studentViewService: StudentViewService,
-              private studentDataService: StudentDataService) {
+              private studentDataService: StudentDataService,
+              private router: Router) {
   }
 
   ngOnInit(): void {
@@ -38,12 +40,14 @@ export class StudentClassViewComponent implements OnInit, OnDestroy {
     this.studentDataService.currentPaper = this.getCurrentPaper(paperId);
     this.studentViewService.changeToCompletedView(true);
     this.studentViewService.changeToClassView(false);
+    this.router.navigate(['/completedview']);
   }
 
   private goToSubmissionView(paperId: String) {
     this.studentDataService.currentPaper = this.getCurrentPaper(paperId);
     this.studentViewService.changeToDashboard(false);
     this.studentViewService.changeToSubmissionView(true);
+    this.router.navigate(['/submissionview']);
   }
 
   private getCurrentPaper(paperId: String) {

ompp-web/src/app/StudentComponents/StudentCompletedView/student-completed-view.component.html

-<h4>Your submission for class {{classCode}} about {{currentPaper.topic}}</h4>
-<div *ngFor="let pair of questionAnswerPairs; let i = index" [attr.data-index]="i">
-  <div class="row">
-      <span>Question {{i+1}}:</span>
-  </div>
-  <div class="row">
-    <span>{{pair.question.questionText}}</span>
-  </div>
-  <div class="row">
-    <span>Your response:</span>
-  </div>
-  <div class="row">
-    <span>{{pair.answer.answerText}}</span>
+<app-navbar></app-navbar>
+<div class="container">
+  <h4>Your submission for class {{classCode}} about {{currentPaper.topic}}</h4>
+  <div *ngFor="let pair of questionAnswerPairs; let i = index" [attr.data-index]="i">
+    <div class="row">
+        <span>Question {{i+1}}:</span>
+    </div>
+    <div class="row">
+      <span>{{pair.question.questionText}}</span>
+    </div>
+    <div class="row">
+      <span>Your response:</span>
+    </div>
+    <div class="row">
+      <span>{{pair.answer.answerText}}</span>
+    </div>
   </div>
 </div>

ompp-web/src/app/StudentComponents/StudentDashboardComponents/student-dashboard.component.ts

@@ -2,7 +2,7 @@ import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angula
 import {OmpClassDao} from 'src/app/dao/omp-class.dao';
 import {StudentInfoService} from 'src/app/services/student-info.service';
 import {takeWhile} from 'rxjs/operators';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 import {MinutePaperDao} from 'src/app/dao/minute-paper.dao';
 import {StudentViewService} from 'src/app/services/student-view.service';
 import {StudentDataService} from '../../services/student-data.service';
@@ -20,9 +20,10 @@ export class StudentDashboardComponent implements OnInit, OnDestroy {
   public openPaperList: MinutePaperDao[];
 
   constructor(private studentInfoService: StudentInfoService,
-              private route: ActivatedRoute,
               private studentViewService: StudentViewService,
-              private studentDataService: StudentDataService) {
+              private studentDataService: StudentDataService,
+              private route: ActivatedRoute,
+              private router: Router) {
   }
 
   ngOnInit(): void {
@@ -47,12 +48,14 @@ export class StudentDashboardComponent implements OnInit, OnDestroy {
     this.studentDataService.classCode = classCode;
     this.studentViewService.changeToDashboard(false);
     this.studentViewService.changeToClassView(true);
+    this.router.navigate(['/classview']);
   }
 
   private goToSubmissionView(paperId: String) {
     this.studentDataService.currentPaper = this.getCurrentPaper(paperId);
     this.studentViewService.changeToDashboard(false);
     this.studentViewService.changeToSubmissionView(true);
+    this.router.navigate(['/submissionview']);
   }
 
   private getCurrentPaper(paperId: String) {

ompp-web/src/app/StudentComponents/StudentSubmissionView/student-submission-view.component.html

+<app-navbar></app-navbar>
 <div class="container">
   <div>
     <h4>Write a response about {{currentPaper.topic}} for {{currentPaper.classCode}}</h4>

ompp-web/src/app/StudentComponents/student-root.component.html

 <app-navbar></app-navbar>
 <div class="container-fluid">
-  <div>
-    <div *ngIf="onDashboard">
-      <app-student-dashboard></app-student-dashboard>
-    </div>
-    <div *ngIf="onClassView">
-      <app-student-class-view></app-student-class-view>
-    </div>
-    <div *ngIf="onCompletedView">
-      <app-student-completed-view></app-student-completed-view>
-    </div>
-    <div *ngIf="onSubmissionView">
-      <app-student-submission-view></app-student-submission-view>
-    </div>
+  <div *ngIf="onDashboard">
+    <app-student-dashboard></app-student-dashboard>
   </div>
+  <router-outlet></router-outlet>
 </div>

ompp-web/src/app/StudentComponents/student-root.component.ts

@@ -9,11 +9,11 @@ import {takeWhile} from 'rxjs/operators';
 })
 export class StudentRootComponent implements OnInit, OnDestroy {
 
-  private onDashboard: Boolean;
-  private onClassView: Boolean;
-  private onCompletedView: Boolean;
-  private onSubmissionView: Boolean;
-  private isAlive = true;
+  public onDashboard: Boolean;
+  public onClassView: Boolean;
+  public onCompletedView: Boolean;
+  public onSubmissionView: Boolean;
+  public isAlive = true;
 
   constructor(private studentViewService: StudentViewService) {
   }

ompp-web/src/app/StudentComponents/student-routes.module.ts

 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {StudentRootComponent} from './student-root.component';
+import {StudentClassViewComponent} from './StudentClassView/student-class-view.component';
+import {StudentCompletedViewComponent} from './StudentCompletedView/student-completed-view.component';
+import {StudentSubmissionViewComponent} from './StudentSubmissionView/student-submission-view.component';
 
 
 const studentRoutes = [
   { path: 'sdashboard', component: StudentRootComponent },
+  { path: 'classview', component: StudentClassViewComponent },
+  { path: 'completedview', component: StudentCompletedViewComponent },
+  { path: 'submissionview', component: StudentSubmissionViewComponent },
+
 ];