109 lines
4.7 KiB
JavaScript

/*
Парус 8 - Панели мониторинга - ТОиР - Прогнозирование технического состояния
Закладка администрирования
*/
//---------------------
//Подключение библиотек
//---------------------
import React, { useState, useEffect } from "react"; //Классы React
import { Box, Grid, Stack, Icon, Button } from "@mui/material"; //Интерфейсные компоненты
import { EquipDataSelectionList, EquipDataSelectionClassMachineList, EquipDataSelectionClassMachineCard } from "./admin_tab_layout"; //Вспомогательные компоненты и вёрстка
import {
DS_RN_DEFAULT,
useEquipDataSelectionList,
useEquipDataSelectionClassMachineList,
useEquipDataSelectionClassMachineFilesList,
useEquipDataSelectionClassMachineModelsList
} from "./admin_tab_hooks"; //Вспомогательные хуки
//---------
//Константы
//---------
//Стили
const STYLES = {
DATA_SELECTION_STACK: { alignItems: "center" },
CLASS_MACHINE_ADD_BUTTON: { margin: "5px" }
};
//-----------
//Тело модуля
//-----------
//Закладка администрирования
const AdminTab = () => {
//Собственное состояние - выбранная выборка данных
const [equipDataSelection, setDataSelection] = useState(DS_RN_DEFAULT);
//Собственное состояние - выбранный класс оборудования
const [equipDataSelectionClassMachine, setDataSelectionClassMachine] = useState(null);
//Загрузка списка выборок данных
const { equipDataSelectionList } = useEquipDataSelectionList();
//Загрузка классов оборудования выбранной выборки данных
const { equipDataSelectionClassMachineList } = useEquipDataSelectionClassMachineList(equipDataSelection);
//Загрузка файлов класса оборудования
const { equipDataSelectionClassMachineFilesList } = useEquipDataSelectionClassMachineFilesList(equipDataSelectionClassMachine);
//Загрузка файлов класса оборудования
const { equipDataSelectionClassMachineModelsList } = useEquipDataSelectionClassMachineModelsList(equipDataSelectionClassMachine);
//При подключении компонента к странице
useEffect(() => {}, []);
//При смене выборки данных
const handleDataSelectionChange = value => {
setDataSelectionClassMachine(null);
setDataSelection(value);
};
//При нажатии на класс оборудования
const handleDataSelectionClassMachineClick = value => setDataSelectionClassMachine(value);
//Генерация содержимого
return (
<Box>
<Grid container>
<Grid item xs={12}>
<Stack direction="row" spacing={2} p={2} sx={STYLES.DATA_SELECTION_STACK}>
<EquipDataSelectionList list={equipDataSelectionList} value={equipDataSelection} onChange={handleDataSelectionChange} />
<Button variant="contained" startIcon={<Icon>add</Icon>}>
Добавить выборку
</Button>
</Stack>
</Grid>
<Grid item xs={12}>
<Grid container>
<Grid item xs={2} hidden={equipDataSelection == DS_RN_DEFAULT}>
<Button fullWidth startIcon={<Icon>add</Icon>} sx={STYLES.CLASS_MACHINE_ADD_BUTTON}>
Добавить класс
</Button>
<EquipDataSelectionClassMachineList
list={equipDataSelectionClassMachineList}
value={equipDataSelectionClassMachine}
onClick={handleDataSelectionClassMachineClick}
/>
</Grid>
<Grid item xs={10} hidden={equipDataSelectionClassMachine == null}>
<EquipDataSelectionClassMachineCard
filesList={equipDataSelectionClassMachineFilesList}
modelsList={equipDataSelectionClassMachineModelsList}
/>
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
);
};
//----------------
//Интерфейс модуля
//----------------
export { AdminTab };