Questions integration #34

package.json

@@ -51,11 +51,32 @@
         "zone.js": "0.8.12"
     },
     "devDependencies": {
-        "@angular/cli": "^1.2.1",
+        "@angular/cli": "^1.2.3",
         "@ionic/app-scripts": "1.3.12",
         "@ionic/cli-plugin-cordova": "1.4.1",
         "@ionic/cli-plugin-ionic-angular": "1.3.2",
-        "typescript": "2.3.4"
+        "@types/jasmine": "^2.5.53",
+        "@types/node": "^8.0.15",
+        "angular-mocks": "^1.6.5",
+        "angular2-template-loader": "^0.6.2",
+        "codecov": "^2.2.0",
+        "jasmine-core": "^2.6.4",
+        "jasmine-spec-reporter": "^4.1.1",
+        "karma": "^1.7.0",
+        "karma-chrome-launcher": "^2.2.0",
+        "karma-jasmine": "^1.1.0",
+        "karma-mocha-reporter": "^2.2.3",
+        "karma-remap-istanbul": "^0.6.0",
+        "karma-sourcemap-loader": "^0.3.7",
+        "karma-webpack": "^2.0.4",
+        "null-loader": "^0.1.1",
+        "sourcemap": "^0.1.0",
+        "ts-loader": "^2.3.1",
+        "ts-node": "^3.2.1",
+        "tslint": "^5.5.0",
+        "tslint-eslint-rules": "^4.1.1",
+        "typescript": "2.3.4",
+        "webpack": "^3.3.0"
     },
     "description": "An Ionic project",
     "cordova": {
@@ -76,4 +97,4 @@
             "android"
         ]
     }
-}
+}

src/app/app.module.ts

@@ -22,8 +22,6 @@ import {NewStoryPage} from "../pages/new-story/new-story";
 import {FileChooser} from "@ionic-native/file-chooser";
 import {UtilService} from "../providers/util-service";
 
-import {QuestionsPage} from "../pages/questions/questions";
-import {QuestionPage} from "../pages/question/question";
 import {NewStorySelectionPage} from "../pages/new-story-selection/new-story-selection";
 import {EmptyPage} from "../pages/empty/empty";
 import {ApiTestingPage} from "../pages/api-testing/api-testing";
@@ -36,6 +34,8 @@ import {FilePath} from "@ionic-native/file-path";
 import {AlbumsPage} from "../pages/albums/albums";
 import {AlbumDetailPage} from "../pages/album-detail/album-detail";
 import { AuthService } from '../providers/auth-service/auth-service';
+import { QuestionService } from "../providers/question-service/question.service";
+import { AlbumQuestions } from "../pages/album-detail/album-questions";
 
 
 @NgModule({
@@ -48,12 +48,11 @@ import { AuthService } from '../providers/auth-service/auth-service';
     BrowsePage,
     PatientProfilePage,
     StoryDetailsPage,
-    QuestionsPage,
-    QuestionPage,
     NewStoryPage,
     EmptyPage,
     NewStorySelectionPage,
     ApiTestingPage,
+    AlbumQuestions
   ],
   imports: [
     BrowserModule,
@@ -72,17 +71,17 @@ import { AuthService } from '../providers/auth-service/auth-service';
     PatientProfilePage,
     StoryDetailsPage,
     NewStoryPage,
-    QuestionsPage,
-    QuestionPage,
     EmptyPage,
     NewStorySelectionPage,
     ApiTestingPage,
+    AlbumQuestions
   ],
   providers: [
     StatusBar,
     SplashScreen,
     UtilService,
     StanizerService,
+    QuestionService,
     PrismaService,
     StoryService,
     PatientService,

src/app/app.scss

@@ -26,7 +26,7 @@ h1, h2, h3, .toolbar-title, ion-list-header .label, .tab-button-text {
 // PAGE HEADER
 
 .page-header {
-  padding: 2em 6em;
+  padding: 2em 3em;
   //background-color: map-get($colors, 'primary');
 
 }

src/pages/album-detail/album-detail.html

@@ -4,10 +4,7 @@
   </ion-navbar>
 </ion-header>
 <ion-content>
-  <div class="page-header">
-    <h2>This is a test question? Or is it?</h2>
-    <ion-icon name="refresh"></ion-icon>
-  </div>
+  <album-questions [query]="album.title"></album-questions>
   <ion-grid>
     <ion-row>
       <ion-col col-6 col-md-4 *ngFor="let story of album.stories,let i=index"

src/pages/album-detail/album-detail.scss

@@ -4,18 +4,6 @@ album-detail {
     padding: 0;
   }
 
-  .page-header {
-
-    ion-icon {
-      margin: auto;
-      font-size: 2em;
-      text-align: center;
-      color: map-get($colors, 'primary');
-      width: 100%;
-    }
-
-  }
-
   .album-thumb {
     height: 50vw; // todo: dynamic - set to width of comonent?
     background-size: cover;

src/pages/album-detail/album-questions.scss

@@ -0,0 +1,15 @@
+album-questions {
+
+  .page-header {
+
+    ion-icon {
+      margin: auto;
+      font-size: 2em;
+      text-align: center;
+      color: map-get($colors, 'primary');
+      width: 100%;
+    }
+
+  }
+
+}

src/pages/album-detail/album-questions.ts

@@ -0,0 +1,34 @@
+import { QuestionService } from "../../providers/question-service/question.service";
+import { OnInit, Component, Input } from "@angular/core";
+
+@Component({
+  selector: 'album-questions',
+  template: `
+      <div class="page-header" *ngIf="currentQuestion">
+        <h2>{{currentQuestion}}</h2>
+        <ion-icon name="refresh" (click)="nextQuestion()"></ion-icon>
+      </div>
+    `
+})
+
+export class AlbumQuestions implements OnInit {
+
+  currentQuestion: string = "";
+  questions: string[];
+
+  @Input() query: string;
+
+  constructor(private questionService: QuestionService) {}
+
+  ngOnInit(): void {
+    this.questions = this.questionService.getQuestions(this.query);
+    this.nextQuestion();
+  }
+
+  nextQuestion() {
+    // TODO: implement a random question that avoids repetition
+    this.currentQuestion = this.questions[Math.floor(Math.random() * this.questions.length)];
+  }
+
+
+}

src/providers/question-service/question.service.ts

@@ -0,0 +1,49 @@
+import { Injectable } from "@angular/core";
+import { QUESTIONS } from "./questions.json";
+
+@Injectable()
+export class QuestionService {
+
+  constructor() { }
+
+  private questions = QUESTIONS;
+
+  getQuestions(query: string): string[] {
+
+    let matchingCategories = this.questions.filter(category =>
+      this.containsQuery(query, category.keywords)
+      );
+
+    // return questions from matching categories
+    if (matchingCategories.length > 0) {
+
+      // a flatmap from [ {"questions": ["q1", "q2", ... ] }, { ... }, { ...}] to [ "q1", "q2", .., "qx"]
+      return [].concat.apply([], matchingCategories.map(mc => mc.questions));
+    }
+    else {
+      return null;
+    }
+  }
+
+  /*  keywords ==> questions
+
+    if query name consists of any of the keywords, find the questions
+
+    => regex for each question-category - temp but easy solution*/
+
+  /*
+    A function that get a single query string,
+    and checks whether one of some given keywords can be found in it.
+    Note: not capital sensitive
+  */
+
+  private containsQuery(query: string, keywords: string[]): boolean {
+
+    return Boolean(keywords.find( kw => {
+        let reg = new RegExp(kw.toLowerCase());
+        return reg.test(query.toLowerCase());
+      }
+    ));
+  }
+
+}