add app/pages/chargingV2/StepCharging.js

Strides-SPAPP/app/pages/chargingV2/StepCharging.js

@@ -0,0 +1,383 @@
+/**
+ * 新充电流程：正在充电模块
+ * @邠心vbe on 2023/06/20
+ */
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, Image, ScrollView, StyleSheet, View } from 'react-native';
+import app from '../../../app.json';
+import Button, { ElevationObject } from '../../components/Button';
+import TextView from '../../components/TextView';
+import utils from '../../utils/utils';
+import { PaymentList } from '../chargeV2/Payment';
+import DiscountView from './DiscountView';
+import PaymentListV2 from '../chargeV2/PaymentListV2';
+import DialogIdleFee from './DialogIdleFee';
+
+const StepCharging = ({
+  idleFeeConfig,
+  connectorInfo={},
+  currentPayment,
+  onStopCharge,
+  selectedVoucher={}
+}) => {
+  const [isCharging, setCharging] = useState(false);
+  const [loadingEmps, setEmps] = useState("");
+  const [skipAnim, setAnimSkip] = useState(false);
+  const topAnim = useRef(new Animated.Value($vw(16)*-2)).current;
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  const moveTop = () => {
+    fadeAnim.setValue(0);
+    Animated.timing(topAnim, {
+      toValue: ($vh(50) * -1 - $vw(16) - 32),
+      duration: 1000,
+      easing: Easing.linear,
+      useNativeDriver: false
+    }).start();
+    setTimeout(() => {
+      setCharging(true);
+      showFade();
+    }, 1100);
+  }
+
+  const showFade = () => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 1000,
+      useNativeDriver: false
+    }).start();
+    setTimeout(() => {
+      setAnimSkip(true);
+    }, 1100);
+  }
+
+  useEffect(() => {
+    const isCharge = (connectorInfo.status == "Charging");
+    //console.log("[useEffect]:start", isCharge, fadeAnim);
+    setCharging(isCharge);
+    setAnimSkip(isCharge);
+    if (!isCharge) {
+      changeEmps();
+    }
+  }, [])
+
+  useEffect(() => {
+    //console.log("[useEffect]:connectorInfo", connectorInfo.status);
+    if (connectorInfo.status == "Charging") {
+      if (!isCharging) {
+        moveTop();
+      }
+    } else {
+      setCharging(false)
+    }
+  }, [connectorInfo])
+
+  useEffect(() => {
+    //console.log("[useEffect]:loadingEmps", loadingEmps);
+    if (connectorInfo.status == "Charging") {
+      moveTop();
+    } else {
+      setTimeout(() => {
+        changeEmps();
+      }, 500);
+    }
+  }, [loadingEmps])
+
+  const changeEmps = () => {
+    let emp = loadingEmps;
+    if (loadingEmps.length == 3) {
+      emp = "";
+    } else {
+      emp += ".";
+    }
+    setEmps(emp);
+  }
+
+  return (
+  isCharging
+  ? <ScrollView
+      style={ui.flex1}
+      contentContainerStyle={$padding(16)}>
+      <Animated.View style={{opacity: skipAnim ? 1 : fadeAnim}}>
+        <View style={ui.center}>
+          <Image
+            style={styles.stepImage}
+            resizeMode="contain"
+            source={require('../../images/site/charging-status-charge.png')}/>
+          <TextView style={styles.stepTitle}>{$t('charging.statusCharging')}</TextView>
+          <TextView style={styles.stepDesc}>{$t('charging.stepChargingDesc')}</TextView>
+          { connectorInfo.batteryPercent >= 0 &&
+            <TextView
+              style={styles.socText}
+              numberOfLines={1}>{connectorInfo.batteryPercent || "0"}%</TextView>
+          }
+        </View>
+        <View style={styles.infoRow}>
+          <View style={skipAnim ? styles.infoCarded : 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={skipAnim ? styles.infoCarded : 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={skipAnim ? styles.infoCarded : 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={skipAnim ? styles.infoCarded : 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>
+      </Animated.View>
+      <EndView/>
+      { (idleFeeConfig && idleFeeConfig.idleFee) &&
+        <DialogIdleFee idleFeeConfig={idleFeeConfig}/>
+      }
+      <View style={ui.flexc}>
+        <TextView style={[styles.label, ui.flex1]}>{$t('charging.paymentMethod')}</TextView>
+        { utils.isNotEmpty(selectedVoucher.userVoucherId) &&
+          <TextView style={[styles.label, {flex: 1, paddingLeft: 16}]}>{$t('voucher.vouchers')}</TextView>
+        }
+      </View>
+      <View style={ui.flexc}>
+        <View style={ui.flex1}>
+          { app.charge.paymentMethod
+          ? <PaymentListV2
+              isSelect={false}
+              payType={currentPayment}
+              chargeBoxId={connectorInfo.chargeBoxId}/>
+          : <PaymentList
+              isSelect={false}
+              payType={currentPayment}/>
+          }
+        </View>
+        { utils.isNotEmpty(selectedVoucher.userVoucherId) &&
+          <View style={styles.voucherLayout}>
+            <MaterialCommunityIcons
+              name="ticket-percent"
+              size={35}
+              color={colorAccent}/>
+            <View style={styles.vouchersView}>
+              <TextView
+                style={styles.voucherName}
+                numberOfLines={1}>
+                {selectedVoucher.voucherName}
+              </TextView>
+              <TextView
+                style={styles.voucherDesc}
+                numberOfLines={1}>
+                {selectedVoucher.voucherDesc}
+              </TextView>
+            </View>
+          </View>
+        }
+      </View>
+      <Button
+        style={styles.buttonView}
+        text={$t('charging.btnStopCharging')}
+        elevation={1.5}
+        borderRadius={6}
+        onClick={onStopCharge}/>
+    </ScrollView>
+  : <View style={ui.flex1}>
+      <Animated.View style={[
+        styles.content, {
+          marginTop: topAnim
+        }
+      ]}>
+        <Image
+          style={styles.stepImage}
+          resizeMode="contain"
+          source={require('../../images/site/charging-status-ready.png')}/>
+        <View style={ui.flexcc}>
+          <TextView style={styles.stepTitle}>{$t('charging.stepInitializing')}</TextView>
+          <TextView style={[styles.stepTitle, {width: 30, marginRight: -10}]}>{loadingEmps}</TextView>
+        </View>
+        <TextView style={styles.stepDesc}>{$t('charging.stepInitializingDesc')}</TextView>
+      </Animated.View>
+      {/* <View style={styles.bottomView}>
+        <TextView style={styles.label}>{$t('charging.paymentMethod')}</TextView>
+        { app.charge.paymentMethod
+        ? <PaymentListV2
+            isSelect={false}
+            payType={currentPayment}
+            chargeBoxId={connectorInfo.chargeBoxId}/>
+        : <PaymentList
+            isSelect={false}
+            payType={currentPayment}/>
+        }
+        <View style={styles.buttonView}></View>
+      </View> */}
+    </View>
+  );
+}
+
+export default StepCharging;
+
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  stepImage: {
+    width: $vw(70),
+    height: $vw(16),
+    margin: 16
+  },
+  stepTitle: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: colorAccent
+  },
+  stepDesc: {
+    color: textPrimary,
+    fontSize: 16,
+    textAlign: 'center',
+    ...$padding(0, 32, 48)
+  },
+  socText: {
+    right: $vw(15),
+    color: colorAccent,
+    width: 60,
+    marginRight: -8,
+    fontSize: 24,
+    fontWeight: 'bold',
+    position: 'absolute',
+    textAlign: 'center',
+  },
+  infoRow: {
+    marginLeft: 16,
+    marginBottom: 16,
+    flexDirection: 'row'
+  },
+  infoCard: {
+    flex: 1,
+    paddingTop: 12,
+    paddingBottom: 12,
+    borderRadius: 10,
+    marginRight: 16,
+    overflow: 'hidden',
+    alignItems: 'center',
+    //...ElevationObject(5),
+    backgroundColor: colorLight
+  },
+  infoCarded: {
+    flex: 1,
+    paddingTop: 12,
+    paddingBottom: 12,
+    borderRadius: 10,
+    marginRight: 16,
+    overflow: 'hidden',
+    alignItems: 'center',
+    ...ElevationObject(5),
+    backgroundColor: colorLight
+  },
+  infoTitle: {
+    color: textPrimary,
+    fontSize: 12
+  },
+  infoText: {
+    color: textPrimary,
+    fontSize: 15,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    ...$padding(12, 6)
+  },
+  infoDesc: {
+    color: textPrimary,
+    fontSize: 12,
+    marginTop: -12,
+    paddingBottom: 8
+  },
+  infoStatus: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    ...$padding(16, 8)
+  },label: {
+    color: '#000',
+    fontSize: 14,
+    fontWeight: 'bold',
+    paddingTop: 16,
+    paddingBottom: 8
+  },
+  bottomView: {
+    left: 0,
+    right: 0,
+    bottom: 32,
+    padding: 16,
+    position: 'absolute'
+  },
+  buttonView: {
+    marginTop: 16,
+    marginBottom: 16
+  },
+  voucherLayout: {
+    flex: 1,
+    padding: 12,
+    maxWidth: $vw(50) - 24,
+    borderRadius: 10,
+    marginLeft: 16,
+    marginBottom: 12,
+    alignItems: 'center',
+    flexDirection: 'row',
+    ...ElevationObject(5),
+    backgroundColor: colorLight,
+  },
+  vouchersView: {
+    flex: 1,
+    paddingLeft: 8,
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  selectText: {
+    flex: 1,
+    color: textSecondary,
+    fontSize: 15,
+    fontWeight: 'bold'
+  },
+  voucherName: {
+    color: textPrimary,
+    fontSize: 15,
+    paddingLeft: 8,
+    fontWeight: 'bold'
+  },
+  voucherDesc: {
+    color: textSecondary,
+    fontSize: 12,
+    paddingLeft: 8,
+    paddingRight: 16
+  }
+})