87 lines
3.8 KiB
JavaScript
87 lines
3.8 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - Примеры для разработчиков
|
||
Панель мониторинга: Примеры для разработчиков
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
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"; //Пример: Индикатор процесса
|
||
import { DataGrid } from "./data_grid"; //Пример: Таблица данных "P8PDataGrid"
|
||
import { Chart } from "./chart"; //Пример: Графики "P8PChart"
|
||
import { Gantt } from "./gantt"; //Пример: Диаграмма Ганта "P8PGantt"
|
||
import { Svg } from "./svg"; //Пример: Интерактивные изображения "P8PSVG"
|
||
import { Cyclogram } from "./cyclogram"; //Пример: Циклограмма "P8PCyclogram"
|
||
import { Indicator } from "./indicator"; //Пример: Индикатор "P8PIndicator"
|
||
|
||
//---------
|
||
//Константы
|
||
//---------
|
||
|
||
//Режимы
|
||
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 },
|
||
DATAGRID: { name: "DATAGRID", caption: 'Таблица данных "P8PDataGrid"', component: DataGrid },
|
||
CHART: { name: "CHART", caption: 'Графики "P8PChart"', component: Chart },
|
||
GANTT: { name: "GANTT", caption: 'Диаграмма Ганта "P8PGantt"', component: Gantt },
|
||
SVG: { name: "SVG", caption: 'Интерактивные изображения "P8PSVG"', component: Svg },
|
||
CYCLOGRAM: { name: "CYCLOGRAM", caption: 'Циклограмма "P8PCyclogram"', component: Cyclogram },
|
||
INDICATOR: { name: "INDICATOR", caption: 'Индикатор "P8PIndicator"', component: Indicator }
|
||
};
|
||
|
||
//Стили
|
||
const STYLES = {
|
||
ROOT: { height: "calc(100vh - 64px)" },
|
||
CONTAINER: { textAlign: "center", paddingTop: "20px" },
|
||
BACK_BUTTON: { position: "absolute", left: "20px", marginTop: "20px" }
|
||
};
|
||
|
||
//-----------
|
||
//Тело модуля
|
||
//-----------
|
||
|
||
//Примеры
|
||
const Samples = () => {
|
||
//Собственное состояние
|
||
const [mode, setMode] = useState("");
|
||
|
||
//Генерация содержимого
|
||
return (
|
||
<div style={STYLES.ROOT}>
|
||
{mode ? (
|
||
<>
|
||
<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 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>
|
||
);
|
||
};
|
||
|
||
//----------------
|
||
//Интерфейс модуля
|
||
//----------------
|
||
|
||
export { Samples };
|