add app/pages/charging/StationInfoView.js

Strides-SPAPP/app/pages/charging/StationInfoView.js

@@ -0,0 +1,97 @@
+/**
+ * 充电页：扫码之前和扫码之后的站点信息
+ * @邠心vbe on 2023/03/10
+ */
+import React from 'react';
+import { Image, Text, View } from 'react-native';
+import BadgeSelectItem from '../../components/BadgeSelectItem';
+import TextView from '../../components/TextView';
+import { ChargeStyle, TypeImage } from '../chargeV2/Charging';
+
+export default StationInfoView = ({connectorInfo={}, isCharging, isPending}) => (
+  <BadgeSelectItem
+    style={ChargeStyle.stationInfoView}
+    checked={true}>
+    {/* <ImageBackground
+      style={{
+        width: 42,
+        height: 42
+      }}
+      source={require('../../images/charge/icon-station-no.png')}>
+      <Text style={{
+        left: 0,
+        right: 0,
+        bottom: 1,
+        fontSize: 8,
+        color: 'white',
+        textAlign: 'center',
+        position: 'absolute'
+      }}>{connectorInfo.connectorId}</Text>
+    </ImageBackground> */}
+    <Image
+      style={ChargeStyle.infoIcon}
+      source={connectorInfo?.chargeType?.indexOf('AC') >= 0 ? TypeImage.AC : TypeImage.DC}/>
+    <View style={ChargeStyle.infoGroup}>
+      <TextView
+        numberOfLines={1}
+        ellipsizeMode="tail"
+        style={ChargeStyle.infoText}>{connectorInfo.chargeType}{connectorInfo.wattage}</TextView>
+      <TextView style={ChargeStyle.infoTitle}>{$t('charging.labelType')}</TextView>
+    </View>
+    <View style={ChargeStyle.infoGroup}>
+      <TextView
+        numberOfLines={1}
+        ellipsizeMode="tail"
+        style={ChargeStyle.infoText}>{connectorInfo.rate}/{connectorInfo.rateType}</TextView>
+      <TextView style={ChargeStyle.infoTitle}>{$t('charging.labelRate')}</TextView>
+    </View>
+    <View style={ChargeStyle.infoGroup}>
+      <TextView
+        numberOfLines={1}
+        ellipsizeMode="tail"
+        style={ChargeStyle.infoText}>{connectorInfo.wattage}kW{/*connectorInfo.rateType*/}</TextView>
+      <TextView style={ChargeStyle.infoTitle}>{$t('charging.labelPower')}</TextView>
+    </View>
+    <View style={ChargeStyle.infoGroup}>
+      { isCharging
+      ? (isPending
+        ? (
+            <TextView
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={[ChargeStyle.infoStatus, ChargeStyle.statusAuthenticated]}>
+              {$t('charging.statusPreparing')}
+            </TextView>
+          )
+        : (
+            <TextView
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={[ChargeStyle.infoStatus, ChargeStyle.statusAuthenticated]}>
+              {$t('charging.statusCharging')}
+            </TextView>
+          )
+        )
+      : (connectorInfo.isCheckThrough
+        ? (
+            <TextView
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={[ChargeStyle.infoStatus, ChargeStyle.statusAuthenticated]}>
+              {$t('charging.statusAuthenticated')}
+            </TextView>
+          )
+        : (
+            <TextView
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={[ChargeStyle.infoStatus, ChargeStyle.statusError]}>
+              {$t('charging.statusNotConnected')}
+            </TextView>
+          )
+        )
+      }
+      <TextView style={ChargeStyle.infoTitle}>{$t('charging.labelStatus')}</TextView>
+    </View>
+  </BadgeSelectItem>
+);