416 lines
11 KiB
JavaScript
416 lines
11 KiB
JavaScript
import React from "react"
|
|
import {
|
|
StyleSheet,
|
|
View,
|
|
Image,
|
|
ScrollView,
|
|
Text,
|
|
TextInput,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
TouchableOpacity,
|
|
} from "react-native"
|
|
import MapView, { Marker } from "react-native-maps"
|
|
import { FormBinder } from "react-form-binder"
|
|
import {
|
|
Icon,
|
|
Header,
|
|
BoundInput,
|
|
BoundButton,
|
|
BoundOptionStrip,
|
|
BoundHeader,
|
|
BoundPhotoPanel,
|
|
FormStaticInput,
|
|
} from "../ui"
|
|
import { MessageModal, WaitModal, ProgressModal } from "../Modal"
|
|
import { reactAutoBind } from "auto-bind2"
|
|
import KeyboardSpacer from "react-native-keyboard-spacer"
|
|
import { isIphoneX } from "react-native-iphone-x-helper"
|
|
import { api } from "../API"
|
|
import { formatLatLng, workItemTypeEnum } from "../util"
|
|
import moment from "moment"
|
|
import "url-search-params-polyfill"
|
|
import { config } from "../config"
|
|
import { FormStaticOptionStrip, FormStaticPhotoPanel } from "../ui"
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexGrow: 1,
|
|
backgroundColor: "#DDDDDD",
|
|
},
|
|
panel: {
|
|
width: "94%",
|
|
backgroundColor: "white",
|
|
alignSelf: "center",
|
|
marginTop: "3%",
|
|
shadowColor: "gray",
|
|
shadowOffset: { width: 2, height: 2 },
|
|
shadowRadius: 2,
|
|
shadowOpacity: 0.5,
|
|
padding: 10,
|
|
},
|
|
label: {
|
|
fontSize: 14,
|
|
marginBottom: 4,
|
|
},
|
|
})
|
|
|
|
export class Activity extends React.Component {
|
|
static bindings = {
|
|
header: {
|
|
noValue: true,
|
|
isDisabled: (r) => !(r.anyModified && r.allValid),
|
|
},
|
|
resolution: {
|
|
isValid: (r, v) => v !== "",
|
|
},
|
|
notes: {
|
|
isValid: (r, v) => v !== "",
|
|
},
|
|
photos: {
|
|
initValue: [],
|
|
isValid: (r, v) => v && v.length > 0,
|
|
},
|
|
status: {
|
|
isValid: (r, v) => v !== "",
|
|
alwaysGet: true,
|
|
},
|
|
workItem: {
|
|
isValid: true,
|
|
alwaysGet: true,
|
|
},
|
|
team: {
|
|
isValid: true,
|
|
alwaysGet: true,
|
|
},
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
reactAutoBind(this)
|
|
this.state = {
|
|
binder: new FormBinder({}, Activity.bindings),
|
|
waitModal: null,
|
|
messageModal: null,
|
|
progressModal: null,
|
|
uploadPercent: 0,
|
|
}
|
|
this.region = null
|
|
this.isMapReady = false
|
|
this.goToRegionWhenReady = false
|
|
}
|
|
|
|
componentDidMount() {
|
|
const { search } = this.props.location
|
|
const params = search ? new URLSearchParams(search) : { get: () => null }
|
|
const id = params.get("id")
|
|
const workItemId = params.get("workItemId")
|
|
const getWorkItem = (id) => {
|
|
this.setState({ waitModal: { message: "Loading Work Item Details..." } })
|
|
api
|
|
.getWorkItem(id)
|
|
.then((workItem) => {
|
|
this.setState({ waitModal: null })
|
|
if (workItem) {
|
|
const [lng, lat] = workItem.location.coordinates
|
|
|
|
this.setState({
|
|
binder: new FormBinder(
|
|
{
|
|
...this.state.binder.originalObj,
|
|
workItem: workItem._id,
|
|
team: api.loggedInUser.team,
|
|
},
|
|
Activity.bindings
|
|
),
|
|
location: formatLatLng(lat, lng),
|
|
dateTime: moment().format(),
|
|
details: workItem.details,
|
|
workItemType: workItem.workItemType,
|
|
workItemPhotos: workItem.photos,
|
|
})
|
|
|
|
this.region = {
|
|
latitude: lat,
|
|
longitude: lng,
|
|
latitudeDelta: config.activityRegionDelta,
|
|
longitudeDelta: config.activityRegionDelta,
|
|
}
|
|
}
|
|
|
|
if (this.isMapReady) {
|
|
this.mapView.animateToRegion(this.region)
|
|
} else {
|
|
this.goToRegionWhenReady = true
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
this.setState({
|
|
waitModal: null,
|
|
messageModal: {
|
|
icon: "hand",
|
|
message: "Unable to get work item details",
|
|
detail: err.message,
|
|
back: true,
|
|
},
|
|
})
|
|
})
|
|
}
|
|
|
|
if (id) {
|
|
this.setState({ waitModal: { message: "Loading Activity..." } })
|
|
api
|
|
.getActivity(id)
|
|
.then((activity) => {
|
|
this.setState({ waitModal: null })
|
|
|
|
if (activity) {
|
|
this.setState({
|
|
binder: new FormBinder(activity, Activity.bindings),
|
|
})
|
|
|
|
return getWorkItem(activity.workItem)
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
this.setState({
|
|
waitModal: null,
|
|
messageModal: {
|
|
icon: "hand",
|
|
message: "Unable to get activity details",
|
|
detail: err.message,
|
|
back: true,
|
|
},
|
|
})
|
|
})
|
|
} else {
|
|
if (workItemId) {
|
|
getWorkItem(workItemId)
|
|
} else {
|
|
this.handleBackPress()
|
|
}
|
|
}
|
|
}
|
|
|
|
handleOnMapReady() {
|
|
if (this.goToRegionWhenReady) {
|
|
this.mapView.animateToRegion(this.region)
|
|
this.goToRegionWhenReady = false
|
|
}
|
|
|
|
this.isMapReady = true
|
|
}
|
|
|
|
handleMessageDismiss() {
|
|
const back = this.state.messageModal.back
|
|
this.setState({ messageModal: null })
|
|
if (back) {
|
|
this.handleBackPress()
|
|
}
|
|
}
|
|
|
|
handleBackPress() {
|
|
const { history } = this.props
|
|
|
|
if (history.length > 1) {
|
|
history.goBack()
|
|
} else {
|
|
history.replace("/home")
|
|
}
|
|
}
|
|
|
|
handleDonePress() {
|
|
const { binder } = this.state
|
|
let obj = binder.getModifiedBindingValues()
|
|
|
|
if (!obj._id) {
|
|
api
|
|
.createActivity(obj)
|
|
.then((activity) => {
|
|
this.handleBackPress()
|
|
})
|
|
.catch((error) => {
|
|
this.setState({
|
|
messageModal: {
|
|
icon: "hand",
|
|
message: "Unable to create activity",
|
|
detail: error.message,
|
|
},
|
|
})
|
|
})
|
|
} else {
|
|
api
|
|
.updateActivity(obj)
|
|
.then((activity) => {
|
|
this.handleBackPress()
|
|
})
|
|
.catch((error) => {
|
|
this.setState({
|
|
messageModal: {
|
|
icon: "hand",
|
|
message: "Unable to update activity",
|
|
detail: error.message,
|
|
},
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
handleUploadStarted() {
|
|
this.setState({
|
|
progressModal: { message: "Uploading Photo..." },
|
|
uploadPercent: 0,
|
|
})
|
|
}
|
|
|
|
handleUploadProgress(uploadData) {
|
|
if (this.state.progressModal) {
|
|
this.setState({
|
|
uploadPercent: Math.round(
|
|
(uploadData.uploadedChunks / uploadData.numberOfChunks) * 100
|
|
),
|
|
})
|
|
return true
|
|
} else {
|
|
return false
|
|
}
|
|
}
|
|
|
|
handleUploadEnded(successful, uploadData) {
|
|
this.setState({ progressModal: null })
|
|
}
|
|
|
|
handleUploadCanceled() {
|
|
this.setState({ progressModal: null })
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
binder,
|
|
messageModal,
|
|
progressModal,
|
|
waitModal,
|
|
dateTime,
|
|
location,
|
|
details,
|
|
workItemType,
|
|
uploadPercent,
|
|
workItemPhotos,
|
|
} = this.state
|
|
|
|
return (
|
|
<View style={{ width: "100%", height: "100%" }}>
|
|
<BoundHeader
|
|
binder={binder}
|
|
name="header"
|
|
title="Activity"
|
|
leftButton={{ icon: "back", onPress: this.handleBackPress }}
|
|
rightButton={{ icon: "done", onPress: this.handleDonePress }}
|
|
/>
|
|
<ScrollView style={styles.container}>
|
|
<View style={styles.panel}>
|
|
<BoundOptionStrip
|
|
binder={binder}
|
|
options={[
|
|
{ value: "planned", text: "Planned" },
|
|
{ value: "open", text: "Open" },
|
|
{ value: "onHold", text: "On Hold" },
|
|
{ value: "closed", text: "Closed" },
|
|
]}
|
|
label="Status:"
|
|
name="status"
|
|
message="You must supply a status for the activity"
|
|
/>
|
|
<BoundInput
|
|
binder={binder}
|
|
name="resolution"
|
|
label="Resolution:"
|
|
message="You must supply a resolution for the activity"
|
|
/>
|
|
<BoundInput
|
|
binder={binder}
|
|
name="notes"
|
|
label="Notes:"
|
|
message="You must supply notes for the activity"
|
|
/>
|
|
<FormStaticInput label="Date & Time:" value={dateTime} />
|
|
<BoundPhotoPanel
|
|
name="photos"
|
|
binder={binder}
|
|
onUploadStarted={this.handleUploadStarted}
|
|
onUploadProgress={this.handleUploadProgress}
|
|
onUploadEnded={this.handleUploadEnded}
|
|
/>
|
|
</View>
|
|
<View style={styles.panel}>
|
|
<FormStaticOptionStrip
|
|
label="Work Item Type:"
|
|
options={workItemTypeEnum}
|
|
value={workItemType}
|
|
/>
|
|
<FormStaticInput label="Details:" value={details} />
|
|
<FormStaticPhotoPanel
|
|
label="Work Item Photos:"
|
|
value={workItemPhotos}
|
|
/>
|
|
<FormStaticInput label="Location:" value={location} />
|
|
<View style={{ flexDirection: "column", justifyContent: "center" }}>
|
|
<MapView
|
|
ref={(ref) => (this.mapView = ref)}
|
|
style={{
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
width: "100%",
|
|
height: 400,
|
|
marginTop: 10,
|
|
}}
|
|
zoomControlEnabled={false}
|
|
zoomEnabled={false}
|
|
scrollEnabled={false}
|
|
rotateEnabled={false}
|
|
pitchEnabled={false}
|
|
showsIndoors={false}
|
|
showsTraffic={false}
|
|
showsCompass={false}
|
|
showsScale={false}
|
|
showsUserLocation
|
|
cacheEnabled
|
|
initialRegion={config.initialRegion}
|
|
onMapReady={this.handleOnMapReady}
|
|
/>
|
|
<Icon
|
|
name="target"
|
|
size={24}
|
|
pointerEvents={false}
|
|
style={{
|
|
position: "absolute",
|
|
alignSelf: "center",
|
|
}}
|
|
/>
|
|
</View>
|
|
</View>
|
|
{isIphoneX ? <View style={{ height: 30, width: "100%" }} /> : null}
|
|
</ScrollView>
|
|
<ProgressModal
|
|
open={!!progressModal}
|
|
message={progressModal ? progressModal.message : ""}
|
|
percent={uploadPercent}
|
|
onCancel={this.handleUploadCanceled}
|
|
/>
|
|
<WaitModal
|
|
open={!!waitModal}
|
|
message={waitModal ? waitModal.message : ""}
|
|
/>
|
|
<MessageModal
|
|
open={!!messageModal}
|
|
icon={messageModal ? messageModal.icon : ""}
|
|
message={messageModal ? messageModal.message : ""}
|
|
detail={messageModal ? messageModal.detail : ""}
|
|
onDismiss={messageModal && this.handleMessageDismiss}
|
|
/>
|
|
{Platform.OS === "ios" && <KeyboardSpacer />}
|
|
</View>
|
|
)
|
|
}
|
|
}
|