62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
import { convertToDMS } from '@/services/service/MapService';
|
|
import { ProDescriptions } from '@ant-design/pro-components';
|
|
import { useIntl } from '@umijs/max';
|
|
import { GpsData } from '..';
|
|
const GpsInfo = ({ gpsData }: { gpsData: GpsData | null }) => {
|
|
const intl = useIntl();
|
|
return (
|
|
<ProDescriptions<GpsData>
|
|
dataSource={gpsData || undefined}
|
|
layout="horizontal"
|
|
// responsive columns
|
|
column={{
|
|
xs: 1, // mobile
|
|
sm: 1,
|
|
md: 2, // tablet
|
|
lg: 2,
|
|
xl: 2,
|
|
}}
|
|
columns={[
|
|
{
|
|
title: intl.formatMessage({ id: 'map.ship.longitude' }),
|
|
dataIndex: 'lat',
|
|
render: (_, record) =>
|
|
record?.lat !== null ? `${convertToDMS(record.lat, true)}°` : '--',
|
|
},
|
|
{
|
|
title: intl.formatMessage({ id: 'map.ship.latitude' }),
|
|
dataIndex: 'lon',
|
|
render: (_, record) =>
|
|
record?.lon !== null ? `${convertToDMS(record.lon, false)}°` : '--',
|
|
},
|
|
{
|
|
title: intl.formatMessage({ id: 'map.ship.speed' }),
|
|
dataIndex: 's',
|
|
valueType: 'digit',
|
|
render: (_, record) =>
|
|
record?.s !== null
|
|
? `${record.s} ${intl.formatMessage({ id: 'unit.kmh' })}`
|
|
: `-- ${intl.formatMessage({ id: 'unit.kmh' })}`,
|
|
span: 1,
|
|
},
|
|
{
|
|
title: intl.formatMessage({ id: 'map.ship.course' }),
|
|
dataIndex: 'h',
|
|
valueType: 'digit',
|
|
render: (_, record) => `${record.h}°`,
|
|
span: 1,
|
|
},
|
|
{
|
|
title: intl.formatMessage({ id: 'map.ship.state' }),
|
|
tooltip: intl.formatMessage({ id: 'map.ship.state.tooltip' }),
|
|
dataIndex: 'fishing',
|
|
render: (_, record) =>
|
|
record?.fishing ? `${intl.formatMessage({ id: 'map.ship.state.fishing' })}` : `${intl.formatMessage({ id: 'map.ship.state.notFishing' })}`,
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default GpsInfo;
|