forked from CITKParus/P8-Panels
WEB APP: Панель с примерами для разработчиков
This commit is contained in:
Mikhail Chechnev
parent
c084949470
commit
ce44a1bf24
61
app/panels/samples/loader.js
Normal file
61
app/panels/samples/loader.js
Normal file
@ -0,0 +1,61 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - Примеры для разработчиков
|
||||
Пример: Индикатор процесса
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useContext } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { Typography, Button } from "@mui/material"; //Интерфейсные элементы
|
||||
import { MessagingСtx } from "../../context/messaging"; //Контекст сообщений
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
CONTAINER: { textAlign: "center", paddingTop: "20px" },
|
||||
TITLE: { paddingBottom: "15px" }
|
||||
};
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Пример: Индикатор процесса
|
||||
const Loader = ({ title }) => {
|
||||
//Подключение к контексту сообщений
|
||||
const { showLoader, hideLoader } = useContext(MessagingСtx);
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<div style={STYLES.CONTAINER}>
|
||||
<Typography sx={STYLES.TITLE} variant={"h6"}>
|
||||
{title}
|
||||
</Typography>
|
||||
<Button
|
||||
onClick={() => {
|
||||
showLoader("Процесс идёт. Закончится автоматически через пару секунд...");
|
||||
setTimeout(hideLoader, 2000);
|
||||
}}
|
||||
>
|
||||
Показать индикатор процесса
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Пример: Индикатор процесса
|
||||
Loader.propTypes = {
|
||||
title: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
export { Loader };
|
||||
97
app/panels/samples/messages.js
Normal file
97
app/panels/samples/messages.js
Normal file
@ -0,0 +1,97 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - Примеры для разработчиков
|
||||
Пример: Сообщения
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useContext, useState } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { Typography, Divider, Button } from "@mui/material"; //Интерфейсные элементы
|
||||
import { MessagingСtx } from "../../context/messaging"; //Контекст сообщений
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
CONTAINER: { textAlign: "center", paddingTop: "20px" },
|
||||
TITLE: { paddingBottom: "15px" },
|
||||
DIVIDER: { margin: "15px" }
|
||||
};
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Пример: Сообщения
|
||||
const Messages = ({ title }) => {
|
||||
//Собственное состояние
|
||||
const [state, setState] = useState({ inlineErr: true, inlineWarn: true, inlineInfo: true });
|
||||
|
||||
//Подключение к контексту сообщений
|
||||
const { showMsgErr, showMsgWarn, showMsgInfo, InlineMsgErr, InlineMsgInfo, InlineMsgWarn } = useContext(MessagingСtx);
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<div style={STYLES.CONTAINER}>
|
||||
<Typography sx={STYLES.TITLE} variant={"h6"}>
|
||||
{title}
|
||||
</Typography>
|
||||
{/* Сообщение об ошибке (диалог) */}
|
||||
<Button variant="contained" onClick={() => showMsgErr("Что-то пошло не так :(")}>
|
||||
Ошибка
|
||||
</Button>
|
||||
<Divider sx={STYLES.DIVIDER} />
|
||||
{/* Предупреждение (диалог) */}
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() =>
|
||||
showMsgWarn(
|
||||
"Вы уверены?",
|
||||
() => showMsgInfo("Делаем!"),
|
||||
() => showMsgErr("Не делаем :(")
|
||||
)
|
||||
}
|
||||
>
|
||||
Предупреждение
|
||||
</Button>
|
||||
<Divider sx={STYLES.DIVIDER} />
|
||||
{/* Информация (диалог) */}
|
||||
<Button variant="contained" onClick={() => showMsgInfo("Ценная информация...")}>
|
||||
Информация
|
||||
</Button>
|
||||
<Divider sx={STYLES.DIVIDER} />
|
||||
{/* Ошибка (встраиваемое) */}
|
||||
{state.inlineErr ? (
|
||||
<>
|
||||
<InlineMsgErr text="Ошибка" onOk={() => setState(pv => ({ ...pv, inlineErr: false }))} />
|
||||
<Divider sx={STYLES.DIVIDER} />
|
||||
</>
|
||||
) : null}
|
||||
{/* Предупреждение (встраиваемое) */}
|
||||
{state.inlineWarn ? (
|
||||
<>
|
||||
<InlineMsgWarn text="Предупреждение" onOk={() => setState(pv => ({ ...pv, inlineWarn: false }))} />
|
||||
<Divider sx={STYLES.DIVIDER} />
|
||||
</>
|
||||
) : null}
|
||||
{/* Информация (встраиваемое) */}
|
||||
{state.inlineInfo ? <InlineMsgInfo text="Информация" onOk={() => setState(pv => ({ ...pv, inlineInfo: false }))} /> : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Пример: Сообщения
|
||||
Messages.propTypes = {
|
||||
title: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
export { Messages };
|
||||
50
app/panels/samples/mui.js
Normal file
50
app/panels/samples/mui.js
Normal file
@ -0,0 +1,50 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - Примеры для разработчиков
|
||||
Пример: Компоненты MUI
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React from "react"; //Классы React
|
||||
import { Typography } from "@mui/material"; //Интерфейсные элементы
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
CONTAINER: { textAlign: "center", paddingTop: "20px" },
|
||||
TITLE: { paddingBottom: "15px" }
|
||||
};
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Пример: Компоненты MUI
|
||||
const Mui = ({ title }) => {
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<div style={STYLES.CONTAINER}>
|
||||
<Typography sx={STYLES.TITLE} variant={"h6"}>
|
||||
{title}
|
||||
</Typography>
|
||||
Mui
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Пример: Компоненты MUI
|
||||
Mui.propTypes = {
|
||||
title: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
export { Mui };
|
||||
108
app/panels/samples/p8online.js
Normal file
108
app/panels/samples/p8online.js
Normal file
@ -0,0 +1,108 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - Примеры для разработчиков
|
||||
Пример: API для взаимодействия с "ПАРУС 8 Онлайн"
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useState, useContext } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { Typography, Button, Divider } from "@mui/material"; //Интерфейсные элементы
|
||||
import { ApplicationСtx } from "../../context/application"; //Контекст приложения
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
CONTAINER: { textAlign: "center", paddingTop: "20px" },
|
||||
TITLE: { paddingBottom: "15px" },
|
||||
DIVIDER: { margin: "15px" }
|
||||
};
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Пример: API для взаимодействия с "ПАРУС 8 Онлайн"
|
||||
const P8Online = ({ title }) => {
|
||||
//Собственное состояние
|
||||
const [agent, setAgent] = useState("");
|
||||
|
||||
//Подключение к контексту приложения
|
||||
const { pOnlineShowUnit, pOnlineShowTab, pOnlineShowDocument, pOnlineShowDictionary } = useContext(ApplicationСtx);
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<div style={STYLES.CONTAINER}>
|
||||
<Typography sx={STYLES.TITLE} variant={"h6"}>
|
||||
{title}
|
||||
</Typography>
|
||||
{/* Открыть новую закладку */}
|
||||
<Button variant="contained" onClick={() => pOnlineShowTab({ caption: "PARUS.COM", url: "https://www.parus.com" })}>
|
||||
Открыть закладку
|
||||
</Button>
|
||||
<Divider sx={STYLES.DIVIDER} />
|
||||
{/* Открыть раздел */}
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
pOnlineShowUnit({
|
||||
unitCode: "Contracts"
|
||||
});
|
||||
}}
|
||||
>
|
||||
Открыть раздел Договоры
|
||||
</Button>
|
||||
<Divider sx={STYLES.DIVIDER} />
|
||||
{/* Открыть раздел в режиме словаря */}
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "AGNLIST",
|
||||
inputParameters: [
|
||||
{
|
||||
name: "in_AGNABBR",
|
||||
value: agent
|
||||
}
|
||||
],
|
||||
callBack: res => (res.success === true ? setAgent(res.outParameters.out_AGNABBR) : null)
|
||||
});
|
||||
}}
|
||||
>
|
||||
Выбрать контрагента
|
||||
</Button>
|
||||
{/* Позиционирование/отбор документа */}
|
||||
{agent ? (
|
||||
<>
|
||||
<Divider sx={STYLES.DIVIDER} />
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
pOnlineShowDocument({
|
||||
unitCode: "AGNLIST",
|
||||
document: agent,
|
||||
inRnParameter: "in_AGNABBR"
|
||||
});
|
||||
}}
|
||||
>{`Показать контрагента "${agent}"`}</Button>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Пример: API для взаимодействия с "ПАРУС 8 Онлайн"
|
||||
P8Online.propTypes = {
|
||||
title: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
export { P8Online };
|
||||
@ -7,8 +7,31 @@
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React from "react"; //Классы React
|
||||
import { Typography } from "@mui/material"; //Интерфейсные элементы
|
||||
import React, { useState } from "react"; //Классы React
|
||||
import { Button, Fab, Icon } from "@mui/material"; //Интерфейсные элементы
|
||||
import { BUTTONS } from "../../../app.text"; //Текстовые ресурсы и константы
|
||||
import { P8Online } from "./p8online"; //Пример: API для взаимодействия с "ПАРУС 8 Онлайн"
|
||||
import { Mui } from "./mui"; //Пример: Компоненты MUI
|
||||
import { Messages } from "./messages"; //Пример: Сообщения
|
||||
import { Loader } from "./loader"; //Пример: Индикатор процесса
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Режимы
|
||||
const MODES = {
|
||||
P8ONLINE: { name: "P8ONLINE", caption: 'API для взаимодействия с "ПАРУС 8 Онлайн"', component: P8Online },
|
||||
MUI: { name: "MUI", caption: "Компоненты MUI", component: Mui },
|
||||
MESSAGES: { name: "MESSAGES", caption: "Сообщения", component: Messages },
|
||||
LOADER: { name: "LOADER", caption: "Индикатор процесса", component: Loader }
|
||||
};
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
CONTAINER: { textAlign: "center", paddingTop: "20px" },
|
||||
BACK_BUTTON: { position: "absolute", left: "20px", marginTop: "20px" }
|
||||
};
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
@ -16,10 +39,29 @@ import { Typography } from "@mui/material"; //Интерфейсные элем
|
||||
|
||||
//Примеры
|
||||
const Samples = () => {
|
||||
//Собственное состояние
|
||||
const [mode, setMode] = useState("");
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<div>
|
||||
<Typography>Примеры для разработчиков</Typography>
|
||||
{mode ? (
|
||||
<div>
|
||||
<Fab variant="extended" sx={STYLES.BACK_BUTTON} onClick={() => setMode("")}>
|
||||
<Icon>arrow_back_ios</Icon>
|
||||
{BUTTONS.NAVIGATE_BACK}
|
||||
</Fab>
|
||||
{React.createElement(MODES[mode]?.component || (() => {}), { title: MODES[mode]?.caption })}
|
||||
</div>
|
||||
) : (
|
||||
<div style={STYLES.CONTAINER}>
|
||||
{Object.entries(MODES).map(m => (
|
||||
<div key={m[0]}>
|
||||
<Button onClick={() => setMode(m[1].name)}>{m[1].caption}</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user