add app/pages/chargeV3/TabInfos.js

Strides-SPAPP/app/pages/chargeV3/TabInfos.js

@@ -0,0 +1,189 @@
+/**
+ * V3版充电站信息页面
+ * @邠心vbe on 2024/05/13
+ */
+import React, { Component } from 'react';
+import { View, StyleSheet, ScrollView, RefreshControl, Text } from 'react-native';
+import TextView from '../../components/TextView';
+import PagerUtil from '../chargeV2/PagerUtil';
+import { MyRefreshProps } from '../../components/ThemesConfig';
+import utils from '../../utils/utils';
+import SiteLabelView from '../../components/SiteLabelView';
+import { ConnectTypeV2 } from '../search/ConnectType';
+import { Pressable } from 'react-native';
+
+export default class TabInfosV3 extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      refreshing: false,
+      stationInfo: {}
+    };
+  }
+
+  componentDidMount() {
+    PagerUtil.addOnRefresh(this);
+    this.onRefresh();
+  }
+
+  onRefresh() {
+    console.log("info刷新", this.props.route.name);
+    this.setState({
+      refreshing: false,
+      stationInfo: PagerUtil.getStationInfo()
+    });
+  }
+
+  onPullRefresh() {
+    this.setState({
+      refreshing: true
+    })
+    PagerUtil.setBackRefreshing();
+  }
+
+  getOperatingHours() {
+    if (this.state.stationInfo?.endlessService) {
+      return "24/7";
+    } else if (this.state.stationInfo?.operatingHours) {
+      return this.state.stationInfo?.operatingHours;
+    } else {
+      return $t('charging.toBeUpdated');
+    }
+  }
+
+  getParkingFee() {
+    if (this.state.stationInfo?.parkingFeeFree) {
+      return $t('charging.free');
+    } else if (this.state.stationInfo?.parkingFee) {
+      return this.state.stationInfo.parkingFee;
+    } else {
+      return $t('charging.toBeUpdated');
+    }
+  }
+  
+  render() {
+    return (
+      <ScrollView
+        style={styles.container}
+        keyboardShouldPersistTaps={isIOS ? 'never' : 'handled'}
+        contentContainerStyle={$padding(0, 16)}
+        refreshControl={
+          <RefreshControl
+            {...MyRefreshProps()}
+            refreshing={this.state.refreshing}
+            onRefresh={() => this.onPullRefresh()}
+          />
+        }>
+        <View style={styles.infoView}>
+          <TextView style={styles.siteName}>{this.state.stationInfo?.name}</TextView>
+          <View style={ui.flexc}>
+            <TextView style={styles.siteTypes}>{this.state.stationInfo.siteType}</TextView>
+            { (this.state.stationInfo.allConnector && this.state.stationInfo.allConnector.available > 0) &&
+              <TextView style={styles.stationAvailable}>
+                <MaterialCommunityIcons
+                  name="circle"
+                  size={10}
+                  color={colorAccent}/>
+                <Text>  </Text>
+                {$t("charging.statusAvailable")}
+              </TextView>
+            }
+            <ConnectTypeV2 {...this.state.stationInfo?.acConnector}/>
+            <ConnectTypeV2 {...this.state.stationInfo?.dcConnector}/>
+          </View>
+        </View>
+        <TextView style={styles.title}>{$t('charging.siteAddress')}</TextView>
+        <View style={[styles.infoView, ui.flexc]}>
+          <TextView style={[styles.infoText, ui.flex1]}>{this.state.stationInfo?.address}</TextView>
+          <Pressable
+            style={ui.center}
+            android_ripple={rippleLess}
+            onPress={() => {
+              utils.directMaps(this.state.stationInfo.latitude, this.state.stationInfo.longitude, this.state.stationInfo.address);
+            }}>
+            <MaterialCommunityIcons
+              name="directions"
+              color={textPrimary}
+              size={24}/>
+          </Pressable>
+        </View>
+        <TextView style={styles.title}>{$t('charging.operatingHours')}</TextView>
+        <View style={styles.infoView}>
+          <TextView style={styles.infoText}>{this.getOperatingHours()}</TextView>
+        </View>
+        <TextView style={styles.title}>{$t('charging.parkingFees')}</TextView>
+        <View style={styles.infoView}>
+          <TextView style={styles.infoText}>{this.getParkingFee()}</TextView>
+        </View>
+        { utils.isNotEmpty(this.state.stationInfo?.additionalNotes) && <>
+          <TextView style={styles.title}>{$t('charging.additionalInfo')}</TextView>
+          <View style={styles.infoView}>
+            <TextView style={styles.infoText}>{this.state.stationInfo?.additionalNotes}</TextView>
+          </View>
+        </>}
+        { utils.isNotEmpty(this.state.stationInfo?.labels) && <>
+          <TextView style={styles.title}>{$t('charging.labelTags')}</TextView>
+          <View style={styles.labelRows}>
+            <TextView style={styles.infoText}>
+              {this.state.stationInfo?.labels.map((label, idx) =>
+                (idx != 0 ? ", " : "") + label.label
+              )}
+            </TextView>
+          </View>
+        </>}
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  siteName: {
+    color: textPrimary,
+    fontSize: 24,
+    fontWeight: 'bold',
+    paddingBottom: 4
+  },
+  title: {
+    color: '#000',
+    fontSize: 16,
+    fontWeight: 'bold',
+    paddingTop: 8,
+    //borderBottomColor: '#eee',
+    //borderBottomWidth: 1
+  },
+  infoView: {
+    paddingTop: 4,
+    paddingBottom: 8
+  },
+  infoText: {
+    color: '#444',
+    fontSize: 14
+  },
+  siteTypes: {
+    color: textLight,
+    height: 20,
+    fontSize: 10,
+    marginRight: 6,
+    borderRadius: 30,
+    ...$padding(0, 10),
+    backgroundColor: textPrimary
+  },
+  stationAvailable: {
+    color: textPrimary,
+    height: 20,
+    fontSize: 10,
+    marginRight: 6,
+    borderRadius: 30,
+    borderWidth: 1,
+    borderColor: colorAccent,
+    ...$padding(0, 8, 0, 4)
+  },
+  labelRows: {
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flexDirection: 'row'
+  }
+})