Fix bugs when adding activity

This commit is contained in:
John Lyon-Smith
2018-04-27 18:10:39 -07:00
parent 93f3d462b2
commit 53a4df55a2
8 changed files with 138 additions and 79 deletions

View File

@@ -20,13 +20,15 @@ import {
BoundOptionStrip,
BoundHeader,
BoundPhotoPanel,
FormStaticInput,
} from "../ui"
import { MessageModal, WaitModal } from "../Modal"
import autobind from "autobind-decorator"
import KeyboardSpacer from "react-native-keyboard-spacer"
import { isIphoneX } from "react-native-iphone-x-helper"
import { api } from "../API"
import { formatLatLng, parseLatLng } from "../util"
import { formatLatLng } from "../util"
import moment from "moment"
import "url-search-params-polyfill"
const styles = StyleSheet.create({
@@ -57,13 +59,6 @@ export class Activity extends React.Component {
noValue: true,
isDisabled: (r) => !(r.anyModified && r.allValid),
},
dateTime: {
isValid: (r, v) => v !== "",
isReadOnly: true,
},
details: {
isValid: (r, v) => v !== "",
},
resolution: {
isValid: (r, v) => v !== "",
},
@@ -72,14 +67,19 @@ export class Activity extends React.Component {
},
photos: {
isValid: (r, v) => v && v.length > 0,
initValue: [],
},
status: {
isValid: (r, v) => v !== "",
alwaysGet: true,
},
location: {
isValid: (r, v) => v !== "",
isReadOnly: true,
workItem: {
isValid: true,
alwaysGet: true,
},
team: {
isValid: true,
alwaysGet: true,
},
}
@@ -99,17 +99,26 @@ export class Activity extends React.Component {
const getWorkItem = (id) => {
api
.getWorkItem(id)
.then((workitem) => {
.then((workItem) => {
if (workItem) {
const [lng, lat] = workItem.location.coordinates
this.setState({
binder: new FormBinder(
{
workItem: workItem._id,
team: api.loggedInUser.team,
},
Activity.bindings
),
region: {
latitude: lat,
longitude: lng,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
},
location: formatLatLng(lat, lng),
dateTime: moment().format(),
})
}
})
@@ -225,7 +234,14 @@ export class Activity extends React.Component {
}
render() {
const { binder, messageModal, waitModal, region } = this.state
const {
binder,
messageModal,
waitModal,
region,
dateTime,
location,
} = this.state
return (
<View style={{ width: "100%", height: "100%" }}>
@@ -257,12 +273,8 @@ export class Activity extends React.Component {
<BoundInput binder={binder} name="notes" label="Notes:" />
</View>
<View style={styles.panel}>
<BoundInput
binder={binder}
name="dateTime"
label="Date &amp; Time:"
/>
<BoundInput binder={binder} name="location" label="Location:" />
<FormStaticInput label="Date &amp; Time:" value={dateTime} />
<FormStaticInput label="Location:" value={location} />
<View style={{ flexDirection: "column", justifyContent: "center" }}>
<MapView
style={{
@@ -283,12 +295,7 @@ export class Activity extends React.Component {
showsScale={false}
showsUserLocation
cacheEnabled
initialRegion={{
latitude: 43.653908,
longitude: -79.384293,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
region={region}
/>
<Icon
name="target"

View File

@@ -66,11 +66,8 @@ export class Home extends React.Component {
results[PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION] ===
PermissionsAndroid.RESULTS.GRANTED
) {
this.watchId = navigator.geolocation.watchPosition(
this.handlePositionChange,
null,
{ distanceFilter: 10 }
)
this.setState({ haveLocationPermission: true })
navigator.geolocation.getCurrentPosition(this.handlePositionChange)
}
if (
@@ -250,9 +247,18 @@ export class Home extends React.Component {
positionInfo,
messageModal,
haveCameraPermission,
haveLocationPermission,
workItemDistance,
} = this.state
if (!this.watchId && haveLocationPermission) {
this.watchId = navigator.geolocation.watchPosition(
this.handlePositionChange,
null,
{ distanceFilter: 10 }
)
}
return (
<View
style={{
@@ -268,7 +274,9 @@ export class Home extends React.Component {
!(
positionInfo &&
positionInfo.coords.accuracy <= config.minGPSAccuracy
) || !haveCameraPermission
) ||
!haveCameraPermission ||
!haveLocationPermission
}
/>
<MapView

View File

@@ -16,10 +16,8 @@ export class MessageModal extends Component {
@autobind
handleButtonPress() {
const { onDismiss } = this.props
if (onDismiss) {
onDismiss()
if (this.props.onDismiss) {
this.props.onDismiss()
}
}

View File

@@ -88,41 +88,39 @@ export class WorkItem extends React.Component {
}
const { search } = this.props.location
const params = search ? new URLSearchParams(search) : { get: () => null }
const id = params.get("id")
if (search) {
const id = new URLSearchParams(search).get("id")
if (id) {
api
.getWorkItem(id)
.then((workItem) => {
if (workItem) {
const [lng, lat] = workItem.location.coordinates
const region = {
latitude: lat,
longitude: lng,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
}
workItem.location = formatLatLng(lat, lng)
this.setState({
binder: new FormBinder(workItem, WorkItem.bindings),
region,
})
if (id) {
api
.getWorkItem(id)
.then((workItem) => {
if (workItem) {
const [lng, lat] = workItem.location.coordinates
const region = {
latitude: lat,
longitude: lng,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
}
})
.catch((err) => {
workItem.location = formatLatLng(lat, lng)
this.setState({
messageModal: {
icon: "hand",
message: "Unable to get work item details",
detail: err.message,
back: true,
},
binder: new FormBinder(workItem, WorkItem.bindings),
region,
})
}
})
.catch((err) => {
this.setState({
messageModal: {
icon: "hand",
message: "Unable to get work item details",
detail: err.message,
back: true,
},
})
}
})
}
}
@@ -219,6 +217,7 @@ export class WorkItem extends React.Component {
if (this.addressInput) {
this.addressInput.handleChangeText(address)
}
this.setState({ region: ref.mapView.region })
})
.catch(() => {
if (this.addressInput) {

View File

@@ -14,18 +14,18 @@ export const config = {
minDistanceToItem: 10,
geocodeDelayMilliseconds: 500,
// This region is downtown Toronto
initialRegion: {
latitude: 43.653908,
longitude: -79.384293,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
},
// This region is Bainbridge Island
// initialRegion: {
// latitude: 47.629536,
// longitude: -122.524162,
// latitude: 43.653908,
// longitude: -79.384293,
// latitudeDelta: 0.0922,
// longitudeDelta: 0.0421,
// },
// alwaysShowWorkItemInAR: true,
// This region is Bainbridge Island
initialRegion: {
latitude: 47.629536,
longitude: -122.524162,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
},
alwaysShowWorkItemInAR: true,
}

View File

@@ -34,10 +34,10 @@ export class BoundInput extends React.Component {
@autobind
handleChangeText(newText) {
const { binder, name } = this.props
if (binder) {
this.setState(binder.updateFieldValue(name, newText))
if (this.props.binder) {
this.setState(
this.props.binder.updateFieldValue(this.props.name, newText)
)
}
}

View File

@@ -0,0 +1,46 @@
import React from "react"
import PropTypes from "prop-types"
import { TextInput, Text, View, Platform } from "react-native"
import autobind from "autobind-decorator"
export class FormStaticInput extends React.Component {
static propTypes = {
label: PropTypes.string,
value: PropTypes.string,
}
render() {
const { label, value } = this.props
return (
<View style={{ width: "100%" }}>
<Text
style={{
color: "black",
fontSize: 14,
marginBottom: 5,
}}>
{label}
</Text>
<TextInput
style={{
width: "100%",
paddingLeft: 5,
paddingRight: 5,
borderColor: "gray",
borderWidth: 1,
fontSize: 16,
paddingTop: 7,
paddingBottom: Platform.OS === "ios" ? 7 : 0,
textAlignVertical: "top",
marginBottom: 5,
}}
editable={false}
autoCapitalize="none"
underlineColorAndroid="white"
value={value}
/>
</View>
)
}
}

View File

@@ -3,6 +3,7 @@ export { Header } from "./Header"
export { OptionStrip } from "./OptionStrip"
export { BoundSwitch } from "./BoundSwitch"
export { BoundInput } from "./BoundInput"
export { FormStaticInput } from "./FormStaticInput"
export { BoundButton } from "./BoundButton"
export { BoundOptionStrip } from "./BoundOptionStrip"
export { BoundHeader } from "./BoundHeader"