ChargEco/Strides-APP/app/pages/home/Home.js

/**
 * 首页地图页
 * @邠心vbe on 2021/08/13
 */
import React, { Component } from 'react';
import { View, Text, Pressable, Image, StyleSheet, BackHandler } from 'react-native';
import {check, request, openSettings, PERMISSIONS, RESULTS} from 'react-native-permissions';
import apiStation from '../../api/apiStation';
import Dialog from '../../components/Dialog';
import { Styles } from '../../components/Toolbar';
import utils from '../../utils/utils';
import { PageList } from '../Router';
import { SettingUtil } from '../Settings';
import Maps from './maps/Maps';
import MapTool from './maps/MapTool';
import TopInfo from './maps/TopInfo';

export default class HomePage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      region: {
        latitude: 1.3532623163977149,
        longitude: 103.87092316860532,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421
      },
      mapReady: false,
      stationInfo: {},
      stopList: [],
      hasPermission: isIOS
    };
    this.denied = true;
    this.backSeconds = 0;
    this.refreshTime = 0;
    this.settingInfo = {}
    this.filter = {
      parkingFee: 'ALL',
      connectorType: ''
    };
  }

  componentDidMount() {
    const navigation = this.props.navigation;
    navigation.addListener('focus', () => {
      //toastShort('onResume')
      this.setState({
        stationInfo: {}
      });
      SettingUtil.getSettings(set => {
        console.log("获取设置信息", set);
        this.settingInfo = set;
        this.checkPermission2Geo();
      })
      
    });

    navigation.addListener('blur', () => {
      //toastShort('onStop')
      setTimeout(() => {
        navigation.closeDrawer();
      }, 200);
    });

    navigation.addListener('beforeRemove', (e) => {
      if (isIOS) {
        e.preventDefault();
      } else {
        let time = new Date().getTime();
        if (time - this.backSeconds < 2000) {
          BackHandler.exitApp();
        } else {
          toastShort("Press the back button again to exit the program");
          this.backSeconds = time;
          e.preventDefault();
        }
      }
    });
  }

  getPermission() {
    request(
      isIOS 
    ? PERMISSIONS.IOS.LOCATION_WHEN_IN_USE
    : PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION)
    .then(res => {
      console.log('getPermission', res)
      this.setState({
        hasPermission: true
      });
      this.checkPermission2Geo();
    }).catch(err => {
      console.info('getPermission', err)
    });
  }

  checkPermission2Geo(refresh) {
    if (this.state.hasPermission) {
      if (refresh) {
        //避免关闭自动移动地图后无法点击按钮移动地图
        this.state.stopList = []
      }
      this.infoGeoLocation();
      return;
    }
    check(
      isIOS 
    ? PERMISSIONS.IOS.LOCATION_WHEN_IN_USE
    : PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION)
    .then(res => {
      //console.log('checkPermission2Geo', res);
      switch (res) {
        case RESULTS.UNAVAILABLE:
          console.log('此功能不可用（在此设备上/在此上下文中）');
          if (isIOS) {
            this.setState({
              hasPermission: true
            });
            this.infoGeoLocation();
          }
          break;
        case RESULTS.DENIED:
          console.log('权限未被请求/被拒绝，但可以请求');
          if (this.denied) {
            this.denied = false;
            this.getPermission();
          } else {
            this.denied = true;
          }
          break;
        case RESULTS.LIMITED:
          console.log('权限是有限的：有些操作是可能的');
          this.setState({
            hasPermission: true
          });
          this.infoGeoLocation();
          break;
        case RESULTS.GRANTED:
          console.log('许可被授予');
          this.setState({
            hasPermission: true
          });
          this.infoGeoLocation();
          break;
        case RESULTS.BLOCKED:
          console.log('权限被拒绝，不再可请求');
          Dialog.showDialog({
            title: 'Error',
            message: 'Can not get charge station, Please grant location permissions.',
            ok: 'SETTING',
            callback: btn => {
              if (btn == Dialog.BUTTON_OK) {
                console.log('ok');
                openSettings().catch(() => console.warn('cannot open settings'));
              }
            }
          });
          //toastShort('Save to gallery failed');
          break;
      }
    }).catch(err => {
      console.log('checkPermission2Geo-error', err);
    });
  }

  infoGeoLocation(again) {
    if (this.state.mapReady) {
      navigator.geolocation.getCurrentPosition(location => {
        let region = {
          latitude: location.coords.latitude,
          longitude: location.coords.longitude,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421
        }
        //console.log("getGeoLocation", region);
        //if (this.state.stopList.length == 0) { //只加载一次
        let time = new Date().getTime();
        let interval = this.settingInfo.refreshInterval * 1000;
        let first = this.state.stopList.length == 0;
        if (first || time - this.refreshTime > interval) { //一分钟(10秒)加载一次
          this.getStationList(region, first);
          this.refreshTime = time;
        } else if (this.settingInfo.alwaysLocation) {
          this.setState({
            region: region
          });
        }
      }, error => {
        console.info("getGeoLocation", error);
        if (!again) {
          setTimeout(() => {
            this.infoGeoLocation(true);
          }, 2000);
        }
      });
    }
  }

  findFilter(data) {
    this.filter = data;
    this.getStationList();
  }

  getStationList(region, first) {
    Dialog.showProgressDialog('Loading...');
    apiStation.getAllStation(this.filter).then(res => {
      Dialog.dismissLoading();
      if (res.data.sites) {
        const list = [];
        res.data.sites.forEach(item => {
          let available = false
          if (item.allConnector && item.allConnector.available) {
            available = true
          }
          list.push({
            id: item.sitePk,
            name: item.siteName,
            //address: item.siteAddress,
            available: available,
            siteType: item.siteType,
            latitude: item.locationLatitude,
            longitude: item.locationLongitude,
            /*latitude: item.locationLatitude,
            longitude: item.locationLongitude,
            acConnector: item.acConnector,
            allConnector: item.allConnector,
            dcConnector: item.dcConnector,
            distance: utils.getDistance(item.distance)*/
          });
        });
        this.setState({
          stopList: list
        });
        if (region && (this.settingInfo.alwaysLocation || first)) {
          setTimeout(() => {
            this.setState({
              region: region
            });
          }, 500);
        }
      }
    }).catch(err => {
      Dialog.dismissLoading();
      this.setState({
        stopList: []
      });
    })
  }

  //点击Marker获取StaionInfo
  viewChargeStation(id, index) {
    //console.log('info', this.state.stopList[index]);
    //const stationInfo = this.state.stopList[index];
    navigator.geolocation.getCurrentPosition(location => {
      let params = {
        lat: location.coords.latitude,
        lng: location.coords.longitude,
        sitePk: id//stationInfo.id
      }
      apiStation.getStationRate(params).then(res => {
        if (res.data.sitePk) {
          var info = utils.getSiteInfo(res.data);
          this.setState({
            stationInfo: info
          });
        } else {
          this.setState({
            stationInfo: stationInfo
          });
        }
      }).catch(err => {
        this.setState({
          stationInfo: stationInfo
        });
      });
    });
    //startPage(PageList.chargeDetail, {...this.state.stopList[index]});
  }

  render() {
    return (
      <View style={ui.flex1}>
        <View style={Styles.toolbar}>
          <Pressable
            style={Styles.backIcon}
            android_ripple = {rippleLess}
            onPress={() => {
              this.props.navigation.toggleDrawer();
            }}>
            <EvilIcons name={'navicon'} size={28} color={'#333333'} />
          </Pressable>
          <View style={Styles.content}>
            <Image
              source={require('../../images/tool-logo.png')}
              style={Styles.logo}
            />
          </View>
        </View>
        <View style={styles.searchView}>
          <View style={styles.searchInput}>
            <Feather
              name={'search'}
              size={24}
              color={'#333'}/>
            <Text
              style={styles.searchText}
              onPress={() => {
                startPage(PageList.search);
              }}>
              Search using keywords
            </Text>
          </View>
        </View>
        <View style={styles.mapContent}>
          { this.state.hasPermission &&
            <Maps.Maps3
              region={this.state.region}
              stopList={this.state.stopList}
              onMapReady={() => {
                this.setState({
                  mapReady: true
                }, () => {
                  this.checkPermission2Geo();
                });
              }}
              onMarkerPress={id => this.viewChargeStation(id)}
            />
          }
          <TopInfo stationInfo={this.state.stationInfo}/>
          <MapTool
            count={this.state.stopList.length}
            mapReady={this.state.mapReady}
            onFilter={data => this.findFilter(data)}
            onLocation={() => this.checkPermission2Geo(true)}
          />
        </View>
        <View style={styles.drawerLeftTouchView}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  searchView: {
    ...$padding(8, 16, 16),
    backgroundColor: colorAccent
  },
  searchInput: {
    paddingLeft: 16,
    paddingRight: 16,
    borderRadius: 60,
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: 'rgba(255, 255, 255, 0.5)'
  },
  searchText: {
    flex: 1,
    color: '#444',
    padding: 8,
    fontSize: 15
  },
  drawerLeftTouchView: {
    top: 0,
    left: 0,
    bottom: 0,
    width: 4,
    zIndex: 5,
    position: 'absolute',
    backgroundColor: 'rgba(0,0,0,0)'
  },
  mapContent: {
    flex: 1,
    zIndex: 4,
    position: 'relative',
  }
})