From 4b696da0334a92a00119ab4a5c0414a79f39da4f Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Fri, 15 Mar 2019 12:51:25 -0400 Subject: updated mobile form, updated web schemas, and /mobilerequest handler. No front end web changes yet --- mobile/package.json | 4 +- mobile/screens/Form1.js | 193 +++++++++++++++++++++++++++++++---------------- web/models/mockpoints.js | 10 ++- web/models/points.js | 10 ++- web/routes/index.js | 12 +-- 5 files changed, 144 insertions(+), 85 deletions(-) diff --git a/mobile/package.json b/mobile/package.json index 488e885..80a591e 100644 --- a/mobile/package.json +++ b/mobile/package.json @@ -15,8 +15,8 @@ "expo": "^32.0.0", "react": "16.5.0", "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz", - "react-native-elements": "^1.1.0", - "react-navigation": "^3.0.9" + "react-navigation": "^3.0.9", + "tcomb-form-native": "^0.6.20" }, "devDependencies": { "babel-preset-expo": "^5.0.0", diff --git a/mobile/screens/Form1.js b/mobile/screens/Form1.js index 2a52499..8e946fc 100644 --- a/mobile/screens/Form1.js +++ b/mobile/screens/Form1.js @@ -1,9 +1,81 @@ import React, { Component } from 'react'; -import {Text, Alert, AppRegistry, StyleSheet, View } from 'react-native'; -import { Button, Input, CheckBox } from 'react-native-elements'; +import { StyleSheet, Button, KeyboardAvoidingView } from 'react-native'; import { Constants } from 'expo'; +import t from 'tcomb-form-native'; + +const Form = t.form.Form; + +var Gender = t.enums({ + "Male" : "Male", + "Female": "Female", + "Unsure": "Can't say for sure", +}); + +var AgeRanges = t.enums({ + "0-20" : "Under 20 years", + "20-30": "20 - 30 years", + "30-50": "30 - 50 years", + "50+" : "Over 50 years", +}); + +var Races = t.enums({ + "White" : "European or White", + "eAsian" : "East Asian", + "sAsian" : "South Asian", + "Black" : "Black or African American", + "Aboriginal": "Aboriginal", + "Other" : "Other", +}); + +const Report = t.struct({ + gender : Gender, + age : AgeRanges, + race : Races, + longhair : t.Boolean, + longbeard : t.Boolean, + extra : t.maybe(t.String) +}); + +const options = { + label: "Help us identify them!", + fields: { + gender: { + auto: 'none', + nullOption: {value: '', text: "Gender"}, + error: "Please pick an option for this field", + }, + age: { + auto: 'none', + nullOption: {value: '', text: "Guess their age"}, + error: "Please pick an option for this field" + }, + race: { + auto: 'none', + nullOption: {value: '', text: "Race"}, + error: "Please pick an option for this field", + }, + longhair: { + label: "Long hair?" + }, + longbeard: { + label: "Long beard?" + }, + extra: { + label: "Distinctive features", + help: "How would you identify them in a crowd? Tattoos, peircings, holding a sign etc.", + }, + }, +}; export default class Form1 extends Component { + + constructor(props) { + super(props); + this.state = { + value: null, + }; + } + getApiUrl() { var releaseChannel = Constants.manifest.releaseChannel; if (releaseChannel === undefined) return Constants.manifest.extra.apiUrl.dev @@ -11,83 +83,72 @@ export default class Form1 extends Component { if (releaseChannel.indexOf('staging') !== -1) return Constants.manifest.extra.apiUrl.staging } - _onPressButton1() { + _onSubmitPress(values) { const { navigation } = this.props; const coordinates = navigation.getParam('coordinates'); - var uri = this.getApiUrl(); - fetch(uri, { + var url = this.getApiUrl(); + fetch(url, { method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ - 'coordinates': coordinates, - 'type': "Point", - 'isInjured': this.state.injured, - 'reasonForHelp': this.state.why, - 'ageRange': this.state.age, - 'clothingDescription': this.state.appearance - }), - }); - // TODO: handle the response from the serve and decide what to display - // based on that - // for now just to back to the home page - this.props.navigation.navigate('GreetingPage'); -} - _onPressButton2() { - Alert.alert('Continue:') + coordinates : coordinates, + gender : values.gender, + age : values.age, + race : values.race, + longhair : values.longhair, + longbeard : values.longbeard, + extra : (values.extra) ? values.extra : "" + }), + }); + //// TODO: handle the response from the serve and decide what to display + //// based on that + //// for now just to back to the home page + //this.props.navigation.navigate('GreetingPage'); } - constructor(props) { - super(props); - this.state = { - age: '', - appearance: '', - injured: false, - why: '' - }; + + handleSubmit() { + var value = this.refs.form.getValue(); + if (value) { + this._onSubmitPress(value); + //this.clearForm(); + } + } + + onChange(value) { + this.setState({ value }); + } + + clearForm() { + this.setState({ value: null }); } render() { return ( - - Age: - this.setState({age})} - /> - Appearance: - this.setState({appearance})} - /> - this.setState({ injured: !this.state.injured })} - /> - Reason for help? - this.setState({why})} - /> - -