Files
old-svijetlastrana-front/src/routes/app/components/NEMTLocation.js
2018-05-29 17:02:50 +02:00

1399 lines
48 KiB
JavaScript

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import Link from 'react-router';
import ActionHome from 'material-ui/svg-icons/action/home';
import ActionWork from 'material-ui/svg-icons/action/work';
import MapsMyLocation from 'material-ui/svg-icons/maps/my-location';
import MapsAddLocation from 'material-ui/svg-icons/maps/add-location';
import MapsNearMe from 'material-ui/svg-icons/maps/near-me';
import MapsLocalHospital from 'material-ui/svg-icons/maps/local-hospital';
import MapsLocalPharmacy from 'material-ui/svg-icons/maps/local-pharmacy';
import AutoComplete from 'material-ui/AutoComplete';
import { fullWhite } from 'material-ui/styles/colors';
import Dialog from 'material-ui/Dialog';
import { List, ListItem, makeSelectable } from 'material-ui/List';
import TextField from 'material-ui/TextField';
import Divider from 'material-ui/Divider';
import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-drop-right';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import $ from 'jquery';
import GeolocationService from './Geolocation';
import Instance from '../../../components/Connection';
let SelectableList = makeSelectable(List);
function wrapState(ComposedComponent) {
return class SelectableList extends Component {
static propTypes = {
children: PropTypes.node.isRequired,
defaultValue: PropTypes.number.isRequired,
};
componentWillMount() {
this.setState({
selectedIndex: this.props.defaultValue,
});
}
handleRequestChange = (event, index) => {
this.setState({
selectedIndex: index,
});
};
render() {
return (
<ComposedComponent
value={this.state.selectedIndex}
onChange={this.handleRequestChange}
>
{this.props.children}
</ComposedComponent>
);
}
};
}
SelectableList = wrapState(SelectableList);
const customContentStyle = {
width: '100%',
maxWidth: '600px',
};
const buttonStyle = {
};
const buttonStyleWhite = {
textAlign: 'left',
textTransform: 'none !important',
padding: '0px 0px 0px 0px',
marginTop: 0,
boxShadow: 'none',
color: 'rgba(0, 0, 0, 0.3)',
display: 'inline'
};
const datasourceConfig = { text: 'providerText', value: 'muk_id' }
const service = new google.maps.places.AutocompleteService();
const placeService = new google.maps.places.PlacesService(document.createElement('div'));
const autoComplete = new google.maps.places.AutocompleteService();
export class NEMTLocation extends React.Component {
constructor(props) {
super(props);
this.props = props;
this.state = {
data: {
"id": "",
"origin": {
"name": "",
"lat": 0,
"lng": 0,
"address": ""
},
"destination": {
"name": "",
"lat": 0,
"lng": 0,
"address": ""
}
},
open: false,
nearbyPlaces: [],
textSize: '16',
icon: '',
type: '',
buttonValue: '',
locationType: '',
geolocation: {
lat: 0,
long: 0
},
providers: [],
locations: [],
currentSelection: {
id: 0,
name: "",
address: "",
lat: "",
lng: "",
type: "",
saved: false,
},
inputValue: "",
locationValue: "",
addLocation: false,
searchAddresses: [],
addLocationText: '',
addLocationTextValue: '',
addLocationType: 'custom',
addLocationSelected: {},
addLocationCustomLabel: '',
addLocationID: '',
user: {
useruuid: '',
addresses: []
},
currentLocation: null,
currentLocationBaseName: 'Current Location',
address: {
id: '',
name: '',
address: '',
},
centerLocation: {
lat: 0,
long: 0,
name: '',
address: '',
}
}
this.addCustomLabel = this.addCustomLabel.bind(this);
this.geoSuccess = this.geoSuccess.bind(this);
this.handleAddAddress = this.handleAddAddress.bind(this);
this.handleAutocomplete = this.handleAutocomplete.bind(this);
this.handleBack = this.handleBack.bind(this);
this.handleCancel = this.handleCancel.bind(this);
this.handleClose = this.handleClose.bind(this);
this.handleOpen = this.handleOpen.bind(this);
this.handlePlaceChanged = this.handlePlaceChanged.bind(this);
this.handleSave = this.handleSave.bind(this);
this.handleSaveAddress = this.handleSaveAddress.bind(this);
this.locateNearby = this.locateNearby.bind(this);
this.noPosition = this.noPosition.bind(this);
this.updateTextSearch = this.updateTextSearch.bind(this);
this.handleCurrentLocation = this.handleCurrentLocation.bind(this);
this.updateLocation = this.updateLocation.bind(this);
this.handleGetClosestPlace = this.handleGetClosestPlace.bind(this);
this.updateLocationValue = this.updateLocationValue.bind(this);
this.handleAutoCompleteLocation = this.handleAutoCompleteLocation.bind(this);
// this.updateLocation().then(console.log);
this.updateLocation();
}
static propTypes = {
data: React.PropTypes.object.isRequired,
title: React.PropTypes.string,
value: React.PropTypes.string,
buttonvalue: React.PropTypes.string,
onPlaceChanged: React.PropTypes.function,
icon: React.PropTypes.string,
textSize: React.PropTypes.integer,
type: React.PropTypes.string,
locationType: React.PropTypes.string,
address: React.PropTypes.object
}
geoSuccess = (position) => {
let lat = 0;
let long = 0;
if (this.state.centerLocation.lat !== 0 && this.state.centerLocation.long !== 0) {
lat = this.state.centerLocation.lat;
long = this.state.centerLocation.long;
} else {
const geo = GeolocationService.GetCoordinates();
lat = geo.lat;
long = geo.long;
}
if (lat === 0 || long === 0) {
lat = 41.886406;
long = -87.624225;
}
this.locateNearby(lat, long)
}
locateNearby = (lat, long) => {
if (lat === 0 || long === 0) {
lat = 41.886406;
long = -87.624225;
}
if (this.state.locationType === 'provider') {
let url = `/v1/nemt/provider?lat=${lat}&long=${long}&limit=50&sortby=distance`
Instance.getRawConn().get(url).then(res => {
let nearByPlaces = [];
if (res.data.resultStatus === 'SUCCESS') {
let providers = res.data.providers.map(p => {
const streetNumber = p.streetName_1.split(' ')[0]
let clickResult = {
id: p.mukId,
muk_id: p.mukId,
address: `${p.streetName_1}, ${p.cityName}, ${p.state} (${p.zipCode.substr(0, 5)})`,
lat: parseFloat(p.latitude),
lng: parseFloat(p.longitude),
name: p.providerName,
type: 'provider',
raw: p,
street_number: streetNumber,
street: p.streetName_1.replace(streetNumber, '').trim(),
city: p.cityName,
state: p.state,
zipcode: p.zipCode.substr(0, 5),
country: p.country,
saved: false,
}
if (p.fivePartKeyGroups.length > 0) {
clickResult.npi = p.fivePartKeyGroups[0].providerNum;
}
var listItem = (<ListItem primaryText={p.providerName} secondaryText={clickResult.address} key={p.mukId} rightIcon={<MapsLocalHospital />} onClick={(event) => this.handlePlaceChanged(clickResult)} />)
nearByPlaces.push(listItem);
p.providerText = `${p.providerName} - ${p.streetName_1}, ${p.cityName}, ${p.state} (${p.zipCode.substr(0, 5)}) (${p.phoneNumber})`
p.muk_id = p.mukId
return p;
});
this.setState(Object.assign(this.state, { nearbyPlaces: nearByPlaces, providers: providers }));
}
});
} else {
var pyrmont = new google.maps.LatLng(lat, long);
var request = {
location: pyrmont,
radius: '500'
};
placeService.nearbySearch(request, this.callbackGeoSuccess);
}
}
setFullAddress = (name) => {
name.raw.address_components.forEach(a => {
a.types.forEach(c => {
switch (c) {
case "street_number":
name.street_number = a.short_name;
break;
case "route":
name.street = a.short_name;
break;
case "locality":
name.city = a.short_name;
break;
case "administrative_area_level_1":
name.state = a.short_name;
break;
case "country":
name.country = a.short_name;
break;
case "postal_code":
name.zipcode = a.short_name;
break;
}
}, this)
}, this);
name.address = `${name.street_number} ${name.street}, ${name.city}`
return name
}
handlePlaceChanged = (name) => {
var self = this;
const getFullObject = () => {
return new Promise((resolve, reject) => {
if (name.type !== 'google' && name.type !== 'provider') {
resolve(name);
}
if (self.state.locationType === 'provider') {
resolve(name);
} else {
if (name.raw && name.raw.address_components) {
name = self.setFullAddress(name);
resolve(name)
} else {
placeService.getDetails(name, (result, status) => {
if (status == google.maps.places.PlacesServiceStatus.OK) {
name.raw = result
name = self.setFullAddress(name);
resolve(name);
} else {
reject(result);
}
});
}
}
});
}
getFullObject().then(name => {
self.setState(Object.assign(self.state, { currentSelection: name }));
if (self.props.onPlaceChanged) {
self.props.onPlaceChanged(name);
}
self.locateNearby(name.lat, name.lng);
let buttonText = name.name;
if (buttonText.length > self.state.textSize) {
buttonText = buttonText.substring(0, self.state.textSize);
buttonText += '...';
}
self.setState(Object.assign(self.state, { buttonValue: buttonText, inputValue: name.address }));
}).catch(console.error);
}
callbackGeoSuccess = (results, status) => {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var nearByPlaces = [];
for (var i = 0; i < 5; i++) {
var place = results[i];
if (place) {
let clickResult = {
id: place.id,
placeId: place.place_id,
address: place.formatted_address ? place.formatted_address : (place.vicinity ? place.vicinity : place.name),
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng(),
name: place.name,
type: "google",
raw: place,
saved: false,
}
var listItem = (<ListItem primaryText={place.name} secondaryText={clickResult.address} key={place.name} rightIcon={<MapsLocalHospital />} onClick={(event) => this.handlePlaceChanged(clickResult)} />)
nearByPlaces.push(listItem);
}
}
this.setState(Object.assign(this.state, { nearbyPlaces: nearByPlaces }));
}
}
componentDidMount = () => {
const self = this;
var objConf = {
data: this.props.data,
open: false,
buttonValue: this.props.buttonvalue,
icon: this.props.icon,
textSize: this.props.textSize,
type: this.props.type,
locationType: this.props.locationType,
addLocation: false,
currentLocation: (<ListItem primaryText={this.state.currentLocationBaseName} leftIcon={<MapsNearMe />} onTouchTap={this.handleGetClosestPlace} />),
address: this.props.address
}
if (this.props.locationType == 'provider') {
objConf.currentLocationBaseName = "Nearest Provider"
objConf.currentLocation = (<ListItem primaryText={objConf.currentLocationBaseName} leftIcon={<MapsNearMe />} onTouchTap={this.handleGetClosestPlace} />)
}
if (!objConf.buttonValue || objConf.buttonValue === null) objConf.buttonValue = '';
if (objConf.textSize <= '0') {
objConf.textSize = '20';
}
if (objConf.address && objConf.address.id !== '' && objConf.address.name !== '') {
objConf.currentSelection = objConf.address
objConf.buttonValue = objConf.address.name
objConf.inputValue = objConf.address.name
}
if (!objConf.buttonValue) {
objConf.buttonValue = this.props.buttonvalue;
}
if (objConf.buttonValue && objConf.buttonValue.length > objConf.textSize) {
objConf.buttonValue = objConf.buttonValue.substring(0, objConf.textSize);
objConf.buttonValue += '...';
}
// if (self.state.user.useruuid === '') {
// if (objConf.data.user && objConf.data.user !== null && objConf.data.user.useruuid !== '') {
// let url = `/v1/nemt/users/member/` + objConf.data.user.useruuid
// instance.get(url).then(res => {
// let user = res.data;
// self.setState(Object.assign(self.state, { user: user }));
// }).catch(console.error);
// }
// }
this.setState(Object.assign(this.state, objConf));
if (this.state.type === "flat") {
let dt = $(ReactDOM.findDOMNode(this)).find('#' + this.state.data.id);
}
}
componentWillReceiveProps = (nextProps) => {
const self = this;
var objConf = {
data: nextProps.data,
buttonValue: nextProps.buttonvalue,
icon: nextProps.icon,
textSize: nextProps.textSize,
type: nextProps.type,
locationType: nextProps.locationType,
addLocation: false,
currentLocation: (<ListItem primaryText={this.state.currentLocationBaseName} leftIcon={<MapsNearMe />} onTouchTap={this.handleGetClosestPlace} />),
address: nextProps.address
}
if (!objConf.buttonValue || objConf.buttonValue === null) objConf.buttonValue = '';
if (objConf.textSize <= 0) {
objConf.textSize = 20;
}
if (objConf.address && objConf.address.id !== '' && objConf.address.name !== '') {
objConf.currentSelection = objConf.address
objConf.buttonValue = objConf.address.name
objConf.inputValue = objConf.address.name
}
if (!objConf.buttonValue) {
objConf.buttonValue = nextProps.buttonvalue;
}
if (objConf.buttonValue && objConf.buttonValue.length > objConf.textSize) {
objConf.buttonValue = objConf.buttonValue.substring(0, objConf.textSize);
objConf.buttonValue += '...';
}
// if (self.state.user.useruuid === '' || self.state.user.useruuid !== objConf.data.user.useruuid) {
// if (objConf.data.user && objConf.data.user !== null && objConf.data.user.useruuid !== '') {
// let url = `/v1/nemt/users/member/` + objConf.data.user.useruuid
// instance.get(url).then(res => {
// let user = res.data;
// self.setState(Object.assign(self.state, { user: user }));
// }).catch(console.error);
// }
// }
this.setState(Object.assign(this.state, objConf));
let $this = $(ReactDOM.findDOMNode(this));
const state = this
if (this.state.type === "flat") {
let dt = $(ReactDOM.findDOMNode(this)).find('#' + this.state.data.id);
}
}
handleOpen = (e) => {
if (!this.state.address || !this.state.address.id) {
this.handleCurrentLocation(e);
}
this.setState(Object.assign(this.state, { open: true }));
if (this.state.user.useruuid === '' || this.state.user.useruuid !== this.props.data.user.useruuid) {
if (this.props.data.user && this.props.data.user.useruuid !== undefined && this.props.data.user !== null && this.props.data.user.useruuid !== '') {
let url = `/v1/nemt/users/member/` + this.props.data.user.useruuid
Instance.getRawConn().get(url).then(res => {
let user = res.data;
this.setState(Object.assign(this.state, { user: user }));
}).catch(console.error);
}
}
};
handleCancel = () => {
this.setState(Object.assign(this.state, { open: false }));
};
handleClose = () => {
if (this.props.onPlaceChanged) {
this.props.onPlaceChanged(this.state.currentSelection);
}
let buttonText = this.state.currentSelection.name;
if (buttonText.length > this.state.textSize) {
buttonText = buttonText.substring(0, this.state.textSize);
buttonText += '...';
}
this.setState(Object.assign(this.state, { open: false, buttonValue: buttonText }));
};
noPosition = () => {
this.locateNearby(41.886406, -87.624225);
}
updateLocationValue(searchText, dtSource, params) {
let self = this;
self.setState(Object.assign(self.state, { locationValue: searchText }));
if (searchText.length >= 3) {
let lat = 0;
let long = 0;
if (this.state.centerLocation.lat !== 0 && this.state.centerLocation.long !== 0) {
lat = this.state.centerLocation.lat;
long = this.state.centerLocation.long;
} else {
const geo = GeolocationService.GetCoordinates();
lat = geo.lat;
long = geo.long;
}
if (lat === 0 || long === 0) {
lat = 41.886406;
long = -87.624225;
}
var location = new google.maps.LatLng(lat, long);
var request = {
location: location,
radius: '500',
input: searchText,
componentRestrictions: { country: 'us' },
};
const callback = (results, status) => {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var googlePlaces = results.map(place => {
place.providerText = place.description;
place.muk_id = place.id;
place.saved = false;
return place;
});
self.setState(Object.assign(self.state, { locations: googlePlaces }));
}
}
service.getPlacePredictions(request, callback);
}
}
updateTextSearch(searchText, dtSource, params) {
let self = this;
self.setState(Object.assign(self.state, { inputValue: searchText }));
if (searchText.length >= 3) {
let lat = 0;
let long = 0;
if (this.state.centerLocation.lat !== 0 && this.state.centerLocation.long !== 0) {
lat = this.state.centerLocation.lat;
long = this.state.centerLocation.long;
} else {
const geo = GeolocationService.GetCoordinates();
lat = geo.lat;
long = geo.long;
}
if (lat === 0 || long === 0) {
lat = 41.886406;
long = -87.624225;
}
if (self.state.locationType === 'provider') {
let url = `/v1/nemt/provider?lat=${lat}&long=${long}&limit=50&name=${searchText}&sortby=distance`
Instance.getRawConn().get(encodeURI(url)).then(res => {
if (res.data.resultStatus === 'SUCCESS') {
let providers = res.data.providers.map(p => {
const streetNumber = p.streetName_1.split(' ')[0]
p.providerText = `${p.providerName} - ${p.streetName_1}, ${p.cityName}, ${p.state} (${p.zipCode.substr(0, 5)}) (${p.phoneNumber})`
p.muk_id = p.mukId
let clickResult = {
id: p.mukId,
muk_id: p.mukId,
address: `${p.streetName_1}, ${p.cityName}, ${p.state} (${p.zipCode.substr(0, 5)})`,
lat: parseFloat(p.latitude),
lng: parseFloat(p.longitude),
name: p.providerName,
type: 'provider',
raw: p,
street_number: streetNumber,
street: p.streetName_1.replace(streetNumber, '').trim(),
city: p.cityName,
state: p.state,
zipcode: p.zipCode.substr(0, 5),
country: p.country,
saved: false,
}
if (p.fivePartKeyGroups.length > 0) {
clickResult.npi = p.fivePartKeyGroups[0].providerNum;
}
return p;
});
this.setState(Object.assign(this.state, { providers: providers }));
dtSource = self.state.providers;
}
});
} else {
var location = new google.maps.LatLng(lat, long);
var request = {
location: location,
radius: '500',
input: searchText,
componentRestrictions: { country: 'us' },
};
const callback = (results, status) => {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var googlePlaces = results.map(place => {
place.providerText = place.description;
place.muk_id = place.id;
place.saved = false;
return place;
});
self.setState(Object.assign(self.state, { providers: googlePlaces }));
}
}
service.getPlacePredictions(request, callback);
}
}
}
addCustomLabel(e) {
this.setState(Object.assign(this.state, { addLocationCustomLabel: e.target.value }));
}
searchAddress(e) {
let providerSearch = e.target.value;
this.setState(Object.assign(this.state, { addLocationTextValue: providerSearch }));
if (providerSearch.length >= 3) {
let lat = 0;
let long = 0;
if (this.state.centerLocation.lat !== 0 && this.state.centerLocation.long !== 0) {
lat = this.state.centerLocation.lat;
long = this.state.centerLocation.long;
} else {
const geo = GeolocationService.GetCoordinates();
lat = geo.lat;
long = geo.long;
}
if (lat === 0 || long === 0) {
lat = 41.886406;
long = -87.624225;
}
if (this.state.locationType === 'provider') {
let url = `/v1/nemt/provider?lat=${lat}&long=${long}&limit=50&name=${providerSearch}&sortby=distance`
Instance.getRawConn().get(encodeURI(url)).then(res => {
if (res.data.resultStatus === 'SUCCESS') {
let providers = res.data.providers.map(p => {
const streetNumber = p.streetName_1.split(' ')[0]
p.providerText = `${p.providerName} - ${p.streetName_1}, ${p.cityName}, ${p.state} (${p.zipCode.substr(0, 5)}) (${p.phoneNumber})`
p.muk_id = p.mukId
let clickResult = {
id: p.mukId,
muk_id: p.mukId,
address: `${p.streetName_1}, ${p.cityName}, ${p.state} (${p.zipCode.substr(0, 5)})`,
lat: parseFloat(p.latitude),
lng: parseFloat(p.longitude),
name: p.providerName,
type: 'provider',
raw: p,
street_number: streetNumber,
street: p.streetName_1.replace(streetNumber, '').trim(),
city: p.cityName,
state: p.state,
zipcode: p.zipCode.substr(0, 5),
country: p.country,
saved: false,
}
if (p.fivePartKeyGroups.length > 0) {
clickResult.npi = p.fivePartKeyGroups[0].providerNum;
}
var listItem = (<ListItem primaryText={p.providerName} secondaryText={clickResult.address} key={p.mukId} value={p.mukId} rightIcon={<MapsLocalHospital />} onClick={(event) => this.handleSaveAddress(clickResult)} />)
return listItem;
});
this.setState(Object.assign(this.state, { searchAddresses: providers }));
}
});
} else {
var location = new google.maps.LatLng(lat, long);
let autoComplenteRequest = {
location: location,
input: providerSearch,
radius: '500',
types: ['address', 'geocode'],
componentRestrictions: { country: 'us' }
};
autoComplete.getQueryPredictions(autoComplenteRequest, (results, status) => {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var googlePlaces = results.map(place => {
place.text = place.structured_formatting.main_text;
let clickResult = {
id: place.id,
address: place.description,
placeId: place.place_id,
name: place.structured_formatting.main_text,
type: "google",
raw: place,
street_number: '',
street: '',
city: '',
state: '',
zipcode: '',
country: '',
saved: false,
}
if (place.address_components) {
place.address_components.forEach(a => {
a.types.forEach(c => {
switch (c) {
case "street_number":
clickResult.street_number = a.short_name;
break;
case "route":
clickResult.street = a.short_name;
break;
case "locality":
clickResult.city = a.short_name;
break;
case "administrative_area_level_1":
clickResult.state = a.short_name;
break;
case "country":
clickResult.country = a.short_name;
break;
case "postal_code":
clickResult.zipcode = a.short_name;
break;
}
}, this)
}, this);
}
//clickResult.address = `${clickResult.street_number} ${clickResult.street}, ${clickResult.city}, ${clickResult.state} ${clickResult.zipcode}`
var listItem = (<ListItem value={clickResult.id} primaryText={clickResult.name} secondaryText={clickResult.address} key={clickResult.id} rightIcon={<MapsLocalHospital />} onClick={(event) => this.handleSaveAddress(clickResult, this)} />)
return listItem
});
this.setState(Object.assign(this.state, { searchAddresses: googlePlaces }));
}
});
}
}
}
handleSaveAddress = (address, state) => {
if (this.state.locationType === 'provider') {
state.setState(Object.assign(state.state, { addLocationSelected: address, addLocationTextValue: address.name, addLocationID: address.id }));
} else {
placeService.getDetails(address, (result, status) => {
if (status == google.maps.places.PlacesServiceStatus.OK) {
let clickResult = {
id: result.place_id,
placeId: result.place_id,
address: result.formatted_address ? result.formatted_address : result.vicinity,
lat: result.geometry.location.lat(),
lng: result.geometry.location.lng(),
name: result.name,
type: "google",
raw: result,
street_number: '',
street: '',
city: '',
state: '',
zipcode: '',
country: '',
saved: false,
}
result.address_components.forEach(a => {
a.types.forEach(c => {
switch (c) {
case "street_number":
clickResult.street_number = a.short_name;
break;
case "route":
clickResult.street = a.short_name;
break;
case "locality":
clickResult.city = a.short_name;
break;
case "administrative_area_level_1":
clickResult.state = a.short_name;
break;
case "country":
clickResult.country = a.short_name;
break;
case "postal_code":
clickResult.zipcode = a.short_name;
break;
}
}, this)
}, this);
clickResult.address = `${clickResult.street_number} ${clickResult.street}, ${clickResult.city}`
state.setState(Object.assign(state.state, { addLocationSelected: clickResult, addLocationTextValue: clickResult.name, addLocationID: clickResult.id }));
}
});
}
}
handleAutoCompleteLocation = (location) => {
const self = this;
placeService.getDetails(location, (result, status) => {
if (status == google.maps.places.PlacesServiceStatus.OK) {
let clickResult = {
id: result.place_id,
placeId: result.place_id,
address: result.formatted_address ? result.formatted_address : result.vicinity,
lat: result.geometry.location.lat(),
lng: result.geometry.location.lng(),
name: result.name,
type: "google",
raw: result,
street_number: '',
street: '',
city: '',
state: '',
zipcode: '',
country: '',
saved: false,
}
result.address_components.forEach(a => {
a.types.forEach(c => {
switch (c) {
case "street_number":
clickResult.street_number = a.short_name;
break;
case "route":
clickResult.street = a.short_name;
break;
case "locality":
clickResult.city = a.short_name;
break;
case "administrative_area_level_1":
clickResult.state = a.short_name;
break;
case "country":
clickResult.country = a.short_name;
break;
case "postal_code":
clickResult.zipcode = a.short_name;
break;
}
}, this)
}, this);
clickResult.address = `${clickResult.street_number} ${clickResult.street}, ${clickResult.city}`
const centerLocation = {
lat: clickResult.lat,
long: clickResult.lng,
name: clickResult.name,
address: clickResult.address
}
self.setState(Object.assign(self.state, { centerLocation: centerLocation }));
self.locateNearby(clickResult.lat, clickResult.lng);
}
});
}
handleAutocomplete = (provider) => {
const sendInfo = (clickResult) => {
this.setState(Object.assign(this.state, { currentSelection: clickResult }));
this.locateNearby(clickResult.lat, clickResult.lng);
if (this.props.onPlaceChanged) {
this.props.onPlaceChanged(clickResult);
}
//state.handleClose();
let buttonText = clickResult.name;
if (buttonText.length > this.state.textSize) {
buttonText = buttonText.substring(0, this.state.textSize);
buttonText += '...';
}
this.setState(Object.assign(this.state, { buttonValue: buttonText, inputValue: clickResult.name }));
}
if (this.state.locationType === "provider") {
const p = provider;
const streetNumber = p.streetName_1.split(' ')[0]
p.providerText = `${p.providerName} - ${p.streetName_1}, ${p.cityName}, ${p.state} (${p.zipCode.substr(0, 5)}) (${p.phoneNumber})`
p.muk_id = p.mukId
let clickResult = {
id: p.mukId,
muk_id: p.mukId,
address: `${p.streetName_1}, ${p.cityName}, ${p.state} (${p.zipCode.substr(0, 5)})`,
lat: parseFloat(p.latitude),
lng: parseFloat(p.longitude),
name: p.providerName,
type: 'provider',
raw: p,
street_number: streetNumber,
street: p.streetName_1.replace(streetNumber, '').trim(),
city: p.cityName,
state: p.state,
zipcode: p.zipCode.substr(0, 5),
country: p.country,
saved: false,
}
if (p.fivePartKeyGroups.length > 0) {
clickResult.npi = p.fivePartKeyGroups[0].providerNum;
}
sendInfo(clickResult);
} else {
placeService.getDetails(provider, (result, status) => {
if (status == google.maps.places.PlacesServiceStatus.OK) {
let clickResult = {
id: result.place_id,
placeId: result.place_id,
address: result.formatted_address ? result.formatted_address : result.vicinity,
lat: result.geometry.location.lat(),
lng: result.geometry.location.lng(),
name: result.name,
type: "google",
raw: result,
street_number: '',
street: '',
city: '',
state: '',
zipcode: '',
country: '',
saved: false,
}
result.address_components.forEach(a => {
a.types.forEach(c => {
switch (c) {
case "street_number":
clickResult.street_number = a.short_name;
break;
case "route":
clickResult.street = a.short_name;
break;
case "locality":
clickResult.city = a.short_name;
break;
case "administrative_area_level_1":
clickResult.state = a.short_name;
break;
case "country":
clickResult.country = a.short_name;
break;
case "postal_code":
clickResult.zipcode = a.short_name;
break;
}
}, this)
}, this);
clickResult.address = `${clickResult.street_number} ${clickResult.street}, ${clickResult.city}`
sendInfo(clickResult);
}
});
}
}
filterResults(searchText, key) {
if (searchText && key) {
return (key.toLowerCase().indexOf(searchText.toLowerCase()) !== -1)
} else return false;
}
updateLocation() {
return new Promise((resolve, reject) => {
try {
const geo = GeolocationService.GetCoordinates();
const position = {
coords: {
latitude: geo.lat,
longitude: geo.long,
},
}
this.geoSuccess(position);
resolve(position);
} catch (err) {
reject(err);
}
});
}
handleGetClosestPlace(e) {
const self = this;
self.updateLocation().then(p => {
self.handleCurrentLocation(e);
}).catch(console.error);
}
handleCurrentLocation(e) {
const self = this;
let lat = 0;
let long = 0;
if (this.state.centerLocation.lat !== 0 && this.state.centerLocation.long !== 0) {
lat = this.state.centerLocation.lat;
long = this.state.centerLocation.long;
} else {
const geo = GeolocationService.GetCoordinates();
lat = geo.lat;
long = geo.long;
}
if (lat === 0 || long === 0) {
lat = 41.886406;
long = -87.624225;
}
if (self.state.locationType === 'provider') {
let url = `/v1/nemt/provider?lat=${lat}&long=${long}&limit=50&sortby=distance`
Instance.getRawConn().get(url).then(res => {
let listItem = (<ListItem primaryText="No location found" key="-1" leftIcon={<MapsNearMe />} onClick={self.handleCurrentLocation} />)
if (res.data.resultStatus === 'SUCCESS') {
const p = res.data.providers[0];
const streetNumber = p.streetName_1.split(' ')[0]
let clickResult = {
id: p.mukId,
address: `${p.streetName_1}, ${p.cityName}, ${p.state} (${p.zipCode.substr(0, 5)})`,
lat: parseFloat(p.latitude),
lng: parseFloat(p.longitude),
name: p.providerName,
type: 'provider',
raw: p,
street_number: streetNumber,
street: p.streetName_1.replace(streetNumber, '').trim(),
city: p.cityName,
state: p.state,
zipcode: p.zipCode.substr(0, 5),
country: p.country,
saved: false,
}
if (p.fivePartKeyGroups.length > 0) {
clickResult.npi = p.fivePartKeyGroups[0].providerNum;
}
self.handlePlaceChanged(clickResult)
}
}).catch(console.error);
} else {
var location = new google.maps.LatLng(lat, long);
var geocoder = new google.maps.Geocoder;
var request = {
location: location,
};
const callback = (results, status) => {
if (status == google.maps.places.PlacesServiceStatus.OK) {
let listItem = (<ListItem primaryText="No location found" key="-1" leftIcon={<MapsNearMe />} onClick={self.handleCurrentLocation} />)
if (results.length > 0) {
const result = results[0];
let clickResult = {
placeId: result.place_id,
id: result.id,
address: result.formatted_address ? result.formatted_address : result.vicinity,
lat: result.geometry.location.lat(),
lng: result.geometry.location.lng(),
name: result.formatted_address ? result.formatted_address : result.vicinity,
type: "google",
raw: result,
street_number: '',
street: '',
city: '',
state: '',
zipcode: '',
country: '',
saved: false,
}
result.address_components.forEach(a => {
a.types.forEach(c => {
switch (c) {
case "street_number":
clickResult.street_number = a.short_name;
break;
case "route":
clickResult.street = a.short_name;
break;
case "locality":
clickResult.city = a.short_name;
break;
case "administrative_area_level_1":
clickResult.state = a.short_name;
break;
case "country":
clickResult.country = a.short_name;
break;
case "postal_code":
clickResult.zipcode = a.short_name;
break;
}
}, this)
}, this);
clickResult.address = `${clickResult.street_number} ${clickResult.street}, ${clickResult.city}`
self.handlePlaceChanged(clickResult);
//listItem = (<ListItem value={clickResult.id} primaryText={clickResult.address} secondaryText={clickResult.address} key={clickResult.id} leftIcon={<MapsNearMe />} onClick={(event) => self.handlePlaceChanged(clickResult)} />)
}
//self.setState(Object.assign(self.state, { currentLocation: listItem }));
}
}
geocoder.geocode(request, callback);
}
// }).catch(console.error);
}
handleAddAddress = (e, name) => {
e.preventDefault();
let text = '';
switch (name) {
case 'pcp':
text = "Enter Member's PCP";
break;
case 'custom':
text = 'Enter Custom Location';
break;
case 'home':
text = "Enter Member's Home Address";
break;
case 'work':
text = "Enter Member's Work Address";
break;
default:
text = 'Enter Custom Address type for Member';
break;
}
this.setState(Object.assign(this.state, {
addLocation: true,
addLocationText: text,
searchAddresses: [],
addLocationType: name,
addLocationSelected: {},
addLocationTextValue: '',
addLocationID: '',
}));
}
handleBack = () => {
this.setState(Object.assign(this.state, { addLocation: false, addLocationSelected: {} }));
}
handleSave = () => {
let self = this;
let address = this.state.addLocationSelected;
address.address_type = this.state.addLocationType;
address.user = this.state.data.user;
address.address = `${address.street_number} ${address.street}, ${address.city}`
if (this.state.addLocationCustomLabel !== '' && this.state.addLocationCustomLabel !== null && this.state.addLocationCustomLabel !== undefined) {
address.name = this.state.addLocationCustomLabel;
}
if (address.user && address.user !== null) {
let url = `/v1/nemt/users/member/${address.user.useruuid}/address`
Instance.getRawConn().post(url, address).then(res => {
this.setState(Object.assign(this.state, { addLocation: false, addLocationSelected: {}, user: res.data.user, addLocationCustomLabel: '' }));
}).catch(console.error);
}
}
render() {
const state = this;
let actions = [
<FlatButton
label="Cancel"
primary={true}
onClick={this.handleCancel}
/>,
<FlatButton
label="Submit"
primary={true}
keyboardFocused={true}
onClick={this.handleClose}
/>,
];
let button = (
<RaisedButton
label={this.state.buttonValue}
onClick={this.handleOpen}
style={buttonStyleWhite}
labelStyle={buttonStyleWhite}
buttonStyle={buttonStyleWhite}
icon={this.state.icon}
fullWidth={true}
/>);
if (this.state.type === 'secondary') {
button = (
<RaisedButton
label={this.state.buttonValue}
onClick={this.handleOpen}
secondary
style={buttonStyle}
icon={this.state.icon}
fullWidth={true}
/>);
} else if (this.state.type === 'primary') {
button = (
<RaisedButton
label={this.state.buttonValue}
onClick={this.handleOpen}
primary
style={buttonStyle}
icon={this.state.icon}
fullWidth={true}
/>);
} else if (this.state.type === 'flat') {
button = (
<TextField
id="text-field-controlled"
// hintText={this.state.buttonValue}
// floatingLabelText={this.state.buttonValue}
value={this.state.buttonValue}
style={{ height: '30px', width: '130px', fontSize: '12px' }}
onClick={(e) => this.handleOpen(e)} id={this.state.data.id}
/>
// <a href={"/#/app/table/rides"} onClick={(e) => this.handleOpen(e)} id={this.state.data.id} className={`linkButton ${this.state.data.id}`} >{this.state.buttonValue}</a>
)
}
let customListStyle = {
overflowScrolling: 'touch',
WebkitOverflowScrolling: 'touch',
}
let homeAddress = (<ListItem primaryText="Add Home" rightIcon={<ArrowDropRight />} leftIcon={<ActionHome />} onClick={(e) => this.handleAddAddress(e, 'home')} />)
let workAddress = (<ListItem primaryText="Add Work" rightIcon={<ArrowDropRight />} leftIcon={<ActionWork />} onClick={(e) => this.handleAddAddress(e, 'work')} />)
let customPlaceAddresses = [];
let pcpAddress = (<ListItem primaryText="Add PCP" rightIcon={<ArrowDropRight />} leftIcon={<ActionHome />} onClick={(e) => this.handleAddAddress(e, 'pcp')} />);
let customAddresses = [];
if (this.state.user && this.state.user !== null && this.state.user.addresses && this.state.user.addresses !== null) {
this.state.user.addresses.forEach(a => {
let clickResult = {
id: a.address_uuid,
address: a.address,
lat: a.lat,
lng: a.lng,
name: a.name,
type: a.address_type,
saved: true,
}
switch (a.address_type) {
case 'home':
clickResult.name = a.address_type_name;
homeAddress = (<ListItem primaryText={"HOME: " + a.name} secondaryText={clickResult.address} key={a.id} leftIcon={<ActionHome />} onClick={(event) => this.handlePlaceChanged(clickResult)} />);
break;
case 'work':
clickResult.name = a.address_type_name;
workAddress = (<ListItem primaryText={"WORK: " + a.name} secondaryText={clickResult.address} key={a.id} leftIcon={<ActionWork />} onClick={(event) => this.handlePlaceChanged(clickResult)} />);
break;
case 'customplace':
customPlaceAddresses.push(<ListItem primaryText={"LOCATION: " + a.name} secondaryText={clickResult.address} key={a.id} leftIcon={<MapsLocalHospital />} onClick={(event) => this.handlePlaceChanged(clickResult)} />);
break;
case 'pcp':
clickResult.name = a.address_type_name;
pcpAddress = (<ListItem primaryText={"PCP: " + a.name} secondaryText={clickResult.address} key={a.id} leftIcon={<ActionHome />} onClick={(event) => this.handlePlaceChanged(clickResult)} />);
break;
default:
customAddresses.push(<ListItem primaryText={"LOCATION: " + a.name} secondaryText={clickResult.address} key={a.id} leftIcon={<MapsLocalHospital />} onClick={(event) => this.handlePlaceChanged(clickResult)} />);
break;
}
}, this);
}
let locationType = (
<List style={customListStyle}>
{homeAddress}
{workAddress}
{customPlaceAddresses}
<ListItem primaryText="Add Custom Shortcut" rightIcon={<ArrowDropRight />} leftIcon={<MapsLocalHospital />} onClick={(e) => this.handleAddAddress(e, 'customplace')} />
</List>);
let autosuggest;
let addAddress = (<TextField onChange={(e) => this.searchAddress(e)} fullWidth={true} floatingLabelText={this.state.addLocationText} value={this.state.addLocationTextValue} />)
let customLabel;
if (this.state.addLocation && (this.state.addLocationType === 'custom' || this.state.addLocationType === 'customplace')) {
customLabel = (<TextField onChange={(e) => this.addCustomLabel(e)} fullWidth={true} floatingLabelText={"Choose a short name for this address"} value={this.state.addLocationCustomLabel} />);
}
if (this.state.locationType === 'provider') {
locationType = (
<List style={customListStyle}>
{pcpAddress}
{customAddresses}
<ListItem primaryText="Add Custom Shortcut" rightIcon={<ArrowDropRight />} leftIcon={<MapsLocalHospital />} onClick={(e) => this.handleAddAddress(e, 'custom')} />
</List>)
autosuggest = (<AutoComplete dataSourceConfig={datasourceConfig} dataSource={this.state.providers} filter={this.filterResults} maxSearchResults={5} onUpdateInput={this.updateTextSearch} fullWidth={true} floatingLabelText="Enter the Provider's name or address" onNewRequest={this.handleAutocomplete} searchText={this.state.inputValue} />)
} else {
autosuggest = (<AutoComplete dataSourceConfig={datasourceConfig} dataSource={this.state.providers} filter={this.filterResults} maxSearchResults={5} onUpdateInput={this.updateTextSearch} fullWidth={true} floatingLabelText="Enter the Member's address or a nearby intersection or public place" onNewRequest={this.handleAutocomplete} searchText={this.state.inputValue} />)
}
let listItem = (
<div className="" id="container">
<AutoComplete dataSourceConfig={datasourceConfig} dataSource={this.state.locations} filter={this.filterResults} maxSearchResults={5} onUpdateInput={this.updateLocationValue} fullWidth={true} floatingLabelText="Center Location" onNewRequest={this.handleAutoCompleteLocation} searchText={this.state.locationValue} />
{autosuggest}
<List>
{this.state.currentLocation}
</List>
<Divider />
{locationType}
<Divider />
<List style={customListStyle}>
{this.state.nearbyPlaces}
</List>
</div >
)
if (this.state.addLocation) {
listItem = (
<div className="" id="container">
{addAddress}
{customLabel}
<SelectableList defaultValue={this.state.addLocationID}>
{this.state.searchAddresses}
</SelectableList>
</div >)
actions = [
<FlatButton
label="Back"
primary={true}
onClick={this.handleBack}
/>,
<FlatButton
label="Save"
primary={true}
keyboardFocused={true}
onClick={this.handleSave}
/>,
];
}
return (
<div style={buttonStyleWhite} >
{button}
<Dialog
contentStyle={customContentStyle}
title={this.props.title}
actions={actions}
modal={true}
open={this.state.open}
onRequestClose={this.handleClose}
autoScrollBodyContent={true}
>
{listItem}
</Dialog>
</div>
);
}
}