ChargEco/Strides-APP/app/pages/charging/StationInfoView.js

/**
 * 充电页：扫码之前和扫码之后的站点信息
 * @邠心vbe on 2023/03/10
 */
import React from 'react';
import { Image, Text, View } from 'react-native';
import BadgeSelectItem from '../../components/BadgeSelectItem';
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}>
      <Text
        numberOfLines={1}
        ellipsizeMode="tail"
        style={ChargeStyle.infoText}>{connectorInfo.chargeType}{connectorInfo.wattage}</Text>
      <Text style={ChargeStyle.infoTitle}>{$t('charging.labelType')}</Text>
    </View>
    <View style={ChargeStyle.infoGroup}>
      <Text
        numberOfLines={1}
        ellipsizeMode="tail"
        style={ChargeStyle.infoText}>{connectorInfo.rate}/{connectorInfo.rateType}</Text>
      <Text style={ChargeStyle.infoTitle}>{$t('charging.labelRate')}</Text>
    </View>
    <View style={ChargeStyle.infoGroup}>
      <Text
        numberOfLines={1}
        ellipsizeMode="tail"
        style={ChargeStyle.infoText}>{connectorInfo.wattage}kW{/*connectorInfo.rateType*/}</Text>
      <Text style={ChargeStyle.infoTitle}>{$t('charging.labelPower')}</Text>
    </View>
    <View style={ChargeStyle.infoGroup}>
      { isCharging
      ? (isPending
        ? (
            <Text
              numberOfLines={1}
              ellipsizeMode="tail"
              style={[ChargeStyle.infoStatus, ChargeStyle.statusAuthenticated]}>
              {$t('charging.statusPreparing')}
            </Text>
          )
        : (
            <Text
              numberOfLines={1}
              ellipsizeMode="tail"
              style={[ChargeStyle.infoStatus, ChargeStyle.statusAuthenticated]}>
              {$t('charging.statusCharging')}
            </Text>
          )
        )
      : (connectorInfo.isCheckThrough
        ? (
            <Text
              numberOfLines={1}
              ellipsizeMode="tail"
              style={[ChargeStyle.infoStatus, ChargeStyle.statusAuthenticated]}>
              {$t('charging.statusAuthenticated')}
            </Text>
          )
        : (
            <Text
              numberOfLines={1}
              ellipsizeMode="tail"
              style={[ChargeStyle.infoStatus, ChargeStyle.statusError]}>
              {$t('charging.statusNotConnected')}
            </Text>
          )
        )
      }
      <Text style={ChargeStyle.infoTitle}>{$t('charging.labelStatus')}</Text>
    </View>
  </BadgeSelectItem>
);