@ledvance/group-ui-biz-bundle 1.0.160 → 1.0.161

package/src/modules/energyConsumption/SetSegmentPricesContract.tsx

@@ -0,0 +1,461 @@
+import { useCallback, useMemo } from "react"
+import { parseMinutes, PriceSegment, UnitList } from "./component/EnergyModal"
+import { SetSegmentedPricesParams } from "./SetSegmentedPricesScreen"
+import { useReactive } from "ahooks"
+import { showDialog } from "@ledvance/base/src/utils/common";
+import I18n from "@ledvance/base/src/i18n";
+import { StyleSheet, FlatList, Image, TouchableOpacity, View, Text } from "react-native";
+import { Utils, Popup } from "tuya-panel-kit";
+import ThemeType from "@ledvance/base/src/config/themeType";
+import res from "@ledvance/base/src/res";
+import Card from "@ledvance/base/src/components/Card";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import React from "react";
+
+interface EditingPopupState {
+    isShow: boolean
+    editingSegmentPrice: PriceSegment | undefined
+}
+export interface SetSegmentedPricesUiState {
+    editingSegmentPrice: EditingPopupState,
+    segments: PriceSegment[],
+    priceUnit: string,
+    selectedSegmentprice?: PriceSegment,
+    isLoading: boolean,
+    isDataChanged: boolean,
+}
+
+export const useSetSegmentPrice = (params: SetSegmentedPricesParams, theme?: ThemeType) => {
+    const cx = Utils.RatioUtils.convertX
+    const initialSegments = useMemo(() => {
+        const rawSegments = (params.isGenerate ? params.dynamicData.generatePrices : params.dynamicData.intervalPrices) ?? [];
+        return rawSegments.map(item => ({ ...item }));
+    }, [params]);
+
+    const uiState = useReactive<SetSegmentedPricesUiState>({
+        editingSegmentPrice: {
+            isShow: false,
+            editingSegmentPrice: undefined,
+        },
+        segments: initialSegments,
+        priceUnit: params.priceUnit,
+        selectedSegmentprice: undefined,
+        isLoading: false,
+        isDataChanged: false,
+    });
+    const findEmptySegment = useCallback(() => {
+        let ptr = 0;
+        const TOTAL_MINUTES = 1439; // (0 ~ 1439)
+        for (const segment of uiState.segments) {
+            if (segment.startMinute > ptr) {
+                return {
+                    startMinute: ptr,
+                    endMinute: segment.startMinute,
+                    price: 0,
+                }
+            }
+            ptr = segment.endMinute;
+        }
+        //优化项：如果指针是0，表示没有设置过时间段，这个时候不需要帮用户自动填充成00:00 - 23:59增加用户的麻烦，因为至少要两段才可以保存，
+        if (ptr > 0 && ptr < TOTAL_MINUTES) {
+            return {
+                startMinute: ptr,
+                endMinute: TOTAL_MINUTES,
+                price: 0,
+            }
+        }
+        return undefined
+    }, [uiState.segments])
+    const showAddPopup = useCallback(() => {
+        uiState.editingSegmentPrice = {
+            isShow: true,
+            editingSegmentPrice: findEmptySegment(),
+        }
+    }, [uiState]);
+    const showEditPopup = useCallback((item: PriceSegment) => {
+        uiState.editingSegmentPrice = {
+            isShow: true,
+            editingSegmentPrice: item,
+        };
+    }, [uiState]);
+    const hidePopup = useCallback(() => {
+        uiState.editingSegmentPrice = {
+            isShow: false,
+            editingSegmentPrice: undefined,
+        };
+    }, [uiState]);
+    const insertPriceSegment = useCallback((newInterval: PriceSegment, originalInterval?: PriceSegment) => {
+        const result: PriceSegment[] = [];
+        const isEditing = originalInterval && uiState.segments.some(
+            item => item.startMinute === originalInterval.startMinute && item.endMinute === originalInterval.endMinute
+        );
+        const intervals = isEditing
+            ? uiState.segments.filter(item => !(item.startMinute === originalInterval.startMinute && item.endMinute === originalInterval.endMinute))
+            : uiState.segments;
+        for (const old of intervals) {
+            // 无交集
+            if (
+                old.endMinute <= newInterval.startMinute ||
+                old.startMinute >= newInterval.endMinute
+            ) {
+                result.push(old)
+                continue
+            }
+
+            // 保留左边未覆盖部分
+            if (old.startMinute < newInterval.startMinute) {
+                result.push({
+                    startMinute: old.startMinute,
+                    endMinute: newInterval.startMinute,
+                    price: old.price,
+                })
+            }
+
+            // 保留右边未覆盖部分
+            if (old.endMinute > newInterval.endMinute) {
+                result.push({
+                    startMinute: newInterval.endMinute,
+                    endMinute: old.endMinute,
+                    price: old.price,
+                })
+            }
+        }
+
+        // 插入新区间
+        result.push(newInterval)
+
+        // 排序
+        result.sort((a, b) => a.startMinute - b.startMinute)
+
+        // 合并相邻且价格相同区间
+        const merged: PriceSegment[] = []
+
+        for (const seg of result) {
+            const last = merged[merged.length - 1]
+
+            if (
+                last &&
+                last.price === seg.price &&
+                last.endMinute === seg.startMinute
+            ) {
+                last.endMinute = seg.endMinute
+            } else {
+                merged.push({ ...seg })
+            }
+        }
+        uiState.segments = merged
+        uiState.isDataChanged = true
+    }, [uiState])
+    const parsePriceSegmentText = useCallback((startMinutes: number, endMinutes: number, price: number, currency: string) => {
+        const { hour: sh, minute: sm } = parseMinutes(startMinutes)
+        const { hour: eh, minute: em } = parseMinutes(endMinutes)
+        return `${sh}:${sm} - ${eh}:${em} ${price}${currency}/kWh`;
+    }, [])
+    const showAlerDialog = useCallback((content: string) => {
+        showDialog({
+            method: 'alert',
+            title: I18n.getLang('title_tips'),
+            subTitle: content,
+            onConfirm: async (_, { close }) => {
+                close()
+            }
+        })
+    }, [])
+
+    const verifyEditingPriceSegment = useCallback((item: PriceSegment | undefined) => {
+        if (!item) {
+            showAlerDialog(I18n.getLang('error_end_timer_must_greater'))
+            return false
+        }
+        const { startMinute, endMinute, price } = item
+        if (price == undefined || price == 0) {
+            //toast price must be greater than 0
+            // uiState.toastMessage = "price must be greater than 0"
+            showAlerDialog(I18n.getLang('error_price_must_greater_than_z'))
+            return false
+        }
+        if (endMinute <= startMinute) {
+            //toast end timer must be greater than the start timer
+            // uiState.toastMessage = "end timer must be greater than the start timer"
+            showAlerDialog(I18n.getLang('error_end_timer_must_greater'))
+            return false
+        }
+        return true
+    }, [])
+    const checkFullDayCoverage = (segments: PriceSegment[]): boolean => {
+        if (!segments || segments.length === 0) {
+            return false;
+        }
+
+        const sorted = [...segments].sort((a, b) => a.startMinute - b.startMinute);
+
+        if (sorted[0].startMinute !== 0) {
+            return false;
+        }
+
+        let currentEnd = sorted[0].endMinute;
+
+        for (let i = 1; i < sorted.length; i++) {
+            const nextSegment = sorted[i];
+
+            if (nextSegment.startMinute !== currentEnd) {
+                return false;
+            }
+
+            currentEnd = nextSegment.endMinute;
+        }
+
+        return currentEnd >= 1439;
+    }
+    const verifySegmentsResult = useCallback(() => {
+        const segments = uiState.segments
+        if (!checkFullDayCoverage(segments)) {
+            showAlerDialog(I18n.getLang('error_time_period_not_full_day'))
+            return false
+        }
+        if (segments.length < 2) {
+            showAlerDialog(I18n.getLang('error_time_period_single'))
+            return false
+        }
+        return true
+    }, [])
+    const handleSaveClick = async (onSuccess: () => void) => {
+        if (!verifySegmentsResult()) {
+            return
+        }
+        uiState.isLoading = true
+        // uiState.segments is a useReactive proxy; passing it straight through would let the
+        // proxy leak into redux (RTK/immer freezes it) and trigger a Proxy invariant crash
+        // ('get' on proxy: property '0' is read-only...) on the next re-render. Clone to plain data.
+        const plainSegments: PriceSegment[] = uiState.segments.map(s => ({
+            startMinute: s.startMinute,
+            endMinute: s.endMinute,
+            price: s.price,
+        }))
+        const isSuccess = await params.onSetPriceSements(plainSegments, uiState.priceUnit)
+        uiState.isLoading = false
+        if (isSuccess) {
+            onSuccess()
+        } else {
+            showAlerDialog(I18n.getLang('common_server_api_error'))
+        }
+    }
+    const colorMapRef = React.useRef<Map<number, string>>(new Map())
+    const colors = [
+        '#00D084', // green
+        '#4A90E2', // blue
+        '#F5A623', // orange
+        '#BD10E0', // purple
+        '#7ED321', // light green
+        '#F8E71C', // yellow
+        '#FF6B6B', // red
+        '#50E3C2', // teal
+    ]
+
+    useMemo(() => {
+        initialSegments.forEach((seg, index) => {
+            if (!colorMapRef.current.has(seg.startMinute)) {
+                colorMapRef.current.set(seg.startMinute, colors[index % colors.length]);
+            }
+        });
+    }, [initialSegments]);
+
+    //取颜色 使用map 确保颜色的一致性与连续性
+    const getSegmentColor = useCallback((startMinute: number, _price: number): string => {
+        let color = colorMapRef.current.get(startMinute);
+        if (!color) {
+            //找出当前未被使用的颜色，保证颜色列表充分利用且不重复
+            const usedColors = new Set(
+                uiState.segments
+                    .map(seg => colorMapRef.current.get(seg.startMinute))
+                    .filter(Boolean)
+            );
+            color = colors.find(c => !usedColors.has(c)) || colors[colorMapRef.current.size % colors.length];
+            colorMapRef.current.set(startMinute, color);
+        }
+        return color;
+    }, [uiState.segments]);
+
+    const showCurrencyPopup = () => {
+        const { height, statusBarHeight } = Utils.RatioUtils
+        Popup.custom({
+            title: (
+                <View style={{ backgroundColor: theme?.card.head, flexDirection: 'row', height: cx(60), justifyContent: 'space-between', alignItems: 'center', borderTopLeftRadius: cx(10), borderTopRightRadius: cx(10), paddingHorizontal: cx(8) }}>
+                    <TouchableOpacity onPress={() => Popup.close()}>
+                        <Text style={{ color: theme?.global.secondBrand, fontSize: cx(16) }}>{I18n.getLang('auto_scan_system_cancel')}</Text>
+                    </TouchableOpacity>
+                </View>
+            ),
+            wrapperStyle: {
+                height: height - statusBarHeight - cx(40),
+                backgroundColor: theme?.global.background
+            },
+            footer: (<View style={{ backgroundColor: theme?.global.background }}></View>),
+            onMaskPress: () => { },
+            motionType: 'none',
+            useKeyboardView: true,
+            content: (
+                <View
+                    style={{ backgroundColor: theme?.global.background, paddingHorizontal: cx(16) }}>
+                    <Spacer />
+                    <Card>
+                        <FlatList
+                            data={UnitList}
+                            initialNumToRender={15}
+                            renderItem={({ item }) => (
+                                <TouchableOpacity
+                                    onPress={() => {
+                                        uiState.priceUnit = item
+                                        uiState.isDataChanged = true
+                                        Popup.close()
+                                    }}
+                                >
+                                    <View style={styles.unitItem}>
+                                        <Text style={{ fontSize: cx(16), color: theme?.global.fontColor }}>{item}</Text>
+                                        {uiState.priceUnit === item && <Image
+                                            style={{ width: cx(16), height: cx(16) }}
+                                            source={{ uri: res.app_music_check }}
+                                            resizeMode="contain"
+                                        />}
+                                    </View>
+                                </TouchableOpacity>
+                            )}
+                            ItemSeparatorComponent={() => (
+                                <View style={{ flex: 1, height: 1, backgroundColor: theme?.card.background }}></View>
+                            )}
+                            keyExtractor={item => item}
+                        />
+                    </Card>
+                    <Spacer />
+                </View>
+            )
+        })
+    }
+
+    const deletePriceSegment = useCallback((itemToDelete: PriceSegment) => {
+        showDialog({
+            method: 'confirm',
+            title: I18n.getLang('title_tips'),
+            subTitle: I18n.getLang('consumption_confirm_delete_period'),
+            onConfirm: (_, { close }) => {
+                close()
+                uiState.isDataChanged = true
+                uiState.segments = uiState.segments.filter(item =>
+                    !(item.startMinute === itemToDelete.startMinute && item.endMinute === itemToDelete.endMinute)
+                )
+                if (uiState.selectedSegmentprice?.startMinute === itemToDelete.startMinute &&
+                    uiState.selectedSegmentprice?.endMinute === itemToDelete.endMinute) {
+                    uiState.selectedSegmentprice = undefined;
+                }
+            }
+        })
+    }, [uiState])
+
+    const styles = StyleSheet.create(
+        {
+            cardStyle: {
+                paddingHorizontal: cx(16),
+                paddingVertical: cx(8),
+                elevation: 1
+            },
+            addPeriodCircle: {
+                justifyContent: 'center',
+                alignItems: 'center',
+                width: cx(16),
+                height: cx(16),
+                borderRadius: cx(8),
+                backgroundColor: theme?.global.brand
+            },
+            addPeriodImg: {
+                width: cx(14),
+                height: cx(14),
+                tintColor: theme?.container.background
+            },
+            scrollContainer: {
+                paddingHorizontal: cx(16),
+            },
+            currencyCardContainer: {
+                flexDirection: 'row',
+                paddingHorizontal: cx(16),
+                paddingVertical: cx(8),
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            },
+            cardTitle: {
+                fontSize: cx(16),
+                fontWeight: 'bold',
+                color: theme?.global.fontColor,
+            },
+            line: {
+                height: 1,
+                position: 'absolute',
+                start: cx(4),
+                end: cx(4),
+                bottom: 0,
+                backgroundColor: theme?.textInput.line,
+            },
+            textGroup: {
+                flexDirection: 'row',
+                borderRadius: cx(4),
+                backgroundColor: theme?.textInput.background,
+                alignItems: 'center',
+                flex: 1,
+            },
+            textParent: {
+                flex: 1,
+                height: cx(44),
+                justifyContent: 'center',
+            },
+            text: {
+                marginStart: cx(16),
+                marginEnd: cx(6),
+                fontSize: cx(16),
+                color: theme?.textInput.fontColor,
+                fontFamily: 'helvetica_neue_lt_std_roman',
+            },
+            unitItem: {
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                paddingHorizontal: cx(10),
+                alignItems: 'center',
+                height: cx(40),
+            },
+            verticalIndicator: {
+                position: 'absolute',
+                top: cx(8),
+                bottom: 0,
+                left: 0,
+                width: cx(40),
+                minHeight: cx(320),
+            },
+            segmentItem: {
+                position: 'relative',
+                marginTop: cx(8),
+                marginLeft: cx(24),
+                marginRight: cx(24),
+            },
+            editSegmentIndicator: {
+                width: cx(18),
+                height: cx(18),
+                marginHorizontal: cx(6),
+            },
+            deleteSegmentIndicator: {
+                position: 'absolute',
+                top: -cx(6),
+                right: -cx(6),
+                width: cx(14),
+                height: cx(14),
+                zIndex: 99,
+                elevation: 5,
+                backgroundColor: '#ffffff',
+                borderRadius: cx(12),
+            },
+        }
+    )
+
+    return {
+        uiState, showAddPopup, showEditPopup, hidePopup, insertPriceSegment, parsePriceSegmentText,
+        verifyEditingPriceSegment, handleSaveClick, getSegmentColor, styles, showCurrencyPopup, deletePriceSegment
+    }
+
+}

package/src/modules/energyConsumption/SetSegmentedPricesScreen.tsx

@@ -0,0 +1,201 @@
+import React, { } from "react";
+import { Image, ScrollView, StyleSheet, Text, TouchableOpacity, View, TouchableWithoutFeedback } from "react-native";
+import { Utils } from 'tuya-panel-kit'
+import Card from "@ledvance/base/src/components/Card";
+import ThemeType from "@ledvance/base/src/config/themeType";
+import res from "@ledvance/base/src/res";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import Page from "@ledvance/base/src/components/Page";
+import I18n from "@ledvance/base/src/i18n";
+import { useRoute } from '@react-navigation/core';
+import EnergyPopup, { DynamicEnergyData, PriceSegment } from './component/EnergyModal';
+import { useSetSegmentPrice } from "./SetSegmentPricesContract";
+import VerticalDailyPricesIndicator from "./component/VerticalDailyPricesIndicator";
+import { useNavigation } from '@react-navigation/core'
+
+const { withTheme } = Utils.ThemeUtils
+const { convertX: cx } = Utils.RatioUtils
+
+const SetSegmentedPricesScreen = (props: { theme?: ThemeType }) => {
+    const params = useRoute().params as SetSegmentedPricesParams
+    const navigation = useNavigation()
+    const {
+        uiState, showAddPopup, showEditPopup, hidePopup, insertPriceSegment, parsePriceSegmentText,
+        verifyEditingPriceSegment, handleSaveClick, getSegmentColor, styles, showCurrencyPopup, deletePriceSegment
+    } = useSetSegmentPrice(params, props.theme)
+
+    return (
+        <Page
+            style={{ position: 'relative' }}
+            backText={params.backTitle}
+            headlineText={I18n.getLang('consumption_data_field_dynamic_money')}
+            rightButtonIcon={res.ic_check}
+            rightButtonIconClick={() => {
+                handleSaveClick(() => {
+                    navigation.goBack()
+                })
+            }}
+            loading={uiState.isLoading}
+            showBackDialog={uiState.isDataChanged}
+            backDialogTitle={I18n.getLang('manage_user_unsaved_changes_dialog_headline')}
+            backDialogContent={I18n.getLang('motion_detection_change_activity_dialog_description_text')}
+        >
+            <ScrollView style={styles.scrollContainer}
+                contentContainerStyle={{ flexGrow: 1, paddingBottom: cx(20) }}>
+                <TouchableWithoutFeedback onPress={() => {
+                    uiState.selectedSegmentprice = undefined
+                }}>
+                    <View style={{ flex: 1 }}>
+                        {/* currency field*/}
+                        <Card style={{ elevation: cx(2) }}
+                            containerStyle={styles.currencyCardContainer}>
+                            <Text
+                                style={styles.cardTitle}>{I18n.getLang('consumption_data_price_per_kwh_currency_headline_text')}</Text>
+                            <TouchableOpacity style={{ flex: 0.4 }} accessibilityLabel={"TextFieldStyleButton"}
+                                onPress={() => {
+                                    uiState.selectedSegmentprice = undefined
+                                    showCurrencyPopup()
+                                }}>
+                                <View style={styles.textGroup}>
+                                    <View style={styles.textParent}>
+                                        <Text style={styles.text}>{uiState.priceUnit}</Text>
+                                    </View>
+                                    <View style={styles.line} />
+                                </View>
+                            </TouchableOpacity>
+                        </Card>
+                        {/* segmented prices field*/}
+                        <View style={{ width: '100%', marginTop: cx(10) }}>
+                            <View style={{ flexDirection: 'row', width: '100%', position: 'relative', marginTop: cx(10) }}>
+                                {/*Vertical indicator*/}
+                                <View style={styles.verticalIndicator}>
+                                    <VerticalDailyPricesIndicator
+                                        style={{ height: '100%' }}
+                                        data={uiState.segments}
+                                        selectingData={uiState.selectedSegmentprice}
+                                        getSegmentColor={getSegmentColor}
+                                    />
+                                </View>
+
+
+                                <View style={{ flex: 1, marginLeft: cx(45) }}>
+                                    {/* Add Time period */}
+                                    <Card
+                                        style={[styles.cardStyle, { marginTop: cx(8), marginLeft: cx(24), marginRight: cx(24) }]}
+                                        onPress={() => {
+                                            uiState.selectedSegmentprice = undefined
+                                            showAddPopup()
+                                        }}>
+                                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                                            <View style={styles.addPeriodCircle}>
+                                                <Image source={{ uri: res.ic_plus }} style={styles.addPeriodImg}></Image>
+                                            </View>
+                                            <Spacer style={{ width: cx(8) }}></Spacer>
+                                            <Text
+                                                style={{ color: props.theme?.global.fontColor }}>{I18n.getLang('consumption_add_time_period')}</Text>
+                                        </View>
+                                    </Card>
+                                    {/** Time and Price segments */}
+                                    <Spacer />
+                                    {
+                                        (uiState.segments.map((item) => {
+                                            const { startMinute, endMinute, price } = item
+                                            const content = parsePriceSegmentText(startMinute, endMinute, price, uiState.priceUnit)
+                                            const backgroundColor = getSegmentColor(item.startMinute, item.price)
+                                            return (
+                                                <View
+                                                    key={`${item.startMinute}-${item.endMinute}`}
+                                                    style={styles.segmentItem}
+                                                >
+                                                    {/* Segment Card*/}
+                                                    <Card
+                                                        style={[styles.cardStyle, {
+                                                            backgroundColor: backgroundColor,
+                                                            marginTop: 0,
+                                                            marginLeft: 0,
+                                                            marginRight: 0,
+                                                            width: '100%',
+                                                        }]}
+                                                        onPress={() => {
+                                                            console.log("outside set selectedItem ->", JSON.stringify(item))
+                                                            uiState.selectedSegmentprice = item
+                                                        }}>
+                                                        <View
+                                                            style={{ flexDirection: 'row', justifyContent: 'space-between', }}>
+                                                            <Text
+                                                                style={{ color: props.theme?.button.fontColor }}>{content}</Text>
+                                                            <TouchableOpacity
+                                                                style={styles.editSegmentIndicator}
+                                                                onPress={() => {
+                                                                    showEditPopup(item)
+                                                                }}>
+                                                                <Image
+                                                                    style={{
+                                                                        width: '100%',
+                                                                        height: '100%',
+                                                                        tintColor: props.theme?.button.fontColor
+                                                                    }} source={{ uri: res.ic_more }} />
+                                                            </TouchableOpacity>
+                                                        </View>
+
+                                                    </Card>
+                                                    {/* Delete icon*/}
+                                                    {uiState.selectedSegmentprice?.startMinute === item.startMinute &&
+                                                        uiState.selectedSegmentprice?.endMinute === item.endMinute && (
+                                                            <TouchableOpacity
+                                                                style={styles.deleteSegmentIndicator}
+                                                                onPress={() => {
+                                                                    deletePriceSegment(item)
+                                                                }}>
+                                                                <Image style={{
+                                                                    width: '100%',
+                                                                    height: '100%',
+                                                                }} source={res.icon_delete} />
+                                                            </TouchableOpacity>
+                                                        )}
+
+                                                </View>
+                                            )
+                                        }
+                                        ))
+                                    }
+                                </View>
+                            </View>
+
+                        </View>
+                    </View>
+                </TouchableWithoutFeedback>
+            </ScrollView>
+            <EnergyPopup
+                visible={uiState.editingSegmentPrice.isShow}
+                popupType={'segment_price'}
+                title={I18n.getLang('contact_sensor_specific_settings')}
+                cancelText={I18n.getLang('auto_scan_system_cancel')}
+                confirmText={I18n.getLang('auto_scan_system_wifi_confirm')}
+                editingPriceSegment={uiState.editingSegmentPrice.editingSegmentPrice}
+                onCancel={() => {
+                    hidePopup()
+                }}
+                onPriceSegmentConfirm={(segment) => {
+                    if (verifyEditingPriceSegment(segment)) {
+                        if (segment) {
+                            console.log("wayne_check onPriceSegmentConfirm ->", JSON.stringify(segment))
+                            insertPriceSegment(segment, uiState.editingSegmentPrice.editingSegmentPrice)
+                        }
+                        hidePopup()
+                    }
+                }}
+            />
+        </Page>
+    )
+}
+
+export interface SetSegmentedPricesParams {
+    backTitle: string,
+    dynamicData: DynamicEnergyData,
+    priceUnit: string,
+    isGenerate: boolean,
+    onSetPriceSements: (segments: PriceSegment[], currency: string) => Promise<boolean>,
+}
+
+export default withTheme(SetSegmentedPricesScreen)