2338 lines
89 KiB
JavaScript
2338 lines
89 KiB
JavaScript
|
/**
|
||
|
|
* @format
|
||
|
|
* @flow
|
||
|
|
*/
|
||
|
|
import React, {Component} from 'react';
|
||
|
|
import {
|
||
|
|
Platform, StyleSheet, Text,
|
||
|
|
TouchableWithoutFeedback, View, TextInput,
|
||
|
|
Animated, Dimensions, Image, PermissionsAndroid,
|
||
|
|
AsyncStorage,
|
||
|
|
StatusBar, TouchableNativeFeedback, TouchableOpacity,BackHandler,Alert,ProgressBarAndroid
|
||
|
|
, FlatList
|
||
|
|
} from 'react-native';
|
||
|
|
import IMap from './IMap'
|
||
|
|
import ActionButton from 'react-native-action-button';
|
||
|
|
import {CardView} from "react-native-cardview"
|
||
|
|
import {responsiveHeight,responsiveWidth,} from 'react-native-responsive-dimensions';
|
||
|
|
import { material } from 'react-native-typography';
|
||
|
|
import {getMakersFrom,loadGroupeAgent,getPositionInformation} from './../../webservice/MapService';
|
||
|
|
import {readUser,getCountryNetwork,getPasObject} from './../../webservice/AuthApi'
|
||
|
|
import BaseScreen from './../BaseScreen'
|
||
|
|
import isEqual from 'lodash/isEqual';
|
||
|
|
import Button from 'apsl-react-native-button'
|
||
|
|
import I18n from 'react-native-i18n'
|
||
|
|
|
||
|
|
import Configuration from "../../webservice/persistences/Configuration";
|
||
|
|
import {MaterialDialog} from "react-native-material-dialog";
|
||
|
|
import { ProgressDialog,Dialog } from 'react-native-simple-dialogs';
|
||
|
|
const countries=require("./../../utils/country_code.json")
|
||
|
|
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';
|
||
|
|
let geolib=require("geolib")
|
||
|
|
require('./../../utils/Translations')
|
||
|
|
import InterticielAds from './../ads/InterticielAds'
|
||
|
|
import SnackBar from 'react-native-snackbar-component'
|
||
|
|
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'
|
||
|
|
import BottomSheet from 'reanimated-bottom-sheet'
|
||
|
|
const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');
|
||
|
|
import MarkerManager from './../../webservice/persistences/MarkerManager'
|
||
|
|
const slideHeight=responsiveHeight(30)>270?270:responsiveHeight(30)
|
||
|
|
//var Fabric = require('react-native-fabric');
|
||
|
|
//var { Crashlytics } = Fabric
|
||
|
|
|
||
|
|
|
||
|
|
const defaultProps = {
|
||
|
|
enableHack: false,
|
||
|
|
geolocationOptions: GEOLOCATION_OPTIONS,
|
||
|
|
};
|
||
|
|
|
||
|
|
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() {
|
||
|
|
const {user, prevRegion,boundarie} = this.state
|
||
|
|
if (user.category === undefined || user.category === null) {
|
||
|
|
if (this.promiseRegion) this.promiseRegion.done()
|
||
|
|
this.promiseRegion = new Promise(async (resolve, reject) => {
|
||
|
|
this.setState({isNeedLoadMore: false, isLoadingMap: true})
|
||
|
|
const camera = await this.mapRef.getCamera()
|
||
|
|
const zoom = camera.zoom - 10
|
||
|
|
let res = []
|
||
|
|
this.setState({isLoadingMap: true})
|
||
|
|
if (this.state.filternetworkTemp !== undefined) {
|
||
|
|
let net = this.state.filternetworkTemp.id
|
||
|
|
res = this.state.networks.filter(function (item) {
|
||
|
|
return item.id === net
|
||
|
|
})
|
||
|
|
}
|
||
|
|
if (res.length > 0) {
|
||
|
|
let reseau = res[0];
|
||
|
|
const pos = {longitude: user.longitude, latitude: user.latitude}
|
||
|
|
try {
|
||
|
|
//let data = await loadMarkers(pos, reseau, 5000, this.state.page)
|
||
|
|
let data=await this.loadingMarkers(this.state.myPosition,this.state.filternetwork,this.state.value)
|
||
|
|
this.treatNewData(pos,data,false)
|
||
|
|
} catch (e) {
|
||
|
|
console.debug(e.message)
|
||
|
|
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)
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
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)=>{
|
||
|
|
try{
|
||
|
|
this.setState({pas:parseInt(value)});
|
||
|
|
}catch(e){
|
||
|
|
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
this.componentDidAppear()
|
||
|
|
});
|
||
|
|
this.blurListener=navigation.addListener("didBlur",(payload)=>{
|
||
|
|
this.componentDidDisappear()
|
||
|
|
})
|
||
|
|
this._retrieveData()
|
||
|
|
//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.'
|
||
|
|
}
|
||
|
|
)
|
||
|
|
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)
|
||
|
|
}
|
||
|
|
|
||
|
|
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 {
|
||
|
|
this.getPosition()
|
||
|
|
this.watchLocation();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
console.log("Camera permission granted")
|
||
|
|
|
||
|
|
} else {
|
||
|
|
console.log("Camera permission denied")
|
||
|
|
}
|
||
|
|
} 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){
|
||
|
|
console.log(this.state.user)
|
||
|
|
if (c.length > 0 && pays ) {
|
||
|
|
|
||
|
|
this.setState({filternetwork: c[0], myNetwork: c[0],filternetworkTemp:c[0]})
|
||
|
|
this.retrieveAllPoint(pays)
|
||
|
|
|
||
|
|
}else{
|
||
|
|
console.log("on getnetworks",result)
|
||
|
|
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) => {
|
||
|
|
console.log("error getnetwork"+e.message)
|
||
|
|
// Crashlytics.log("get networks"+e.message)
|
||
|
|
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}
|
||
|
|
) })
|
||
|
|
|
||
|
|
|
||
|
|
} else {
|
||
|
|
console.log("get network missing pays")
|
||
|
|
var msg = "impossible de récupérer le nom du pays";
|
||
|
|
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.requestCameraPermission()
|
||
|
|
}}
|
||
|
|
],
|
||
|
|
{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)
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}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,
|
||
|
|
zoom: 13
|
||
|
|
}, 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)
|
||
|
|
|
||
|
|
/* 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}
|
||
|
|
)*/
|
||
|
|
}
|
||
|
|
},
|
||
|
|
GEOLOCATION_OPTIONS
|
||
|
|
);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidDisappear() {
|
||
|
|
BackHandler.removeEventListener('hardwareBackPress', this.backPressed);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidAppear() {
|
||
|
|
BackHandler.addEventListener('hardwareBackPress', this.backPressed);
|
||
|
|
// this.props.start();
|
||
|
|
|
||
|
|
readUser().then((user) => {
|
||
|
|
if (user) {
|
||
|
|
if(user.category){
|
||
|
|
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});
|
||
|
|
}
|
||
|
|
if(this.state.myPosition)
|
||
|
|
this.refocusMap()
|
||
|
|
/*if (Platform.OS === 'android') {
|
||
|
|
// 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})
|
||
|
|
});
|
||
|
|
this._renderFavoriteIcon = this._renderFavoriteIcon.bind(this);
|
||
|
|
this.makeMarkerInformation = this.makeMarkerInformation.bind(this);
|
||
|
|
|
||
|
|
// IlinkEmitter.on("langueChange", this.updateLangue.bind(this))
|
||
|
|
|
||
|
|
};
|
||
|
|
updateLangue(){
|
||
|
|
this.props.navigation.setParams({name:I18n.t('MAP')})
|
||
|
|
let rand=Math.random()
|
||
|
|
this.setState({lang:rand})
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
makeCardSearch() {
|
||
|
|
if(!this.state.isPubShow){
|
||
|
|
return (
|
||
|
|
<View style={styles.topBar}>
|
||
|
|
<Surface
|
||
|
|
|
||
|
|
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()}
|
||
|
|
>
|
||
|
|
|
||
|
|
<Text
|
||
|
|
style={styles.hambuger}
|
||
|
|
>
|
||
|
|
Menu
|
||
|
|
</Text>
|
||
|
|
|
||
|
|
</TouchableOpacity>
|
||
|
|
<View style={{flex:1}}></View>
|
||
|
|
|
||
|
|
<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}</Text>
|
||
|
|
{this.renderSupplementInformation()}
|
||
|
|
</View>
|
||
|
|
{this.showLoadingMapView()}
|
||
|
|
|
||
|
|
</Surface>
|
||
|
|
|
||
|
|
</View>
|
||
|
|
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
renderSupplementInformation(){
|
||
|
|
if(this.state.user && this.state.user.category==="geolocated"){
|
||
|
|
return (<View/>)
|
||
|
|
}else
|
||
|
|
return (<View style={{flexDirection:"row"}}>
|
||
|
|
<View style={{backgroundColor:"#FFFFFFA0",
|
||
|
|
justifyContent:'center',
|
||
|
|
alignItems:'center',
|
||
|
|
alignSelf:'center'}}>
|
||
|
|
<Text>{this.state.markers.length+" "+(this.state.currentNetworkSize===0?"":"/"+this.state.currentNetworkSize)} </Text>
|
||
|
|
|
||
|
|
</View>
|
||
|
|
<TouchableOpacity
|
||
|
|
onPress={() => {
|
||
|
|
this.setState({page:this.state.page + 1})
|
||
|
|
this.onLoadMore()
|
||
|
|
}}
|
||
|
|
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"}
|
||
|
|
/>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
_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"}}>
|
||
|
|
<Text style={markerDetails.title}>{name}</Text>
|
||
|
|
<Icon.Button name={"close"} size={24} color={"red"} backgroundColor={"transparent"}
|
||
|
|
onPress={() => {
|
||
|
|
this.toggleSlidingUp(false)
|
||
|
|
|
||
|
|
}
|
||
|
|
}></Icon.Button>
|
||
|
|
</View>
|
||
|
|
<Text style={markerDetails.subtitle2}>{marker.adresse}</Text>
|
||
|
|
<View style={{flexDirection:"row",alignItems:"center"}}>
|
||
|
|
<Text style={markerDetails.reseau}>{marker.network}</Text>
|
||
|
|
<Text style={markerDetails.solde}>{I18n.t('SOLDE_UNVAIBLE')}</Text>
|
||
|
|
</View>
|
||
|
|
<Text style={markerDetails.reseau}>{distanceTxt}</Text>
|
||
|
|
<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")}</Text></View>
|
||
|
|
</Button>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
</View>)
|
||
|
|
}
|
||
|
|
|
||
|
|
_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}</Text>
|
||
|
|
<Icon.Button name={"close"} size={24} color={"red"} backgroundColor={"transparent"}
|
||
|
|
onPress={() => {
|
||
|
|
this.toggleSlidingUp(false)
|
||
|
|
}
|
||
|
|
}></Icon.Button>
|
||
|
|
</View>
|
||
|
|
<Text style={markerDetails.subtitle2}>{marker.adresse}</Text>
|
||
|
|
<View style={{flexDirection:"row",alignItems:"center"}}>
|
||
|
|
<Text style={markerDetails.reseau}>{marker.network}</Text>
|
||
|
|
<Text style={markerDetails.solde}>{I18n.t('SOLDE_UNVAIBLE')}</Text>
|
||
|
|
</View>
|
||
|
|
<Text style={markerDetails.reseau}>{distanceTxt}</Text>
|
||
|
|
|
||
|
|
<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")}</Text></View>
|
||
|
|
</Button>
|
||
|
|
</View>
|
||
|
|
</CardView>);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
renderCurrentMarker(marker){
|
||
|
|
if(marker){
|
||
|
|
return(<View>
|
||
|
|
<View style={{flexDirection: "row", justifyContent: "flex-end", alignItems: 'center'}}>
|
||
|
|
<Text style={markerDetails.title}>{name}</Text>
|
||
|
|
<Icon.Button name={"close"} size={24} color={"red"} backgroundColor={"transparent"}
|
||
|
|
on dPress={() => {
|
||
|
|
this.toggleSlidingUp(false)
|
||
|
|
}
|
||
|
|
}></Icon.Button>
|
||
|
|
</View>
|
||
|
|
<Text style={markerDetails.title}>{marker.adresse}</Text>
|
||
|
|
<View style={{flexDirection:"row"}}>
|
||
|
|
<Text style={markerDetails.reseau}>{marker.network}</Text>
|
||
|
|
<Text style={markerDetails.solde}>{I18n.t('SOLDE_UNVAIBLE')}</Text>
|
||
|
|
</View>
|
||
|
|
<Text style={markerDetails.reseau}>{distanceTxt}</Text>
|
||
|
|
|
||
|
|
<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")}</Text></View>
|
||
|
|
</Button>
|
||
|
|
</View></View>)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
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</Text>)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
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}/>
|
||
|
|
</ActionButton.Item>
|
||
|
|
<ActionButton.Item buttonColor='#3498db' title={I18n.t("REPOSITIONNING")} onPress={() => this.refocusMap(false)}
|
||
|
|
size={48}
|
||
|
|
>
|
||
|
|
<Icon name="person-pin" style={styles.actionButtonIcon}/>
|
||
|
|
</ActionButton.Item>
|
||
|
|
|
||
|
|
<ActionButton.Item buttonColor={theme.primary} title={I18n.t("CHANGE_MAP")}
|
||
|
|
onPress={() => {
|
||
|
|
this.onMapTypeChange();
|
||
|
|
}}
|
||
|
|
size={48}
|
||
|
|
>
|
||
|
|
<Icon name="layers" style={styles.actionButtonIcon}/>
|
||
|
|
</ActionButton.Item>
|
||
|
|
|
||
|
|
</ActionButton>)
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
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}/>
|
||
|
|
</ActionButton.Item>
|
||
|
|
<ActionButton.Item buttonColor='#3498db' title={I18n.t("REPOSITIONNING")}
|
||
|
|
onPress={() => this.refocusMap(false)}
|
||
|
|
size={48}
|
||
|
|
>
|
||
|
|
<Icon name="person-pin" style={styles.actionButtonIcon}/>
|
||
|
|
</ActionButton.Item>
|
||
|
|
<ActionButton.Item buttonColor='#9b59b6' title={I18n.t("CHANGE_MAP")}
|
||
|
|
onPress={() => {
|
||
|
|
this.onMapTypeChange();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
size={48}
|
||
|
|
>
|
||
|
|
<Icon name="layers" style={styles.actionButtonIcon}/>
|
||
|
|
</ActionButton.Item>
|
||
|
|
<ActionButton.Item buttonColor='#3498db' title={I18n.t("PRINT_MY_NETWORK")}
|
||
|
|
size={48}
|
||
|
|
onPress={() => {
|
||
|
|
this.showMynetworkMap();
|
||
|
|
}}>
|
||
|
|
<Icon name="group-work" style={styles.actionButtonIcon}/>
|
||
|
|
</ActionButton.Item>
|
||
|
|
<ActionButton.Item buttonColor='#3498db' title={I18n.t("CHANGE_NETWORK")}
|
||
|
|
size={48}
|
||
|
|
onPress={() => {
|
||
|
|
this.showNewDialogNetwork();
|
||
|
|
}}>
|
||
|
|
<Icon name="rss-feed" style={styles.actionButtonIcon}/>
|
||
|
|
</ActionButton.Item>
|
||
|
|
|
||
|
|
</ActionButton>
|
||
|
|
|
||
|
|
)
|
||
|
|
|
||
|
|
}
|
||
|
|
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()
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
makeSlidingUp() {
|
||
|
|
/*return (
|
||
|
|
<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()}
|
||
|
|
</View>
|
||
|
|
</Animated.View>)*/
|
||
|
|
return ( <BottomSheet
|
||
|
|
ref={(r)=>{this.bottomSheetRef=r}}
|
||
|
|
snapPoints = {[0,"30%"]}
|
||
|
|
renderHeader = {()=>this.markerView()}
|
||
|
|
/>)
|
||
|
|
}
|
||
|
|
_renderFavoriteIcon() {
|
||
|
|
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'}}
|
||
|
|
/>
|
||
|
|
</Animated.View>
|
||
|
|
</TouchableNativeFeedback>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
geInitialState() {
|
||
|
|
return {
|
||
|
|
region: {
|
||
|
|
latitude: 0,
|
||
|
|
longitude: 0,
|
||
|
|
latitudeDelta: 0.015,
|
||
|
|
longitudeDelta: 0.0121,
|
||
|
|
},
|
||
|
|
pas:100,
|
||
|
|
prevRegion: {
|
||
|
|
latitude: 0,
|
||
|
|
longitude: 0,
|
||
|
|
},
|
||
|
|
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,
|
||
|
|
};
|
||
|
|
};
|
||
|
|
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';
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
newState.text = 'hybrid';
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
newState.text="terrain";
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
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={()=>{
|
||
|
|
readUser().then((user) => {
|
||
|
|
if (user) {
|
||
|
|
this.setState({user: user})
|
||
|
|
this.setState({network: user.network});
|
||
|
|
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();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
}}
|
||
|
|
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()}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
renderInner(){
|
||
|
|
return (<View style={{flex:1,backgroundColor:"green"}}>
|
||
|
|
<Text>Freud junior</Text>
|
||
|
|
</View>) }
|
||
|
|
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}/>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<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"}}
|
||
|
|
|
||
|
|
onPress={()=>
|
||
|
|
{
|
||
|
|
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}}
|
||
|
|
onPress={()=>{
|
||
|
|
this.bottomSheetRef.snapTo(2)
|
||
|
|
this.setState({showdialogNetworkVisible:true})
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
</View>
|
||
|
|
{this.makeMarkerButton()}
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</React.Fragment>)
|
||
|
|
}
|
||
|
|
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')} </Text>
|
||
|
|
<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)}</Text> km {I18n.t("DISTANCE_ARROUND")}
|
||
|
|
</Text>
|
||
|
|
|
||
|
|
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection:"row",flex:1}}>
|
||
|
|
<Button style={{flex:1}}/>
|
||
|
|
<Button style={{flex:1}}/>
|
||
|
|
|
||
|
|
</View>
|
||
|
|
</View>)
|
||
|
|
}
|
||
|
|
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")}</Text></View>
|
||
|
|
</Button>
|
||
|
|
</View>)}
|
||
|
|
else return ( <View style={{flex:2,flexDirection:'row',justifyContent:'flex-end',marginEnd:20}}>
|
||
|
|
</View>)
|
||
|
|
|
||
|
|
}
|
||
|
|
renderOldHome(){
|
||
|
|
return (
|
||
|
|
<View style={styles.container}>
|
||
|
|
<StatusBar
|
||
|
|
backgroundColor="#00000030"
|
||
|
|
barStyle="light-content"
|
||
|
|
translucent={true}
|
||
|
|
/>
|
||
|
|
{this.state.loadingDialog?
|
||
|
|
<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'}}
|
||
|
|
|
||
|
|
>
|
||
|
|
<Text style={{fontSize:20,color:'white',fontWeight:'bold'}}>{I18n.t("LOADING_DOTS")}</Text>
|
||
|
|
</View>:null
|
||
|
|
}
|
||
|
|
|
||
|
|
<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={()=>{
|
||
|
|
readUser().then((user) => {
|
||
|
|
if (user) {
|
||
|
|
this.setState({user: user})
|
||
|
|
this.setState({network: user.network});
|
||
|
|
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();
|
||
|
|
}}
|
||
|
|
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
}}
|
||
|
|
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()}
|
||
|
|
{this.makeSlidingUp()}
|
||
|
|
{this.makeDialogLoader()}
|
||
|
|
{this.makeDistanceDialog()}
|
||
|
|
{this.makeNetworkChangeDialog()}
|
||
|
|
<SnackBar visible={this.state.snack_visible}
|
||
|
|
textMessage={this.state.snack_text_message}
|
||
|
|
autoHidingTime={5000}
|
||
|
|
/>
|
||
|
|
{this.makeActionButon()}
|
||
|
|
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
renderTutoOldHome(){
|
||
|
|
return (<View style={{flex:1}}>
|
||
|
|
|
||
|
|
<CopilotStep text="This is a hello world example!" order={1} name="hello">
|
||
|
|
{this.makeCardSearch()}
|
||
|
|
</CopilotStep>
|
||
|
|
</View>)
|
||
|
|
}
|
||
|
|
render() {
|
||
|
|
|
||
|
|
if(false){
|
||
|
|
return this.renderBottomHome()
|
||
|
|
}else
|
||
|
|
return this.renderOldHome()
|
||
|
|
}
|
||
|
|
renderCurrentMarker(){
|
||
|
|
if(this.state.currentMarker){
|
||
|
|
return ( <View style={{height: 200, backgroundColor: '#fff'}} >
|
||
|
|
{this.makeMarkerInformation()}
|
||
|
|
</View>)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
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;
|
||
|
|
|
||
|
|
this.setState({filternetwork:myNetwork,page:0,filternetworkTemp:myNetwork,loadingDialog:true})
|
||
|
|
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')} </Text>
|
||
|
|
|
||
|
|
<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)}</Text> km {I18n.t("DISTANCE_ARROUND")}
|
||
|
|
</Text>
|
||
|
|
|
||
|
|
</MaterialDialog>)
|
||
|
|
}
|
||
|
|
|
||
|
|
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}/>
|
||
|
|
</ActionButton.Item>
|
||
|
|
|
||
|
|
<ActionButton.Item buttonColor={theme.primary} title={I18n.t("CHANGE_MAP")}
|
||
|
|
onPress={() => {
|
||
|
|
this.onMapTypeChange();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
size={48}
|
||
|
|
>
|
||
|
|
<Icon name="layers" style={styles.actionButtonIcon}/>
|
||
|
|
</ActionButton.Item>
|
||
|
|
</ActionButton>)
|
||
|
|
}
|
||
|
|
|
||
|
|
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)}/>
|
||
|
|
</MaterialDialog>)
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
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}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
<Text style={material.subheading}>{row.name}</Text>
|
||
|
|
</View>
|
||
|
|
</TouchableOpacity>
|
||
|
|
);
|
||
|
|
|
||
|
|
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"
|
||
|
|
|
||
|
|
})
|
||
|
|
console.log(e)
|
||
|
|
})
|
||
|
|
} 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'}}
|
||
|
|
>
|
||
|
|
<Icon
|
||
|
|
name="near-me"
|
||
|
|
size={16}
|
||
|
|
color='white'
|
||
|
|
style={{alignSelf: 'center'}}
|
||
|
|
/>
|
||
|
|
<Text
|
||
|
|
style={{fontSize: 15, color: 'white', marginLeft: responsiveWidth(2)}}
|
||
|
|
>{I18n.t("WAY")}</Text></View>
|
||
|
|
</Button>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
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})
|
||
|
|
/* this.mapRef.animateCamera({
|
||
|
|
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)
|
||
|
|
*/}
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<View
|
||
|
|
style={{flexDirection: 'row'}}
|
||
|
|
>
|
||
|
|
<Icon
|
||
|
|
name="close"
|
||
|
|
size={16}
|
||
|
|
color='white'
|
||
|
|
style={{alignSelf: 'center'}}
|
||
|
|
/>
|
||
|
|
<Text
|
||
|
|
style={{fontSize: 15, color: 'white', marginLeft: responsiveWidth(2)}}
|
||
|
|
>{I18n.t("CANCEL")}</Text></View>
|
||
|
|
</Button>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
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}/>
|
||
|
|
</ActionButton.Item>
|
||
|
|
|
||
|
|
<ActionButton.Item buttonColor={theme.primary} title={I18n.t("CHANGE_MAP")}
|
||
|
|
onPress={() => {
|
||
|
|
this.onMapTypeChange();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
size={48}
|
||
|
|
>
|
||
|
|
|
||
|
|
<Icon name="map" style={styles.actionButtonIcon}/>
|
||
|
|
</ActionButton.Item>
|
||
|
|
|
||
|
|
</ActionButton>)
|
||
|
|
}
|
||
|
|
|
||
|
|
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,
|
||
|
|
}, 1000)
|
||
|
|
}
|
||
|
|
}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}</Text>
|
||
|
|
<Text style={{flex: 1, fontSize: 12}}>{item.lastname}</Text>
|
||
|
|
<Text style={{flex: 1, fontSize: 13, alignSelf: 'flex-end', color: theme.accent}}>{item.network}</Text>
|
||
|
|
</TouchableOpacity>)
|
||
|
|
}
|
||
|
|
|
||
|
|
retrieveAllPoint(dial_code) {
|
||
|
|
/* let markers= this.markerManager.getLocalMarkers()
|
||
|
|
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})
|
||
|
|
|
||
|
|
resolve(ds)
|
||
|
|
}catch (e) {
|
||
|
|
//Crashlytics.log(e.message)
|
||
|
|
console.warn(e.message)
|
||
|
|
reject(new Error(e.message))
|
||
|
|
}
|
||
|
|
}).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()
|
||
|
|
}}
|
||
|
|
}
|
||
|
|
|
||
|
|
],
|
||
|
|
{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}
|
||
|
|
|
||
|
|
/>
|
||
|
|
</Button>
|
||
|
|
<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} </Text>
|
||
|
|
</View>
|
||
|
|
</View>)
|
||
|
|
}
|
||
|
|
|
||
|
|
showLoadingMapView() {
|
||
|
|
if(this.state.isLoadingMap)
|
||
|
|
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.state.value+" km "+I18n.t("DISTANCE_ARROUND")}</Text>
|
||
|
|
<ProgressBarAndroid style={{alignSelf: 'center'}}/>
|
||
|
|
</View>)
|
||
|
|
}
|
||
|
|
|
||
|
|
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})
|
||
|
|
this.setState({currentNetworkSize:currentNetwork.length,currentNetworkMarkers:currentNetwork})
|
||
|
|
}catch(e){
|
||
|
|
console.debug("after "+e.message)
|
||
|
|
}
|
||
|
|
console.debug("data:",data,"value"+value*1000)
|
||
|
|
resolve(data)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
treatNewData(pos,data, isFilter = false) {
|
||
|
|
this.setState({isLoadingMap: false})
|
||
|
|
let items = data;
|
||
|
|
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 {
|
||
|
|
if(isFilter && items.length<=0){
|
||
|
|
this.setState({snack_visible: true, snack_text_message: "Ce réseau n'a aucun point"})
|
||
|
|
setTimeout(() => {
|
||
|
|
this.setState({snack_visible: false})
|
||
|
|
}, 5000)
|
||
|
|
}
|
||
|
|
this.setState({isNeedLoadMore: false})
|
||
|
|
|
||
|
|
}
|
||
|
|
}else if(isFilter){
|
||
|
|
this.setState({markers:data} );
|
||
|
|
this.setState({
|
||
|
|
snack_visible: true, snack_text_message: I18n.t('NO_NETWORK_CORRESPONDING')
|
||
|
|
|
||
|
|
})
|
||
|
|
setTimeout(() => {
|
||
|
|
this.setState({snack_visible: false})
|
||
|
|
}, 5000)
|
||
|
|
|
||
|
|
|
||
|
|
}else{
|
||
|
|
this.setState({markers: data});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
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)
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}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")
|
||
|
|
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}
|
||
|
|
)
|
||
|
|
});
|
||
|
|
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})
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
export default Home;
|
||
|
|
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'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
});
|