feat(sgw): Add new services and utilities for ship, trip, and photo management

src/pages/Slave/SGW/Map/components/MultipleShips.tsx

@@ -0,0 +1,64 @@
+import { useIntl } from '@umijs/max';
+import { Collapse, Flex, Typography } from 'antd';
+import { MessageInstance } from 'antd/es/message/interface';
+import { GPSParseResult } from '../type';
+import { BaseMap } from './BaseMap';
+import ShipDetail from './ShipDetail';
+
+const MultipleShips = ({
+  things,
+  messageApi,
+  mapController,
+}: {
+  things: SgwModel.SgwThing[];
+  messageApi: MessageInstance;
+  mapController: BaseMap | null;
+}) => {
+  const intl = useIntl();
+  return (
+    <Collapse
+      bordered={false}
+      style={{
+        background: 'white',
+      }}
+      // onChange={handleCollapseChange}
+      items={things.map((thing, index) => {
+        const gpsData: GPSParseResult = JSON.parse(thing.metadata?.gps || '{}');
+        return {
+          key: index,
+          label: (
+            <Flex
+              justify="space-between"
+              align="center"
+              style={{ width: '100%', marginBottom: 10 }}
+            >
+              <Typography.Text strong>
+                {thing.metadata?.ship_name || thing.name}
+              </Typography.Text>
+              <div style={{ display: 'flex', gap: '10px' }}>
+                <Typography.Text strong>
+                  ${intl.formatMessage({ id: 'map.ship_detail.speed' })}:{' '}
+                  {gpsData.s} km/h
+                </Typography.Text>
+                <Typography.Text>-</Typography.Text>
+                <Typography.Text strong>
+                  {intl.formatMessage({ id: 'map.ship_detail.heading' })}:{' '}
+                  {gpsData.h}°
+                </Typography.Text>
+              </div>
+            </Flex>
+          ),
+          children: (
+            <ShipDetail
+              thing={thing}
+              messageApi={messageApi}
+              mapController={mapController}
+            />
+          ),
+        };
+      })}
+    ></Collapse>
+  );
+};
+
+export default MultipleShips;