Skip to content

Instantly share code, notes, and snippets.

@iamrommel

iamrommel/haulermobile.pickupMap.js

Created October 11, 2017 04:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iamrommel/e17fb50911dc5c8e7498b5eabbff7ea8 to your computer and use it in GitHub Desktop.
Save iamrommel/e17fb50911dc5c8e7498b5eabbff7ea8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
haulermobile.pickupMap.js
import React from 'react'
import { MapView } from 'expo'
import {
View,
Text,
H3,
variables,
Content,
Icon,
ListItem,
Left,
Thumbnail,
Body,
Right,
Container,
List,
CardItem
} from 'native-base'
import _ from 'lodash'
import { Actions } from 'react-native-router-flux'
import { Utils } from 'pcmli.umbrella.react-native'
import { NavKeys } from '../../../utils/Constants'
const smallText = {fontSize: 11, color: '#a7a7a7'}
const remarksText = {fontSize: 10, color: variables.brandWarning}
const cowMarkerEmpty = require('../../../../assets/img/bottle_empty.png')
const bottleFull = require('../../../../assets/img/bottle_full.png')
const containerEmpty = require('../../../../assets/img/container_empty.png')
const containerFull = require('../../../../assets/img/container_full.png')
const ItemCustomer = ({pickupItem = {}, detail}) => {
const {customer} = pickupItem
const imageSource = {uri: customer && customer.logo && customer.logo.default}
const street1 = _.get(customer, 'contact.address1.street1', '')
const street2 = _.get(customer, 'contact.address1.street2', '')
const city = _.get(customer, 'contact.address1.city', '')
const fullAddress = _.get(customer, 'contact.address1.fullAddress', '')
const components = () => {
if (detail) {
const {weight, timeStamp, remarks, gradeType} = detail
return (
<Body>
<Text style={{color: variables.brandInfo}}>{customer && customer.summary}</Text>
<Text style={smallText}><Icon style={smallText} name="map-marker"/>{` ${fullAddress }`} </Text>
<Text style={smallText}><Icon style={smallText} name="adjust"/>{` Grade ${gradeType}`} </Text>
<Text style={smallText}><Icon style={smallText} name="tachometer"/>{` ${Utils.formatNumber(weight)} lbs.`}
</Text>
<Text style={smallText}><Icon style={smallText}
name="calendar"/>{` ${ timeStamp && Utils.formatDateTime(timeStamp)}`} </Text>
<Text style={remarksText}><Icon style={remarksText} name="sticky-note-o"/> {remarks} </Text>
</Body>
)
}
else {
return (
<Body>
<Text style={{color: variables.brandInfo}}>{customer && customer.summary}</Text>
<Text style={smallText}><Icon style={smallText} name="map-marker"/>{` ${fullAddress }`} </Text>
<Text style={smallText}> </Text>
<Text style={smallText}> </Text>
<Text style={smallText}> </Text>
<Text style={smallText}> </Text>
</Body>
)
}
}
return (
<CardItem cardBody>
{components()}
<Right>
<Thumbnail source={imageSource}/>
</Right>
</CardItem>
)
}
const DeliveryCustomer = ({pickupItem = {}, delivery}) => {
const {customer} = pickupItem
const imageSource = {uri: customer && customer.logo && customer.logo.default}
const fullAddress = _.get(customer, 'contact.address1.fullAddress', '')
const components = () => {
if (delivery) {
const {weight, timeStamp,} = delivery
return (
<Body>
<Text style={{color: variables.brandPrimary}}>{customer && customer.summary}</Text>
<Text style={smallText}><Icon style={smallText} name="map-marker"/>{` ${fullAddress }`}</Text>
<Text style={smallText}><Icon style={smallText} name="tachometer"/>{` ${Utils.formatNumber(weight)} lbs.`}
</Text>
<Text style={smallText}><Icon style={smallText} name="calendar"/> {Utils.formatDateTime(timeStamp)} </Text>
</Body>
)
}
else {
return (
<Body>
<Text style={{color: variables.brandPrimary}}>{customer && customer.summary}</Text>
<Text style={smallText}><Icon style={smallText} name="map-marker"/>{` ${fullAddress }`} </Text>
<Text style={smallText}> </Text>
<Text style={smallText}> </Text>
</Body>
)
}
}
return (
<CardItem cardBody>
{components()}
<Right>
<Thumbnail square source={imageSource}/>
</Right>
</CardItem>
)
}
const PickupMapMarker = ({item = {}, style, onEdit, pickup, index, type, detail, delivery}) => {
const coordinate = {
longitude: _.get(item, 'customer.contact.address1.gps.lng', -122.4324),
latitude: _.get(item, 'customer.contact.address1.gps.lat', 37.78825),
}
const handleEdit = () => {
const pickupId = pickup && pickup._id
const editItem = Object.assign({}, item, {pickupId})
onEdit(editItem)
}
let renderCalloutByType = <DeliveryCustomer pickupItem={item} delivery={delivery}/>
if (type === 'details') {
renderCalloutByType = <ItemCustomer pickupItem={item} detail={detail}/>
}
const imageMarker = () => {
if (type === 'details') {
if (detail)
return bottleFull
else
return cowMarkerEmpty
}
else {
if (delivery)
return containerFull
else
return containerEmpty
}
}
return (
<MapView.Marker coordinate={coordinate} image={imageMarker()}>
<View style={style.mapMarker}>
<H3 >{index && index.toString()}</H3>
</View>
<MapView.Callout onPress={handleEdit}>
<View style={{width: (variables.deviceWidth / 1.5)}}>
{renderCalloutByType}
</View>
</MapView.Callout>
</MapView.Marker>
)
}
PickupMapMarker.defaultProps = {
style: {
mapMarker: {
height: 40,
width: 20,
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
}
}
}
const getDetail = (details, route) => {
return _.find(details, function (detail) {
return detail.customer._id === route.customer._id
})
}
const getDelivery = (deliveries, route) => {
return _.find(deliveries, function (delivery) {
return delivery.customer._id === route.customer._id
})
}
class PickupMap extends React.Component {
constructor (props) {
super(props)
this.state = {
showDetailDialog: false,
showDeliveryDialog: false,
initialRegion: {
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}
}
}
handleDetailEditItem = (selectedItem = {}) => {
const {pickup = {}} = this.props
const pickupId = pickup && pickup._id
const detail = getDetail(pickup && pickup.details, selectedItem)
let initialValues = {
details: {
$: {
pickupId: pickup._id,
_id: Utils.generateId(17),
gradeType: 'A',
temperature: 28,
code: Utils.generateId(5),
timeStamp: pickup.timeStamp,
weight: 100,
customer: {
_id: selectedItem.customer._id
}
}
},
_id: pickup._id,
pickup
}
if (!detail) {
Actions[NavKeys.PickupDetailCreate]({initialValues, pickup})
}
else {
const {customer, weight, timeStamp, gradeType, temperature, code, _id, remarks} = detail
initialValues = {
details: {
$: {
customer, weight, timeStamp, gradeType, temperature, code, pickupId, _id, remarks
}
},
_id: pickup._id,
filter: {'details._id': _id, _id: pickup._id},
pickup
}
Actions[NavKeys.PickupDetailEdit]({initialValues, pickup})
}
}
handleDeliveryEditItem = (selectedItem) => {
const {pickup = {}} = this.props
const delivery = getDelivery(pickup && pickup.deliveries, selectedItem)
const pickupWeight = _.sumBy(pickup.details, 'weight') || 0
const initialValues = {
deliveries: {
$: {
pickupId: pickup._id,
_id: Utils.generateId(17),
timeStamp: pickup.timeStamp,
weight: pickupWeight,
customer: {
_id: selectedItem.customer._id
}
}
},
_id: pickup._id,
pickup
}
if (!delivery) {
Actions[NavKeys.PickupDeliveryCreate]({initialValues, pickup})
}
else {
let {customer, weight, timeStamp, _id, pickupId} = delivery || {}
const initialValues = {
deliveries: {
$: {
customer, weight, timeStamp, _id, pickupId
}
},
_id: pickup._id,
filter: {'deliveries._id': _id, _id: pickup._id},
pickup
}
Actions[NavKeys.PickupDeliveryEdit]({initialValues, pickup})
}
}
render () {
let {initialRegion,} = this.state || {}
const {style, pickup = {}} = this.props
const {details = [], deliveries = [], route = {}} = pickup
const routeProducers = _.filter(route.details, function (detail) {
return detail.customer.type === 'Milk Producer'
})
const routePlants = _.filter(route.details || [], function (detail) {
return detail.customer.type === 'Plant'
})
// const detailCount = details.length || 0
// if (detailCount > 0) {
initialRegion = {
longitude: _.get(routeProducers[0], 'customer.contact.address1.gps.lng', -122.4324),
latitude: _.get(routeProducers[0], 'customer.contact.address1.gps.lat', 37.78825),
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
// }
}
return (
<View>
<MapView style={style.map} initialRegion={initialRegion}>
{_.map(routeProducers, (m, i) => {
return (
<PickupMapMarker key={i} item={m} pickup={pickup} type="details" detail={getDetail(details, m)}
onEdit={this.handleDetailEditItem}
index={m.position}/>
)
})}
{_.map(routePlants, (m, i) => {
return (
<PickupMapMarker key={i} item={m} pickup={pickup} type="deliveries" delivery={getDelivery(deliveries, m)}
onEdit={this.handleDeliveryEditItem}
index={m.position}/>
)
})}
</MapView>
</View>
)
}
}
PickupMap.defaultProps = {
style: {
container: {
backgroundColor: '#fff',
},
map: {
flex: 1,
height: variables.deviceHeight - 56,
width: variables.deviceWidth + 10
}
}
}
export { PickupMap }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment