popovspiridon99/universal_is
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

NestJS backend rewrite; migrate client to FluentUI V9

Browse Source
This commit is contained in:
popovspiridon99
2025-09-18 15:48:08 +09:00
parent 32ff36a12c
commit 34529cea68
62 changed files with 5642 additions and 3679 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

3308
client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

18
client/package.json
View File

@ -13,31 +13,20 @@
"dependencies": {
"-": "^0.0.1",
"@dnd-kit/core": "^6.3.1",
"@fluentui/react-components": "^9.69.0",
"@fluentui/react-icons": "^2.0.309",
"@fontsource/inter": "^5.0.19",
"@fontsource/open-sans": "^5.0.28",
"@hello-pangea/dnd": "^17.0.0",
"@js-preview/docx": "^1.6.2",
"@js-preview/excel": "^1.7.8",
"@js-preview/pdf": "^2.0.2",
"@mantine/carousel": "^7.13.0",
"@mantine/charts": "^7.13.0",
"@mantine/code-highlight": "^7.13.0",
"@mantine/core": "^7.13.0",
"@mantine/dates": "^7.13.0",
"@mantine/dropzone": "^7.13.0",
"@mantine/form": "^7.13.0",
"@mantine/hooks": "^7.13.0",
"@mantine/modals": "^7.13.0",
"@mantine/notifications": "^7.13.0",
"@mantine/nprogress": "^7.13.0",
"@mantine/spotlight": "^7.13.0",
"@mantine/tiptap": "^7.13.0",
"@tabler/icons-react": "^3.17.0",
"@tanstack/react-table": "^8.20.5",
"@techstark/opencv-js": "^4.10.0-release.1",
"@tiptap/extension-link": "^2.7.3",
"@tiptap/react": "^2.7.3",
"@tiptap/starter-kit": "^2.7.3",
"@types/ol-ext": "npm:@siedlerchr/types-ol-ext@^3.5.0",
"@uidotdev/usehooks": "^2.4.1",
"ag-grid-react": "^33.3.2",
@ -46,9 +35,7 @@
"buffer": "^6.0.3",
"dayjs": "^1.11.13",
"docx-templates": "^4.13.0",
"embla-carousel-react": "^8.3.0",
"file-type": "^19.0.0",
"html2canvas": "^1.4.1",
"jspdf": "^2.5.2",
"ol": "^10.0.0",
"ol-ext": "^4.0.23",
@ -57,7 +44,6 @@
"react-dom": "^18.2.0",
"react-hook-form": "^7.52.0",
"react-router-dom": "^6.23.1",
"recharts": "^2.12.7",
"swr": "^2.2.5",
"uuid": "^11.0.3",
"zustand": "^4.5.2"

11
client/src/App.tsx
View File

@ -4,8 +4,8 @@ import MainLayout from "./layouts/MainLayout"
import { initAuth, useAuthStore } from "./store/auth"
import { useEffect, useState } from "react"
import DashboardLayout from "./layouts/DashboardLayout"
import { Box, Loader } from "@mantine/core"
import { pages } from "./constants/app"
import { Spinner } from "@fluentui/react-components"
function App() {
const auth = useAuthStore()
@ -24,11 +24,14 @@ function App() {
if (isLoading) {
return (
<Loader />
<Spinner />
)
} else {
return (
<Box w='100%' h='100vh'>
<div style={{
width: '100%',
height: '100vh'
}}>
<Router>
<Routes>
<Route element={<MainLayout />}>
@ -45,7 +48,7 @@ function App() {
</Route>
</Routes>
</Router>
</Box>
</div>
)
}
}

8
client/src/components/CardInfo/CardInfo.tsx
View File

@ -1,4 +1,4 @@
import { Divider, Flex, Text } from '@mantine/core';
import { Divider, Text } from '@fluentui/react-components';
import { PropsWithChildren } from 'react'
interface CardInfoProps extends PropsWithChildren {
@ -10,14 +10,14 @@ export default function CardInfo({
label
}: CardInfoProps) {
return (
<Flex direction='column' gap='sm' p='sm'>
<Text fw={600}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', padding: '1rem' }}>
<Text weight='semibold'>
{label}
</Text>
<Divider />
{children}
</Flex>
</div>
)
}

26
client/src/components/CardInfo/CardInfoChip.tsx
View File

@ -1,26 +0,0 @@
import { Chip } from '@mantine/core';
import { ReactElement } from 'react'
interface CardInfoChipProps {
status: boolean;
label: string;
iconOn: ReactElement
iconOff: ReactElement
}
export default function CardInfoChip({
status,
label,
iconOn,
iconOff
}: CardInfoChipProps) {
return (
<Chip
icon={status ? iconOn : iconOff}
color={status ? "success" : "error"}
variant='outline'
>
{label}
</Chip>
)
}

9
client/src/components/CardInfo/CardInfoLabel.tsx
View File

@ -1,4 +1,5 @@
import { Flex, Text } from '@mantine/core';
import { Text } from "@fluentui/react-components";
interface CardInfoLabelProps {
label: string;
value: string | number;
@ -9,14 +10,14 @@ export default function CardInfoLabel({
value
}: CardInfoLabelProps) {
return (
<Flex justify='space-between' align='center'>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Text>
{label}
</Text>
<Text fw={600}>
<Text weight='semibold'>
{value}
</Text>
</Flex>
</div>
)
}

324
client/src/components/CustomTable.tsx
View File

@ -1,205 +1,195 @@
import { Badge, Button, Flex, Input, Modal, ScrollAreaAutosize, Select, Stack, Table, TextInput } from '@mantine/core';
import { Cell, ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
import { useEffect, useMemo, useState } from 'react';
import styles from './CustomTable.module.scss'
import { useRoles } from '../hooks/swrHooks';
import { IRole } from '../interfaces/role';
import { useState } from 'react';
import { IconPlus } from '@tabler/icons-react';
import { CreateField } from '../interfaces/create';
import { AxiosResponse } from 'axios';
import FormFields from './FormFields';
import { useDisclosure } from '@mantine/hooks';
import { Badge, Button, createTableColumn, DataGrid, DataGridBody, DataGridCell, DataGridHeader, DataGridHeaderCell, DataGridRow, Dialog, DialogSurface, DialogTitle, DialogTrigger, Input, Select, TableCellLayout, TableColumnDefinition } from '@fluentui/react-components';
import { IColumn } from '../interfaces/DataGrid/columns';
type CustomTableProps<T> = {
data: T[];
columns: ColumnDef<T>[];
data: (T & { id: number })[];
columns: IColumn[];
createFields?: CreateField[];
submitHandler?: (data: T) => Promise<AxiosResponse>
onEditCell?: (rowId: number, columnId: string, value: any) => any
}
const CustomTable = <T extends object>({
data: initialData,
columns,
createFields,
submitHandler
submitHandler,
}: CustomTableProps<T>) => {
const [data, setData] = useState<T[]>(initialData);
const [data, setData] = useState<(T & { id: number })[]>(initialData);
const [searchText, setSearchText] = useState('');
const [editingCell, setEditingCell] = useState<{ rowIndex: string | number | null, columnId: string | number | null }>({ rowIndex: null, columnId: null });
const tableColumns = useMemo(() => columns, [columns]);
const [editingCell, setEditingCell] = useState<{
rowId: number | null
columnId: string | null
}>({ rowId: null, columnId: null })
// Function to handle cell edit
const handleEditCell = (
rowIndex: number,
columnId: keyof T,
value: T[keyof T]
) => {
const updatedData = [...data];
updatedData[rowIndex][columnId] = value;
setData(updatedData);
//setEditingCell({ rowIndex: null, columnId: null });
};
const filteredData = useMemo(() => {
if (!searchText) return data;
return data.filter((row) =>
Object.values(row).some((value) =>
value?.toString().toLowerCase().includes(searchText.toLowerCase())
const handleEditCell = (rowId: number, columnId: string, value: any) => {
setData((prev) =>
prev.map((row) =>
row.id === rowId ? { ...row, [columnId]: value } : row
)
)
);
}, [data, searchText])
const table = useReactTable({
data: filteredData,
columns: tableColumns,
getCoreRowModel: getCoreRowModel(),
columnResizeMode: "onChange",
});
const [opened, { open, close }] = useDisclosure(false);
return (
<Stack h='100%'>
{createFields && submitHandler &&
<Modal opened={opened} onClose={close} title="Добавление объекта" centered>
<FormFields
fields={createFields}
submitHandler={submitHandler}
/>
</Modal>
}
<Flex w='100%' gap='sm'>
<TextInput
const columnDefinitions: TableColumnDefinition<any>[] = columns.map(column => (
createTableColumn<any>({
columnId: column.name,
renderHeaderCell: () => column.header,
renderCell: (item) => {
const isEditing = editingCell.rowId === item.id && editingCell.columnId === column.name;
switch (column.type) {
case 'number':
return (
<TableCellLayout
truncate
onDoubleClick={() =>
setEditingCell({ rowId: item.id, columnId: column.name })
}
>
{isEditing ? (
<Input
value={item[column.name]}
onChange={(_, d) => handleEditCell?.(item.id, column.name, d.value)}
onBlur={() => setEditingCell({ rowId: null, columnId: null })}
autoFocus
/>
) : (
item[column.name]
)}
</TableCellLayout>
)
case 'string':
return (
<TableCellLayout
truncate
onDoubleClick={() =>
setEditingCell({ rowId: item.id, columnId: column.name })
}
>
{isEditing ? (
<Input
value={item[column.name]}
onChange={(_, d) => handleEditCell?.(item.id, column.name, d.value)}
onBlur={() => setEditingCell({ rowId: null, columnId: null })}
autoFocus
/>
) : (
item[column.name]
)}
</TableCellLayout>
)
case 'boolean':
return (
<TableCellLayout onDoubleClick={() =>
setEditingCell({ rowId: item.id, columnId: column.name })
}>
{isEditing ? (
<Select
value={item[column.name]}
onChange={(_, d) => handleEditCell?.(item.id, column.name, d.value)}
onBlur={() => setEditingCell({ rowId: null, columnId: null })}>
<option value='true'>Активен</option>
<option value='false'>Неактивен</option>
</Select>
) : (
<Badge color={JSON.parse(item[column.name]) === true ? 'success' : 'danger'}>
{JSON.parse(item[column.name]) === true ? 'Активен' : 'Неактивен'}
</Badge>
)}
</TableCellLayout>
)
case 'dictionary':
return (
<TableCellLayout
onDoubleClick={() =>
setEditingCell({ rowId: item.id, columnId: column.name })
}
>
{isEditing ? (
<Input
value={item[column.name]}
onChange={(_, d) => handleEditCell?.(item.id, column.name, d.value)}
onBlur={() => setEditingCell({ rowId: null, columnId: null })}
autoFocus
/>
) : (
item[column.name]
)}
</TableCellLayout>
)
}
},
})
))
return (
<div style={{
display: 'flex',
flexDirection: 'column',
gap: '1rem'
}}>
<div style={{
display: 'flex',
gap: '1rem'
}}>
<Input
placeholder="Поиск"
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
w='100%'
/>
{createFields && submitHandler &&
<Dialog>
<DialogTrigger>
<Button
leftSection={<IconPlus />}
onClick={open}
appearance='primary'
icon={<IconPlus />}
style={{ flexShrink: 0 }}
>
Добавить
</Button>
}
</Flex>
</DialogTrigger>
<ScrollAreaAutosize offsetScrollbars style={{ borderRadius: '4px' }}>
<Table stickyHeader striped withColumnBorders highlightOnHover className={styles.table}>
<Table.Thead className={styles.thead}>
{table.getHeaderGroups().map(headerGroup => (
<Table.Tr key={headerGroup.id} className={styles.tr}>
{headerGroup.headers.map((header) => (
<Table.Th key={header.id} className={styles.th} w={header.getSize()}>
{flexRender(header.column.columnDef.header, header.getContext())}
<div
className={styles.resize_handler}
onMouseDown={header.getResizeHandler()} //for desktop
onTouchStart={header.getResizeHandler()}
>
</div>
</Table.Th>
))}
</Table.Tr>
))}
</Table.Thead>
<Table.Tbody className={styles.tbody}>
{table.getRowModel().rows.map((row, rowIndex) => (
<Table.Tr key={row.id} className={styles.tr}>
{row.getVisibleCells().map(cell => {
const isEditing = editingCell.rowIndex === rowIndex && editingCell.columnId === cell.column.id;
return (
<Table.Td
key={cell.id}
onDoubleClick={() => setEditingCell({ rowIndex, columnId: cell.column.id })}
style={{ width: cell.column.getSize() }}
className={styles.td}
>
{isEditing ? (
<Input
type='text'
value={(data[rowIndex][cell.column.id as keyof T] as string)}
onChange={(e) => handleEditCell(rowIndex, (cell.column.id as keyof T), e.target.value as T[keyof T])}
onBlur={() => setEditingCell({ rowIndex: null, columnId: null })}
autoFocus
<DialogSurface>
<DialogTitle>Добавление объекта</DialogTitle>
<FormFields
fields={createFields}
submitHandler={submitHandler}
/>
) : (
<CellDisplay cell={cell} />
</DialogSurface>
</Dialog>
}
</div>
<DataGrid
items={data}
columns={columnDefinitions}
resizableColumns
focusMode="cell"
>
<DataGridHeader>
<DataGridRow>
{({ renderHeaderCell }) => (
<DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
)}
</Table.Td>
);
})}
</Table.Tr>
))}
</Table.Tbody>
</Table>
</ScrollAreaAutosize>
</Stack>
</DataGridRow>
</DataGridHeader>
<DataGridBody>
{({ item, rowId }) => (
<DataGridRow key={rowId}>
{({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
</DataGridRow>
)}
</DataGridBody>
</DataGrid>
</div>
);
};
type CellDisplayProps<T> = {
cell: Cell<T, unknown>;
}
const CellDisplay = <T extends object>({
cell
}: CellDisplayProps<T>) => {
const { roles } = useRoles()
const [roleOptions, setRoleOptions] = useState<{ label: string, value: string }[]>()
useEffect(() => {
if (Array.isArray(roles)) {
setRoleOptions(roles.map((role: IRole) => ({ label: role.name, value: role.id.toString() })))
}
}, [roles])
switch (cell.column.id) {
case 'activity':
return (
cell.getValue() ? (
<Badge fullWidth variant="light">
Активен
</Badge>
) : (
<Badge color="gray" fullWidth variant="light">
Отключен
</Badge>
)
)
case 'is_active':
return (
cell.getValue() ? (
<Badge fullWidth variant="light">
Активен
</Badge>
) : (
<Badge color="gray" fullWidth variant="light">
Отключен
</Badge>
)
)
case 'role_id':
return (
<Select
data={roleOptions}
value={Number(cell.getValue()).toString()}
variant="unstyled"
allowDeselect={false}
/>
)
default:
return (
flexRender(cell.column.columnDef.cell, cell.getContext())
)
}
}
export default CustomTable;

309
client/src/components/FolderViewer.tsx
View File

@ -4,23 +4,14 @@ import React, { useEffect, useState } from 'react'
import DocumentService from '../services/DocumentService'
import { mutate } from 'swr'
import FileViewer from './modals/FileViewer'
import { ActionIcon, Anchor, Breadcrumbs, Button, Divider, FileButton, Flex, Loader, MantineStyleProp, RingProgress, ScrollAreaAutosize, Stack, Table, Text } from '@mantine/core'
import { IconCancel, IconDownload, IconFile, IconFileFilled, IconFilePlus, IconFileUpload, IconFolderFilled, IconX } from '@tabler/icons-react'
import { IconCancel, IconDownload, IconFileUpload, IconX } from '@tabler/icons-react'
import { Breadcrumb, BreadcrumbButton, BreadcrumbDivider, BreadcrumbItem, Button, createTableColumn, DataGrid, DataGridBody, DataGridCell, DataGridHeader, DataGridHeaderCell, DataGridRow, Divider, Field, ProgressBar, Spinner, TableCellLayout } from '@fluentui/react-components'
import { DocumentAdd20Regular, DocumentColor, DocumentRegular, DocumentTextColor, FolderRegular, ImageColor, TableColor } from '@fluentui/react-icons'
interface DocumentProps {
doc: IDocument;
}
const FileItemStyle: MantineStyleProp = {
cursor: 'pointer',
display: 'flex',
width: '100%',
flexDirection: 'row',
gap: '8px',
alignItems: 'center',
padding: '8px'
}
const handleSave = async (file: Blob, filename: string) => {
const link = document.createElement('a')
link.href = window.URL.createObjectURL(file)
@ -30,6 +21,27 @@ const handleSave = async (file: Blob, filename: string) => {
window.URL.revokeObjectURL(link.href)
}
function getFileExtension(filename: string): string {
return filename.split('.').pop()?.toLowerCase() || '';
}
function handleDocFormatIcon(docName: string) {
const ext = getFileExtension(docName);
switch (ext) {
case 'docx':
return <DocumentTextColor />
case 'pdf':
return <DocumentTextColor color='red' />
case 'xlsx':
return <TableColor />
case 'jpg':
return <ImageColor />
default:
return <DocumentRegular />
}
}
function ItemDocument({ doc }: DocumentProps) {
const [shouldFetch, setShouldFetch] = useState(false)
@ -45,22 +57,16 @@ function ItemDocument({ doc }: DocumentProps) {
}, [shouldFetch, file, doc.name])
return (
<Flex>
<ActionIcon
onClick={(e) => {
<Button icon={isLoading ?
<Spinner size='tiny' />
:
<IconDownload />
} appearance='subtle' onClick={(e) => {
e.stopPropagation()
if (!isLoading) {
setShouldFetch(true)
}
}}
variant='subtle'>
{isLoading ?
<Loader size='sm' />
:
<IconDownload />
}
</ActionIcon>
</Flex>
}} />
)
}
@ -134,14 +140,32 @@ export default function FolderViewer() {
}
}
const fileInputRef = React.useRef<HTMLInputElement | null>(null);
const handleClick = () => {
fileInputRef.current?.click();
};
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files) {
// do what Mantine's onChange did
console.log("Selected files:", Array.from(e.target.files));
handleFileInput(Array.from(e.target.files))
}
};
if (foldersLoading || documentsLoading) {
return (
<Loader />
<Spinner />
)
}
return (
<ScrollAreaAutosize w={'100%'} h={'100%'} p={'sm'}>
<div style={{
width: '100%',
height: '100%',
padding: '1rem',
}}>
{fileViewerModal &&
<FileViewer
open={fileViewerModal}
@ -152,51 +176,74 @@ export default function FolderViewer() {
/>
}
<Stack>
<Breadcrumbs>
<Anchor
onClick={() => {
<div style={{
display: 'flex',
flexDirection: 'column',
height: '100%',
width: '100%',
gap: '1rem'
}}>
<Breadcrumb>
<BreadcrumbItem>
<BreadcrumbButton onClick={() => {
setCurrentFolder(null)
setBreadcrumbs([])
}}
>
Главная
</Anchor>
}}>Главная</BreadcrumbButton>
</BreadcrumbItem>
{breadcrumbs.map((breadcrumb, index) => (
<Anchor
key={breadcrumb.id}
onClick={() => handleBreadcrumbClick(index)}
>
{breadcrumb.name}
</Anchor>
<>
<BreadcrumbDivider />
<BreadcrumbItem key={breadcrumb.id}>
<BreadcrumbButton icon={<FolderRegular />} onClick={() => {
handleBreadcrumbClick(index)
}}>{breadcrumb.name}</BreadcrumbButton>
</BreadcrumbItem>
</>
))}
</Breadcrumbs>
</Breadcrumb>
{currentFolder &&
<Flex direction='column' gap='sm'>
<Flex direction='column' gap='sm' p='sm' style={{
<div style={{
display: 'flex',
flexDirection: 'column',
gap: '1rem'
}}>
<div style={{
display: 'flex',
flexDirection: 'column',
gap: '1rem',
padding: '1rem',
border: filesToUpload.length > 0 ? '1px dashed gray' : 'none',
borderRadius: '8px',
}}>
<Flex gap='sm'>
<FileButton multiple onChange={handleFileInput}>
{(props) => <Button variant='filled' leftSection={isUploading ? <Loader /> : <IconFilePlus />} {...props}>Добавить</Button>}
</FileButton>
<div style={{ display: 'flex', gap: '1rem' }}>
<input
type="file"
multiple
ref={fileInputRef}
style={{ display: "none" }}
onChange={handleFileChange}
/>
<Button appearance="primary" icon={<DocumentAdd20Regular />} onClick={handleClick}>
Добавить
</Button>
{filesToUpload.length > 0 &&
<>
<Button
variant='filled'
leftSection={isUploading ? <RingProgress sections={[{ value: uploadProgress, color: 'blue' }]} /> : <IconFileUpload />}
appearance='primary'
icon={<IconFileUpload />}
onClick={uploadFiles}
disabled={isUploading}
>
Загрузить все
</Button>
<Button
variant='outline'
leftSection={<IconCancel />}
appearance='outline'
icon={<IconCancel />}
onClick={() => {
setFilesToUpload([])
}}
@ -205,88 +252,114 @@ export default function FolderViewer() {
</Button>
</>
}
</Flex>
</div>
{isUploading &&
<Field validationMessage={"Загрузка файлов..."} validationState='none'>
<ProgressBar value={uploadProgress} />
</Field>
}
<Divider />
{filesToUpload.length > 0 &&
<Flex direction='column'>
<div style={{
display: 'flex',
flexDirection: 'column'
}}>
{filesToUpload.map((file, index) => (
<Flex key={index} p='8px'>
<Flex gap='sm' direction='row' align='center'>
<IconFile />
<Text>{file.name}</Text>
</Flex>
<div style={{
display: 'flex',
}} key={index}>
<Button appearance='transparent' icon={<DocumentColor />}>
{file.name}
</Button>
<ActionIcon onClick={() => {
<Button style={{ marginLeft: 'auto' }} appearance='subtle' icon={<IconX />} onClick={() => {
setFilesToUpload(prev => {
return prev.filter((_, i) => i != index)
})
}} ml='auto' variant='subtle'>
<IconX />
</ActionIcon>
</Flex>
}} />
</div>
))}
</Flex>
</div>
}
</Flex>
</Flex>
</div>
</div>
}
<Table
<div style={{
width: '100%',
overflow: 'auto'
}}>
<DataGrid
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
bg={dragOver ? 'rgba(0, 0, 0, 0.1)' : 'inherit'}
highlightOnHover>
<Table.Thead>
<Table.Tr>
<Table.Th>Название</Table.Th>
<Table.Th p={0}>Дата создания</Table.Th>
<Table.Th p={0}></Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>
{currentFolder ? (
documents?.map((doc: IDocument, index: number) => (
<Table.Tr key={doc.id} onClick={() => handleDocumentClick(index)} style={{ cursor: 'pointer' }}>
<Table.Td p={0}>
<Flex style={FileItemStyle}>
<IconFileFilled />
{doc.name}
</Flex>
</Table.Td>
<Table.Td p={0}>
{new Date(doc.create_date).toLocaleDateString()}
</Table.Td>
<Table.Td p={0}>
<ItemDocument
doc={doc}
/>
</Table.Td>
</Table.Tr>
))
) : (
folders?.map((folder: IDocumentFolder) => (
<Table.Tr key={folder.id} onClick={() => handleFolderClick(folder)} style={{ cursor: 'pointer' }}>
<Table.Td p={0}>
<Flex style={FileItemStyle}>
<IconFolderFilled />
{folder.name}
</Flex>
</Table.Td>
<Table.Td p={0} align='left'>
{new Date(folder.create_date).toLocaleDateString()}
</Table.Td>
<Table.Td p={0}>
</Table.Td>
</Table.Tr>
))
style={{ backgroundColor: dragOver ? 'rgba(0, 0, 0, 0.1)' : 'inherit' }}
items={currentFolder
? (documents ?? []).map((doc: IDocument) => ({ kind: "doc", data: doc }))
: (folders ?? []).map((folder: IDocumentFolder) => ({ kind: "folder", data: folder }))}
columns={[
createTableColumn({
columnId: "name",
renderHeaderCell: () => "Название",
renderCell: (item) => (
<TableCellLayout truncate media={item.kind === "doc" ? handleDocFormatIcon(item.data.name) : <FolderRegular />}>
{item.data.name}
</TableCellLayout>
),
}),
createTableColumn({
columnId: "date",
renderHeaderCell: () => "Дата создания",
renderCell: (item) =>
new Date(item.data.create_date).toLocaleDateString(),
}),
createTableColumn({
columnId: "actions",
renderHeaderCell: () => "",
renderCell: (item) => {
if (item.kind === "doc") {
// replace with your <ItemDocument doc={doc} />
return <ItemDocument doc={item.data} />;
}
return null;
},
}),
]}
focusMode="cell"
resizableColumns
getRowId={(item) => item.data.id}
>
<DataGridHeader>
<DataGridRow>
{({ renderHeaderCell }) => (
<DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
)}
</Table.Tbody>
</Table>
</Stack>
</ScrollAreaAutosize>
</DataGridRow>
</DataGridHeader>
<DataGridBody>
{({ item, rowId }: { item: { kind: string, data: any }, rowId: any }) => (
<DataGridRow
key={rowId}
style={{ cursor: "pointer" }}
onClick={() => {
if (item.kind === "doc") {
const index = documents?.findIndex((d: any) => d.id === item.data.id) ?? -1;
handleDocumentClick(index);
} else {
handleFolderClick(item.data as IDocumentFolder);
}
}}
>
{({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
</DataGridRow>
)}
</DataGridBody>
</DataGrid>
</div>
</div>
</div>
)
}

21
client/src/components/FormFields.tsx
View File

@ -1,7 +1,7 @@
import { SubmitHandler, useForm } from 'react-hook-form'
import { CreateField } from '../interfaces/create'
import { AxiosResponse } from 'axios';
import { Button, Loader, Stack, Text, TextInput } from '@mantine/core';
import { Button, Field, Input, Spinner, Text } from '@fluentui/react-components';
interface Props {
title?: string;
@ -51,20 +51,17 @@ function FormFields({
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Stack gap='sm' w='100%'>
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }}>
{title.length > 0 &&
<Text size="xl" fw={500}>
<Text size={500} weight='semibold'>
{title}
</Text>
}
{fields.map((field: CreateField) => {
return (
<TextInput
key={field.key}
label={field.headerName || field.key.charAt(0).toUpperCase() + field.key.slice(1)}
//placeholder="Your name"
type={field.inputType ? field.inputType : 'text'}
<Field key={field.key} validationState={errors[field.key]?.message ? 'error' : 'none'} label={field.headerName || field.key.charAt(0).toUpperCase() + field.key.slice(1)}>
<Input type={field.inputType ? field.inputType : 'text'}
{...register(field.key, {
required: field.required ? `${field.headerName} обязателен` : false,
validate: (val: string | boolean) => {
@ -75,18 +72,16 @@ function FormFields({
}
},
})}
radius="md"
required={field.required || false}
error={errors[field.key]?.message}
errorProps={errors[field.key]}
/>
</Field>
)
})}
<Button disabled={isSubmitting || Object.keys(dirtyFields).length === 0 || !isValid} type='submit'>
{isSubmitting ? <Loader size={16} /> : submitButtonText}
{isSubmitting ? <Spinner size='extra-small' /> : submitButtonText}
</Button>
</Stack>
</div>
</form>
)
}

62
client/src/components/ServerData.tsx
View File

@ -1,40 +1,46 @@
import { IServer } from '../interfaces/servers'
import { useServerIps } from '../hooks/swrHooks'
import { Flex, Table } from '@mantine/core'
import CustomTable from './CustomTable'
function ServerData({ id }: IServer) {
const { serverIps } = useServerIps(id, 0, 10)
const serverIpsColumns = [
{ field: 'id', headerName: 'ID', type: 'number' },
{ field: 'server_id', headerName: 'Server ID', type: 'number' },
{ field: 'name', headerName: 'Название', type: 'string' },
{ field: 'is_actual', headerName: 'Действителен', type: 'boolean' },
{ field: 'ip', headerName: 'IP', type: 'string' },
{ field: 'servername', headerName: 'Название сервера', type: 'string' },
]
return (
<Flex direction='column' p='sm'>
<div style={{ display: 'flex', flexDirection: 'column', padding: '1rem' }}>
{serverIps &&
<Table highlightOnHover>
<Table.Thead>
<Table.Tr>
{serverIpsColumns.map(column => (
<Table.Th key={column.field}>{column.headerName}</Table.Th>
))}
</Table.Tr>
</Table.Thead>
<Table.Tbody>
<Table.Tr>
{serverIpsColumns.map(column => (
<Table.Td key={column.field}>{serverIps ? serverIps[column.field] : ''}</Table.Td>
))}
</Table.Tr>
</Table.Tbody>
</Table>
<CustomTable data={serverIps} columns={[
{
name: 'id',
header: 'ID',
type: "number"
},
{
name: 'server_id',
header: 'Server ID',
type: "number"
},
{
name: 'name',
header: 'Название',
type: "string"
},
{
name: 'is_actual',
header: 'Действителен',
type: "boolean"
},
{
name: 'ip',
header: 'IP',
type: "string"
},
{
name: 'servername',
header: 'Название сервера',
type: "string"
}
</Flex>
]} />}
</div>
)
}

77
client/src/components/ServerHardware.tsx
View File

@ -1,7 +1,8 @@
import { useState } from 'react'
import { useHardwares, useServers } from '../hooks/swrHooks'
import { Autocomplete, CloseButton, Loader, Table } from '@mantine/core'
import { IServer } from '../interfaces/servers'
import { Combobox, Option, Spinner } from '@fluentui/react-components'
import CustomTable from './CustomTable'
export default function ServerHardware() {
const [selectedOption, setSelectedOption] = useState<number | undefined>(undefined)
@ -9,64 +10,40 @@ export default function ServerHardware() {
const { hardwares, isLoading: serversLoading } = useHardwares(selectedOption, 0, 10)
const hardwareColumns = [
{ field: 'id', headerName: 'ID', type: 'number' },
{ field: 'name', headerName: 'Название', type: 'string' },
{ field: 'server_id', headerName: 'Server ID', type: 'number' },
{ field: 'servername', headerName: 'Название сервера', type: 'string' },
{ field: 'os_info', headerName: 'ОС', type: 'string' },
{ field: 'ram', headerName: 'ОЗУ', type: 'string' },
{ field: 'processor', headerName: 'Проц.', type: 'string' },
{ field: 'storages_count', headerName: 'Кол-во хранилищ', type: 'number' },
]
return (
<>
<form>
<Autocomplete
<Combobox
placeholder="Сервер"
flex={'1'}
data={servers ? servers.map((item: IServer) => ({ label: item.name, value: item.id.toString() })) : []}
onSelect={(e) => console.log(e.currentTarget.value)}
//onChange={(value) => setSearch(value)}
onOptionSubmit={(value) => setSelectedOption(Number(value))}
rightSection={
//search !== '' &&
(
<CloseButton
size="sm"
onMouseDown={(event) => event.preventDefault()}
onClick={() => {
//setSearch('')
setSelectedOption(undefined)
}}
aria-label="Clear value"
/>
)
style={{ flex: 1 }}
selectedOptions={selectedOption ? [selectedOption.toString()] : []}
onOptionSelect={(_, data) => {
if (data.optionValue) {
setSelectedOption(Number(data.optionValue));
}
//value={search}
/>
}}
>
{servers?.map((item: IServer) => (
<Option key={item.id} value={item.id.toString()}>
{item.name}
</Option>
))}
</Combobox>
</form>
{serversLoading ?
<Loader />
<Spinner />
:
<Table highlightOnHover>
<Table.Thead>
<Table.Tr>
{hardwareColumns.map(column => (
<Table.Th key={column.field}>{column.headerName}</Table.Th>
))}
</Table.Tr>
</Table.Thead>
<Table.Tbody>
<Table.Tr>
{hardwareColumns.map(column => (
<Table.Td key={column.field}>{hardwares ? hardwares[column.field] : ''}</Table.Td>
))}
</Table.Tr>
</Table.Tbody>
</Table>
<CustomTable data={hardwares} columns={[
{ name: 'id', header: 'ID', type: 'number' },
{ name: 'name', header: 'Название', type: 'string' },
{ name: 'server_id', header: 'Server ID', type: 'number' },
{ name: 'servername', header: 'Название сервера', type: 'string' },
{ name: 'os_info', header: 'ОС', type: 'string' },
{ name: 'ram', header: 'ОЗУ', type: 'string' },
{ name: 'processor', header: 'Проц.', type: 'string' },
{ name: 'storages_count', header: 'Кол-во хранилищ', type: 'number' },
]} />
}
</>
)

79
client/src/components/ServerIpsView.tsx
View File

@ -1,7 +1,8 @@
import { useEffect, useState } from 'react'
import { useServerIps, useServers } from '../hooks/swrHooks'
import { Autocomplete, CloseButton, Loader, Table } from '@mantine/core'
import { IServer } from '../interfaces/servers'
import { Combobox, Option, Spinner } from '@fluentui/react-components'
import CustomTable from './CustomTable'
export default function ServerIpsView() {
const [selectedOption, setSelectedOption] = useState<number | null>(null)
@ -9,68 +10,44 @@ export default function ServerIpsView() {
const { serverIps, isLoading: serversLoading } = useServerIps(selectedOption, 0, 10)
const serverIpsColumns = [
{ field: 'id', headerName: 'ID', type: 'number' },
{ field: 'server_id', headerName: 'Server ID', type: 'number' },
{ field: 'name', headerName: 'Название', type: 'string' },
{ field: 'is_actual', headerName: 'Действителен', type: 'boolean' },
{ field: 'ip', headerName: 'IP', type: 'string' },
{ field: 'servername', headerName: 'Название сервера', type: 'string' },
]
useEffect(() => {
console.log(serverIps)
}, [serverIps])
return (
<>
<form>
<Autocomplete
<Combobox
clearable
placeholder="Сервер"
flex={'1'}
data={servers ? servers.map((item: IServer) => ({ label: item.name, value: item.id.toString() })) : []}
onSelect={(e) => console.log(e.currentTarget.value)}
//onChange={(value) => setSearch(value)}
onOptionSubmit={(value) => setSelectedOption(Number(value))}
rightSection={
//search !== '' &&
(
<CloseButton
size="sm"
onMouseDown={(event) => event.preventDefault()}
onClick={() => {
//setSearch('')
style={{ flex: 1 }}
//onChange={(e) => setSearch(e.currentTarget.value)}
selectedOptions={selectedOption ? [selectedOption.toString()] : []}
onOptionSelect={(_, data) => {
if (data.optionValue) {
setSelectedOption(Number(data.optionValue));
} else {
setSelectedOption(null)
}}
aria-label="Clear value"
/>
)
}
//value={search}
/>
</form>
}}
>
{servers?.map((item: IServer) => (
<Option key={item.id} value={item.id.toString()}>
{item.name}
</Option>
))}
</Combobox>
{serversLoading ?
<Loader />
<Spinner />
:
<Table highlightOnHover>
<Table.Thead>
<Table.Tr>
{serverIpsColumns.map(column => (
<Table.Th key={column.field}>{column.headerName}</Table.Th>
))}
</Table.Tr>
</Table.Thead>
<Table.Tbody>
<Table.Tr
//bg={selectedRows.includes(element.position) ? 'var(--mantine-color-blue-light)' : undefined}
>
{serverIpsColumns.map(column => (
<Table.Td key={column.field}>{servers ? servers[column.field] : ''}</Table.Td>
))}
</Table.Tr>
</Table.Tbody>
</Table>
<CustomTable data={serverIps} columns={[
{ name: 'id', header: 'ID', type: 'number' },
{ name: 'server_id', header: 'Server ID', type: 'number' },
{ name: 'name', header: 'Название', type: 'string' },
{ name: 'is_actual', header: 'Действителен', type: 'boolean' },
{ name: 'ip', header: 'IP', type: 'string' },
{ name: 'servername', header: 'Название сервера', type: 'string' },
]} />
}
</>
)

36
client/src/components/ServerStorages.tsx
View File

@ -1,42 +1,26 @@
import { useState } from 'react'
import { IRegion } from '../interfaces/fuel'
import { useStorages } from '../hooks/swrHooks'
import { Loader, Table } from '@mantine/core'
import { Spinner } from '@fluentui/react-components'
import CustomTable from './CustomTable'
export default function ServerStorage() {
const [selectedOption] = useState<IRegion | null>(null)
const { storages, isLoading: serversLoading } = useStorages(selectedOption?.id, 0, 10)
const storageColumns = [
{ field: 'id', headerName: 'ID', type: 'number' },
{ field: 'hardware_id', headerName: 'Hardware ID', type: 'number' },
{ field: 'name', headerName: 'Название', type: 'string' },
{ field: 'size', headerName: 'Размер', type: 'string' },
{ field: 'storage_type', headerName: 'Тип хранилища', type: 'string' },
]
return (
<>
{serversLoading ?
<Loader />
<Spinner />
:
<Table highlightOnHover>
<Table.Thead>
<Table.Tr>
{storageColumns.map(column => (
<Table.Th key={column.field}>{column.headerName}</Table.Th>
))}
</Table.Tr>
</Table.Thead>
<Table.Tbody>
<Table.Tr>
{storageColumns.map(column => (
<Table.Td key={column.field}>{storages ? storages[column.field] : ''}</Table.Td>
))}
</Table.Tr>
</Table.Tbody>
</Table>
<CustomTable data={storages} columns={[
{ name: 'id', header: 'ID', type: 'number' },
{ name: 'hardware_id', header: 'Hardware ID', type: 'number' },
{ name: 'name', header: 'Название', type: 'string' },
{ name: 'size', header: 'Размер', type: 'string' },
{ name: 'storage_type', header: 'Тип хранилища', type: 'string' }
]} />
}
</>
)

88
client/src/components/ServersView.tsx
View File

@ -2,7 +2,8 @@ import { useState } from 'react'
import { IRegion } from '../interfaces/fuel'
import { useRegions, useServers } from '../hooks/swrHooks'
import { useDebounce } from '@uidotdev/usehooks'
import { Autocomplete, CloseButton, Table } from '@mantine/core'
import CustomTable from './CustomTable'
import { Combobox, Option } from '@fluentui/react-components'
export default function ServersView() {
const [search, setSearch] = useState<string | undefined>("")
@ -15,63 +16,46 @@ export default function ServersView() {
const { servers } = useServers(selectedOption, 0, 10)
const serversColumns = [
//{ field: 'id', headerName: 'ID', type: "number" },
{
field: 'name', headerName: 'Название', type: "string", editable: true,
},
{
field: 'region_id',
editable: true,
headerName: 'region_id',
flex: 1
}
]
return (
<>
<form>
<Autocomplete
<Combobox
clearable
placeholder="Район"
flex={'1'}
data={regions ? regions.map((item: IRegion) => ({ label: item.name, value: item.id.toString() })) : []}
onSelect={(e) => console.log(e.currentTarget.value)}
onChange={(value) => setSearch(value)}
onOptionSubmit={(value) => setSelectedOption(Number(value))}
rightSection={
search !== '' && (
<CloseButton
size="sm"
onMouseDown={(event) => event.preventDefault()}
onClick={() => {
setSearch('')
style={{ flex: 1 }}
onChange={(e) => setSearch(e.currentTarget.value)}
selectedOptions={selectedOption ? [selectedOption.toString()] : []}
onOptionSelect={(_, data) => {
if (data.optionValue) {
setSelectedOption(Number(data.optionValue));
} else {
setSelectedOption(null)
}}
aria-label="Clear value"
/>
)
}
value={search}
/>
</form>
<Table highlightOnHover>
<Table.Thead>
<Table.Tr>
{serversColumns.map(column => (
<Table.Th key={column.field}>{column.headerName}</Table.Th>
}}
>
{regions?.map((item: IRegion) => (
<Option key={item.id} value={item.id.toString()}>
{item.name}
</Option>
))}
</Table.Tr>
</Table.Thead>
<Table.Tbody>
<Table.Tr>
{serversColumns.map(column => (
<Table.Td key={column.field}>{servers ? servers[column.field] : ''}</Table.Td>
))}
</Table.Tr>
</Table.Tbody>
</Table>
</Combobox>
{servers &&
<CustomTable
data={servers}
columns={[
{
name: 'name',
header: 'Название',
type: "string",
//editable: true,
},
{
name: 'region_id',
//editable: true,
header: 'region_id',
type: 'dictionary'
}
]} />}
</>
)
}

33
client/src/components/Tree/ObjectTree.tsx
View File

@ -2,10 +2,9 @@ import { useMemo, useState } from 'react'
import useSWR from 'swr'
import { fetcher } from '../../http/axiosInstance'
import { BASE_URL } from '../../constants'
import { NavLink, Stack, Text } from '@mantine/core';
import { IconChevronDown } from '@tabler/icons-react';
import { setSelectedObjectType } from '../../store/map';
import { setCurrentObjectId, useObjectsStore } from '../../store/objects';
import { Text, Tree, TreeItem, TreeItemLayout } from '@fluentui/react-components';
const ObjectTree = ({
map_id
@ -52,14 +51,14 @@ const ObjectTree = ({
if (selectedDistrict) {
return (
<Stack gap={0}>
<div>
<TypeTree map_id={map_id} label='Существующие' value={'existing'} count={existingCount} objectList={existingObjectsList} planning={0} />
<TypeTree map_id={map_id} label='Планируемые' value={'planning'} count={planningCount} objectList={planningObjectsList} planning={1} />
</Stack>
</div>
)
} else {
return (
<Text size='xs'>Выберите регион и населённый пункт, чтобы увидеть список объектов.</Text>
<Text size={500}>Выберите регион и населённый пункт, чтобы увидеть список объектов.</Text>
)
}
@ -84,11 +83,17 @@ const TypeTree = ({
}: TypeTreeProps) => {
return (
<NavLink px='xs' py={0} label={`${label} ${count ? `(${count})` : ''}`}>
<Tree size="small" aria-label="Small Size Tree">
<TreeItem itemType="branch">
<TreeItemLayout>{`${label} ${count ? `(${count})` : ''}`}</TreeItemLayout>
<Tree>
{Array.isArray(objectList) && objectList.map(list => (
<ObjectList map_id={map_id} key={list.id} label={list.name} id={list.id} planning={planning} count={list.count} />
))}
</NavLink>
</Tree>
</TreeItem>
</Tree>
)
}
@ -120,15 +125,21 @@ const ObjectList = ({
const navLinks = useMemo(() => (
Array.isArray(data) ? data.map((type) => (
<NavLink key={type.object_id} label={type.caption ? type.caption : 'Без названия'} px='xs' py={0} onClick={() => setCurrentObjectId(map_id, type.object_id)} />
<TreeItem itemType='leaf' onClick={() => setCurrentObjectId(map_id, type.object_id)}>
<TreeItemLayout>{type.caption ? type.caption : 'Без названия'}</TreeItemLayout>
</TreeItem>
)) : null
), [data, map_id]);
return (
<NavLink onClick={() => setSelectedObjectType(map_id, id)} rightSection={<IconChevronDown size={14} />} px='xs' py={0} label={`${label} ${count ? `(${count})` : ''}`}>
<TreeItem itemType='branch' onClick={() => setSelectedObjectType(map_id, id)}>
<TreeItemLayout>{`${label} ${count ? `(${count})` : ''}`}</TreeItemLayout>
<Tree>
{navLinks}
</NavLink>
);
</Tree>
</TreeItem>
)
// return (
// <NavLink onClick={() => { setSelectedObjectType(map_id, id) }} rightSection={<IconChevronDown size={14} />} p={0} label={`${label} ${count ? `(${count})` : ''}`}>

318
client/src/components/map/MapComponent.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from 'react'
import { CSSProperties, useEffect, useRef, useState } from 'react'
import 'ol/ol.css'
import { Modify } from 'ol/interaction'
import { ImageStatic, Vector as VectorSource } from 'ol/source'
@ -14,8 +14,8 @@ import { addInteractions, handleImageDrop, loadFeatures, processFigure, processL
import useSWR, { SWRConfiguration } from 'swr'
import { fetcher } from '../../http/axiosInstance'
import { BASE_URL } from '../../constants'
import { ActionIcon, Autocomplete, CloseButton, Flex, Select as MantineSelect, MantineStyleProp, rem, useMantineColorScheme, Portal, Menu, Button, Group, Divider, LoadingOverlay, Stack, Container, Transition, } from '@mantine/core'
import { IconBoxMultiple, IconBoxPadding, IconChevronDown, IconChevronLeft, IconPlus, IconSearch, IconUpload, } from '@tabler/icons-react'
import { useMantineColorScheme } from '@mantine/core'
import { IconBoxMultiple, IconBoxPadding, IconChevronLeft, IconPlus, IconUpload, } from '@tabler/icons-react'
import { ICitySettings, IFigure, ILine } from '../../interfaces/gis'
import axios from 'axios'
import MapToolbar from './MapToolbar/MapToolbar'
@ -34,6 +34,8 @@ import GisService from '../../services/GisService'
import MapMode from './MapMode'
import { satMapsProviders, schemas } from '../../constants/map'
import MapPrint from './MapPrint/MapPrint'
import { Field, Menu, MenuButton, MenuList, MenuPopover, MenuTrigger, Combobox, Option, Button, Divider, Spinner, Portal } from '@fluentui/react-components'
import { IRegion } from '../../interfaces/fuel'
const swrOptions: SWRConfiguration = {
revalidateOnFocus: false
@ -177,7 +179,7 @@ const MapComponent = ({
})
}
const mapControlsStyle: MantineStyleProp = {
const mapControlsStyle: CSSProperties = {
borderRadius: '4px',
zIndex: '1',
backgroundColor: colorScheme === 'light' ? '#F0F0F0CC' : '#000000CC',
@ -381,7 +383,7 @@ const MapComponent = ({
useEffect(() => {
if (!selectedRegion) {
setSelectedRegion(id, null)
setSelectedRegion(id, undefined)
setSelectedYear(id, null)
}
}, [selectedRegion, selectedDistrict, id])
@ -468,73 +470,154 @@ const MapComponent = ({
<MapPrint id={id} mapElement={mapElement} />
{active &&
<Portal target='#header-portal'>
<Flex gap={'sm'} direction={'row'}>
<Autocomplete
form='search_object'
<Portal mountNode={document.querySelector('#header-portal')}>
<div style={{ display: 'flex', gap: '1rem' }}>
<Combobox
placeholder="Поиск"
flex={'1'}
data={searchData ? searchData.map((item: { value: string, id_object: string }) => ({ label: item.value, value: item.id_object.toString() })) : []}
//onSelect={(e) => console.log(e.currentTarget.value)}
onChange={(value) => setSearchObject(value)}
onOptionSubmit={(value) => setCurrentObjectId(id, value)}
rightSection={
searchObject !== '' && (
<CloseButton
size="sm"
onMouseDown={(event) => event.preventDefault()}
onClick={() => {
setSearchObject('')
}}
aria-label="Clear value"
/>
)
}
leftSection={<IconSearch size={16} />}
value={searchObject}
/>
<MantineSelect
placeholder="Регион"
flex={'1'}
data={regionsData ? regionsData.map((item: { name: string, id: number }) => ({ label: item.name, value: item.id.toString() })) : []}
onChange={(value) => setSelectedRegion(id, Number(value))}
clearable
onClear={() => setSelectedRegion(id, null)}
searchable
value={selectedRegion ? selectedRegion.toString() : null}
/>
<MantineSelect
placeholder="Населённый пункт"
flex={'1'}
data={districtsData ? districtsData.map((item: { name: string, id: number, district_name: string }) => ({ label: [item.name, item.district_name].join(' - '), value: item.id.toString() })) : []}
onChange={(value) => setSelectedDistrict(id, Number(value))}
clearable
onClear={() => { setSelectedDistrict(id, null) }}
searchable
value={selectedDistrict ? selectedDistrict.toString() : null}
/>
<MantineSelect placeholder='Схема' w='92px'
data={schemas.map(el => ({ label: el, value: el }))}
onChange={(e) => {
if (e) {
setSelectedYear(id, Number(e))
} else {
setSelectedYear(id, null)
onOptionSelect={(_ev, data) => {
if (data.optionValue) {
setCurrentObjectId(id, data.optionValue);
setSearchObject(
searchData?.find((item: any) => item.id_object.toString() === data.optionValue)?.value ?? ""
);
}
}}
onClear={() => setSelectedYear(id, null)}
value={selectedYear ? selectedYear?.toString() : null}
onChange={(e) => {
setSearchObject(e.currentTarget.value); // free typing like Mantine's onChange
}}
clearable
/>
style={{ minWidth: 'auto' }}
>
{searchData
? searchData.map((item: { value: string; id_object: string }) => (
<Option key={item.id_object} value={item.id_object.toString()}>
{item.value}
</Option>
))
: null}
</Combobox>
<Button variant={alignMode ? 'filled' : 'transparent'} onClick={() => setAlignMode(id, !alignMode)}>
<IconBoxPadding style={{ width: rem(20), height: rem(20) }} />
</Button>
<Combobox
placeholder="Регион"
clearable
// 👇 show label instead of id
value={
selectedRegion
? regionsData?.find((item: IRegion) => item.id === selectedRegion)?.name ?? ""
: ""
}
onOptionSelect={(_ev, data) => {
if (data.optionValue) {
setSelectedRegion(id, Number(data.optionValue));
} else {
setSelectedRegion(id, undefined);
}
}}
style={{ minWidth: 'auto' }}
>
{regionsData
? regionsData.map((item: { name: string; id: number }) => (
<Option key={item.id} value={item.id.toString()}>
{item.name}
</Option>
))
: null}
</Combobox>
<Menu position="bottom-end" transitionProps={{ transition: 'pop-top-right' }}>
<Combobox
placeholder="Населённый пункт"
clearable
value={
selectedDistrict
? districtsData?.find((item: { id: number }) => item.id === selectedDistrict)?.name +
" - " +
districtsData?.find((item: { id: number }) => item.id === selectedDistrict)?.district_name
: ""
}
onOptionSelect={(_ev, data) => {
if (data.optionValue) {
setSelectedDistrict(id, Number(data.optionValue));
} else {
setSelectedDistrict(id, null);
}
}}
style={{ minWidth: 'auto' }}
>
{districtsData
? districtsData.map(
(item: { name: string; id: number; district_name: string }) => (
<Option text={`${item.name} - ${item.district_name}`} key={item.id} value={item.id.toString()}>
{item.name} - {item.district_name}
</Option>
)
)
: null}
</Combobox>
<Combobox
placeholder="Схема"
clearable
style={{ width: "92px", minWidth: 'auto' }}
value={selectedYear ? selectedYear.toString() : ""}
onOptionSelect={(_ev, data) => {
if (data.optionValue) {
setSelectedYear(id, Number(data.optionValue));
} else {
setSelectedYear(id, null);
}
}}
>
{schemas.map((el) => (
<Option key={el} value={el}>
{el}
</Option>
))}
</Combobox>
<Button icon={<IconBoxPadding />} appearance={alignMode ? 'primary' : 'transparent'} onClick={() => setAlignMode(id, !alignMode)} />
<Menu persistOnItemClick positioning={{ autoSize: true }}>
<MenuTrigger disableButtonEnhancement>
<MenuButton appearance='subtle' icon={<IconBoxMultiple />}>Слои</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<Field>Настройка видимости слоёв</Field>
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
<Combobox
defaultValue={satMapsProviders.find(provider => provider.value === satMapsProvider)?.label ?? ""}
onOptionSelect={(_ev, data) => {
if (data.optionValue) {
setSatMapsProvider(id, data.optionValue as SatelliteMapsProvider);
}
}}
>
{satMapsProviders.map((provider) => (
<Option text={provider.label} key={provider.value} value={provider.value}>
{provider.label}
</Option>
))}
</Combobox>
</div>
<div style={{
display: 'flex',
}}>
<Button icon={<IconUpload />} appearance='transparent' onClick={() => submitOverlay(file, polygonExtent, rectCoords)} />
<Button icon={<IconPlus />} appearance='transparent' title='Добавить подложку' />
</div>
<MapLayers map={map} />
</MenuList>
</MenuPopover>
</Menu>
{/* <Menu position="bottom-end" transitionProps={{ transition: 'pop-top-right' }}>
<Menu.Target>
<Button variant='transparent'>
<Group gap={7} wrap='nowrap' style={{ flexShrink: 0 }} title='Слои'>
@ -562,68 +645,99 @@ const MapComponent = ({
<MapLayers map={map} />
</Flex>
</Menu.Dropdown>
</Menu>
</Flex>
</Portal>
</Menu> */}
</div>
</Portal >
}
<Container pos='absolute' w='100%' h='100%' p='0' fluid>
<Flex direction='column' w='100%' h='100%'>
<Flex w='100%' h='94%' p='xs' style={{ flexGrow: 1 }}>
<Stack w='100%' maw='380px'>
<Flex w='100%' h='100%' gap='xs'>
<div style={{ position: 'absolute', width: '100%', height: '100%' }}>
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', height: '100%' }}>
<div style={{ display: 'flex', width: '100%', height: '94%', padding: '0.5rem', flexGrow: 1 }}>
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', maxWidth: '380px' }}>
<div style={{ display: 'flex', width: '100%', height: '100%', gap: '0.5rem' }}>
{selectedRegion && selectedDistrict && selectedYear &&
<Flex direction='column' h={'100%'} w={leftPaneHidden ? '0px' : '100%'} style={{ ...mapControlsStyle, transition: 'width .3s ease' }}>
<div
style={{
...mapControlsStyle,
transition: 'width .3s ease',
display: 'flex',
flexDirection: 'column',
height: '100%',
width: leftPaneHidden ? '0px' : '100%',
overflow: 'hidden'
}}
>
<TabsPane defaultTab='objects' tabs={objectsPane} />
<Divider />
<TabsPane defaultTab='parameters' tabs={paramsPane} />
</Flex>
</div>
}
{!!selectedRegion && !!selectedDistrict && !!selectedYear &&
<Button p='0' variant='subtle' w='32' style={{ zIndex: '1' }} onClick={() => setLeftPaneHidden(!leftPaneHidden)}>
<IconChevronLeft size={16} style={{ transform: `${leftPaneHidden ? 'rotate(180deg)' : ''}` }} />
</Button>
<Button
icon={<IconChevronLeft size={16}
style={{
transform: `${leftPaneHidden ? 'rotate(180deg)' : ''}`,
}} />}
style={{
zIndex: '1',
display: 'flex',
height: 'min-content'
}}
appearance='subtle'
onClick={() => setLeftPaneHidden(!leftPaneHidden)}
/>
}
</Flex>
</Stack>
</div>
</div>
<Stack w='100%' align='center'>
<Stack style={mapControlsStyle} w='fit-content'>
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', alignItems: 'center' }} >
<div style={{ ...mapControlsStyle, display: 'flex', flexDirection: 'column', width: 'fit-content' }}>
<MapMode map_id={id} />
</Stack>
</Stack>
</div>
</div>
<Stack w='100%' maw='340px' align='flex-end' justify='space-between'>
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', maxWidth: '340px', alignItems: 'flex-end', justifyContent: 'space-between' }}>
{selectedRegion && selectedDistrict && selectedYear && mode === 'edit' &&
<MapToolbar map_id={id} />
}
<Transition
mounted={!!selectedRegion && !!selectedDistrict && !!selectedYear}
transition="slide-left"
duration={200}
timingFunction="ease"
>
{(styles) => <MapLegend style={styles} selectedDistrict={selectedDistrict} selectedYear={selectedYear} />}
</Transition>
</Stack>
</Flex>
{!!selectedRegion && !!selectedDistrict && !!selectedYear &&
<MapLegend selectedDistrict={selectedDistrict} selectedYear={selectedYear} />
}
</div>
</div>
<Flex w='100%'>
<div style={{ display: 'flex', width: '100%' }}>
<MapStatusbar
map_id={id}
mapControlsStyle={mapControlsStyle}
/>
</Flex>
</Flex>
</Container>
</div>
</div>
</div>
<Container pos='absolute' fluid p={0} w='100%' h='100%' mah='100%' ref={mapElement} onDragOver={(e) => e.preventDefault()} onDrop={(e) => handleImageDrop(e, id)}>
<div style={{ position: 'absolute', width: '100%', height: '100%', maxHeight: '100%' }} ref={mapElement} onDragOver={(e) => e.preventDefault()} onDrop={(e) => handleImageDrop(e, id)}>
<div ref={tooltipRef}></div>
</Container>
</div>
{(linesValidating || figuresValidating) && (
<div
style={{
position: "absolute",
inset: 0,
backgroundColor: "rgba(255, 255, 255, 0.6)",
display: "flex",
justifyContent: "center",
alignItems: "center",
zIndex: 9999,
}}
>
<Spinner size="large" label="Загрузка..." />
</div>
)}
<LoadingOverlay visible={linesValidating || figuresValidating} />
</>
)
}

18
client/src/components/map/MapLayers/MapLayers.tsx
View File

@ -1,4 +1,4 @@
import { Checkbox, Flex, NavLink, Slider, Stack } from '@mantine/core'
import { Checkbox, Slider, Text } from '@fluentui/react-components'
import BaseLayer from 'ol/layer/Base'
import Map from 'ol/Map'
import { useEffect, useState } from 'react'
@ -11,11 +11,11 @@ const MapLayers = ({
map
}: MapLayersProps) => {
return (
<Stack gap='0'>
<div style={{ display: 'flex', flexDirection: 'column' }}>
{map?.getLayers().getArray() && map?.getLayers().getArray().map((layer, index) => (
<LayerSetting key={index} index={index} layer={layer} />
))}
</Stack>
</div>
)
}
@ -40,21 +40,23 @@ const LayerSetting = ({
}, [opacity, layer])
return (
<Flex key={`layer-${index}`} gap='xs' align='center'>
<div style={{ display: 'flex', alignItems: 'center' }} key={`layer-${index}`}>
<Checkbox
checked={visible}
onChange={(e) => setVisible(e.currentTarget.checked)}
/>
<Slider
w='100%'
width='100%'
min={0}
max={1}
step={0.001}
value={opacity}
onChange={(value) => setOpacity(value)}
onChange={(_, data) => setOpacity(data.value)}
/>
<NavLink p={0} label={layer.get('name')} onClick={() => { console.log(layer.getLayerState()) }} />
</Flex>
<Text truncate size={300} onClick={() => { console.log(layer.getLayerState()) }}>
{layer.get('name')}
</Text>
</div>
)
}

73
client/src/components/map/MapLegend/MapLegend.tsx
View File

@ -1,18 +1,15 @@
import { Accordion, ActionIcon, Collapse, ColorSwatch, Flex, MantineStyleProp, ScrollAreaAutosize, Stack, Text, useMantineColorScheme } from '@mantine/core'
import { useMantineColorScheme } from '@mantine/core'
import useSWR from 'swr'
import { fetcher } from '../../../http/axiosInstance'
import { BASE_URL } from '../../../constants'
import { useDisclosure } from '@mantine/hooks'
import { IconChevronDown } from '@tabler/icons-react'
import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, ColorSwatch, Text } from '@fluentui/react-components'
const MapLegend = ({
selectedDistrict,
selectedYear,
style
}: {
selectedDistrict: number | null,
selectedYear: number | null,
style: MantineStyleProp
}) => {
const { colorScheme } = useMantineColorScheme()
@ -32,40 +29,42 @@ const MapLegend = ({
}
)
const [opened, { toggle }] = useDisclosure(false)
return (
<ScrollAreaAutosize maw='300px' w='100%' fz='xs' mt='auto' style={{ ...style, zIndex: 1, backdropFilter: 'blur(8px)', backgroundColor: colorScheme === 'light' ? '#FFFFFFAA' : '#000000AA', borderRadius: '4px' }}>
<Stack gap='sm' p='sm'>
<Flex align='center'>
<Text fz='xs'>
<div
style={{ overflow: 'auto', maxWidth: '300px', width: '100%', marginTop: 'auto', zIndex: 1, backdropFilter: 'blur(8px)', backgroundColor: colorScheme === 'light' ? '#FFFFFFAA' : '#000000AA', borderRadius: '4px' }}
>
<Accordion collapsible>
<AccordionItem value='existing'>
<AccordionHeader>
Легенда
</Text>
</AccordionHeader>
<ActionIcon ml='auto' variant='subtle' onClick={toggle} >
<IconChevronDown style={{ transform: opened ? 'rotate(0deg)' : 'rotate(180deg)' }} />
</ActionIcon>
</Flex>
<AccordionPanel>
<Accordion multiple collapsible>
<AccordionItem value='existing'>
<AccordionHeader>
Существующие
</AccordionHeader>
<Collapse in={opened}>
<Accordion defaultValue={['existing', 'planning']} multiple>
<Accordion.Item value='existing' key='existing'>
<Accordion.Control>Существующие</Accordion.Control>
<Accordion.Panel>
<AccordionPanel>
{existingObjectsList && <LegendGroup objectsList={existingObjectsList} border='solid' />}
</Accordion.Panel>
</Accordion.Item>
</AccordionPanel>
</AccordionItem>
<Accordion.Item value='planning' key='planning'>
<Accordion.Control>Планируемые</Accordion.Control>
<Accordion.Panel>
<AccordionItem value='planning'>
<AccordionHeader>
Планируемые
</AccordionHeader>
<AccordionPanel>
{planningObjectsList && <LegendGroup objectsList={planningObjectsList} border='dotted' />}
</Accordion.Panel>
</Accordion.Item>
</AccordionPanel>
</AccordionItem>
</Accordion>
</Collapse>
</Stack>
</ScrollAreaAutosize>
</AccordionPanel>
</AccordionItem>
</Accordion>
</div>
)
}
@ -89,15 +88,15 @@ const LegendGroup = ({
}
return (
<Stack gap={4}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
{objectsList.map(object => (
<Flex gap='xs' align='center' key={object.id}>
<ColorSwatch style={{ border: borderStyle() }} radius={0} size={16} color={`rgb(${object.r},${object.g},${object.b})`} />
<div style={{ display: 'flex', gap: '0.25rem', alignItems: 'center' }} key={object.id}>
<ColorSwatch size='extra-small' style={{ border: borderStyle() }} color={`rgb(${object.r},${object.g},${object.b})`} value={`rgb(${object.r},${object.g},${object.b})`} />
-
<Text fz='xs'>{object.name}</Text>
</Flex>
<Text size={200}>{object.name}</Text>
</div>
))}
</Stack>
</div>
)
}

30
client/src/components/map/MapLineTest.tsx
View File

@ -1,6 +1,5 @@
import { useEffect, useRef } from 'react'
import { useEffect, useRef, useState } from 'react'
import 'ol/ol.css'
import { Container, Stack, Tabs } from '@mantine/core'
import OlMap from 'ol/Map'
import { v4 as uuidv4 } from 'uuid'
import TileLayer from 'ol/layer/Tile'
@ -12,6 +11,7 @@ import VectorSource from 'ol/source/Vector'
import Feature from 'ol/Feature'
import { LineString } from 'ol/geom'
import { Stroke, Style, Text } from 'ol/style'
import { Tab, TabList } from '@fluentui/react-components'
const center = [14443331.466543002, 8878970.176309839]
@ -106,19 +106,21 @@ const MapLineTest = () => {
}
}, [])
const [selectedTab, setSelectedTab] = useState<string | unknown>('map')
return (
<Container fluid w='100%' pos='relative' p={0}>
<Tabs h='100%' variant='default' value={'map'} keepMounted={true}>
<Stack gap={0} h='100%'>
<Tabs.List>
<Tabs.Tab value={'map'}>Map</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value={'map'} h='100%' pos='relative'>
<Container pos='absolute' fluid p={0} w='100%' h='100%' ref={mapElement}></Container>
</Tabs.Panel>
</Stack>
</Tabs>
</Container>
<div style={{ position: 'relative', width: '100%' }}>
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
<TabList selectedValue='map' onTabSelect={(_, data) => setSelectedTab(data.value)}>
<Tab value='map'>
Map
</Tab>
</TabList>
{selectedTab === 'map' && <div style={{ width: '100%', height: '100%' }} ref={mapElement}></div>}
</div>
</div>
)
}

114
client/src/components/map/MapMode.tsx
View File

@ -1,106 +1,88 @@
import { Button, Flex, FloatingIndicator, Popover, SegmentedControl } from '@mantine/core'
import { Mode, setMode, useMapStore } from '../../store/map'
import { IconChevronDown, IconCropLandscape, IconCropPortrait, IconEdit, IconEye, IconPrinter } from '@tabler/icons-react'
import { IconCropLandscape, IconCropPortrait, IconEdit, IconEye, IconPrinter } from '@tabler/icons-react'
import { useEffect, useState } from 'react'
import { PrintOrientation, setPrintOrientation, usePrintStore } from '../../store/print'
import { Button, Menu, MenuItemRadio, MenuList, MenuPopover, MenuProps, MenuTrigger, SplitButton } from '@fluentui/react-components'
const MapMode = ({
map_id
}: { map_id: string }) => {
const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
const [controlsRefs, setControlsRefs] = useState<Record<string, HTMLButtonElement | null>>({});
const { mode } = useMapStore().id[map_id]
const setControlRef = (item: Mode) => (node: HTMLButtonElement) => {
controlsRefs[item] = node;
setControlsRefs(controlsRefs);
}
const { printOrientation } = usePrintStore()
useEffect(() => {
const [checkedValues, setCheckedValues] = useState<Record<string, string[]>>({ orientation: [printOrientation] })
const onChange: MenuProps["onCheckedValueChange"] = (
_,
{ name, checkedItems }
) => {
setCheckedValues((s) => ({ ...s, [name]: checkedItems }))
setPrintOrientation(checkedItems[0] as PrintOrientation)
setMode(map_id, 'print' as Mode)
}
useEffect(() => {
if (printOrientation) {
setCheckedValues((s) => ({ ...s, ['orientation']: [printOrientation] }))
}
}, [printOrientation])
return (
<Flex ref={setRootRef} p={4} gap={4}>
<div style={{
display: 'flex',
gap: '0.25rem',
padding: '0.25rem'
}}>
<Button
variant={mode === 'view' ? 'filled' : 'subtle'}
appearance={mode === 'view' ? 'primary' : 'subtle'}
key={'view'}
ref={setControlRef('view' as Mode)}
onClick={() => {
setMode(map_id, 'view' as Mode)
}}
leftSection={<IconEye size={16} />}
mod={{ active: mode === 'view' as Mode }}
icon={<IconEye size={16} />}
//mod={{ active: mode === 'view' as Mode }}
>
Просмотр
</Button>
<Button
variant={mode === 'edit' ? 'filled' : 'subtle'}
appearance={mode === 'edit' ? 'primary' : 'subtle'}
key={'edit'}
ref={setControlRef('edit' as Mode)}
onClick={() => {
setMode(map_id, 'edit' as Mode)
}}
leftSection={<IconEdit size={16} />}
mod={{ active: mode === 'edit' as Mode }}
icon={<IconEdit size={16} />}
//mod={{ active: mode === 'edit' as Mode }}
>
Редактирование
</Button>
<Popover width='auto' position='bottom-end' >
<Popover.Target>
<Button.Group>
<Button
variant={mode === 'print' ? 'filled' : 'subtle'}
key={'print'}
ref={setControlRef('print' as Mode)}
onClick={(e) => {
e.stopPropagation()
setMode(map_id, 'print' as Mode)
<Menu checkedValues={checkedValues} onCheckedValueChange={onChange}>
<MenuTrigger>
<SplitButton
appearance={mode === 'print' ? 'primary' : 'subtle'}
primaryActionButton={{
onClick: () => setMode(map_id, 'print' as Mode)
}}
leftSection={<IconPrinter size={16} />}
mod={{ active: mode === 'print' as Mode }}
icon={<IconPrinter size={16} />}
>
Печать
</Button>
<Button variant={mode === 'print' ? 'filled' : 'subtle'} w='auto' p={8} title='Ориентация'>
<IconChevronDown size={16} />
</Button>
</Button.Group>
</Popover.Target>
</SplitButton>
</MenuTrigger>
<Popover.Dropdown p={0} style={{ display: 'flex' }}>
<SegmentedControl
color='blue'
value={printOrientation}
onChange={(value) => {
setPrintOrientation(value as PrintOrientation)
setMode(map_id, 'print' as Mode)
}}
data={[
{
value: 'horizontal',
label: (
<IconCropLandscape title='Горизонтальная' style={{ display: 'block' }} size={20} />
),
},
{
value: 'vertical',
label: (
<IconCropPortrait title='Вертикальная' style={{ display: 'block' }} size={20} />
),
},
]}
/>
</Popover.Dropdown>
</Popover>
<FloatingIndicator target={controlsRefs[mode]} parent={rootRef} />
</Flex >
<MenuPopover>
<MenuList>
<MenuItemRadio name='orientation' value='horizontal' icon={<IconCropLandscape style={{ display: 'block' }} />}>
Горизонтальная
</MenuItemRadio>
<MenuItemRadio name='orientation' value='vertical' icon={<IconCropPortrait style={{ display: 'block' }} />}>
Вертикальная
</MenuItemRadio>
</MenuList>
</MenuPopover>
</Menu>
</div >
)
}

156
client/src/components/map/MapPrint/MapPrint.tsx
View File

@ -1,5 +1,4 @@
import { ActionIcon, Button, Checkbox, Flex, Modal, Radio, ScrollAreaAutosize, Select, Stack, Text } from '@mantine/core'
import { IconHelp, IconWindowMaximize, IconWindowMinimize } from '@tabler/icons-react'
import { IconHelp, IconWindowMaximize, IconWindowMinimize, IconX } from '@tabler/icons-react'
import React, { useEffect, useRef, useState } from 'react'
import { clearPrintArea, PrintScale, setPreviousView, setPrintScale, setPrintScaleLine, useMapStore } from '../../../store/map'
import { PrintFormat, PrintOrientation, printResolutions, setPrintOrientation, setPrintResolution, usePrintStore } from '../../../store/print'
@ -9,6 +8,7 @@ import { useObjectsStore } from '../../../store/objects'
import jsPDF from 'jspdf'
import { getCenter } from 'ol/extent'
import ScaleLine from 'ol/control/ScaleLine'
import { Button, Checkbox, Dropdown, Field, Option, Radio, RadioGroup, Text } from '@fluentui/react-components'
const MapPrint = ({
id,
@ -140,94 +140,128 @@ const MapPrint = ({
}
}, [printScaleLine, printArea])
return (
<Modal.Root
scrollAreaComponent={ScrollAreaAutosize}
keepMounted size='auto'
opened={!!printArea}
onClose={() => {
const [opened, setOpened] = useState(false)
useEffect(() => {
if (!!printArea) {
setOpened(true)
}
}, [printArea])
useEffect(() => {
if (!opened) {
clearPrintArea(id)
map?.setTarget(mapElement.current as HTMLDivElement)
map?.addInteraction(printAreaDraw)
}} fullScreen={fullscreen}>
<Modal.Overlay />
<Modal.Content style={{ transition: 'all .3s ease' }}>
<Modal.Header>
<Modal.Title>
Предпросмотр области печати
</Modal.Title>
}
}, [opened])
<Flex ml='auto' gap='md'>
<ActionIcon title='Помощь' ml='auto' variant='transparent'>
<IconHelp color='gray' />
</ActionIcon>
<ActionIcon title={fullscreen ? 'Свернуть' : 'Развернуть'} variant='transparent' onClick={() => setFullscreen(!fullscreen)}>
{fullscreen ? <IconWindowMinimize color='gray' /> : <IconWindowMaximize color='gray' />}
</ActionIcon>
<Modal.CloseButton title='Закрыть' />
</Flex>
</Modal.Header>
<Modal.Body>
<Stack align='center'>
<Text w='100%'>Область печати можно передвигать.</Text>
return (
<div
style={{
display: opened ? 'flex' : 'none',
position: fullscreen ? 'fixed' : 'fixed',
zIndex: '9999',
width: '100%',
height: '100%',
inset: 0,
justifyContent: 'center',
alignItems: 'center',
}}
>
<div style={{
display: 'flex',
flexDirection: 'column',
transition: 'all .3s ease',
width: fullscreen ? '100%' : 'auto',
height: fullscreen ? '100%' : 'fit-content',
background: 'var(--colorNeutralBackground1)',
border: '1px solid var(--colorNeutralShadowKey)',
}}>
<div style={{ display: 'flex', padding: '1rem', alignItems: 'center' }}>
<Text>
Предпросмотр области печати
</Text>
<div style={{ display: 'flex', marginLeft: 'auto', gap: '1.5rem' }}>
<Button appearance='subtle' title='Помощь' style={{ marginLeft: 'auto' }} icon={<IconHelp color='gray' />} />
<Button appearance='subtle' title={fullscreen ? 'Свернуть' : 'Развернуть'} style={{ marginLeft: 'auto' }} icon={fullscreen ? <IconWindowMinimize color='gray' /> : <IconWindowMaximize color='gray' />} onClick={() => setFullscreen(!fullscreen)} />
<Button appearance='subtle' title='Закрыть' icon={<IconX />} onClick={() => setOpened(false)} />
</div>
</div>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', height: 'fit-content', overflow: 'auto' }}>
<Text>Область печати можно передвигать.</Text>
<div id='print-portal' style={{
width: printOrientation === 'horizontal' ? '594px' : '420px',
height: printOrientation === 'horizontal' ? '420px' : '594px'
height: printOrientation === 'horizontal' ? '420px' : '594px',
flexShrink: '0'
}}>
</div>
<Flex w='100%' wrap='wrap' gap='lg' justify='space-between'>
<Radio.Group
label='Ориентация'
value={printOrientation}
onChange={(value) => setPrintOrientation(value as PrintOrientation)}
>
<Stack>
<div style={{ display: 'flex', width: '100%', flexWrap: 'wrap', gap: '1rem', padding: '1rem', justifyContent: 'space-between', alignItems: 'flex-start' }}>
<Field label={'Ориентация'}>
<RadioGroup value={printOrientation} onChange={(_, data) => setPrintOrientation(data.value as PrintOrientation)}>
<Radio value='horizontal' label='Горизонтальная' />
<Radio value='vertical' label='Вертикальная' />
</Stack>
</Radio.Group>
</RadioGroup>
</Field>
<Select
allowDeselect={false}
label="Разрешение"
placeholder="Выберите разрешение"
data={printResolutions}
<Field label="Разрешение">
<Dropdown
defaultValue={printResolution.toString()}
value={printResolution.toString()}
onChange={(value) => setPrintResolution(Number(value))}
/>
selectedOptions={[printResolution.toString()]}
onOptionSelect={(_, data) => setPrintResolution(Number(data.optionValue))}
>
{printResolutions.map((res) => (
<Option key={res} text={res} value={res}>
{res}
</Option>
))}
</Dropdown>
</Field>
<Select
allowDeselect={false}
label="Масштаб"
placeholder="Выберите масштаб"
data={scaleOptions}
value={printScale}
onChange={(value) => setPrintScale(id, value as PrintScale)}
/>
<Field label="Масштаб">
<Dropdown
defaultValue={printScale.toString()}
value={printScale.toString()}
defaultSelectedOptions={[printScale]}
selectedOptions={[printScale]}
onOptionSelect={(_, data) => setPrintScale(id, data.optionValue as PrintScale)}
>
{scaleOptions.map((opt) => (
<Option key={opt.value} text={opt.label} value={opt.value}>
{opt.label}
</Option>
))}
</Dropdown>
</Field>
<Checkbox
checked={printScaleLine}
label="Масштабная линия"
onChange={(event) => setPrintScaleLine(id, event.currentTarget.checked)}
/>
</Flex>
</div>
<Flex w='100%' gap='sm' align='center'>
<Button ml='auto' onClick={() => {
<div style={{ display: 'flex', width: '100%', gap: '1rem', padding: '1rem', alignItems: 'center' }}>
<Button style={{ marginLeft: 'auto' }} onClick={() => {
if (previousView) {
exportToPDF(printFormat, printResolution, printOrientation)
}
}}>
Печать
</Button>
</Flex>
</Stack>
</Modal.Body>
</Modal.Content>
</Modal.Root>
</div>
</div>
</div>
</div>
)
}

20
client/src/components/map/MapStatusbar/MapStatusbar.tsx
View File

@ -1,6 +1,6 @@
import { Divider, Flex, rem, Text } from '@mantine/core'
import { CSSProperties } from 'react'
import { useMapStore } from '../../../store/map';
import { Divider, Text } from '@fluentui/react-components';
interface IMapStatusbarProps {
mapControlsStyle: CSSProperties;
@ -14,33 +14,33 @@ const MapStatusbar = ({
const { currentCoordinate, currentX, currentY, currentZ, statusText } = useMapStore().id[map_id]
return (
<Flex gap='sm' p={'4px'} w={'100%'} fz={'xs'} style={{ ...mapControlsStyle, borderRadius: 0 }}>
<Text fz='xs' w={rem(130)}>
<div style={{ ...mapControlsStyle, display: 'flex', gap: '1rem', padding: '0.25rem', width: '100%', borderRadius: 0 }}>
<Text size={200}>
x: {currentCoordinate?.[0]}
</Text>
<Text fz='xs' w={rem(130)}>
<Text size={200}>
y: {currentCoordinate?.[1]}
</Text>
<Divider orientation='vertical' />
<Divider vertical />
<Text fz='xs'>
<Text size={200}>
Z={currentZ}
</Text>
<Text fz='xs'>
<Text size={200}>
X={currentX}
</Text>
<Text fz='xs'>
<Text size={200}>
Y={currentY}
</Text>
<Text fz='xs' ml='auto'>
<Text size={200} style={{marginLeft: 'auto'}}>
{statusText}
</Text>
</Flex>
</div>
)
}

83
client/src/components/map/MapToolbar/MapToolbar.tsx
View File

@ -1,7 +1,8 @@
import { ActionIcon, Flex, useMantineColorScheme } from '@mantine/core'
import { useMantineColorScheme } from '@mantine/core'
import { IconArrowBackUp, IconArrowsMove, IconCircle, IconExclamationCircle, IconLine, IconPoint, IconPolygon, IconRuler, IconTransformPoint } from '@tabler/icons-react'
import { getDraw, setCurrentTool, useMapStore } from '../../../store/map';
import { saveFeatures } from '../mapUtils';
import { Button } from '@fluentui/react-components';
const MapToolbar = ({
map_id
@ -10,81 +11,41 @@ const MapToolbar = ({
const { colorScheme } = useMantineColorScheme();
return (
<Flex>
<ActionIcon.Group orientation='vertical' style={{ zIndex: 1, backdropFilter: 'blur(8px)', backgroundColor: colorScheme === 'light' ? '#FFFFFFAA' : '#000000AA', borderRadius: '4px' }}>
<ActionIcon size='lg' variant='transparent' onClick={() => saveFeatures(map_id)}>
<IconExclamationCircle />
</ActionIcon>
<div style={{ display: 'flex' }}>
<div style={{ display: 'flex', flexDirection: 'column', zIndex: 1, backdropFilter: 'blur(8px)', backgroundColor: colorScheme === 'light' ? '#FFFFFFAA' : '#000000AA', borderRadius: '4px' }}>
<Button icon={<IconExclamationCircle />} appearance='transparent' onClick={() => saveFeatures(map_id)} />
<ActionIcon size='lg' variant='transparent' onClick={() => getDraw(map_id)?.removeLastPoint()}>
<IconArrowBackUp />
</ActionIcon>
<Button icon={<IconArrowBackUp />} appearance='transparent' onClick={() => getDraw(map_id)?.removeLastPoint()} />
<ActionIcon
size='lg'
variant={currentTool === 'Edit' ? 'filled' : 'transparent'}
onClick={() => {
<Button icon={<IconTransformPoint />} appearance={currentTool === 'Edit' ? 'primary' : 'transparent'} onClick={() => {
setCurrentTool(map_id, 'Edit')
}}>
<IconTransformPoint />
</ActionIcon>
}} />
<ActionIcon
size='lg'
variant={currentTool === 'Point' ? 'filled' : 'transparent'}
onClick={() => {
<Button icon={<IconPoint />} appearance={currentTool === 'Point' ? 'primary' : 'transparent'} onClick={() => {
setCurrentTool(map_id, 'Point')
}}>
<IconPoint />
</ActionIcon>
}} />
<ActionIcon
size='lg'
variant={currentTool === 'LineString' ? 'filled' : 'transparent'}
onClick={() => {
<Button icon={<IconLine />} appearance={currentTool === 'LineString' ? 'primary' : 'transparent'} onClick={() => {
setCurrentTool(map_id, 'LineString')
}}>
<IconLine />
</ActionIcon>
}} />
<ActionIcon
size='lg'
variant={currentTool === 'Polygon' ? 'filled' : 'transparent'}
onClick={() => {
<Button icon={<IconPolygon />} appearance={currentTool === 'Polygon' ? 'primary' : 'transparent'} onClick={() => {
setCurrentTool(map_id, 'Polygon')
}}>
<IconPolygon />
</ActionIcon>
}} />
<ActionIcon
size='lg'
variant={currentTool === 'Circle' ? 'filled' : 'transparent'}
onClick={() => {
<Button icon={<IconCircle />} appearance={currentTool === 'Circle' ? 'primary' : 'transparent'} onClick={() => {
setCurrentTool(map_id, 'Circle')
}}>
<IconCircle />
</ActionIcon>
}} />
<ActionIcon
size='lg'
variant={currentTool === 'Mover' ? 'filled' : 'transparent'}
onClick={() => {
<Button icon={<IconArrowsMove />} appearance={currentTool === 'Mover' ? 'primary' : 'transparent'} onClick={() => {
setCurrentTool(map_id, 'Mover')
}}
>
<IconArrowsMove />
</ActionIcon>
}} />
<ActionIcon
size='lg'
variant={currentTool === 'Measure' ? 'filled' : 'transparent'}
onClick={() => {
<Button icon={<IconRuler />} appearance={currentTool === 'Measure' ? 'primary' : 'transparent'} onClick={() => {
setCurrentTool(map_id, 'Measure')
}}>
<IconRuler />
</ActionIcon>
</ActionIcon.Group>
</Flex>
}} />
</div>
</div>
)
}

34
client/src/components/map/MapTree/MapTreeCheckbox.tsx
View File

@ -1,34 +0,0 @@
import { Checkbox, Group, RenderTreeNodePayload, Text } from "@mantine/core";
import { IconChevronDown } from "@tabler/icons-react";
export const MapTreeCheckbox = ({
node,
expanded,
hasChildren,
elementProps,
tree,
}: RenderTreeNodePayload) => {
const checked = tree.isNodeChecked(node.value);
const indeterminate = tree.isNodeIndeterminate(node.value);
return (
<Group gap="xs" {...elementProps}>
<Checkbox.Indicator
checked={checked}
indeterminate={indeterminate}
onClick={() => (!checked ? tree.checkNode(node.value) : tree.uncheckNode(node.value))}
/>
<Group gap={5} onClick={() => tree.toggleExpanded(node.value)}>
<Text size="xs">{node.label}</Text>
{hasChildren && (
<IconChevronDown
size={14}
style={{ transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' }}
/>
)}
</Group>
</Group>
);
};

7
client/src/components/map/ObjectData.tsx
View File

@ -1,4 +1,3 @@
import { Flex } from '@mantine/core'
import { IObjectData, IObjectType } from '../../interfaces/objects'
import useSWR from 'swr'
import { fetcher } from '../../http/axiosInstance'
@ -14,11 +13,9 @@ const ObjectData = (object_data: IObjectData) => {
)
return (
<Flex gap='sm' direction='column'>
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
{Array.isArray(typeData) && (typeData.find(type => Number(type.id) === Number(object_data.type)) as IObjectType).name}
</Flex>
</div>
)
}

14
client/src/components/map/ObjectParameter.tsx
View File

@ -4,6 +4,7 @@ import { BASE_URL } from '../../constants'
import { IObjectParam, IParam } from '../../interfaces/objects'
import TCBParameter from './TCBParameter'
import TableValue from './TableValue'
import { TableCell, TableCellLayout, TableRow } from '@fluentui/react-components'
interface ObjectParameterProps {
showLabel?: boolean;
@ -73,10 +74,19 @@ const ObjectParameter = ({
)
default:
return (
<div>
<TableRow>
<TableCell>
<TableCellLayout>
{name}
</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>
{value as string}
</div>
</TableCellLayout>
</TableCell>
</TableRow>
)
}
}

27
client/src/components/map/ObjectParameters/ObjectParameters.tsx
View File

@ -1,10 +1,10 @@
import { Flex, LoadingOverlay } from '@mantine/core';
import { IObjectParam } from '../../../interfaces/objects';
import ObjectParameter from '../ObjectParameter';
import useSWR from 'swr';
import { BASE_URL } from '../../../constants';
import { fetcher } from '../../../http/axiosInstance';
import { useObjectsStore } from '../../../store/objects';
import { Spinner, Table, TableBody } from '@fluentui/react-components';
const ObjectParameters = ({
map_id
@ -24,8 +24,25 @@ const ObjectParameters = ({
)
return (
<Flex gap={'sm'} direction={'column'} pos='relative'>
<LoadingOverlay visible={valuesValidating} />
<div style={{ display: 'flex', gap: '1rem', flexDirection: 'column', position: 'relative' }}>
{(valuesValidating) && (
<div
style={{
position: "absolute",
inset: 0,
backgroundColor: "rgba(255, 255, 255, 0.6)",
display: "flex",
justifyContent: "center",
alignItems: "center",
zIndex: 9999,
}}
>
<Spinner size="large" label="Загрузка..." />
</div>
)}
<Table size='small'>
<TableBody>
{Array.isArray(valuesData) &&
Object.entries(
valuesData.reduce((acc, param) => {
@ -57,7 +74,9 @@ const ObjectParameters = ({
);
})
}
</Flex>
</TableBody>
</Table>
</div>
)
}

5
client/src/components/map/RegionSelect.tsx
View File

@ -1,7 +1,6 @@
import useSWR from 'swr'
import { BASE_URL } from '../../constants'
import { fetcher } from '../../http/axiosInstance'
import { Flex } from '@mantine/core'
const RegionSelect = () => {
const { data } = useSWR(`/gis/regions/borders`, (url) => fetcher(url, BASE_URL.ems), {
@ -10,7 +9,7 @@ const RegionSelect = () => {
})
return (
<Flex align='center' justify='center'>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
{Array.isArray(data) &&
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width='100%' height='100vh' transform='scale(1, -1)'>
{data.map((el, index) => (
@ -18,7 +17,7 @@ const RegionSelect = () => {
))}
</svg>
}
</Flex>
</div>
)
}

2
client/src/components/map/TCBParameter.tsx
View File

@ -1,8 +1,8 @@
import useSWR from 'swr'
import { fetcher } from '../../http/axiosInstance'
import { BASE_URL } from '../../constants'
import { Text } from '@mantine/core'
import TableValue from './TableValue'
import { Text } from '@fluentui/react-components';
interface ITCBParameterProps {
value: string;

52
client/src/components/map/TableValue.tsx
View File

@ -1,8 +1,8 @@
import { Checkbox, ComboboxData, Grid, NumberInput, Select, Text, Textarea } from '@mantine/core';
import useSWR from 'swr';
import { fetcher } from '../../http/axiosInstance';
import { BASE_URL } from '../../constants';
import { useObjectsStore } from '../../store/objects';
import { Checkbox, Input, Select, TableCell, TableCellLayout, TableRow, Text } from '@fluentui/react-components';
interface TableValueProps {
name: string;
@ -30,7 +30,7 @@ const TableValue = ({
return res.map((el) => ({
label: el.name || "",
value: JSON.stringify(el.id)
})) as ComboboxData
}))
}
}),
{
@ -40,32 +40,52 @@ const TableValue = ({
)
return (
<Grid>
<Grid.Col span={4} style={{ display: 'flex', alignItems: 'center' }}>
<Text size='xs' style={{ textWrap: 'wrap' }}>{name as string}</Text>
</Grid.Col>
<Grid.Col span={8}>
<TableRow>
<TableCell>
<TableCellLayout truncate>
<Text size={200} style={{ textWrap: 'wrap' }}>{name as string}</Text>
</TableCellLayout>
</TableCell>
<TableCell>
<div style={{ display: 'flex' }}>
{type === 'boolean' ?
// <Select style={{ display: 'flex', width: '100%' }} size='small' defaultChecked={value as boolean}>
// {[true, false].map(tcb => (
// <option key={JSON.stringify(tcb)} value={JSON.stringify(tcb)}>
// {tcb === true ? 'Да' : 'Нет'}
// </option>
// ))}
// </Select>
<Checkbox defaultChecked={value as boolean} />
:
type === 'number' ?
<NumberInput
size='xs'
value={value as number}
<Input
size='small'
style={{ display: 'flex', width: '100%' }}
defaultValue={value as string}
onChange={() => { }}
suffix={unit ? ` ${unit}` : ''}
contentAfter={unit ? ` ${unit}` : ''}
//displayValue={unit ? ` ${unit}` : ''}
/>
:
type === 'select' && !isValidating && tcbAll ?
<Select size='xs' data={tcbAll} value={JSON.stringify(value)} />
<Select style={{ display: 'flex', width: '100%' }} size='small' defaultValue={JSON.stringify(value)}>
{tcbAll.map(tcb => (
<option key={tcb.value} value={tcb.value}>
{tcb.label}
</option>
))}
</Select>
:
type === 'string' ?
<Textarea size='xs' value={value as string} autosize minRows={1} />
<Input style={{ display: 'flex', width: '100%' }} size='small' value={value as string} />
:
<Text size='xs'>{value as string}</Text>
<Text size={200}>{value as string}</Text>
}
</Grid.Col>
</Grid>
</div>
</TableCell>
</TableRow>
)
}

48
client/src/components/map/TabsPane/TabsPane.tsx
View File

@ -1,4 +1,5 @@
import { ScrollAreaAutosize, Tabs } from '@mantine/core';
import { Tab, TabList } from '@fluentui/react-components';
import { useState } from 'react';
export interface ITabsPane {
title: string;
@ -15,30 +16,39 @@ const TabsPane = ({
defaultTab,
tabs
}: TabsPaneProps) => {
const [selectedTab, setSelectedTab] = useState<string | unknown>(defaultTab)
return (
<Tabs defaultValue={defaultTab} mah='50%' h={'100%'} style={{
display: 'grid',
gridTemplateRows: 'min-content auto'
<div style={{
display: 'flex',
flexDirection: 'column',
width: '100%',
height: '100%',
maxHeight: '50%',
}}>
<ScrollAreaAutosize>
<Tabs.List>
<div style={{
display: 'flex',
flexWrap: 'wrap',
maxWidth: '100%',
overflowX: 'auto',
minHeight: 'min-content',
borderBottom: '1px solid var(--colorNeutralShadowKey)'
}}>
<TabList selectedValue={selectedTab} onTabSelect={(_, data) => setSelectedTab(data.value)}>
{tabs.map((tab) => (
<Tabs.Tab key={tab.value} value={tab.value}>
{tab.title}
</Tabs.Tab>
<Tab value={tab.value}>{tab.title}</Tab>
))}
</Tabs.List>
</ScrollAreaAutosize>
</TabList>
</div>
<ScrollAreaAutosize h='100%' offsetScrollbars>
{tabs.map(tab => (
<Tabs.Panel p='xs' key={tab.value} value={tab.value}>
{tab.view}
</Tabs.Panel>
))}
</ScrollAreaAutosize>
</Tabs>
<div style={{
display: 'flex',
overflow: 'auto'
}}>
{tabs.find(tab => tab.value === selectedTab)?.view}
</div>
</div>
)
}

90
client/src/components/modals/FileViewer.tsx
View File

@ -9,8 +9,8 @@ import '@js-preview/docx/lib/index.css'
import jsPreviewPdf from '@js-preview/pdf'
import { IDocument } from '../../interfaces/documents';
import { IconAlertTriangle, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
import { Button, Flex, Grid, Loader, Modal, ScrollAreaAutosize, Text } from '@mantine/core';
import { IconAlertTriangle, IconChevronLeft, IconChevronRight, IconX } from '@tabler/icons-react';
import { Button, Spinner, Text } from '@fluentui/react-components';
interface Props {
open: boolean;
@ -112,7 +112,7 @@ function ImageViewer({
url
}: ViewerProps) {
return (
<Flex style={{
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@ -125,7 +125,7 @@ function ImageViewer({
maxWidth: '100%',
maxHeight: '100%'
}} />
</Flex>
</div>
)
}
@ -151,71 +151,71 @@ export default function FileViewer({
}
return (
<Modal.Root fullScreen opened={open} onClose={() => setOpen(false)} scrollAreaComponent={ScrollAreaAutosize.Autosize}>
<Modal.Overlay />
<Modal.Content style={{
<div style={{display: open ? 'flex' : 'none'}}>
<div style={{
display: 'grid',
position: 'fixed',
inset: 0,
zIndex: '9999',
background: 'var(--colorNeutralBackground1)',
gridTemplateRows: 'min-content auto',
width: '100vw',
height: '100vh'
}}>
<Modal.Header>
<Modal.Title component='div' w='100%'>
<Flex align='center'>
<Text mr='auto'>{currentFileNo != -1 && docs[currentFileNo].name}</Text>
<div style={{ display: 'flex', padding: '1rem' }}>
<div style={{ width: '100%' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<Text style={{ marginRight: 'auto' }}>
{currentFileNo != -1 && docs[currentFileNo].name}
</Text>
<Grid>
<Grid.Col span='auto'>
<div>
<Button
variant='transparent'
icon={<IconChevronLeft />}
appearance='transparent'
onClick={() => {
if (currentFileNo >= 0 && currentFileNo > 0) {
setCurrentFileNo(currentFileNo - 1)
}
}}
disabled={currentFileNo >= 0 && currentFileNo === 0}
>
<IconChevronLeft />
</Button>
</Grid.Col>
<Grid.Col span='auto'>
/>
<Button
variant='transparent'
icon={<IconChevronRight />}
appearance='transparent'
onClick={() => {
if (currentFileNo >= 0 && currentFileNo < docs.length) {
setCurrentFileNo(currentFileNo + 1)
}
}}
disabled={currentFileNo >= 0 && currentFileNo >= docs.length - 1}
>
<IconChevronRight />
</Button>
</Grid.Col>
</Grid>
/>
</div>
<Button
autoFocus
variant='subtle'
appearance='subtle'
onClick={handleSave}
>
Сохранить
</Button>
</Flex>
</Modal.Title>
<Modal.CloseButton ml='xl' />
</Modal.Header>
<Modal.Body style={{ display: 'flex', flexGrow: 1, height: '100%', width: '100vw' }}>
</div>
</div>
<Button icon={<IconX />} appearance='subtle' onClick={() => setOpen(false)} />
</div>
<div style={{ display: 'flex', flexGrow: 1, height: '100%', overflow: 'auto', width: '100vw' }}>
{fileIsLoading || fileTypeIsLoading ?
<Flex style={{
<div style={{
display: 'flex',
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center'
}}>
<Loader />
</Flex>
<Spinner />
</div>
:
fileType === 'application/pdf' ?
<PdfViewer url={window.URL.createObjectURL(file)} />
@ -230,27 +230,27 @@ export default function FileViewer({
<ImageViewer url={window.URL.createObjectURL(file)} />
:
fileType && file ?
<Flex style={{ display: 'flex', gap: '16px', flexDirection: 'column', p: '16px' }}>
<Flex style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
<div style={{ display: 'flex', gap: '16px', flexDirection: 'column', padding: '1rem' }}>
<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
<IconAlertTriangle />
<Text>
Предпросмотр данного файла невозможен.
</Text>
</Flex>
</div>
<Flex>
<Button variant='contained' onClick={() => {
<div style={{ display: 'flex' }}>
<Button appearance='secondary' onClick={() => {
handleSave()
}}>
Сохранить
</Button>
</Flex>
</Flex>
</div>
</div>
:
null
}
</Modal.Body>
</Modal.Content>
</Modal.Root>
</div>
</div>
</div>
)
}

23
client/src/constants/app.tsx
View File

@ -1,4 +1,4 @@
import { IconBuildingFactory2, IconComponents, IconDeviceDesktopAnalytics, IconFiles, IconFlame, IconHome, IconLogin, IconLogin2, IconMap, IconPassword, IconReport, icons, IconServer, IconSettings, IconShield, IconUsers } from "@tabler/icons-react";
import { IconComponents, IconDeviceDesktopAnalytics, IconFlame, IconLogin, IconLogin2, IconPassword, IconSettings } from "@tabler/icons-react";
import SignIn from "../pages/auth/SignIn";
import SignUp from "../pages/auth/SignUp";
import PasswordReset from "../pages/auth/PasswordReset";
@ -17,6 +17,7 @@ import PrintReport from "../pages/PrintReport";
import DBManager from "../pages/DBManager";
import MapLineTest from "../components/map/MapLineTest";
import FuelPage from "../pages/Fuel";
import { Building24Color, Cloud24Color, Database24Color, Document24Color, Form24Color, Home24Color, Map24Filled, Map24Regular, PeopleList24Color, Shield24Color } from "@fluentui/react-icons"
// Определение страниц с путями и компонентом для рендера
@ -60,7 +61,7 @@ const pages = [
{
label: "Главная",
path: "/",
icon: <IconHome />,
icon: <Home24Color />,
component: <Main />,
drawer: true,
dashboard: true,
@ -69,7 +70,7 @@ const pages = [
{
label: "Пользователи",
path: "/user",
icon: <IconUsers />,
icon: <PeopleList24Color />,
component: <Users />,
drawer: true,
dashboard: true,
@ -78,7 +79,7 @@ const pages = [
{
label: "Роли",
path: "/role",
icon: <IconShield />,
icon: <Shield24Color />,
component: <Roles />,
drawer: true,
dashboard: true,
@ -87,7 +88,7 @@ const pages = [
{
label: "Документы",
path: "/documents",
icon: <IconFiles />,
icon: <Document24Color />,
component: <Documents />,
drawer: true,
dashboard: true,
@ -96,7 +97,7 @@ const pages = [
{
label: "Отчеты",
path: "/reports",
icon: <IconReport />,
icon: <Form24Color />,
component: <Reports />,
drawer: true,
dashboard: true,
@ -105,7 +106,7 @@ const pages = [
{
label: "Серверы",
path: "/servers",
icon: <IconServer />,
icon: <Cloud24Color />,
component: <Servers />,
drawer: true,
dashboard: true,
@ -114,7 +115,7 @@ const pages = [
{
label: "Котельные",
path: "/boilers",
icon: <IconBuildingFactory2 />,
icon: <Building24Color />,
component: <Boilers />,
drawer: true,
dashboard: true,
@ -123,7 +124,7 @@ const pages = [
{
label: "ИКС",
path: "/map-test",
icon: <IconMap />,
icon: <Map24Filled />,
component: <MapTest />,
drawer: true,
dashboard: true,
@ -132,7 +133,7 @@ const pages = [
{
label: "Map line test",
path: "/map-line-test",
icon: <IconMap />,
icon: <Map24Regular />,
component: <MapLineTest />,
drawer: true,
dashboard: true,
@ -168,7 +169,7 @@ const pages = [
{
label: "Тест БД",
path: "/db-manager",
icon: <IconComponents />,
icon: <Database24Color />,
component: <DBManager />,
drawer: true,
dashboard: true,

30
client/src/hooks/useFluentColorScheme.ts Normal file
View File

@ -0,0 +1,30 @@
import * as React from "react";
import { webLightTheme, webDarkTheme, Theme } from "@fluentui/react-components";
type ColorScheme = "light" | "dark";
const STORAGE_KEY = "color-scheme";
export function useFluentColorScheme(): {
colorScheme: ColorScheme;
setColorScheme: (value: ColorScheme) => void;
theme: Theme;
} {
const [colorScheme, setColorSchemeState] = React.useState<ColorScheme>(() => {
if (typeof window !== "undefined") {
const saved = localStorage.getItem(STORAGE_KEY) as ColorScheme | null;
if (saved === "light" || saved === "dark") return saved;
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
return prefersDark ? "dark" : "light";
}
return "light";
});
const setColorScheme = React.useCallback((value: ColorScheme) => {
setColorSchemeState(value);
localStorage.setItem(STORAGE_KEY, value);
}, []);
const theme = colorScheme === "dark" ? webDarkTheme : webLightTheme;
return { colorScheme, setColorScheme, theme };
}

11
client/src/interfaces/DataGrid/columns.ts Normal file
View File

@ -0,0 +1,11 @@
export type IColumnType = "string" | "number" | "boolean" | "dictionary"
export interface IColumn {
name: string
header: string
type: IColumnType
}
export interface IColumnsDefinition {
}

4
client/src/interfaces/dictionary.ts Normal file
View File

@ -0,0 +1,4 @@
export interface IDictionary {
id: number
name: string
}

332
client/src/layouts/DashboardLayout.tsx
View File

@ -1,15 +1,53 @@
import { AppShell, Avatar, Burger, Button, Flex, Group, Image, Menu, NavLink, rem, Text, useMantineColorScheme } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useMantineColorScheme } from '@mantine/core';
import { Outlet, useNavigate } from 'react-router-dom';
import { IconChevronDown, IconLogout, IconSettings, IconMoon, IconSun } from '@tabler/icons-react';
import { IconLogout, IconSettings, IconMoon, IconSun, IconMenu2, IconUser } from '@tabler/icons-react';
import { getUserData, logout, useAuthStore } from '../store/auth';
import { useEffect, useState } from 'react';
import { UserData } from '../interfaces/auth';
import { pages } from '../constants/app';
import { Button, Image, makeStyles, Menu, MenuButton, MenuItem, MenuList, MenuPopover, MenuTrigger, Text } from '@fluentui/react-components';
const useStyles = makeStyles({
root: {
display: 'grid',
gridTemplateRows: 'min-content auto',
height: '100vh',
maxHeight: '100vh',
overflow: 'hidden'
},
header: {
display: 'flex',
maxHeight: '3rem',
borderBottom: '1px solid var(--colorNeutralShadowKey)'
},
main: {
display: 'flex',
overflow: 'hidden',
width: '100%',
height: '100%',
},
navbar: {
overflow: 'auto',
display: 'flex',
flexDirection: 'column',
maxWidth: '200px',
position: 'relative',
width: '100%',
height: '100%',
transition: 'max-width .2s ease-in-out',
borderRight: '1px solid var(--colorNeutralShadowKey)'
},
content: {
overflow: 'auto',
display: 'flex',
position: 'relative',
width: '100%',
height: '100%'
}
})
function DashboardLayout() {
const [mobileOpened, { toggle: toggleMobile }] = useDisclosure()
const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(false)
const navigate = useNavigate()
const getPageTitle = () => {
@ -33,115 +71,201 @@ function DashboardLayout() {
const { colorScheme, setColorScheme } = useMantineColorScheme();
const classes = useStyles()
const [navbarOpen, setNavbarOpen] = useState(true)
return (
<AppShell
header={{ height: 60 }}
navbar={{
width: desktopOpened ? 200 : 50,
breakpoint: 'sm',
collapsed: { mobile: !mobileOpened },
}}
>
<AppShell.Header>
<Flex h="100%" px="md" w='100%' align='center' gap='sm'>
<Group>
<Burger opened={mobileOpened} onClick={toggleMobile} hiddenFrom="sm" size="sm" />
<Burger opened={desktopOpened} onClick={toggleDesktop} visibleFrom="sm" size="sm" />
</Group>
<div className={classes.root}>
<div className={classes.header}>
<div style={{
display: 'flex',
height: '100%',
width: '100%',
alignItems: 'center',
gap: '0.75rem',
padding: '0.5rem 0.5rem 0.5rem 0.25rem',
}}>
<Button appearance='subtle' onClick={() => setNavbarOpen(!navbarOpen)} icon={<IconMenu2 />} />
<Group w='auto'>
<Text fw='600'>{getPageTitle()}</Text>
</Group>
<Group id='header-portal' w='auto' ml='auto'>
</Group>
<Group style={{ flexShrink: 0 }}>
<Menu
width={260}
position="bottom-end"
transitionProps={{ transition: 'pop-top-right' }}
withinPortal
>
<Menu.Target>
<Button variant='transparent'>
<Group gap={7}>
<Avatar name={`${userData?.name} ${userData?.surname}`} radius="xl" size={30} />
<Text fw={500} size="sm" lh={1} mr={3}>
{`${userData?.name} ${userData?.surname}`}
<Text weight='bold' size={400}>
{getPageTitle()}
</Text>
<IconChevronDown style={{ width: rem(12), height: rem(12) }} stroke={1.5} />
</Group>
</Button>
</Menu.Target>
<Menu.Dropdown>
<Menu.Label>{userData?.login}</Menu.Label>
<Menu.Item
leftSection={
colorScheme === 'dark' ? <IconMoon style={{ width: rem(16), height: rem(16) }} stroke={1.5} /> : <IconSun style={{ width: rem(16), height: rem(16) }} stroke={1.5} />
}
onClick={() => colorScheme === 'dark' ? setColorScheme('light') : setColorScheme('dark')}
>
Тема: {colorScheme === 'dark' ? 'тёмная' : 'светлая'}
</Menu.Item>
<Menu.Item
leftSection={
<IconSettings style={{ width: rem(16), height: rem(16) }} stroke={1.5} />
}
onClick={() => navigate('/settings')}
>
Настройки профиля
</Menu.Item>
<Menu.Item
onClick={() => {
<div id='header-portal' style={{ marginLeft: 'auto' }}>
</div>
<div style={{ flexShrink: 0 }}>
<Menu positioning={{ autoSize: true }}>
<MenuTrigger>
<MenuButton appearance='transparent' icon={<IconUser />}>{`${userData?.name} ${userData?.surname}`}</MenuButton>
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem icon={
colorScheme === 'dark' ? <IconMoon /> : <IconSun />
} onClick={() => colorScheme === 'dark' ? setColorScheme('light') : setColorScheme('dark')}>Тема: {colorScheme === 'dark' ? 'тёмная' : 'светлая'}</MenuItem>
<MenuItem icon={<IconSettings />} onClick={() => navigate('/settings')}>Настройки профиля</MenuItem>
<MenuItem icon={<IconLogout />} onClick={() => {
logout()
navigate("/auth/signin")
}}
leftSection={<IconLogout style={{ width: rem(16), height: rem(16) }} stroke={1.5} />}
>
Выход
</Menu.Item>
<Menu.Item>
<Flex gap='sm' align='center'>
<Image src={'/logo2.svg'} w={32} />
<Text>0.1.0</Text>
</Flex>
</Menu.Item>
</Menu.Dropdown>
}}>Выход</MenuItem>
<MenuItem icon={<Image src={'/logo2.svg'} width={24} />}>
0.1.0
</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
</Group>
</Flex>
</AppShell.Header>
<AppShell.Navbar style={{ transition: "width 0.2s ease" }}>
</div>
</div>
</div>
<div className={classes.main}>
<div className={classes.navbar} style={{
maxWidth: navbarOpen ? '200px' : '2.70rem',
}}>
{pages.filter((page) => page.drawer).filter((page) => page.enabled).map((item) => (
<NavLink
key={item.path}
onClick={() => navigate(item.path)}
label={item.label}
leftSection={item.icon}
active={location.pathname === item.path}
style={{ textWrap: 'nowrap' }}
// styles={(theme, { active }) => ({
// root: {
// color: active ? theme.colors.blue[6] : theme.colors.dark[5],
// fontWeight: active ? "bold" : "normal",
// },
// leftSection: {
// color: active ? theme.colors.blue[6] : theme.colors.dark[5], // Icon color
// }
// })}
/>
<Button key={item.path} style={{ paddingLeft: '0.5rem', flexShrink: 0, flexWrap: 'nowrap', textWrap: 'nowrap', borderRadius: 0 }} appearance='subtle' onClick={() => navigate(item.path)}>
<div style={{ display: 'flex', }}>
{item.icon}
</div>
<div style={{
display: 'flex',
justifyContent: 'flex-start',
width: '100%',
overflow: 'hidden',
marginLeft: '1rem',
}}>
{item.label}
</div>
</Button>
// <NavItem style={{ flexShrink: 0, flexWrap: 'nowrap', textWrap: 'nowrap' }} onClick={() => navigate(item.path)} icon={item.icon} value={item.path}>
// {item.label}
// </NavItem>
))}
</AppShell.Navbar>
<AppShell.Main>
<Flex bg={colorScheme === 'dark' ? undefined : '#E8E8E8'} w={{ sm: desktopOpened ? 'calc(100% - 200px)' : 'calc(100% - 50px)', base: '100%' }} h={'calc(100% - 60px)'} style={{ transition: "width 0.2s ease" }} pos={'fixed'}>
</div>
<div className={classes.content}>
<Outlet />
</Flex>
</AppShell.Main>
</AppShell>
</div>
</div>
</div>
)
// return (
// <AppShell
// header={{ height: 60 }}
// navbar={{
// width: desktopOpened ? 200 : 50,
// breakpoint: 'sm',
// collapsed: { mobile: !mobileOpened },
// }}
// >
// <AppShell.Header>
// <Flex h="100%" px="md" w='100%' align='center' gap='sm'>
// <Group>
// <Burger opened={mobileOpened} onClick={toggleMobile} hiddenFrom="sm" size="sm" />
// <Burger opened={desktopOpened} onClick={toggleDesktop} visibleFrom="sm" size="sm" />
// </Group>
// <Group w='auto'>
// <Text fw='600'>{getPageTitle()}</Text>
// </Group>
// <Group id='header-portal' w='auto' ml='auto'>
// </Group>
// <Group style={{ flexShrink: 0 }}>
// <Menu
// width={260}
// position="bottom-end"
// transitionProps={{ transition: 'pop-top-right' }}
// withinPortal
// >
// <Menu.Target>
// <Button variant='transparent'>
// <Group gap={7}>
// <Avatar name={`${userData?.name} ${userData?.surname}`} radius="xl" size={30} />
// <Text fw={500} size="sm" lh={1} mr={3}>
// {`${userData?.name} ${userData?.surname}`}
// </Text>
// <IconChevronDown style={{ width: rem(12), height: rem(12) }} stroke={1.5} />
// </Group>
// </Button>
// </Menu.Target>
// <Menu.Dropdown>
// <Menu.Label>{userData?.login}</Menu.Label>
// <Menu.Item
// leftSection={
// colorScheme === 'dark' ? <IconMoon style={{ width: rem(16), height: rem(16) }} stroke={1.5} /> : <IconSun style={{ width: rem(16), height: rem(16) }} stroke={1.5} />
// }
// onClick={() => colorScheme === 'dark' ? setColorScheme('light') : setColorScheme('dark')}
// >
// Тема: {colorScheme === 'dark' ? 'тёмная' : 'светлая'}
// </Menu.Item>
// <Menu.Item
// leftSection={
// <IconSettings style={{ width: rem(16), height: rem(16) }} stroke={1.5} />
// }
// onClick={() => navigate('/settings')}
// >
// Настройки профиля
// </Menu.Item>
// <Menu.Item
// onClick={() => {
// logout()
// navigate("/auth/signin")
// }}
// leftSection={<IconLogout style={{ width: rem(16), height: rem(16) }} stroke={1.5} />}
// >
// Выход
// </Menu.Item>
// <Menu.Item>
// <Flex gap='sm' align='center'>
// <Image src={'/logo2.svg'} w={32} />
// <Text>0.1.0</Text>
// </Flex>
// </Menu.Item>
// </Menu.Dropdown>
// </Menu>
// </Group>
// </Flex>
// </AppShell.Header>
// <AppShell.Navbar style={{ transition: "width 0.2s ease" }}>
// {pages.filter((page) => page.drawer).filter((page) => page.enabled).map((item) => (
// <NavLink
// key={item.path}
// onClick={() => navigate(item.path)}
// label={item.label}
// leftSection={item.icon}
// active={location.pathname === item.path}
// style={{ textWrap: 'nowrap' }}
// // styles={(theme, { active }) => ({
// // root: {
// // color: active ? theme.colors.blue[6] : theme.colors.dark[5],
// // fontWeight: active ? "bold" : "normal",
// // },
// // leftSection: {
// // color: active ? theme.colors.blue[6] : theme.colors.dark[5], // Icon color
// // }
// // })}
// />
// ))}
// </AppShell.Navbar>
// <AppShell.Main>
// <Flex bg={colorScheme === 'dark' ? undefined : '#E8E8E8'} w={{ sm: desktopOpened ? 'calc(100% - 200px)' : 'calc(100% - 50px)', base: '100%' }} h={'calc(100% - 60px)'} style={{ transition: "width 0.2s ease" }} pos={'fixed'}>
// <Outlet />
// </Flex>
// </AppShell.Main>
// </AppShell>
// )
}
export default DashboardLayout

17
client/src/layouts/MainLayout.tsx
View File

@ -1,10 +1,21 @@
import { Flex } from "@mantine/core";
import { makeStyles } from "@fluentui/react-components";
import { Outlet } from "react-router-dom";
const useStyles = makeStyles({
root: {
display: 'flex',
justifyContent: 'center',
height: '100%',
width: '100%'
}
})
export default function MainLayout() {
const classes = useStyles()
return (
<Flex align='center' justify='center' h='100%' w='100%'>
<div className={classes.root}>
<Outlet />
</Flex>
</div>
)
}

14
client/src/main.tsx
View File

@ -8,6 +8,7 @@ import './index.css'
import { createTheme, DEFAULT_THEME, MantineProvider, mergeMantineTheme } from '@mantine/core';
import 'dayjs/locale/ru';
import { DatesProvider } from "@mantine/dates";
import { FluentProvider, webLightTheme } from '@fluentui/react-components';
const overrides = createTheme({
// Set this color to `--mantine-color-body` CSS variable
@ -22,9 +23,22 @@ const theme = mergeMantineTheme(DEFAULT_THEME, overrides);
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<MantineProvider theme={theme}>
<FluentProvider theme={webLightTheme}>
<DatesProvider settings={{ locale: 'ru' }}>
<App />
</DatesProvider>
</FluentProvider>
</MantineProvider>
</React.StrictMode>,
)
// ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
// <React.StrictMode>
// <MantineProvider theme={theme}>
// <DatesProvider settings={{ locale: 'ru' }}>
// <App />
// </DatesProvider>
// </MantineProvider>
// </React.StrictMode>,
// )

75
client/src/pages/Boilers.tsx
View File

@ -1,7 +1,7 @@
import { useEffect, useState } from 'react'
import { useBoilers } from '../hooks/swrHooks'
import { Stack, Text } from '@mantine/core'
import CustomTable from '../components/CustomTable'
import { Text } from '@fluentui/react-components'
function Boilers() {
const [boilersPage, setBoilersPage] = useState(1)
@ -25,82 +25,47 @@ function Boilers() {
}, [])
return (
<Stack w={'100%'} h={'100%'} p='sm'>
<Text size="xl" fw={600}>
<div style={{
display: 'flex',
flexDirection: 'column',
padding: '1rem',
width: '100%',
gap: '1rem'
}}>
<Text size={600} weight='bold'>
Котельные
</Text>
{boilers &&
<CustomTable data={boilers} columns={[
{
accessorKey: 'id_object',
name: 'id_object',
header: 'ID',
cell: (info) => info.getValue(),
type: 'string'
},
{
accessorKey: 'boiler_name',
name: 'boiler_name',
header: 'Название',
cell: (info) => info.getValue(),
type: 'string'
},
{
accessorKey: 'boiler_code',
name: 'boiler_code',
header: 'Код',
cell: (info) => info.getValue(),
type: 'string'
},
{
accessorKey: 'id_city',
name: 'id_city',
header: 'Город',
cell: (info) => info.getValue(),
type: 'dictionary'
},
{
accessorKey: 'activity',
name: 'activity',
header: 'Активен',
cell: (info) => info.getValue(),
type: 'boolean'
},
]} />
}
{/* {boilers &&
<Table highlightOnHover>
<Table.Thead>
<Table.Tr>
{boilersColumns.map(column => (
<Table.Th key={column.field}>{column.headerName}</Table.Th>
))}
</Table.Tr>
</Table.Thead>
<Table.Tbody>
{boilers.map((boiler: IBoiler) => (
<Table.Tr key={boiler.id_object}>
{boilersColumns.map(column => {
if (column.field === 'activity') {
return (
boiler.activity ? (
<Table.Td key={`${boiler.id_object}-${boiler[column.field]}`}>
<Badge fullWidth variant="light">
Активен
</Badge>
</Table.Td>
) : (
<Table.Td key={`${boiler.id_object}-${boiler[column.field]}`}>
<Badge color="gray" fullWidth variant="light">
Отключен
</Badge>
</Table.Td>
)
)
}
else return (
<Table.Td key={`${boiler.id_object}-${column.field}`}>{boiler[column.field as keyof IBoiler]}</Table.Td>
)
})}
</Table.Tr>
))}
</Table.Tbody>
</Table>
} */}
</Stack>
</div>
)
}

5
client/src/pages/ComponentTest.tsx
View File

@ -1,11 +1,10 @@
import { Flex } from '@mantine/core'
import ServerHardware from '../components/ServerHardware'
const ComponentTest = () => {
return (
<Flex direction='column' align='flex-start' gap='sm' p='sm'>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '1rem', padding: '1rem' }}>
<ServerHardware />
</Flex>
</div>
)
}

39
client/src/pages/DBManager.tsx
View File

@ -1,36 +1,41 @@
import { Stack, Tabs } from '@mantine/core'
import useSWR from 'swr'
import { BASE_URL } from '../constants'
import { fetcher } from '../http/axiosInstance'
import { useState } from 'react'
import CustomTable from '../components/CustomTable'
import { Tab, TabList } from '@fluentui/react-components'
const DBManager = () => {
const { data: tablesData } = useSWR(`/db/tables`, (key) => fetcher(key, BASE_URL.ems), {
revalidateOnFocus: false
})
const [selectedTab, setSelectedTab] = useState<string | unknown>(undefined)
return (
<Stack w={'100%'} h={'100%'} p='xs'>
<div style={{ display: 'flex', flexDirection: 'column', width: '100%', height: '100%', padding: '0.5rem' }}>
{tablesData && Array.isArray(tablesData) && tablesData.length > 0 &&
<Tabs w='100%' h='80%'>
<Stack h='100%'>
<Tabs.List>
<div style={{ width: '100%', height: '100%' }}>
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
<TabList selectedValue={selectedTab} onTabSelect={(_, data) => setSelectedTab(data.value)}>
{tablesData.map(table => (
<Tabs.Tab key={table.tablename} value={table.tablename}>
<Tab key={table.tablename} value={table.tablename}>
{table.tablename}
</Tabs.Tab>
</Tab>
))}
</Tabs.List>
</TabList>
{tablesData.map(table => (
<Tabs.Panel h='100%' key={table.tablename} value={table.tablename} w='100%'>
<div style={{ width: '100%', height: '100%' }}>
{tablesData.map((table) => {
if (table.tablename === selectedTab)
return (
<TableData tablename={table.tablename} />
</Tabs.Panel>
))}
</Stack>
)
})}
</div>
</div>
</Tabs>
</div>
}
{/* <Card withBorder radius='sm'>
<Stack>
@ -42,7 +47,7 @@ const DBManager = () => {
</Grid>
</Stack>
</Card> */}
</Stack>
</div>
)
}
@ -65,9 +70,9 @@ const TableData = ({
{columnsData && rowsData && Array.isArray(columnsData) && Array.isArray(rowsData) && columnsData.length > 0 &&
<CustomTable data={rowsData} columns={columnsData.map(column => (
{
accessorKey: column.column_name,
name: column.column_name,
header: column.column_name,
cell: (info) => JSON.stringify(info.getValue()).length > 30 ? [JSON.stringify(info.getValue()).substring(0, 30), '...'].join('') : JSON.stringify(info.getValue()),
type: 'string',
}
))} />
}

73
client/src/pages/Fuel.tsx
View File

@ -1,15 +1,15 @@
import { ActionIcon, Button, Flex, Input, Loader, LoadingOverlay, Modal, Overlay, Table, Tabs, TextInput, useMantineColorScheme } from "@mantine/core";
import { IconMathMax, IconPlus, IconTableMinus, IconTablePlus } from "@tabler/icons-react";
import { FuelExpenseDto, FuelExpenseDtoHeaders, FuelLimitDto, FuelLimitDtoHeaders } from "../dto/fuel/fuel.dto";
import { Modal, useMantineColorScheme } from "@mantine/core";
import { IconMathMax, IconPlus, IconTableMinus } from "@tabler/icons-react";
import { FuelExpenseDtoHeaders, FuelLimitDtoHeaders } from "../dto/fuel/fuel.dto";
import useSWR from "swr";
import { fetcher } from "../http/axiosInstanceNest";
import { useEffect, useState } from "react";
import { useDisclosure } from "@mantine/hooks";
import { DateInput, DatePicker } from '@mantine/dates'
import { DateInput } from '@mantine/dates'
import { SubmitHandler, useForm } from "react-hook-form";
import { AgGridReact } from "ag-grid-react";
import { AllCommunityModule, ColDef, ModuleRegistry } from 'ag-grid-community'
import { Button, Field, Input, Spinner, Tab, TabList } from "@fluentui/react-components";
ModuleRegistry.registerModules([AllCommunityModule])
@ -92,9 +92,9 @@ export default function FuelPage() {
const [currentTab, setCurrentTab] = useState(tables[0])
const { data, isLoading } = useSWR(currentTab.get, () => fetcher(currentTab.get), { revalidateOnFocus: false })
const { isLoading } = useSWR(currentTab.get, () => fetcher(currentTab.get), { revalidateOnFocus: false })
const [openedCreateModal, { open: openCreateModal, close: closeCreateModal }] = useDisclosure(false)
const [openCreateModel, setOpenCreateModal] = useState(false)
const { colorScheme } = useMantineColorScheme()
@ -108,32 +108,34 @@ export default function FuelPage() {
return (
<>
<ModalCreate openedCreateModal={openedCreateModal} closeCreateModal={closeCreateModal} currentTab={currentTab} />
<ModalCreate openedCreateModal={openCreateModel} closeCreateModal={() => setOpenCreateModal(false)} currentTab={currentTab} />
<Tabs defaultValue={tables[0].value} w='100%' onChange={(tab) => setCurrentTab(tables.find(table => table.value === tab) || tables[0])}>
<Tabs.List>
<div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
<TabList defaultValue={tables[0].value} selectedValue={currentTab.value}>
{tables.map((table, index) => (
<Tabs.Tab key={index} value={table.value} leftSection={table.icon}>
<Tab key={index} value={table.value} icon={table.icon} onClick={() => setCurrentTab(table)}>
{table.label}
</Tabs.Tab>
</Tab>
))}
</Tabs.List>
</TabList>
<Flex p='sm'>
<Button leftSection={<IconPlus />} onClick={openCreateModal}>
<div style={{ display: 'flex', padding: '1rem' }}>
<Button appearance='primary' icon={<IconPlus />} onClick={() => setOpenCreateModal(true)}>
Добавить
</Button>
</Flex>
</div>
{tables.map((table, index) => (
<Tabs.Panel key={index} value={table.value} w='100%' h='100%'>
{isLoading ?
<Flex w='100%' justify={'center'} p='md'>
<Loader />
</Flex>
{tables.map((table, index) => {
if (table.value === currentTab.value) {
return (
isLoading ?
<div style={{ display: 'flex', width: '100%', justifyContent: 'center', padding: '1rem' }}>
<Spinner />
</div>
:
<>
<AgGridReact
key={index}
//rowData={data}
rowData={[
Object.keys(table.headers).reduce((obj, key) => ({ ...obj, [key]: 'test' }), {}),
@ -147,10 +149,11 @@ export default function FuelPage() {
}}
/>
</>
)
}
</Tabs.Panel>
))}
</Tabs>
}
)}
</div>
</>
)
}
@ -164,7 +167,9 @@ const ModalCreate = ({
closeCreateModal: () => void
currentTab: ITableSchema
}) => {
const { register, handleSubmit, reset, watch, formState: { errors, isSubmitting, dirtyFields, isValid } } = useForm({
const { register, handleSubmit,
//formState: { errors, isSubmitting, dirtyFields, isValid }
} = useForm({
mode: 'onChange',
})
@ -174,9 +179,7 @@ const ModalCreate = ({
return (
<Modal withinPortal opened={openedCreateModal} onClose={closeCreateModal}>
<LoadingOverlay visible={isSubmitting} />
<Flex direction='column' gap='sm' component='form' onSubmit={handleSubmit(onSubmit)}>
<form style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }} onSubmit={handleSubmit(onSubmit)}>
{currentTab.post_include.map((header, index) => {
switch (header.field_type) {
case 'date':
@ -185,23 +188,27 @@ const ModalCreate = ({
)
case 'text':
return (
<TextInput key={index} label={header.field} {...register(header.field, {
<Field key={index} label={header.field}>
<Input {...register(header.field, {
required: true
})} />
</Field>
)
default:
return (
<TextInput key={index} label={header.field} {...register(header.field, {
<Field key={index} label={header.field}>
<Input {...register(header.field, {
required: true
})} />
</Field>
)
}
})}
<Button mt='xl' type='submit'>
<Button style={{ marginTop: '2rem' }} appearance="primary" type='submit'>
Добавить
</Button>
</Flex>
</form>
</Modal>
)
}

59
client/src/pages/Main.tsx
View File

@ -1,6 +1,6 @@
import { Card, Flex, SimpleGrid, Text } from "@mantine/core";
import { IconBuildingFactory2, IconFiles, IconMap, IconReport, IconServer, IconShield, IconUsers } from "@tabler/icons-react";
import { ReactNode } from "react";
import { CompoundButton, Text } from "@fluentui/react-components";
import { BuildingColor, CloudColor, DocumentColor, FormColor, MapFilled, PeopleListColor, ShieldColor } from "@fluentui/react-icons";
//import { IconBuildingFactory2, IconFiles, IconMap, IconReport, IconServer, IconShield, IconUsers } from "@tabler/icons-react";
import { useNavigate } from "react-router-dom";
export default function Main() {
@ -8,47 +8,56 @@ export default function Main() {
interface CustomCardProps {
link: string;
icon: ReactNode;
icon: any;
label: string;
secondaryLabel?: string;
}
const CustomCard = ({
link,
icon,
label
label,
secondaryLabel
}: CustomCardProps) => {
return (
<Card
<CompoundButton
onClick={() => navigate(link)}
withBorder
style={{ cursor: 'pointer', userSelect: 'none' }}
icon={icon}
secondaryContent={secondaryLabel}
>
<Flex mih='50'>
{icon}
</Flex>
<Text fw={500} size="lg" mt="md">
<Text weight={'bold'} size={400}>
{label}
</Text>
</Card>
</CompoundButton>
)
}
return (
<Flex w={'100%'} h={'100%'} direction='column' gap='sm' p='sm'>
<Text size="xl" fw={700}>
<div style={{
display: 'flex',
flexDirection: 'column',
width: '100%',
gap: '1rem',
padding: '1rem'
}}>
<Text size={600} weight='bold'>
Главная
</Text>
<SimpleGrid cols={{ xs: 1, md: 3 }}>
<CustomCard link="/user" icon={<IconUsers size='50' color="#6495ED" />} label="Пользователи" />
<CustomCard link="/role" icon={<IconShield size='50' color="#6495ED" />} label="Роли" />
<CustomCard link="/documents" icon={<IconFiles size='50' color="#6495ED" />} label="Документы" />
<CustomCard link="/reports" icon={<IconReport size='50' color="#6495ED" />} label="Отчеты" />
<CustomCard link="/servers" icon={<IconServer size='50' color="#6495ED" />} label="Серверы" />
<CustomCard link="/boilers" icon={<IconBuildingFactory2 size='50' color="#6495ED" />} label="Котельные" />
<CustomCard link="/map-test" icon={<IconMap size='50' color="#6495ED" />} label="ИКС" />
</SimpleGrid>
</Flex>
<div style={{
display: 'flex',
gap: '1rem',
flexWrap: 'wrap'
}}>
<CustomCard link="/user" icon={<PeopleListColor color="#6495ED" />} label="Пользователи" secondaryLabel="Управление пользователями"/>
<CustomCard link="/role" icon={<ShieldColor color="#6495ED" />} label="Роли" />
<CustomCard link="/documents" icon={<DocumentColor color="#6495ED" />} label="Документы" secondaryLabel="Обзор файлов/документов"/>
<CustomCard link="/reports" icon={<FormColor color="#6495ED" />} label="Отчеты" secondaryLabel="Просмотр и создание отчетных документов"/>
<CustomCard link="/servers" icon={<CloudColor color="#6495ED" />} label="Серверы" secondaryLabel="Мониторинг серверов"/>
<CustomCard link="/boilers" icon={<BuildingColor color="#6495ED" />} label="Котельные" />
<CustomCard link="/map-test" icon={<MapFilled color="#6495ED" />} label="ИКС" secondaryLabel="Инженерно-картографическая система"/>
</div>
</div>
)
}

99
client/src/pages/MapTest.tsx
View File

@ -1,14 +1,19 @@
import { Container, Stack, Tabs } from '@mantine/core'
import MapComponent from '../components/map/MapComponent'
import { useEffect } from 'react'
import { initializeObjectsState } from '../store/objects'
import { deleteMapTab, setCurrentTab, useAppStore } from '../store/app'
import { initializeMapState, useMapStore } from '../store/map'
import { v4 as uuidv4 } from 'uuid'
import { useEffect } from "react";
import { v4 as uuidv4 } from "uuid";
import { Tab, TabList } from "@fluentui/react-tabs";
import MapComponent from "../components/map/MapComponent";
import {
useAppStore,
setCurrentTab,
deleteMapTab,
} from "../store/app";
import { initializeMapState, useMapStore } from "../store/map";
import { initializeObjectsState } from "../store/objects";
function MapTest() {
const { mapTab, currentTab } = useAppStore()
const { id } = useMapStore()
const { mapTab, currentTab } = useAppStore();
const { id } = useMapStore();
const tabs = [
{
@ -23,12 +28,13 @@ function MapTest() {
// region: 11,
// district: 146,
// },
]
];
useEffect(() => {
tabs.map(tab => useAppStore.setState((state) => {
initializeObjectsState(tab.id, tab.region, tab.district, null, tab.year)
initializeMapState(tab.id)
tabs.forEach((tab) => {
useAppStore.setState((state) => {
initializeObjectsState(tab.id, tab.region, tab.district, null, tab.year);
initializeMapState(tab.id);
return {
mapTab: {
@ -36,47 +42,46 @@ function MapTest() {
[tab.id]: {
year: tab.year,
region: tab.region,
district: tab.district
}
}
}
}))
district: tab.district,
},
},
};
});
});
setCurrentTab(tabs[0].id)
setCurrentTab(tabs[0].id);
return () => {
tabs.map(tab => deleteMapTab(tab.id))
}
}, [])
tabs.forEach((tab) => deleteMapTab(tab.id));
};
}, []);
return (
<Container fluid w='100%' pos='relative' p={0}>
<Tabs h='100%' variant='default' value={currentTab} onChange={setCurrentTab} keepMounted={true}>
<Stack gap={0} h='100%'>
<Tabs.List>
<div style={{ height: "100%", width: "100%", position: "relative" }}>
<div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
<TabList
selectedValue={currentTab}
onTabSelect={(_, data) => setCurrentTab(data.value as string)}
>
{Object.entries(mapTab).map(([key]) => (
<Tabs.Tab value={key} key={key}>
{id[key]?.mapLabel}
</Tabs.Tab>
<Tab value={key} key={key}>
{id[key]?.mapLabel ?? `Tab ${key}`}
</Tab>
))}
</Tabs.List>
</TabList>
{Object.entries(mapTab).map(([key]) => (
<Tabs.Panel value={key} key={key} h='100%' pos='relative'>
<MapComponent
key={key}
id={key}
active={currentTab === key}
/>
</Tabs.Panel>
))}
</Stack>
</Tabs>
</Container>
)
<div style={{ flexGrow: 1, position: "relative" }}>
{Object.entries(mapTab).map(([key]) =>
currentTab === key ? (
<div key={key} style={{ height: "100%", position: "relative" }}>
<MapComponent key={key} id={key} active={true} />
</div>
) : null
)}
</div>
</div>
</div>
);
}
export default MapTest
export default MapTest;

14
client/src/pages/MonitorPage.tsx
View File

@ -1,5 +1,5 @@
import { Card } from '@fluentui/react-components';
import { useEffect, useState } from 'react'
import { Card, Flex } from '@mantine/core';
function CardComponent({
url,
@ -7,10 +7,10 @@ function CardComponent({
}: { url: string, is_alive: boolean }) {
return (
<Card>
<Flex p='sm' direction='column'>
<div>
<p>{url}</p>
<p>{JSON.stringify(is_alive)}</p>
</Flex>
</div>
</Card>
)
}
@ -38,11 +38,15 @@ export default function MonitorPage() {
return (
<div>
<Flex direction='column' gap='sm'>
<div style={{
display: 'flex',
flexDirection: 'column',
gap: '1rem'
}}>
{servers.length > 0 && servers.map((server: { name: string, status: boolean }) => (
<CardComponent url={server.name} is_alive={server.status} />
))}
</Flex>
</div>
</div>
)
}

26
client/src/pages/NotFound.tsx
View File

@ -1,15 +1,29 @@
import { Flex, Text } from "@mantine/core";
import { Text } from "@fluentui/react-components";
import { makeStyles } from "@fluentui/react-components";
import { IconError404 } from "@tabler/icons-react";
const useStyles = makeStyles({
root: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center'
}
})
export default function NotFound() {
const classes = useStyles()
return (
<Flex w={'100%'} h={'100%'} p='sm' gap='sm' align='center' justify='center'>
<Flex direction='column' gap='sm' align='center'>
<div style={{
width: '100%',
height: '100%',
}}>
<div className={classes.root}>
<IconError404 size={100} />
<Text size="xl" fw={500} ta='center'>
<Text size={500} weight='medium' align='center'>
Запрашиваемая страница не найдена.
</Text>
</Flex>
</Flex>
</div>
</div>
)
}

63
client/src/pages/PrintReport.tsx
View File

@ -1,10 +1,10 @@
import { ActionIcon, Button, Flex, Group, Stack, Text, TextInput } from "@mantine/core"
import { useEffect, useState } from "react"
import createReport, { listCommands } from 'docx-templates'
import { Dropzone, IMAGE_MIME_TYPE } from '@mantine/dropzone'
import { IconFileTypeDocx, IconPlus, IconUpload, IconX } from "@tabler/icons-react"
import { CommandSummary } from "docx-templates/lib/types"
import { Control, Controller, FieldValues, SubmitHandler, useFieldArray, useForm, UseFormRegister } from "react-hook-form"
import { Button, Field, Input, Text } from "@fluentui/react-components"
const xslTemplate = `<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
@ -1024,11 +1024,11 @@ const FormLoop = ({
})
return (
<Stack align="center">
<Stack w='100%' key={command.code}>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<div style={{ display: 'flex', flexDirection: 'column', width: '100%' }} key={command.code}>
{
fields.map((field, index) => (
<Flex w='100%' justify='space-between' align='flex-end' key={field.id}>
<div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'flex-end' }} key={field.id}>
{command.children &&
command.children.map(c =>
renderCommand(
@ -1040,27 +1040,25 @@ const FormLoop = ({
`${command.code}.${index}.${c.code}`
)
)}
<Button variant='subtle' onClick={() => {
<Button appearance='subtle' onClick={() => {
remove(index)
}}>
<IconX />
</Button>
</Flex>
</div>
))
}
</Stack>
</div>
<ActionIcon onClick={() => {
<Button icon={<IconPlus />} onClick={() => {
if (command.children) {
append(command.children.map(c => c.code).reduce((acc, key) => {
acc[key] = '';
return acc;
}, {} as Record<string, string>))
}
}}>
<IconPlus />
</ActionIcon>
</Stack>
}} />
</div>
)
}
@ -1074,18 +1072,17 @@ const renderCommand = (
) => {
if (command.type === 'INS') {
return (
<TextInput
label={label}
key={key}
{...register(name)}
/>
<Field label={label}
key={key}>
<Input {...register(name)} />
</Field>
)
}
if (command.type === 'IMAGE') {
return (
<Stack gap={0}>
<Text size='sm' fw={500}>{command.code}</Text>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Text size={200} weight="semibold">{command.code}</Text>
<Controller
key={key}
name={name}
@ -1108,7 +1105,7 @@ const renderCommand = (
}}
maxFiles={1}
>
<Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
<div style={{ display: 'flex', justifyContent: 'center', gap: '2rem', minHeight: '220px', pointerEvents: 'none' }}>
<Dropzone.Accept>
<IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
</Dropzone.Accept>
@ -1120,15 +1117,15 @@ const renderCommand = (
</Dropzone.Idle>
<div>
<Text size="xl" inline>
<Text size={300}>
Перетащите файлы сюда или нажмите, чтобы выбрать их
</Text>
</div>
</Group>
</div>
</Dropzone>
)}
/>
</Stack>
</div>
)
}
}
@ -1240,21 +1237,21 @@ const TemplateForm = ({
if (commandList) {
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Stack>
<div style={{ display: 'flex', flexDirection: 'column' }}>
{commandList.map(command => {
if (command.type === 'FOR') {
return (
<Stack gap={0} key={command.code}>
<Text size='sm' fw={500}>{command.code}</Text>
<div style={{ display: 'flex', flexDirection: 'column' }} key={command.code}>
<Text size={200} weight='semibold'>{command.code}</Text>
<FormLoop control={control} register={register} command={command} />
</Stack>
</div>
)
} else {
return renderCommand(control, register, command, command.code, command.code, command.code)
}
})}
<Button ml='auto' w='fit-content' type='submit'>Сохранить</Button>
</Stack>
<Button style={{ marginLeft: 'auto', width: 'fit-content' }} type='submit'>Сохранить</Button>
</div>
</form>
)
}
@ -1262,13 +1259,13 @@ const TemplateForm = ({
const PrintReport = () => {
return (
<Stack p='sm' gap='sm' w='100%'>
<div style={{ display: 'flex', flexDirection: 'column', padding: '1rem', gap: '1rem', width: '100%' }}>
<TemplateForm templateUrl="/template_table.docx" />
<Flex gap='sm'>
<div style={{ display: 'flex', gap: '1rem' }}>
<Button onClick={handleGenerateExcel}>Сохранить в Excel</Button>
</Flex>
</Stack>
</div>
</div>
)
}

198
client/src/pages/Reports.tsx
View File

@ -3,8 +3,8 @@ import { useCities, useReport, useReportExport } from "../hooks/swrHooks"
import { useDebounce } from "@uidotdev/usehooks"
import { ICity } from "../interfaces/fuel"
import { mutate } from "swr"
import { ActionIcon, Autocomplete, Badge, Button, CloseButton, Flex, ScrollAreaAutosize, Table } from "@mantine/core"
import { IconRefresh } from "@tabler/icons-react"
import { Badge, Button, Combobox, createTableColumn, DataGrid, DataGridBody, DataGridCell, DataGridHeader, DataGridHeaderCell, DataGridRow, Option, TableCellLayout, TableColumnDefinition } from "@fluentui/react-components"
export default function Reports() {
const [download, setDownload] = useState(false)
@ -40,99 +40,125 @@ export default function Reports() {
}
return (
<ScrollAreaAutosize w={'100%'} h={'100%'} p='sm'>
<Flex component="form" gap={'sm'}>
<div style={{
width: '100%',
height: '100%',
padding: '1rem'
}}>
<form style={{
display: 'flex',
gap: '0.5rem'
}}>
{/* <SearchableSelect /> */}
<Autocomplete
placeholder="Населенный пункт"
flex={'1'}
data={cities ? cities.map((item: ICity) => ({ label: item.name, value: item.id.toString() })) : []}
onSelect={(e) => console.log(e.currentTarget.value)}
onChange={(value) => setSearch(value)}
onOptionSubmit={(value) => setSelectedOption(Number(value))}
rightSection={
search !== '' && (
<CloseButton
size="sm"
onMouseDown={(event) => event.preventDefault()}
onClick={() => {
setSearch('')
setSelectedOption(null)
}}
aria-label="Clear value"
/>
)
}
value={search}
/>
<Combobox clearable placeholder="Населенный пункт" onOptionSelect={(_, data) => {
setSelectedOption(Number(data.optionValue))
setSearch(data.optionText ?? "")
}} value={search} onChange={(e) => setSearch(e.currentTarget.value)}>
{cities && Array.isArray(cities) && cities.map((item: ICity) => (
<Option key={item.id} value={item.id.toString()}>
{item.name}
</Option>
))}
</Combobox>
<ActionIcon size='auto' variant='transparent' onClick={() => refreshReport()}>
<IconRefresh />
</ActionIcon>
<Button icon={<IconRefresh />} appearance="subtle" onClick={() => refreshReport()}>
</Button>
<Button disabled={!selectedOption} onClick={() => exportReport()}>
Экспорт
</Button>
</Flex>
</form>
<div style={{
display: 'flex',
width: '100%',
overflow: 'auto'
}}>
{report &&
<Table highlightOnHover>
<Table.Thead>
<Table.Tr>
{[
{ field: 'id', headerName: '№', width: 70 },
...Object.keys(report).map(key => ({
field: key,
headerName: key.charAt(0).toUpperCase() + key.slice(1),
width: 150
}))
].map(column => (
<Table.Th key={column.headerName}>{column.headerName}</Table.Th>
))}
</Table.Tr>
</Table.Thead>
<Table.Tbody>
{[...new Set(Object.keys(report).flatMap(key => Object.keys(report[key])))].map(id => {
const row: Record<string, unknown> = { id: Number(id) };
Object.keys(report).forEach(key => {
row[key] = report[key][id];
});
return (<Table.Tr key={row.id as number}>
{[
{ field: 'id', headerName: '№', width: 70 },
...Object.keys(report).map(key => ({
field: key,
headerName: key.charAt(0).toUpperCase() + key.slice(1),
width: 150
}))
].map(column => {
if (column.field === 'Активность') {
return (
row['Активность'] ? (
<Table.Td key={`${row.id}-${column.headerName}`}>
<Badge fullWidth variant="light">
Активен
</Badge>
</Table.Td>
<ReportTable report={report} />
}
</div>
) : (
<Table.Td key={`${row.id}-${column.headerName}`}>
<Badge color="gray" fullWidth variant="light">
Отключен
</Badge>
</Table.Td>
)
)
}
return (
<Table.Td key={`${row.id}-${column.headerName}`}>{row[column.field] as string}</Table.Td>
)
})}
</Table.Tr>)
})}
</Table.Tbody>
</Table>
}
</ScrollAreaAutosize>
</div>
)
}
interface ReportType {
[key: string]: Record<string, unknown>;
}
function ReportTable({ report }: { report: ReportType }) {
// Build column definitions
const columns: TableColumnDefinition<any>[] = [
createTableColumn({
columnId: "id",
renderHeaderCell: () => {
return "№"
},
renderCell: (item) => <TableCellLayout>{item.id}</TableCellLayout>,
}),
...Object.keys(report).map((key) =>
createTableColumn({
columnId: key,
renderHeaderCell: () => {
return key.charAt(0).toUpperCase() + key.slice(1)
},
renderCell: (item: any) => {
if (key === "Активность") {
return (
<TableCellLayout>
{item["Активность"] ? (
<Badge color="success">Активен</Badge>
) : (
<Badge color="danger">Отключен</Badge>
)}
</TableCellLayout>
);
}
return <TableCellLayout>{item[key] as string}</TableCellLayout>;
},
})
),
];
// Build rows from report (same logic you used)
const items = [...new Set(Object.keys(report).flatMap((key) => Object.keys(report[key])))]
.map((id) => {
const row: Record<string, unknown> = { id: Number(id) };
Object.keys(report).forEach((key) => {
row[key] = report[key][id];
});
return row;
});
return (
<DataGrid
items={items}
columns={columns}
sortable
focusMode='row_unstable'
resizableColumns
resizableColumnsOptions={{ autoFitColumns: false }}
size='extra-small'
>
<DataGridHeader>
<DataGridRow>
{({ renderHeaderCell }) => (
<DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
)}
</DataGridRow>
</DataGridHeader>
<DataGridBody>
{({ item, rowId }) => (
<DataGridRow key={rowId}>
{({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
</DataGridRow>
)}
</DataGridBody>
</DataGrid>
);
}

24
client/src/pages/Roles.tsx
View File

@ -1,8 +1,8 @@
import { useRoles } from '../hooks/swrHooks'
import { CreateField } from '../interfaces/create'
import RoleService from '../services/RoleService'
import { Loader, Stack } from '@mantine/core'
import CustomTable from '../components/CustomTable'
import { Spinner } from '@fluentui/react-components'
export default function Roles() {
const { roles, isError, isLoading } = useRoles()
@ -13,30 +13,34 @@ export default function Roles() {
]
if (isError) return <div>Произошла ошибка при получении данных.</div>
if (isLoading) return <Loader />
if (isLoading) return <Spinner />
return (
<Stack w={'100%'} h={'100%'} p='sm'>
<div style={{
width: '100%',
height: '100%',
padding: '1rem'
}} >
<CustomTable
createFields={createFields}
submitHandler={RoleService.createRole}
data={roles} columns={[
{
accessorKey: 'id',
name: 'id',
header: 'id',
cell: (info) => info.getValue(),
type: 'number'
},
{
accessorKey: 'name',
name: 'name',
header: 'Название',
cell: (info) => info.getValue(),
type: 'string'
},
{
accessorKey: 'description',
name: 'description',
header: 'Описание',
cell: (info) => info.getValue(),
type: 'string'
},
]} />
</Stack>
</div>
)
}

76
client/src/pages/Servers.tsx
View File

@ -3,46 +3,52 @@ import ServersView from "../components/ServersView"
import ServerIpsView from "../components/ServerIpsView"
import ServerHardware from "../components/ServerHardware"
import ServerStorage from "../components/ServerStorages"
import { Flex, ScrollAreaAutosize, Tabs } from "@mantine/core"
import { Tab, TabList } from "@fluentui/react-components"
export default function Servers() {
const [currentTab, setCurrentTab] = useState<string | null>('0')
const tabs = [{
id: 'servers',
name: 'Серверы',
content: <ServersView />
},
{
id: 'ips',
name: 'IP-адреса',
content: <ServerIpsView />
},
{
id: 'hardware',
name: 'Hardware',
content: <ServerHardware />
},
{
id: 'storage',
name: 'Хранилище',
content: <ServerStorage />
}
]
const [selectedTab, setSelectedTab] = useState<string | unknown>(tabs[0].id)
return (
<ScrollAreaAutosize w={'100%'} h={'100%'} p='sm'>
<Flex gap='sm' direction='column'>
<Tabs value={currentTab} onChange={setCurrentTab}>
<Tabs.List>
<Tabs.Tab value="0">Серверы</Tabs.Tab>
<Tabs.Tab value="1">IP-адреса</Tabs.Tab>
<Tabs.Tab value="3">Hardware</Tabs.Tab>
<Tabs.Tab value="4">Storages</Tabs.Tab>
</Tabs.List>
<div style={{
display: 'flex',
flexDirection: 'column',
width: '100%',
height: '100%',
gap: '1rem',
padding: '1rem'
}}>
<TabList selectedValue={selectedTab} onTabSelect={(_, data) => setSelectedTab(data.value)}>
{tabs.map(tab => (
<Tab value={tab.id}>{tab.name}</Tab>
))}
</TabList>
<Tabs.Panel value="0" pt='sm'>
<ServersView />
</Tabs.Panel>
<div>
{tabs.find(tab => tab.id === selectedTab)?.content}
</div>
</div>
<Tabs.Panel value="1" pt='sm'>
<ServerIpsView />
</Tabs.Panel>
<Tabs.Panel value="2" pt='sm'>
<ServerHardware />
</Tabs.Panel>
<Tabs.Panel value="3" pt='sm'>
<ServerStorage />
</Tabs.Panel>
</Tabs>
</Flex>
{/* <BarChart
xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
width={500}
height={300}
/> */}
</ScrollAreaAutosize>
)
}

22
client/src/pages/Settings.tsx
View File

@ -5,7 +5,6 @@ import { CreateField } from "../interfaces/create"
import { IUser } from "../interfaces/user"
import FormFields from "../components/FormFields"
import AuthService from "../services/AuthService"
import { Flex, ScrollAreaAutosize } from "@mantine/core"
export default function Settings() {
const { token } = useAuthStore()
@ -39,13 +38,20 @@ export default function Settings() {
]
return (
<ScrollAreaAutosize
w={'100%'}
h={'100%'}
p='sm'
<div
style={{
width: '100%',
height: '100%',
padding: '1rem'
}}
>
{currentUser &&
<Flex direction='column' gap='sm' w='100%'>
<div style={{
display: 'flex',
flexDirection: 'column',
width: '100%',
gap: '1rem'
}}>
<FormFields
fields={profileFields}
defaultValues={currentUser}
@ -61,8 +67,8 @@ export default function Settings() {
submitHandler={(data) => AuthService.updatePassword({ id: currentUser.id, ...data })}
title="Смена пароля"
/>
</Flex>
</div>
}
</ScrollAreaAutosize>
</div>
)
}

67
client/src/pages/Users.tsx
View File

@ -3,8 +3,9 @@ import { IRole } from "../interfaces/role"
import { useEffect, useState } from "react"
import { CreateField } from "../interfaces/create"
import UserService from "../services/UserService"
import { Flex, Loader, Stack } from "@mantine/core"
import CustomTable from "../components/CustomTable"
import { Spinner } from "@fluentui/react-components"
import { IUser } from "../interfaces/user"
export default function Users() {
const { users, isError, isLoading } = useUsers()
@ -13,12 +14,20 @@ export default function Users() {
const [roleOptions, setRoleOptions] = useState<{ label: string, value: string }[]>()
const [data, setData] = useState<IUser[]>([])
useEffect(() => {
if (Array.isArray(roles)) {
setRoleOptions(roles.map((role: IRole) => ({ label: role.name, value: role.id.toString() })))
}
}, [roles])
useEffect(() => {
if (users) {
setData(users)
}
}, [users])
const createFields: CreateField[] = [
{ key: 'email', headerName: 'E-mail', type: 'string', required: true, defaultValue: '' },
{ key: 'login', headerName: 'Логин', type: 'string', required: true, defaultValue: '' },
@ -36,57 +45,71 @@ export default function Users() {
if (isLoading) {
return (
<Flex direction='column' align='flex-start' gap='sm' p='sm'>
<Loader />
</Flex>
<div>
<Spinner />
</div>
)
}
return (
<Stack w={'100%'} h={'100%'} p='xs'>
{Array.isArray(roleOptions) &&
<div style={{
display: 'flex',
flexDirection: 'column',
width: '100%',
height: '100%',
padding: '1rem'
}}>
{Array.isArray(roleOptions) && Array.isArray(data) &&
<CustomTable
createFields={createFields}
submitHandler={UserService.createUser}
data={users}
data={data}
onEditCell={(rowId, columnId, value) => {
console.log(rowId, columnId, value)
setData((prev) =>
prev.map((row) =>
row.id === rowId ? { ...row, [columnId]: value } : row
)
)
}}
columns={[
{
accessorKey: 'email',
name: 'email',
header: 'E-mail',
cell: (info) => info.getValue(),
type: "string"
},
{
accessorKey: 'login',
name: 'login',
header: 'Логин',
cell: (info) => info.getValue(),
type: "string"
},
{
accessorKey: 'phone',
name: 'phone',
header: 'Телефон',
cell: (info) => info.getValue(),
type: "string"
},
{
accessorKey: 'name',
name: 'name',
header: 'Имя',
cell: (info) => info.getValue(),
type: "string"
},
{
accessorKey: 'surname',
name: 'surname',
header: 'Фамилия',
cell: (info) => info.getValue(),
type: "string"
},
{
accessorKey: 'is_active',
name: 'is_active',
header: 'Активен',
cell: (info) => info.getValue(),
type: "boolean"
},
{
accessorKey: 'role_id',
name: 'role_id',
header: 'Роль',
cell: (info) => info.getValue(),
type: "dictionary" //TODO: dictionary getter by id
}
]} />
}
</Stack>
</div>
)
}

82
client/src/pages/auth/PasswordReset.tsx
View File

@ -1,8 +1,8 @@
import { useState } from 'react'
import { SubmitHandler, useForm } from 'react-hook-form';
import AuthService from '../../services/AuthService';
import { Button, Flex, Loader, Paper, Text, TextInput, Transition } from '@mantine/core';
import { IconCheck } from '@tabler/icons-react';
import { Button, Input, Spinner, Text } from '@fluentui/react-components';
interface PasswordResetProps {
email: string;
@ -11,7 +11,7 @@ interface PasswordResetProps {
function PasswordReset() {
const [success, setSuccess] = useState(false)
const { register, handleSubmit, watch, setError, formState: { errors, isSubmitting } } = useForm<PasswordResetProps>({
const { register, handleSubmit, watch, setError, formState: { isSubmitting } } = useForm<PasswordResetProps>({
defaultValues: {
email: ''
}
@ -31,65 +31,81 @@ function PasswordReset() {
}
return (
<Paper flex={1} maw='500' withBorder radius='md' p='xl'>
<Flex direction='column' gap='sm'>
<Text size="xl" fw={500}>
<div style={{
display: 'flex',
margin: 'auto',
flexDirection: 'column',
gap: '1rem',
maxWidth: '400px',
width: '100%',
height: 'min-content',
borderRadius: '1rem',
border: '1px solid #00000030',
padding: '2rem'
}}>
<Text size={600} weight='medium'>
Восстановление пароля
</Text>
<form onSubmit={handleSubmit(onSubmit)}>
{!success &&
<Transition mounted={!success} transition='fade'>
{(styles) =>
<Flex style={styles} direction='column' gap={'md'}>
<div style={{
display: 'flex',
flexDirection: 'column',
gap: '1rem'
}}>
<Text>
Введите адрес электронной почты, на который будут отправлены новые данные для авторизации:
</Text>
<TextInput
label='E-mail'
<Input
placeholder='E-mail'
required
{...register('email', { required: 'Введите E-mail' })}
error={errors.email?.message}
//error={errors.email?.message}
/>
<Flex gap='sm'>
<Button flex={1} type="submit" disabled={isSubmitting || watch('email').length == 0} variant='filled'>
{isSubmitting ? <Loader size={16} /> : 'Восстановить пароль'}
<div style={{
display: 'flex',
width: '100%',
justifyContent: 'space-between'
}}>
<Button type="submit" disabled={isSubmitting || watch('email').length == 0} appearance='primary'>
{isSubmitting ? <Spinner /> : 'Восстановить пароль'}
</Button>
<Button flex={1} component='a' href="/auth/signin" type="button" variant='light'>
<Button as='a' href="/auth/signin" type="button" appearance='subtle'>
Назад
</Button>
</Flex>
</div>
</Flex>
}
</Transition>
</div>
}
{success &&
<Transition mounted={!success} transition='scale'>
{(styles) =>
<Flex style={styles} direction='column' gap='sm'>
<Flex align='center' gap='sm'>
<div style={{
display: 'flex',
flexDirection: 'column',
gap: '1rem'
}}>
<div style={{
display: 'flex',
alignItems: 'center',
gap: '1rem'
}}>
<IconCheck />
<Text>
На указанный адрес было отправлено письмо с новыми данными для авторизации.
</Text>
</Flex>
<Flex gap='sm'>
<Button component='a' href="/auth/signin" type="button">
</div>
<div style={{ display: 'flex' }}>
<Button as='a' href="/auth/signin" type="button">
Войти
</Button>
</Flex>
</Flex>
}
</Transition>
</div>
</div>
}
</form>
</Flex>
</Paper>
</div>
)
}

63
client/src/pages/auth/SignIn.tsx
View File

@ -5,7 +5,8 @@ import { login, setUserData } from '../../store/auth';
import { useNavigate } from 'react-router-dom';
import AuthService from '../../services/AuthService';
import UserService from '../../services/UserService';
import { Button, Flex, Loader, Paper, Text, TextInput } from '@mantine/core';
import { Button, Field, Input, Link, Spinner, Text } from '@fluentui/react-components';
import { pages } from '../../constants/app';
const SignIn = () => {
const { register, handleSubmit, setError, formState: { errors, isSubmitting, isValid } } = useForm<LoginFormData>({
@ -46,53 +47,63 @@ const SignIn = () => {
message: (err as { detail: string })?.detail
})
}
}
};
return (
<Paper flex={1} maw='500' withBorder radius='md' p='xl'>
<Flex direction='column' gap='sm'>
<Text size="xl" fw={500}>
<div style={{
display: 'flex',
margin: 'auto',
flexDirection: 'column',
gap: '1rem',
maxWidth: '400px',
width: '100%',
height: 'min-content',
borderRadius: '1rem',
border: '1px solid #00000030',
padding: '2rem'
}}>
<Text align='center' size={500} weight='bold'>
Вход
</Text>
<form onSubmit={handleSubmit(onSubmit)}>
<Flex direction='column' gap='sm'>
<TextInput
label='Логин'
<div style={{
display: 'flex',
flexDirection: 'column',
gap: '1rem'
}}>
<Field label={'Логин'} validationState={errors.username?.message ? 'error' : 'none'}>
<Input
required
{...register('username', { required: 'Введите логин' })}
error={errors.username?.message}
/>
</Field>
<TextInput
label='Пароль'
type='password'
<Field label={'Пароль'} validationState={errors.password?.message ? 'error' : 'none'}>
<Input
required
type='password'
{...register('password', { required: 'Введите пароль' })}
error={errors.password?.message}
/>
</Field>
<Flex justify='flex-end' gap='sm'>
<Button component='a' href='/auth/password-reset' variant='transparent'>
<Link href='/auth/password-reset'>
Восстановить пароль
</Button>
</Flex>
</Link>
<Flex gap='sm'>
<Button disabled={!isValid} type="submit" flex={1} variant='filled'>
{isSubmitting ? <Loader size={16} /> : 'Вход'}
<Button disabled={!isValid} type="submit" appearance='primary' icon={isSubmitting ? <Spinner size='extra-tiny' /> : undefined}>
Вход
</Button>
{/* <Button component='a' flex={1} href='/auth/signup' type="button" variant='light'>
{pages.find(page => page.path === '/auth/signup')?.enabled &&
<Button as='a' href='/auth/signup' type="button" appearance='subtle'>
Регистрация
</Button> */}
</Flex>
</Flex>
</Button>}
</div>
</form>
</Flex>
</Paper>
</div>
);
};

78
client/src/pages/auth/SignUp.tsx
View File

@ -1,7 +1,7 @@
import { useForm, SubmitHandler } from 'react-hook-form';
import UserService from '../../services/UserService';
import { IUser } from '../../interfaces/user';
import { Button, Flex, Loader, Paper, Text, TextInput } from '@mantine/core';
import { Button, Field, Input, Spinner, Text } from '@fluentui/react-components';
const SignUp = () => {
const { register, handleSubmit, formState: { errors, isValid, isSubmitting } } = useForm<IUser>({
@ -26,66 +26,76 @@ const SignUp = () => {
};
return (
<Paper flex={1} maw='500' withBorder radius='md' p='xl'>
<Flex direction='column' gap='sm'>
<Text size="xl" fw={500}>
<div style={{
display: 'flex',
margin: 'auto',
flexDirection: 'column',
gap: '1rem',
maxWidth: '400px',
width: '100%',
height: 'min-content',
borderRadius: '1rem',
border: '1px solid #00000030',
padding: '2rem'
}}>
<Text align='center' size={500} weight='bold'>
Регистрация
</Text>
<form onSubmit={handleSubmit(onSubmit)}>
<Flex direction='column' gap='sm'>
<TextInput
label='Email'
<div style={{
display: 'flex',
flexDirection: 'column',
gap: '1rem'
}}>
<Field label={'Email'} validationState={errors.email?.message ? 'error' : 'none'}>
<Input
required
{...register('email', { required: 'Email обязателен' })}
error={errors.email?.message}
/>
</Field>
<TextInput
label='Логин'
<Field label={'Логин'} validationState={errors.login?.message ? 'error' : 'none'}>
<Input
required
{...register('login', { required: 'Логин обязателен' })}
error={errors.login?.message}
/>
</Field>
<TextInput
label='Телефон'
<Field label={'Телефон'} validationState={errors.phone?.message ? 'error' : 'none'}>
<Input
required
{...register('phone')}
error={errors.phone?.message}
{...register('phone', { required: 'Телефон обязателен' })}
/>
</Field>
<TextInput
label='Имя'
<Field label={'Имя'} validationState={errors.name?.message ? 'error' : 'none'}>
<Input
required
{...register('name')}
error={errors.name?.message}
{...register('name', { required: 'Имя обязательно' })}
/>
</Field>
<TextInput
label='Фамилия'
<Field label={'Фамилия'} validationState={errors.surname?.message ? 'error' : 'none'}>
<Input
required
{...register('surname')}
error={errors.surname?.message}
{...register('surname', { required: 'Фамилия обязательна' })}
/>
</Field>
<TextInput
label='Пароль'
type="password"
<Field label={'Пароль'} validationState={errors.password?.message ? 'error' : 'none'}>
<Input
required
{...register('password', { required: 'Пароль обязателен' })}
error={errors.password?.message}
/>
</Field>
<Flex gap='sm'>
<Button disabled={!isValid} type="submit" flex={1} variant='filled'>
{isSubmitting ? <Loader size={16} /> : 'Зарегистрироваться'}
<Button disabled={!isValid} type="submit" appearance='primary'>
{isSubmitting ? <Spinner /> : 'Зарегистрироваться'}
</Button>
</Flex>
</Flex>
</div>
</form>
</Flex>
</Paper>
</div>
);
};

6
client/src/store/objects.ts
View File

@ -2,7 +2,7 @@ import { create } from 'zustand';
interface ObjectsState {
id: Record<string, {
selectedRegion: number | null;
selectedRegion: number | undefined;
selectedDistrict: number | null;
selectedCity: number | null;
selectedYear: number | null;
@ -16,7 +16,7 @@ export const useObjectsStore = create<ObjectsState>(() => ({
export const initializeObjectsState = (
id: string,
selectedRegion: number | null,
selectedRegion: number | undefined,
selectedDistrict: number | null,
selectedCity: number | null,
selectedYear: number | null,
@ -46,7 +46,7 @@ export const setSelectedCity = (id: string, city: number | null) => useObjectsSt
})
export const getSelectedRegion = (id: string) => useObjectsStore.getState().id[id].selectedRegion
export const setSelectedRegion = (id: string, region: number | null) => useObjectsStore.setState((state) => {
export const setSelectedRegion = (id: string, region: number | undefined) => useObjectsStore.setState((state) => {
return {
id: {
...state.id,

1911
client/yarn.lock
View File

File diff suppressed because it is too large Load Diff

11
docker-compose.yml
View File

@ -22,6 +22,17 @@ services:
# - ${REDIS_PORT}:${REDIS_PORT}
# restart: unless-stopped
backend:
container_name: backend
build:
context: ./server
dockerfile: Dockerfile
environment:
- EMS_PORT=${EMS_PORT}
ports:
- ${EMS_PORT}:${EMS_PORT}
restart: always
ems:
container_name: ems
build:

17
server/Dockerfile Normal file
View File

@ -0,0 +1,17 @@
FROM node:lts-alpine AS base
FROM base AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
EXPOSE $EMS_PORT
CMD ["node", "dist/main"]

2
server/src/main.ts
View File

@ -18,6 +18,6 @@ async function bootstrap() {
const documentFactory = () => SwaggerModule.createDocument(app, config)
SwaggerModule.setup('docs', app, documentFactory)
await app.listen(process.env.PORT ?? 3000);
await app.listen(process.env.EMS_PORT ?? 3000);
}
bootstrap();