PUNKT-31:Modyfikacja wyglądu aplikacji - rozwiązywanie testów.

FrontEnd/src/app/tests/test-details/question-view/gaps/gaps.component.html

@@ -1,6 +1,6 @@
 <form #f="ngForm" (ngSubmit)="nextQuestion(f)" novalidate>
   <div class="alert alert-grey question">
-    {{question.question}} ({{question.points}}pkt.) <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="timeLeft === 0">Czas: bez limitu</span>
+    {{question.question}} ({{question.points}}pkt.) <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="question.time === 0">Czas: bez limitu</span>
     <div class="answers">
       <div *ngFor="let item of question.answers">
         <span *ngIf="!item.is_gap">{{item.content}}</span>

FrontEnd/src/app/tests/test-details/question-view/gaps/gaps.component.ts

@@ -11,8 +11,7 @@ import { NgForm } from '@angular/forms';
   styleUrls: ['./gaps.component.css']
 })
 export class GapsComponent implements OnInit, OnDestroy {
-  @Input()
-  question;
+  private _question;
   @Output() emitNextQuestionRequest = new EventEmitter();
   private id;
   private verifyAnswerSubscription: ISubscription;
@@ -48,15 +47,26 @@ export class GapsComponent implements OnInit, OnDestroy {
     }, 1000);
   }
 
-  ngOnInit() {
+  public get question() {
+    return this._question;
+  }
+
+  @Input('question')
+  public set question(data) {
+    this._question = data;
+    this.ngOnDestroy();
     this.timeLeft = this.question.time;
     if (this.timeLeft > 0) {
       this.startTimer();
     }
   }
 
+  ngOnInit() {}
+
   ngOnDestroy() {
-    clearInterval(this.interval);
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
     if (this.verifyAnswerSubscription) {
       this.verifyAnswerSubscription.unsubscribe();
     }

FrontEnd/src/app/tests/test-details/question-view/multiple-choice/multiple-choice.component.html

@@ -1,6 +1,6 @@
 <form #f="ngForm" (ngSubmit)="nextQuestion(f)" novalidate>
   <div class="alert alert-grey question">
-    {{question.question}} ({{question.points}}pkt.) <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="timeLeft === 0">Czas: bez limitu</span>
+    {{question.question}} ({{question.points}}pkt.) <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="question.time === 0">Czas: bez limitu</span>
     <div class="answers">
       <div *ngFor="let item of question.answers">
         <input type="checkbox" [name]="item.id" [value]="item" ngModel />  {{item.content}}

FrontEnd/src/app/tests/test-details/question-view/multiple-choice/multiple-choice.component.ts

@@ -11,8 +11,7 @@ import { NgForm } from '@angular/forms';
   styleUrls: ['./multiple-choice.component.css']
 })
 export class MultipleChoiceComponent implements OnInit, OnDestroy{
-  @Input()
-  question;
+  private _question;
   @Output() emitNextQuestionRequest = new EventEmitter();
   private id;
   private verifyAnswerSubscription: ISubscription;
@@ -45,15 +44,26 @@ export class MultipleChoiceComponent implements OnInit, OnDestroy{
     }, 1000);
   }
 
-  ngOnInit() {
+  public get question() {
+    return this._question;
+  }
+
+  @Input('question')
+  public set question(data) {
+    this._question = data;
+    this.ngOnDestroy();
     this.timeLeft = this.question.time;
     if (this.timeLeft > 0) {
       this.startTimer();
     }
   }
 
+  ngOnInit() {}
+
   ngOnDestroy() {
-    clearInterval(this.interval);
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
     if (this.verifyAnswerSubscription) {
       this.verifyAnswerSubscription.unsubscribe();
     }

FrontEnd/src/app/tests/test-details/question-view/pairs/pairs.component.html

@@ -1,5 +1,5 @@
 <div>
-  {{question.question}} ({{question.points}}pkt.) <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="timeLeft === 0">Czas: bez limitu</span>
+  {{question.question}} ({{question.points}}pkt.) <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="question.time === 0">Czas: bez limitu</span>
   <h3>Dostępne lewe strony:</h3>
   <div class="puzzles-container">
     <div class='puzzle' *ngFor="let item of leftSides; let i = index" (click)="leftSideClick(item,i)" [ngClass]="{'active': (selectedLeftSide.leftSideText === item && selectedLeftSide.indexOfLeftSide === i && selectedLeftSide.from === 'leftSides'), 'empty': (item === undefined || item === '')}">

FrontEnd/src/app/tests/test-details/question-view/pairs/pairs.component.ts

@@ -10,8 +10,7 @@ import { ISubscription } from 'rxjs/Subscription';
   styleUrls: ['./pairs.component.css']
 })
 export class PairsComponent implements OnInit, OnChanges, OnDestroy {
-  @Input()
-  question;
+  private _question;
   @Output() emitNextQuestionRequest = new EventEmitter();
   private id;
   private verifyAnswerSubscription: ISubscription;
@@ -91,7 +90,14 @@ export class PairsComponent implements OnInit, OnChanges, OnDestroy {
     });
   }
 
-  ngOnInit() {
+  public get question() {
+    return this._question;
+  }
+
+  @Input('question')
+  public set question(data) {
+    this._question = data;
+    this.ngOnDestroy();
     this.timeLeft = this.question.time;
     this.prepareLists();
     if (this.timeLeft > 0) {
@@ -99,12 +105,16 @@ export class PairsComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
+  ngOnInit() {}
+
   ngOnChanges() {
     this.prepareLists();
   }
 
   ngOnDestroy() {
-    clearInterval(this.interval);
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
     if (this.verifyAnswerSubscription) {
       this.verifyAnswerSubscription.unsubscribe();
     }

FrontEnd/src/app/tests/test-details/question-view/puzzle/puzzle.component.html

@@ -1,5 +1,5 @@
 <div>
-   {{question.question}} ({{question.points}}pkt.) <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="timeLeft === 0">Czas: bez limitu</span>
+   {{question.question}} ({{question.points}}pkt.) <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="question.time === 0">Czas: bez limitu</span>
   <h3>Dostępne elementy rozsypanki:</h3>
   <div class="puzzles-container">
     <div class='puzzle' *ngFor="let item of puzzles; let i = index" (click)="puzzleClick(item,i)" [ngClass]="{'active': (selectedPuzzle.puzzleText === item && selectedPuzzle.indexOfPuzzle === i && selectedPuzzle.from === 'puzzles'), 'empty': (item === undefined || item === '')}">

FrontEnd/src/app/tests/test-details/question-view/puzzle/puzzle.component.ts

@@ -10,8 +10,7 @@ import { ISubscription } from 'rxjs/Subscription';
   styleUrls: ['./puzzle.component.css']
 })
 export class PuzzleComponent implements OnInit, OnChanges, OnDestroy {
-  @Input()
-  question;
+  private _question;
   @Output() emitNextQuestionRequest = new EventEmitter();
   private id;
   private verifyAnswerSubscription: ISubscription;
@@ -78,7 +77,14 @@ export class PuzzleComponent implements OnInit, OnChanges, OnDestroy {
     });
   }
 
-  ngOnInit() {
+  public get question() {
+    return this._question;
+  }
+
+  @Input('question')
+  public set question(data) {
+    this._question = data;
+    this.ngOnDestroy();
     this.timeLeft = this.question.time;
     this.prepareLists();
     if (this.timeLeft > 0) {
@@ -86,12 +92,16 @@ export class PuzzleComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
+  ngOnInit() {}
+
   ngOnChanges() {
     this.prepareLists();
   }
 
   ngOnDestroy() {
-    clearInterval(this.interval);
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
     if (this.verifyAnswerSubscription) {
       this.verifyAnswerSubscription.unsubscribe();
     }

FrontEnd/src/app/tests/test-details/question-view/single-choice/single-choice.component.html

@@ -1,7 +1,11 @@
 <form #f="ngForm" (ngSubmit)="nextQuestion(f)" novalidate>
   <div class="alert alert-grey question">
+<<<<<<< HEAD
     Pytanie za {{question.points}}pkt. <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="timeLeft === 0">Czas: bez limitu</span>
    <div class="pytanie">{{question.question}} </div>
+=======
+    {{question.question}} ({{question.points}}pkt.) <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="question.time === 0">Czas: bez limitu</span>
+>>>>>>> d8c503bda71c21574ee646fe2cf8c3cb2f8546bd
     <div class="answers">
       <div *ngFor="let item of question.answers" >
 

FrontEnd/src/app/tests/test-details/question-view/single-choice/single-choice.component.ts

@@ -11,8 +11,7 @@ import { NgForm } from '@angular/forms';
   styleUrls: ['./single-choice.component.css']
 })
 export class SingleChoiceComponent implements OnInit, OnDestroy {
-  @Input()
-  question;
+  private _question;
   private answer;
   @Output() emitNextQuestionRequest = new EventEmitter();
   private id;
@@ -46,15 +45,26 @@ export class SingleChoiceComponent implements OnInit, OnDestroy {
     }, 1000);
   }
 
-  ngOnInit() {
+  public get question() {
+    return this._question;
+  }
+
+  @Input('question')
+  public set question(data) {
+    this._question = data;
+    this.ngOnDestroy();
     this.timeLeft = this.question.time;
     if (this.timeLeft > 0) {
       this.startTimer();
     }
   }
 
+  ngOnInit() {}
+
   ngOnDestroy() {
-    clearInterval(this.interval);
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
     if (this.verifyAnswerSubscription) {
       this.verifyAnswerSubscription.unsubscribe();
     }

FrontEnd/src/app/tests/test-details/question-view/true-false/true-false.component.html

@@ -1,5 +1,5 @@
 <div class="alert alert-grey question">
-  {{question.question}} ({{question.points}}pkt.) <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="timeLeft === 0">Czas: bez limitu</span>
+  {{question.question}} ({{question.points}}pkt.) <br /><span *ngIf="timeLeft > 0">Czas: {{ timeLeft }} sek. </span><span *ngIf="question.time === 0">Czas: bez limitu</span>
 
   <div class="btn-group btn-group-toggle" data-toggle="buttons">
     <label class="btn btn-study-cave mr-2" (click)="chooseAnswer('Prawda')">

FrontEnd/src/app/tests/test-details/question-view/true-false/true-false.component.ts

@@ -10,8 +10,7 @@ import { ISubscription, Subscription } from 'rxjs/Subscription';
   styleUrls: ['./true-false.component.css']
 })
 export class TrueFalseComponent implements OnInit, OnDestroy {
-  @Input()
-  question;
+  private _question;
   private answer;
   @Output() emitNextQuestionRequest = new EventEmitter();
   private id;
@@ -49,15 +48,26 @@ export class TrueFalseComponent implements OnInit, OnDestroy {
     this.answer = answer;
   }
 
-  ngOnInit() {
+  public get question() {
+    return this._question;
+  }
+
+  @Input('question')
+  public set question(data) {
+    this._question = data;
+    this.ngOnDestroy();
     this.timeLeft = this.question.time;
     if (this.timeLeft > 0) {
       this.startTimer();
     }
   }
 
+  ngOnInit() {}
+
   ngOnDestroy() {
-    clearInterval(this.interval);
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
     if (this.verifyAnswerSubscription) {
       this.verifyAnswerSubscription.unsubscribe();
     }