ebanutsya

src/screens/OrderScreen/OrderScreen.tsx

@@ -5,7 +5,7 @@ import {RFPercentage} from "react-native-responsive-fontsize";
 import DTitle from "../../components/DTitle/DTitle";
 import BasicButton from "../../components/BasicButton/BasicButton";
 import Hyperlink from "../../components/Hyperlink/Hyperlink";
-import React, {useEffect, useState} from "react";
+import React, {FC, useEffect, useState} from "react";
 import userApi from "../../api/userApi";
 import {StatusBar} from "expo-status-bar";
 import * as Progress from 'react-native-progress';
@@ -16,17 +16,25 @@ import {useNavigation} from "@react-navigation/native";
 import printingApi from "../../api/printingApi";
 import PrintingService from "../../utils/PrintingService";
 import OrderProductsList from "../../components/OrderCard/OrderProductsList";
-import {setOrder} from "../../features/assembly/assemblySlice";
+import {setAssembled, setOrder} from "../../features/assembly/assemblySlice";
+import AcceptModal from "../../components/Modals/AcceptModal/AcceptModal";
+import {Order} from "../../types/order";
+import acceptModal from "../../components/Modals/AcceptModal/AcceptModal";
+import printingService from "../../utils/PrintingService";
+import ReprintModal from "../../components/Modals/ReprintModal/ReprintModal";
+import {setData, setPrinterName} from "../../features/printing/printingSlice";
+import {openReprintModal} from "../../features/reprintModal/reprintModalSlice";
 
+type AssemblyPeriod = {
+    started: Date;
+    ended: Date;
+}
 
-function OrderScreen() {
-
-    const order = useSelector((state: RootState) => state.assembly.order);
-    if (!order) return (
+const NoOrderScreen: FC = () => {
+    return (
         <View style={noOrderStyles.container}>
             <DText style={noOrderStyles.title}>Заказ не выбран!</DText>
             <View style={noOrderStyles.buttonWrapper}>
-
                 <BasicButton onPress={() => {
                     // @ts-ignore
                     navigator.navigate("Box");
@@ -35,16 +43,68 @@ function OrderScreen() {
 
         </View>
     )
-    const dispatch = useDispatch();
-    const assembled = useSelector((state: RootState) => state.assembly.assembled);
-    const shipped = useSelector((state: RootState) => state.assembly.shipped);
+}
+const noOrderStyles = StyleSheet.create({
+    container: {
+        justifyContent: "center",
+        flex: 1,
+        rowGap: responsiveHeight(5)
+    },
+    title: {
+        textAlign: "center",
+        fontSize: responsiveWidth(5)
+    },
+    buttonWrapper: {
+        paddingHorizontal: responsiveWidth(20),
+    }
+})
+
+type OrderScreenProps = {
+    order: Order;
+}
+const OrderScreen: FC<OrderScreenProps> = ({order}) => {
     const navigator = useNavigation();
+    const dispatch = useDispatch();
     const [selectedProduct, setSelectedProduct] = useState(order.products[0]);
+    const [assemblyPeriod, setAssemblyPeriod] = useState<AssemblyPeriod>({started: new Date(), ended: new Date()})
+    const [acceptModalVisible, setAcceptModalVisible] = useState(false);
+    const [reprintModalVisible, setReprintModalVisible] = useState(false);
+
+    const [assemblyStarted, setAssemblyStarted] = useState(false);
+    const [assemblyIntervalId, setAssemblyIntervalId] = useState(0);
+    const prettyPrintMilliseconds = (milliseconds: number) => {
+        const totalSeconds = Math.floor(milliseconds / 1000);
+        const minutes = Math.floor(totalSeconds / 60);
+        const seconds = totalSeconds % 60;
+
+        // Форматируем минуты и секунды, чтобы они всегда были двузначными
+        const formattedMinutes = String(minutes).padStart(2, '0');
+        const formattedSeconds = String(seconds).padStart(2, '0');
+
+        return `${formattedMinutes}:${formattedSeconds}`;
+    }
+    const startAssembly = async () => {
+        setAssemblyStarted(true);
+        let intervalId = setInterval(() => {
+            setAssemblyPeriod(oldValue => ({...oldValue, ended: new Date()}))
+        }, 1000);
+        setAssemblyIntervalId(Number(intervalId))
+    };
+    useEffect(() => {
+        let newSelectedProduct = order.products.find(o => o.databaseId == selectedProduct.databaseId);
+        if (!newSelectedProduct) return;
+        setSelectedProduct(newSelectedProduct);
+    }, [order]);
+    useEffect(() => {
+        dispatch(closeLoadingModal())
+    }, []);
     return (
         <View style={styles.container}>
             <View style={styles.productsContainer}>
                 <View style={styles.orderProductsListWrapper}>
-                    <OrderProductsList products={order.products} onSelected={() => {
+                    <OrderProductsList products={order.products} onSelected={(product) => {
+                        if (!order) return;
+                        setSelectedProduct(product)
                     }}/>
                 </View>
                 <View style={styles.imageWrapper}>
@@ -62,37 +122,68 @@ function OrderScreen() {
                     <DText>Артикул DENCO: {selectedProduct.dencoArticle}</DText>
                     <DText>Поставщик: {selectedProduct.supplierName}</DText>
                     <DText>Номер товара: {0}</DText>
+                    <DText>{}</DText>
+                    <DTitle style={styles.contentTitle}>Сборка</DTitle>
+                    <DText>Затрачено
+                        времени: {prettyPrintMilliseconds(assemblyPeriod.ended.getTime() - assemblyPeriod.started.getTime())}</DText>
+
                 </View>
                 <View style={styles.buttonsContainer}>
-                    <BasicButton label={"Отметить как собранный"}
-                                 disabled={!selectedProduct.assembled}
-                                 onPress={()=>{
-                                     setOrder(oldValue => ({ ...oldValue }));
-                                 }}
-                    />
-                    <BasicButton label={"Печать этикетки"}
-                                 disabled={Boolean(order.products.find(product => product.assembled))}/>
+                    {assemblyStarted ? <>
+                            <BasicButton
+                                containerStyle={styles.buttonContainer}
+                                label={"Отметить как собранный"}
+                                disabled={selectedProduct.assembled}
+                                onPress={() => {
+                                    dispatch(setAssembled({orderProductId: selectedProduct.databaseId}))
+                                }}
+                            />
+                            <BasicButton
+                                onPress={() => {
+                                    if (!order) return;
+                                    dispatch(setLoadingText('Идет печать этикетки...'))
+                                    dispatch(openLoadingModal())
+                                    printingApi.getLabel(order.databaseId).then(pdfData => {
+                                        printingService.getInstance().printPdf('ozon', pdfData).then((response) => {
+                                            dispatch(closeLoadingModal());
+                                            if (response) return;
+                                            dispatch(setPrinterName({printerName: 'ozon'}));
+                                            dispatch(openReprintModal());
+                                        });
+                                    })
+                                }}
+                                containerStyle={styles.buttonContainer}
+                                label={"Печать этикетки"}
+                                disabled={Boolean(order.products.find(product => !product.assembled))}/>
+                        </>
+                        : <BasicButton containerStyle={styles.buttonContainer}
+                                       onPress={() => setAcceptModalVisible(true)}
+                                       label={"Начать сборку"}/>}
+
                 </View>
             </View>
-
+            <AcceptModal visible={acceptModalVisible}
+                         text={`Вы уверены что хотите начать сборку заказа ${order.orderNumber}`}
+                         onAccepted={() => {
+                             setAcceptModalVisible(false);
+                             startAssembly();
+                         }}
+                         onRefused={() => {
+                             setAcceptModalVisible(false);
+                         }}/>
         </View>
+
     )
 }
 
-const noOrderStyles = StyleSheet.create({
-    container: {
-        justifyContent: "center",
-        flex: 1,
-        rowGap: responsiveHeight(5)
-    },
-    title: {
-        textAlign: "center",
-        fontSize: responsiveWidth(5)
-    },
-    buttonWrapper: {
-        paddingHorizontal: responsiveWidth(20)
-    }
-})
+export const OrderScreenController: FC = () => {
+    const order: Order | undefined = useSelector((state: RootState) => state.assembly.order);
+    if (!order) return <NoOrderScreen/>
+    console.log(order)
+    return <OrderScreen order={order}/>
+}
+
+
 const styles = StyleSheet.create({
     orderProductsListWrapper: {
         flex: 0.5,
@@ -100,9 +191,8 @@ const styles = StyleSheet.create({
         borderRadius: RFPercentage(3),
         padding: RFPercentage(2),
     },
-    buttonWrapper: {
+    buttonContainer: {
         flex: 1,
-        backgroundColor: "red"
     },
     dataContainer: {
         backgroundColor: "white",