wenay-react2 1.0.1

package/lib/common/src/hooks/useOutside.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from "react";
+export const StyleOtherRow = { display: "flex", flexDirection: "row", flex: "auto 1 1" };
+export const StyleOtherColum = { display: "flex", flexDirection: "column", flex: "auto 0 1" };
+export function useOutside({ outsideClick, ref = useRef(null), status = true }) {
+    useEffect(() => {
+        if (status) {
+            function handleClickOutside(event) {
+                if (ref.current && event.target instanceof Node && !ref.current.contains(event.target))
+                    outsideClick();
+            }
+            document.addEventListener("mousedown", handleClickOutside);
+            return () => document.removeEventListener("mousedown", handleClickOutside);
+        }
+    }, [ref, status, outsideClick]);
+    return ref;
+}
+export const DivOutsideClick = React.forwardRef(({ children, outsideClick, zIndex, style = {}, status = true, ...other }, forwardedRef) => {
+    const style2 = zIndex ? { ...style, zIndex } : style;
+    const internalRef = useOutside({ outsideClick: outsideClick, status });
+    // Combine refs if forwardedRef is provided
+    const ref = forwardedRef
+        ? (node) => {
+            internalRef.current = node;
+            if (typeof forwardedRef === 'function') {
+                forwardedRef(node);
+            }
+            else if (forwardedRef) {
+                forwardedRef.current = node;
+            }
+        }
+        : internalRef;
+    return _jsx("div", { ref: ref, style: style2, ...other, children: children });
+});
+// Deprecated: Use DivOutsideClick instead
+export const DivOutsideClick2 = DivOutsideClick;
+function ButtonBase({ children, button, style = {}, className = "", state: [a, setA] }) {
+    return _jsxs("div", { style: { position: "relative", width: "min-content", ...style }, className: className, children: [_jsx("div", { onClick: () => setA(!a), children: typeof button == "function" ? button(a) : button }), a && (typeof children == "function" ? children({ onClose: () => setA(!a) }) : children)] });
+}
+const saveStatus = {};
+export function Button({ keySave, statusDef, outClick, ...data }) {
+    if (keySave && saveStatus[keySave])
+        statusDef = saveStatus[keySave];
+    const state = useState(statusDef ?? false);
+    return outClick ? DivOutsideClick({
+        status: state[0],
+        children: ButtonBase({ ...data, state }),
+        outsideClick: () => {
+            state[1](false);
+            if (typeof outClick == "function")
+                outClick();
+        }
+    })
+        : ButtonBase({ ...data, state });
+}
+export function ButtonHover(props) {
+    const [hover, setHover] = useState(false);
+    return _jsxs("div", { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: { position: "relative" }, children: [typeof props.button == "function" ? props.button(hover) : props.button, hover &&
+                _jsx("div", { style: { position: "absolute" }, children: typeof props.children == "function" ? props.children({ onClose: () => setHover(false) }) : props.children })] });
+}
+export const ButtonOutClick = ({ outClick = true, ...a }) => Button({ ...a, outClick });
+export function ButtonAbs(...a) {
+    const children = (api) => _jsx("div", { style: { position: "relative" }, children: _jsx("div", { style: {
+                position: "absolute",
+                zIndex: a[0]?.zIndex ?? 9
+            }, children: typeof a[0].children == "function" ? a[0].children(api) : a[0].children }) });
+    return Button({ ...a[0], children });
+}

package/lib/common/src/logs/logs.d.ts

@@ -0,0 +1,163 @@
+import { Params } from "wenay-common2";
+type tLogsInput<T extends object> = T & {
+    id: string;
+    var?: number;
+    time: Date;
+    txt: string;
+};
+declare const getSettingLogs: () => {
+    minVarLogs: {
+        name: string;
+        range: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        value: number;
+    };
+    minVarMessage: {
+        name: string;
+        range: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        value: number;
+    };
+    timeShow: {
+        name: string;
+        range: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        value: number;
+    };
+    show: {
+        name: string;
+        value: boolean;
+    };
+};
+export declare function getLogsApi<T extends object = {}>(setting: {
+    limit?: number;
+    limitPer: number;
+    varMin?: number;
+}): {
+    addLogs(a: tLogsInput<T>): void;
+    params: {
+        def: () => {
+            minVarLogs: {
+                name: string;
+                range: {
+                    min: number;
+                    max: number;
+                    step: number;
+                };
+                value: number;
+            };
+            minVarMessage: {
+                name: string;
+                range: {
+                    min: number;
+                    max: number;
+                    step: number;
+                };
+                value: number;
+            };
+            timeShow: {
+                name: string;
+                range: {
+                    min: number;
+                    max: number;
+                    step: number;
+                };
+                value: number;
+            };
+            show: {
+                name: string;
+                value: boolean;
+            };
+        };
+        get(): {
+            minVarLogs: number;
+            minVarMessage: number;
+            timeShow: number;
+            show: boolean;
+        } & {
+            readonly [key: number]: void;
+        };
+        set(a: Params.SimpleParams<ReturnType<typeof getSettingLogs>>): void;
+    };
+    React: {
+        Setting: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+        Message: typeof MessageEventLogs;
+        PageLogs: typeof PageLogs;
+    };
+};
+export declare const logsApi: {
+    addLogs(a: {
+        id: string;
+        var?: number;
+        time: Date;
+        txt: string;
+    }): void;
+    params: {
+        def: () => {
+            minVarLogs: {
+                name: string;
+                range: {
+                    min: number;
+                    max: number;
+                    step: number;
+                };
+                value: number;
+            };
+            minVarMessage: {
+                name: string;
+                range: {
+                    min: number;
+                    max: number;
+                    step: number;
+                };
+                value: number;
+            };
+            timeShow: {
+                name: string;
+                range: {
+                    min: number;
+                    max: number;
+                    step: number;
+                };
+                value: number;
+            };
+            show: {
+                name: string;
+                value: boolean;
+            };
+        };
+        get(): {
+            minVarLogs: number;
+            minVarMessage: number;
+            timeShow: number;
+            show: boolean;
+        } & {
+            readonly [key: number]: void;
+        };
+        set(a: Params.SimpleParams<ReturnType<typeof getSettingLogs>>): void;
+    };
+    React: {
+        Setting: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+        Message: typeof MessageEventLogs;
+        PageLogs: typeof PageLogs;
+    };
+};
+export declare function PageLogs({ update }: {
+    update?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MessageEventLogs({ zIndex }: {
+    zIndex?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PageLogs2({ update }: {
+    update?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/common/src/logs/logs.js

@@ -0,0 +1,249 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AgGridReact } from "ag-grid-react";
+import { useCallback, useEffect, useRef } from "react";
+import { copyToClipboard, Params, timeLocalToStr_hhmmss } from "wenay-common2";
+import { renderBy, updateBy } from "../../updateBy";
+import { mouseMenuApi } from "../menu/menuMouse";
+import { staticGetAdd } from "../utils";
+import { ParametersReact } from "../components";
+const cashLogs = new Map();
+const datumConst = {
+    map: cashLogs,
+};
+const datumMiniConst = {
+    last: []
+};
+const getSettingLogs = () => ({
+    minVarLogs: { name: "мин. важность для оповещения", range: { min: 0, max: 25, step: 1 }, value: 0 },
+    minVarMessage: { name: "мин. важность для таблицы логов", range: { min: 0, max: 25, step: 1 }, value: 0 },
+    timeShow: { name: "время отображение на экране", range: { min: 1, max: 20, step: 1 }, value: 2 },
+    show: { name: "отображать", value: true }
+});
+const settingLogs = { params: Params.GetSimpleParams(getSettingLogs()) };
+// varMin - минимальная важность
+export function getLogsApi(setting) {
+    const datum = staticGetAdd("settingLogs", settingLogs);
+    function addToArr(arr, data, limit) {
+        arr.unshift(data);
+        if (arr.length > limit)
+            arr.length = limit;
+    }
+    let num = 0;
+    const SettingLogsReact = ({}) => _jsx(ParametersReact
+    // @ts-ignore
+    , { 
+        // @ts-ignore
+        params: Params.mergeParamValuesToInfos(getSettingLogs(), datum.params), onChange: (e) => {
+            datum.params = Params.GetSimpleParams(e);
+            renderBy(datum);
+        } });
+    return {
+        addLogs(a) {
+            addToArr(datumMiniConst.last, { ...a, num: num++ }, 50);
+            addToArr(datumConst.map.get(a.id) ?? datumConst.map.set(a.id, []).get(a.id), { ...a, num: num++ }, setting.limitPer);
+            renderBy(datumConst);
+            renderBy(datumMiniConst);
+        },
+        params: {
+            def: getSettingLogs,
+            get() { return datum.params; },
+            set(a) {
+                datum.params = a;
+                renderBy(datumMiniConst);
+                renderBy(datumConst);
+            },
+        },
+        React: {
+            Setting: SettingLogsReact,
+            Message: MessageEventLogs,
+            PageLogs: PageLogs
+        }
+    };
+}
+export const logsApi = getLogsApi({ limitPer: 500 });
+function InputSettingLogs({}) {
+    const datum = staticGetAdd("settingLogs", settingLogs);
+    return _jsx(ParametersReact
+    // @ts-ignore
+    , { 
+        // @ts-ignore
+        params: Params.mergeParamValuesToInfos(getSettingLogs(), datum.params), onChange: (e) => {
+            datum.params = Params.GetSimpleParams(e);
+            renderBy(datum);
+        } });
+}
+export function PageLogs({ update }) {
+    const datumFull = datumConst;
+    const rowData = [...datumFull.map.values()].flatMap(e => e.map(e => ({
+        ...e,
+        time: (e.time)
+    })));
+    const datum = datumMiniConst;
+    const setting = staticGetAdd("settingLogs", settingLogs);
+    const apiGrid = useRef(null);
+    useEffect(() => {
+        apiGrid.current?.api.sizeColumnsToFit();
+    }, [update]);
+    updateBy(setting, () => {
+        if (setting.params.minVarLogs) {
+            apiGrid.current?.api.setFilterModel({
+                var: {
+                    filterType: 'number',
+                    type: 'greaterThanOrEqual',
+                    filter: setting.params.minVarLogs
+                }
+            });
+        }
+        else {
+            apiGrid.current?.api.destroyFilter("var");
+        }
+    });
+    updateBy(datum, () => {
+        const data = datum.last[0];
+        console.log({ data });
+        if (data) { // data.time timeLocalToStr_yyyymmdd_hhmmss_ms
+            apiGrid.current?.api.applyTransactionAsync({
+                add: [
+                    {
+                        ...data,
+                        time: data.time
+                    }
+                ]
+            });
+        }
+    });
+    const Main = useCallback(() => {
+        const columns = [
+            {
+                field: "time",
+                sort: "desc",
+                width: 50,
+                valueFormatter: (e) => e.value.time ? timeLocalToStr_hhmmss(e.value.time) : e.value.time
+            },
+            {
+                field: "id",
+                width: 20,
+            },
+            {
+                field: "var",
+                width: 50,
+            },
+            {
+                field: "type1",
+                width: 50,
+            },
+            {
+                field: "type2",
+                width: 50,
+            },
+            {
+                field: "type3",
+                width: 50,
+            },
+            {
+                field: "txt",
+                wrapText: true,
+                autoHeight: true,
+                width: 350
+            },
+            {
+                field: "address",
+                width: 150,
+            },
+        ];
+        return _jsx("div", { className: "maxSize", children: _jsx(AgGridReact
+            // className = "ag-theme-alpine-dark ag-theme-alpine2" // ag-theme-alpine-dark3
+            , { 
+                // className = "ag-theme-alpine-dark ag-theme-alpine2" // ag-theme-alpine-dark3
+                suppressCellFocus: true, onGridReady: (a) => {
+                    apiGrid.current = a; //as GridReadyEvent<tColum>
+                    apiGrid.current.api.sizeColumnsToFit();
+                    if (setting.params.minVarLogs) {
+                        apiGrid.current.api.setFilterModel({
+                            var: {
+                                filterType: 'number',
+                                type: 'greaterThanOrEqual',
+                                filter: setting.params.minVarLogs
+                            }
+                        });
+                    }
+                }, onSortChanged: (e) => {
+                }, defaultColDef: {
+                    headerClass: () => ("gridTable-header"),
+                    resizable: true,
+                    cellStyle: { textAlign: "center" },
+                    sortable: true,
+                    filter: true,
+                    wrapText: true,
+                }, headerHeight: 30, rowHeight: 26, autoSizePadding: 1, rowData: rowData, columnDefs: columns, onCellMouseDown: (e) => {
+                    // @ts-ignore
+                    if (e.event?.button == 2) {
+                        // copyToClipboard(e.value)
+                        mouseMenuApi.map.set("sym", [
+                            {
+                                name: "copy", onClick: () => { copyToClipboard(e.value); }
+                            }
+                        ]);
+                    }
+                } }) });
+    }, [true]);
+    return _jsx(Main, {});
+}
+function Message({ logs }) {
+    let red = (logs.var ?? 0) * 10;
+    if (red > 255)
+        red = 255;
+    return _jsxs("div", { className: "testAnime", style: { width: "200px", color: "rgb(255,255,255)", height: "auto", marginTop: "10px", borderRight: "5px solid #5D9FFA", background: `rgb(${red},73,35)` }, children: [_jsx("p", { style: { textAlign: "center", fontSize: "10px", marginBottom: "1px" }, children: "оповещение" }), _jsx("hr", { style: {
+                    backgroundImage: "linear-gradient(to right, transparent, rgba(255, 255, 255, 1), transparent)",
+                    border: 0,
+                    height: "1px",
+                    margin: "0 0 0 0",
+                    boxSizing: "content-box",
+                    display: "block"
+                } }), _jsx("div", { style: { textAlign: "right", marginRight: "10px", height: "auto", overflowWrap: "break-word", textOverflow: "ellipsis" }, children: typeof logs.txt == "object" ? JSON.stringify(logs.txt) : logs.txt }), _jsx("p", { style: { float: "inline-end", textAlign: "right", marginRight: "10px" }, children: (new Date()).toLocaleDateString() })] });
+}
+const tt = {};
+let r = 0;
+export function MessageEventLogs({ zIndex }) {
+    let max = 8;
+    const setting = staticGetAdd("settingLogs", settingLogs);
+    updateBy(tt);
+    updateBy(datumMiniConst, () => {
+        const last = datumMiniConst.last[0];
+        if (setting.params.minVarMessage && (!last.var || last.var < setting.params.minVarMessage))
+            return;
+        let key = String(r++);
+        tt[key] = _jsx("div", { className: "example-exit", children: _jsx(Message, { logs: last }) }, key);
+        setTimeout(() => {
+            if (tt[key]) {
+                delete tt[key];
+                if (Object.values(tt).length < max)
+                    renderBy(tt);
+            }
+        }, setting.params.timeShow ? setting.params.timeShow * 1000 : 2000);
+        renderBy(tt);
+    });
+    const tr = [...Object.values(tt)].reverse().slice(0, 10);
+    return _jsxs("div", { style: { maxHeight: "50vh", position: "absolute", right: "1px", zIndex }, children: [tr && _jsx("div", { onClick: () => { setting.params.show = !setting.params.show; renderBy(tt); }, style: { margin: 3, padding: 3, right: 0, position: "absolute", zIndex: 120,
+                    ...setting.params.show ?
+                        { background: "rgb(58,58,58)", fontSize: "25px" } :
+                        { background: "rgb(144,60,60)" }
+                }, children: setting.params.show ? "X" : "log" }), tr && _jsx("div", { children: setting.params.show ? [...Object.values(tt)].reverse().slice(0, 10) : null })] });
+}
+const defPageBase = {
+    keyPage: "PageLogs"
+};
+const pages = [
+    { name: "message", key: "PageLogs", page: PageLogs },
+    { name: "setting", key: "InputSettingLogs", page: InputSettingLogs },
+];
+const map = Object.fromEntries(pages.map(e => [e.key, e.page]));
+export function PageLogs2({ update }) {
+    const datum = defPageBase;
+    updateBy(datum);
+    const Page = map[datum.keyPage];
+    return _jsxs("div", { className: "maxSize", style: { display: "flex", flexDirection: "column" }, children: [_jsx("div", { style: { width: "100%" }, children: _jsx("div", { style: { display: "flex", justifyContent: "center" }, children: pages.map((e, i) => (_jsx("div", { onClick: (z) => {
+                            datum.keyPage = e.key;
+                            renderBy(datum);
+                        }, className: datum.keyPage == e.key ? "msTradeAlt msTradeActive" : "msTradeAlt", children: e.name }, i))) }) }), _jsx("div", { className: "maxSize", children: Page && _jsx(Page, { update: update }, datum.keyPage) })] });
+}

package/lib/common/src/logs/logs3.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+/** -----------------------------
+ *  1. Типы для логов
+ * -----------------------------
+ */
+export interface tLogsInput<T extends object = {}> {
+    id: string;
+    var?: number;
+    time: Date;
+    txt: string;
+    [key: string]: any;
+}
+export interface tLogs<T extends object = {}> extends tLogsInput<T> {
+    num: number;
+}
+/** -----------------------------
+ *  3. Интерфейс контекста
+ * -----------------------------
+ */
+interface LogsContextValue {
+    logs: tLogs[];
+    addLog: (input: tLogsInput) => void;
+    minVarLogs: number;
+    setMinVarLogs: (value: number) => void;
+    minVarMessage: number;
+    setMinVarMessage: (value: number) => void;
+    timeShow: number;
+    setTimeShow: (value: number) => void;
+    showMessages: boolean;
+    setShowMessages: (value: boolean) => void;
+}
+export declare function LogsProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** -----------------------------
+ *  5. Хук для удобного доступа к контексту
+ * -----------------------------
+ */
+export declare function useLogsContext(): LogsContextValue;
+/** -----------------------------
+ *  6. Компонент LogsTable
+ *     (аналог PageLogs)
+ * -----------------------------
+ */
+export declare function LogsTable(): import("react/jsx-runtime").JSX.Element;
+export declare function LogsNotifications(): import("react/jsx-runtime").JSX.Element;
+/** -----------------------------
+ *  8. Компонент LogsSettings
+ *     (аналог InputSettingLogs)
+ * -----------------------------
+ */
+export declare function LogsSettings(): import("react/jsx-runtime").JSX.Element;
+/** -----------------------------
+ *  9. MainPage — вкладки (Таблица / Настройки)
+ * -----------------------------
+ */
+export declare function MainPage(): import("react/jsx-runtime").JSX.Element;
+/** -----------------------------
+ *  10. Корневой компонент App
+ * -----------------------------
+ */
+export default function AppLogs(): import("react/jsx-runtime").JSX.Element;
+export {};