From 6194cec08471172fe9f9c6ef1b18a8ed825e698e Mon Sep 17 00:00:00 2001
From: mpgxvii <mpgxvii@gmail.com>
Date: Mon, 30 Mar 2020 14:12:07 +0100
Subject: [PATCH 1/4] fix(dateInput): wheel selector component

---
 .../components/question/question.component.ts |  3 +-
 .../text-input/text-input.component.html      | 42 +++++++++++--------
 .../text-input/text-input.component.scss      |  4 ++
 .../wheel-selector.component.html             |  8 ++--
 .../wheel-selector.component.scss             | 13 +++++-
 .../wheel-selector.component.ts               | 34 +++++++++++----
 6 files changed, 72 insertions(+), 32 deletions(-)

diff --git a/src/app/pages/questions/components/question/question.component.ts b/src/app/pages/questions/components/question/question.component.ts
index 5876cc6da..c710f2963 100755
--- 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
index 9bc6de969..a1053ba05 100644
--- 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
index 7d4a6abaa..68f7fc8d4 100644
--- 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 {
+    margin-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
index 960ab56cc..895c2df43 100644
--- 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,11 +1,11 @@
-<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 }}">
+      <div #wheel class="picker-opts inner" (scroll)="selected(col, $event)">
+        <p *ngFor="let row of valuesWithNulls[col]" class="list" id="{{ row }}">
           {{ row }}
         </p>
       </div>
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
index 6f79acbee..77a40dc88 100644
--- 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,11 +12,20 @@ wheel-selector {
     display: none;
   }
 
+  .inner {
+    mask-image:   
+    radial-gradient(
+      circle at 50% 50%,
+      black 30%,
+      rgba(0, 0, 0, 0.5) 70%
+    );
+  }
+
   .picker-opts {
     overflow: scroll;
     width: fit-content;
-    height: 40px;
-    border-radius: $label-height;
+    height: 120px;
+    border-radius: 28px;
     background-color: $cl-primary-40;
     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
index 5a8317028..3bdad0db7 100644
--- 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)

From 58dfc36b8eb203f65a872924df6323f3fd4ee392 Mon Sep 17 00:00:00 2001
From: mpgxvii <mpgxvii@gmail.com>
Date: Mon, 6 Apr 2020 14:57:08 +0100
Subject: [PATCH 2/4] fix: css

---
 .../wheel-selector/wheel-selector.component.html   | 14 ++++++++++----
 .../wheel-selector/wheel-selector.component.scss   | 10 +++++++---
 2 files changed, 17 insertions(+), 7 deletions(-)

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
index 895c2df43..d5ff484c9 100644
--- a/src/app/pages/questions/components/wheel-selector/wheel-selector.component.html
+++ b/src/app/pages/questions/components/wheel-selector/wheel-selector.component.html
@@ -4,10 +4,16 @@
       <div class="label">
         <ion-note>{{ labels[col] }}</ion-note>
       </div>
-      <div #wheel class="picker-opts inner" (scroll)="selected(col, $event)">
-        <p *ngFor="let row of valuesWithNulls[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
index 77a40dc88..faf853cb7 100644
--- a/src/app/pages/questions/components/wheel-selector/wheel-selector.component.scss
+++ b/src/app/pages/questions/components/wheel-selector/wheel-selector.component.scss
@@ -17,16 +17,20 @@ wheel-selector {
     radial-gradient(
       circle at 50% 50%,
       black 30%,
-      rgba(0, 0, 0, 0.5) 70%
+      rgba(0, 0, 0, 0.1) 70%
     );
   }
 
+
+  .bg {
+    border-radius: 28px;
+    background-color: $cl-primary-40;
+  }
+
   .picker-opts {
     overflow: scroll;
     width: fit-content;
     height: 120px;
-    border-radius: 28px;
-    background-color: $cl-primary-40;
     font-size: 20px;
     scroll-snap-type: y mandatory;
   }

From 35f14ef8f7aad86354b6dc9e830fe28ccfa7bfea Mon Sep 17 00:00:00 2001
From: mpgxvii <mpgxvii@gmail.com>
Date: Mon, 6 Apr 2020 23:53:04 +0100
Subject: [PATCH 3/4] fix: text input css

---
 .../components/question/text-input/text-input.component.scss    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 68f7fc8d4..fcce81f0a 100644
--- 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
@@ -8,6 +8,6 @@ text-input {
   }
 
   .mid {
-    margin-top: 96px;
+    padding-top: 96px;
   }
 }

From 00db3db4476efca8f87dec5f435ba4e97a3cc42e Mon Sep 17 00:00:00 2001
From: mpgxvii <mpgxvii@gmail.com>
Date: Mon, 6 Apr 2020 23:59:04 +0100
Subject: [PATCH 4/4] chore: update versions

---
 config.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config.xml b/config.xml
index 0b45edf82..8c4e85556 100755
--- 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>