forked from CITKParus/P8-Panels
114 lines
4.7 KiB
JavaScript
114 lines
4.7 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - Редакторы панелей
|
||
Компонент: Источник данных
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React, { useState } from "react"; //Классы React
|
||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import { Stack, IconButton, Icon, Typography, Chip, Button, Card, CardContent, CardActions, CardActionArea } from "@mui/material"; //Интерфейсные элементы
|
||
import { BUTTONS, TEXTS } from "../../../app.text"; //Общие текстовые ресурсы
|
||
import { STYLES as COMMON_STYLES } from "./p8p_editors_common"; //Общие ресурсы редаторов
|
||
import { P8P_DATA_SOURCE_SHAPE, P8P_DATA_SOURCE_TYPE, P8P_DATA_SOURCE_TYPE_NAME, P8P_DATA_SOURCE_INITIAL } from "./p8p_data_source_common"; //Общие ресурсы компонента "Источник данных"
|
||
import { P8PDataSourceConfigDialog } from "./p8p_data_source_config_dialog"; //Диалог настройки источника данных
|
||
|
||
//-----------
|
||
//Тело модуля
|
||
//-----------
|
||
|
||
//Источник данных
|
||
const P8PDataSource = ({ dataSource = null, valueProviders = {}, onChange = null } = {}) => {
|
||
//Собственное состояние - отображение диалога настройки
|
||
const [configDlg, setConfigDlg] = useState(false);
|
||
|
||
//Уведомление родителя о смене настроек источника данных
|
||
const notifyChange = settings => onChange && onChange(settings);
|
||
|
||
//При нажатии на настройку источника данных
|
||
const handleSetup = () => setConfigDlg(true);
|
||
|
||
//При нажатии на настройку источника данных
|
||
const handleSetupOk = dataSource => {
|
||
setConfigDlg(false);
|
||
notifyChange(dataSource);
|
||
};
|
||
|
||
//При нажатии на настройку источника данных
|
||
const handleSetupCancel = () => setConfigDlg(false);
|
||
|
||
//При удалении настроек источника данных
|
||
const handleDelete = () => notifyChange({ ...P8P_DATA_SOURCE_INITIAL });
|
||
|
||
//Расчет флага "настроенности"
|
||
const configured = dataSource?.type ? true : false;
|
||
|
||
//Список аргументов
|
||
const args =
|
||
configured &&
|
||
dataSource.arguments.map((argument, i) => (
|
||
<Chip
|
||
key={i}
|
||
label={`:${argument.name} = ${argument.valueSource || argument.value || "NULL"}`}
|
||
variant={"outlined"}
|
||
sx={COMMON_STYLES.CHIP(true)}
|
||
/>
|
||
));
|
||
|
||
//Формирование представления
|
||
return (
|
||
<>
|
||
{configDlg && (
|
||
<P8PDataSourceConfigDialog
|
||
dataSource={dataSource}
|
||
valueProviders={valueProviders}
|
||
onOk={handleSetupOk}
|
||
onCancel={handleSetupCancel}
|
||
/>
|
||
)}
|
||
{configured && (
|
||
<Card variant={"outlined"}>
|
||
<CardActionArea onClick={handleSetup}>
|
||
<CardContent>
|
||
<Typography variant={"subtitle1"} noWrap={true}>
|
||
{dataSource.type === P8P_DATA_SOURCE_TYPE.USER_PROC ? dataSource.userProc : TEXTS.UNNAMED_SOURCE}
|
||
</Typography>
|
||
<Typography variant={"caption"} color={"text.secondary"} noWrap={true}>
|
||
{P8P_DATA_SOURCE_TYPE_NAME[dataSource.type] || TEXTS.UNKNOWN_SOURCE_TYPE}
|
||
</Typography>
|
||
<Stack direction={"column"} spacing={1} pt={2}>
|
||
{args}
|
||
</Stack>
|
||
</CardContent>
|
||
</CardActionArea>
|
||
<CardActions>
|
||
<IconButton onClick={handleDelete}>
|
||
<Icon>delete</Icon>
|
||
</IconButton>
|
||
</CardActions>
|
||
</Card>
|
||
)}
|
||
{!configured && (
|
||
<Button startIcon={<Icon>build</Icon>} onClick={handleSetup}>
|
||
{BUTTONS.CONFIG}
|
||
</Button>
|
||
)}
|
||
</>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств компонента - Источник данных
|
||
P8PDataSource.propTypes = {
|
||
dataSource: P8P_DATA_SOURCE_SHAPE,
|
||
valueProviders: PropTypes.object,
|
||
onChange: PropTypes.func
|
||
};
|
||
|
||
//----------------
|
||
//Интерфейс модуля
|
||
//----------------
|
||
|
||
export { P8PDataSource };
|