Merge pull request #994 from RADAR-base/release-0.7.7-alpha

Release 0.7.7-alpha

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>

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])
 

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">

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;
+ }
 }

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>

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;
  }

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)