260 lines
8.2 KiB
TypeScript
260 lines
8.2 KiB
TypeScript
import { formatDate } from '@/utils/slave/sgw/timeUtils';
|
|
import { getTripState } from '@/utils/slave/sgw/tripUtils';
|
|
import { ProDescriptions } from '@ant-design/pro-components';
|
|
import { useIntl } from '@umijs/max';
|
|
import { ShipDetailData } from '../type';
|
|
|
|
interface ShipSpecificationTabProps {
|
|
ship: ShipDetailData | null;
|
|
}
|
|
|
|
export const ShipSpecificationTab = ({ ship }: ShipSpecificationTabProps) => {
|
|
const intl = useIntl();
|
|
return (
|
|
<ProDescriptions
|
|
styles={{
|
|
title: {
|
|
marginBottom: -16,
|
|
textAlign: 'center',
|
|
marginTop: 10,
|
|
fontSize: window.innerWidth <= 576 ? '14px' : '16px',
|
|
},
|
|
content: { paddingBottom: 1 },
|
|
label: { paddingBottom: 1 },
|
|
}}
|
|
dataSource={{
|
|
reg_number: ship?.ship?.reg_number || '-',
|
|
imo_number: ship?.ship?.imo_number || '-',
|
|
mmsi_number: ship?.ship?.mmsi_number || '-',
|
|
ship_owner: ship?.owner?.metadata?.full_name || '-',
|
|
ship_type: ship?.ship?.metadata?.ship_type || '-',
|
|
ship_length: ship?.ship?.ship_length || '-',
|
|
power_kw: ship?.ship?.ship_power ?? '-',
|
|
fishing_license_number: ship?.ship?.fishing_license_number || '-',
|
|
fishing_license_expiry_date:
|
|
formatDate(ship?.ship?.fishing_license_expiry_date || '') ?? '-',
|
|
}}
|
|
column={{ xs: 1, sm: 2, md: 3 }}
|
|
columns={[
|
|
{
|
|
title: intl.formatMessage({
|
|
id: 'map.ship_detail.reg_number',
|
|
defaultMessage: 'Registration Number',
|
|
}),
|
|
key: 'reg_number',
|
|
dataIndex: 'reg_number',
|
|
copyable: true,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: intl.formatMessage({
|
|
id: 'map.ship_detail.imo_number',
|
|
defaultMessage: 'IMO Number',
|
|
}),
|
|
key: 'imo_number',
|
|
dataIndex: 'imo_number',
|
|
copyable: true,
|
|
},
|
|
{
|
|
title: intl.formatMessage({
|
|
id: 'map.ship_detail.mmsi_number',
|
|
defaultMessage: 'MMSI Number',
|
|
}),
|
|
key: 'mmsi_number',
|
|
dataIndex: 'mmsi_number',
|
|
copyable: true,
|
|
},
|
|
{
|
|
title: intl.formatMessage({
|
|
id: 'map.ship_detail.ship_owner',
|
|
defaultMessage: 'Ship Owner',
|
|
}),
|
|
key: 'ship_owner',
|
|
dataIndex: 'ship_owner',
|
|
},
|
|
{
|
|
title: intl.formatMessage({
|
|
id: 'map.filter.ship_type',
|
|
defaultMessage: 'Ship Type',
|
|
}),
|
|
key: 'ship_type',
|
|
dataIndex: 'ship_type',
|
|
},
|
|
{
|
|
title: intl.formatMessage({
|
|
id: 'map.filter.ship_power',
|
|
defaultMessage: 'Power (kW)',
|
|
}),
|
|
key: 'power_kw',
|
|
dataIndex: 'power_kw',
|
|
render: (text) => `${text} kw`,
|
|
},
|
|
{
|
|
title: intl.formatMessage({
|
|
id: 'map.filter.ship_length',
|
|
defaultMessage: 'Ship Length (m)',
|
|
}),
|
|
key: 'ship_length',
|
|
dataIndex: 'ship_length',
|
|
render: (text) => `${text} m`,
|
|
},
|
|
{
|
|
title: intl.formatMessage({
|
|
id: 'map.ship_detail.fishing_license',
|
|
defaultMessage: 'Fishing License',
|
|
}),
|
|
tooltip: intl.formatMessage({
|
|
id: 'map.ship_detail.fishing_license_number',
|
|
defaultMessage: 'Fishing License Number',
|
|
}),
|
|
key: 'fishing_license_number',
|
|
dataIndex: 'fishing_license_number',
|
|
},
|
|
{
|
|
title: intl.formatMessage({
|
|
id: 'map.ship_detail.fishing_license_expiry',
|
|
defaultMessage: 'Expiry',
|
|
}),
|
|
tooltip: intl.formatMessage({
|
|
id: 'map.ship_detail.fishing_license_expiry_message',
|
|
defaultMessage: 'Fishing License Expiration Date',
|
|
}),
|
|
key: 'fishing_license_expiry_date',
|
|
dataIndex: 'fishing_license_expiry_date',
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export const ShipTripInfoTab = ({ ship }: ShipSpecificationTabProps) => {
|
|
const intl = useIntl();
|
|
return (
|
|
<>
|
|
<ProDescriptions
|
|
styles={{
|
|
title: {
|
|
marginBottom: -16,
|
|
textAlign: 'center',
|
|
fontSize: window.innerWidth <= 576 ? '14px' : '16px',
|
|
},
|
|
content: { paddingBottom: 1 },
|
|
label: { paddingBottom: 1 },
|
|
}}
|
|
/>
|
|
<ProDescriptions column={2} style={{ marginBottom: 10 }}>
|
|
<ProDescriptions.Item
|
|
label={intl.formatMessage({
|
|
id: 'map.ship_detail.trip_name',
|
|
defaultMessage: 'Trip Name',
|
|
})}
|
|
>
|
|
{ship?.ship?.metadata?.trip_name || '-'}
|
|
</ProDescriptions.Item>
|
|
<ProDescriptions.Item
|
|
label={intl.formatMessage({
|
|
id: 'map.ship_detail.trip_state',
|
|
defaultMessage: 'Status',
|
|
})}
|
|
>
|
|
{getTripState(ship?.ship?.metadata?.trip_state) || '-'}
|
|
</ProDescriptions.Item>
|
|
</ProDescriptions>
|
|
|
|
{/* Hàng 2 + Hàng 3 */}
|
|
<ProDescriptions column={3} style={{ marginBottom: 10 }}>
|
|
<ProDescriptions.Item
|
|
label={intl.formatMessage({
|
|
id: 'map.ship_detail.captain',
|
|
defaultMessage: 'Captain',
|
|
})}
|
|
valueType={'text'}
|
|
>
|
|
{/* {ship?.ship?.metadata?.captain ?? '-'} */} -
|
|
</ProDescriptions.Item>
|
|
<ProDescriptions.Item
|
|
ellipsis
|
|
style={{ maxWidth: 200 }}
|
|
tooltip={intl.formatMessage({
|
|
id: 'map.ship_detail.trip_departure_port_tooltip',
|
|
defaultMessage: 'Departure Port',
|
|
})}
|
|
label={intl.formatMessage({
|
|
id: 'map.ship_detail.trip_departure_port',
|
|
defaultMessage: 'Departure Port',
|
|
})}
|
|
>
|
|
{ship?.ship?.metadata?.trip_depart_port || '-'}
|
|
</ProDescriptions.Item>
|
|
<ProDescriptions.Item
|
|
tooltip={intl.formatMessage({
|
|
id: 'map.ship_detail.trip_departure_time_tooltip',
|
|
defaultMessage: 'Departure Time',
|
|
})}
|
|
label={intl.formatMessage({
|
|
id: 'map.ship_detail.trip_departure_time',
|
|
defaultMessage: 'Departure Time',
|
|
})}
|
|
>
|
|
{ship?.ship?.metadata?.trip_departure_time
|
|
? formatDate(ship?.ship?.metadata?.trip_departure_time)
|
|
: '-'}
|
|
</ProDescriptions.Item>
|
|
<ProDescriptions.Item
|
|
label={intl.formatMessage({
|
|
id: 'map.ship_detail.trip_crews',
|
|
defaultMessage: 'Crews',
|
|
})}
|
|
valueType={'text'}
|
|
>
|
|
{ship?.ship?.metadata?.crew_count ?? '-'} người
|
|
</ProDescriptions.Item>
|
|
<ProDescriptions.Item
|
|
ellipsis
|
|
style={{ maxWidth: 200 }}
|
|
tooltip={intl.formatMessage({
|
|
id: 'map.ship_detail.trip_arrival_port_tooltip',
|
|
defaultMessage: 'Arrival Port',
|
|
})}
|
|
label={`${intl.formatMessage({
|
|
id: 'map.ship_detail.trip_arrival_port',
|
|
defaultMessage: 'Arrival Port',
|
|
})} ${
|
|
ship?.ship.metadata?.trip_state !== 4
|
|
? `(${intl.formatMessage({
|
|
id: 'map.ship_detail.trip_estimated',
|
|
defaultMessage: 'Estimated',
|
|
})})`
|
|
: ''
|
|
}`}
|
|
>
|
|
{ship?.ship?.metadata?.trip_arrival_port || '-'}
|
|
</ProDescriptions.Item>
|
|
<ProDescriptions.Item
|
|
ellipsis
|
|
style={{ maxWidth: 200 }}
|
|
tooltip={intl.formatMessage({
|
|
id: 'map.ship_detail.trip_arrival_time_tooltip',
|
|
defaultMessage: 'Arrival Time',
|
|
})}
|
|
label={`${intl.formatMessage({
|
|
id: 'map.ship_detail.trip_arrival_time',
|
|
defaultMessage: 'Arrival Time',
|
|
})} ${
|
|
ship?.ship.metadata?.trip_state !== 4
|
|
? `(${intl.formatMessage({
|
|
id: 'map.ship_detail.trip_estimated',
|
|
defaultMessage: 'Estimated',
|
|
})})`
|
|
: ''
|
|
}`}
|
|
>
|
|
{ship?.ship?.metadata?.trip_arrival_time
|
|
? formatDate(ship?.ship?.metadata?.trip_arrival_time)
|
|
: '-'}
|
|
</ProDescriptions.Item>
|
|
</ProDescriptions>
|
|
</>
|
|
);
|
|
};
|