commit #50 - styling improvements

ompp-web/src/app/LecturerComponents/LecturerAnalysisView/lecturer-analysis-view.component.css

 
+#analysis-row {
+  margin-right: 0;
+}
+
 #wordcloud-title {
-  margin-top: 1%;
-  margin-left: 2%;
+  margin: 0 auto;
 }

ompp-web/src/app/LecturerComponents/LecturerAnalysisView/lecturer-analysis-view.component.html

 <app-lecturer-navbar></app-lecturer-navbar>
-<div class="row">
-  <div id="wordcloud-title" class="col-lg">
-    <h4>Sentiment Cloud</h4>
-    <div class="row">
-      <app-sentiment-cloud></app-sentiment-cloud>
-    </div>
+<div id="analysis-row" class="row">
+  <div id="wordcloud-title">
+    <app-sentiment-cloud></app-sentiment-cloud>
   </div>
 </div>

ompp-web/src/app/LecturerComponents/LecturerAnalysisView/lecturer-analysis-view.component.ts

 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {LecturerInfoService} from 'src/app/services/lecturer-info.service';
 import {LecturerDataService} from 'src/app/services/lecturer-data.service';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-lecturer-analysis-view',
@@ -10,7 +11,8 @@ import {LecturerDataService} from 'src/app/services/lecturer-data.service';
 export class LecturerAnalysisViewComponent implements OnInit, OnDestroy {
 
   constructor(private lecturerInfoService: LecturerInfoService,
-              private lecturerDataService: LecturerDataService) {
+              private lecturerDataService: LecturerDataService,
+              private router: Router) {
   }
 
   ngOnInit(): void {
@@ -19,4 +21,8 @@ export class LecturerAnalysisViewComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
   }
 
+  public back() {
+    this.router.navigate(['/paper-view']);
+  }
+
 }

ompp-web/src/app/LecturerComponents/LecturerCreateOMPView/lecturer-create-omp-view.component.html

@@ -49,7 +49,7 @@
     <div id="button-row" style="margin-top: 10%">
       <div id="q-error-row">
         <div *ngIf="isSubmitted" class="is-invalid">
-          <p *ngIf="noQuestions" class="alert alert-danger" role="alert">*At least one question is required</p>
+          <p *ngIf="noQuestions" style="color: red">*At least one question is required</p>
           <p *ngIf="invalidQuestions" style="color: red">*Text is required for all questions</p>
         </div>
       </div>

ompp-web/src/app/WordcloudComponents/SentimentCloud/sentiment-cloud.component.css

+
+#cloud-row {
+}
+
+angular-tag-cloud {
+  margin: 0 auto;
+}

ompp-web/src/app/WordcloudComponents/SentimentCloud/sentiment-cloud.component.html

-<div class="row">
+<div id="cloud-row" class="row">
   <div class="col">
     <div *ngIf="loading">
       <p>Loading...</p>

ompp-web/src/app/WordcloudComponents/SentimentCloud/sentiment-cloud.component.ts

-import {Component, OnDestroy, OnInit} from '@angular/core';
+import {Component, HostBinding, HostListener, OnDestroy, OnInit} from '@angular/core';
 import {CloudData, CloudOptions} from 'angular-tag-cloud-module';
 import {LecturerInfoService} from 'src/app/services/lecturer-info.service';
 import {LecturerDataService} from 'src/app/services/lecturer-data.service';
 import {WordDetailsDao} from 'src/app/dao/word-details.dao';
 import {QuestionDao} from 'src/app/dao/question.dao';
-import {el} from '@angular/platform-browser/testing/src/browser_util';
 
 @Component({
   selector:  'app-sentiment-cloud',
@@ -32,14 +31,15 @@ export class SentimentCloudComponent implements OnInit, OnDestroy {
     this.maxOccurrences = 0;
     this.loading = true;
     this.options = {
-      width : 1000,
-      height : 400,
+      width : 0.9,
+      height : 600,
       overflow: false,
+      realignOnResize: true
     };
     this.lecturerInfoService.getPaperQuestions(this.lecturerDataService.currentPaper.paperId)
       .subscribe((data: QuestionDao[]) => {
         this.questions = data;
-        this.currentQuestion = this.questions[0];
+        this.currentQuestion = undefined;
       });
     this.lecturerInfoService.getSentimentCloud(this.lecturerDataService.currentPaper.paperId)
       .subscribe((data: WordDetailsDao[]) => {
@@ -48,7 +48,7 @@ export class SentimentCloudComponent implements OnInit, OnDestroy {
             this.sortData(data);
             this.wordcloudData = this.createCloud(data);
           } else {
-            this.wordcloudData = [];
+            this.wordcloudData = this.createCloud([]);
           }
         }
         this.loading = false;
@@ -69,9 +69,15 @@ export class SentimentCloudComponent implements OnInit, OnDestroy {
 
   private createCloud(data: WordDetailsDao[]): CloudData[] {
     const words: any = [];
-    data.forEach(word => {
-        words.push({text: word.word, weight: word.numberOfOccurrences, color: this.getColour(word.polarity) });
-    });
+
+    if (data.length > 0) {
+      data.forEach(word => {
+        words.push({text: word.word, weight: word.numberOfOccurrences, color: this.getColour(word.polarity)});
+      });
+    } else {
+      words.push({text: 'No', weight: 10, color: this.getColour(2)});
+      words.push({text: 'Responses', weight: 10, color: this.getColour(2)});
+    }
     return words;
   }
 
@@ -126,15 +132,19 @@ export class SentimentCloudComponent implements OnInit, OnDestroy {
 
   public setCloud() {
     this.wordcloudData = [];
-    if (this.currentQuestion === undefined) {
-      this.wordcloudData = this.createCloud(this.getAllData());
+
+    if (this.wordClouds.length === 0) {
+      this.wordcloudData = this.createCloud([]);
     } else {
-      this.wordClouds.forEach(list => {
-        if (list[0].questionId === parseInt(this.currentQuestion.questionId.toString(), 10)) {
-          this.wordcloudData = this.createCloud(list);
-        }
-      });
+      if (this.currentQuestion === undefined) {
+        this.wordcloudData = this.createCloud(this.getAllData());
+      } else {
+        this.wordClouds.forEach(list => {
+          if (list[0].questionId === parseInt(this.currentQuestion.questionId.toString(), 10)) {
+            this.wordcloudData = this.createCloud(list);
+          }
+        });
+      }
     }
   }
-
 }