Merge pull request #993 from RADAR-base/dev

Release 0.7.7-alpha
RADAR-base · Apr 6, 2020 · 07107d3 · 07107d3
2 parents b11a5c9 + 00db3db
commit 07107d3
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 36 deletions.
diff --git a/config.xml b/config.xml
@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget android-versionCode="544" id="org.phidatalab.radar_armt" ios-CFBundleIdentifier="org.phidatalab.radar-armt" ios-CFBundleVersion="1" version="0.7.6-alpha" xmlns:android="http://schemas.android.com/apk/res/android">
+<widget android-versionCode="545" id="org.phidatalab.radar_armt" ios-CFBundleIdentifier="org.phidatalab.radar-armt" ios-CFBundleVersion="1" version="0.7.7-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>

diff --git a/src/app/pages/questions/components/question/question.component.ts b/src/app/pages/questions/components/question/question.component.ts
@@ -38,7 +38,8 @@ export class QuestionComponent implements OnInit, OnChanges {
   NON_SCROLLABLE_SET: Set<QuestionType> = new Set([
     QuestionType.timed,
     QuestionType.audio,
-    QuestionType.info
+    QuestionType.info,
+    QuestionType.text
   ])
   HIDE_FIELD_LABEL_SET: Set<QuestionType> = new Set([QuestionType.audio])
 

diff --git a/src/app/pages/questions/components/question/text-input/text-input.component.html b/src/app/pages/questions/components/question/text-input/text-input.component.html
@@ -1,28 +1,34 @@
 <ng-container *ngIf="showDatePicker && currentlyShown">
-  <wheel-selector
-    [values]="datePickerValues"
-    [selection]="defaultDatePickerValue"
-    [labels]="labels"
-    (onSelect)="emitAnswer($event)"
-  ></wheel-selector>
+  <div class="mid">
+    <wheel-selector
+      [values]="datePickerValues"
+      [selection]="defaultDatePickerValue"
+      [labels]="labels"
+      (onSelect)="emitAnswer($event)"
+    ></wheel-selector>
+  </div>
 </ng-container>
 
 <ng-container *ngIf="showTimePicker && currentlyShown">
-  <wheel-selector
-    [values]="timePickerValues"
-    [selection]="defaultTimePickerValue"
-    [labels]="labels"
-    (onSelect)="emitAnswer($event)"
-  ></wheel-selector>
+  <div class="mid">
+    <wheel-selector
+      [values]="timePickerValues"
+      [selection]="defaultTimePickerValue"
+      [labels]="labels"
+      (onSelect)="emitAnswer($event)"
+    ></wheel-selector>
+  </div>
 </ng-container>
 
 <ng-container *ngIf="showDurationPicker && currentlyShown">
-  <wheel-selector
-    [values]="durationPickerValues"
-    [selection]="defaultDurationPickerValue"
-    [labels]="labels"
-    (onSelect)="emitAnswer($event)"
-  ></wheel-selector>
+  <div class="mid">
+    <wheel-selector
+      [values]="durationPickerValues"
+      [selection]="defaultDurationPickerValue"
+      [labels]="labels"
+      (onSelect)="emitAnswer($event)"
+    ></wheel-selector>
+  </div>
 </ng-container>
 
 <ng-container *ngIf="showTextInput">

diff --git a/src/app/pages/questions/components/question/text-input/text-input.component.scss b/src/app/pages/questions/components/question/text-input/text-input.component.scss
@@ -6,4 +6,8 @@ text-input {
   ion-item {
     margin-bottom: 8px !important;
   }
+
+  .mid {
+    padding-top: 96px;
+  }
 }
diff --git a/src/app/pages/questions/components/wheel-selector/wheel-selector.component.html b/src/app/pages/questions/components/wheel-selector/wheel-selector.component.html
@@ -1,13 +1,19 @@
-<ion-grid class="grid">
+<ion-grid *ngIf="valuesWithNulls" class="grid">
   <ion-row>
-    <ion-col *ngFor="let col of keys(values)">
+    <ion-col *ngFor="let col of keys(valuesWithNulls)">
       <div class="label">
         <ion-note>{{ labels[col] }}</ion-note>
       </div>
-      <div #wheel class="picker-opts" (scroll)="selected(col, $event)">
-        <p *ngFor="let row of values[col]" class="list" id="{{ row }}">
-          {{ row }}
-        </p>
+      <div class="bg">
+        <div #wheel class="picker-opts inner" (scroll)="selected(col, $event)">
+          <p
+            *ngFor="let row of valuesWithNulls[col]"
+            class="list"
+            id="{{ row }}"
+          >
+            {{ row }}
+          </p>
+        </div>
       </div>
     </ion-col>
   </ion-row>

diff --git a/src/app/pages/questions/components/wheel-selector/wheel-selector.component.scss b/src/app/pages/questions/components/wheel-selector/wheel-selector.component.scss
@@ -12,12 +12,25 @@ wheel-selector {
     display: none;
   }
 
+  .inner {
+    mask-image:   
+    radial-gradient(
+      circle at 50% 50%,
+      black 30%,
+      rgba(0, 0, 0, 0.1) 70%
+    );
+  }
+
+
+  .bg {
+    border-radius: 28px;
+    background-color: $cl-primary-40;
+  }
+
   .picker-opts {
     overflow: scroll;
     width: fit-content;
-    height: 40px;
-    border-radius: $label-height;
-    background-color: $cl-primary-40;
+    height: 120px;
     font-size: 20px;
     scroll-snap-type: y mandatory;
   }

diff --git a/src/app/pages/questions/components/wheel-selector/wheel-selector.component.ts b/src/app/pages/questions/components/wheel-selector/wheel-selector.component.ts
@@ -4,16 +4,19 @@ import {
   ElementRef,
   EventEmitter,
   Input,
+  OnInit,
   Output,
   QueryList,
   ViewChildren
 } from '@angular/core'
 
+import { Utility } from '../../../../shared/utilities/util'
+
 @Component({
   selector: 'wheel-selector',
   templateUrl: 'wheel-selector.component.html'
 })
-export class WheelSelectorComponent implements AfterViewInit {
+export class WheelSelectorComponent implements AfterViewInit, OnInit {
   keys = Object.keys
   @ViewChildren('wheel') wheels: QueryList<ElementRef>
 
@@ -26,20 +29,37 @@ export class WheelSelectorComponent implements AfterViewInit {
   @Output()
   onSelect: EventEmitter<any> = new EventEmitter<any>()
 
+  valuesWithNulls
+
   emitterLocked = false
   scrollHeight = 40
 
-  constructor() {}
+  constructor(private util: Utility) {}
+
+  ngOnInit() {
+    this.valuesWithNulls = this.util.deepCopy(this.values)
+    this.addNullValues()
+  }
 
   ngAfterViewInit() {
+    console.log(this.valuesWithNulls)
     if (this.selection) this.scrollToDefault()
   }
 
+  addNullValues() {
+    const keys = this.keys(this.valuesWithNulls)
+    keys.forEach(d => {
+      this.valuesWithNulls[d].unshift('-')
+      this.valuesWithNulls[d].push('-')
+    })
+  }
+
   scrollToDefault() {
     this.wheels.forEach((d, i) => {
-      const col = this.keys(this.values)[i]
-      let row = this.values[col].findIndex(a => a == this.selection[col])
-      if (row == -1) row = 0
+      const col = this.keys(this.valuesWithNulls)[i]
+      let row =
+        this.valuesWithNulls[col].findIndex(a => a == this.selection[col]) - 1
+      if (row < 0) row = 0
       d.nativeElement.scrollTo(0, row * this.scrollHeight)
     })
   }
@@ -48,8 +68,8 @@ export class WheelSelectorComponent implements AfterViewInit {
     if (!this.emitterLocked) {
       this.emitterLocked = true
       setTimeout(() => {
-        const row = Math.round(event.target.scrollTop / this.scrollHeight)
-        const value = this.values[col][row]
+        const row = Math.round(event.target.scrollTop / this.scrollHeight) + 1
+        const value = this.valuesWithNulls[col][row]
         if (value) {
           this.selection[col] = value
           this.onSelect.emit(this.selection)