P8-Panels/app/components/p8p_panels_menu.js
2023-09-24 22:22:48 +03:00

232 lines
7.8 KiB
JavaScript

/*
Парус 8 - Панели мониторинга
Компонент: Меню панелей
*/
//---------------------
//Подключение библиотек
//---------------------
import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import {
Button,
Typography,
Icon,
Box,
Card,
CardActions,
CardContent,
CardMedia,
Stack,
Grid,
Divider,
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText
} from "@mui/material"; //Интерфейсные компоненты
//---------
//Константы
//---------
//Типы меню
const VARIANT = {
DRAWER: "DRAWER",
GRID: "GRID"
};
//Стили
const STYLES = {
CONTAINER: {
display: "flex",
justifyContent: "center",
alignItems: "flex-start",
minHeight: "100vh"
},
TITLE: {
textTransform: "uppercase",
textAlign: "center",
fontWeight: "bold"
},
GRID: {
maxWidth: 1200,
direction: "row",
justifyContent: "left",
alignItems: "stretch"
},
PANEL_CARD: {
maxWidth: 400,
height: "100%",
flexDirection: "column",
display: "flex"
},
PANEL_CARD_MEDIA: {
height: 140
},
PANEL_CARD_CONTENT_TITLE: {
alignItems: "center"
},
PANEL_CARD_ACTIONS: {
marginTop: "auto",
display: "flex",
justifyContent: "flex-end",
alignItems: "flex-start"
}
};
//Структура элемента описания панели
const PANEL_SHAPE = PropTypes.shape({
name: PropTypes.string.isRequired,
caption: PropTypes.string.isRequired,
desc: PropTypes.string.isRequired,
group: PropTypes.string,
icon: PropTypes.string.isRequired,
path: PropTypes.string.isRequired,
preview: PropTypes.string.isRequired,
showInPanelsList: PropTypes.bool.isRequired,
url: PropTypes.string.isRequired
});
//--------------------------------
//Вспомогательные классы и функции
//--------------------------------
//Формирование групп
const getGroups = panels => {
let res = [];
let addDefaultGroup = false;
for (const panel of panels)
if (panel.showInPanelsList == true) {
if (panel.group && !res.includes(panel.group)) res.push(panel.group);
if (!panel.group) addDefaultGroup = true;
}
if (addDefaultGroup || res.length == 0) res.push(null);
return res;
};
//Формирование ссылок на панели
const getPanelsLinks = ({ variant, panels, selectedPanel, defaultGroupTytle, navigateCaption, onItemNavigate }) => {
//Получим группы
let grps = getGroups(panels);
//Построим ссылки
const panelsLinks = [];
for (const grp of grps) {
if (!(grps.length == 1 && grps[0] == null))
panelsLinks.push(
variant === VARIANT.GRID ? (
<Grid item xs={12} sm={12} md={12} lg={12} xl={12} key={grp}>
<Typography variant="h5" color="secondary">
{grp ? grp : defaultGroupTytle}
</Typography>
</Grid>
) : (
<Divider key={grp} />
)
);
for (const panel of panels) {
if (panel.showInPanelsList == true && ((grp && panel.group === grp) || (!grp && !panel.group)))
panelsLinks.push(
variant === VARIANT.GRID ? (
<Grid item xs={12} sm={6} md={4} lg={4} xl={4} key={panel.name}>
<Card sx={STYLES.PANEL_CARD}>
{panel.preview ? (
<CardMedia component="img" alt={panel.name} image={panel.preview} sx={STYLES.PANEL_CARD_MEDIA} />
) : null}
<CardContent>
<Stack gap={1} direction="row" sx={STYLES.PANEL_CARD_CONTENT_TITLE}>
{panel.icon ? <Icon>{panel.icon}</Icon> : null}
<Typography variant="h5">{panel.caption}</Typography>
</Stack>
<Typography variant="body2" color="text.secondary">
{panel.desc}
</Typography>
</CardContent>
<CardActions sx={STYLES.PANEL_CARD_ACTIONS}>
<Button size="large" onClick={() => (onItemNavigate ? onItemNavigate(panel) : null)}>
{navigateCaption}
</Button>
</CardActions>
</Card>
</Grid>
) : (
<ListItem key={panel.name} disablePadding>
<ListItemButton
selected={selectedPanel?.name === panel.name}
onClick={() => (onItemNavigate ? onItemNavigate(panel) : null)}
>
<ListItemIcon>
<Icon>{panel.icon}</Icon>
</ListItemIcon>
<ListItemText primary={panel.caption} />
</ListItemButton>
</ListItem>
)
);
}
}
//Вернём ссылки
return panelsLinks;
};
//-----------
//Тело модуля
//-----------
//Меню панелей - сдвигающееся боковое меню
const P8PPanelsMenuDrawer = ({ onItemNavigate, panels = [], selectedPanel } = {}) => {
//Формируем ссылки на панели
const panelsLinks = getPanelsLinks({ variant: VARIANT.DRAWER, panels, selectedPanel, onItemNavigate });
//Генерация содержимого
return <List sx={{ paddingTop: 0 }}>{panelsLinks}</List>;
};
//Контроль свойств - Меню панелей - сдвигающееся боковое меню
P8PPanelsMenuDrawer.propTypes = {
onItemNavigate: PropTypes.func,
panels: PropTypes.arrayOf(PANEL_SHAPE).isRequired,
selectedPanel: PANEL_SHAPE
};
//Меню панелей - грид
const P8PPanelsMenuGrid = ({ title, onItemNavigate, navigateCaption, panels = [], defaultGroupTytle } = {}) => {
//Формируем ссылки на панели
const panelsLinks = getPanelsLinks({ variant: VARIANT.GRID, panels, defaultGroupTytle, navigateCaption, onItemNavigate });
//Генерация содержимого
return (
<Box sx={STYLES.CONTAINER}>
<Grid container spacing={2} p={2} sx={STYLES.GRID}>
{title ? (
<Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
<Typography variant="h5" color="primary" sx={STYLES.TITLE}>
{title}
</Typography>
</Grid>
) : null}
{panelsLinks}
</Grid>
</Box>
);
};
//Контроль свойств - Меню панелей - грид
P8PPanelsMenuGrid.propTypes = {
title: PropTypes.string,
onItemNavigate: PropTypes.func,
navigateCaption: PropTypes.string.isRequired,
panels: PropTypes.arrayOf(PANEL_SHAPE).isRequired,
defaultGroupTytle: PropTypes.string.isRequired
};
//----------------
//Интерфейс модуля
//----------------
export { PANEL_SHAPE, P8PPanelsMenuDrawer, P8PPanelsMenuGrid };