add app/pages/charge/SiteInfo.js

Strides-SPAPP/app/pages/charge/SiteInfo.js

@@ -0,0 +1,99 @@
+/**
+ * Site Information页面
+ * @邠心vbe on 2021/07/06
+ */
+import React, { Component } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+export default class SiteInfo extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      refreshId: 0,
+      stationInfo: {}
+    };
+  }
+
+  componentDidMount() {
+    if (this.props.stationInfo) {
+      this.setState({
+        stationInfo: this.props.stationInfo
+      });
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.props.refreshId != this.state.refreshId) {
+      this.setState({
+        refreshId: this.props.refreshId,
+        stationInfo: this.props.stationInfo
+      });
+    }
+  }
+
+  getOperatingHours() {
+    if (this.state.stationInfo.endlessService) {
+      return "24/7";
+    } else if (this.state.stationInfo.operatingHours) {
+      return this.state.stationInfo.operatingHours;
+    } else {
+      return 'To be updated';
+    }
+  }
+
+  getParkingFee() {
+    if (this.state.stationInfo.parkingFeeFree) {
+      return "Free";
+    } else if (this.state.stationInfo.parkingFee) {
+      return this.state.stationInfo.parkingFee;
+    } else {
+      return 'To be updated';
+    }
+  }
+  
+  render() {
+    return (
+      <View style={{
+        paddingLeft: 16,
+        paddingRight: 16,
+        ...(this.props.style || {})
+      }}>
+        <Text style={styles.title}>Address</Text>
+        <View style={styles.infoView}>
+          <Text style={styles.infoText}>{this.state.stationInfo.address}</Text>
+        </View>
+        <Text style={styles.title}>Operating Hours</Text>
+        <View style={styles.infoView}>
+          <Text style={styles.infoText}>{this.getOperatingHours()}</Text>
+        </View>
+        <Text style={styles.title}>Parking Fee</Text>
+        <View style={styles.infoView}>
+          <Text style={styles.infoText}>{this.getParkingFee()}</Text>
+        </View>
+        <Text style={styles.title}>Additional Information</Text>
+        <View style={styles.infoView}>
+          <Text style={styles.infoText}>{this.state.stationInfo.additionalNotes}</Text>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  title: {
+    color: '#000',
+    fontSize: 14,
+    fontWeight: 'bold',
+    ...$padding(16, 0, 8),
+    borderBottomColor: '#eee',
+    borderBottomWidth: 1
+  },
+  infoView: {
+    paddingTop: 8,
+    paddingBottom: 16
+  },
+  infoText: {
+    color: '#444',
+    fontSize: 14
+  }
+})