arrow_left
diff --git a/app/components/p8p_table.js b/app/components/p8p_table/p8p_table.js
similarity index 54%
rename from app/components/p8p_table.js
rename to app/components/p8p_table/p8p_table.js
index ca9e2ce..f69252a 100644
--- a/app/components/p8p_table.js
+++ b/app/components/p8p_table/p8p_table.js
@@ -20,475 +20,38 @@ import {
Paper,
IconButton,
Icon,
- Menu,
- MenuItem,
- Divider,
Stack,
- Dialog,
- DialogTitle,
- DialogContent,
- DialogActions,
Button,
- TextField,
- Chip,
Container,
Link
} from "@mui/material"; //Интерфейсные компоненты
-import { useTheme } from "@mui/material/styles"; //Взаимодействие со стилями MUI
-import { P8PAppInlineError, P8PHintDialog } from "./p8p_app_message"; //Встраиваемое сообщение об ошибке
-import { P8P_TABLE_AT, HEADER_INITIAL_STATE, hasValue, p8pTableReducer } from "./p8p_table_reducer"; //Редьюсер состояния
-import { P8P_DATA_TYPES } from "../core/data_types"; //Типы данных
-
-//---------
-//Константы
-//---------
-
-//Размеры отступов
-const P8P_TABLE_SIZE = {
- SMALL: "small",
- MEDIUM: "medium"
-};
-
-//Типы данных
-const P8P_TABLE_DATA_TYPE = {
- STR: P8P_DATA_TYPES.STR,
- NUMB: P8P_DATA_TYPES.NUMB,
- DATE: P8P_DATA_TYPES.DATE
-};
-
-//Направления сортировки
-const P8P_TABLE_COLUMN_ORDER_DIRECTIONS = {
- ASC: "ASC",
- DESC: "DESC"
-};
-
-//Действия панели инструментов столбца
-const P8P_TABLE_COLUMN_TOOL_BAR_ACTIONS = {
- ORDER_TOGGLE: "ORDER_TOGGLE",
- FILTER_TOGGLE: "FILTER_TOGGLE",
- EXPAND_TOGGLE: "EXPAND_TOGGLE"
-};
-
-//Действия меню столбца
-const P8P_TABLE_COLUMN_MENU_ACTIONS = {
- ORDER_ASC: "ORDER_ASC",
- ORDER_DESC: "ORDER_DESC",
- FILTER: "FILTER"
-};
-
-//Структура элемента описания фильтра
-const P8P_TABLE_FILTER_SHAPE = PropTypes.shape({
- name: PropTypes.string.isRequired,
- from: PropTypes.any,
- to: PropTypes.any
-});
-
-//Структура элемента описания сортировки
-const P8P_TABLE_ORDER_SHAPE = PropTypes.shape({
- direction: PropTypes.string.isRequired,
- name: PropTypes.string.isRequired
-});
-
-//Размещение области страниц по вертикали
-const P8P_TABLE_PAGINATOR_ALIGN = {
- LEFT: "left",
- RIGHT: "right",
- CENTER: "center"
-};
-
-//Размещение области страниц по горизонтали
-const P8P_TABLE_PAGINATOR_POSITION = {
- TOP: "top",
- BOTTOM: "bottom",
- BOTH: "both"
-};
-
-//Высота кнопки догрузки данных
-const P8P_TABLE_MORE_HEIGHT = "49px";
-
-//Высота фильтров таблицы
-const P8P_TABLE_FILTERS_HEIGHT = "48px";
-
-//Стили
-const STYLES = {
- TABLE: {},
- TABLE_HEAD_STICKY: {
- position: "sticky",
- top: 0,
- zIndex: 1000
- },
- TABLE_HEAD_CELL_STICKY: (theme, left) => ({
- position: "sticky",
- left,
- backgroundColor: theme.palette.background.default,
- zIndex: 1000
- }),
- TABLE_ROW: {
- "&:last-child td, &:last-child th": { border: 0 }
- },
- TABLE_CELL_STICKY: (theme, left) => ({
- position: "sticky",
- left,
- backgroundColor: theme.palette.background.default,
- zIndex: 500
- }),
- TABLE_CELL_EXPAND_CONTROL: {
- minWidth: "60px",
- maxWidth: "60px"
- },
- TABLE_CELL_EXPAND_CONTAINER: {
- paddingBottom: 0,
- paddingTop: 0,
- paddingLeft: 0,
- paddingRight: 0
- },
- TABLE_CELL_GROUP_HEADER: {
- backgroundColor: "lightgray"
- },
- TABLE_CELL_GROUP_HEADER_STICKY: {
- position: "sticky",
- left: 0
- },
- TABLE_COLUMN_STACK: {
- alignItems: "center"
- },
- TABLE_COLUMN_MENU_ITEM_ICON: {
- paddingRight: "10px"
- },
- FILTER_CHIP: {
- alignItems: "center"
- },
- PAGINATION: (pagesAlign, position) => ({
- display: "flex",
- justifyContent:
- pagesAlign === P8P_TABLE_PAGINATOR_ALIGN.LEFT
- ? "flex-start"
- : pagesAlign === P8P_TABLE_PAGINATOR_ALIGN.CENTER
- ? "space-around"
- : "flex-end",
- ...(position === P8P_TABLE_PAGINATOR_POSITION.TOP ? { paddingBottom: "10px" } : { paddingTop: "10px" })
- }),
- MORE_BUTTON_CONTAINER: {
- with: "100%",
- textAlign: "center",
- padding: "5px"
- }
-};
-
-//--------------------------------
-//Вспомогательные классы и функции
-//--------------------------------
-
-//Панель инструментов столбца (левая)
-const P8PTableColumnToolBarLeft = ({ columnDef, onItemClick }) => {
- //Кнопка развёртывания/свёртывания
- let expButton = null;
- if (columnDef.expandable)
- expButton = (
-
(onItemClick ? onItemClick(P8P_TABLE_COLUMN_TOOL_BAR_ACTIONS.EXPAND_TOGGLE, columnDef.name) : null)}>
- {columnDef.expanded ? "indeterminate_check_box" : "add_box"}
-
- );
-
- //Генерация содержимого
- return <>{expButton};
-};
-
-//Контроль свойств - Панель инструментов столбца (левая)
-P8PTableColumnToolBarLeft.propTypes = {
- columnDef: PropTypes.object.isRequired,
- onItemClick: PropTypes.func
-};
-
-//Панель инструментов столбца (правая)
-const P8PTableColumnToolBarRight = ({ columnDef, orders, filters, onItemClick }) => {
- //Кнопка сортировки
- const order = orders.find(o => o.name == columnDef.name);
- let orderButton = null;
- if (order)
- orderButton = (
-
(onItemClick ? onItemClick(P8P_TABLE_COLUMN_TOOL_BAR_ACTIONS.ORDER_TOGGLE, columnDef.name) : null)}>
- {order.direction === P8P_TABLE_COLUMN_ORDER_DIRECTIONS.ASC ? "arrow_upward" : "arrow_downward"}
-
- );
-
- //Кнопка фильтрации
- const filter = filters.find(f => f.name == columnDef.name);
- let filterButton = null;
- if (hasValue(filter?.from) || hasValue(filter?.to))
- filterButton = (
-
(onItemClick ? onItemClick(P8P_TABLE_COLUMN_TOOL_BAR_ACTIONS.FILTER_TOGGLE, columnDef.name) : null)}>
- filter_alt
-
- );
-
- //Генерация содержимого
- return (
- <>
- {orderButton}
- {filterButton}
-
- );
-};
-
-//Контроль свойств - Панель инструментов столбца (правая)
-P8PTableColumnToolBarRight.propTypes = {
- columnDef: PropTypes.object.isRequired,
- orders: PropTypes.array.isRequired,
- filters: PropTypes.array.isRequired,
- onItemClick: PropTypes.func
-};
-
-//Меню столбца
-const P8PTableColumnMenu = ({ columnDef, orderAscItemCaption, orderDescItemCaption, filterItemCaption, onItemClick }) => {
- //Собственное состояние
- const [anchorEl, setAnchorEl] = useState(null);
-
- //Флаг отображения
- const open = Boolean(anchorEl);
-
- //По нажатию на открытие меню
- const handleMenuButtonClick = event => {
- setAnchorEl(event.currentTarget);
- };
-
- //По нажатию на пункт меню
- const handleMenuItemClick = (event, index, action, columnName) => {
- if (onItemClick) onItemClick(action, columnName);
- setAnchorEl(null);
- };
-
- //При закрытии меню
- const handleMenuClose = () => {
- setAnchorEl(null);
- };
-
- //Формирование списка элементов меню в зависимости от описания колонки таблицы
- const menuItems = [];
- if (columnDef.order === true) {
- menuItems.push(
-
- );
- menuItems.push(
-
- );
- }
- if (columnDef.filter === true) {
- if (menuItems.length > 0) menuItems.push(
);
- menuItems.push(
-
- );
- }
-
- //Генерация содержимого
- return menuItems.length > 0 ? (
- <>
-
- more_vert
-
-
-
- ) : null;
-};
-
-//Контроль свойств - Меню столбца
-P8PTableColumnMenu.propTypes = {
- columnDef: PropTypes.object.isRequired,
- orderAscItemCaption: PropTypes.string.isRequired,
- orderDescItemCaption: PropTypes.string.isRequired,
- filterItemCaption: PropTypes.string.isRequired,
- onItemClick: PropTypes.func
-};
-
-//Диалог фильтра
-const P8PTableColumnFilterDialog = ({
- columnDef,
- from,
- to,
- valueCaption,
- valueFromCaption,
- valueToCaption,
- okBtnCaption,
- clearBtnCaption,
- cancelBtnCaption,
- valueFormatter,
- onOk,
- onClear,
- onCancel
-}) => {
- //Собственное состояние - значения с-по
- const [filterValues, setFilterValues] = useState({ from, to });
-
- //Отработка воода значения в фильтр
- const handleFilterTextFieldChanged = e => {
- setFilterValues(prev => ({ ...prev, [e.target.name]: e.target.value }));
- };
-
- //Элементы ввода значений фильтра
- let inputs = null;
- if (Array.isArray(columnDef.values) && columnDef.values.length > 0) {
- inputs = (
-
- {columnDef.values.map((v, i) => (
-
- ))}
-
- );
- } else {
- switch (columnDef.dataType) {
- case P8P_TABLE_DATA_TYPE.STR: {
- inputs = (
-
- );
- break;
- }
- case P8P_TABLE_DATA_TYPE.NUMB:
- case P8P_TABLE_DATA_TYPE.DATE: {
- inputs = (
- <>
-
-
-
-
- );
- break;
- }
- }
- }
-
- return (
-
- );
-};
-
-//Контроль свойств - Диалог фильтра
-P8PTableColumnFilterDialog.propTypes = {
- columnDef: PropTypes.object.isRequired,
- from: PropTypes.any,
- to: PropTypes.any,
- valueCaption: PropTypes.string.isRequired,
- valueFromCaption: PropTypes.string.isRequired,
- valueToCaption: PropTypes.string.isRequired,
- okBtnCaption: PropTypes.string.isRequired,
- clearBtnCaption: PropTypes.string.isRequired,
- cancelBtnCaption: PropTypes.string.isRequired,
- valueFormatter: PropTypes.func,
- onOk: PropTypes.func,
- onClear: PropTypes.func,
- onCancel: PropTypes.func
-};
-
-//Сводный фильтр
-const P8PTableFiltersChips = ({ filters, columnsDef, valueFromCaption, valueToCaption, onFilterChipClick, onFilterChipDelete, valueFormatter }) => {
- return (
-
- {filters.map((filter, i) => {
- const columnDef = columnsDef.find(columnDef => columnDef.name == filter.name);
- return (
-
- {columnDef.caption}:
- {hasValue(filter.from) && !columnDef.values && columnDef.dataType != P8P_TABLE_DATA_TYPE.STR
- ? `${valueFromCaption.toLowerCase()} `
- : null}
- {hasValue(filter.from) ? (valueFormatter ? valueFormatter({ value: filter.from, columnDef }) : filter.from) : null}
- {hasValue(filter.to) && !columnDef.values && columnDef.dataType != P8P_TABLE_DATA_TYPE.STR
- ? ` ${valueToCaption.toLowerCase()} `
- : null}
- {hasValue(filter.to) ? (valueFormatter ? valueFormatter({ value: filter.to, columnDef }) : filter.to) : null}
-
- }
- variant="outlined"
- onClick={() => (onFilterChipClick ? onFilterChipClick(columnDef.name) : null)}
- onDelete={() => (onFilterChipDelete ? onFilterChipDelete(columnDef.name) : null)}
- />
- );
- })}
-
- );
-};
-
-//Контроль свойств - Сводный фильтр
-P8PTableFiltersChips.propTypes = {
- filters: PropTypes.array.isRequired,
- columnsDef: PropTypes.array.isRequired,
- valueFromCaption: PropTypes.string.isRequired,
- valueToCaption: PropTypes.string.isRequired,
- onFilterChipClick: PropTypes.func,
- onFilterChipDelete: PropTypes.func,
- valueFormatter: PropTypes.func
-};
+import { P8PAppInlineError, P8PHintDialog } from "../p8p_app_message"; //Встраиваемое сообщение об ошибке
+import { P8P_TABLE_AT, HEADER_INITIAL_STATE, p8pTableReducer } from "./p8p_table_reducer"; //Редьюсер состояния
+import { P8PTableColumnToolBarLeft } from "./p8p_table_column_toolbar_left"; //Таблица - Панель инструментов столбца (левая)
+import { P8PTableColumnToolBarRight } from "./p8p_table_column_toolbar_right"; //Таблица - Панель инструментов столбца (правая)
+import { P8PTableColumnMenu } from "./p8p_table_column_menu"; //Таблица - Меню столбца
+import { P8PTableColumnFilterDialog } from "./p8p_table_column_filter_dialog"; //Таблица - Диалог фильтра
+import { P8PTableFiltersChips } from "./p8p_table_filters_chips"; //Таблица - Сводный фильтр
+import {
+ P8P_TABLE_SIZE,
+ P8P_TABLE_DATA_TYPE,
+ P8P_TABLE_COLUMN_ORDER_DIRECTIONS,
+ P8P_TABLE_COLUMN_TOOL_BAR_ACTIONS,
+ P8P_TABLE_COLUMN_MENU_ACTIONS,
+ P8P_TABLE_FILTER_SHAPE,
+ P8P_TABLE_ORDER_SHAPE,
+ P8P_TABLE_PAGINATOR_ALIGN,
+ P8P_TABLE_PAGINATOR_POSITION,
+ P8P_TABLE_MORE_HEIGHT,
+ P8P_TABLE_FILTERS_HEIGHT
+} from "./p8p_table_constants"; //Константы таблицы
+import { P8P_TABLE_VARIANT } from "../../theme/variants/p8p_table_variants"; //Варианты таблиц
+import { P8P_TABLE_HEAD_VARIANT } from "../../theme/variants/p8p_table_head_variants"; //Варианты заголовков таблиц
+import { P8P_TABLE_CELL_VARIANT } from "../../theme/variants/p8p_table_cell_variants"; //Варианты ячеек таблиц
+import { P8P_TABLE_ROW_VARIANT } from "../../theme/variants/p8p_table_row_variants"; //Варианты строк таблиц
+import { P8P_CONTAINER_VARIANT } from "../../theme/variants/p8p_container_variants"; //Варианты контейнеров
+import { P8P_PAGINATION_VARIANT } from "../../theme/variants/p8p_pagination_variants"; //Варианты пагинаторов
+import { P8P_TYPOGRAPHY_VARIANT } from "../../theme/p8p_typography"; //Варианты шрифтов
//-----------
//Тело модуля
@@ -530,6 +93,7 @@ const P8PTable = ({
groupCellRender,
rowExpandRender,
valueFormatter,
+ headExpandCellStyle,
onOrderChanged,
onFilterChanged,
onPagesCountChanged,
@@ -555,9 +119,6 @@ const P8PTable = ({
//Собственное состояние - колонка с отображаемой подсказкой
const [displayHintColumn, setDisplayHintColumn] = useState(null);
- //Стили
- const theme = useTheme();
-
//Описание фильтруемой колонки
const filterColumnDef = filterColumn ? columnsDef.find(columnDef => columnDef.name == filterColumn) || null : null;
@@ -597,8 +158,8 @@ const P8PTable = ({
colOrder?.direction == P8P_TABLE_COLUMN_ORDER_DIRECTIONS.ASC
? P8P_TABLE_COLUMN_ORDER_DIRECTIONS.DESC
: colOrder?.direction == P8P_TABLE_COLUMN_ORDER_DIRECTIONS.DESC
- ? null
- : P8P_TABLE_COLUMN_ORDER_DIRECTIONS.ASC;
+ ? null
+ : P8P_TABLE_COLUMN_ORDER_DIRECTIONS.ASC;
if (onOrderChanged) onOrderChanged({ columnName, direction: newDirection });
break;
}
@@ -688,34 +249,33 @@ const P8PTable = ({
const renderGroupCell = group => {
let customRender = {};
if (groupCellRender) customRender = groupCellRender({ columnsDef: header.columnsDef, group }) || {};
- return header.displayDataColumns.map((columnDef, i) => (
-
- {i == 0 ? (
-
- {group.expandable ? (
- {
- setExpandedGroups(pv => ({ ...pv, ...{ [group.name]: !pv[group.name] } }));
- }}
- >
- {expandedGroups[group.name] ? "indeterminate_check_box" : "add_box"}
-
- ) : null}
- {customRender.data ? customRender.data : group.caption}
-
- ) : null}
-
- ));
+ return header.displayDataColumns.map((columnDef, i) => {
+ return (
+
+ {i == 0 ? (
+
+ {group.expandable ? (
+ {
+ setExpandedGroups(pv => ({ ...pv, ...{ [group.name]: !pv[group.name] } }));
+ }}
+ >
+ {expandedGroups[group.name] ? "indeterminate_check_box" : "add_box"}
+
+ ) : null}
+ {customRender.data ? customRender.data : group.caption}
+
+ ) : null}
+
+ );
+ });
};
//Генерация области страниц
@@ -731,7 +291,8 @@ const P8PTable = ({
<>
{pagesCount && pagesCount > 0 && isVisible ? (
-
-
+
+
{header.displayLevels.map((level, i) => (
{expandable && rowExpandRender && i == 0 ? (
) : null}
@@ -797,11 +362,11 @@ const P8PTable = ({
if (headCellRender) customRender = headCellRender({ columnDef }) || {};
return (
@@ -820,7 +386,7 @@ const P8PTable = ({
) : columnDef.hint ? (
handleColumnShowHintClick(columnDef.name)}
@@ -856,15 +422,13 @@ const P8PTable = ({
const rowsView = rows.map((row, i) =>
!group?.name || group?.name == row.groupName ? (
-
+
{expandable && rowExpandRender ? (
handleExpandClick(i)}>
{expanded[i] === true ? "keyboard_arrow_down" : "keyboard_arrow_right"}
@@ -876,11 +440,15 @@ const P8PTable = ({
if (dataCellRender) customRender = dataCellRender({ row, columnDef }) || {};
return (
);
})}
@@ -897,10 +465,8 @@ const P8PTable = ({
{expandable && rowExpandRender && expanded[i] === true ? (
{rowExpandRender({ columnsDef, row })}
@@ -931,7 +497,7 @@ const P8PTable = ({
{renderPagination(P8P_TABLE_PAGINATOR_POSITION.BOTTOM)}
{morePages && (!pagesCount || pagesCount <= 0) ? (
-
+
@@ -998,6 +564,7 @@ P8PTable.propTypes = {
groupCellRender: PropTypes.func,
rowExpandRender: PropTypes.func,
valueFormatter: PropTypes.func,
+ headExpandCellStyle: PropTypes.object,
onOrderChanged: PropTypes.func,
onFilterChanged: PropTypes.func,
onPagesCountChanged: PropTypes.func,
@@ -1015,7 +582,7 @@ export {
P8P_TABLE_DATA_TYPE,
P8P_TABLE_SIZE,
P8P_TABLE_FILTER_SHAPE,
- P8P_TABLE_ORDER_SHAPE,
+ P8P_TABLE_ORDER_SHAPE,
P8P_TABLE_MORE_HEIGHT,
P8P_TABLE_FILTERS_HEIGHT,
P8P_TABLE_PAGINATOR_ALIGN,
diff --git a/app/components/p8p_table/p8p_table_column_filter_dialog.js b/app/components/p8p_table/p8p_table_column_filter_dialog.js
new file mode 100644
index 0000000..b1d31f4
--- /dev/null
+++ b/app/components/p8p_table/p8p_table_column_filter_dialog.js
@@ -0,0 +1,164 @@
+/*
+ Парус 8 - Панели мониторинга - Таблица
+ Компонент: Диалог фильтра
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import React, { useState } from "react"; //Классы React
+import PropTypes from "prop-types"; //Контроль свойств компонента
+import { MenuItem, Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, Typography } from "@mui/material"; //Интерфейсные компоненты
+import { P8P_TABLE_DATA_TYPE } from "./p8p_table_constants"; //Типы данных
+import { P8P_TEXT_FIELD_VARIANT } from "../../theme/variants/p8p_text_field_variants"; //Варианты полей ввода
+import { P8P_TYPOGRAPHY_VARIANT } from "../../theme/p8p_typography"; //Варианты шрифтов
+import { P8P_BUTTON_VARIANT } from "../../theme/variants/p8p_button_variants"; //Варианты кнопок
+import { P8P_MENU_ITEM_VARIANT } from "../../theme/variants/p8p_menu_item_variants"; //Варианты элементов меню
+
+//-----------
+//Тело модуля
+//-----------
+
+//Диалог фильтра
+const P8PTableColumnFilterDialog = ({
+ columnDef,
+ from,
+ to,
+ valueCaption,
+ valueFromCaption,
+ valueToCaption,
+ okBtnCaption,
+ clearBtnCaption,
+ cancelBtnCaption,
+ valueFormatter,
+ onOk,
+ onClear,
+ onCancel
+}) => {
+ //Собственное состояние - значения с-по
+ const [filterValues, setFilterValues] = useState({ from, to });
+
+ //Отработка воода значения в фильтр
+ const handleFilterTextFieldChanged = e => {
+ setFilterValues(prev => ({ ...prev, [e.target.name]: e.target.value }));
+ };
+
+ //Элементы ввода значений фильтра
+ let inputs = null;
+ if (Array.isArray(columnDef.values) && columnDef.values.length > 0) {
+ inputs = (
+
+ {columnDef.values.map((v, i) => (
+
+ ))}
+
+ );
+ } else {
+ switch (columnDef.dataType) {
+ case P8P_TABLE_DATA_TYPE.STR: {
+ inputs = (
+
+ );
+ break;
+ }
+ case P8P_TABLE_DATA_TYPE.NUMB:
+ case P8P_TABLE_DATA_TYPE.DATE: {
+ inputs = (
+ <>
+
+
+
+
+ );
+ break;
+ }
+ }
+ }
+
+ return (
+
+ );
+};
+
+//Контроль свойств - Диалог фильтра
+P8PTableColumnFilterDialog.propTypes = {
+ columnDef: PropTypes.object.isRequired,
+ from: PropTypes.any,
+ to: PropTypes.any,
+ valueCaption: PropTypes.string.isRequired,
+ valueFromCaption: PropTypes.string.isRequired,
+ valueToCaption: PropTypes.string.isRequired,
+ okBtnCaption: PropTypes.string.isRequired,
+ clearBtnCaption: PropTypes.string.isRequired,
+ cancelBtnCaption: PropTypes.string.isRequired,
+ valueFormatter: PropTypes.func,
+ onOk: PropTypes.func,
+ onClear: PropTypes.func,
+ onCancel: PropTypes.func
+};
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+export { P8PTableColumnFilterDialog };
diff --git a/app/components/p8p_table/p8p_table_column_menu.js b/app/components/p8p_table/p8p_table_column_menu.js
new file mode 100644
index 0000000..ef74bf2
--- /dev/null
+++ b/app/components/p8p_table/p8p_table_column_menu.js
@@ -0,0 +1,106 @@
+/*
+ Парус 8 - Панели мониторинга - Таблица
+ Компонент: Меню столбца
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import React, { useState } from "react"; //Классы React
+import PropTypes from "prop-types"; //Контроль свойств компонента
+import { IconButton, Icon, Menu, MenuItem, Divider, Typography } from "@mui/material"; //Интерфейсные компоненты
+import { P8P_TABLE_COLUMN_MENU_ACTIONS } from "./p8p_table_constants"; //Действия меню столбца
+import { P8P_TYPOGRAPHY_VARIANT } from "../../theme/p8p_typography"; //Варианты шрифтов
+import { P8P_ICON_VARIANT } from "../../theme/variants/p8p_icon_variants"; //Варианты иконок
+
+//-----------
+//Тело модуля
+//-----------
+
+//Меню столбца
+const P8PTableColumnMenu = ({ columnDef, orderAscItemCaption, orderDescItemCaption, filterItemCaption, onItemClick }) => {
+ //Собственное состояние
+ const [anchorEl, setAnchorEl] = useState(null);
+
+ //Флаг отображения
+ const open = Boolean(anchorEl);
+
+ //По нажатию на открытие меню
+ const handleMenuButtonClick = event => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ //По нажатию на пункт меню
+ const handleMenuItemClick = (event, index, action, columnName) => {
+ if (onItemClick) onItemClick(action, columnName);
+ setAnchorEl(null);
+ };
+
+ //При закрытии меню
+ const handleMenuClose = () => {
+ setAnchorEl(null);
+ };
+
+ //Формирование списка элементов меню в зависимости от описания колонки таблицы
+ const menuItems = [];
+ if (columnDef.order === true) {
+ menuItems.push(
+
+ );
+ menuItems.push(
+
+ );
+ }
+ if (columnDef.filter === true) {
+ if (menuItems.length > 0) menuItems.push();
+ menuItems.push(
+
+ );
+ }
+
+ //Генерация содержимого
+ return menuItems.length > 0 ? (
+ <>
+
+ more_vert
+
+
+
+ ) : null;
+};
+
+//Контроль свойств - Меню столбца
+P8PTableColumnMenu.propTypes = {
+ columnDef: PropTypes.object.isRequired,
+ orderAscItemCaption: PropTypes.string.isRequired,
+ orderDescItemCaption: PropTypes.string.isRequired,
+ filterItemCaption: PropTypes.string.isRequired,
+ onItemClick: PropTypes.func
+};
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+export { P8PTableColumnMenu };
diff --git a/app/components/p8p_table/p8p_table_column_toolbar_left.js b/app/components/p8p_table/p8p_table_column_toolbar_left.js
new file mode 100644
index 0000000..cc66429
--- /dev/null
+++ b/app/components/p8p_table/p8p_table_column_toolbar_left.js
@@ -0,0 +1,44 @@
+/*
+ Парус 8 - Панели мониторинга - Таблица
+ Компонент: Панель инструментов столбца (левая)
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import React from "react"; //Классы React
+import PropTypes from "prop-types"; //Контроль свойств компонента
+import { IconButton, Icon } from "@mui/material"; //Интерфейсные компоненты
+import { P8P_TABLE_COLUMN_TOOL_BAR_ACTIONS } from "./p8p_table_constants"; //Действия панели инструментов столбца
+
+//-----------
+//Тело модуля
+//-----------
+
+//Панель инструментов столбца (левая)
+const P8PTableColumnToolBarLeft = ({ columnDef, onItemClick }) => {
+ //Кнопка развёртывания/свёртывания
+ let expButton = null;
+ if (columnDef.expandable)
+ expButton = (
+ (onItemClick ? onItemClick(P8P_TABLE_COLUMN_TOOL_BAR_ACTIONS.EXPAND_TOGGLE, columnDef.name) : null)}>
+ {columnDef.expanded ? "indeterminate_check_box" : "add_box"}
+
+ );
+
+ //Генерация содержимого
+ return <>{expButton};
+};
+
+//Контроль свойств - Панель инструментов столбца (левая)
+P8PTableColumnToolBarLeft.propTypes = {
+ columnDef: PropTypes.object.isRequired,
+ onItemClick: PropTypes.func
+};
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+export { P8PTableColumnToolBarLeft };
diff --git a/app/components/p8p_table/p8p_table_column_toolbar_right.js b/app/components/p8p_table/p8p_table_column_toolbar_right.js
new file mode 100644
index 0000000..13834bb
--- /dev/null
+++ b/app/components/p8p_table/p8p_table_column_toolbar_right.js
@@ -0,0 +1,63 @@
+/*
+ Парус 8 - Панели мониторинга - Таблица
+ Компонент: Панель инструментов столбца (правая)
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import React from "react"; //Классы React
+import PropTypes from "prop-types"; //Контроль свойств компонента
+import { IconButton, Icon } from "@mui/material"; //Интерфейсные компоненты
+import { hasValue } from "./p8p_table_reducer"; //Редьюсер состояния
+import { P8P_TABLE_COLUMN_ORDER_DIRECTIONS, P8P_TABLE_COLUMN_TOOL_BAR_ACTIONS } from "./p8p_table_constants"; //Константы таблицы
+
+//-----------
+//Тело модуля
+//-----------
+
+//Панель инструментов столбца (правая)
+const P8PTableColumnToolBarRight = ({ columnDef, orders, filters, onItemClick }) => {
+ //Кнопка сортировки
+ const order = orders.find(o => o.name == columnDef.name);
+ let orderButton = null;
+ if (order)
+ orderButton = (
+ (onItemClick ? onItemClick(P8P_TABLE_COLUMN_TOOL_BAR_ACTIONS.ORDER_TOGGLE, columnDef.name) : null)}>
+ {order.direction === P8P_TABLE_COLUMN_ORDER_DIRECTIONS.ASC ? "arrow_upward" : "arrow_downward"}
+
+ );
+
+ //Кнопка фильтрации
+ const filter = filters.find(f => f.name == columnDef.name);
+ let filterButton = null;
+ if (hasValue(filter?.from) || hasValue(filter?.to))
+ filterButton = (
+ (onItemClick ? onItemClick(P8P_TABLE_COLUMN_TOOL_BAR_ACTIONS.FILTER_TOGGLE, columnDef.name) : null)}>
+ filter_alt
+
+ );
+
+ //Генерация содержимого
+ return (
+ <>
+ {orderButton}
+ {filterButton}
+
+ );
+};
+
+//Контроль свойств - Панель инструментов столбца (правая)
+P8PTableColumnToolBarRight.propTypes = {
+ columnDef: PropTypes.object.isRequired,
+ orders: PropTypes.array.isRequired,
+ filters: PropTypes.array.isRequired,
+ onItemClick: PropTypes.func
+};
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+export { P8PTableColumnToolBarRight };
diff --git a/app/components/p8p_table/p8p_table_constants.js b/app/components/p8p_table/p8p_table_constants.js
new file mode 100644
index 0000000..fea3f2a
--- /dev/null
+++ b/app/components/p8p_table/p8p_table_constants.js
@@ -0,0 +1,99 @@
+/*
+ Парус 8 - Панели мониторинга - Таблица
+ Компонент: Константы
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import PropTypes from "prop-types"; //Контроль свойств компонента
+import { P8P_DATA_TYPES } from "../../core/data_types"; //Типы данных
+
+//-----------
+//Тело модуля
+//-----------
+
+//Размеры отступов
+const P8P_TABLE_SIZE = {
+ SMALL: "small",
+ MEDIUM: "medium"
+};
+
+//Типы данных
+const P8P_TABLE_DATA_TYPE = {
+ STR: P8P_DATA_TYPES.STR,
+ NUMB: P8P_DATA_TYPES.NUMB,
+ DATE: P8P_DATA_TYPES.DATE
+};
+
+//Направления сортировки
+const P8P_TABLE_COLUMN_ORDER_DIRECTIONS = {
+ ASC: "ASC",
+ DESC: "DESC"
+};
+
+//Действия панели инструментов столбца
+const P8P_TABLE_COLUMN_TOOL_BAR_ACTIONS = {
+ ORDER_TOGGLE: "ORDER_TOGGLE",
+ FILTER_TOGGLE: "FILTER_TOGGLE",
+ EXPAND_TOGGLE: "EXPAND_TOGGLE"
+};
+
+//Действия меню столбца
+const P8P_TABLE_COLUMN_MENU_ACTIONS = {
+ ORDER_ASC: "ORDER_ASC",
+ ORDER_DESC: "ORDER_DESC",
+ FILTER: "FILTER"
+};
+
+//Структура элемента описания фильтра
+const P8P_TABLE_FILTER_SHAPE = PropTypes.shape({
+ name: PropTypes.string.isRequired,
+ from: PropTypes.any,
+ to: PropTypes.any
+});
+
+//Структура элемента описания сортировки
+const P8P_TABLE_ORDER_SHAPE = PropTypes.shape({
+ direction: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired
+});
+
+//Размещение области страниц по вертикали
+const P8P_TABLE_PAGINATOR_ALIGN = {
+ LEFT: "left",
+ RIGHT: "right",
+ CENTER: "center"
+};
+
+//Размещение области страниц по горизонтали
+const P8P_TABLE_PAGINATOR_POSITION = {
+ TOP: "top",
+ BOTTOM: "bottom",
+ BOTH: "both"
+};
+
+//Высота кнопки догрузки данных
+const P8P_TABLE_MORE_HEIGHT = "49px";
+
+//Высота фильтров таблицы
+const P8P_TABLE_FILTERS_HEIGHT = "48px";
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+export {
+ P8P_TABLE_SIZE,
+ P8P_TABLE_DATA_TYPE,
+ P8P_TABLE_COLUMN_ORDER_DIRECTIONS,
+ P8P_TABLE_COLUMN_TOOL_BAR_ACTIONS,
+ P8P_TABLE_COLUMN_MENU_ACTIONS,
+ P8P_TABLE_FILTER_SHAPE,
+ P8P_TABLE_ORDER_SHAPE,
+ P8P_TABLE_PAGINATOR_ALIGN,
+ P8P_TABLE_PAGINATOR_POSITION,
+ P8P_TABLE_MORE_HEIGHT,
+ P8P_TABLE_FILTERS_HEIGHT
+};
diff --git a/app/components/p8p_table/p8p_table_filters_chips.js b/app/components/p8p_table/p8p_table_filters_chips.js
new file mode 100644
index 0000000..b44e74e
--- /dev/null
+++ b/app/components/p8p_table/p8p_table_filters_chips.js
@@ -0,0 +1,74 @@
+/*
+ Парус 8 - Панели мониторинга - Таблица
+ Компонент: Сводный фильтр
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import React from "react"; //Классы React
+import PropTypes from "prop-types"; //Контроль свойств компонента
+import { Stack, Chip, Typography } from "@mui/material"; //Интерфейсные компоненты
+import { hasValue } from "./p8p_table_reducer"; //Редьюсер состояния
+import { P8P_TABLE_DATA_TYPE } from "./p8p_table_constants"; //Типы данных
+import { P8P_TYPOGRAPHY_VARIANT } from "../../theme/p8p_typography"; //Варианты шрифтов
+
+//-----------
+//Тело модуля
+//-----------
+
+//Сводный фильтр
+const P8PTableFiltersChips = ({ filters, columnsDef, valueFromCaption, valueToCaption, onFilterChipClick, onFilterChipDelete, valueFormatter }) => {
+ return (
+
+ {filters.map((filter, i) => {
+ const columnDef = columnsDef.find(columnDef => columnDef.name == filter.name);
+ return (
+
+ {columnDef.caption}:
+
+ {hasValue(filter.from) && !columnDef.values && columnDef.dataType != P8P_TABLE_DATA_TYPE.STR
+ ? `${valueFromCaption.toLowerCase()} `
+ : null}
+ {hasValue(filter.from)
+ ? valueFormatter
+ ? valueFormatter({ value: filter.from, columnDef })
+ : filter.from
+ : null}
+ {hasValue(filter.to) && !columnDef.values && columnDef.dataType != P8P_TABLE_DATA_TYPE.STR
+ ? ` ${valueToCaption.toLowerCase()} `
+ : null}
+ {hasValue(filter.to) ? (valueFormatter ? valueFormatter({ value: filter.to, columnDef }) : filter.to) : null}
+
+
+ }
+ variant="outlined"
+ onClick={() => (onFilterChipClick ? onFilterChipClick(columnDef.name) : null)}
+ onDelete={() => (onFilterChipDelete ? onFilterChipDelete(columnDef.name) : null)}
+ />
+ );
+ })}
+
+ );
+};
+
+//Контроль свойств - Сводный фильтр
+P8PTableFiltersChips.propTypes = {
+ filters: PropTypes.array.isRequired,
+ columnsDef: PropTypes.array.isRequired,
+ valueFromCaption: PropTypes.string.isRequired,
+ valueToCaption: PropTypes.string.isRequired,
+ onFilterChipClick: PropTypes.func,
+ onFilterChipDelete: PropTypes.func,
+ valueFormatter: PropTypes.func
+};
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+export { P8PTableFiltersChips };
diff --git a/app/components/p8p_table_reducer.js b/app/components/p8p_table/p8p_table_reducer.js
similarity index 100%
rename from app/components/p8p_table_reducer.js
rename to app/components/p8p_table/p8p_table_reducer.js
diff --git a/app/config_wrapper.js b/app/config_wrapper.js
index 6dea7fd..fcb4361 100644
--- a/app/config_wrapper.js
+++ b/app/config_wrapper.js
@@ -12,7 +12,7 @@ import { deepCopyObject } from "./core/utils"; //Вспомогательные
import { TITLES, BUTTONS, TEXTS, CAPTIONS } from "../app.text"; //Текстовые ресурсы и константы
import { P8PPanelsMenuGrid, P8P_PANELS_MENU_PANEL_SHAPE } from "./components/p8p_panels_menu"; //Меню панелей
import { P8PAppWorkspace } from "./components/p8p_app_workspace"; //Рабочее пространство
-import { P8PTable, P8P_TABLE_DATA_TYPE, P8P_TABLE_SIZE, P8P_TABLE_FILTER_SHAPE } from "./components/p8p_table"; //Таблица данных
+import { P8PTable, P8P_TABLE_DATA_TYPE, P8P_TABLE_SIZE, P8P_TABLE_FILTER_SHAPE } from "./components/p8p_table/p8p_table"; //Таблица данных
import { P8PDataGrid, P8P_DATA_GRID_DATA_TYPE, P8P_DATA_GRID_SIZE, P8P_DATA_GRID_FILTER_SHAPE } from "./components/p8p_data_grid"; //Таблица данных
import { P8PGantt, P8P_GANTT_TASK_SHAPE, P8P_GANTT_TASK_ATTRIBUTE_SHAPE, P8P_GANTT_TASK_COLOR_SHAPE } from "./components/p8p_gantt"; //Диаграмма Ганта
import { P8PCyclogram } from "./components/p8p_cyclogram"; //Циклограмма
diff --git a/app/root.js b/app/root.js
index b428c24..11a9dd1 100644
--- a/app/root.js
+++ b/app/root.js
@@ -10,6 +10,7 @@
import React from "react"; //Классы React
import { MessagingContext } from "./context/messaging"; //Контекст сообщений
import { BackEndContext } from "./context/backend"; //Контекст взаимодействия с сервером
+import { SettingsContext } from "./context/settings"; //Контекст взаимодействия с параметрами
import { ApplicationContext } from "./context/application"; //Контекст приложения
import { App } from "./app"; //Приложение
import { ERRORS, TITLES, TEXTS, BUTTONS } from "../app.text"; //Текстовые ресурсы и константы
@@ -17,6 +18,9 @@ import { getDisplaySize, genGUID } from "./core/utils"; //Вспомогател
import config from "../app.config"; //Настройки приложения
import client from "./core/client"; //Клиент для взаимодействия с сервером
+import { ThemeProvider } from "@mui/material/styles"; //Подключение темы
+import { theme } from ".//theme/theme"; //Тема компонентов
+
//-----------
//Тело модуля
//-----------
@@ -24,13 +28,17 @@ import client from "./core/client"; //Клиент для взаимодейст
//Обёртка для контекста
const Root = () => {
return (
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/app/theme/colors/common.js b/app/theme/colors/common.js
new file mode 100644
index 0000000..54ad981
--- /dev/null
+++ b/app/theme/colors/common.js
@@ -0,0 +1,42 @@
+/*
+ Парус 8 - Панели мониторинга
+ Дополнительные цвета: общие
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { STATE } from "../../../app.text"; //Типовые текстовые ресурсы и константы
+import { P8P_COLOR_GREEN } from "../colors/green"; //Дополнительные цвета: зеленый
+import { P8P_COLOR_RED } from "../colors/red"; //Дополнительные цвета: красный
+import { P8P_COLOR_ORANGE } from "../colors/orange"; //Дополнительные цвета: оранжевый
+import { P8P_COLOR_GREY } from "./grey"; //Дополнительные цвета: серый
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Цвет - белый
+export const P8P_COLOR_WHITE = "#FFF";
+
+//Цвет - черный
+export const P8P_COLOR_BLACK = "#000000";
+
+//Цвет состояния
+export const P8P_COLOR_STATE = {
+ [STATE.UNDEFINED]: P8P_COLOR_GREY[900],
+ [STATE.INFO]: P8P_COLOR_BLACK,
+ [STATE.OK]: P8P_COLOR_GREEN[900],
+ [STATE.ERR]: P8P_COLOR_RED[900],
+ [STATE.WARN]: P8P_COLOR_ORANGE[900]
+};
+
+//Цвет заливки состояния
+export const P8P_COLOR_STATE_BG = {
+ [STATE.UNDEFINED]: P8P_COLOR_GREY[200],
+ [STATE.INFO]: P8P_COLOR_WHITE,
+ [STATE.OK]: P8P_COLOR_GREEN[200],
+ [STATE.ERR]: P8P_COLOR_RED[200],
+ [STATE.WARN]: P8P_COLOR_ORANGE[200]
+};
diff --git a/app/theme/colors/green.js b/app/theme/colors/green.js
new file mode 100644
index 0000000..45ed40c
--- /dev/null
+++ b/app/theme/colors/green.js
@@ -0,0 +1,21 @@
+/*
+ Парус 8 - Панели мониторинга
+ Дополнительные цвета: зеленый
+*/
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+export const P8P_COLOR_GREEN = {
+ 50: "#e8f5e9",
+ 100: "#c8e6c9",
+ 200: "#a5d6a7",
+ 300: "#81c784",
+ 400: "#66bb6a",
+ 500: "#4caf50",
+ 600: "#43a047",
+ 700: "#388e3c",
+ 800: "#2e7d32",
+ 900: "#1b5e20"
+};
diff --git a/app/theme/colors/grey.js b/app/theme/colors/grey.js
new file mode 100644
index 0000000..931fba8
--- /dev/null
+++ b/app/theme/colors/grey.js
@@ -0,0 +1,21 @@
+/*
+ Парус 8 - Панели мониторинга
+ Дополнительные цвета: серый
+*/
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+export const P8P_COLOR_GREY = {
+ 50: "#fafafa",
+ 100: "#f5f5f5",
+ 200: "#eeeeee",
+ 300: "#e0e0e0",
+ 400: "#bdbdbd",
+ 500: "#9e9e9e",
+ 600: "#757575",
+ 700: "#616161",
+ 800: "#424242",
+ 900: "#212121"
+};
diff --git a/app/theme/colors/orange.js b/app/theme/colors/orange.js
new file mode 100644
index 0000000..4c533e7
--- /dev/null
+++ b/app/theme/colors/orange.js
@@ -0,0 +1,21 @@
+/*
+ Парус 8 - Панели мониторинга
+ Дополнительные цвета: оранжевый
+*/
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+export const P8P_COLOR_ORANGE = {
+ 50: "#fff3e0",
+ 100: "#ffe0b2",
+ 200: "#ffcc80",
+ 300: "#ffb74d",
+ 400: "#ffa726",
+ 500: "#ff9800",
+ 600: "#fb8c00",
+ 700: "#f57c00",
+ 800: "#ef6c00",
+ 900: "#e65100"
+};
diff --git a/app/theme/colors/red.js b/app/theme/colors/red.js
new file mode 100644
index 0000000..725f917
--- /dev/null
+++ b/app/theme/colors/red.js
@@ -0,0 +1,21 @@
+/*
+ Парус 8 - Панели мониторинга
+ Дополнительные цвета: красный
+*/
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+export const P8P_COLOR_RED = {
+ 50: "#ffebee",
+ 100: "#fecdd2",
+ 200: "#ef9a9a",
+ 300: "#e57373",
+ 400: "#ef5350",
+ 500: "#f44336",
+ 600: "#e53935",
+ 700: "#d32f2f",
+ 800: "#c62828",
+ 900: "#b71c1c"
+};
diff --git a/app/theme/p8p_components.js b/app/theme/p8p_components.js
new file mode 100644
index 0000000..bb1d27a
--- /dev/null
+++ b/app/theme/p8p_components.js
@@ -0,0 +1,67 @@
+/*
+ Парус 8 - Панели мониторинга
+ Кастомные компоненты
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { P8P_BUTTON_OVERRIDES } from "./variants/p8p_button_variants"; //Расширение Button
+import { P8P_TABLE_OVERRIDES } from "./variants/p8p_table_variants"; //Расширение Table
+import { P8P_TABLE_HEAD_OVERRIDES } from "./variants/p8p_table_head_variants"; //Расширение TableHead
+import { P8P_TABLE_CELL_OVERRIDES } from "./variants/p8p_table_cell_variants"; //Расширение TableCell
+import { P8P_TABLE_ROW_OVERRIDES } from "./variants/p8p_table_row_variants"; //Расширение TableRow
+import { P8P_PAGINATION_OVERRIDES } from "./variants/p8p_pagination_variants"; //Расширение Pagination
+import { P8P_CONTAINER_OVERRIDES } from "./variants/p8p_container_variants"; //Расширение Container
+import { P8P_ICON_OVERRIDES } from "./variants/p8p_icon_variants"; //Расширение Icon
+import { P8P_ICON_BUTTON_OVERRIDES } from "./variants/p8p_icon_button_variants"; //Расширение IconButton
+import { P8P_TEXT_FIELD_OVERRIDES } from "./variants/p8p_text_field_variants"; //Расширение TextField
+import { P8P_LIST_OVERRIDES } from "./variants/p8p_list_variants"; //Расширение List
+import { P8P_LIST_ITEM_TEXT_OVERRIDES } from "./variants/p8p_list_item_text_variants"; //Расширение ListItemText
+import { P8P_DIALOG_TITLE_OVERRIDES } from "./variants/p8p_dialog_title_variants"; //Расширение DialogTitle
+import { P8P_DIALOG_CONTENT_OVERRIDES } from "./variants/p8p_dialog_content_variants"; //Расширение DialogContent
+import { P8P_DIALOG_CONTENT_TEXT_OVERRIDES } from "./variants/p8p_dialog_content_text_variants"; //Расширение DialogContentText
+import { P8P_DRAWER_OVERRIDES } from "./variants/p8p_drawer_variants"; //Расширение Drawer
+import { P8P_APP_BAR_OVERRIDES } from "./variants/p8p_app_bar_variants"; //Расширение AppBar
+import { P8P_GRID_OVERRIDES } from "./variants/p8p_grid_variants"; //Расширение Grid
+import { P8P_CARD_OVERRIDES } from "./variants/p8p_card_variants"; //Расширение Card
+import { P8P_CARD_ACTIONS_OVERRIDES } from "./variants/p8p_card_actions_variants"; //Расширение CardActions
+import { P8P_SELECT_OVERRIDES } from "./variants/p8p_select_variants"; //Расширение Select
+import { P8P_INPUT_OVERRIDES } from "./variants/p8p_input_variants"; //Расширение Input
+import { P8P_INPUT_LABEL_OVERRIDES } from "./variants/p8p_input_label_variants"; //Расширение InputLable
+import { P8P_MENU_ITEM_OVERRIDES } from "./variants/p8p_menu_item_variants"; //Расширение MenuItem
+import { P8P_AUTOCOMPLETE_OVERRIDES } from "./variants/p8p_autocomplete_variants"; //Расширение Autocomplete
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные компоненты
+export const P8P_COMPONENTS = {
+ MuiButton: P8P_BUTTON_OVERRIDES,
+ MuiTable: P8P_TABLE_OVERRIDES,
+ MuiTableHead: P8P_TABLE_HEAD_OVERRIDES,
+ MuiTableRow: P8P_TABLE_ROW_OVERRIDES,
+ MuiTableCell: P8P_TABLE_CELL_OVERRIDES,
+ MuiPagination: P8P_PAGINATION_OVERRIDES,
+ MuiContainer: P8P_CONTAINER_OVERRIDES,
+ MuiIcon: P8P_ICON_OVERRIDES,
+ MuiIconButton: P8P_ICON_BUTTON_OVERRIDES,
+ MuiTextField: P8P_TEXT_FIELD_OVERRIDES,
+ MuiDialogTitle: P8P_DIALOG_TITLE_OVERRIDES,
+ MuiDialogContent: P8P_DIALOG_CONTENT_OVERRIDES,
+ MuiDialogContentText: P8P_DIALOG_CONTENT_TEXT_OVERRIDES,
+ MuiList: P8P_LIST_OVERRIDES,
+ MuiListItemText: P8P_LIST_ITEM_TEXT_OVERRIDES,
+ MuiDrawer: P8P_DRAWER_OVERRIDES,
+ MuiAppBar: P8P_APP_BAR_OVERRIDES,
+ MuiGrid: P8P_GRID_OVERRIDES,
+ MuiCard: P8P_CARD_OVERRIDES,
+ MuiCardActions: P8P_CARD_ACTIONS_OVERRIDES,
+ MuiSelect: P8P_SELECT_OVERRIDES,
+ MuiInputLabel: P8P_INPUT_LABEL_OVERRIDES,
+ MuiInput: P8P_INPUT_OVERRIDES,
+ MuiMenuItem: P8P_MENU_ITEM_OVERRIDES,
+ MuiAutocomplete: P8P_AUTOCOMPLETE_OVERRIDES
+};
diff --git a/app/theme/p8p_palette.js b/app/theme/p8p_palette.js
new file mode 100644
index 0000000..d4fcb21
--- /dev/null
+++ b/app/theme/p8p_palette.js
@@ -0,0 +1,72 @@
+/*
+ Парус 8 - Панели мониторинга
+ Кастомная палитра
+*/
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомная палитра
+export const P8P_PALETTE = {
+ P8PText: {
+ primary: "#2a3039de",
+ secondary: "#2a303999",
+ disabled: "#2a303961"
+ },
+ P8PPrimary: {
+ main: "#0F71BD",
+ dark: "#005EA6",
+ light: "#8DC2E2",
+ contrastText: "#FFF",
+ hover: "#0f71bd0a",
+ selected: "#0f71bd14",
+ focus: "#0f71bd1f",
+ focusVisible: "#0f71bd4d",
+ outlinedBorder: "#2a30391f"
+ },
+ P8PSecondary: {
+ main: "#37474F",
+ dark: "#2A3039",
+ light: "#607D8B",
+ contrastText: "#FFF",
+ outlinedBorder: "#2a303980"
+ },
+ P8PError: {
+ main: "#D32F2F",
+ dark: "#C62828",
+ light: "#EF5350"
+ },
+ P8PWarning: {
+ main: "#EF6C00",
+ dark: "#E65100",
+ light: "#FF9800"
+ },
+ P8PInfo: {
+ main: "#0F71BD",
+ dark: "#005EA6",
+ light: "#03A9F4"
+ },
+ P8PSuccess: {
+ main: "#2E7D32",
+ dark: "#1B5E20",
+ light: "#4CAF50"
+ },
+ P8PBackground: {
+ primary: "#FFF",
+ secondary: "#F8FAFD",
+ tableHeader: "#E6EAF3"
+ },
+ P8PAction: {
+ active: "#0000008a"
+ },
+ P8PCyclogram: {
+ group: "#e6eaf3",
+ task: "#cfd8dc"
+ },
+ P8PDesktop: {
+ main: "#1976d2",
+ hover: "#c3e1ff"
+ },
+ P8PPurple: "#5e35b1"
+};
diff --git a/app/theme/p8p_typography.js b/app/theme/p8p_typography.js
new file mode 100644
index 0000000..5651507
--- /dev/null
+++ b/app/theme/p8p_typography.js
@@ -0,0 +1,217 @@
+/*
+ Парус 8 - Панели мониторинга
+ Кастомные шрифты
+*/
+
+//---------
+//Константы
+//---------
+
+//Шрифт "Montserrat"
+const P8PFontMontserrat = {
+ fontFamily: "Montserrat",
+ fontStyle: "normal"
+};
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные шрифты
+export const P8P_TYPOGRAPHY = {
+ P8PFontMontserrat: "Montserrat",
+ P8PH1: {
+ ...P8PFontMontserrat,
+ fontSize: "96px",
+ fontWeight: "500",
+ lineHeight: "117%",
+ letterSpacing: "-1.5px"
+ },
+ P8PH2: {
+ ...P8PFontMontserrat,
+ fontSize: "60px",
+ fontWeight: "500",
+ lineHeight: "120%",
+ letterSpacing: "-0.5px"
+ },
+ P8PH3: {
+ ...P8PFontMontserrat,
+ fontSize: "48px",
+ fontWeight: "500",
+ lineHeight: "118%"
+ },
+ P8PH4: {
+ ...P8PFontMontserrat,
+ fontSize: "32px",
+ fontWeight: "600",
+ lineHeight: "120%",
+ letterSpacing: "0.25px"
+ },
+ P8PH5: {
+ ...P8PFontMontserrat,
+ fontSize: "24px",
+ fontWeight: "600",
+ lineHeight: "130%"
+ },
+ P8PH6: {
+ ...P8PFontMontserrat,
+ fontSize: "20px",
+ fontWeight: "600",
+ lineHeight: "140%",
+ letterSpacing: "0.15px"
+ },
+ P8PH6Light: {
+ ...P8PFontMontserrat,
+ fontSize: "20px",
+ fontWeight: "500",
+ lineHeight: "140%",
+ letterSpacing: "0.15px"
+ },
+ P8PH7: {
+ ...P8PFontMontserrat,
+ fontSize: "18px",
+ fontWeight: "600",
+ lineHeight: "130%",
+ letterSpacing: "0.15px"
+ },
+ P8PSubtitle1: {
+ ...P8PFontMontserrat,
+ fontSize: "16px",
+ fontWeight: "600",
+ lineHeight: "130%",
+ letterSpacing: "0.15px"
+ },
+ P8PSubtitle2: {
+ ...P8PFontMontserrat,
+ fontSize: "14px",
+ fontWeight: "600",
+ lineHeight: "140%",
+ letterSpacing: "0.1px"
+ },
+ P8PBody1: {
+ ...P8PFontMontserrat,
+ fontSize: "16px",
+ fontWeight: "500",
+ lineHeight: "150%",
+ letterSpacing: "0.15px"
+ },
+ P8PBody2: {
+ ...P8PFontMontserrat,
+ fontSize: "12px",
+ fontWeight: "500",
+ lineHeight: "143%",
+ letterSpacing: "0.17px"
+ },
+ P8PBody2Light: {
+ ...P8PFontMontserrat,
+ fontSize: "12px",
+ fontWeight: "400",
+ lineHeight: "143%",
+ letterSpacing: "0.17px"
+ },
+ P8PBody3: {
+ ...P8PFontMontserrat,
+ fontSize: "14px",
+ fontWeight: "500",
+ lineHeight: "143%",
+ letterSpacing: "0.17px"
+ },
+ P8PBody3Light: {
+ ...P8PFontMontserrat,
+ fontSize: "14px",
+ fontWeight: "400",
+ lineHeight: "143%",
+ letterSpacing: "0.17px"
+ },
+ P8PBody4: {
+ ...P8PFontMontserrat,
+ fontSize: "15px",
+ fontWeight: "500",
+ lineHeight: "143%",
+ letterSpacing: "0.17px"
+ },
+ P8PCaption: {
+ ...P8PFontMontserrat,
+ fontSize: "12px",
+ fontWeight: "500",
+ lineHeight: "166%",
+ letterSpacing: "0.4px"
+ },
+ P8POverline: {
+ ...P8PFontMontserrat,
+ fontSize: "12px",
+ fontWeight: "400",
+ lineHeight: "266%",
+ letterSpacing: "1px"
+ },
+ P8PButton: {
+ ...P8PFontMontserrat,
+ fontSize: "15px",
+ fontWeight: "600",
+ lineHeight: "26px",
+ letterSpacing: "0.46px"
+ },
+ P8PColumn: {
+ ...P8PFontMontserrat,
+ fontSize: "12px",
+ fontWeight: "600",
+ lineHeight: "24px",
+ letterSpacing: "0.17px"
+ },
+ P8PInputLabel: {
+ ...P8PFontMontserrat,
+ fontSize: "16px"
+ },
+ P8PBody2Bold: {
+ ...P8PFontMontserrat,
+ fontSize: "12px",
+ fontWeight: "700",
+ lineHeight: "143%",
+ letterSpacing: "0.17px"
+ },
+ P8PTitle: {
+ ...P8PFontMontserrat,
+ fontSize: "15px",
+ fontWeight: "500",
+ lineHeight: "140%",
+ letterSpacing: "0.1px"
+ },
+ P8PDesktopGroup: {
+ fontFamily: "tahoma, arial, verdana, sans-serif!important",
+ fontSize: "13px !important",
+ fontWeight: "bold"
+ },
+ P8PDesktopCaption: {
+ fontFamily: "tahoma, arial, verdana, sans-serif!important",
+ fontSize: "12px",
+ lineHeight: "1.2"
+ }
+};
+
+//Наименование кастомных шрифтов
+export const P8P_TYPOGRAPHY_VARIANT = {
+ H1: "P8PH1",
+ H2: "P8PH2",
+ H3: "P8PH3",
+ H4: "P8PH4",
+ H5: "P8PH5",
+ H6: "P8PH6",
+ H6_LIGHT: "P8PH6Light",
+ H7: "P8PH7",
+ SUBTITLE1: "P8PSubtitle1",
+ SUBTITLE2: "P8PSubtitle2",
+ BODY1: "P8PBody1",
+ BODY2: "P8PBody2",
+ BODY2_LIGHT: "P8PBody2Light",
+ BODY3: "P8PBody3",
+ BODY3_LIGHT: "P8PBody3Light",
+ CAPTION: "P8PCaption",
+ OVERLINE: "P8POverline",
+ BUTTON: "P8PButton",
+ COLUMN: "P8PColumn",
+ INPUT_LABEL: "P8PInputLabel",
+ BODY2_BOLD: "P8PBody2Bold",
+ TITLE: "P8PTitle",
+ DESKTOP_GROUP: "P8PDesktopGroup",
+ DESKTOP_CAPTION: "P8PDesktopCaption"
+};
diff --git a/app/theme/styles/box.js b/app/theme/styles/box.js
new file mode 100644
index 0000000..5fa3a27
--- /dev/null
+++ b/app/theme/styles/box.js
@@ -0,0 +1,152 @@
+/*
+ Парус 8 - Панели мониторинга
+ Вспомогательные стили Box
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { P8P_COMPONENT_WIDTH, P8P_COMPONENT_HEIGHT, P8P_SCROLL_AUTO } from "./common"; //Стили - общие
+import { useTheme } from "@mui/material/styles"; //Хук темы приложения
+
+//---------
+//Общие стили контейнеров
+//---------
+
+//Контейнер плавающий
+export const P8P_BOX_FLEX = { display: "flex" };
+
+//Контейнер плавающий, элементы по центру, к началу
+export const P8P_BOX_CENTER_START = {
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "flex-start"
+};
+
+//Контейнер плавающий, элементы по центру, к концу
+export const P8P_BOX_CENTER_END = {
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "flex-end"
+};
+
+//Контейнер плавающий, элементы по центру, равномерно
+export const P8P_BOX_CENTER_BETWEEN = {
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-between"
+};
+
+//Контейнер плавающий, элементы по центру
+export const P8P_BOX_CENTER = { display: "flex", alignItems: "center", justifyContent: "center" };
+
+//---------
+//Стили приложения
+//---------
+
+//Контейнер рабочего пространства
+export const P8P_BOX_APP_WORKSPACE = {
+ ...P8P_COMPONENT_WIDTH({ width: "100vw" }),
+ //width: "100vw",
+ ...P8P_BOX_CENTER_BETWEEN
+};
+
+//Меню панелей - контейнер грида
+export const P8P_BOX_PANELS_MENU_CONTAINER = {
+ ...P8P_BOX_CENTER_START,
+ ...P8P_COMPONENT_HEIGHT({ minHeight: "100vh" })
+};
+
+//---------
+//Стили настроек панелей
+//---------
+
+//Список настроек панели
+export const P8P_BOX_SETTINGS_LIST = {
+ ...P8P_COMPONENT_WIDTH({ width: "520px" }),
+ ...P8P_COMPONENT_HEIGHT({ height: "500px" }),
+ ...P8P_SCROLL_AUTO
+};
+
+//Список панелей настроек панелей
+export const P8P_BOX_SETTINGS_PANELS = {
+ ...P8P_COMPONENT_WIDTH({ width: "300px" }),
+ ...P8P_COMPONENT_HEIGHT({ height: "500px" }),
+ ...P8P_SCROLL_AUTO
+};
+
+//Контейнер настроек панелей
+export const P8P_BOX_SETTINGS_CONTAINER = {
+ display: "flex",
+ flexDirection: "row",
+ alignItems: "flex-start"
+};
+
+//---------
+//Стили Ганта
+//---------
+
+//Контейнер диаграмы Ганта
+export const P8P_BOX_GANTT = ({ noData, zoomBarHeight, titleHeight }) => ({
+ ...P8P_COMPONENT_HEIGHT({ height: `calc(100% - ${zoomBarHeight ? zoomBarHeight : "0px"} - ${titleHeight ? titleHeight : "0px"})` }),
+ //height: `calc(100% - ${zoomBarHeight ? zoomBarHeight : "0px"} - ${titleHeight ? titleHeight : "0px"})`,
+ display: noData ? "none" : ""
+});
+
+//---------
+//Стили циклограммы
+//---------
+
+//Контейнер циклограммы
+export const P8P_BOX_CYCLOGRAM = ({ noData, zoomBarHeight, titleHeight }) => ({
+ position: "relative",
+ overflow: "auto",
+ padding: "0px 8px",
+ ...P8P_COMPONENT_HEIGHT({ height: `calc(100% - ${zoomBarHeight ? zoomBarHeight : "0px"} - ${titleHeight ? titleHeight : "0px"})` }),
+ //height: `calc(100% - ${zoomBarHeight ? zoomBarHeight : "0px"} - ${titleHeight ? titleHeight : "0px"})`,
+ display: noData ? "none" : ""
+});
+
+//Контейнер строки циклограммы
+export const P8P_BOX_CYCLOGRAM_ROW = ({ index }) => {
+ //Определение темы приложения
+ const theme = useTheme();
+ //Возвращаем стиль
+ return {
+ ...(index % 2 === 0 ? { backgroundColor: theme.palette.P8PBackground.primary } : { backgroundColor: theme.palette.P8PBackground.secondary })
+ };
+};
+
+//Контейнер заголовка группы циклограммы
+export const P8P_BOX_CYCLOGRAM_GROUP = ({ height }) => {
+ //Определение темы приложения
+ const theme = useTheme();
+ //Возвращаем стиль
+ return {
+ border: "1px solid",
+ backgroundColor: theme.palette.P8PCyclogram.group,
+ ...P8P_BOX_CENTER,
+ height
+ };
+};
+
+//Контейнер задачи циклограммы
+export const P8P_BOX_CYCLOGRAM_TASK = ({ lineHeight, bgColor, textColor, highlightColor }) => {
+ //Определение темы приложения
+ const theme = useTheme();
+ //Возвращаем стиль
+ return {
+ display: "flex",
+ alignItems: "center",
+ backgroundColor: bgColor ? bgColor : theme.palette.P8PCyclogram.task,
+ ...(textColor ? { color: textColor } : {}),
+ height: lineHeight,
+ "&:hover": {
+ ...(highlightColor
+ ? { backgroundColor: `${highlightColor} !important`, filter: "brightness(1) !important" }
+ : { filter: `brightness(${bgColor ? "1.25" : "1.1"}) !important` }),
+ cursor: "pointer !important"
+ }
+ };
+};
diff --git a/app/theme/styles/common.js b/app/theme/styles/common.js
new file mode 100644
index 0000000..475aa84
--- /dev/null
+++ b/app/theme/styles/common.js
@@ -0,0 +1,58 @@
+/*
+ Парус 8 - Панели мониторинга
+ Вспомогательные стили - общие
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { APP_STYLES } from "../../../app.styles"; //Типовые стили
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Ширина компонента
+export const P8P_COMPONENT_WIDTH = ({ width, minWidth, maxWidth }) => ({
+ ...(width ? { width } : {}),
+ ...(minWidth ? { minWidth } : {}),
+ ...(maxWidth ? { maxWidth } : {})
+});
+
+//Высота компонента
+export const P8P_COMPONENT_HEIGHT = ({ height, minHeight, maxHeight }) => ({
+ ...(height ? { height } : {}),
+ ...(minHeight ? { minHeight } : {}),
+ ...(maxHeight ? { maxHeight } : {})
+});
+
+//Отображаемый скролл
+export const P8P_SCROLL_AUTO = {
+ overflow: "auto",
+ ...APP_STYLES.SCROLL
+};
+
+//Отсутствие отступов
+export const P8P_COMPONENT_ZERO_PADDING = {
+ padding: "0px"
+};
+
+//Стили
+export const P8P_SCROLL = {
+ "&::-webkit-scrollbar": {
+ height: "8px",
+ width: "8px"
+ },
+ "&::-webkit-scrollbar-track": {
+ borderRadius: "8px",
+ backgroundColor: "#EBEBEB"
+ },
+ "&::-webkit-scrollbar-thumb": {
+ borderRadius: "8px",
+ backgroundColor: "#b4b4b4"
+ },
+ "&::-webkit-scrollbar-thumb:hover": {
+ backgroundColor: "#808080"
+ }
+};
diff --git a/app/theme/styles/icon.js b/app/theme/styles/icon.js
new file mode 100644
index 0000000..444f09c
--- /dev/null
+++ b/app/theme/styles/icon.js
@@ -0,0 +1,32 @@
+/*
+ Парус 8 - Панели мониторинга
+ Вспомогательные стили Icon
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { STATE } from "../../../app.text"; //Типовые текстовые ресурсы и константы
+import { P8P_COLOR_STATE } from "../colors/common"; //Дополнительные цвета - общие
+
+//---------
+//Константы
+//---------
+
+//Цвета текста и иконок индикатора
+const P8P_INDICATOR_COLOR = {
+ [STATE.OK]: P8P_COLOR_STATE[STATE.OK],
+ [STATE.ERR]: P8P_COLOR_STATE[STATE.ERR],
+ [STATE.WARN]: P8P_COLOR_STATE[STATE.WARN]
+};
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Иконка индикатора
+export const P8P_ICON_INDICATOR = ({ state, fontSize, color }) => ({
+ fontSize,
+ color: color || P8P_INDICATOR_COLOR[state]
+});
diff --git a/app/theme/styles/main.js b/app/theme/styles/main.js
new file mode 100644
index 0000000..eb86829
--- /dev/null
+++ b/app/theme/styles/main.js
@@ -0,0 +1,13 @@
+/*
+ Парус 8 - Панели мониторинга
+ Вспомогательные стили main
+*/
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Содержимое рабочего пространства
+export const P8P_MAIN_APP_WORKSPACE = {
+ flexGrow: 1
+};
diff --git a/app/theme/styles/paper.js b/app/theme/styles/paper.js
new file mode 100644
index 0000000..223350c
--- /dev/null
+++ b/app/theme/styles/paper.js
@@ -0,0 +1,66 @@
+/*
+ Парус 8 - Панели мониторинга
+ Вспомогательные стили Paper
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { useTheme } from "@mui/material/styles"; //Хук темы приложения
+import { STATE } from "../../../app.text"; //Типовые текстовые ресурсы и константы
+import { P8P_COLOR_STATE, P8P_COLOR_STATE_BG } from "../colors/common"; //Дополнительные цвета - общие
+import { P8P_COMPONENT_WIDTH, P8P_COMPONENT_HEIGHT } from "./common"; //Стили - общие
+
+//---------
+//Константы
+//---------
+
+//Цвета заливки индикатора
+const P8P_INDICATOR_BG_COLOR = {
+ [STATE.OK]: P8P_COLOR_STATE_BG[STATE.OK],
+ [STATE.ERR]: P8P_COLOR_STATE_BG[STATE.ERR],
+ [STATE.WARN]: P8P_COLOR_STATE_BG[STATE.WARN]
+};
+
+//Цвета текста и иконок индикатора
+const P8P_INDICATOR_COLOR = {
+ [STATE.OK]: P8P_COLOR_STATE[STATE.OK],
+ [STATE.ERR]: P8P_COLOR_STATE[STATE.ERR],
+ [STATE.WARN]: P8P_COLOR_STATE[STATE.WARN]
+};
+
+//-----------------------
+//Вспомогательные функции
+//-----------------------
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Стиль для контейнера индикатора
+export const P8P_PAPER_INDICATOR = ({ state, color, backgroundColor, clickable }) => {
+ //Определение темы приложения
+ const theme = useTheme();
+ //Возвращаем стиль
+ return {
+ padding: "10px",
+ ...P8P_COMPONENT_WIDTH({ width: "100%" }),
+ ...P8P_COMPONENT_HEIGHT({ height: "100%" }),
+ //width: "100%",
+ //height: "100%",
+ overflow: "hidden",
+ backgroundColor: backgroundColor || P8P_INDICATOR_BG_COLOR[state],
+ color: color || P8P_INDICATOR_COLOR[state],
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ ...(clickable
+ ? {
+ cursor: "pointer",
+ "&:hover": { filter: "brightness(0.92) !important" },
+ "&:active": { backgroundColor: theme.palette.P8PAction.active }
+ }
+ : {})
+ };
+};
diff --git a/app/theme/styles/stack.js b/app/theme/styles/stack.js
new file mode 100644
index 0000000..1fb2f8f
--- /dev/null
+++ b/app/theme/styles/stack.js
@@ -0,0 +1,22 @@
+/*
+ Парус 8 - Панели мониторинга
+ Вспомогательные стили Stack
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { P8P_COMPONENT_WIDTH } from "./common"; //Стили - общие
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Адаптивный с сокрытием
+export const P8P_STACK_INLINE_HIDDEN = {
+ ...P8P_COMPONENT_WIDTH({ width: "100%" }),
+ containerType: "inline-size",
+ //width: "100%",
+ overflow: "hidden"
+};
diff --git a/app/theme/styles/typography.js b/app/theme/styles/typography.js
new file mode 100644
index 0000000..4ed4e9a
--- /dev/null
+++ b/app/theme/styles/typography.js
@@ -0,0 +1,86 @@
+/*
+ Парус 8 - Панели мониторинга
+ Вспомогательные стили Typography
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { P8P_COMPONENT_WIDTH, P8P_COMPONENT_HEIGHT } from "./common"; //Стили - общие
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//---------
+//Общие стили текста
+//---------
+
+//Текст с возможностью нажатия
+export const P8P_TYPOGRAPHY_CLICKABLE = {
+ cursor: "pointer"
+};
+
+//Заголовок полноэкранного диалога
+export const P8P_TYPOGRAPHY_DIALOG_TITLE = {
+ marginLeft: "16px",
+ flex: 1
+};
+
+//Заголовок
+export const P8P_TYPOGRAPHY_TITLE = {
+ ...P8P_COMPONENT_HEIGHT({ height: "44px" })
+ //height: "44px"
+};
+
+//---------
+//Стили приложения
+//---------
+
+//Описание панели на рабочем столе
+export const P8P_TYPOGRAPHY_PANEL_DESK = {
+ display: "-webkit-box",
+ overflow: "hidden",
+ WebkitBoxOrient: "vertical",
+ WebkitLineClamp: 2,
+ ...P8P_COMPONENT_WIDTH({ maxWidth: "140px" })
+ //maxWidth: "140px"
+};
+
+//---------
+//Стили циклограммы
+//---------
+
+//Колонка циклограммы
+export const P8P_TYPOGRAPHY_CG_HEADER = {
+ textOverflow: "ellipsis",
+ overflow: "hidden",
+ whiteSpace: "pre",
+ textAlign: "center",
+ lineHeight: "35px",
+ padding: "0px 5px"
+};
+
+//Группа циклограммы
+export const P8P_TYPOGRAPHY_CG_GROUP = ({ maxWidth, maxHeight }) => ({
+ maxWidth,
+ maxHeight,
+ textAlign: "center",
+ wordWrap: "break-word"
+});
+
+//Задача циклограммы
+export const P8P_TYPOGRAPHY_CG_TASK = ({ maxHeight, availableLines }) => ({
+ maxHeight,
+ ...P8P_COMPONENT_WIDTH({ width: "100%" }),
+ //width: "100%",
+ padding: "0px 5px",
+ overflowWrap: "break-word",
+ wordBreak: "break-all",
+ overflow: "hidden",
+ textOverflow: "ellipsis",
+ display: "-webkit-box",
+ WebkitBoxOrient: "vertical",
+ WebkitLineClamp: availableLines < 1 ? 1 : availableLines
+});
diff --git a/app/theme/theme.js b/app/theme/theme.js
new file mode 100644
index 0000000..7172140
--- /dev/null
+++ b/app/theme/theme.js
@@ -0,0 +1,24 @@
+/*
+ Парус 8 - Панели мониторинга
+ Стилистика компонентов
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { createTheme } from "@mui/material/styles"; //Функция создания темы MUI
+import { P8P_TYPOGRAPHY } from "./p8p_typography"; //Кастомные шрифты
+import { P8P_PALETTE } from "./p8p_palette"; //Кастомная палитра
+import { P8P_COMPONENTS } from "./p8p_components"; //Кастомные компоненты
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомная тема MUI
+export const theme = createTheme({
+ palette: P8P_PALETTE,
+ typography: P8P_TYPOGRAPHY,
+ components: P8P_COMPONENTS
+});
diff --git a/app/theme/utils.js b/app/theme/utils.js
new file mode 100644
index 0000000..25dbebe
--- /dev/null
+++ b/app/theme/utils.js
@@ -0,0 +1,43 @@
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { alpha } from "@mui/material/styles"; //Интерфейсные стили компонентов
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Универсальное определение цвета кнопки
+export const getButtonColorStyles = (color, theme, isOutlined = false) => {
+ //Определяем цвет
+ const colorObj = !color ? theme.palette.primary : theme.palette[color];
+ //Если цвет неопределен или нет разбивки на оттенки
+ if (!colorObj || typeof colorObj !== "object" || !colorObj.main) {
+ return {};
+ }
+ //Возвращаем результат
+ return {
+ backgroundColor: !isOutlined ? colorObj.main : null,
+ color: !isOutlined ? colorObj.contrastText || "#FFF" : colorObj.main,
+ ...(isOutlined ? { border: `1px solid ${colorObj.main}` } : {}),
+ "&:hover": {
+ textDecoration: "none",
+ backgroundColor: !isOutlined ? colorObj.dark || colorObj.main : alpha(colorObj.dark, 0.04),
+ ...(!isOutlined
+ ? { boxShadow: "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)" }
+ : {})
+ },
+ "&:active": {
+ backgroundColor: !isOutlined ? colorObj.light || colorObj.main : null,
+ ...(!isOutlined
+ ? { boxShadow: "0px 5px 5px -3px rgba(0, 0, 0, 0.2) 0px 8px 10px 1px rgba(0, 0, 0, 0.14) 0px 3px 14px 2px rgba(0, 0, 0, 0.12)" }
+ : {})
+ },
+ "&.Mui-disabled": {
+ boxShadow: "none",
+ backgroundColor: "rgba(0, 0, 0, 0.12)",
+ color: "rgba(0, 0, 0, 0.26)"
+ }
+ };
+};
diff --git a/app/theme/variants/p8p_app_bar_variants.js b/app/theme/variants/p8p_app_bar_variants.js
new file mode 100644
index 0000000..5b98e3f
--- /dev/null
+++ b/app/theme/variants/p8p_app_bar_variants.js
@@ -0,0 +1,33 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики AppBar
+*/
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные области заголовка
+export const P8P_APP_BARS = {
+ primary: {},
+ P8PFixed: { position: "fixed" },
+ P8PRelative: { position: "relative" }
+};
+
+//Наименование кастомных областей заголовка
+export const P8P_APP_BAR_VARIANT = {
+ FIXED: "P8PFixed",
+ RELATIVE: "P8PRelative"
+};
+
+//Кастомная стилистика компонента
+export const P8P_APP_BAR_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState }) => {
+ //Определяем вариант
+ const variant = ownerState["variant"] || "primary";
+ //Возвращаем стили варианта
+ return P8P_APP_BARS[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_autocomplete_variants.js b/app/theme/variants/p8p_autocomplete_variants.js
new file mode 100644
index 0000000..e5e6efa
--- /dev/null
+++ b/app/theme/variants/p8p_autocomplete_variants.js
@@ -0,0 +1,31 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики Autocomplete
+*/
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные поля выбора
+export const P8P_AUTOCOMPLETES = theme => ({
+ primary: {},
+ P8PPrimary: { ...theme.typography.P8PBody1 }
+});
+
+//Наименование кастомных полей выбора
+export const P8P_AUTOCOMPLETE_VARIANT = {
+ PRIMARY: "P8PPrimary"
+};
+
+//Кастомная стилистика компонента
+export const P8P_AUTOCOMPLETE_OVERRIDES = {
+ styleOverrides: {
+ option: ({ ownerState, theme }) => {
+ //Определяем вариант
+ const variant = ownerState["variant"] || "primary";
+ //Возвращаем стили варианта
+ return P8P_AUTOCOMPLETES(theme)[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_button_variants.js b/app/theme/variants/p8p_button_variants.js
new file mode 100644
index 0000000..809b471
--- /dev/null
+++ b/app/theme/variants/p8p_button_variants.js
@@ -0,0 +1,106 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики Button
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { getButtonColorStyles } from "../utils"; //Дополнительные функции стилизации
+import { P8P_COMPONENT_HEIGHT, P8P_COMPONENT_WIDTH } from "../styles/common"; //Стили - общие
+
+//---------
+//Константы
+//---------
+
+//Размеры кнопок
+const P8P_BUTTON_SIZE = {
+ small: {
+ fontSize: "13px",
+ padding: "4px 22px"
+ },
+ medium: {
+ fontSize: "14px",
+ padding: "6px 22px"
+ },
+ large: {
+ fontSize: "15px",
+ padding: "8px 22px"
+ },
+ default: {
+ fontSize: "15px",
+ padding: "6px 22px"
+ }
+};
+
+//Общие стили
+const defaultStyles = (theme, size) => ({
+ borderRadius: "4px",
+ ...theme.typography.P8PButton,
+ ...(size ? P8P_BUTTON_SIZE[size] : P8P_BUTTON_SIZE.default)
+});
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные кнопки
+export const P8P_BUTTONS = ({ theme, color, size }) => ({
+ P8PPrimary: {
+ ...defaultStyles(theme, size),
+ ...getButtonColorStyles(color === "primary" ? "P8PInfo" : color, theme)
+ },
+ P8PSecondary: {
+ ...defaultStyles(theme, size),
+ ...getButtonColorStyles(color === "primary" ? "P8PSecondary" : color, theme)
+ },
+ P8POutlined: {
+ ...defaultStyles(theme, size),
+ ...getButtonColorStyles(color === "primary" ? "P8PSecondary" : color, theme, true)
+ },
+ P8PText: {
+ ...theme.typography.P8PSubtitle2,
+ ...getButtonColorStyles(color === "primary" ? "P8PInfo" : color, theme, true),
+ ...(size ? P8P_BUTTON_SIZE[size] : P8P_BUTTON_SIZE.default),
+ border: "none"
+ },
+ P8PDesktopPanel: {
+ fontSize: "12px",
+ textTransform: "none",
+ ...P8P_COMPONENT_WIDTH({ width: "150px" }),
+ ...P8P_COMPONENT_HEIGHT({ width: "90px" }),
+ // width: "150px",
+ // height: "90px",
+ flexDirection: "column",
+ justifyContent: "flex-start",
+ color: theme.palette.P8PDesktop.main,
+ "&:hover": { backgroundColor: theme.palette.P8PDesktop.hover }
+ }
+});
+
+//Наименование кастомных кнопок
+export const P8P_BUTTON_VARIANT = {
+ PRIMARY: "P8PPrimary",
+ SECONDARY: "P8PSecondary",
+ OUTLINED: "P8POutlined",
+ TEXT: "P8PText",
+ DESKTOP_PANEL: "P8PDesktopPanel"
+};
+
+//Кастомная стилистика компонента
+export const P8P_BUTTON_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState, theme }) => {
+ //Определяем цвет
+ const { color, size } = ownerState;
+ //Возвращаем варианты
+ return {
+ variants: Object.entries(P8P_BUTTONS({ theme, color, size })).map(([name, styles]) => ({
+ props: { variant: name },
+ style: styles
+ }))
+ };
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_card_actions_variants.js b/app/theme/variants/p8p_card_actions_variants.js
new file mode 100644
index 0000000..ce784ab
--- /dev/null
+++ b/app/theme/variants/p8p_card_actions_variants.js
@@ -0,0 +1,31 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики CardActions
+*/
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные действия карточки
+export const P8P_CARD_ACTIONS = {
+ primary: {},
+ P8PPanelCard: { marginTop: "auto", display: "flex", justifyContent: "flex-end", alignItems: "flex-start" }
+};
+
+//Наименование кастомных действий карточек
+export const P8P_CARD_ACTIONS_VARIANT = {
+ PANEL_CARD: "P8PPanelCard"
+};
+
+//Кастомная стилистика компонента
+export const P8P_CARD_ACTIONS_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState }) => {
+ //Определяем вариант
+ const variant = ownerState["variant"] || "primary";
+ //Возвращаем стили варианта
+ return P8P_CARD_ACTIONS[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_card_variants.js b/app/theme/variants/p8p_card_variants.js
new file mode 100644
index 0000000..a06aa23
--- /dev/null
+++ b/app/theme/variants/p8p_card_variants.js
@@ -0,0 +1,44 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики Card
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { P8P_COMPONENT_HEIGHT, P8P_COMPONENT_WIDTH } from "../styles/common"; //Стили - общие
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные карточки
+export const P8P_CARDS = {
+ primary: {},
+ P8PPanelInfo: {
+ ...P8P_COMPONENT_WIDTH({ maxWidth: 400 }),
+ ...P8P_COMPONENT_HEIGHT({ height: "100%" }),
+ //maxWidth: 400,
+ //height: "100%",
+ flexDirection: "column",
+ display: "flex"
+ }
+};
+
+//Наименование кастомных карточек
+export const P8P_CARD_VARIANT = {
+ PANEL_INFO: "P8PPanelInfo"
+};
+
+//Кастомная стилистика компонента
+export const P8P_CARD_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState }) => {
+ //Определяем вариант
+ const variant = ownerState["variant"] || "primary";
+ //Возвращаем стили варианта
+ return P8P_CARDS[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_container_variants.js b/app/theme/variants/p8p_container_variants.js
new file mode 100644
index 0000000..af17825
--- /dev/null
+++ b/app/theme/variants/p8p_container_variants.js
@@ -0,0 +1,48 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики Container
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { P8P_COMPONENT_WIDTH } from "../styles/common"; //Стили - общие
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные контейнеры
+export const P8P_CONTAINERS = {
+ primary: {},
+ P8PTableMoreButton: {
+ ...P8P_COMPONENT_WIDTH({ width: "100%" }),
+ //width: "100%",
+ textAlign: "center",
+ padding: "5px"
+ },
+ P8PInlineMessage: {
+ ...P8P_COMPONENT_WIDTH({ width: "100%" }),
+ //width: "100%",
+ textAlign: "center"
+ }
+};
+
+//Наименование кастомных контейнеров
+export const P8P_CONTAINER_VARIANT = {
+ TABLE_MORE_BUTTON: "P8PTableMoreButton",
+ INLINE_MSG: "P8PInlineMessage"
+};
+
+//Кастомная стилистика компонента
+export const P8P_CONTAINER_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState }) => {
+ //Определяем вариант
+ const variant = ownerState?.variant || "primary";
+ //Возвращаем стили варианта
+ return P8P_CONTAINERS[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_dialog_content_text_variants.js b/app/theme/variants/p8p_dialog_content_text_variants.js
new file mode 100644
index 0000000..335d1e1
--- /dev/null
+++ b/app/theme/variants/p8p_dialog_content_text_variants.js
@@ -0,0 +1,37 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики DialogContentText
+*/
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные диалоги (текстовое содержимое)
+export const P8P_DIALOG_CONTENT_TEXTS = theme => ({
+ primary: {},
+ P8PPrimary: { ...theme.typography.P8PBody1 },
+ P8PInfo: { color: theme.palette.P8PText.primary, ...theme.typography.P8PBody1 },
+ P8PWarn: { color: theme.palette.P8PWarning.main, ...theme.typography.P8PBody1 },
+ P8PError: { color: theme.palette.P8PError.main, ...theme.typography.P8PBody1 }
+});
+
+//Наименование кастомных диалогов (текстовое содержимое)
+export const P8P_DIALOG_CONTENT_TEXT_VARIANT = {
+ PRIMARY: "P8PPrimary",
+ INFO: "P8PInfo",
+ WARN: "P8PWarn",
+ ERROR: "P8PError"
+};
+
+//Кастомная стилистика компонента
+export const P8P_DIALOG_CONTENT_TEXT_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState, theme }) => {
+ //Определяем вариант
+ const variant = ownerState["variant"] || "primary";
+ //Возвращаем стили варианта
+ return P8P_DIALOG_CONTENT_TEXTS(theme)[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_dialog_content_variants.js b/app/theme/variants/p8p_dialog_content_variants.js
new file mode 100644
index 0000000..2e04b53
--- /dev/null
+++ b/app/theme/variants/p8p_dialog_content_variants.js
@@ -0,0 +1,48 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики DialogContent
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { APP_STYLES } from "../../../app.styles"; //Типовые стили
+import { P8P_COMPONENT_WIDTH } from "../styles/common"; //Стили - общие
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные диалоги (содержимое)
+export const P8P_DIALOG_CONTENTS = theme => ({
+ primary: {},
+ P8PPrimary: { overflow: "auto", ...APP_STYLES.SCROLL },
+ P8PTask: {
+ ...P8P_COMPONENT_WIDTH({ minWidth: 400 }),
+ //minWidth: 400,
+ overflowX: "auto"
+ },
+ P8PHint: { ...theme.typography.P8PBody4, color: theme.palette.P8PText.primary },
+ P8PHidden: { display: "flex", flexDirection: "column", overflow: "hidden" }
+});
+
+//Наименование кастомных диалогов (содержимое)
+export const P8P_DIALOG_CONTENT_VARIANT = {
+ PRIMARY: "P8PPrimary",
+ TASK: "P8PTask",
+ HINT: "P8PHint",
+ HIDDEN: "P8PHidden"
+};
+
+//Кастомная стилистика компонента
+export const P8P_DIALOG_CONTENT_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState, theme }) => {
+ //Определяем вариант
+ const variant = ownerState["variant"] || "primary";
+ //Возвращаем стили варианта
+ return P8P_DIALOG_CONTENTS(theme)[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_dialog_title_variants.js b/app/theme/variants/p8p_dialog_title_variants.js
new file mode 100644
index 0000000..8aaecd1
--- /dev/null
+++ b/app/theme/variants/p8p_dialog_title_variants.js
@@ -0,0 +1,37 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики DialogTitle
+*/
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные диалоги (заголовок)
+export const P8P_DIALOG_TITLES = theme => ({
+ primary: {},
+ P8PPrimary: { ...theme.typography.P8PH6, color: theme.palette.P8PText.primary },
+ P8PInfo: { ...theme.typography.P8PH6, color: theme.palette.P8PText.primary },
+ P8PWarn: { ...theme.typography.P8PH6, color: theme.palette.P8PWarning.main },
+ P8PError: { ...theme.typography.P8PH6, color: theme.palette.P8PError.main }
+});
+
+//Наименование кастомных диалогов (заголовок)
+export const P8P_DIALOG_TITLE_VARIANT = {
+ PRIMARY: "P8PPrimary",
+ INFO: "P8PInfo",
+ WARN: "P8PWarn",
+ ERROR: "P8PError"
+};
+
+//Кастомная стилистика компонента
+export const P8P_DIALOG_TITLE_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState, theme }) => {
+ //Определяем вариант
+ const variant = ownerState["variant"] || "primary";
+ //Возвращаем стили варианта
+ return P8P_DIALOG_TITLES(theme)[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_drawer_variants.js b/app/theme/variants/p8p_drawer_variants.js
new file mode 100644
index 0000000..4c88009
--- /dev/null
+++ b/app/theme/variants/p8p_drawer_variants.js
@@ -0,0 +1,37 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики Drawer
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { APP_STYLES } from "../../../app.styles"; //Типовые стили
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные выезжающие области
+export const P8P_DRAWERS = {
+ primary: {},
+ P8PPrimary: { [`& .MuiDrawer-paper`]: { ...APP_STYLES.SCROLL } }
+};
+
+//Наименование кастомных выезжающих областей
+export const P8P_DRAWER_VARIANT = {
+ PRIMARY: "P8PPrimary"
+};
+
+//Кастомная стилистика компонента
+export const P8P_DRAWER_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState }) => {
+ //Определяем вариант
+ const variant = ownerState["data-variant"] || "primary";
+ //Возвращаем стили варианта
+ return P8P_DRAWERS[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_grid_variants.js b/app/theme/variants/p8p_grid_variants.js
new file mode 100644
index 0000000..b6110c9
--- /dev/null
+++ b/app/theme/variants/p8p_grid_variants.js
@@ -0,0 +1,52 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики Grid
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { P8P_COMPONENT_HEIGHT, P8P_COMPONENT_WIDTH } from "../styles/common"; //Стили - общие
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные сетки
+export const P8P_GRIDS = {
+ primary: {},
+ P8PPrimary: {},
+ P8PSvgContainer: {
+ ...P8P_COMPONENT_WIDTH({ width: "100%" }),
+ ...P8P_COMPONENT_HEIGHT({ height: "100%" })
+ //width: "100%",
+ //height: "100%"
+ },
+ P8PPanelsMenu: {
+ ...P8P_COMPONENT_WIDTH({ maxWidth: 1200 }),
+ //maxWidth: 1200,
+ direction: "row",
+ justifyContent: "left",
+ alignItems: "stretch"
+ }
+};
+
+//Наименование кастомных сеток
+export const P8P_GRID_VARIANT = {
+ PRIMARY: "P8PPrimary",
+ SVG_CONTAINER: "P8PSvgContainer",
+ PANELS_MENU: "P8PPanelsMenu"
+};
+
+//Кастомная стилистика компонента
+export const P8P_GRID_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState }) => {
+ //Определяем вариант
+ const variant = ownerState["variant"] || "primary";
+ //Возвращаем стили варианта
+ return P8P_GRIDS[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_icon_button_variants.js b/app/theme/variants/p8p_icon_button_variants.js
new file mode 100644
index 0000000..6bcc9ad
--- /dev/null
+++ b/app/theme/variants/p8p_icon_button_variants.js
@@ -0,0 +1,33 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики IconButton
+*/
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные кнопки-иконки
+export const P8P_ICON_BUTTONS = {
+ primary: {},
+ P8PAppBarButton: {
+ marginRight: "16px"
+ }
+};
+
+//Наименования кастомных кнопок-иконкок
+export const P8P_ICON_BUTTON_VARIANT = {
+ APP_BAR_BUTTON: "P8PAppBarButton"
+};
+
+//Кастомная стилистика компонента
+export const P8P_ICON_BUTTON_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState }) => {
+ //Определяем вариант
+ const variant = ownerState?.variant || "primary";
+ //Возвращаем стили варианта
+ return P8P_ICON_BUTTONS[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_icon_variants.js b/app/theme/variants/p8p_icon_variants.js
new file mode 100644
index 0000000..f69dae4
--- /dev/null
+++ b/app/theme/variants/p8p_icon_variants.js
@@ -0,0 +1,51 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики Icon
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { P8P_COMPONENT_HEIGHT, P8P_COMPONENT_WIDTH } from "../styles/common"; //Стили - общие
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные иконки
+export const P8P_ICONS = {
+ primary: {},
+ P8PTableColumnMenu: {
+ marginRight: "10px"
+ },
+ P8PPanelMenuTitle: {
+ paddingTop: "4px"
+ },
+ P8PDesktopPanel: {
+ ...P8P_COMPONENT_WIDTH({ width: "48px" }),
+ ...P8P_COMPONENT_HEIGHT({ height: "48px" }),
+ // width: "48px",
+ // height: "48px",
+ fontSize: "48px"
+ }
+};
+
+//Наименование кастомных иконок
+export const P8P_ICON_VARIANT = {
+ TABLE_COLUMN_MENU: "P8PTableColumnMenu",
+ PANEL_MENU_TITLE: "P8PPanelMenuTitle",
+ DESKTOP_PANEL: "P8PDesktopPanel"
+};
+
+//Кастомная стилистика компонента
+export const P8P_ICON_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState }) => {
+ //Определяем вариант
+ const variant = ownerState?.variant || "primary";
+ //Возвращаем стили варианта
+ return P8P_ICONS[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_input_label_variants.js b/app/theme/variants/p8p_input_label_variants.js
new file mode 100644
index 0000000..b9a223e
--- /dev/null
+++ b/app/theme/variants/p8p_input_label_variants.js
@@ -0,0 +1,31 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики InputLabel
+*/
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные метки ввода
+export const P8P_INPUT_LABELS = theme => ({
+ primary: {},
+ P8PPrimary: { ...theme.typography.P8PInputLabel }
+});
+
+//Наименование кастомных меток ввода
+export const P8P_INPUT_LABEL_VARIANT = {
+ PRIMARY: "P8PPrimary"
+};
+
+//Кастомная стилистика компонента
+export const P8P_INPUT_LABEL_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState, theme }) => {
+ //Определяем вариант
+ const variant = ownerState["data-variant"] || "primary";
+ //Возвращаем стили варианта
+ return P8P_INPUT_LABELS(theme)[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_input_variants.js b/app/theme/variants/p8p_input_variants.js
new file mode 100644
index 0000000..667b8e2
--- /dev/null
+++ b/app/theme/variants/p8p_input_variants.js
@@ -0,0 +1,40 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики Input
+*/
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные поля ввода
+export const P8P_INPUTS = theme => ({
+ primary: {},
+ P8PPrimary: {
+ "& .MuiOutlinedInput-notchedOutline": {
+ "& legend": {
+ fontFamily: theme.typography.P8PFontMontserrat
+ }
+ },
+ "& .MuiInputBase-input": {
+ ...theme.typography.P8PBody1
+ }
+ }
+});
+
+//Наименование кастомных полей ввода
+export const P8P_INPUT_VARIANT = {
+ PRIMARY: "P8PPrimary"
+};
+
+//Кастомная стилистика компонента
+export const P8P_INPUT_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState, theme }) => {
+ //Определяем вариант
+ const variant = ownerState["variant"] || "primary";
+ //Возвращаем стили варианта
+ return P8P_INPUTS(theme)[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_list_item_text_variants.js b/app/theme/variants/p8p_list_item_text_variants.js
new file mode 100644
index 0000000..d27e4c8
--- /dev/null
+++ b/app/theme/variants/p8p_list_item_text_variants.js
@@ -0,0 +1,38 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики ListItemText
+*/
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные значения списков
+export const P8P_LIST_ITEM_TEXTS = theme => ({
+ primary: {},
+ P8PPrimary: {
+ "& .MuiListItemText-primary": {
+ ...theme.typography.P8PBody1
+ },
+ "& .MuiListItemText-secondary": {
+ ...theme.typography.P8PBody3
+ }
+ }
+});
+
+//Наименование кастомных значений списков
+export const P8P_LIST_ITEM_TEXT_VARIANT = {
+ PRIMARY: "P8PPrimary"
+};
+
+//Кастомная стилистика компонента
+export const P8P_LIST_ITEM_TEXT_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState, theme }) => {
+ //Определяем вариант
+ const variant = ownerState["variant"] || "primary";
+ //Возвращаем стили варианта
+ return P8P_LIST_ITEM_TEXTS(theme)[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_list_variants.js b/app/theme/variants/p8p_list_variants.js
new file mode 100644
index 0000000..9cef5a7
--- /dev/null
+++ b/app/theme/variants/p8p_list_variants.js
@@ -0,0 +1,46 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики List
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { P8P_COMPONENT_WIDTH } from "../styles/common"; //Стили - общие
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные списки
+export const P8P_LISTS = {
+ primary: {},
+ P8PGanttTask: {
+ ...P8P_COMPONENT_WIDTH({ width: "100%", minWidth: 300, maxWidth: 700 })
+ //width: "100%", minWidth: 300, maxWidth: 700
+ },
+ P8PSettings: {
+ ...P8P_COMPONENT_WIDTH({ width: "510px" }),
+ //width: "510px",
+ overflowY: "auto"
+ }
+};
+
+//Наименование кастомных списков
+export const P8P_LIST_VARIANT = {
+ GANTT_TASK: "P8PGanttTask",
+ SETTINGS: "P8PSettings"
+};
+
+//Кастомная стилистика компонента
+export const P8P_LIST_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState }) => {
+ //Определяем вариант
+ const variant = ownerState["variant"] || "primary";
+ //Возвращаем стили варианта
+ return P8P_LISTS[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_menu_item_variants.js b/app/theme/variants/p8p_menu_item_variants.js
new file mode 100644
index 0000000..c69c273
--- /dev/null
+++ b/app/theme/variants/p8p_menu_item_variants.js
@@ -0,0 +1,31 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики MenuItem
+*/
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные элементы меню
+export const P8P_MENU_ITEMS = theme => ({
+ primary: {},
+ P8PPrimary: { ...theme.typography.P8PBody1 }
+});
+
+//Наименование кастомных элементов меню
+export const P8P_MENU_ITEM_VARIANT = {
+ PRIMARY: "P8PPrimary"
+};
+
+//Кастомная стилистика компонента
+export const P8P_MENU_ITEM_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState, theme }) => {
+ //Определяем вариант
+ const variant = ownerState["variant"] || "primary";
+ //Возвращаем стили варианта
+ return P8P_MENU_ITEMS(theme)[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_pagination_variants.js b/app/theme/variants/p8p_pagination_variants.js
new file mode 100644
index 0000000..70fa702
--- /dev/null
+++ b/app/theme/variants/p8p_pagination_variants.js
@@ -0,0 +1,51 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики Pagination
+*/
+
+//---------------------
+//Подключение библиотек
+//---------------------
+
+import { P8P_TABLE_PAGINATOR_ALIGN, P8P_TABLE_PAGINATOR_POSITION } from "../../components/p8p_table/p8p_table_constants"; //Константы таблиц
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные пагинаторы
+export const P8P_PAGINATIONS = ({ theme, pagesAlign, position }) => ({
+ primary: {},
+ P8PTablePagination: {
+ display: "flex",
+ justifyContent:
+ pagesAlign === P8P_TABLE_PAGINATOR_ALIGN.LEFT
+ ? "flex-start"
+ : pagesAlign === P8P_TABLE_PAGINATOR_ALIGN.CENTER
+ ? "space-around"
+ : "flex-end",
+ ...(position === P8P_TABLE_PAGINATOR_POSITION.TOP ? { paddingBottom: "10px" } : { paddingTop: "10px" }),
+ "& .MuiPaginationItem-root": {
+ ...theme.typography.P8PBody2
+ }
+ }
+});
+
+//Наименование кастомных пагинаторов
+export const P8P_PAGINATION_VARIANT = {
+ TABLE_PAGINATION: "P8PTablePagination"
+};
+
+//Кастомная стилистика компонента
+export const P8P_PAGINATION_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState, theme }) => {
+ //Определяем вариант
+ const variant = ownerState?.variant || "primary";
+ //Определяем доп. параметры
+ const { pagesAlign, position } = ownerState["data-variant-props"] || {};
+ //Возвращаем стили варианта
+ return P8P_PAGINATIONS({ theme, pagesAlign, position })[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_select_variants.js b/app/theme/variants/p8p_select_variants.js
new file mode 100644
index 0000000..9d35712
--- /dev/null
+++ b/app/theme/variants/p8p_select_variants.js
@@ -0,0 +1,38 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики Select
+*/
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные поля выбора
+export const P8P_SELECTS = theme => ({
+ primary: {},
+ P8PPrimary: {
+ "& .MuiOutlinedInput-notchedOutline": {
+ "& legend": {
+ fontFamily: theme.typography.P8PFontMontserrat
+ }
+ },
+ "& .MuiSelect-select": { ...theme.typography.P8PBody1 }
+ }
+});
+
+//Наименование кастомных полей выбора
+export const P8P_SELECT_VARIANT = {
+ PRIMARY: "P8PPrimary"
+};
+
+//Кастомная стилистика компонента
+export const P8P_SELECT_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState, theme }) => {
+ //Определяем вариант
+ const variant = ownerState["data-variant"] || "primary";
+ //Возвращаем стили варианта
+ return P8P_SELECTS(theme)[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_table_cell_variants.js b/app/theme/variants/p8p_table_cell_variants.js
new file mode 100644
index 0000000..7120506
--- /dev/null
+++ b/app/theme/variants/p8p_table_cell_variants.js
@@ -0,0 +1,93 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики TableCell
+*/
+
+//---------
+//Константы
+//---------
+
+//Общие стили
+const STYLES = {
+ CELL_WIDTH: width => ({
+ ...(width ? { minWidth: width, maxWidth: width } : {})
+ }),
+ CELL_DEF: (fixed, theme, left, isHeader = false) => ({
+ ...(fixed
+ ? {
+ position: "sticky",
+ left,
+ zIndex: isHeader ? 1000 : 500
+ }
+ : {})
+ })
+};
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные ячейки таблицы
+export const P8P_TABLE_CELLS = ({ theme, width, fixed, left }) => ({
+ primary: {},
+ P8PGroupHeader: {
+ ...theme.typography.P8PBody2,
+ ...STYLES.CELL_WIDTH(width),
+ ...(fixed ? { position: "sticky", left: 0 } : {})
+ },
+ P8PHeaderExpand: {
+ ...theme.typography.P8PColumn,
+ ...STYLES.CELL_WIDTH("60px"),
+ ...STYLES.CELL_DEF(fixed, theme, 0, true),
+ backgroundColor: theme.palette.P8PBackground.tableHeader
+ },
+ P8PHeaderCell: {
+ ...theme.typography.P8PColumn,
+ ...STYLES.CELL_WIDTH(width),
+ ...STYLES.CELL_DEF(fixed, theme, left, true),
+ backgroundColor: theme.palette.P8PBackground.tableHeader
+ },
+ P8PExpand: {
+ ...theme.typography.P8PBody2,
+ ...STYLES.CELL_WIDTH("60px"),
+ ...STYLES.CELL_DEF(fixed, theme, 0),
+ backgroundColor: "inherit"
+ },
+ P8PCell: {
+ ...theme.typography.P8PBody2,
+ ...STYLES.CELL_WIDTH(width),
+ ...STYLES.CELL_DEF(fixed, theme, left),
+ backgroundColor: "inherit"
+ },
+ P8PExpandContainer: {
+ paddingBottom: 0,
+ paddingTop: 0,
+ paddingLeft: 0,
+ paddingRight: 0,
+ ...STYLES.CELL_DEF(fixed, theme, left)
+ }
+});
+
+//Наименование кастомных ячеек таблиц
+export const P8P_TABLE_CELL_VARIANT = {
+ GROUP_HEADER: "P8PGroupHeader",
+ HEADER_EXPAND: "P8PHeaderExpand",
+ HEADER_CELL: "P8PHeaderCell",
+ EXPAND: "P8PExpand",
+ CELL: "P8PCell",
+ EXPAND_CONTAINER: "P8PExpandContainer"
+};
+
+//Кастомная стилистика компонента
+export const P8P_TABLE_CELL_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState, theme }) => {
+ //Определяем вариант
+ const variant = ownerState?.variant || "primary";
+ //Определяем доп. параметры
+ const { width, fixed, left } = ownerState["data-variant-props"] || {};
+ //Возвращаем стили варианта
+ return P8P_TABLE_CELLS({ theme, width, fixed, left })[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_table_head_variants.js b/app/theme/variants/p8p_table_head_variants.js
new file mode 100644
index 0000000..15fe169
--- /dev/null
+++ b/app/theme/variants/p8p_table_head_variants.js
@@ -0,0 +1,35 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики TableHead
+*/
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные заголовки таблицы
+export const P8P_TABLE_HEADS = {
+ primary: {},
+ P8PSticky: {
+ position: "sticky",
+ top: 0,
+ zIndex: 1000
+ }
+};
+
+//Наименование кастомных заголовков таблиц
+export const P8P_TABLE_HEAD_VARIANT = {
+ STICKY: "P8PSticky"
+};
+
+//Кастомная стилистика компонента
+export const P8P_TABLE_HEAD_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState }) => {
+ //Определяем вариант
+ const variant = ownerState?.variant || "primary";
+ //Возвращаем стили варианта
+ return P8P_TABLE_HEADS[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_table_row_variants.js b/app/theme/variants/p8p_table_row_variants.js
new file mode 100644
index 0000000..cfb6780
--- /dev/null
+++ b/app/theme/variants/p8p_table_row_variants.js
@@ -0,0 +1,33 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики TableRow
+*/
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные строки таблицы
+export const P8P_TABLE_ROWS = {
+ primary: {},
+ P8PPrimary: {
+ "&:last-child td, &:last-child th": { border: 0 }
+ }
+};
+
+//Наименование кастомных строк таблиц
+export const P8P_TABLE_ROW_VARIANT = {
+ PRIMARY: "P8PPrimary"
+};
+
+//Кастомная стилистика компонента
+export const P8P_TABLE_ROW_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState }) => {
+ //Определяем вариант
+ const variant = ownerState?.variant || "primary";
+ //Возвращаем стили варианта
+ return P8P_TABLE_ROWS[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_table_variants.js b/app/theme/variants/p8p_table_variants.js
new file mode 100644
index 0000000..06e2b1b
--- /dev/null
+++ b/app/theme/variants/p8p_table_variants.js
@@ -0,0 +1,38 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики Table
+*/
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные таблицы
+export const P8P_TABLES = theme => ({
+ primary: {},
+ P8PPrimary: {
+ ".MuiTableRow-root:nth-of-type(even)": {
+ backgroundColor: theme.palette.P8PBackground.primary
+ },
+ ".MuiTableRow-root:nth-of-type(odd)": {
+ backgroundColor: theme.palette.P8PBackground.secondary
+ }
+ }
+});
+
+//Наименование кастомных таблиц
+export const P8P_TABLE_VARIANT = {
+ PRIMARY: "P8PPrimary"
+};
+
+//Кастомная стилистика компонента
+export const P8P_TABLE_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState, theme }) => {
+ //Определяем вариант
+ const variant = ownerState?.variant || "primary";
+ //Возвращаем стили варианта
+ return P8P_TABLES(theme)[variant];
+ }
+ }
+};
diff --git a/app/theme/variants/p8p_text_field_variants.js b/app/theme/variants/p8p_text_field_variants.js
new file mode 100644
index 0000000..ee862a0
--- /dev/null
+++ b/app/theme/variants/p8p_text_field_variants.js
@@ -0,0 +1,56 @@
+/*
+ Парус 8 - Панели мониторинга
+ Расширение стилистики TextField
+*/
+
+//----------------
+//Интерфейс модуля
+//----------------
+
+//Кастомные поля ввода
+export const P8P_TEXT_FIELDS = theme => ({
+ primary: {},
+ P8PPrimary: {
+ "& .MuiInputLabel-root": {
+ ...theme.typography.P8PInputLabel
+ },
+ "& .MuiOutlinedInput-notchedOutline": {
+ "& legend": {
+ fontFamily: theme.typography.P8PFontMontserrat
+ }
+ },
+ "& .MuiInputBase-input": {
+ ...theme.typography.P8PBody1
+ }
+ }
+});
+
+//Кастомные списки выбора
+export const P8P_TEXT_FIELD_OPTIONS = theme => ({
+ primary: {},
+ P8PPrimary: { ...theme.typography.P8PBody1 }
+});
+
+//Наименование кастомных полей ввода
+export const P8P_TEXT_FIELD_VARIANT = {
+ PRIMARY: "P8PPrimary"
+};
+
+//Кастомная стилистика компонента
+export const P8P_TEXT_FIELD_OVERRIDES = {
+ styleOverrides: {
+ root: ({ ownerState, theme }) => {
+ //Определяем вариант
+ const variant = ownerState["data-variant"] || "primary";
+ //Возвращаем стили варианта
+ return P8P_TEXT_FIELDS(theme)[variant];
+ },
+ option: ({ ownerState, theme }) => {
+ //Определяем вариант
+ const variant = ownerState["data-variant"] || "primary";
+ console.log({ option: P8P_TEXT_FIELD_OPTIONS(theme)[variant] });
+ //Возвращаем стили варианта
+ return P8P_TEXT_FIELD_OPTIONS(theme)[variant];
+ }
+ }
+};