forked from ddrilling/asb_cloud_front
94 lines
2.6 KiB
JavaScript
94 lines
2.6 KiB
JavaScript
import {Table} from 'antd';
|
||
import {MessageService} from '../services/api'
|
||
import {useState, useEffect} from 'react'
|
||
import {useParams} from 'react-router-dom'
|
||
import {Subscribe} from '../services/signalr'
|
||
import Loader from '../components/Loader'
|
||
import moment from 'moment';
|
||
import '../styles/message.css'
|
||
import Notification from '../components/Notification'
|
||
|
||
|
||
// Словарь категорий для строк таблицы
|
||
const categoryDictionary = {
|
||
1: {title: 'Авария'},
|
||
2: {title: 'Предупреждение'},
|
||
3: {title: 'Информация'},
|
||
}
|
||
|
||
// Конфигурация таблицы
|
||
const columns = [
|
||
{
|
||
title: 'Дата',
|
||
key: 'date',
|
||
dataIndex: 'date',
|
||
render: (item) => moment(item).format('DD MMM YYYY, HH:MM:ss'),
|
||
sorter: (a, b) => new Date(b.date) - new Date(a.date),
|
||
sortDirections: ['descend', 'ascend'],
|
||
},
|
||
{
|
||
title: 'Категория',
|
||
key: 'categoryId',
|
||
dataIndex: 'categoryId',
|
||
render: (_, item) => categoryDictionary[item.categoryId].title,
|
||
style: (_, item) => categoryDictionary[item.categoryId].style,
|
||
sorter: (a, b) => a.categoryId - b.categoryId,
|
||
sortDirections: ['descend', 'ascend'],
|
||
},
|
||
{
|
||
title: 'Сообщение',
|
||
key: 'message',
|
||
dataIndex: 'message',
|
||
onFilter: (value, record) => record.name.indexOf(value) === 0,
|
||
},
|
||
{
|
||
title: 'Пользователь',
|
||
key: 'user',
|
||
dataIndex: 'user',
|
||
},
|
||
];
|
||
|
||
// Данные для таблицы
|
||
export default function Messages() {
|
||
let {id} = useParams()
|
||
const [messages, setMessages] = useState([])
|
||
const [loader] = useState(false)
|
||
|
||
const handleReceiveMessages = (messages) => {
|
||
if (messages) {
|
||
setMessages(messages.items)
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
MessageService.getMessage(id)
|
||
.then(handleReceiveMessages)
|
||
.catch ((ex) => {
|
||
Notification(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
|
||
console.log(ex)
|
||
})
|
||
|
||
let unSubscribeMessagesHub = Subscribe('ReceiveMessages', `well_${id}`, handleReceiveMessages)
|
||
return () => {
|
||
unSubscribeMessagesHub()
|
||
}
|
||
}, [id]);
|
||
|
||
return (
|
||
<>
|
||
<h2>Сообщения</h2>
|
||
<hr/>
|
||
<Table
|
||
columns={columns}
|
||
dataSource={messages}
|
||
rowClassName={(record) => `event_message_${record.categoryId} event_message`}
|
||
size={'small'}
|
||
pagination={{pageSize: 28}}
|
||
rowKey={(record) => record.id}
|
||
/>
|
||
{loader && <Loader/>}
|
||
</>
|
||
)
|
||
}
|
||
|
||
// TODO Стили для отсортированных страниц
|