Fix bugs when adding activity
This commit is contained in:
@@ -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 & Time:"
|
||||
/>
|
||||
<BoundInput binder={binder} name="location" label="Location:" />
|
||||
<FormStaticInput label="Date & 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"
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
46
mobile/src/ui/FormStaticInput.js
Normal file
46
mobile/src/ui/FormStaticInput.js
Normal 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>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user