add app/pages/chargingV3/ConnectorInfo.js

Strides-SPAPP/app/pages/chargingV3/ConnectorInfo.js

@@ -0,0 +1,156 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import DiscountView from './DiscountView';
+import TextView from '../../components/TextView';
+import { ChargeStyle } from '../chargeV2/Charging';
+import app from '../../../app.json';
+import utils from '../../utils/utils';
+
+export default ConnectorInfo = ({
+  isCharging=false,
+  connectorInfo={}
+}) => {
+  return (
+    isCharging
+    ? <View>
+        <View style={styles.infoRow}>
+          <View style={styles.infoCard}>
+            <TextView style={styles.infoTitle}>{$t('charging.labelTimeElapsed')}</TextView>
+            <TextView
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={styles.infoText}>{utils.minutes2HHMM(connectorInfo?.timeElapsed ?? 0)}</TextView>
+            <TextView style={styles.infoDesc}></TextView>
+          </View>
+          <View style={styles.infoCard}>
+            <TextView style={styles.infoTitle}>{$t('charging.labelTotalkWh')}</TextView>
+            <TextView
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={styles.infoText}>{connectorInfo.totalKWhDelivered || "0"} kWh</TextView>
+            <TextView style={styles.infoDesc}></TextView>
+          </View>
+        </View>
+        <View style={styles.infoRow}>
+          <View style={styles.infoCard}>
+            <DiscountView visible={connectorInfo.hasDiscount}/>
+            <TextView style={styles.infoTitle}>{$t('charging.labelRate')}</TextView>
+            <TextView
+              numberOfLines={2}
+              ellipsizeMode="tail"
+              style={styles.infoText}>{connectorInfo.rates || "S$0.00/kWh"}</TextView>
+            {(app.modules.nationally && connectorInfo.rates != connectorInfo.userRates) && (
+              <TextView
+                numberOfLines={1}
+                ellipsizeMode="tail"
+                style={styles.infoDesc}>({connectorInfo.userRates || "S$0.00/kWh"})</TextView>)
+            }
+          </View>
+          <View style={styles.infoCard}>
+            <TextView style={styles.infoTitle}>{$t('charging.labelTotalCharges')}</TextView>
+            <TextView
+              numberOfLines={2}
+              ellipsizeMode="tail"
+              style={styles.infoText}>{connectorInfo.totalCharges || "S$ 0.0"}</TextView>
+            {(app.modules.nationally && connectorInfo.totalCharges != connectorInfo.userTotalCharges) && (
+              <TextView
+                numberOfLines={1}
+                ellipsizeMode="tail"
+                style={styles.infoDesc}>({connectorInfo.userTotalCharges || "S$ 0.0"})</TextView>)
+            }
+          </View>
+        </View>
+      </View>
+    : <View>
+      <View style={styles.infoRow}>
+        <View style={styles.infoCard}>
+          <TextView style={styles.infoTitle}>{$t('charging.labelType')}</TextView>
+          <TextView
+            numberOfLines={1}
+            ellipsizeMode="tail"
+            style={styles.infoText}>{connectorInfo.chargeType || "AC"}</TextView>
+          <TextView style={styles.infoDesc}></TextView>
+        </View>
+        <View style={styles.infoCard}>
+          <TextView style={styles.infoTitle}>{$t('charging.labelPower')}</TextView>
+          <TextView
+            numberOfLines={1}
+            ellipsizeMode="tail"
+            style={styles.infoText}>{connectorInfo.wattage || "0"} kW{/*connectorInfo.rateType*/}</TextView>
+          <TextView style={styles.infoDesc}></TextView>
+        </View>
+      </View>
+      <View style={styles.infoRow}>
+        <View style={styles.infoCard}>
+          <DiscountView visible={connectorInfo.hasDiscount}/>
+          <TextView style={styles.infoTitle}>{$t('charging.labelRate')}</TextView>
+          {/* <Text
+            numberOfLines={1}
+            ellipsizeMode="tail"
+            style={styles.infoText}>{connectorInfo.rate || "0.00"}/{connectorInfo.rateType || "kWh"}</Text> */}
+          <TextView
+            numberOfLines={2}
+            ellipsizeMode="tail"
+            style={styles.infoText}>{connectorInfo.rates || "S$0.00/kWh"}</TextView>
+          {(app.modules.nationally && connectorInfo.rates != connectorInfo.userRates) && (
+            <TextView
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={styles.infoDesc}>({connectorInfo.userRates || "S$0.00/kWh"})</TextView>)
+          }
+        </View>
+        <View style={styles.infoCard}>
+          <TextView style={styles.infoTitle}>{$t('charging.labelStatus')}</TextView>
+          <TextView
+            style={[ChargeStyle.statusAuthenticated, styles.infoStatus]}>
+            {/*$t('charging.statusAvailable')*/}
+            {connectorInfo.status}
+          </TextView>
+        </View>
+      </View>
+    </View>
+)}
+
+const styles = StyleSheet.create({
+  infoRow: {
+    marginLeft: 24,
+    marginBottom: 24,
+    flexDirection: 'row'
+  },
+  infoCard: {
+    flex: 1,
+    paddingTop: 12,
+    paddingBottom: 12,
+    borderRadius: 10,
+    marginRight: 32,
+    overflow: 'hidden',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: textCancel,
+    //...ElevationObject(5),
+    backgroundColor: colorLight,
+  },
+  infoTitle: {
+    color: textPrimary,
+    fontSize: 12,
+    paddingTop: 1
+  },
+  infoText: {
+    color: textPrimary,
+    fontSize: 15,
+    textAlign: 'center',
+    fontWeight: 'bold',
+    ...$padding(12, 6)
+  },
+  infoDesc: {
+    color: textPrimary,
+    fontSize: 12,
+    marginTop: -12,
+    paddingBottom: 8
+  },
+  infoStatus: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    ...$padding(16, 8)
+  }
+})