Merge pull request #1525 from RADAR-base/release-2.5.1-alpha

Release 2.5.1-alpha

.github/workflows/main.yml

@@ -45,7 +45,7 @@ jobs:
         uses: android-actions/setup-android@v2
 
       - name: Fix Android directories
-        run: rm -R /usr/local/lib/android/sdk/build-tools/31.0.0/ && rm -R /usr/local/lib/android/sdk/build-tools/32.0.0/
+        run: rm -R /usr/local/lib/android/sdk/build-tools/31.0.0/ && rm -R /usr/local/lib/android/sdk/build-tools/32.0.0/ && rm -R /usr/local/lib/android/sdk/build-tools/33.0.0/
 
       - name: Setup Node
         uses: actions/setup-node@v2

README.md

@@ -105,6 +105,13 @@ $ ionic cordova run ios
 
 If using Firebase for notifications, analytics, or remote config, [create your Firebase project](https://console.firebase.google.com/). Then, add your iOS or Android app to the Firebase project. Once added, please download the app's `google-services.json` file (for Android) and `GoogleService-Info.plist` (for iOS), and add it to the root directory.
 
+### Package Name
+
+When you add your iOS or Android app to the Firebase project, make sure you name your `package name` as app-id
+
+- Android : `org.phidatalab.radar_armt`
+- iOS: `org.phidatalab.radar-armt`
+
 ### Remote Notifications
 
 If using FCM pull notifications instead of the local ones, please specify the FCM sender id (as mentioned in FCM settings) in `src/assets/data/defaultConfig.ts` and the default notification type to FCM (this is already the default value).
@@ -288,3 +295,21 @@ This is an example of an image:
 Here is the output:
 
 <img src="/.github/etc/descriptive-2.png" width="200px"><img src="/.github/etc/descriptive-1.png" width="200px">
+
+## Common Errors
+
+Here are some common errors you might find during installation.
+
+### Error: cordova-custom-config
+
+When you are running `ionic cordova run ios`, you might encounter the problem, we solved this problem by refering this [issue](https://github.com/dpa99c/cordova-custom-config/issues/144) with `cordova-custom-config`.
+
+We enter the following command at the root directory.
+```
+cd plugins/cordova-custom-config
+yarn install 
+```
+
+### Error: Failed to fetch platform. Probably this is either a connection problem.
+
+You may encounter this error when running `yarn install` or `cordova platform` commands. This is usually because of the conflict of `package-lock.json` and `yarn.lock` files. To solve, simply delete the `package-lock.json` file in the root directory.

config.xml

@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget android-versionCode="566" id="org.phidatalab.radar_armt" ios-CFBundleIdentifier="org.phidatalab.radar-armt" ios-CFBundleVersion="1" version="2.5.0-alpha" xmlns:android="http://schemas.android.com/apk/res/android">
+<widget android-versionCode="568" id="org.phidatalab.radar_armt" ios-CFBundleIdentifier="org.phidatalab.radar-armt" ios-CFBundleVersion="1" version="2.5.1-alpha" xmlns:android="http://schemas.android.com/apk/res/android">
     <name>RADAR Questionnaire</name>
     <description>An application that collects active data for research.</description>
     <author email="radar-base@kcl.ac.uk" href="http://radar-base.org/">RADAR-Base</author>

src/app/pages/questions/components/question/audio-input/audio-input.component.ts

@@ -27,6 +27,8 @@ import { AudioRecordService } from '../../../services/audio-record.service'
 export class AudioInputComponent implements OnDestroy, OnInit {
   @Output()
   valueChange: EventEmitter<any> = new EventEmitter<any>()
+  @Output()
+  onRecordStart: EventEmitter<any> = new EventEmitter<any>()
   @Input()
   text: string
   @Input()
@@ -77,6 +79,7 @@ export class AudioInputComponent implements OnDestroy, OnInit {
         this.startRecording().catch(e => this.showTaskInterruptedAlert())
     } else {
       this.stopRecording()
+      this.onRecordStart.emit(false)
       if (this.recordAttempts == DefaultMaxAudioAttemptsAllowed)
         this.finishRecording().catch(e => this.showTaskInterruptedAlert())
       else this.showAfterAttemptAlert()
@@ -95,6 +98,7 @@ export class AudioInputComponent implements OnDestroy, OnInit {
       this.permissionUtil.getRecordAudio_Permission(),
       this.permissionUtil.getWriteExternalStorage_permission()
     ]).then(res => {
+      this.onRecordStart.emit(true)
       this.usage.sendGeneralEvent(UsageEventType.RECORDING_STARTED, true)
       return res[0] && res[1]
         ? this.audioRecordService.startAudioRecording()

src/app/pages/questions/components/question/question.component.html

@@ -47,14 +47,14 @@
         <radio-input
           *ngSwitchCase="'radio'"
           [responses]="question.select_choices_or_calculations"
-          (valueChange)="onValueChange($event)"
+          (valueChange)="emitAnswer($event)"
         >
         </radio-input>
 
         <checkbox-input
           *ngSwitchCase="'checkbox'"
           [responses]="question.select_choices_or_calculations"
-          (valueChange)="onValueChange($event)"
+          (valueChange)="emitAnswer($event)"
         >
         </checkbox-input>
 
@@ -64,7 +64,7 @@
           [max]="question.range.max"
           [labelLeft]="question.range.labelLeft"
           [labelRight]="question.range.labelRight"
-          (valueChange)="onValueChange($event)"
+          (valueChange)="emitAnswer($event)"
         >
         </range-input>
 
@@ -73,7 +73,7 @@
           [min]="question.range.min"
           [max]="question.range.max"
           [responses]="question.select_choices_or_calculations"
-          (valueChange)="onValueChange($event)"
+          (valueChange)="emitAnswer($event)"
         >
         </range-info-input>
 
@@ -84,7 +84,7 @@
           [step]="question.range.step"
           [labelLeft]="question.range.labelLeft"
           [labelRight]="question.range.labelRight"
-          (valueChange)="onValueChange($event)"
+          (valueChange)="emitAnswer($event)"
         >
         </slider-input>
 
@@ -93,7 +93,7 @@
           [sections]="question.select_choices_or_calculations"
           [hasFieldLabel]="question.field_label.length > 0"
           [image]="question.field_annotation?.image"
-          (valueChange)="onValueChange($event)"
+          (valueChange)="emitAnswer($event)"
           [currentlyShown]="currentlyShown"
         >
         </info-screen>
@@ -102,7 +102,8 @@
           *ngSwitchCase="'audio'"
           [text]="question.field_label"
           [currentlyShown]="currentlyShown"
-          (valueChange)="onValueChange($event)"
+          (valueChange)="emitAnswer($event)"
+          (onRecordStart)="onAudioRecordStart($event)"
         >
         </audio-input>
 
@@ -112,14 +113,14 @@
           [image]="question.field_annotation.image"
           [timer]="question.field_annotation.timer"
           [currentlyShown]="currentlyShown"
-          (valueChange)="onValueChange($event)"
+          (valueChange)="emitAnswer($event)"
         >
         </timed-test>
 
         <text-input
           *ngSwitchCase="'text'"
-          (valueChange)="onValueChange($event)"
-          (textInputFocus)="onTextInputFocus($event)"
+          (valueChange)="emitAnswer($event)"
+          (keyboardEvent)="onKeyboardEvent($event)"
           [type]="question.text_validation_type_or_show_slider_number"
           [currentlyShown]="currentlyShown"
         ></text-input>
@@ -130,14 +131,14 @@
             { code: '1', label: 'Yes' },
             { code: '0', label: 'No' }
           ]"
-          (valueChange)="onValueChange($event)"
+          (valueChange)="emitAnswer($event)"
         >
         </radio-input>
 
         <descriptive-input
           *ngSwitchCase="'descriptive'"
           [text]="question.field_label"
-          (valueChange)="onValueChange($event)"
+          (valueChange)="emitAnswer($event)"
           [currentlyShown]="currentlyShown"
         >
         </descriptive-input>
@@ -147,7 +148,7 @@
           [responses]="question.select_choices_or_calculations"
           [currentlyShown]="currentlyShown"
           [previouslyShown]="previouslyShown"
-          (valueChange)="onValueChange($event)"
+          (valueChange)="emitAnswer($event)"
         >
         </matrix-radio-input>
       </ng-container>

src/app/pages/questions/components/question/question.component.scss

@@ -70,11 +70,6 @@ question {
 
   .input-scroll {
     overflow-y: auto !important;
-    mask-image: linear-gradient(to top, transparent 3%, black 7%),
-      linear-gradient(to bottom, transparent 0%, black 7%);
-    mask-size: 100% 25%, 100% 80%;
-    mask-position: bottom, top;
-    mask-repeat: no-repeat, no-repeat;
   }
 
   .spinner-container {

src/app/pages/questions/components/question/question.component.ts

@@ -9,9 +9,12 @@ import {
 } from '@angular/core'
 import { Dialogs } from '@ionic-native/dialogs/ngx'
 import { Vibration } from '@ionic-native/vibration/ngx'
-import { Content, Keyboard } from 'ionic-angular'
 import * as smoothscroll from 'smoothscroll-polyfill'
 
+import {
+  KeyboardEventType,
+  NextButtonEventType
+} from '../../../../shared/enums/events'
 import { Answer } from '../../../../shared/models/answer'
 import { Question, QuestionType } from '../../../../shared/models/question'
 import { Task } from '../../../../shared/models/task'
@@ -34,8 +37,13 @@ export class QuestionComponent implements OnInit, OnChanges {
   task: Task
   @Input()
   isSectionHeaderHidden: boolean
+  // isNextAutomatic: automatically slide to next upon answer
+  @Input()
+  isNextAutomatic: boolean
   @Output()
   answer: EventEmitter<Answer> = new EventEmitter<Answer>()
+  @Output()
+  nextAction: EventEmitter<any> = new EventEmitter<any>()
 
   value: any
   currentlyShown = false
@@ -79,11 +87,7 @@ export class QuestionComponent implements OnInit, OnChanges {
     QuestionType.checkbox
   ])
 
-  constructor(
-    private vibration: Vibration,
-    private dialogs: Dialogs,
-    private keyboard: Keyboard
-  ) {
+  constructor(private vibration: Vibration, private dialogs: Dialogs) {
     smoothscroll.polyfill()
     this.value = null
   }
@@ -118,31 +122,20 @@ export class QuestionComponent implements OnInit, OnChanges {
       else this.previouslyShown = false
       this.currentlyShown = false
     }
-    // this.evalBeep()
   }
 
-  emitAnswer() {
-    this.answer.emit({
-      id: this.question.field_name,
-      value: this.value,
-      type: this.question.field_type
-    })
-  }
-
-  onValueChange(event: any) {
+  emitAnswer(event: any) {
     // NOTE: On init the component fires the event once
-    if (event === undefined) {
-      return
-    }
-    this.value = event
-    this.emitAnswer()
-  }
-
-  evalBeep() {
-    if (this.currentlyShown && this.question.field_label.includes('beep')) {
-      console.log('Beep!')
-      this.dialogs.beep(1)
-      this.vibration.vibrate(600)
+    if (event && event !== undefined) {
+      this.value = event
+      this.answer.emit({
+        id: this.question.field_name,
+        value: this.value,
+        type: this.question.field_type
+      })
+      if (this.question.isAutoNext)
+        this.nextAction.emit(NextButtonEventType.AUTO)
+      else this.nextAction.emit(NextButtonEventType.ENABLE)
     }
   }
 
@@ -153,12 +146,14 @@ export class QuestionComponent implements OnInit, OnChanges {
     ) {
       const min = this.question.select_choices_or_calculations[0].code
       const minLabel = this.question.select_choices_or_calculations[0].label
-      const max = this.question.select_choices_or_calculations[
-        this.question.select_choices_or_calculations.length - 1
-      ].code
-      const maxLabel = this.question.select_choices_or_calculations[
-        this.question.select_choices_or_calculations.length - 1
-      ].label
+      const max =
+        this.question.select_choices_or_calculations[
+          this.question.select_choices_or_calculations.length - 1
+        ].code
+      const maxLabel =
+        this.question.select_choices_or_calculations[
+          this.question.select_choices_or_calculations.length - 1
+        ].label
       this.question.range = {
         min: parseInt(min.trim()),
         max: parseInt(max.trim()),
@@ -168,16 +163,26 @@ export class QuestionComponent implements OnInit, OnChanges {
     }
   }
 
-  onTextInputFocus(value) {
-    if (value) {
-      // Add delay for keyboard to show up
-      setTimeout(() => {
-        this.content.nativeElement.style = `padding-bottom:${this.keyboardInputOffset}px;`
-        this.content.nativeElement.scrollTop = this.keyboardInputOffset
-      }, 100)
-    } else {
-      this.content.nativeElement.style = ''
-      this.content.nativeElement.scrollTop = 0
+  onKeyboardEvent(value) {
+    switch (value) {
+      case KeyboardEventType.FOCUS:
+        // Add delay for keyboard to show up
+        setTimeout(() => {
+          this.content.nativeElement.style = `padding-bottom:${this.keyboardInputOffset}px;`
+          this.content.nativeElement.scrollTop = this.keyboardInputOffset
+        }, 100)
+        break
+      case KeyboardEventType.BLUR: {
+        this.content.nativeElement.style = ''
+        this.content.nativeElement.scrollTop = 0
+        break
+      }
+      case KeyboardEventType.ENTER: {
+        this.nextAction.emit(NextButtonEventType.AUTO)
+        break
+      }
+      default:
+        break
     }
   }
 
@@ -210,4 +215,9 @@ export class QuestionComponent implements OnInit, OnChanges {
       behavior: 'smooth'
     })
   }
+
+  onAudioRecordStart(start: boolean) {
+    if (start) this.nextAction.emit(NextButtonEventType.DISABLE)
+    else this.nextAction.emit(NextButtonEventType.ENABLE)
+  }
 }

src/app/pages/questions/components/question/text-input/text-input.component.html

@@ -29,10 +29,12 @@
   <ion-item>
     <ion-input
       type="text"
+      enterkeyhint="next"
       placeholder="{{ 'PLACEHOLDER_TEXT_INPUT' | translate }}"
       (ionChange)="emitAnswer($event.value)"
-      (ionFocus)="emitTextInputFocus(true)"
-      (ionBlur)="emitTextInputFocus(false)"
+      (ionFocus)="emitKeyboardEvent('focus')"
+      (ionBlur)="emitKeyboardEvent('blur')"
+      (keyup.enter)="emitKeyboardEvent('enter')"
     ></ion-input>
   </ion-item>
 </ng-container>