add app/pages/chargeV2/ChargeAdapter.js

Strides-SPAPP/app/pages/chargeV2/ChargeAdapter.js

@@ -0,0 +1,300 @@
+/**
+ * 充电桩ViewPager适配器
+ * @邠心vbe on 2023/02/06
+ */
+import React, { Component } from 'react';
+import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
+import { BackHandler, Pressable, StyleSheet } from 'react-native';
+import TabInfos from './TabInfos';
+import TabCharge from './TabCharge';
+import Reserve from './TabReserve';
+import TabInfosV3 from '../chargeV3/TabInfos';
+import { QRResult } from '../charge/QRScan';
+import apiStation from '../../api/apiStation';
+import PagerUtil from './PagerUtil';
+import utils from '../../utils/utils';
+import { Styles } from '../../components/Toolbar';
+import { getFocusedRouteNameFromRoute } from '@react-navigation/core';
+import app from '../../../app.json';
+import HeaderTitle from '../../components/HeaderTitle';
+
+export const PagerList = {
+  "tabInfo": "Info",
+  "tabCharge": "Charge",
+  "tabReserve": "Reserve",
+  "tabExplore": "Explore"
+}
+
+export default class ChargeAdapter extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showTab: true,
+      refreshing: false,
+      showContent: false,
+      showLoginDialog: false,
+      stationInfo: {}
+    }
+    this.pageAdapter = [{
+      title: $t('charging.tabInfo'),
+      name: "Info",
+      component: app.isLumiWhitelabel ? TabInfosV3 : TabInfos
+    }, {
+      title: $t('charging.tabCharge'),
+      name: "Charge",
+      component: TabCharge
+    }, {
+      title: $t('charging.tabReserve'),
+      name: "Reserve",
+      component: Reserve
+    }/*, {
+      title: $t('charging.tabExplore'),
+      name: "Explore",
+      component: Explore
+    }*/]
+    this.tabBarStyle = {
+      tabBarStyle: styles.tabStyle,
+      tabBarPressColor: rippleColor,
+      tabBarScrollEnabled: this.pageAdapter.length > 3,
+      tabBarIndicatorStyle: styles.indicator,
+      tabBarActiveTintColor: tabBarTextActive,
+      tabBarInactiveTintColor: tabBarTextInactive
+    }
+    this.action = "";
+    this.isHide = false;
+    this.titleName = "";
+    this.backHandler = undefined;
+  }
+
+  componentDidMount() {
+    utils.setBackClick([this.props?.route?.name, PagerList.tabCharge, PagerList.tabInfo, PagerList.tabReserve], this.backPage)
+    this.props.navigation.addListener('beforeRemove', (e) => {
+      this.hideDialog();
+    });
+    this.props.navigation.addListener('focus', () => {
+      if (this.isHide && this.state.showContent) {
+        this.updateStationInfo();
+      } else {
+        //this.canShowLoginDialog();
+      }
+      this.isHide = false;
+    });
+    this.props.navigation.addListener('blur', () => {
+      this.isHide = true;
+    });
+    const params = this.props.route.params;
+    if (params.action && params.stationInfo) {
+      this.action = params.action
+      this.setState({
+        stationInfo: params.stationInfo
+      }, () => {
+        this.setPageTitle();
+        this.canShowLoginDialog();
+      });
+    }
+    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.backPage)
+    PagerUtil.addOnRefresh(this);
+    PagerUtil.setSelectedVoucher({});
+    // setTimeout(() => {
+    //   this.changeTab(1)
+    // }, 200);
+  }
+
+  componentDidUpdate() {
+    /*if (this.state.tabIndex !== this.props.route.state.index) {
+      this.setState({
+        tabIndex: this.props.route.state.index
+      })
+    }*/
+    var act = this.props.route.params.action;
+    if (act !== this.state.action) {
+      this.setState({
+        action: act
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    QRResult.clearResult();
+    PagerUtil.onDestory();
+    if (this.backHandler) {
+      this.backHandler.remove();
+    }
+  }
+
+  backPage = () => {
+    const params = this.props.route.params;
+    if (params.from && !this.isHide) {
+      startPage(params.from);
+      return true;
+    }
+  }
+
+  canShowLoginDialog() {
+    if (isLogin()) {
+      this.setState({
+        showContent: true
+      });
+      //if (this.action !== 'view')
+      this.updateStationInfo();
+    } else {
+      this.setState({
+        showLoginDialog: true
+      });
+    }
+  }
+
+  hideDialog(close) {
+    this.setState({
+      showLoginDialog: false
+    });
+    if (close) {
+      goBack();
+    }
+  }
+
+  updateStationInfo() {
+    navigator.geolocation.getCurrentPosition(location => {
+      let params = {
+        latitude: location.coords.latitude,
+        longitude: location.coords.longitude,
+      }
+      this.getStationInfo(params)
+    }, err => {
+      this.getStationInfo()
+    });
+  }
+
+  getStationInfo(location={}) {
+    apiStation.getStationRate({
+      sitePk: this.state.stationInfo.id,
+      lat: location?.latitude,
+      lng: location?.longitude
+    }).then(res => {
+      if (res.data.sitePk) {
+        var info = utils.getSiteInfo(res.data);
+        PagerUtil.setStationInfo(info);
+        PagerUtil.setRefreshing();
+        //PagerUtil.setRefreshing(getFocusedRouteNameFromRoute(this.props.route));
+        this.setState({
+          refreshing: false,
+          stationInfo: info
+        }, () => {
+          this.setPageTitle();
+        });
+        if (PagerUtil.isInnerScanQR()) {
+          if (QRResult.haveResult()) {
+            this.changeTab(1);
+            //PagerUtil.setRefreshing("Charge");
+          }
+          PagerUtil.ofInnerScanQR();
+        } else if (!PagerUtil.ENABLE_NEW_UI && this.action == 'qr') {
+          setTimeout(() => {
+            this.changeTab(1)
+          }, 300);
+        }
+      }
+    }).catch((err) => {
+      toastLong(err);
+      this.setState({
+        refreshing: false
+      })
+    });
+  }
+
+  setPageTitle() {
+    if (!this.titleName) {
+      this.titleName = this.state.stationInfo.name;
+      this.props.navigation.setOptions({
+        headerTitle: () => (<HeaderTitle title={this.titleName}/>),
+        headerRight: () => (
+          <Pressable
+            style={Styles.backIcon}
+            android_ripple={rippleLessIcon}
+            onPress={() => utils.directMaps(this.state.stationInfo.latitude, this.state.stationInfo.longitude, this.state.stationInfo.address)}>
+            <MaterialIcons
+              name='directions'
+              size={24}
+              color={pageTitleTint}
+              style={Styles.iconOpacity}
+            />
+          </Pressable>
+        )
+      })
+    }
+  }
+
+  getAvailable(type) {
+    const all = this.state.stationInfo.allConnector;
+    if (all) {
+      if (type == 'box') {
+        return all.boxAvailable + '/' + all.boxAll;
+      } else {
+        return all.available + '/' + all.all;
+      }
+    } else {
+      return '0/0';
+    }
+  }
+
+  onPullRefresh() {
+    this.updateStationInfo();
+  }
+
+  onBackRefresh() {
+    this.onPullRefresh();
+  }
+
+  onEnterStation() {
+    this.changeTab(1);
+  }
+
+  changeTab(index) {
+    console.log("[changeTab]", index);
+    this.props.navigation.navigate(this.pageAdapter[index]?.name);
+    /*this.setState({
+      tabIndex: index
+    })*/
+  }
+  
+  render() {
+    const Tab = createMaterialTopTabNavigator();
+    return (
+      <Tab.Navigator
+        style={styles.container}
+        screenOptions={{
+          lazy: false,
+          lazyPreloadDistance: 1,
+          ...this.tabBarStyle
+        }}
+        backBehavior={() => this.backPage()}
+        initialRouteName={PagerList.tabCharge}>
+        { this.pageAdapter.map((item, index) => 
+          <Tab.Screen
+            key={index}
+            name={item.name}
+            component={item.component}
+            options={{
+              title: item.title,
+              tabBarAllowFontScaling: false
+            }}
+          />
+        )}
+      </Tab.Navigator>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colorLight
+  },
+  tabStyle: {
+    backgroundColor: app.isWhitelabel ? colorLight : colorPrimary
+  },
+  indicator: {
+    backgroundColor: app.isWhitelabel ? colorPrimary : colorLight
+  }
+})
+ 
+//export const ChargeStyles = styles;