2019-06-16 13:09:54 +00:00
/ * *
* @ format
* @ flow
* /
2020-03-20 18:28:22 +00:00
import React , { Component } from 'react' ;
2019-06-16 13:09:54 +00:00
import {
2020-03-20 18:28:22 +00:00
Platform , StyleSheet , Text ,
TouchableWithoutFeedback , View , TextInput ,
Animated , Dimensions , Image , PermissionsAndroid ,
AsyncStorage ,
StatusBar , TouchableNativeFeedback , TouchableOpacity , BackHandler , Alert , ProgressBarAndroid
, FlatList
2019-06-16 13:09:54 +00:00
} from 'react-native' ;
import IMap from './IMap'
import ActionButton from 'react-native-action-button' ;
2020-03-20 18:28:22 +00:00
import { CardView } from "react-native-cardview"
import { responsiveHeight , responsiveWidth , } from 'react-native-responsive-dimensions' ;
2019-06-16 13:09:54 +00:00
import { material } from 'react-native-typography' ;
2020-03-20 18:28:22 +00:00
import { getMakersFrom , loadGroupeAgent , getPositionInformation } from './../../webservice/MapService' ;
import { readUser , getCountryNetwork , getPasObject } from './../../webservice/AuthApi'
2019-06-16 13:09:54 +00:00
import BaseScreen from './../BaseScreen'
import isEqual from 'lodash/isEqual' ;
import Button from 'apsl-react-native-button'
import I18n from 'react-native-i18n'
2020-04-06 09:02:03 +00:00
import { IlinkEmitter } from "./../../utils/events"
2019-06-16 13:09:54 +00:00
import Configuration from "../../webservice/persistences/Configuration" ;
2020-03-20 18:28:22 +00:00
import { MaterialDialog } from "react-native-material-dialog" ;
import { ProgressDialog , Dialog } from 'react-native-simple-dialogs' ;
const countries = require ( "./../../utils/country_code.json" )
2019-06-16 13:09:54 +00:00
import SnapSlider from 'react-native-snap-slider'
import call from "react-native-phone-call" ;
import Icon from 'react-native-vector-icons/MaterialIcons' ;
import Geolocation from 'react-native-geolocation-service' ;
2020-03-20 18:28:22 +00:00
let geolib = require ( "geolib" )
2019-06-16 13:09:54 +00:00
require ( './../../utils/Translations' )
import InterticielAds from './../ads/InterticielAds'
import SnackBar from 'react-native-snackbar-component'
2020-03-20 18:28:22 +00:00
const GEOLOCATION _OPTIONS = { enableHighAccuracy : true , timeout : 20000 , maximumAge : 500 , useSignificantChanges : false , distanceFilter : 0 } ;
const radioOptions = [ { label : "mon Reseau" , value : 0 } , { label : "Tout" , value : 1 } ]
const theme = require ( './../../utils/theme.json' ) ;
const route = require ( './../../route.json' ) ;
import { FAB , Card , Surface } from 'react-native-paper'
2019-06-16 13:09:54 +00:00
import BottomSheet from 'reanimated-bottom-sheet'
const { width : viewportWidth , height : viewportHeight } = Dimensions . get ( 'window' ) ;
import MarkerManager from './../../webservice/persistences/MarkerManager'
2020-04-18 19:59:05 +00:00
import { bindActionCreators } from 'redux' ;
import getAuthApiKey from '../../webservice/AuthKeyApi' ;
import { connect } from 'react-redux' ;
2020-04-20 10:43:01 +00:00
import getWalletActivated from '../../webservice/WalletApi' ;
2020-08-11 09:42:31 +00:00
import { saveOnesignalIdsAction } from '../../webservice/OnesignalApi' ;
2020-08-13 07:23:23 +00:00
import OneSignal from 'react-native-onesignal' ;
2020-04-20 10:43:01 +00:00
2020-04-18 19:59:05 +00:00
2020-03-20 18:28:22 +00:00
const slideHeight = responsiveHeight ( 30 ) > 270 ? 270 : responsiveHeight ( 30 )
2019-06-16 13:09:54 +00:00
//var Fabric = require('react-native-fabric');
//var { Crashlytics } = Fabric
const defaultProps = {
2020-03-20 18:28:22 +00:00
enableHack : false ,
geolocationOptions : GEOLOCATION _OPTIONS ,
2019-06-16 13:09:54 +00:00
} ;
2020-03-20 18:28:22 +00:00
class Home extends BaseScreen {
static navigationOptions = ( { navigation } ) => {
return {
headerMode : "none" ,
headerStyle : {
display : 'none'
} ,
header : null ,
drawerLabel : navigation . getParam ( "name" , I18n . t ( 'MAP' ) ) ,
drawerIcon : ( { tintColor } ) => (
< Icon
name = { 'map' }
size = { 24 }
color = { tintColor }
/ >
) ,
}
} ;
static defaultProps = {
draggableRange : {
top : responsiveHeight ( 30 ) ,
bottom : 0
} ,
panel : null
} ;
_draggedValue = new Animated . Value ( 0 )
renderIcon = icon => ( { isActive } ) => (
< Icon size = { 24 } color = "white" name = { icon } / >
)
onLoadMore ( ) {
2020-05-19 07:57:56 +00:00
const { user , prevRegion , boundarie } = this . state ;
2020-03-20 18:28:22 +00:00
if ( user . category === undefined || user . category === null ) {
2020-05-19 07:57:56 +00:00
if ( this . promiseRegion ) this . promiseRegion . done ( ) ;
2020-03-20 18:28:22 +00:00
this . promiseRegion = new Promise ( async ( resolve , reject ) => {
this . setState ( { isNeedLoadMore : false , isLoadingMap : true } )
const camera = await this . mapRef . getCamera ( )
const zoom = camera . zoom - 10
2020-05-30 21:58:22 +00:00
let res = [ ] ;
2020-05-19 07:57:56 +00:00
2020-03-20 18:28:22 +00:00
if ( this . state . filternetworkTemp !== undefined ) {
let net = this . state . filternetworkTemp . id
res = this . state . networks . filter ( function ( item ) {
return item . id === net
2020-05-19 07:57:56 +00:00
} ) ;
2020-03-20 18:28:22 +00:00
}
2020-05-19 07:57:56 +00:00
2020-03-20 18:28:22 +00:00
if ( res . length > 0 ) {
2020-05-30 21:58:22 +00:00
this . setState ( { isLoadingMap : false } )
2020-03-20 18:28:22 +00:00
let reseau = res [ 0 ] ;
const pos = { longitude : user . longitude , latitude : user . latitude }
try {
//let data = await loadMarkers(pos, reseau, 5000, this.state.page)
2020-05-19 07:57:56 +00:00
let data = await this . loadingMarkers ( this . state . myPosition , this . state . filternetwork , this . filterOptions [ this . state . increasePas ] . value ) ;
2020-03-20 18:28:22 +00:00
this . treatNewData ( pos , data , false )
} catch ( e ) {
this . setState ( { isNeedLoadMore : false , isLoadingMap : false } )
}
}
else {
this . setState ( { isNeedLoadMore : true , isLoadingMap : false } )
}
if ( this . map ) this . map . focusToUser ( )
resolve ( )
} )
}
}
openDrawer = ( ) => {
this . props . navigation . openDrawer ( )
}
onslidingEvent ( event ) {
this . setState ( {
maxHeightSliding : event . nativeEvent . layout . height
} ) ;
}
navigationEventListener
_retrieveData = async ( ) => {
try {
const value = await AsyncStorage . getItem ( 'position' ) ;
if ( value !== null ) {
let re = JSON . parse ( value )
re . longitudeDelta = 0.04
re . latitudeDelta = 0.01
const pos = JSON . parse ( value )
this . setState ( { region : re , oldPosition : pos } )
}
} catch ( error ) {
console . warn ( error )
}
} ;
2020-08-11 09:42:31 +00:00
_getOneSignalIds = ( ) => {
return new Promise ( async ( resolve , reject ) => {
try {
const getElement = await AsyncStorage . getItem ( '@config:onesignalIds' ) ;
resolve ( getElement ) ;
} catch ( error ) {
reject ( error ) ;
}
} ) ;
}
2020-03-20 18:28:22 +00:00
componentDidMount ( ) {
2020-04-18 23:19:11 +00:00
/ * A s y n c S t o r a g e . g e t A l l K e y s ( ( e r r , k e y s ) = > {
AsyncStorage . multiGet ( keys , ( err , stores ) => {
stores . map ( ( result , i , store ) => {
let key = store [ i ] [ 0 ] ;
let value = store [ i ] [ 1 ] ;
console . log ( 'STORAGE VALUE ' , ` key: ${ key } | value: ${ value } ` ) ;
} ) ;
} ) ;
} ) ; * /
2020-04-18 19:59:05 +00:00
2020-08-11 09:42:31 +00:00
readUser ( ) . then ( async ( user ) => {
2020-06-02 09:05:50 +00:00
console . log ( "USER" , user ) ;
2020-04-20 10:43:01 +00:00
if ( user ) {
if ( user !== undefined ) {
if ( user . phone !== undefined )
this . props . getAuthApiKey ( user . phone ) ;
2020-08-11 09:42:31 +00:00
const onesignalIds = await this . _getOneSignalIds ( ) ;
if ( onesignalIds ) {
console . log ( "ONESIGNAL" , onesignalIds ) ;
if ( user !== undefined ) {
if ( user . category !== undefined ) {
if ( user . category === "geolocated" ) {
this . props . saveOnesignalIdsAction ( false , {
code _membre : user . user _code ,
player _id : onesignalIds
} ) ;
}
} else {
this . props . saveOnesignalIdsAction ( true , {
user _code : user . user _code ,
player _id : onesignalIds
} ) ;
}
} //this.props.saveOnesignalIdsAction()
}
2020-04-20 10:43:01 +00:00
//this.props.getWalletActivated(user.agentId);
}
}
} ) ;
2020-03-20 18:28:22 +00:00
this . mounted = true ;
this . configuration = new Configuration ( )
const { navigation } = this . props ;
this . markerManager = new MarkerManager ( )
this . configuration . getCurrentPubValue ( ) . then ( ( value ) => {
try {
const val = parseInt ( value )
this . setState ( { isPubShow : val } ) ;
} catch ( e ) {
}
} )
this . focusListener = navigation . addListener ( "didFocus" , ( ) => {
this . configuration . getCurrentPasValue ( ) . then ( ( value ) => {
2019-06-16 13:09:54 +00:00
try {
2020-03-20 18:28:22 +00:00
this . setState ( { pas : parseInt ( value ) } ) ;
2019-06-16 13:09:54 +00:00
} catch ( e ) {
2020-03-20 18:28:22 +00:00
2019-06-16 13:09:54 +00:00
}
2020-03-20 18:28:22 +00:00
} )
2020-03-29 08:23:08 +00:00
this . componentDidAppear ( ) ;
2020-03-20 18:28:22 +00:00
} ) ;
this . blurListener = navigation . addListener ( "didBlur" , ( payload ) => {
this . componentDidDisappear ( )
} )
this . _retrieveData ( )
2020-03-29 08:23:08 +00:00
2020-03-20 18:28:22 +00:00
//this.toggleSlidingUp(false)
if ( this . props . coordinate ) return ;
}
async requestCameraPermission ( ) {
try {
const granted = await PermissionsAndroid . request (
PermissionsAndroid . PERMISSIONS . ACCESS _FINE _LOCATION ,
{
'title' : 'Cool Photo App Camera Permission' ,
'message' : 'Cool Photo App needs access to your camera ' +
'so you can take awesome pictures.'
2019-06-16 13:09:54 +00:00
}
2020-03-20 18:28:22 +00:00
)
if ( granted === PermissionsAndroid . RESULTS . GRANTED ) {
readUser ( ) . then ( ( user ) => {
if ( user ) {
if ( user . category !== undefined && user . category !== null ) {
const myPosition = {
latitude : parseFloat ( user . latitude ) ,
longitude : parseFloat ( user . longitude )
}
2019-06-16 13:09:54 +00:00
2020-03-20 18:28:22 +00:00
const reg = {
latitude : myPosition . latitude ,
longitude : myPosition . longitude ,
latitudeDelta : 0.03 ,
longitudeDelta : 0.01 ,
}
this . setState ( { myPosition : myPosition } ) ;
this . mapRef . animateToCoordinate ( {
latitude : myPosition . latitude ,
longitude : myPosition . longitude
} , 1000 )
this . mapRef . animateToRegion ( reg , 1000 )
this . setState ( { isLoading : false , isLoadingMap : false , loadingDialog : false } )
if ( user . category !== "geolocated" ) {
this . showMyMembers ( ) ;
} else {
if ( myPosition . latitude <= 0 && myPosition . longitude <= 0 ) {
this . props . navigation . push ( route . updateinfo ) ;
}
}
} else {
2020-03-29 08:23:08 +00:00
this . getPosition ( ) ;
2020-03-20 18:28:22 +00:00
this . watchLocation ( ) ;
}
}
} )
} else {
}
} catch ( err ) {
console . log ( err )
}
}
_storeData = async ( position ) => {
try {
await AsyncStorage . setItem ( 'position' , JSON . stringify ( position ) ) ;
} catch ( error ) {
console . warn ( error )
}
} ;
watchLocation ( ) {
this . watchID = Geolocation . watchPosition ( ( position ) => {
const myLastPosition = this . state . myPosition ;
let myPosition = position . coords ;
const oldPosition = this . state . oldPosition
if ( ! myLastPosition || ( myPosition . longitude !== myLastPosition . longitude || myPosition . latitude !== myLastPosition . latitude ) ) {
if ( myPosition . longitude !== 0 && myPosition . latitude !== 0 )
this . _storeData ( myPosition )
if ( isEqual ( this . state . region , { } ) || isEqual ( this . state . region , undefined ) || isEqual ( this . state . region , null ) )
if ( ! this . state . myPosition . longitude && ! this . state . myPosition . latitude ) {
if ( this . mapRef !== null && this . mapRef !== undefined ) {
this . mapRef . animateToRegion ( {
latitude : myPosition . latitude ,
longitude : myPosition . longitude ,
latitudeDelta : 0.03 ,
longitudeDelta : 0.01 ,
} , 1000 )
this . mapRef . animateCamera ( {
center : this . myPosition ,
pitch : 0 ,
heading : 0 ,
altitude : 0 ,
zoom : 12
} , 1000 )
}
}
this . setState ( { region : { latitude : myPosition . latitude , longitude : myPosition . longitude , latitudeDelta : 0.003 , longitudeDelta : 0.004 } } ) ;
this . setState ( { myPosition : myPosition } ) ;
if ( this . map ) this . map . focusToUser ( )
}
} , ( error => console . log ( "wat s" , error ) ) , GEOLOCATION _OPTIONS ) ;
}
getNetworks ( pays ) {
if ( pays ) {
getCountryNetwork ( pays ) . then ( ( result ) => {
this . reseaux = [ ] ;
let networks = result ;
for ( let prop in networks ) {
this . reseaux . push ( networks [ prop ] ) ;
}
this . setState ( { networks : this . reseaux } ) ;
let c = this . reseaux . filter ( ( item ) => {
return item . name . includes ( this . state . network ) ;
} )
if ( this . state . user . category === undefined || this . state . user . category === null ) {
if ( c . length > 0 && pays ) {
this . setState ( { filternetwork : c [ 0 ] , myNetwork : c [ 0 ] , filternetworkTemp : c [ 0 ] } )
this . retrieveAllPoint ( pays )
} else {
if ( this . state . user ) {
if ( ! this . state . user . category )
Alert . alert (
I18n . t ( "UNABLE_TO_CONNECT_TITLE" ) ,
I18n . t ( 'TEXT_NETWORK_UNABLE' )
,
[
{ text : I18n . t ( "NO" ) , onPress : ( ) => { BackHandler . exitApp ( ) } } ,
{
text : I18n . t ( "YES" ) , onPress : ( ) => {
if ( pays !== null && pays !== undefined )
this . getNetworks ( pays )
else
this . requestCameraPermission ( )
}
}
] ,
{ cancelable : false }
)
}
}
}
} , ( err ) => {
// Crashlytics.log("get networks"+e.message)
2019-06-16 13:09:54 +00:00
Alert . alert (
2020-03-20 18:28:22 +00:00
I18n . t ( "UNABLE_TO_CONNECT_TITLE" ) ,
I18n . t ( 'TEXT_NETWORK_UNABLE' )
,
[
{ text : I18n . t ( "NO" ) , onPress : ( ) => { BackHandler . exitApp ( ) } } ,
{
text : I18n . t ( "YES" ) , onPress : ( ) => {
if ( pays !== null && pays !== undefined )
this . getNetworks ( pays )
else
this . requestCameraPermission ( )
}
}
] ,
{ cancelable : false }
2019-06-16 13:09:54 +00:00
)
2020-03-20 18:28:22 +00:00
} )
} else {
console . log ( "get network missing pays" )
var msg = "impossible de récupérer le nom du pays" ;
Alert . alert (
2019-06-16 13:09:54 +00:00
I18n . t ( "UNABLE_TO_CONNECT_TITLE" ) ,
I18n . t ( 'TEXT_NETWORK_UNABLE' )
,
[
2020-03-20 18:28:22 +00:00
{ text : I18n . t ( "NO" ) , onPress : ( ) => { BackHandler . exitApp ( ) } } ,
{
text : I18n . t ( "YES" ) , onPress : ( ) => {
2019-06-16 13:09:54 +00:00
2020-03-20 18:28:22 +00:00
this . requestCameraPermission ( )
}
}
2019-06-16 13:09:54 +00:00
] ,
2020-03-20 18:28:22 +00:00
{ cancelable : false }
)
}
}
getPosition ( options = null ) {
console . log ( "on get position" )
Geolocation . getCurrentPosition (
( position ) => {
const myLastPosition = this . state . myPosition ;
const myPosition = position . coords ;
const oldPosition = this . state . oldPosition
if ( ! isEqual ( myPosition , myLastPosition ) && myPosition . longitude !== 0 && myPosition . latitude !== 0 || myLastPosition ) {
if ( this . map ) this . map . focusToUser ( )
getPositionInformation ( myPosition ) . then ( ( response ) => {
if ( response ) {
if ( response . results !== undefined ) {
if ( response . results . length > 0 ) {
let most = response . results [ 0 ]
let { address _components , formatted _address , place _id } = most
this . setState ( { address : address _components , textadress : formatted _address , place : place _id } )
let results = response . results ;
let shortcountry ;
let mcountry ;
for ( let i = 0 ; i < results [ 0 ] . address _components . length ; i ++ ) {
for ( let j = 0 ; j < results [ 0 ] . address _components [ i ] . types . length ; j ++ ) {
if ( results [ 0 ] . address _components [ i ] . types [ j ] === "country" ) {
mcountry = results [ 0 ] . address _components [ i ] ;
shortcountry = mcountry . short _name ;
this . setState ( {
shortCountry : mcountry . short _name ,
longCountry : mcountry . long _name
} )
}
}
}
for ( let i of countries ) {
if ( i . code === shortcountry ) {
this . setState ( { indicatif : i . dial _code } )
this . getNetworks ( i . dial _code )
}
}
2019-06-16 13:09:54 +00:00
}
2020-03-20 18:28:22 +00:00
} else {
console . log ( "on else result null " )
Alert . alert (
I18n . t ( "UNABLE_TO_CONNECT_TITLE" ) ,
I18n . t ( 'TEXT_NETWORK_UNABLE' )
,
[
{ text : I18n . t ( "NO" ) , onPress : ( ) => { BackHandler . exitApp ( ) } } ,
{
text : I18n . t ( "YES" ) , onPress : ( ) => {
this . getPosition ( options )
}
}
] ,
{ cancelable : false }
)
}
} else {
Alert . alert (
I18n . t ( "UNABLE_TO_CONNECT_TITLE" ) ,
I18n . t ( 'TEXT_NETWORK_UNABLE' )
,
[
{ text : I18n . t ( "NO" ) , onPress : ( ) => { BackHandler . exitApp ( ) } } ,
{
text : I18n . t ( "YES" ) , onPress : ( ) => {
this . getPosition ( options )
}
}
] ,
{ cancelable : false }
)
}
} ) ;
const reg = {
latitude : myPosition . latitude ,
longitude : myPosition . longitude ,
latitudeDelta : 0.03 ,
longitudeDelta : 0.01 ,
}
this . setState ( { myPosition : myPosition , region : reg } ) ;
if ( this . mapRef && ! this . state . myPositionIsAnimated ) {
this . mapRef . animateCamera ( {
center : myPosition ,
pitch : 0 ,
heading : 0 ,
altitude : 5 ,
2020-04-06 13:46:31 +00:00
zoom : 12
2020-03-20 18:28:22 +00:00
} , 1000 )
this . setState ( { myPositionIsAnimated : true } )
}
} else console . warn ( "errror" )
} ,
( error ) => {
console . warn ( error . message )
switch ( error . code ) {
case 3 :
if ( this . state . oldPosition ) {
this . treatPosition ( this . state . oldPosition )
}
break ;
default :
//Crashlytics.log(error.message)
console . log ( "onjjj" , error . message )
/ * A l e r t . a l e r t (
I18n . t ( "UNABLE_TO_CONNECT_TITLE" ) ,
I18n . t ( 'TEXT_NETWORK_UNABLE' )
,
[
{ text : I18n . t ( "NO" ) , onPress : ( ) => { BackHandler . exitApp ( ) } } ,
{ text : I18n . t ( "YES" ) , onPress : ( ) => {
this . getPosition ( options ) } }
] ,
{ cancelable : false }
) * /
2019-06-16 13:09:54 +00:00
}
2020-03-20 18:28:22 +00:00
} ,
GEOLOCATION _OPTIONS
) ;
}
componentDidDisappear ( ) {
BackHandler . removeEventListener ( 'hardwareBackPress' , this . backPressed ) ;
}
2019-06-16 13:09:54 +00:00
2020-03-20 18:28:22 +00:00
componentDidAppear ( ) {
BackHandler . addEventListener ( 'hardwareBackPress' , this . backPressed ) ;
// this.props.start();
readUser ( ) . then ( ( user ) => {
if ( user ) {
if ( user . category ) {
2020-03-29 08:23:08 +00:00
2020-03-20 18:28:22 +00:00
this . setState ( { user : user } )
this . setState ( { network : user . network } ) ;
const myPosition = {
latitude : parseFloat ( user . latitude ) ,
longitude : parseFloat ( user . longitude )
}
const reg = {
latitude : myPosition . latitude ,
longitude : myPosition . longitude ,
latitudeDelta : 0.03 ,
longitudeDelta : 0.01 ,
}
this . setState ( { myPosition : myPosition } ) ;
2020-04-06 13:46:31 +00:00
this . refocusMap ( true ) ;
2019-06-16 13:09:54 +00:00
}
2020-03-29 08:23:08 +00:00
2020-03-20 18:28:22 +00:00
/ * i f ( P l a t f o r m . O S = = = ' a n d r o i d ' ) {
// this.requestCameraPermission();
} else {
this . getPosition ( ) ;
this . watchLocation ( ) ;
} * /
}
} )
}
componentWillUnmount ( ) {
this . mounted = false ;
this . blurListener . remove ( ) ;
this . focusListener . remove ( )
if ( this . watchID ) Geolocation . clearWatch ( this . watchID ) ;
}
backPressed = ( ) => {
Alert . alert (
I18n . t ( 'EXIT_TITLE' ) ,
I18n . t ( 'EXIT_DESC' ) ,
[
{ text : I18n . t ( 'NO' ) , onPress : ( ) => console . log ( 'Cancel Pressed' ) , style : 'cancel' } ,
{ text : I18n . t ( "YES" ) , onPress : ( ) => BackHandler . exitApp ( ) } ,
] ,
{ cancelable : false } ) ;
return true ;
}
constructor ( props ) {
super ( props , true ) ;
this . state = this . geInitialState ( ) ;
this . mounted = false ;
this . filterOptions = [
{ value : 5 , label : "5 km" } ,
{ value : 15 , label : "15 km" } ,
{ value : 20 , label : "20 km" } ,
{ value : 25 , label : "25 km" }
] ;
Icon . getImageSource ( 'md-car' , 24 , 'white' ) . then ( ( resutl ) => {
this . setState ( { caricon : resutl } )
} ) ;
2020-05-19 07:57:56 +00:00
//this._renderFavoriteIcon = this._renderFavoriteIcon.bind(this);
2020-03-20 18:28:22 +00:00
this . makeMarkerInformation = this . makeMarkerInformation . bind ( this ) ;
2020-04-06 09:02:03 +00:00
//IlinkEmitter.on("langueChange", this.updateLangue.bind(this))
2020-03-20 18:28:22 +00:00
2020-08-13 07:23:23 +00:00
OneSignal . addEventListener ( 'received' , this . onReceived ) ;
OneSignal . addEventListener ( 'opened' , this . onOpened ) ;
OneSignal . addEventListener ( 'ids' , this . onIds ) ;
2020-03-20 18:28:22 +00:00
} ;
2020-08-13 07:23:23 +00:00
componentWillUnmount ( ) {
OneSignal . removeEventListener ( 'received' , this . onReceived ) ;
OneSignal . removeEventListener ( 'opened' , this . onOpened ) ;
OneSignal . removeEventListener ( 'ids' , this . onIds ) ;
}
onReceived ( notification ) {
console . log ( "Notification received: " , notification ) ;
}
onOpened ( openResult ) {
let data = openResult . notification . payload . additionalData ;
this . props . navigation . navigate ( data . screen , {
id : data . data . id
} ) ;
}
2020-04-06 09:02:03 +00:00
/ * u p d a t e L a n g u e ( ) {
this . props . navigation . setParams ( { name : I18n . t ( 'MAP' ) } )
this . forceUpdate ( ) ;
} * /
2020-03-20 18:28:22 +00:00
makeCardSearch ( ) {
2020-07-02 14:35:00 +00:00
/* if (!this.state.isPubShow) { */
return (
< View style = { styles . topBar } >
< Surface
2020-03-20 18:28:22 +00:00
2020-07-02 14:35:00 +00:00
style = { {
elevation : 4 ,
borderRadius : 10
} } >
< View style = { {
flexDirection : 'row' ,
alignSelf : 'center' ,
justifyContent : 'center' ,
flex : 1 ,
borderRadius : 10 ,
margin : 10 ,
alignItems : 'center' ,
height : 48 ,
} } >
< TouchableOpacity onPress = { ( ) => this . openDrawer ( ) }
>
2020-03-20 18:28:22 +00:00
2020-07-02 14:35:00 +00:00
< Text
style = { styles . hambuger }
>
Menu
2020-03-20 18:28:22 +00:00
< / T e x t >
2019-06-16 13:09:54 +00:00
2020-07-02 14:35:00 +00:00
< / T o u c h a b l e O p a c i t y >
< View style = { { flex : 1 } } > < / V i e w >
2020-03-20 18:28:22 +00:00
2020-07-02 14:35:00 +00:00
< Text style = { {
backgroundColor : this . state . myNetwork . id === this . state . filternetwork . id ? theme . primary : theme . accent ,
padding : 5 ,
color : "white" ,
marginRight : 10 ,
fontSize : 10 ,
borderRadius : 12 ,
} }
> { this . state . filternetwork . name ? this . state . filternetwork . name : this . state . network } < / T e x t >
{ this . renderSupplementInformation ( ) }
< / V i e w >
{ this . showLoadingMapView ( ) }
2020-03-20 18:28:22 +00:00
2020-07-02 14:35:00 +00:00
< / S u r f a c e >
2020-03-20 18:28:22 +00:00
2020-07-02 14:35:00 +00:00
< / V i e w >
2020-03-20 18:28:22 +00:00
2020-07-02 14:35:00 +00:00
)
/* } */
2020-03-20 18:28:22 +00:00
}
2020-05-19 07:57:56 +00:00
2020-03-20 18:28:22 +00:00
renderSupplementInformation ( ) {
2020-05-19 07:57:56 +00:00
2020-03-20 18:28:22 +00:00
if ( this . state . user && this . state . user . category === "geolocated" ) {
return ( < View / > )
} else
2020-05-19 07:57:56 +00:00
2020-03-20 18:28:22 +00:00
return ( < View style = { { flexDirection : "row" } } >
2019-06-16 13:09:54 +00:00
< View style = { {
2020-03-20 18:28:22 +00:00
backgroundColor : "#FFFFFFA0" ,
justifyContent : 'center' ,
alignItems : 'center' ,
alignSelf : 'center'
2019-06-16 13:09:54 +00:00
} } >
2020-03-20 18:28:22 +00:00
< Text > { this . state . markers . length + " " + ( this . state . currentNetworkSize === 0 ? "" : "/" + this . state . currentNetworkSize ) } < / T e x t >
2019-06-16 13:09:54 +00:00
2020-03-20 18:28:22 +00:00
< / V i e w >
< TouchableOpacity
onPress = { ( ) => {
this . setState ( { page : this . state . page + 1 } )
this . onLoadMore ( )
2019-06-16 13:09:54 +00:00
} }
2020-03-20 18:28:22 +00:00
style = { {
borderRadius : 12 ,
height : 32 ,
width : 32 ,
backgroundColor : "white" ,
borderColor : "transparent" ,
} } >
< Icon name = { this . state . markers . length >= this . state . currentNetworkSize ? "close" : "refresh" }
size = { 32 }
color = { this . state . markers . length >= this . state . currentNetworkSize ? "red" : "grey" }
/ >
< / T o u c h a b l e O p a c i t y >
2019-06-16 13:09:54 +00:00
< / V i e w >
2020-03-20 18:28:22 +00:00
)
}
_renderMarker2 ( ) {
let { currentMarker , myPosition } = this . state ;
let marker = currentMarker
const ma = { latitude : parseFloat ( currentMarker . latitude ) , longitude : parseFloat ( currentMarker . longitude ) }
const meter _distance = geolib . getDistance ( myPosition , ma ) ;
const distanceTxt = ( meter _distance > 900 ?
( meter _distance / 1000 ) + " Km" : meter _distance + "m" ) + I18n . t ( 'TO_YOU' )
var name = marker . lastname === null ? marker . adresse : marker . lastname
return ( < View style = { { flex : 1 , backgroundColor : "white" } } >
< View style = { { flexDirection : "row" , justifyContent : "flex-end" , alignItems : 'center' , backgroundColor : "white" } } >
2019-06-16 13:09:54 +00:00
< Text style = { markerDetails . title } > { name } < / T e x t >
< Icon . Button name = { "close" } size = { 24 } color = { "red" } backgroundColor = { "transparent" }
2020-03-20 18:28:22 +00:00
onPress = { ( ) => {
this . toggleSlidingUp ( false )
}
} > < / I c o n . B u t t o n >
< / V i e w >
< Text style = { markerDetails . subtitle2 } > { marker . adresse } < / T e x t >
< View style = { { flexDirection : "row" , alignItems : "center" } } >
< Text style = { markerDetails . reseau } > { marker . network } < / T e x t >
2019-06-16 13:09:54 +00:00
< Text style = { markerDetails . solde } > { I18n . t ( 'SOLDE_UNVAIBLE' ) } < / T e x t >
< / V i e w >
2020-03-20 18:28:22 +00:00
< Text style = { markerDetails . reseau } > { distanceTxt } < / T e x t >
< View
style = { { flexDirection : 'row' , marginTop : responsiveHeight ( 3 ) , marginLeft : 10 } }
>
2019-06-16 13:09:54 +00:00
{ ! this . state . needRoad ? this . showBtnItineraire ( ) : this . showBtnClose ( ) }
< Button
2020-03-20 18:28:22 +00:00
style = { {
backgroundColor : "white" ,
width : responsiveWidth ( 30 ) ,
height : 36 ,
marginLeft : 5 , borderRadius : 100 , borderColor : "#9e9e9e" , justifyContent : 'center'
} }
onPress = { ( ) => this . callItem ( marker ) }
2019-06-16 13:09:54 +00:00
>
2020-03-20 18:28:22 +00:00
< View
style = { { flexDirection : 'row' } }
>
< Icon
name = "phone"
size = { 16 }
color = { theme . primary }
style = { { alignSelf : 'center' } }
/ >
< Text
style = { { fontSize : 15 , color : '#9e9e9e' , marginLeft : responsiveWidth ( 2 ) } }
> { I18n . t ( "CALL" ) } < / T e x t > < / V i e w >
2019-06-16 13:09:54 +00:00
< / B u t t o n >
2020-03-20 18:28:22 +00:00
< / V i e w >
< / V i e w > )
}
_renderItemMarkerdetails ( markers ) {
let marker = markers
if ( marker !== undefined && marker !== null ) {
let { currentMarker , myPosition } = this . state ;
const ma = { latitude : parseFloat ( currentMarker . latitude ) , longitude : parseFloat ( currentMarker . longitude ) }
const meter _distance = geolib . getDistance ( myPosition , ma ) ;
const distanceTxt = ( meter _distance > 900 ?
( meter _distance / 1000 ) + " Km" : meter _distance + "m" ) + I18n . t ( 'TO_YOU' )
var name = marker . lastname === null ? marker . adresse : marker . lastname
return ( < CardView style = { markerDetails . container }
cardElevation = { 2 }
cardMaxElevation = { 2 }
cornerRadius = { 5 }
>
< View style = { { flexDirection : "row" , justifyContent : "flex-end" , alignItems : 'center' } } >
< Text style = { markerDetails . title } > { name } < / T e x t >
< Icon . Button name = { "close" } size = { 24 } color = { "red" } backgroundColor = { "transparent" }
onPress = { ( ) => {
this . toggleSlidingUp ( false )
}
} > < / I c o n . B u t t o n >
< / V i e w >
< Text style = { markerDetails . subtitle2 } > { marker . adresse } < / T e x t >
< View style = { { flexDirection : "row" , alignItems : "center" } } >
< Text style = { markerDetails . reseau } > { marker . network } < / T e x t >
< Text style = { markerDetails . solde } > { I18n . t ( 'SOLDE_UNVAIBLE' ) } < / T e x t >
< / V i e w >
< Text style = { markerDetails . reseau } > { distanceTxt } < / T e x t >
< View
style = { { flexDirection : 'row' , marginTop : responsiveHeight ( 3 ) , marginLeft : 10 } }
>
{ ! this . state . needRoad ? this . showBtnItineraire ( ) : this . showBtnClose ( ) }
< Button
style = { {
backgroundColor : "white" ,
width : responsiveWidth ( 30 ) ,
height : 36 ,
marginLeft : 5 , borderRadius : 100 , borderColor : "#9e9e9e" , justifyContent : 'center'
} }
onPress = { ( ) => this . callItem ( marker ) }
>
< View
style = { { flexDirection : 'row' } }
>
< Icon
name = "phone"
size = { 16 }
color = { theme . primary }
style = { { alignSelf : 'center' } }
/ >
< Text
style = { { fontSize : 15 , color : '#9e9e9e' , marginLeft : responsiveWidth ( 2 ) } }
> { I18n . t ( "CALL" ) } < / T e x t > < / V i e w >
< / B u t t o n >
< / V i e w >
< / C a r d V i e w > ) ;
}
}
renderCurrentMarker ( marker ) {
if ( marker ) {
return ( < View >
< View style = { { flexDirection : "row" , justifyContent : "flex-end" , alignItems : 'center' } } >
< Text style = { markerDetails . title } > { name } < / T e x t >
< Icon . Button name = { "close" } size = { 24 } color = { "red" } backgroundColor = { "transparent" }
on dPress = { ( ) => {
this . toggleSlidingUp ( false )
}
} > < / I c o n . B u t t o n >
< / V i e w >
< Text style = { markerDetails . title } > { marker . adresse } < / T e x t >
< View style = { { flexDirection : "row" } } >
< Text style = { markerDetails . reseau } > { marker . network } < / T e x t >
< Text style = { markerDetails . solde } > { I18n . t ( 'SOLDE_UNVAIBLE' ) } < / T e x t >
< / V i e w >
< Text style = { markerDetails . reseau } > { distanceTxt } < / T e x t >
< View
style = { { flexDirection : 'row' , marginTop : responsiveHeight ( 3 ) , marginLeft : 10 } }
>
{ ! this . state . needRoad ? this . showBtnItineraire ( ) : this . showBtnClose ( ) }
< Button
style = { {
backgroundColor : "white" ,
width : responsiveWidth ( 30 ) ,
height : 36 ,
marginLeft : 5 , borderRadius : 100 , borderColor : "#9e9e9e" , justifyContent : 'center'
} }
onPress = { ( ) => this . callItem ( marker ) }
>
< View
style = { { flexDirection : 'row' } }
>
< Icon
name = "phone"
size = { 16 }
color = { theme . primary }
style = { { alignSelf : 'center' } }
/ >
< Text
style = { { fontSize : 15 , color : '#9e9e9e' , marginLeft : responsiveWidth ( 2 ) } }
> { I18n . t ( "CALL" ) } < / T e x t > < / V i e w >
< / B u t t o n >
< / V i e w > < / V i e w > )
}
}
callItem ( marker ) {
const args = {
number : marker . phone , // String value with the number to call
prompt : false // Optional boolean property. Determines if the user should be prompt prior to the call
}
call ( args ) . catch ( ( e ) => console . log ( e ) )
}
makeMarkerInformation ( ) {
let { currentMarker , myPosition } = this . state ;
// console.log(geolib.getDistance(myPosition,currentMarker))
if ( currentMarker !== undefined && currentMarker !== null ) {
// this.setState({stateSheet:BottomSheetBehavior.STATE_EXPANDED})
return this . _renderItemMarkerdetails ( currentMarker ) ;
} else {
return ( < Text > Impossible de 'afficher l' element < / T e x t > )
}
}
makeActionButon ( ) {
let cu = this . state . user ;
if ( cu ) {
switch ( cu . category ) {
case "super" :
return this . getSuperActionButton ( ) ;
break ;
case "geolocated" :
return this . geoLocatedAction ( ) ;
break ;
case "hyper" :
return this . getHypervisorActionButton ( ) ;
break ;
default :
return this . getSimpleActionButton ( ) ;
break ;
}
}
}
getSuperActionButton ( ) {
return ( < ActionButton
buttonColor = { theme . accent }
>
< ActionButton . Item buttonColor = '#3498db' title = { I18n . t ( "MY_GROUP" ) } onPress = { ( ) => this . showMyMembers ( ) }
size = { 48 }
>
< Icon name = "group-work" style = { styles . actionButtonIcon } / >
< / A c t i o n B u t t o n . I t e m >
< ActionButton . Item buttonColor = '#3498db' title = { I18n . t ( "REPOSITIONNING" ) } onPress = { ( ) => this . refocusMap ( false ) }
size = { 48 }
>
< Icon name = "person-pin" style = { styles . actionButtonIcon } / >
< / A c t i o n B u t t o n . I t e m >
< ActionButton . Item buttonColor = { theme . primary } title = { I18n . t ( "CHANGE_MAP" ) }
onPress = { ( ) => {
this . onMapTypeChange ( ) ;
} }
size = { 48 }
>
< Icon name = "layers" style = { styles . actionButtonIcon } / >
< / A c t i o n B u t t o n . I t e m >
< / A c t i o n B u t t o n > )
}
getSimpleActionButton ( ) {
return (
< ActionButton
ref = { ( r ) => this . actionButton = r }
>
< ActionButton . Item buttonColor = '#3498db' title = { I18n . t ( "FILTER" ) }
onPress = { ( ) => this . showFilterDialog ( ) }
size = { 48 }
>
< Icon name = "filter-list" style = { styles . actionButtonIcon } / >
< / A c t i o n B u t t o n . I t e m >
< ActionButton . Item buttonColor = '#3498db' title = { I18n . t ( "REPOSITIONNING" ) }
onPress = { ( ) => this . refocusMap ( false ) }
size = { 48 }
>
< Icon name = "person-pin" style = { styles . actionButtonIcon } / >
< / A c t i o n B u t t o n . I t e m >
< ActionButton . Item buttonColor = '#9b59b6' title = { I18n . t ( "CHANGE_MAP" ) }
onPress = { ( ) => {
this . onMapTypeChange ( ) ;
}
}
size = { 48 }
>
< Icon name = "layers" style = { styles . actionButtonIcon } / >
< / A c t i o n B u t t o n . I t e m >
< ActionButton . Item buttonColor = '#3498db' title = { I18n . t ( "PRINT_MY_NETWORK" ) }
size = { 48 }
onPress = { ( ) => {
this . showMynetworkMap ( ) ;
} } >
< Icon name = "group-work" style = { styles . actionButtonIcon } / >
< / A c t i o n B u t t o n . I t e m >
< ActionButton . Item buttonColor = '#3498db' title = { I18n . t ( "CHANGE_NETWORK" ) }
size = { 48 }
onPress = { ( ) => {
this . showNewDialogNetwork ( ) ;
} } >
< Icon name = "rss-feed" style = { styles . actionButtonIcon } / >
< / A c t i o n B u t t o n . I t e m >
< / A c t i o n B u t t o n >
)
}
2020-05-19 07:57:56 +00:00
2020-03-20 18:28:22 +00:00
toggleSlidingUp ( state ) {
if ( state && this . bottomSheetRef ) {
this . bottomSheetRef . snapTo ( 1 )
this . setState ( { showcurentMarker : state } )
} else if ( ! state ) this . bottomSheetRef . snapTo ( 0 )
const height = slideHeight
let initialValue = ! state ? 0 : height ,
finalValue = ! state ? height : 0 ;
this . setState ( {
panelVisible : state
} ) ;
if ( ! state && this . state . needRoad ) {
this . setState ( { needRoad : false } ) ;
}
this . state . animation . setValue ( initialValue ) ; //Step 3
Animated . timing ( //Step 4
this . state . animation ,
{
toValue : finalValue ,
duration : 200 ,
}
) . start ( ( animation ) => {
if ( ! state && this . map ) {
this . map . focusToUser ( )
}
} ) ;
}
2020-05-19 07:57:56 +00:00
2020-03-20 18:28:22 +00:00
makeSlidingUp ( ) {
/ * r e t u r n (
< Animated . View
style = { [ styles . slidingup , { translateY : this . state . animation } ] }
height = { slideHeight }
visible = { this . state . panelVisible }
onLayout = { ( event ) => this . onslidingEvent ( event ) }
ref = { ( c ) => this . panel = c }
onRequestClose = { ( ) => this . setState ( { panelVisible : false , needRoad : false } ) } >
< View style = { { flex : 1 } } >
{ this . makeMarkerInformation ( ) }
< / V i e w >
< /Animated.View>)*/
return ( < BottomSheet
ref = { ( r ) => { this . bottomSheetRef = r } }
snapPoints = { [ 0 , "30%" ] }
renderHeader = { ( ) => this . markerView ( ) }
/ > )
}
2020-05-19 07:57:56 +00:00
/ * _ r e n d e r F a v o r i t e I c o n ( ) {
2020-03-20 18:28:22 +00:00
const { top , bottom } = this . props . draggableRange
const draggedValue = this . _draggedValue . interpolate ( {
inputRange : [ bottom , top ] ,
outputRange : [ 1 , 0 ] ,
extrapolate : 'clamp'
} )
const transform = [ { scale : draggedValue } ]
return (
< TouchableNativeFeedback onPress = { ( ) => {
this . setState ( { needRoad : true } )
} } >
< Animated . View style = { [ styles . favoriteIcon , { transform } ] } >
< Icon
name = "car"
size = { 24 }
color = 'white'
style = { { alignSelf : 'center' } }
/ >
< / A n i m a t e d . V i e w >
< / T o u c h a b l e N a t i v e F e e d b a c k >
)
2020-05-19 07:57:56 +00:00
} * /
2020-03-20 18:28:22 +00:00
geInitialState ( ) {
return {
region : {
latitude : 0 ,
longitude : 0 ,
latitudeDelta : 0.015 ,
longitudeDelta : 0.0121 ,
} ,
pas : 100 ,
prevRegion : {
latitude : 0 ,
longitude : 0 ,
} ,
2020-05-19 07:57:56 +00:00
increasePas : 0 ,
2020-03-20 18:28:22 +00:00
isPubShow : true ,
loadingDialog : true ,
textreach : "" ,
currentNetworkSize : 0 ,
markersearchfilter : [ ] ,
animation : new Animated . Value ( 0 ) ,
myPosition : null ,
currentMarker : null ,
filterNetworkOption : radioOptions [ 1 ] ,
needRoad : false ,
initialAnim : false ,
filternetwork : { } ,
destinationPosition : { } ,
panelVisible : false ,
markers : [ ] ,
isNeedLoadMore : false ,
isLoadingMap : false ,
value : 5 ,
page : 0 ,
valuePosition : 0 ,
markerfilter : null ,
allpoint : [ ] ,
typeMap : 'standard' ,
indexTypeMap : 0 ,
user : null ,
snack _visible : false ,
snack _text _message : "" ,
networks : [ ] ,
dialogSliderVisible : false ,
showProgress : false ,
myNetwork : { } ,
dialogNetworkVisible : false ,
2020-04-06 09:02:03 +00:00
myPositionMarkerText : I18n . t ( "YOUR_THERE" ) ,
2020-03-20 18:28:22 +00:00
} ;
} ;
onMarkerPress ( marker ) {
console . warn ( marker )
this . setState ( { currentMarker : marker } ) ;
this . toggleSlidingUp ( true )
}
onMapTypeChange ( ) {
var newState = { index : this . state . indexTypeMap , text : this . state . typeMap } ;
newState . index = newState . index + 1 ;
newState . index = newState . index % 3 ;
switch ( newState . index ) {
default :
newState . text = 'standard' ;
2019-06-16 13:09:54 +00:00
break ;
2020-03-20 18:28:22 +00:00
case 1 :
newState . text = 'hybrid' ;
2019-06-16 13:09:54 +00:00
break ;
2020-03-20 18:28:22 +00:00
case 2 :
newState . text = "terrain" ;
2019-06-16 13:09:54 +00:00
break ;
2020-03-20 18:28:22 +00:00
}
this . setState ( { indexTypeMap : newState . index , typeMap : newState . text } ) ;
}
/ *
< IMap style = { { ... StyleSheet . absoluteFillObject , backgroundColor : 'red' } }
ref = { ( re ) => {
this . map = re
if ( re != null ) {
this . mapRef = re . getMapRef ( ) ;
}
} }
typeMap = { this . state . typeMap }
onMarkerClick = { ( e ) => this . onMarkerPress ( e ) }
network = { this . state . filternetwork }
initialRegion = { this . state . region }
markers = { this . state . markers }
selectedMarker = { this . state . currentMarker }
myNetwork = { this . state . myNetwork }
lang = { this . state . lang }
myPosition = { this . state . myPosition }
onMapReady = { ( ) => {
readUser ( ) . then ( ( user ) => {
if ( user ) {
this . setState ( { user : user } )
this . setState ( { network : user . network } ) ;
if ( Platform . OS === 'android' ) {
this . requestCameraPermission ( ) ;
} else {
this . getPosition ( ) ;
this . watchLocation ( ) ;
}
}
} )
} }
needRoad = { this . state . needRoad }
onNeedRoadReady = { ( data ) => {
this . setState ( { showProgress : false } )
} }
onNeedRoadError = { ( message ) => {
this . setState ( { showProgress : false } )
Alert . alert ( I18n . t ( "PROBLEM_OCCUR" ) , I18n . t ( "PROBLEM_OCCUR_DIRECTION" ) , [ { text : "Ok" , onPress : ( ) => { } } ] )
} }
/>*/
showInterticiel ( ) {
if ( this . state . isPubShow ) {
return ( < InterticielAds
closeIntersticiel = { ( ) => this . setState ( { isPubShow : false } ) }
navigation = { this . props . navigation }
/ > )
}
}
renderBottomHome ( ) {
return (
< View style = { { flex : 1 , backgroundColor : "lightblue" } } >
< IMap
ref = { ( re ) => {
this . map = re
if ( re != null ) {
this . mapRef = re . getMapRef ( ) ;
}
} }
typeMap = { this . state . typeMap }
onMarkerClick = { ( e ) => this . onMarkerPress ( e ) }
network = { this . state . filternetwork }
initialRegion = { this . state . region }
markers = { this . state . markers }
selectedMarker = { this . state . currentMarker }
myNetwork = { this . state . myNetwork }
lang = { this . state . lang }
myPosition = { this . state . myPosition }
onMapReady = { ( ) => {
2020-03-29 08:23:08 +00:00
2020-03-20 18:28:22 +00:00
readUser ( ) . then ( ( user ) => {
if ( user ) {
this . setState ( { user : user } )
this . setState ( { network : user . network } ) ;
2020-03-29 08:23:08 +00:00
2020-03-20 18:28:22 +00:00
if ( user . category ) {
this . setState ( { loadingDialog : false } )
if ( user . category !== "geolocated" ) {
this . showMyMembers ( ) ;
} else {
if ( myPosition . latitude <= 0 && myPosition . longitude <= 0 ) {
this . props . navigation . push ( route . updateinfo ) ;
}
}
} else {
if ( Platform . OS === 'android' ) {
this . requestCameraPermission ( ) ;
} else {
2020-04-06 09:02:03 +00:00
//this.getPosition();
2020-03-20 18:28:22 +00:00
this . watchLocation ( ) ;
}
}
2019-06-16 13:09:54 +00:00
}
2020-03-20 18:28:22 +00:00
} )
} }
needRoad = { this . state . needRoad }
onNeedRoadReady = { ( data ) => {
this . setState ( { showProgress : false } )
} }
onNeedRoadError = { ( message ) => {
this . setState ( { showProgress : false } )
Alert . alert ( I18n . t ( "PROBLEM_OCCUR" ) , I18n . t ( "PROBLEM_OCCUR_DIRECTION" ) , [ { text : "Ok" , onPress : ( ) => { } } ] )
} }
/ >
{ this . makeCardSearch ( ) }
< BottomSheet
ref = { ( r ) => { this . bottomSheetRef = r } }
snapPoints = { [ 60 , "30%" , "100%" ] }
renderHeader = { ( ) => this . renderHeader ( ) }
/ >
< / V i e w >
)
}
renderInner ( ) {
return ( < View style = { { flex : 1 , backgroundColor : "green" } } >
< Text > Freud junior < / T e x t >
< / V i e w > )
}
markerView ( ) {
if ( this . state . currentMarker ) return this . _renderMarker2 ( )
}
renderHeader ( ) {
return ( < React . Fragment >
< View style = { { position : "absolute" , width : 32 , height : this . state . currentMarker ? 200 : 100 , bottom : 80 , right : 0 , justifyContent : 'center' } } >
< ActionButton size = { 32 } style = { { marginRight : 15 } } buttonColor = "white" / >
< ActionButton size = { 42 }
renderIcon = { ( ) => {
return ( < Icon name = "group-work" style = { styles . actionButtonIcon } / >
)
} }
style = { { marginTop : 40 , marginRight : 20 } } buttonColor = { theme . primary } / >
< / V i e w >
< View style = { { flex : 1 , backgroundColor : "white" } } >
{ this . markerView ( ) }
{ this . renderFilterMarker ( ) }
< View style = { { flexDirection : 'row' , height : 60 , justifyContent : 'space-evenly' , alignItems : 'flex-end' } } >
< View style = { { flexDirection : 'row' , flex : 1 , marginBottom : 10 , justifyContent : 'space-around' , alignItems : 'flex-end' } } >
< FAB small
icon = { ! this . state . showFilterDistance ? "filter" : "close" }
color = { theme . primary }
style = { { backgroundColor : "white" } }
2019-06-16 13:09:54 +00:00
onPress = { ( ) => {
2020-03-20 18:28:22 +00:00
if ( ! this . state . showFilterDistance ) {
this . bottomSheetRef . snapTo ( 2 )
this . setState ( { showFilterDistance : true } )
} else {
this . bottomSheetRef . snapTo ( 0 )
this . setState ( { showFilterDistance : false } )
}
}
} / >
< FAB
small
icon = { "add" }
color = { "white" }
style = { { backgroundColor : theme . primary } }
2019-06-16 13:09:54 +00:00
onPress = { ( ) => {
2020-03-20 18:28:22 +00:00
this . bottomSheetRef . snapTo ( 2 )
this . setState ( { showdialogNetworkVisible : true } )
} }
/ >
< / V i e w >
{ this . makeMarkerButton ( ) }
< / V i e w >
< / V i e w >
< / R e a c t . F r a g m e n t > )
}
renderFilterMarker ( ) {
if ( this . state . showFilterDistance )
return ( < View style = { { height : responsiveHeight ( 80 ) , justifyContent : 'center' , backgroundColor : 'white' , margin : 20 } } >
< View style = { { height : responsiveHeight ( 30 ) , justifyContent : 'center' } } >
< Text > { I18n . t ( 'TEXT_FILTER_DISTANCE' ) } < / T e x t >
< SnapSlider
items = { this . filterOptions }
defaultItem = { this . state . valuePosition }
labelPosition = "bottom"
onSlidingComplete = { ( item ) => this . slidingComplete ( item ) }
/ >
< Text >
< Text style = { { fontWeight : "bold" } } >
{ ( this . state . value === undefined ? 0 : this . state . value ) } < / T e x t > k m { I 1 8 n . t ( " D I S T A N C E _ A R R O U N D " ) }
< / T e x t >
< / V i e w >
< View style = { { flexDirection : "row" , flex : 1 } } >
< Button style = { { flex : 1 } } / >
< Button style = { { flex : 1 } } / >
< / V i e w >
< / V i e w > )
}
makeMarkerButton ( ) {
if ( this . state . currentMarker ) {
return (
< View style = { { flex : 2 , flexDirection : 'row' , justifyContent : 'flex-end' , marginEnd : 20 } } >
{ ! this . state . needRoad ? this . showBtnItineraire ( ) : this . showBtnClose ( ) }
< Button
style = { {
backgroundColor : "white" ,
width : responsiveWidth ( 26 ) ,
height : 36 ,
marginLeft : 5 , borderRadius : 100 , borderColor : "#9e9e9e" , justifyContent : 'center'
} }
onPress = { ( ) => this . callItem ( marker ) }
>
< View
style = { { flexDirection : 'row' } }
>
< Icon
name = "phone"
size = { 16 }
color = { theme . primary }
style = { { alignSelf : 'center' } }
/ >
< Text
style = { { fontSize : 15 , color : '#9e9e9e' , marginLeft : responsiveWidth ( 2 ) } }
> { I18n . t ( "CALL" ) } < / T e x t > < / V i e w >
< / B u t t o n >
< / V i e w > )
}
else return ( < View style = { { flex : 2 , flexDirection : 'row' , justifyContent : 'flex-end' , marginEnd : 20 } } >
< / V i e w > )
}
renderOldHome ( ) {
return (
< View style = { styles . container } >
< StatusBar
backgroundColor = "#00000030"
barStyle = "light-content"
translucent = { true }
2019-06-16 13:09:54 +00:00
/ >
2020-06-10 03:10:45 +00:00
{ /* Start here to comment */ }
2020-08-13 07:23:23 +00:00
2020-08-11 09:42:31 +00:00
{
2020-06-02 09:05:50 +00:00
( this . state . loadingDialog || this . props . loading ) ?
< View
style = { { position : "absolute" , zIndex : 1 , backgroundColor : "#00000050" , width : this . state . loadingDialog ? responsiveWidth ( 100 ) : 0 , height : this . state . loadingDialog ? responsiveHeight ( 100 ) : 0 , flex : 1 , justifyContent : 'center' , alignItems : 'center' } }
2019-06-16 13:09:54 +00:00
2020-06-02 09:05:50 +00:00
>
< Text style = { { fontSize : 20 , color : 'white' , fontWeight : 'bold' } } > { I18n . t ( "LOADING_DOTS" ) } < / T e x t >
< / V i e w > : n u l l
2020-03-20 18:28:22 +00:00
}
< IMap
ref = { ( re ) => {
this . map = re
if ( re != null ) {
this . mapRef = re . getMapRef ( ) ;
}
} }
typeMap = { this . state . typeMap }
onMarkerClick = { ( e ) => this . onMarkerPress ( e ) }
network = { this . state . filternetwork }
initialRegion = { this . state . region }
markers = { this . state . markers }
selectedMarker = { this . state . currentMarker }
myNetwork = { this . state . myNetwork }
lang = { this . state . lang }
myPosition = { this . state . myPosition }
2020-03-29 08:23:08 +00:00
onMapReady = { Platform . OS === 'android' ? this . onMapReady : null }
onLayout = { Platform . OS === 'ios' ? this . onMapReady : null }
2020-03-20 18:28:22 +00:00
needRoad = { this . state . needRoad }
onNeedRoadReady = { ( data ) => {
this . setState ( { showProgress : false } )
} }
onNeedRoadError = { ( message ) => {
this . setState ( { showProgress : false } )
Alert . alert ( I18n . t ( "PROBLEM_OCCUR" ) , I18n . t ( "PROBLEM_OCCUR_DIRECTION" ) , [ { text : "Ok" , onPress : ( ) => { } } ] )
} }
2020-08-13 07:23:23 +00:00
/ >
2020-03-20 18:28:22 +00:00
{ this . makeCardSearch ( ) }
{ this . makeSlidingUp ( ) }
{ this . makeDialogLoader ( ) }
{ this . makeDistanceDialog ( ) }
{ this . makeNetworkChangeDialog ( ) }
< SnackBar visible = { this . state . snack _visible }
textMessage = { this . state . snack _text _message }
autoHidingTime = { 5000 }
/ >
{ this . makeActionButon ( ) }
< / V i e w >
)
}
2020-03-29 08:23:08 +00:00
onMapReady = ( ) => {
readUser ( ) . then ( ( user ) => {
if ( user ) {
this . setState ( { user : user } )
this . setState ( { network : user . network } ) ;
const myPosition = {
latitude : parseFloat ( user . latitude ) ,
longitude : parseFloat ( user . longitude )
}
2020-04-06 13:46:31 +00:00
this . setState ( { myPosition } ) ;
this . refocusMap ( false ) ;
2020-03-29 08:23:08 +00:00
if ( user . category ) {
this . setState ( { loadingDialog : false } )
if ( user . category !== "geolocated" ) {
this . showMyMembers ( ) ;
} else {
if ( myPosition . latitude <= 0 && myPosition . longitude <= 0 ) {
this . props . navigation . push ( route . updateinfo ) ;
}
}
} else {
if ( Platform . OS === 'android' ) {
this . requestCameraPermission ( ) ;
} else {
this . getPosition ( ) ;
this . watchLocation ( ) ;
}
}
}
} )
. catch ( ( error ) => {
2020-04-06 09:02:03 +00:00
console . log ( "ERROR LOADING USER" , error . message ) ;
2020-03-29 08:23:08 +00:00
} ) ;
}
2020-03-20 18:28:22 +00:00
renderTutoOldHome ( ) {
return ( < View style = { { flex : 1 } } >
< CopilotStep text = "This is a hello world example!" order = { 1 } name = "hello" >
{ this . makeCardSearch ( ) }
< / C o p i l o t S t e p >
< / V i e w > )
}
render ( ) {
if ( false ) {
return this . renderBottomHome ( )
} else
return this . renderOldHome ( )
}
renderCurrentMarker ( ) {
if ( this . state . currentMarker ) {
return ( < View style = { { height : 200 , backgroundColor : '#fff' } } >
{ this . makeMarkerInformation ( ) }
2019-06-16 13:09:54 +00:00
< / V i e w > )
2020-03-20 18:28:22 +00:00
}
}
makeDialogLoader ( ) {
return ( < ProgressDialog
visible = { this . state . showProgress }
title = { I18n . t ( "LOADING_PROGRESS" ) }
message = { I18n . t ( "WAITING_LONG" ) }
animationType = "slide"
activityIndicatorSize = "large"
activityIndicatorColor = "blue"
/ > )
}
showMynetworkMap ( usr = null ) {
const user = usr === null ? this . state . user : usr
let { myNetwork } = this . state ;
2020-05-30 21:58:22 +00:00
this . setState ( { filternetwork : myNetwork , page : 0 , increasePas : 0 , filternetworkTemp : myNetwork , loadingDialog : true } )
2020-03-20 18:28:22 +00:00
return new Promise ( ( ) => {
if ( myNetwork !== undefined ) {
this . loadingMarkers ( this . state . myPosition , myNetwork , this . state . value ) . then ( ( data ) => {
let items = data ? data : [ ]
this . setState ( { loadingDialog : false } )
if ( user . category !== undefined && user . category !== null ) {
const filter = items . filter ( item => item . code _parrain === user . code _membre )
this . treatNewData ( this . state . myPosition , filter , true )
} else
this . treatNewData ( this . state . myPosition , items , true )
} ) . catch ( ( e ) => {
this . setState ( { loadingDialog : false } )
console . log ( "error j" )
console . log ( e )
} )
} else {
this . setState ( { loadingDialog : false } )
console . log ( "error no net" )
}
} )
}
showMyMembers ( ) {
let { code _membre } = this . state . user ;
if ( code _membre !== undefined ) {
loadGroupeAgent ( code _membre ) . then ( ( data ) => {
if ( data . success === 1 )
return this . setState ( { markers : data . datas } )
} )
} else console . log ( "error" )
}
slidingComplete ( itemSelected ) {
this . setState ( { value : this . filterOptions [ itemSelected ] . value , valuePosition : itemSelected } ) ;
}
makeDistanceDialog ( ) {
return ( < MaterialDialog
visible = { this . state . dialogSliderVisible }
title = { I18n . t ( 'MENU_FILTER' ) }
onOk = { ( ) => {
this . setState ( { dialogSliderVisible : false , showProgress : true } )
setTimeout ( ( ) => this . filterPoint ( ) , 300 )
}
}
cancelLabel = { I18n . t ( "QUIT_" ) }
okLabel = { I18n . t ( 'FILTER' ) }
onCancel = { ( ) => {
this . setState ( { dialogSliderVisible : false } )
} }
onTouchOutside = { ( ) => this . setState ( { dialogSliderVisible : false } ) } >
< Text > { I18n . t ( 'TEXT_FILTER_DISTANCE' ) } < / T e x t >
< SnapSlider
items = { this . filterOptions }
defaultItem = { this . state . valuePosition }
labelPosition = "bottom"
onSlidingComplete = { ( item ) => this . slidingComplete ( item ) }
/ >
< Text >
< Text style = { { fontWeight : "bold" } } >
{ ( this . state . value === undefined ? 0 : this . state . value ) } < / T e x t > k m { I 1 8 n . t ( " D I S T A N C E _ A R R O U N D " ) }
< / T e x t >
< / M a t e r i a l D i a l o g > )
}
showFilterDialog ( ) {
this . setState ( { dialogSliderVisible : true } )
}
async filterPoint ( ) {
const { value , myPosition , user , filternetwork } = this . state
if ( value !== undefined ) {
this . setState ( { page : 0 } )
const metervalue = value * 1000
let res = this . state . networks . filter ( function ( item ) {
return item . id === filternetwork . id
} )
let reseau = res [ 0 ] ;
this . loadingMarkers ( myPosition , filternetwork , value ) . then ( ( datas ) => {
this . treatNewData ( this . state . prevRegion , datas , true )
} ) . catch ( ( e ) => {
this . setState ( { showProgress : false } )
Alert . alert ( I18n . t ( "ERROR_FILTER" ) , I18n . t ( "ERROR_FILTER_TEXT" ) , [ { text : I18n . t ( "CANCEL" ) } , { text : I18n . t ( "RESTART" ) , onPress : ( ) => { this . filterPoint ( ) } } ] )
} )
} else {
this . setState ( { showProgress : false } )
this . setState ( {
snack _visible : true , snack _text _message : "impossible de filtrer les élements"
} )
setTimeout ( ( ) => {
this . setState ( { snack _visible : false } )
} , 5000 )
}
}
userChangeMarker ( item ) {
const marker = this . state . markers [ item ] ;
if ( this . mapRef !== null && this . mapRef !== undefined ) {
const reg = {
latitude : parseFloat ( marker . latitude ) ,
longitude : parseFloat ( marker . longitude ) ,
latitudeDelta : 0.03 ,
longitudeDelta : 0.01 ,
}
this . mapRef . animateToCoordinate ( {
latitude : parseFloat ( marker . latitude ) ,
longitude : parseFloat ( marker . longitude )
} , 1000 )
this . mapRef . animateToRegion ( reg , 1000 )
console . log ( marker ) ;
}
}
geoLocatedAction ( ) {
return ( < ActionButton
buttonColor = { theme . accent }
>
< ActionButton . Item buttonColor = '#3498db' title = { I18n . t ( "REPOSITIONNING" ) } onPress = { ( ) => this . refocusMap ( ) }
size = { 48 }
>
< Icon name = "person-pin" style = { styles . actionButtonIcon } / >
< / A c t i o n B u t t o n . I t e m >
< ActionButton . Item buttonColor = { theme . primary } title = { I18n . t ( "CHANGE_MAP" ) }
onPress = { ( ) => {
this . onMapTypeChange ( ) ;
}
}
size = { 48 }
>
< Icon name = "layers" style = { styles . actionButtonIcon } / >
< / A c t i o n B u t t o n . I t e m >
< / A c t i o n B u t t o n > )
}
makeNetworkChangeDialog ( ) {
return (
< MaterialDialog
title = { I18n . t ( "CHOICE_NETWORK" ) }
visible = { this . state . dialogNetworkVisible }
subtitle = { I18n . t ( "CHOICE_NETWORK_TEXT" ) }
onCancel = { ( ) => this . setState ( { dialogNetworkVisible : false } ) }
onOk = { result => {
this . setState ( { dialogNetworkVisible : false , page : 0 } ) ;
this . setState ( { showProgress : true , filternetwork : this . state . filternetworkTemp } )
setTimeout ( ( ) => this . showFilterNetwork ( )
, 500 )
} }
>
< FlatList style = { { height : responsiveHeight ( 40 ) } }
data = { this . state . networks }
renderItem = { ( { item } ) => this . renderRow ( item ) } / >
< / M a t e r i a l D i a l o g > )
}
renderRow = ( row ) => (
< TouchableOpacity key = { row } onPress = { ( ) => this . onRowPress ( row ) } >
< View style = { styles . rowContainer } >
< View style = { styles . iconContainer } >
< Icon
name = { this . state . filternetworkTemp && row . name === this . state . filternetworkTemp . name ? 'radio-button-checked' : 'radio-button-unchecked' }
color = { this . state . filternetworkTemp && row . name === this . state . filternetworkTemp . name ? theme . accent : this . props . colorAccent }
size = { 24 }
/ >
< / V i e w >
< Text style = { material . subheading } > { row . name } < / T e x t >
< / V i e w >
< / T o u c h a b l e O p a c i t y >
) ;
onRowPress ( rowID ) {
this . setState ( { filternetworkTemp : rowID } )
}
showNewDialogNetwork ( ) {
this . setState ( { dialogNetworkVisible : true } )
}
async showFilterNetwork ( ) {
const { myPosition , user , filternetwork } = this . state
if ( filternetwork !== undefined ) {
this . setState ( { showProgress : true } )
this . loadingMarkers ( this . state . myPosition , filternetwork , this . state . value , 0 ) . then ( ( data ) => {
this . setState ( { showProgress : false } )
this . treatNewData ( myPosition , data , true )
} ) . catch ( ( e ) => {
this . setState ( {
snack _visible : true , snack _text _message : "Probleme de connexion"
2019-06-16 13:09:54 +00:00
2020-03-20 18:28:22 +00:00
} )
2019-06-16 13:09:54 +00:00
console . log ( e )
2020-03-20 18:28:22 +00:00
} )
} else console . log ( "error no net" )
}
showBtnItineraire ( ) {
return ( < Button style = { {
backgroundColor : theme . primary ,
width : responsiveWidth ( 30 ) ,
height : 36 ,
borderRadius : 100 ,
marginLeft : 5 ,
borderColor : "transparent" ,
justifyContent : 'center'
} }
onPress = { ( ) => {
this . setState ( { needRoad : true , showProgress : true } )
} }
>
< View
style = { { flexDirection : 'row' } }
>
2019-06-16 13:09:54 +00:00
< Icon
2020-03-20 18:28:22 +00:00
name = "near-me"
size = { 16 }
color = 'white'
style = { { alignSelf : 'center' } }
2019-06-16 13:09:54 +00:00
/ >
< Text
2020-03-20 18:28:22 +00:00
style = { { fontSize : 15 , color : 'white' , marginLeft : responsiveWidth ( 2 ) } }
2019-06-16 13:09:54 +00:00
> { I18n . t ( "WAY" ) } < / T e x t > < / V i e w >
2020-03-20 18:28:22 +00:00
< / B u t t o n >
)
}
showBtnClose ( ) {
return ( < Button style = { {
backgroundColor : theme . reddeconnect ,
height : 36 ,
width : responsiveWidth ( 30 ) ,
borderRadius : 100 ,
borderColor : "transparent" ,
justifyContent : 'center'
} }
onPress = { ( ) => {
this . setState ( { needRoad : false , showProgress : false } )
2019-06-16 13:09:54 +00:00
/ * t h i s . m a p R e f . a n i m a t e C a m e r a ( {
center : { latitude : parseFloat ( this . state . currentMarker . latitude ) , longitude : parseFloat ( this . state . currentMarker . longitude ) } ,
center : this . myPosition ,
pitch : 0 ,
heading : 300 ,
altitude : 10 ,
zoom : 15 } , 1000 )
* / }
2020-03-20 18:28:22 +00:00
}
>
< View
style = { { flexDirection : 'row' } }
>
2019-06-16 13:09:54 +00:00
< Icon
2020-03-20 18:28:22 +00:00
name = "close"
size = { 16 }
color = 'white'
style = { { alignSelf : 'center' } }
2019-06-16 13:09:54 +00:00
/ >
< Text
2020-03-20 18:28:22 +00:00
style = { { fontSize : 15 , color : 'white' , marginLeft : responsiveWidth ( 2 ) } }
2019-06-16 13:09:54 +00:00
> { I18n . t ( "CANCEL" ) } < / T e x t > < / V i e w >
2020-03-20 18:28:22 +00:00
< / B u t t o n >
)
}
markerManager : MarkerManager
getHypervisorActionButton ( ) {
return ( < ActionButton
buttonColor = { theme . accent }
>
< ActionButton . Item buttonColor = '#3498db' title = { I18n . t ( "REPOSITIONNING" ) } onPress = { ( ) => this . refocusMap ( false ) }
size = { 48 }
>
< Icon name = "person-pin" style = { styles . actionButtonIcon } / >
< / A c t i o n B u t t o n . I t e m >
< ActionButton . Item buttonColor = { theme . primary } title = { I18n . t ( "CHANGE_MAP" ) }
onPress = { ( ) => {
this . onMapTypeChange ( ) ;
}
}
size = { 48 }
>
< Icon name = "map" style = { styles . actionButtonIcon } / >
< / A c t i o n B u t t o n . I t e m >
< / A c t i o n B u t t o n > )
}
moveToMarker ( item ) {
this . mapRef . animateToCoordinate ( {
latitude : parseFloat ( item . latitude ) ,
longitude : parseFloat ( item . longitude )
} , 1000 )
this . setState ( { textreach : item . lastname , texta : true } )
this . setState ( { markersearchfilter : [ ] } ) ;
this . onMarkerPress ( item )
}
refocusMap ( zoom = true ) {
if ( zoom ) {
if ( this . mapRef && this . state . myPosition !== undefined ) {
this . mapRef . animateCamera ( {
center : {
latitude : this . state . myPosition . latitude ,
longitude : this . state . myPosition . longitude
} ,
pitch : 0 ,
heading : 0 ,
2019-06-16 13:09:54 +00:00
} , 1000 )
2020-03-20 18:28:22 +00:00
}
} else {
if ( this . mapRef && this . state . myPosition !== undefined ) {
this . mapRef . animateCamera ( {
center : {
latitude : this . state . myPosition . latitude ,
longitude : this . state . myPosition . longitude
} ,
pitch : 0 ,
heading : 0 ,
altitude : 5 ,
zoom : 12
} , 1000 )
}
}
if ( this . map )
this . map . focusToUser ( )
}
renderCardSeashItem ( item ) {
return (
< TouchableOpacity
key = { item . id }
style = { { margin : 5 } } onPress = { ( ) => {
this . moveToMarker ( item )
} } >
< Text style = { { flex : 1 , fontSize : 14 , color : "#000" } } >
{ item . firstname === null ? item . adresse : item . firstname } < / T e x t >
< Text style = { { flex : 1 , fontSize : 12 } } > { item . lastname } < / T e x t >
< Text style = { { flex : 1 , fontSize : 13 , alignSelf : 'flex-end' , color : theme . accent } } > { item . network } < / T e x t >
< / T o u c h a b l e O p a c i t y > )
}
retrieveAllPoint ( dial _code ) {
/ * l e t m a r k e r s = t h i s . m a r k e r M a n a g e r . g e t L o c a l M a r k e r s ( )
console . log ( markers . length )
if ( markers . length > 0 ) {
console . debug ( "load from local" )
for ( let p of markers ) {
console . log ( ` ${ p . lastname } ` ) ;
}
this . markerManager . close ( ) ;
this . setState ( { allpoint : [ ] , loadingDialog : false } )
} else * /
getMakersFrom ( dial _code ) . then ( ( data ) => {
new Promise ( ( resolve , reject ) => {
try {
const ds = data . datas
this . setState ( { allpoint : ds , loadingDialog : false } )
2019-06-16 13:09:54 +00:00
2020-03-20 18:28:22 +00:00
resolve ( ds )
} catch ( e ) {
//Crashlytics.log(e.message)
console . warn ( e . message )
reject ( new Error ( e . message ) )
2019-06-16 13:09:54 +00:00
}
2020-03-20 18:28:22 +00:00
} ) . then ( ( ds ) => {
// this.markerManager.insertMarkers(ds).then((res)=>{console.warn(res)})
this . onLoadMore ( )
} ) . catch ( ( e ) => {
this . setState ( { loadingDialog : false } )
//Crashlytics.log(e.message)
console . log ( "on get marker" )
Alert . alert (
I18n . t ( "UNABLE_TO_CONNECT_TITLE" ) ,
I18n . t ( 'TEXT_NETWORK_UNABLE' )
,
[
{ text : I18n . t ( "NO" ) , onPress : ( ) => { BackHandler . exitApp ( ) } } ,
{
text : I18n . t ( "YES" ) , onPress : ( ) => {
this . setState ( { loadingDialog : true } )
if ( dial _code !== null && dial _code !== undefined )
this . retrieveAllPoint ( dial _code )
else
this . requestCameraPermission ( )
}
}
] ,
{ cancelable : false }
)
} )
} ) . catch ( ( e ) => {
console . log ( "on retreive>getmarkers" , e . message )
this . setState ( { loadingDialog : false } )
if ( this . state . allpoint . length <= 0 ) {
console . log ( "no point" )
Alert . alert (
I18n . t ( "UNABLE_TO_CONNECT_TITLE" ) ,
I18n . t ( 'TEXT_NETWORK_UNABLE' )
,
[
{ text : I18n . t ( "NO" ) , onPress : ( ) => { BackHandler . exitApp ( ) } } ,
{
text : I18n . t ( "YES" ) , onPress : ( ) => {
if ( this . state . allpoint . length <= 0 ) {
this . setState ( { loadingDialog : true } )
if ( dial _code !== null && dial _code !== undefined )
this . retrieveAllPoint ( dial _code )
else
this . requestCameraPermission ( )
}
}
}
2019-06-16 13:09:54 +00:00
2020-03-20 18:28:22 +00:00
] ,
{ cancelable : false }
)
}
} )
}
showLoadMoreView ( ) {
if ( this . state . isNeedLoadMore )
return ( < View style = { { flex : 1 , flexDirection : 'row' , width : responsiveWidth ( 90 ) } } >
< Button
onPress = { ( ) => {
this . setState ( { page : this . state . page + 1 } )
this . onLoadMore ( )
} }
style = { {
borderRadius : 48 ,
height : 48 ,
width : 48 ,
backgroundColor : "white" ,
borderColor : "transparent" ,
alignItems : "center" ,
justifyContent : "center"
} } >
< Icon name = { "refresh" }
size = { 32 }
/ >
< / B u t t o n >
< View style = { {
backgroundColor : "#FFFFFFA0" , width : responsiveWidth ( 20 ) , height : 30 , borderRadius : 12 ,
justifyContent : 'center' ,
alignItems : 'center' ,
alignSelf : 'center'
} } >
< Text > { ( this . state . markers . length === 0 ? this . state . markers . length : ( this . state . markers . length ) ) } / { this . state . currentNetworkSize } < / T e x t >
< / V i e w >
< / V i e w > )
}
showLoadingMapView ( ) {
if ( this . state . isLoadingMap )
2020-05-19 07:57:56 +00:00
return (
< View
style = { { flexDirection : 'row' , margin : 10 , width : responsiveWidth ( 95 ) , backgroundColor : 'white' , justifyContent : "center" , alignSelf : "center" } } >
< Text style = { { fontSize : 12 , alignSelf : 'center' } } > { I18n . t ( "LOADING_TEXT_MARKERS" ) + " " + this . filterOptions [ this . state . increasePas ] . value + " km " + I18n . t ( "DISTANCE_ARROUND" ) } < / T e x t >
< ProgressBarAndroid style = { { alignSelf : 'center' } } / >
< / V i e w >
)
2020-03-20 18:28:22 +00:00
}
loadingMarkers ( myPosition , filternetwork , value , p = undefined ) {
return new Promise ( ( resolve , reject ) => {
const { allpoint } = this . state
let page = p !== undefined ? p : this . state . page
let data = allpoint
. filter ( ( mark , index ) => {
const location = { longitude : parseFloat ( mark . longitude ) , latitude : parseFloat ( mark . latitude ) }
return geolib . getDistance ( myPosition , location ) <= ( value * 1000 )
&& mark . network === filternetwork . name
} )
. slice ( 0 , ( page + 1 ) * this . state . pas )
try {
const currentNetwork = allpoint
. filter ( ( mark , index ) => {
const location = { longitude : parseFloat ( mark . longitude ) , latitude : parseFloat ( mark . latitude ) }
return geolib . getDistance ( myPosition , location ) <= ( value * 1000 )
&& mark . network === filternetwork . name
} )
2020-05-30 21:58:22 +00:00
this . setState ( { currentNetworkSize : currentNetwork . length , showProgress : false , currentNetworkMarkers : currentNetwork } )
2020-03-20 18:28:22 +00:00
} catch ( e ) {
console . debug ( "after " + e . message )
}
2020-05-30 21:58:22 +00:00
if ( this . state . user . category !== 'geolocated' && this . state . user . category !== 'super'
&& this . state . user . category !== 'hyper' ) {
if ( data . length === 0 ) {
this . loadMoreIfHasNoPoint ( ) ;
}
}
2020-03-20 18:28:22 +00:00
console . debug ( "data:" , data , "value" + value * 1000 )
resolve ( data )
} )
}
2020-05-19 07:57:56 +00:00
loadMoreIfHasNoPoint = ( ) => {
2020-05-30 21:58:22 +00:00
/ * A l e r t . a l e r t (
'INFORMATIONS' ,
'' + this . state . increasePas
,
[
{ text : I18n . t ( "NO" ) , onPress : ( ) => { } } ,
{
text : I18n . t ( "YES" ) , onPress : ( ) => { }
2020-05-19 07:57:56 +00:00
}
2020-05-30 21:58:22 +00:00
] ,
{ cancelable : false }
) ; * /
if ( this . state . increasePas === this . filterOptions . length - 1 ) {
this . setState ( { increasePas : 0 , snack _visible : true , snack _text _message : I18n . t ( 'NO_NETWORK_MARKER' ) , isLoadingMap : false } )
setTimeout ( ( ) => {
this . setState ( { snack _visible : false } )
} , 5000 ) ;
}
else {
if ( this . state . increasePas + 1 !== this . filterOptions . length ) {
this . setState ( { increasePas : this . state . increasePas + 1 , isLoadingMap : true } , ( ) => {
this . onLoadMore ( ) ;
} ) ;
}
}
2020-05-19 07:57:56 +00:00
}
2020-03-20 18:28:22 +00:00
treatNewData ( pos , data , isFilter = false ) {
2020-05-30 21:58:22 +00:00
/ *
this . setState ( { isLoadingMap : false } ) ; * /
2020-03-20 18:28:22 +00:00
let items = data ;
2020-05-19 07:57:56 +00:00
2020-03-20 18:28:22 +00:00
if ( data . length > 0 ) {
let corrent = items ;
if ( isFilter )
this . setState ( { showProgress : false } )
if ( corrent . length > 0 ) {
this . setState ( { markers : corrent , prevRegion : pos } ) ;
}
if ( items . length < this . state . currentNetworkSize ) {
this . setState ( { isNeedLoadMore : true } )
} else {
2020-05-30 21:58:22 +00:00
if ( isFilter && items . length <= 0 ) {
this . setState ( { increasePas : 0 , showProgress : false } , ( ) => {
this . loadMoreIfHasNoPoint ( ) ;
} ) ;
}
2020-03-20 18:28:22 +00:00
this . setState ( { isNeedLoadMore : false } )
}
} else {
2020-05-30 21:58:22 +00:00
this . setState ( { showProgress : false , markers : data } ) ;
2020-03-20 18:28:22 +00:00
}
}
async treatPosition ( myPosition ) {
const myLastPosition = this . state . myPosition ;
console . log ( "on treatposition" )
if ( myPosition . longitude !== myLastPosition . longitude || myPosition . latitude !== myLastPosition . latitude ) {
this . setState ( { myPosition : myPosition } )
if ( this . map ) this . map . focusToUser ( )
getPositionInformation ( myPosition ) . then ( ( response ) => {
if ( response ) {
if ( response . results !== undefined ) {
if ( response . results . length > 0 ) {
let most = response . results [ 0 ]
let { address _components , formatted _address , place _id } = most
this . setState ( { address : address _components , textadress : formatted _address , place : place _id } )
let results = response . results ;
let shortcountry ;
let mcountry ;
for ( let i = 0 ; i < results [ 0 ] . address _components . length ; i ++ ) {
for ( let j = 0 ; j < results [ 0 ] . address _components [ i ] . types . length ; j ++ ) {
if ( results [ 0 ] . address _components [ i ] . types [ j ] === "country" ) {
mcountry = results [ 0 ] . address _components [ i ] ;
shortcountry = mcountry . short _name ;
this . setState ( {
shortCountry : mcountry . short _name ,
longCountry : mcountry . long _name
} )
}
}
}
console . warn ( "there " )
for ( let i of countries ) {
if ( i . code === shortcountry ) {
this . setState ( { indicatif : i . dial _code } )
this . getNetworks ( i . dial _code )
2019-06-16 13:09:54 +00:00
2020-03-20 18:28:22 +00:00
}
}
}
} else {
console . log ( "on treat 1" )
Alert . alert (
I18n . t ( "UNABLE_TO_CONNECT_TITLE" ) ,
I18n . t ( 'TEXT_NETWORK_UNABLE' )
,
[
{ text : I18n . t ( "NO" ) , onPress : ( ) => { BackHandler . exitApp ( ) } } ,
{
text : I18n . t ( "YES" ) , onPress : ( ) => {
this . treatPosition ( myPosition )
}
}
] ,
{ cancelable : false }
)
}
} else {
console . log ( "on treat 2" )
Alert . alert (
I18n . t ( "UNABLE_TO_CONNECT_TITLE" ) ,
I18n . t ( 'TEXT_NETWORK_UNABLE' )
,
[
{ text : I18n . t ( "NO" ) , onPress : ( ) => { BackHandler . exitApp ( ) } } ,
{
text : I18n . t ( "YES" ) , onPress : ( ) => {
this . treatPosition ( myPosition )
}
}
] ,
{ cancelable : false }
)
}
} ) . catch ( ( error ) => {
//Crashlytics.log(error.message)
console . log ( "on treat 3" )
2019-06-16 13:09:54 +00:00
Alert . alert (
2020-03-20 18:28:22 +00:00
I18n . t ( "UNABLE_TO_CONNECT_TITLE" ) ,
I18n . t ( 'TEXT_NETWORK_UNABLE' )
,
[
{ text : I18n . t ( "NO" ) , onPress : ( ) => { BackHandler . exitApp ( ) } } ,
{
text : I18n . t ( "YES" ) , onPress : ( ) => {
this . treatPosition ( myPosition )
}
}
] ,
{ cancelable : false }
2019-06-16 13:09:54 +00:00
)
2020-03-20 18:28:22 +00:00
} ) ;
const reg = {
latitude : myPosition . latitude ,
longitude : myPosition . longitude ,
latitudeDelta : 0.03 ,
longitudeDelta : 0.01 ,
}
this . setState ( { myPosition : myPosition , region : reg } ) ;
if ( this . mapRef && ! this . state . myPositionIsAnimated ) {
this . mapRef . animateCamera ( {
center : myPosition ,
pitch : 0 ,
heading : 0 ,
altitude : 5 ,
zoom : 13
} , 1000 )
this . setState ( { myPositionIsAnimated : true } )
2019-06-16 13:09:54 +00:00
2020-03-20 18:28:22 +00:00
}
2019-06-16 13:09:54 +00:00
2020-03-20 18:28:22 +00:00
}
2019-06-16 13:09:54 +00:00
2020-03-20 18:28:22 +00:00
}
2019-06-16 13:09:54 +00:00
}
2020-04-18 19:59:05 +00:00
const mapStateToProps = state => ( {
2020-04-18 23:19:11 +00:00
loading : state . authKeyReducer . loading ,
authKey : state . authKeyReducer . authKey ,
error : state . authKeyReducer . error
2020-04-18 19:59:05 +00:00
} ) ;
const mapDispatchToProps = dispatch => bindActionCreators ( {
2020-04-20 10:43:01 +00:00
getAuthApiKey ,
2020-08-11 09:42:31 +00:00
getWalletActivated ,
saveOnesignalIdsAction
2020-04-18 19:59:05 +00:00
} , dispatch ) ;
export default connect ( mapStateToProps , mapDispatchToProps ) ( Home ) ;
2020-03-20 18:28:22 +00:00
const markerDetails = StyleSheet . create ( {
solde : {
backgroundColor : theme . accent ,
color : "white" ,
marginLeft : 10 ,
padding : 5 ,
fontSize : 9 ,
borderRadius : 100 ,
} ,
title : {
color : 'black' ,
marginLeft : 10 ,
flex : 1 ,
fontSize : 11 ,
fontWeight : 'bold' ,
} ,
subtitle2 : {
color : 'black' ,
marginLeft : 10 ,
flex : 1 ,
fontSize : 10 ,
fontWeight : 'bold' ,
} ,
subtitle : {
color : 'black' ,
marginLeft : 9 ,
fontSize : 9
} ,
otherInformation : {
marginLeft : 13 ,
fontSize : 9
} ,
reseau : {
marginLeft : 10 ,
fontWeight : 'bold' ,
color : theme . accent ,
fontSize : 10
} ,
container : {
flex : 1 ,
width : responsiveWidth ( 95 ) ,
alignSelf : "center" ,
paddingTop : responsiveHeight ( 1 ) ,
marginBottom : responsiveHeight ( 1 ) ,
backgroundColor : "white" ,
justifyContent : 'flex-start'
}
2019-06-16 13:09:54 +00:00
} )
const styles = StyleSheet . create ( {
2020-03-20 18:28:22 +00:00
container : {
flex : 1 ,
backgroundColor : '#FFF' ,
} ,
panelContainer : {
position : 'absolute' ,
top : 0 ,
bottom : 0 ,
left : 0 ,
right : 0 ,
} ,
panel : {
height : 600 ,
padding : 20 ,
backgroundColor : '#f7f5eee8' ,
} ,
header : {
backgroundColor : '#f7f5eee8' ,
shadowColor : '#000000' ,
paddingTop : 20 ,
borderTopLeftRadius : 20 ,
borderTopRightRadius : 20 ,
} ,
panelHandle : {
width : 40 ,
height : 8 ,
borderRadius : 4 ,
backgroundColor : '#00000040' ,
marginBottom : 10 ,
} ,
panelTitle : {
fontSize : 27 ,
height : 35 ,
} ,
panelSubtitle : {
fontSize : 14 ,
color : 'gray' ,
height : 30 ,
marginBottom : 10 ,
} ,
panelButton : {
padding : 20 ,
borderRadius : 10 ,
backgroundColor : '#318bfb' ,
alignItems : 'center' ,
marginVertical : 10 ,
} ,
panelButtonTitle : {
fontSize : 17 ,
fontWeight : 'bold' ,
color : 'white' ,
} ,
fab : {
position : 'absolute' ,
margin : 16 ,
right : 0 ,
bottom : 0 ,
} ,
networkname : {
backgroundColor : theme . primary ,
padding : 5 ,
color : "white" ,
marginRight : 10 ,
fontSize : 10 ,
borderRadius : 12 ,
} ,
myClusterTextStyle : {
color : "white"
} ,
myClusterStyle : {
backgroundColor : theme . accent ,
height : 32 ,
justifyContent : 'center' ,
alignItems : 'center' ,
width : 32 ,
borderRadius : 16
} ,
rowContainer : {
height : 52 ,
flex : 1 ,
flexDirection : 'row' ,
justifyContent : 'flex-start' ,
alignItems : 'center' ,
} ,
iconContainer : {
marginRight : 16 ,
} ,
mapmarker : {
width : 52 ,
height : 52 ,
} ,
slidingup : {
backgroundColor : "transparent" ,
position : "absolute" ,
height : slideHeight ,
bottom : 0 ,
left : responsiveWidth ( 2.5 ) ,
width : responsiveWidth ( 95 ) ,
zIndex : 1
} ,
panelHeader : {
height : 120 ,
backgroundColor : '#b197fc' ,
alignItems : 'center' ,
justifyContent : 'center'
} ,
favoriteIcon : {
left : responsiveWidth ( 75 ) ,
backgroundColor : theme . primary ,
width : 64 ,
justifyContent : 'center' ,
alignContent : 'center' ,
bottom : - 64 ,
position : 'absolute' ,
height : 64 ,
padding : 8 ,
zIndex : 1 ,
borderRadius : 32 ,
} ,
hambuger : {
color : theme . primary ,
borderColor : theme . primary ,
borderWidth : 1 ,
alignSelf : 'center' ,
padding : 5 ,
} ,
topBar : {
position : 'absolute' ,
alignSelf : 'center' ,
justifyContent : 'center' ,
borderRadius : 10 ,
alignItems : 'center' ,
marginTop : responsiveHeight ( 4 ) ,
width : responsiveWidth ( 90 ) ,
} ,
searchInput : {
flex : 1 ,
fontSize : 14
} ,
search : {
width : responsiveWidth ( 70 ) ,
height : responsiveHeight ( 10 ) ,
backgroundColor : '#00000000' ,
} ,
map : {
width : responsiveWidth ( 100 ) ,
height : responsiveHeight ( 100 ) ,
} ,
backgroundd _drawer : {
backgroundColor : '#000' ,
} ,
cardsearch : {
width : responsiveWidth ( 90 ) ,
height : responsiveHeight ( 10 ) ,
position : 'absolute' ,
alignSelf : 'center' ,
marginTop : 5 ,
} ,
actionButtonIcon : {
fontSize : 20 ,
height : 22 ,
color : 'white' ,
} ,
welcome : {
fontSize : 20 ,
textAlign : 'center' ,
margin : 10 ,
} ,
instructions : {
textAlign : 'center' ,
color : '#333333' ,
marginBottom : 5 ,
} ,
2020-07-02 14:35:00 +00:00
} ) ;
