@ledvance/ui-biz-bundle 1.1.168 → 1.1.170

package/src/newModules/energyConsumption/SetSegmentPricesContract.tsx

@@ -0,0 +1,424 @@
+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(() => {
+        return (params.isGenerate ? params.dynamicData.generatePrices : params.dynamicData.intervalPrices) ?? []
+    }, [params]);
+
+    const uiState = useReactive<SetSegmentedPricesUiState>({
+        editingSegmentPrice: {
+            isShow: false,
+            editingSegmentPrice: undefined,
+        },
+        segments: initialSegments,
+        priceUnit: params.priceUnit,
+        selectedSegmentprice: undefined,
+        isLoading: false,
+        isDataChanged: false,
+    });
+    const showAddPopup = useCallback(() => {
+        uiState.editingSegmentPrice = {
+            isShow: true,
+            editingSegmentPrice: undefined,
+        }
+    }, [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) => {
+        const result: PriceSegment[] = [];
+        const intervals = 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
+        const isSuccess = await params.onSetPriceSements(uiState.segments, 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/newModules/energyConsumption/SetSegmentedPricesScreen.tsx

@@ -0,0 +1,189 @@
+import React, {} from "react";
+import {Image, ScrollView, StyleSheet, Text, TouchableOpacity, View} 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)}}>
+                {/* 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={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={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>
+            </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)) {
+                        hidePopup()
+                        if (segment) {
+                            console.log("wayne_check onPriceSegmentConfirm ->", JSON.stringify(segment))
+                            insertPriceSegment(segment)
+                        }
+                    }
+                }}
+            />
+        </Page>
+    )
+}
+
+export interface SetSegmentedPricesParams {
+    backTitle: string,
+    dynamicData: DynamicEnergyData,
+    priceUnit: string,
+    isGenerate: boolean,
+    onSetPriceSements: (segments: PriceSegment[], currency: string) => Promise<boolean>,
+}
+
+export default withTheme(SetSegmentedPricesScreen)